/* Dispatch station: desktop wedge scanning with direct mobile barcode and parcel-photo capture. @req SCN-1 @req SCN-3 @req SCN-7 @req SCN-9 @req GUI-1 */
.os-mobile-station { display: grid; gap: 1rem; max-width: 72rem; margin-inline: auto; }
.os-station-card { min-width: 0; padding: 1rem; border: 1px solid var(--gray-200); border-radius: .75rem; background: white; }
.dark .os-station-card { border-color: var(--gray-700); background: var(--gray-900); }
.os-station-card h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.os-station-card p { margin-block: .45rem; color: var(--gray-600); overflow-wrap: anywhere; }
.dark .os-station-card p { color: var(--gray-300); }
.os-station-configuration { display: grid; gap: .75rem; }
.os-station-fields { display: grid; gap: .75rem; }
.os-station-field label { display: block; margin-bottom: .3rem; font-size: .8125rem; font-weight: 650; }
.os-station-field select,
.os-station-field input { width: 100%; min-height: 3rem; border: 1px solid var(--gray-300); border-radius: .55rem; padding: .6rem .75rem; background: transparent; font-size: 1rem; }
.dark .os-station-field select,
.dark .os-station-field input { border-color: var(--gray-600); }
.os-station-field input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: .025em; }
.os-station-field select:focus-visible,
.os-station-field input:focus-visible,
.os-mobile-station button:focus-visible { outline: 3px solid var(--primary-500); outline-offset: 2px; }
.os-station-actions { display: flex; gap: .65rem; flex-wrap: wrap; }
.os-station-actions > * { flex: 1 1 10rem; min-height: 3rem; }
.os-station-meta { display: flex; gap: .5rem 1rem; flex-wrap: wrap; font-size: .8125rem; }
.os-station-card .os-station-close-note { margin-bottom: 0; font-size: .75rem; }
.os-station-close-dialog { width: min(32rem, calc(100vw - 2rem)); padding: 1.25rem; border: 1px solid var(--gray-300); border-radius: .75rem; background: white; color: var(--gray-950); box-shadow: 0 1.5rem 4rem rgb(15 23 42 / .28); }
.os-station-close-dialog::backdrop { background: rgb(15 23 42 / .62); }
.os-station-close-dialog h2 { margin: 0; font-size: 1.2rem; }
.os-station-close-dialog p { margin-block: .65rem 1.1rem; }
.dark .os-station-close-dialog { border-color: var(--gray-600); background: var(--gray-900); color: var(--gray-50); }
.os-station-result { display: grid; place-items: center; min-height: 12rem; text-align: center; border-width: 2px; }
.os-station-result h2 { font-size: clamp(1.6rem, 8vw, 3rem); line-height: 1.05; }
.os-station-result code { display: block; max-width: 100%; margin-top: .7rem; font-size: clamp(1rem, 5vw, 1.5rem); overflow-wrap: anywhere; }
.os-station-result[data-result=ready] { border-color: var(--gray-300); }
.os-station-result[data-result=queued] { border-color: var(--warning-500); background: color-mix(in srgb, var(--warning-50) 85%, white); }
.os-station-result[data-result=accepted] { border-color: var(--success-500); background: color-mix(in srgb, var(--success-50) 88%, white); }
.os-station-result[data-result=duplicate] { border-color: var(--warning-500); background: color-mix(in srgb, var(--warning-50) 88%, white); }
.os-station-result[data-result=rejected] { border-color: var(--danger-500); background: color-mix(in srgb, var(--danger-50) 88%, white); }
.dark .os-station-result[data-result=queued],
.dark .os-station-result[data-result=duplicate] { background: color-mix(in srgb, var(--warning-950) 38%, var(--gray-900)); }
.dark .os-station-result[data-result=accepted] { background: color-mix(in srgb, var(--success-950) 38%, var(--gray-900)); }
.dark .os-station-result[data-result=rejected] { background: color-mix(in srgb, var(--danger-950) 38%, var(--gray-900)); }
.os-station-scan { display: grid; gap: .9rem; }
.os-station-wedge { display: none; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .65rem; align-items: baseline; padding: .75rem; border: 1px solid var(--primary-200); border-radius: .6rem; background: color-mix(in srgb, var(--primary-50) 75%, white); }
.os-station-wedge strong { font-size: .8125rem; }
.os-station-wedge span { min-width: 0; overflow-wrap: anywhere; }
.os-station-wedge small { grid-column: 1 / -1; color: var(--gray-600); }
.os-station-wedge kbd { display: inline-block; min-width: 1.5rem; padding: .05rem .3rem; border: 1px solid var(--gray-300); border-bottom-width: 2px; border-radius: .25rem; background: white; color: var(--gray-900); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; }
.dark .os-station-wedge { border-color: var(--primary-700); background: color-mix(in srgb, var(--primary-950) 32%, var(--gray-900)); }
.dark .os-station-wedge small { color: var(--gray-300); }
.os-station-camera { width: 100%; max-height: 20rem; border-radius: .6rem; background: #05070c; object-fit: cover; }
.os-station-photo { display: grid; gap: .8rem; }
.os-station-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.os-station-photo-progress { display: grid; grid-template-columns: auto minmax(8rem, 1fr) auto; gap: .6rem; align-items: center; font-size: .8125rem; }
.os-station-photo-progress progress { width: 100%; accent-color: var(--primary-600); }
.os-station-photo-recent { display: grid; gap: .4rem; }
.os-station-photo-recent li { padding-top: .55rem; border-top: 1px solid var(--gray-200); }
.os-station-photo-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.os-station-photo-item-no-image { grid-template-columns: minmax(0, 1fr); }
.os-station-photo-thumbnail { width: 4.5rem; height: 4.5rem; border-radius: .5rem; background: var(--gray-100); object-fit: cover; }
.os-station-photo-summary { display: grid; min-width: 0; gap: .35rem; }
.os-station-photo-heading { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.os-station-photo-chip,
.os-station-photo-origin { display: inline-flex; padding: .15rem .5rem; border: 1px solid var(--gray-300); border-radius: 999px; font-size: .72rem; font-weight: 650; }
.os-station-photo-chip[data-status=unresolved] { border-color: var(--warning-400); color: var(--warning-700); }
.os-station-photo-chip[data-status=detected],
.os-station-photo-chip[data-status=manual] { border-color: var(--success-400); color: var(--success-700); }
.os-station-photo-summary code { overflow-wrap: anywhere; }
.os-station-photo-summary small { color: var(--gray-600); }
.os-station-photo-summary time { font-size: .75rem; color: var(--gray-500); }
.dark .os-station-photo-recent li { border-color: var(--gray-700); }
.dark .os-station-photo-thumbnail { background: var(--gray-800); }
.dark .os-station-photo-chip,
.dark .os-station-photo-origin { border-color: var(--gray-600); }
.dark .os-station-photo-chip[data-status=unresolved] { border-color: var(--warning-600); color: var(--warning-300); }
.dark .os-station-photo-chip[data-status=detected],
.dark .os-station-photo-chip[data-status=manual] { border-color: var(--success-600); color: var(--success-300); }
.dark .os-station-photo-summary small { color: var(--gray-300); }
.os-station-pending,
.os-station-failed { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .25rem .7rem; border: 1px solid var(--gray-300); border-radius: 999px; font-size: .8125rem; }
.os-station-failed { border-color: var(--danger-300); }
.dark .os-station-pending { border-color: var(--gray-600); }
.dark .os-station-failed { border-color: var(--danger-700); }
.os-station-history ol,
.os-station-attention ol { display: grid; gap: .6rem; margin-top: .8rem; }
.os-station-history li,
.os-station-attention li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .65rem; align-items: start; padding: .75rem 0; border-top: 1px solid var(--gray-200); }
.dark .os-station-history li,
.dark .os-station-attention li { border-color: var(--gray-700); }
.os-station-history li strong,
.os-station-attention li strong { grid-column: 1 / -1; }
.os-station-history li code,
.os-station-attention li code { overflow-wrap: anywhere; }
.os-station-history li time,
.os-station-attention li time { justify-self: end; font-size: .75rem; color: var(--gray-500); }
/* The phone's canonical session tail is distinct from its local upload/device history. */
.os-mobile-session-history li { grid-template-columns: minmax(0, 1fr); }
.os-mobile-session-heading { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.os-mobile-session-origin { padding: .1rem .45rem; border: 1px solid var(--gray-300); border-radius: 999px; font-size: .75rem; }
.os-mobile-session-history li time { justify-self: start; overflow-wrap: anywhere; }
.dark .os-mobile-session-origin { border-color: var(--gray-600); }
.os-station-empty { padding-block: 1rem; }
.os-station-noscript { padding: 1rem; border: 1px solid var(--danger-500); border-radius: .6rem; }
[x-cloak] { display: none !important; }
@media (min-width: 760px) {
    .os-mobile-station { grid-template-columns: minmax(18rem, 1fr) minmax(22rem, 1.4fr); align-items: start; }
    .os-station-wedge { display: grid; }
    .os-station-configuration { grid-column: 1; }
    .os-station-result { grid-column: 2; grid-row: 1 / span 2; min-height: 20rem; }
    .os-station-scan { grid-column: 1; }
    .os-station-photo { grid-column: 1 / -1; }
    .os-station-history,
    .os-station-attention { grid-column: 1 / -1; }
    .os-station-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .os-mobile-station *, .os-mobile-station *::before, .os-mobile-station *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Shared desktop packing screen; the original phone station selectors remain unchanged. */
.os-packing-station { max-width: none; min-height: 70vh; }
.os-packing-review { display: grid; align-content: start; gap: .75rem; }
.os-packing-review dl { display: grid; gap: .5rem; }
.os-packing-review dl > div { display: flex; justify-content: space-between; gap: 1rem; }
.os-packing-review dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.os-packing-review a { color: var(--primary-600); text-decoration: underline; }
.os-packing-history ol { max-height: 65vh; overflow-y: auto; }
.os-packing-history li { display: grid; gap: .25rem; padding-block: .6rem; border-bottom: 1px solid var(--gray-200); overflow-wrap: anywhere; }
.os-packing-station:fullscreen { overflow-y: auto; padding: 1rem; background: var(--gray-50); }
.dark .os-packing-station:fullscreen { background: var(--gray-950); }
@media (min-width: 1100px) {
    .os-packing-station { grid-template-columns: minmax(14rem, 1fr) minmax(24rem, 2fr) minmax(15rem, 1fr); }
    .os-packing-station .os-station-configuration { grid-column: 1 / -1; grid-row: 1; }
    .os-packing-station .os-station-result { grid-column: 2; grid-row: 2; min-height: 16rem; }
    .os-packing-station .os-station-scan { grid-column: 2; grid-row: 3; }
    .os-packing-station .os-station-photo { grid-column: 2; grid-row: 4; }
    .os-packing-station .os-packing-history { grid-column: 1; grid-row: 2 / span 3; }
    .os-packing-station .os-packing-review { grid-column: 3; grid-row: 2 / span 3; }
    .os-packing-station .os-station-attention { grid-column: 1 / -1; }
}
@media (max-width: 1099px) {
    .os-packing-station { grid-template-columns: minmax(0, 1fr); }
    .os-packing-station > .os-station-card { grid-column: 1; grid-row: auto; }
    .os-packing-history ol { max-height: 30rem; }
}