:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #e9edf2; color: #162435; min-height: 100%; }
body { height: 100dvh; overflow: hidden; }
.board-shell { height: 100%; display: flex; flex-direction: column; gap: clamp(7px,.8vw,14px); padding: clamp(8px,.8vw,16px); }
.board-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: none; background: #172535; border-radius: 10px; color: #fff; padding: clamp(10px,1vw,18px) clamp(14px,1.4vw,26px); }
.brand-line { display: flex; flex-direction: column; gap: 3px; }
.brand-line strong { font-size: clamp(1.45rem,1.9vw,2.5rem); letter-spacing: -.04em; line-height: 1; }
.brand-line span { text-transform: uppercase; letter-spacing: .1em; font-size: clamp(.7rem,.85vw,1rem); color: #cbd5e1; font-weight: 740; }
.board-meta { display: flex; align-items: center; gap: clamp(12px,1.8vw,34px); font-size: clamp(.8rem,1vw,1.2rem); font-weight: 730; }
.board-summary { display: flex; gap: 16px; } .board-summary span { white-space: nowrap; } .board-summary b { font-size: 1.35em; margin-right: 4px; }
.board-refresh { display: flex; align-items: center; gap: 7px; color: #baf1d1; white-space: nowrap; font-size: .83em; letter-spacing: .07em; }
.board-live-dot { background: #32d583; width: 9px; height: 9px; border-radius: 50%; }
.board-rotation { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 6px 13px; min-height: 30px; border-radius: 7px; background: #dbe6f3; color: #2a4b6d; font-weight: 720; font-size: clamp(.73rem,.83vw,1rem); }
.board-rotation strong { color: #173a5d; font-variant-numeric: tabular-nums; white-space: nowrap; background: #fff; padding: 4px 10px; border: 1px solid #c2d3e5; border-radius: 6px; }
@media(max-width:570px) { .board-rotation { flex-wrap: wrap; gap: 5px; padding: 7px 10px; } .board-rotation strong { padding: 3px 8px; } }

.board-pages { flex: 1; min-height: 0; }
.board-customer-page { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.board-customer-page[hidden] { display: none !important; }
.board-customer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-left: 6px solid #355d8a; background: #fff; border-radius: 8px; padding: 10px 18px; flex: none; }
.board-customer-heading h1 { font-size: clamp(1.35rem,2vw,2.3rem); line-height: 1.08; margin: 0; letter-spacing: -.035em; overflow-wrap: anywhere; }
.board-customer-heading span { font-size: clamp(.8rem,1.1vw,1.2rem); color: #667085; white-space: nowrap; font-weight: 720; }
.board-customer-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 310px),1fr)); gap: clamp(9px,1vw,18px); align-content: start; }
.shutdown-board-card { background: #fff; border: 1px solid #d0d8e2; border-radius: 10px; box-shadow: 0 2px 8px #17233410; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.shutdown-board-header { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px 13px; background: #243d59; color: #fff; }
.is-shipped .shutdown-board-header { background: #394c56; }
.shutdown-board-header h2 { font-size: clamp(1rem,1.15vw,1.45rem); line-height: 1.17; margin: 0; font-weight: 800; overflow-wrap: anywhere; min-width: 0; }
.shutdown-board-state { flex: none; font-size: clamp(.65rem,.72vw,.88rem); font-weight: 830; padding: 6px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.state-open { color: #064e3b; background: #a7f3d0; } .state-shipped { color: #14532d; background: #dcfce7; }
.shutdown-board-body { padding: 12px 13px; flex: 1; }
.shutdown-board-labels, .shutdown-board-values { display: grid; grid-template-columns: 29% minmax(0,1fr) 15%; gap: 6px; align-items: start; }
.shutdown-board-labels { color: #667085; text-transform: uppercase; font-size: clamp(.61rem,.65vw,.82rem); font-weight: 820; letter-spacing: .05em; margin-bottom: 7px; }
.shutdown-board-labels span:last-child, .shutdown-board-values > span:last-child { text-align: center; justify-self: center; }
.shutdown-board-unit { font-size: clamp(1.16rem,1.5vw,2rem); line-height: 1.2; font-weight: 820; overflow-wrap: anywhere; }
.shutdown-board-locations { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.board-location-chip { font-size: clamp(.8rem,.95vw,1.18rem); font-weight: 780; padding: 4px 6px; background: #edf2f9; color: #284769; border: 1px solid #cbd7e6; border-radius: 5px; }
.board-not-staged { color: #8a96a5; font-size: .78rem; font-weight: 650; }
.shutdown-board-check { border: 1px solid #e0e5ed; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 900; color: #8994a4; }
.shutdown-board-check.checked { background: #d1fae5; border-color: #b6ead3; color: #057647; }
.board-backorders { display: flex; flex-direction: column; gap: 3px; padding: 8px 13px 9px; background: #fff9ec; border-top: 1px solid #f0e6cc; font-size: clamp(.76rem,.78vw,.98rem); line-height: 1.35; }
.board-backorders strong { color: #805416; text-transform: uppercase; font-size: .82em; letter-spacing: .055em; }
.board-backorders span { font-weight: 700; color: #6e4c19; white-space: pre-wrap; overflow-wrap: anywhere; }
.shutdown-board-footer { display: flex; justify-content: space-between; gap: 9px; flex-wrap: wrap; padding: 8px 13px; background: #f7f9fc; border-top: 1px solid #e5e9ef; color: #516176; font-size: clamp(.7rem,.75vw,.92rem); font-weight: 710; }
.board-bottom { flex: none; display: flex; justify-content: space-between; gap: 10px; font-size: clamp(.72rem,.78vw,.95rem); font-weight: 660; color: #536274; padding: 0 5px; }
.board-error, .board-empty { background: #fff; border-radius: 10px; padding: 45px 20px; text-align: center; font-weight: 700; font-size: 1.3rem; flex: 1; }
.board-error { color: #9a3412; }
@media(max-width:750px) { .board-top { flex-wrap: wrap; } .board-meta { flex-wrap: wrap; } .board-grid { grid-template-columns: 1fr; } .shutdown-board-header h2 { font-size: 1.25rem; } .shutdown-board-unit { font-size: 1.5rem; } .board-location-chip { font-size: 1.05rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; } }