/* ── FEAT-315 Workshop Flow Board ── wb- prefix ── */

.wb-page {
    min-height: 100vh;
    background: #14181f;
    color: #e8edf3;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.4;
}

/* Filter bar */
.wb-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-bottom: 1px solid #2b3441;
    background: linear-gradient(180deg, #1a212b, #14181f);
    position: sticky;
    top: 0;
    z-index: 5;
}
.wb-brand {
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .3px;
    white-space: nowrap;
}
.wb-dot { color: #f4a724; }

.wb-ctl {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #8b97a7;
    white-space: nowrap;
}
.wb-depot-select { min-width: 200px; }

/* Plate search input */
.wb-plate-input {
    background: #212a36;
    border: 1px solid #2b3441;
    border-radius: 8px;
    color: #e8edf3;
    font-size: 12px;
    padding: 5px 10px;
    outline: none;
    width: 150px;
    transition: border-color .15s;
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    letter-spacing: .5px;
}
.wb-plate-input:focus   { border-color: #5b9dd9; }
.wb-plate-input::placeholder { color: #5c6675; font-family: system-ui, sans-serif; letter-spacing: 0; }

/* Booking link button (has_ro=True) — looks like wb-plate but clickable */
button.wb-bk-link {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
}
button.wb-bk-link:hover { color: #5b9dd9; }

/* RO-type pills */
.wb-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.wb-pill {
    cursor: pointer;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #2b3441;
    background: #212a36;
    color: #8b97a7;
    font-weight: 600;
    transition: border-color .15s, color .15s;
}
.wb-pill:hover { border-color: #4a6280; color: #e8edf3; }
.wb-pill-on {
    background: #221d0f !important;
    border-color: #3a3320 !important;
    color: #f4a724 !important;
}

/* TV mode button */
.wb-tvbtn {
    margin-left: auto;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 8px;
    border: 1px solid #f4a724;
    background: transparent;
    color: #f4a724;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.wb-tvbtn-on { background: #f4a724 !important; color: #14181f !important; }

/* Legend strip */
.wb-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 20px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: #8b97a7;
    border-bottom: 1px solid #2b3441;
    background: #161b23;
}
.wb-sw {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: -1px;
}
.wb-sw-green { background: #3fb389; }
.wb-sw-amber { background: #f4a724; }
.wb-sw-red   { background: #e5573f; }
.wb-sw-grey  { background: #6b7684; }
.wb-asof { font-size: 11px; color: #5c6675; font-variant-numeric: tabular-nums; }
.wb-lg-clock { font-size: 11px; opacity: .85; }

/* Board outer wrapper */
.wb-board { padding: 16px 20px; overflow-x: auto; }

/* 4-column grid */
.wb-board-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-items: start;
    min-width: 800px;
}
@media (max-width: 1000px) { .wb-board-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  {
    .wb-board-inner { grid-template-columns: 1fr; min-width: 0; }
    .wb-board { overflow-x: unset; }
}

/* 390px hand-held — no horizontal page scroll */
@media (max-width: 390px) {
    .wb-bar         { padding: 8px 12px; gap: 8px; }
    .wb-board       { padding: 10px 12px; }
    .wb-depot-select { min-width: 130px; }
    .wb-plate       { font-size: 16px !important; }
    .wb-plate-input { width: 110px; }
}

.wb-empty {
    padding: 40px 20px;
    text-align: center;
    color: #5c6675;
}
.wb-note {
    font-size: 11px;
    color: #5c6675;
    border: 1px dashed #2b3441;
    padding: 7px 9px;
    border-radius: 8px;
}

/* Column */
.wb-col {
    background: #1b212b;
    border: 1px solid #2b3441;
    border-radius: 12px;
    min-width: 0;
}
.wb-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid #2b3441;
    border-top: 3px solid #6b7684;
    border-radius: 12px 12px 0 0;
}
.wb-s-book .wb-col-head { border-top-color: #5b9dd9; }
.wb-s-q   .wb-col-head  { border-top-color: #f4a724; }
.wb-s-p   .wb-col-head  { border-top-color: #f4a724; }
.wb-s-d   .wb-col-head  { border-top-color: #3fb389; }
.wb-col-title { font-weight: 700; font-size: 13px; letter-spacing: .4px; }
.wb-col-count {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 12px;
    color: #8b97a7;
    background: #212a36;
    padding: 1px 9px;
    border-radius: 20px;
}
.wb-col-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wb-sort-btn {
    background: none;
    border: 1px solid #3a4656;
    border-radius: 4px;
    color: #8b97a7;
    font-size: 11px;
    padding: 1px 5px;
    cursor: pointer;
    line-height: 1.4;
    transition: color .15s, border-color .15s;
}
.wb-sort-btn:hover { color: #c8d0da; border-color: #6b7684; }
body[data-theme="light"] .wb-sort-btn { border-color: #dde2e8; color: #8b97a7; background: none; }
body[data-theme="light"] .wb-sort-btn:hover { border-color: #aab1ba; color: #5c7080; }
.wb-col-body {
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Card */
.wb-card {
    background: #212a36;
    border: 1px solid #2b3441;
    border-left: 4px solid #6b7684;
    border-radius: 9px;
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.wb-l-green { border-left-color: #3fb389; }
.wb-l-amber { border-left-color: #f4a724; }
.wb-l-red   { border-left-color: #e5573f; }
.wb-l-grey  { border-left-color: #6b7684; }

.wb-chead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.wb-plate {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #e8edf3;
    text-decoration: none;
}
.wb-plate:hover { color: #5b9dd9; text-decoration: none; }
.wb-ro {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 10px;
    color: #5c6675;
    flex-shrink: 0;
}

/* Chips */
.wb-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.wb-chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: .3px;
    border: 1px solid transparent;
}
.wb-c-status  { background: #22303e; color: #8fc7f0; border-color: #2f4658; }
.wb-c-sub     { background: #2e2740; color: #c3a8f0; border-color: #443a5c; }
.wb-c-empty   { color: #5c6675; border-color: #2b3441; }
.wb-c-waiting { background: #2e2e1c; color: #e8d86a; border-color: #4a4820; }
.wb-c-arrived { background: #1e3329; color: #7fd8b0; border-color: #2c4d3d; }
.wb-t1 { background: #1e3329; color: #7fd8b0; border-color: #2c4d3d; } /* Service/PM */
.wb-t2 { background: #33261e; color: #f0b98f; border-color: #4d3a2c; } /* Repair */
.wb-t3 { background: #2b2b3a; color: #a8b0f0; border-color: #3f4059; } /* Offsite */

/* Timing rows */
.wb-timing {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
}
.wb-trow {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}
.wb-trow span { color: #8b97a7; }
.wb-trow b {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}
.wb-trow.wb-sub { font-size: 11px; }
.wb-trow.wb-sub span,
.wb-trow.wb-sub b { color: #5c6675; }
.wb-mrow {
    border-top: 1px dashed #2b3441;
    padding-top: 3px;
    margin-top: 1px;
    font-size: 10.5px;
}
.wb-mrow span { color: #e8edf3; }
.wb-mrow b { color: #8b97a7; font-size: 10px; }

/* Colour helpers for timing values */
.wb-green  { color: #3fb389 !important; }
.wb-amber  { color: #f4a724 !important; }
.wb-red    { color: #e5573f !important; }
.wb-grey   { color: #6b7684 !important; }
.wb-mech   { color: #f4a724 !important; font-size: 15px; }
.wb-muted  { color: #8b97a7 !important; }

/* ── TV / driver mode ── */
.wb-tv-mode .wb-plate { font-size: 32px !important; letter-spacing: 2px; }
.wb-tv-mode .wb-col-title { font-size: 18px; }
.wb-tv-mode .wb-card { padding: 14px 16px; gap: 10px; }
.wb-tv-mode .wb-timing { font-size: 15px; }
.wb-tv-mode .wb-trow.wb-sub { display: none; }
.wb-tv-mode .wb-mrow        { display: none; }
.wb-tv-mode .wb-ro          { display: none; }
.wb-tv-mode .wb-c-sub,
.wb-tv-mode .wb-c-empty     { display: none; }

/* ── Light theme overrides ── */
body[data-theme="light"] .wb-page     { background: #f4f6f9; color: #2c3e50; }
body[data-theme="light"] .wb-bar      { background: #fff; border-bottom-color: #dde2e8; }
body[data-theme="light"] .wb-brand    { color: #2c3e50; }
body[data-theme="light"] .wb-legend   { background: #f0f2f5; border-bottom-color: #dde2e8; color: #5c7080; }
body[data-theme="light"] .wb-asof     { color: #aab1ba; }
body[data-theme="light"] .wb-col      { background: #fff; border-color: #dde2e8; }
body[data-theme="light"] .wb-col-head { border-bottom-color: #dde2e8; }
body[data-theme="light"] .wb-col-count{ background: #f0f2f5; color: #5c7080; }
body[data-theme="light"] .wb-card     { background: #f8fafc; border-color: #dde2e8; }
body[data-theme="light"] .wb-note     { color: #8b97a7; border-color: #dde2e8; }
body[data-theme="light"] .wb-pill     { background: #f0f2f5; border-color: #dde2e8; color: #5c7080; }
body[data-theme="light"] .wb-pill-on  { background: #fff7e6 !important; border-color: #f4a724 !important; color: #c87700 !important; }
body[data-theme="light"] .wb-tvbtn    { border-color: #c87700; color: #c87700; }
body[data-theme="light"] .wb-tvbtn-on { background: #c87700 !important; color: #fff !important; }
body[data-theme="light"] .wb-plate    { color: #2c3e50; }
body[data-theme="light"] .wb-plate:hover { color: #2980b9; }
body[data-theme="light"] .wb-ro       { color: #aab1ba; }
body[data-theme="light"] .wb-trow span{ color: #5c7080; }
body[data-theme="light"] .wb-trow b   { color: #2c3e50; }
body[data-theme="light"] .wb-mrow span{ color: #2c3e50; }
body[data-theme="light"] .wb-mrow b   { color: #8b97a7; }
body[data-theme="light"] .wb-c-status { background: #e3f0fb; color: #2980b9; border-color: #b8d4ed; }
body[data-theme="light"] .wb-c-sub    { background: #f0e8fb; color: #7c4dbd; border-color: #c9a8e8; }
body[data-theme="light"] .wb-c-empty  { color: #aab1ba; border-color: #dde2e8; }
body[data-theme="light"] .wb-t1        { background: #e3f9ee; color: #1e7a54; border-color: #a8e0c4; }
body[data-theme="light"] .wb-t2        { background: #fdf0e3; color: #8b4500; border-color: #e8c39a; }
body[data-theme="light"] .wb-t3        { background: #eceef9; color: #3448a8; border-color: #b8c0e8; }
body[data-theme="light"] .wb-c-waiting { background: #fdf9e3; color: #8b6f00; border-color: #e8d89a; }
body[data-theme="light"] .wb-c-arrived { background: #e3f9ee; color: #1e7a54; border-color: #a8e0c4; }
body[data-theme="light"] .wb-plate-input {
    background: #fff;
    border-color: #dde2e8;
    color: #2c3e50;
}
body[data-theme="light"] .wb-plate-input::placeholder { color: #aab1ba; }
body[data-theme="light"] .wb-plate-input:focus { border-color: #2980b9; }
body[data-theme="light"] button.wb-bk-link { color: #2c3e50; }
body[data-theme="light"] button.wb-bk-link:hover { color: #2980b9; }

/* ── FEAT-327 capacity header ── */
.wb-board-wrap { display: flex; flex-direction: column; }
.wb-cap-header {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 20px;
    border-bottom: 1px solid #2b3441;
    align-items: center;
}
.wb-cap-bk     { background: #1e3329; color: #7fd8b0; border-color: #2c4d3d; }
.wb-cap-over   { background: #3e1e1e; color: #f08f8f; border-color: #5c2c2c; }
.wb-cap-acked  { background: #2e2d1a; color: #d4c870; border-color: #4a4820; }
.wb-cap-nocap  { color: #6b7580; border-color: #2b3441; }
.wb-cap-unavail{ color: #6b7580; border-color: #2b3441; font-style: italic; }
.wb-cap-ro     { background: #22303e; color: #8fc7f0; border-color: #2f4658; }

body[data-theme="light"] .wb-cap-bk     { background: #e3f9ee; color: #1e7a54; border-color: #a8e0c4; }
body[data-theme="light"] .wb-cap-over   { background: #fce8e8; color: #9b2222; border-color: #e8aaaa; }
body[data-theme="light"] .wb-cap-acked  { background: #fdf9e3; color: #7a6400; border-color: #e8d89a; }
body[data-theme="light"] .wb-cap-nocap  { color: #aab1ba; border-color: #dde2e8; }
body[data-theme="light"] .wb-cap-unavail{ color: #aab1ba; border-color: #dde2e8; font-style: italic; }
body[data-theme="light"] .wb-cap-ro     { background: #e3f0fb; color: #2980b9; border-color: #b8d4ed; }

@media (max-width: 420px) {
    .wb-cap-header { padding: 6px 12px; }
    .wb-chip.wb-cap-bk,
    .wb-chip.wb-cap-nocap,
    .wb-chip.wb-cap-unavail { font-size: 10px; padding: 2px 6px; }
}

/* ── FEAT-357 booking depot + owner chips ── */
/* Firm home depot: last_ro resolved — solid border */
.wb-c-home-firm {
    background: #1e2d3e; color: #8fc7f0; border-color: #2f4658;
}
/* Suggested home depot: owner or location resolved — dotted border signals uncertainty */
.wb-c-home-suggested {
    background: #1e2d3e; color: #8fc7f0; border-style: dotted; border-color: #2f4658;
}
/* Unassigned: no resolution — grey dashed */
.wb-c-home-unassigned {
    color: #6b7684; border-style: dashed; border-color: #3a4656;
}

/* Footer row: "Other depots (n) - show/hide" */
.wb-bk-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 2px;
    border-top: 1px dashed #2b3441;
    margin-top: 2px;
    font-size: 11px;
    color: #5c6675;
}
.wb-bk-other-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    color: #8b97a7;
    text-decoration: underline;
    padding: 0;
}
.wb-bk-other-btn:hover { color: #5b9dd9; }

body[data-theme="light"] .wb-c-home-firm {
    background: #e3f0fb; color: #2980b9; border-color: #b8d4ed;
}
body[data-theme="light"] .wb-c-home-suggested {
    background: #e3f0fb; color: #2980b9; border-style: dotted; border-color: #b8d4ed;
}
body[data-theme="light"] .wb-c-home-unassigned {
    color: #aab1ba; border-style: dashed; border-color: #dde2e8;
}
body[data-theme="light"] .wb-bk-footer  { border-top-color: #dde2e8; color: #aab1ba; }
body[data-theme="light"] .wb-bk-other-btn { color: #5c7080; }
body[data-theme="light"] .wb-bk-other-btn:hover { color: #2980b9; }

/* ── FEAT-360 remark line + HOLD chip ── */
.wb-remark {
    font-size: 11px;
    color: #8b97a7;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px dashed #2b3441;
    padding-top: 4px;
    margin-top: 1px;
}
.wb-c-hold {
    background: #3a2a00;
    color: #f4a724;
    border-color: #5c4400;
    font-weight: 700;
}
body[data-theme="light"] .wb-remark { color: #8b97a7; border-top-color: #dde2e8; }
body[data-theme="light"] .wb-c-hold { background: #fff7e0; color: #c87700; border-color: #f4d070; }

/* ── BUG-442 booking arrival chips ── */
.wb-c-serviced      { background: #1e3329; color: #7fd8b0; border-color: #2c4d3d; }
.wb-c-arrived-outline { background: transparent; color: #7fd8b0; border-color: #2c4d3d; }
.wb-c-overdue       { background: #3a2800; color: #f0b040; border-color: #5a3c00; }
.wb-c-ro-open       { color: #6b7684; border-color: #3a4656; }
.wb-sw-chip         { display: inline-block; font-size: 10px; padding: 1px 5px; vertical-align: middle; }
body[data-theme="light"] .wb-c-serviced       { background: #e3f9ee; color: #1e7a54; border-color: #a8e0c4; }
body[data-theme="light"] .wb-c-arrived-outline { background: transparent; color: #1e7a54; border-color: #a8e0c4; }
body[data-theme="light"] .wb-c-overdue        { background: #fff3e0; color: #8b4500; border-color: #e8c39a; }
body[data-theme="light"] .wb-c-ro-open        { color: #aab1ba; border-color: #dde2e8; }

/* ── BUG-450 SLA detail behind a coloured `i` badge ── */
.wb-tval {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;      /* badge stays on the timing line at 390px */
}
.wb-sla-i {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    line-height: 14px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font: 700 10px/14px ui-sans-serif, system-ui, sans-serif;
    font-style: italic;
    text-align: center;
    color: #10151c;
    cursor: pointer;
}
.wb-sla-i:focus-visible { outline: 2px solid #7fb2ff; outline-offset: 1px; }
.wb-sla-i-green { background: #3fb389; }
.wb-sla-i-amber { background: #f4a724; }
.wb-sla-i-red   { background: #e5573f; }
.wb-sla-i-grey  { background: #6b7684; color: #e8edf3; }
.wb-sla-d       { display: none; }
.wb-sla-d-on    { display: flex; }
.wb-tv-mode .wb-sla-i { display: none; }

/* ── FEAT-364 Depot scope strip ──────────────────────────────────────────── */
.wb-scope-strip {
  min-height: 0;
}
.wb-scope-strip-msg {
  padding: 4px 12px;
  font-size: 0.78rem;
  color: var(--muted-text, #9aa3b5);
  background: var(--surface-2, rgba(255,255,255,0.04));
  border-left: 3px solid var(--brand-blue, #4a9eff);
  border-radius: 3px;
  margin: 4px 0 6px;
}
body[data-theme="light"] .wb-scope-strip-msg {
  color: #6b7280;
  background: rgba(74,158,255,0.06);
}