/* ============================================================
   CCS Command Center — Supply module styles
   Warehouse picking board · picking checklist · delivery map.
   Themed to the Command Center palette (navy --espresso + red
   --gold). All classes prefixed .sup- to avoid collisions.
   ============================================================ */

/* ---- Workload strip ---- */
.sup-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.sup-tile { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px; }
.sup-tile .top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sup-tile .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: 0 0 32px; }
.sup-tile .lab { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; line-height: 1.25; }
.sup-tile .val { font-family: 'Sora', serif; font-size: 30px; font-weight: 600; color: var(--espresso); line-height: 1; }

/* ---- Workflow flowchart (all phases at a glance) ---- */
.wf-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.wf-node { flex: 1 1 0; min-width: 100px; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--c, var(--ink-3)); border-radius: 10px; padding: 11px 10px 10px; text-align: center; opacity: .5; transition: opacity .15s, box-shadow .15s, background .15s; }
.wf-node.on { opacity: 1; background: var(--card); box-shadow: var(--shadow-sm); }
.wf-node.wf-click { cursor: pointer; }
.wf-node.wf-click:hover { border-color: var(--c, var(--bronze)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.wf-exc:hover { filter: brightness(0.97); }
.wf-ct { font-family: 'Sora', serif; font-size: 24px; font-weight: 600; color: var(--espresso); line-height: 1; font-variant-numeric: tabular-nums; }
.wf-lab { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800; color: var(--ink-3); margin-top: 6px; line-height: 1.25; }
.wf-arrow { display: flex; align-items: center; color: var(--taupe); flex: 0 0 auto; }
.wf-exc { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 20px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--c); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.wf-exc .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 7px; }
.wf-exc b { font-weight: 800; }

/* ---- Business at a glance ---- */
.bg-split { height: 7px; border-radius: 5px; background: var(--line-soft); overflow: hidden; display: flex; }
.bg-split span { display: block; height: 100%; border-radius: 5px; }
.bg-period { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--bronze); background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.bg-period:hover { background: var(--st-gold-bg); }
.bg-period-sel { font-size: 10.5px; font-weight: 700; color: var(--bronze); background: var(--st-gold-bg); border: 1px solid color-mix(in srgb, var(--bronze) 22%, white); border-radius: 7px; padding: 3px 6px; cursor: pointer; font-family: inherit; max-width: 130px; }
.bg-period-sel:hover { border-color: var(--bronze); }

/* ---- Picking board ---- */
.sup-board { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; padding-bottom: 8px; }
.sup-col { flex: 1 1 200px; min-width: 188px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; max-height: 560px; }
.sup-col-head { display: flex; align-items: center; gap: 8px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.sup-col-head .ttl { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--ink-2); }
.sup-col-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.sup-col-head .ct { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--ink-3); background: var(--line-soft); border-radius: 20px; padding: 1px 9px; min-width: 22px; text-align: center; }
.sup-col-list { padding: 11px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }

.sup-kard { background: var(--card); border: 1px solid var(--card-edge); border-top: 3px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 12px 13px; cursor: pointer; transition: box-shadow .15s, transform .1s; }
.sup-kard:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.sup-kard .k-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.sup-kard .k-id { font-family: 'Manrope', sans-serif; font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 800; color: var(--bronze); letter-spacing: .02em; }
.sup-kard .k-client { font-size: 13.5px; font-weight: 700; color: var(--espresso); line-height: 1.25; }
.sup-kard .k-co { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.sup-kard .k-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.sup-empty { padding: 22px 4px; text-align: center; font-size: 12px; color: var(--ink-3); }

/* ---- Picking checklist (inside modal) ---- */
.sup-modal-scrim { position: fixed; inset: 0; background: rgba(6,39,47,.42); backdrop-filter: blur(2px); z-index: 100; opacity: 0; animation: fade .2s forwards; display: grid; place-items: center; padding: 24px; }
.sup-modal { width: min(680px, 96vw); max-height: 88vh; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; transform: translateY(10px) scale(.99); animation: supPop .26s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes supPop { to { transform: none; } }
.sup-modal-head { padding: 18px 22px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 14px; }
.sup-modal-body { padding: 18px 22px; overflow-y: auto; }
.sup-modal-foot { padding: 14px 22px; background: var(--card); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }

.sup-li { width: 100%; border-collapse: collapse; font-size: 13px; }
.sup-li thead th { text-align: left; padding: 9px 10px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; border-bottom: 1px solid var(--line); }
.sup-li tbody td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.sup-li tbody tr:last-child td { border-bottom: none; }
.sup-li .num { text-align: right; font-variant-numeric: tabular-nums; }
.sup-check { width: 24px; height: 24px; border-radius: 7px; cursor: pointer; border: 2px solid var(--line); background: var(--field); color: #fff; display: grid; place-items: center; transition: .12s; }
.sup-check.on { border-color: var(--st-green); background: var(--st-green); }

/* ---- Delivery map ---- */
.sup-map { position: relative; aspect-ratio: 1 / 0.82; min-height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--card-edge); box-shadow: var(--shadow-sm); background: linear-gradient(165deg, #EAEEF6 0%, #DFE5F0 100%); }
.sup-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(22,34,74,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(22,34,74,.06) 1px, transparent 1px); background-size: 7.5% 7.5%; }
.sup-road { position: absolute; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(22,34,74,.05); }
.sup-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sup-pin { position: absolute; transform: translate(-50%, -100%); cursor: pointer; }
.sup-pin .b { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: var(--shadow-md); border: 2px solid #fff; transition: transform .15s; }
.sup-pin .b span { transform: rotate(45deg); color: #fff; font-size: 12px; font-weight: 800; font-family: 'Manrope', sans-serif; display: grid; place-items: center; }
.sup-pin.depot .b { background: var(--espresso); border-radius: 9px; transform: none; }
.sup-pin.depot .b span { transform: none; }
.sup-pin.done .b { background: var(--st-green); }
.sup-pin.active .b { background: var(--gold); }
.sup-pin.pending .b { background: var(--ink-3); }
.sup-map-legend { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border: 1px solid var(--card-edge); border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--shadow-sm); }
.sup-map-legend .lg { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.sup-map-legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; }

/* ---- Route list ---- */
.sup-route-stop { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); }
.sup-route-stop:last-child { border-bottom: none; }
.sup-route-stop .seq { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: 0 0 28px; }
.sup-route-stop .rs-t { font-size: 13.5px; font-weight: 700; color: var(--espresso); line-height: 1.2; }
.sup-route-stop .rs-a { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.sup-route-stop .rs-meta { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: 11.5px; color: var(--ink-2); }
.sup-route-stop .rs-meta .row { gap: 4px; }

.sup-best { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.sup-best .hd { background: var(--gold); color: #fff; padding: 10px 16px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; display: flex; align-items: center; gap: 8px; }

@media (max-width: 1080px) {
  .sup-strip { grid-template-columns: repeat(2, 1fr); }
}