/* Storage floor app (warehouse.html) — the prototype's additions on top of
   pos_shell.css, all on the POS tokens (--acc, --line, --r, --font…).
   Loaded only by the storage screens that render in the POS shell. */
.pos-shell :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.pos-shell button { font-family: var(--font); }
.pos-ic { display: block; fill: none; stroke: currentColor; }

/* Tiles and rows are <a>/<button>; make buttons read like the POS links. */
.pos-tile, .pos-row, .pos-cta, .pos-alert, .pos-po, .pos-hrow, .pos-paytile, .pos-tool { font-family: var(--font); width: 100%; box-sizing: border-box; }
.pos-cta__glyph .pos-ic { width: 24px; height: 24px; }
/* The POS rule `.pos-shell a { color: inherit }` outranks .pos-cta, so links styled as
   filled blue buttons need their white text set back explicitly. */
.pos-shell a.pos-cta, .pos-shell a.pos-btn-primary { color: var(--acctext); }
.pos-hint { margin: 0; font: 500 12px/1.45 var(--font); color: var(--sub); }
.pos-po__meta2 { font: 500 11px/1.3 var(--font); color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos-bar { height: 6px; border-radius: 3px; background: var(--surfacealt); overflow: hidden; }
.pos-bar i { display: block; height: 100%; background: var(--acc); border-radius: 3px; }
.pos-tag { font: 700 9px/1 var(--font); padding: 3px 6px; border-radius: 5px; background: var(--surfacealt); color: var(--sub); }

/* Ticket screen. */
.pos-cartline__tag img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.pos-cartline__tag { overflow: hidden; background: var(--surfacealt); }
.pos-mini { flex: none; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--acc); border-radius: 9px; padding: 8px 11px; font: 700 11px/1 var(--font); }
.pos-mini:active { transform: scale(.96); }
.pos-mini--fill { border: none; background: var(--accfill); color: var(--acctext); }
.pos-sale__tools--2 { grid-template-columns: 1fr 1fr; }
.pos-tool:disabled { opacity: .45; cursor: not-allowed; }
.pos-feed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 14px; }
.pos-feed__row { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.pos-feed__row:last-child { border-bottom: 0; }
.pos-feed__glyph { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accsoft); color: var(--acc); display: flex; align-items: center; justify-content: center; }
.pos-feed__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pos-feed__t { font: 700 12.5px/1.25 var(--font); color: var(--text); }
.pos-feed__s { font: 500 11px/1.35 var(--font); color: var(--sub); }
.pos-feed__time { flex: none; font: 500 10.5px/1.25 var(--font); color: var(--sub); }

