/* Costume catalogue, booking, My costumes and the officer costume screens. */

.card-title-sm { font-size: 1.05rem; font-weight: 500; margin-bottom: 12px; }
.grow { flex: 1; min-width: 0; }

/* Search bar first, like a booking site */
.cos-search { margin-bottom: 16px; }
.cos-search-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(130px, 1fr)) repeat(2, minmax(120px, 1fr)) minmax(180px, 2fr) auto; align-items: end; }
.cos-search-btn { min-width: 120px; }
@media (max-width: 1100px) { .cos-search-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cos-search-row .field:nth-child(5), .cos-search-btn { grid-column: 1 / -1; } }
.cos-results-head { margin-bottom: 12px; }
.cos-results-head p { margin: 0; }

/* Segmented switch (My branch / All branches) */
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg a { padding: 7px 12px; border-radius: 8px; font-size: .88rem; font-weight: 500; color: var(--text-2); }
.seg a[aria-current='page'] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* Catalogue cards */
.cos-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.cos-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; color: inherit; }
.cos-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: inherit; }
.cos-photo { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.cos-photo img { width: 100%; height: 100%; object-fit: cover; }
.cos-state { position: absolute; left: 10px; top: 10px; }
.cos-state .badge { box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.cos-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.cos-code { font: 600 .74rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.cos-name { font: 500 1.02rem/1.25 var(--display); }
.cos-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--text-2); }
.cos-home { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--text-3); }
.cos-approval { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 600; color: var(--warn); }

/* Costume page */
.cos-detail { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; }
@media (max-width: 960px) { .cos-detail { grid-template-columns: 1fr; } }
.cos-media { display: grid; gap: 14px; }
.cos-hero { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--surface-2); }
.cos-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.cos-strip img { width: 92px; height: 70px; object-fit: cover; border-radius: 8px; flex: none; }
.cos-title { font-size: 1.5rem; margin: 6px 0 8px; }
.cos-facts .notice { margin-top: 14px; }
.cos-side { display: grid; gap: 16px; position: sticky; top: 84px; }
@media (max-width: 960px) { .cos-side { position: static; } }
.cos-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cos-dates input, .cos-search input[type="date"] { min-width: 0; }

/* My costumes */
.res-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; }
.res-thumb { width: 150px; height: 112px; object-fit: cover; border-radius: 10px; }
.res-main { display: grid; gap: 8px; min-width: 0; }
.res-title { font-size: 1.15rem; margin: 0; }
.res-facts { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: .88rem; color: var(--text-2); }
.res-facts span { display: inline-flex; gap: 6px; align-items: center; }
.res-late { color: var(--bad); font-weight: 600; }
.res-main .tracker { margin-top: 6px; }
@media (max-width: 640px) { .res-card { grid-template-columns: 1fr; } .res-thumb { width: 100%; height: 160px; } }

/* Ticket style reservation summary */
.ticket { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.ticket-photo { width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
.ticket-body { padding: 18px 20px; display: grid; gap: 6px; align-content: start; border-left: 2px dashed var(--line-2); }
.ticket-ref { font: 500 1.35rem/1 var(--display); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ticket-kv { margin-top: 8px; }
@media (max-width: 720px) { .ticket { grid-template-columns: 1fr; } .ticket-photo { height: 180px; min-height: 0; } .ticket-body { border-left: 0; border-top: 2px dashed var(--line-2); } }

/* Officer screens */
.inv-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; flex: none; }
.inv-preview { width: 220px; border-radius: 10px; }
.inv-gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.inv-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.inv-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.inv-head h2 { margin: 4px 0 10px; }
.inv-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
@media (max-width: 720px) { .inv-head { grid-template-columns: 1fr; } }
.clash-list { margin: 6px 0; padding-left: 18px; }
.act-stack > .act-form + .act-form { border-top: 1px solid var(--line); padding-top: 16px; }
.act-form { gap: 10px; }
.maint { display: flex; gap: 14px; align-items: flex-start; }
.maint .inv-thumb { width: 72px; height: 54px; }
.maint-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.maint-form select, .maint-form input[type='date'], .maint-form input[type='text'] { width: auto; min-height: 38px; padding: 6px 10px; }
.maint-form select { padding-right: 32px; }
.maint-form input[type='text'] { width: 120px; }