/* Sheets: form bits. */
.pos-fgroup { display: flex; flex-direction: column; gap: 7px; }
.pos-err { margin: 0; font: 600 12px/1.4 var(--font); color: var(--warn); }
.pos-photos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pos-addphoto { cursor: pointer; height: 52px; padding: 0 14px; display: flex; align-items: center; gap: 7px; border: 1.5px dashed var(--acc); border-radius: 9px; background: var(--accsoft); color: var(--acc); font: 600 11.5px/1 var(--font); }
.pos-addphoto--req { border-color: var(--warnline); background: var(--warnsoft); color: var(--warn); }
.pos-addphoto:active { transform: scale(.97); }
.pos-scanbox { position: relative; height: 200px; border-radius: 14px; background: #0b0f0e; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pos-scanbox__win { width: 62%; height: 56%; border: 2px solid rgba(255,255,255,.85); border-radius: 12px; position: relative; }
.pos-scanbox__line { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--accfill); box-shadow: 0 0 12px var(--accfill); animation: pos-scanline 1.6s ease-in-out infinite alternate; }
@keyframes pos-scanline { from { transform: translateY(-40px); } to { transform: translateY(40px); } }
@media (prefers-reduced-motion: reduce) { .pos-scanbox__line { animation: none; } }
.pos-scanbox__hint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 600 12px/1 var(--font); color: rgba(255,255,255,.85); }
.pos-seg--4 { grid-template-columns: repeat(4, 1fr); }
.pos-seg--2 { grid-template-columns: 1fr 1fr; }
select.pos-field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
textarea.pos-field { resize: none; }
.pos-check { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.pos-check input { width: 20px; height: 20px; accent-color: var(--acc); flex: none; }
.pos-check--on { border-color: var(--acc); background: var(--accsoft); }
.pos-gallery img { width: 100%; height: auto; border-radius: 12px; display: block; border: 1px solid var(--line); }
.pos-gallery figcaption { font: 500 11px/1.3 var(--font); color: var(--sub); margin-top: 5px; }
.pos-gallery figure { margin: 0; }
.pos-sk { border-radius: var(--r); background: var(--surfacealt); height: 76px; }
.pos-sk--tall { height: 120px; }
.pos-sk--cta { height: 86px; }

/* Server round-trips: a flash notice / alert at the top of a screen. */
.st-notice { border-radius: 12px; padding: 11px 13px; background: var(--accsoft); color: var(--acc); font: 700 12.5px/1.4 var(--font); }
.st-alert { border: 1px solid var(--warn); color: var(--warn); border-radius: 12px; padding: 11px 13px; font: 600 12.5px/1.4 var(--font); }
.st-alert ul { margin: 4px 0 0; padding-left: 18px; }
/* A <form> wrapping one button must not break the row it sits in. */
.st-inline { display: contents; }
.st-file { font: 500 12px var(--font); color: var(--sub); width: 100%; }
.st-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-mode { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.st-mode[aria-current="page"] { border-color: var(--acc); background: var(--accsoft); }
.st-mode__icon { width: 30px; height: 30px; border-radius: 8px; background: var(--accsoft); color: var(--acc); display: flex; align-items: center; justify-content: center; }
.st-mode__t { font: 800 14px/1.2 var(--font); }
.st-mode__s { font: 500 11px/1.3 var(--font); color: var(--sub); }
.st-video { width: 100%; border-radius: 14px; background: #0b0f0e; }
/* The shared qr-scanner controller shows/hides with the Tailwind `hidden` class,
   which the shell (no Tailwind) lacks. Scoped to the shell: this sheet is also
   bundled into the app layout, where an unscoped !important `.hidden` beats
   `lg:flex` and hides the sidebar. */
.pos-shell .hidden { display: none !important; }
/* A radio segment: the picked option lights up like .pos-seg__opt--on. */
.st-choice { position: relative; cursor: pointer; text-align: center; }
.st-choice:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.st-choice:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
/* The photo picker: the native file input is hidden inside the dashed button,
   which turns from "Add photo" (required) to "Photo added" once one is picked. */
.pos-addphoto { position: relative; }
.pos-addphoto .st-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pos-addphoto .st-photo-set { display: none; }
.pos-addphoto:has(.st-file:valid) { border-color: var(--acc); background: var(--accsoft); color: var(--acc); }
.pos-addphoto:has(.st-file:valid) .st-photo-empty { display: none; }
.pos-addphoto:has(.st-file:valid) .st-photo-set { display: inline; }

/* Storage move-ins (mock storage-move-ins.html): the Floor's "Moving in" tile,
   the list's cards, the customer screen's sheets, and the ticket's extras. */
.st-tile--wide { flex-direction: row; align-items: center; gap: 13px; border-width: 1.5px; border-color: var(--acc); }
.st-tile--wide .pos-tile__icon { flex: none; }
.st-warn { color: var(--warn); font-weight: 700; }
.st-ok { color: var(--ok); font-weight: 700; }
.pos-pill--ok { background: var(--surfacealt); color: var(--ok); }
.st-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.st-chips .pos-chip { flex: none; text-decoration: none; }
.st-movein { flex-direction: column; align-items: stretch; gap: 11px; }
.st-movein--call { border-color: var(--warnline); }
.st-movein__main { display: flex; align-items: flex-start; gap: 10px; color: inherit; text-decoration: none; }
.st-movein__name { font: 700 14px/1.15 var(--font); color: var(--text); }
.st-movein__flags { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-pill--paid { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.st-search { flex: none; }
.st-search .pos-field { padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
/* Units list: Previous · Page 1 of 2 · Next, under the cards. */
.st-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 12.5px/1.3 var(--font); color: var(--sub); }
.st-pager .pos-btn-ghost { flex: none; width: auto; padding: 10px 14px; text-decoration: none; }
/* The move-in screen's header: Call + WhatsApp, whoever holds the pick up. */
.st-contact { display: flex; gap: 8px; }
.st-contact a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.st-goods { display: flex; flex-direction: column; gap: 6px; }
.st-movein__acts { display: flex; gap: 8px; }
.st-movein__acts .pos-btn-primary { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.st-movein__acts .pos-btn-ghost { flex: none; width: auto; display: flex; align-items: center; justify-content: center; padding-left: 16px; padding-right: 16px; text-decoration: none; }
.st-address { font: 500 12.5px/1.45 var(--font); color: var(--text); }
.st-address a, .st-link { color: var(--acc); font-weight: 700; text-decoration: none; }
/* Sheet options: one radio per row, lit when picked (like .pos-check). */
.st-opt { position: relative; display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; font: 600 13.5px/1.3 var(--font); color: var(--text); }
.st-opt input { position: absolute; opacity: 0; pointer-events: none; }
.st-opt:has(input:checked) { border-color: var(--acc); background: var(--accsoft); }
.st-opt:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.st-opt__ic { flex: none; display: flex; }
.st-opt__ic--ok { color: var(--ok); } .st-opt__ic--warn { color: var(--warn); } .st-opt__ic--acc { color: var(--acc); } .st-opt__ic--sub { color: var(--sub); }
.st-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st-days .st-opt { justify-content: center; padding: 10px 6px; font-size: 12.5px; }
.st-sheet-form { display: flex; flex-direction: column; gap: 10px; }
/* The shared quantity stepper (shared/quantity_stepper) in the shell's look:
   its Tailwind classes are no-ops here, so the shell styles it. */
.st-stepper { display: flex; align-items: center; gap: 8px; }
.st-stepper button { cursor: pointer; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surfacealt); color: var(--text); font: 700 15px/1 var(--font); display: flex; align-items: center; justify-content: center; }
.st-stepper button:active { transform: scale(.9); }
.st-stepper input { width: 52px; box-sizing: border-box; text-align: center; border: 1px solid var(--line); border-radius: 9px; padding: 6px 4px; font: 700 13px var(--mono); color: var(--text); background: var(--surface); -moz-appearance: textfield; }
.st-stepper input::-webkit-outer-spin-button, .st-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-extra { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-extra__name { font: 700 12.5px/1.25 var(--font); color: var(--text); }
.st-extra__sub { font: 500 11px/1.3 var(--font); color: var(--sub); }
.st-total { font: 800 14px var(--font); color: var(--text); border-top: 1px solid var(--line); padding-top: 9px; }
.st-note { border-radius: 12px; padding: 11px 13px; background: var(--accsoft); color: var(--text); font: 500 12.5px/1.45 var(--font); }
.pos-btn-ok { background: var(--ok); color: #ffffff; }
.dark .pos-btn-ok { background: #046c4e; }
.st-days--3 { grid-template-columns: repeat(3, 1fr); }
.st-center { text-align: center; }
.st-chips { flex: none; }
.st-movein__acts .pos-btn-primary, .st-movein__acts .pos-btn-ghost { padding-top: 11px; padding-bottom: 11px; font-size: 13.5px; }
.st-extra--add { flex-direction: column; align-items: stretch; gap: 8px; }
.st-extra--add .st-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* "Add another extra": a searchable list instead of a native <select> that grows with the catalogue. */
.st-extra-picker__list { max-height: 14rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.st-extra-picker__opt { width: 100%; cursor: pointer; text-align: left; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.st-extra[hidden] { display: none; }
.st-extra-picker__opt:last-child { border-bottom: 0; }
.st-extra-picker__opt:hover, .st-extra-picker__opt:focus-visible { background: var(--surfacealt); }
.st-footbtns { grid-template-columns: 1fr 1.6fr; }
.st-footbtns > a, .st-footbtns > button { display: flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none; font-size: 14px; }
/* Pick up claim state on the customer screen: unclaimed / claimed for another Location. */
.st-claim { gap: 4px; border-color: var(--warnline); }

/* Unit page: each good's photo thumbnail beside its tick box, and the
   full-screen <dialog> its photos open in (tap anywhere or Esc closes). */
.st-good { display: flex; align-items: center; gap: 10px; }
.st-good .pos-check { flex: 1; min-width: 0; }
.st-thumb { position: relative; flex: none; width: 52px; height: 52px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surfacealt); color: var(--sub); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-thumb--none { cursor: default; }
.st-thumb__more { position: absolute; right: 3px; bottom: 3px; font: 700 10px/1 var(--font); padding: 3px 5px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; }
.st-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 12px; border: 0; box-sizing: border-box; background: rgba(0, 0, 0, .92); overflow-y: auto; }
.st-lightbox::backdrop { background: rgba(0, 0, 0, .92); }
.st-lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 24px); margin: 0 auto 12px; object-fit: contain; }
.st-lightbox__close { position: fixed; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px; cursor: pointer; }

/* Pick up page: "View quotation" — the quote as tables in a modal <dialog>
   (shared dialog controller). Figures right-aligned in mono; a wide table
   scrolls sideways inside the card on a phone. */
.st-quote { width: min(560px, calc(100vw - 16px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 18px; background: var(--surface); color: var(--text); box-sizing: border-box; overflow-y: auto; }
.st-quote::backdrop { background: rgba(0, 0, 0, .45); }
.st-quote__card { display: flex; flex-direction: column; gap: 10px; padding: 0 0 16px; }
.st-quote__card > :not(.pos-sheet__head) { margin-left: 14px; margin-right: 14px; }
.st-quote__head { margin-top: -6px; margin-bottom: 0; font: 600 12.5px/1.4 var(--font); color: var(--sub); }
.st-quote__sec { margin: 0 0 -4px; font: 700 13px var(--font); color: var(--text); }
.st-quote__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.st-quote__table { width: 100%; border-collapse: collapse; font: 500 12.5px/1.35 var(--font); }
.st-quote__table th { padding: 7px 8px; background: var(--surfacealt); font: 600 11px var(--font); color: var(--sub); text-align: left; white-space: nowrap; }
.st-quote__table td { padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.st-quote__table .st-num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.st-quote__off { display: block; font-size: 11px; color: var(--sub); }
.st-quote__totals { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; margin-bottom: 0; font: 500 12.5px var(--font); }
.st-quote__totals > div { display: flex; justify-content: space-between; gap: 12px; }
.st-quote__totals dt { color: var(--sub); }
.st-quote__totals dd { margin: 0; font-family: var(--mono); text-align: right; }
.st-quote__grand { padding-top: 6px; border-top: 1px solid var(--line); font-weight: 700; }
.st-quote__grand dt { color: var(--text); }

/* Floor search: the box with its clear ✕, the filter chips as radios (lit when
   picked, like .pos-chip--on), and the result cards. */
.st-search { display: flex; flex-direction: column; gap: 10px; }
.st-search__box { position: relative; }
.st-search__box .pos-field { padding-right: 42px; }
.st-search__x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--sub); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.st-chip-opt { position: relative; }
.st-chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.st-chip-opt:has(input:checked) { border-color: var(--acc); background: var(--accsoft); color: var(--acc); }
.st-chip-opt:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.st-results { display: flex; flex-direction: column; gap: 10px; }
.st-result { text-decoration: none; }
/* Search: an arriving pick up stands out from customers already in custody. */
.st-result--arriving { border-color: var(--acc); border-left-width: 4px; background: var(--accsoft); }
/* Pick up screen: Start check-in sits above the footer pair. */
.st-foot-gap { margin-bottom: 8px; }

/* Storage › Edit customer: fields flow 1 → 2 → 3 per row (CLAUDE.md §5.4.4). */
.st-fgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.st-fgrid__wide { grid-column: 1 / -1; }
@media (min-width: 640px)  { .st-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .st-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-dcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-foot-pair { display: flex; gap: 10px; }
.st-foot-pair > * { flex: 1; text-decoration: none; }