/* ── FEAT-354 CMMS Flow Board ── wbc- prefix ── */

/* FEAT-361 — one row of columns per view, min 300px each; the board container
   scrolls horizontally (never the page body). Works for 3, 4 or 6 columns. */
.wbc-board-inner {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 1fr);
    min-width: 0;
}

/* ── View switch (Flow | Warranty (WCO) | Closed) ── */
.wbc-view-switch {
    display: flex;
    gap: 0;
    margin: 10px 20px 0;
    border: 1px solid #2b3441;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}
.wbc-view-btn {
    background: #1b212b;
    border: none;
    border-right: 1px solid #2b3441;
    color: #8b97a7;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 16px;
    cursor: pointer;
    white-space: nowrap;
}
.wbc-view-btn:last-child { border-right: none; }
.wbc-view-btn:hover { color: #e8edf3; }
.wbc-view-btn-on { background: #f4a724; color: #14181f; }

/* Flow-header jump chips (WCO pending / Closed) */
.wbc-jumps { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 20px 0; }
.wbc-jump-btn {
    background: #212a36;
    border: 1px solid #2b3441;
    border-radius: 20px;
    color: #8fc7f0;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.wbc-jump-btn:hover { border-color: #4a6280; color: #e8edf3; }

/* Closed-view controls */
.wbc-closed-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 20px 0;
}
.wbc-closed-pager { padding: 0 20px 16px; }
.wbc-closed-table { width: 100%; }
.wbc-closed-empty { text-align: center; color: #5c6675; padding: 18px; }

/* Card rows — SR number never clipped, branch chip stays inside the card */
.wbc-sr-row { display: flex; min-width: 0; }
.wbc-ro-row { display: flex; }
.wbc-branch-chip {
    background: #22303e;
    color: #8fc7f0;
    border-color: #2f4658;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wbc-flowcol-chip { background: #2e2740; color: #c3a8f0; border-color: #443a5c; }
.wbc-wco-chip     { background: #1e3329; color: #7fd8b0; border-color: #2c4d3d; }
.wbc-card-mirror  { opacity: .68; }
.wbc-col-unavail  { color: #fcd34d; border-color: #92400e; }

/* Period label */
.wbc-period-label {
    font-size: 12px;
    color: #8899aa;
    white-space: nowrap;
}

/* Refresh button */
.wbc-refresh-btn {
    white-space: nowrap;
}

/* Env pill */
.wbc-env-wrap {
    display: flex;
    align-items: center;
}
.wbc-env-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}
.wbc-env-prod {
    background: #1d4ed8;
    color: #fff;
}
.wbc-env-uat {
    background: #b45309;
    color: #fff;
}

/* Column accent colours */
.wbc-s-sa     { border-top: 3px solid #6366f1; }
.wbc-s-store  { border-top: 3px solid #f59e0b; }
.wbc-s-mech   { border-top: 3px solid #10b981; }
.wbc-s-close  { border-top: 3px solid #3b82f6; }
.wbc-s-wco    { border-top: 3px solid #8b5cf6; }
.wbc-s-closed { border-top: 3px solid #6b7280; }
.wbc-s-inrepair { border-top: 3px solid #6366f1; }
.wbc-s-decided  { border-top: 3px solid #10b981; }

/* SR link button (card header) */
.wbc-sr-link {
    background: none;
    border: none;
    color: #60a5fa;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-align: left;
    text-decoration: underline;
    /* FEAT-361 — full SR number, wraps instead of clipping (no ellipsis) */
    display: block;
    width: 100%;
    white-space: normal;
    word-break: break-all;
}
.wbc-sr-link:hover { color: #93c5fd; }

/* Type chip + category tint */
.wbc-type-chip { font-size: 11px; }
.wbc-cat-spare { background: #1e3a5f !important; color: #93c5fd !important; }
.wbc-cat-tss   { background: #3b1f5e !important; color: #c4b5fd !important; }

/* Unavailable-sources notice strip */
.wbc-unavail-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 20px;
    padding: 8px 14px;
    background: #451a03;
    border: 1px solid #92400e;
    border-radius: 6px;
    font-size: 12px;
}
.wbc-unavail-label {
    color: #fcd34d;
    font-weight: 600;
}
.wbc-unavail-chip {
    background: #78350f;
    color: #fde68a;
    border-radius: 4px;
    padding: 1px 7px;
    white-space: nowrap;
}
.wbc-unavail-hint {
    color: #fcd34d;
    font-style: italic;
    margin-left: 4px;
}

/* Error banner */
.wbc-error-banner {
    margin: 12px 20px;
    padding: 10px 16px;
    border-radius: 6px;
    border: 1px solid #ef4444;
}

/* ── Detail Drawer ── */
.wbc-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 200;
    cursor: pointer;
}
.wbc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    max-width: 95vw;
    height: 100vh;
    background: #1a212b;
    border-left: 1px solid #2b3441;
    z-index: 201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wbc-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #2b3441;
    flex-shrink: 0;
}
.wbc-drawer-title {
    font-size: 16px;
    font-weight: 700;
}
.wbc-drawer-close {
    background: none;
    border: none;
    color: #8899aa;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.wbc-drawer-close:hover { color: #e8edf3; background: #2b3441; }

.wbc-inferred-pill { background: #374151 !important; color: #9ca3af !important; font-size: 9px !important; padding: 1px 5px !important; }

.wbc-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.wbc-drawer-section {
    margin-bottom: 20px;
}
.wbc-drawer-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8899aa;
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #2b3441;
}

/* Attachment row */
.wbc-att-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.wbc-att-link {
    color: #60a5fa;
    text-decoration: none;
}
.wbc-att-link:hover { text-decoration: underline; }
.wbc-att-meta {
    font-size: 11px;
    color: #8899aa;
}

/* History timeline */
.wbc-hist-row {
    padding: 6px 0;
    border-bottom: 1px solid #232c39;
}
.wbc-hist-comment { background: #1e2a3a; border-radius: 4px; padding: 6px 8px; margin: 4px 0; }
.wbc-hist-meta {
    font-size: 11px;
    color: #8899aa;
    display: block;
}
.wbc-hist-text {
    font-size: 13px;
    font-weight: 500;
    margin-top: 2px;
}
.wbc-hist-remark {
    font-size: 12px;
    color: #93c5fd;
    margin-top: 2px;
}

/* ── Responsive: 390px ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* one column at a time, stacked — same as the HiStore board */
    .wbc-board-inner {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: 1fr;
    }
    .wbc-drawer {
        width: 100vw;
    }
    .wbc-view-switch, .wbc-jumps, .wbc-closed-bar { margin-left: 12px; margin-right: 12px; }
    .wbc-closed-bar { padding-left: 12px; padding-right: 12px; }
    .wbc-closed-pager { padding: 0 12px 12px; }
}

/* ── Light theme ────────────────────────────────────────────────────────── */
body[data-theme="light"] .wbc-unavail-strip { background: #fffbeb; border-color: #d97706; }
body[data-theme="light"] .wbc-unavail-label { color: #92400e; }
body[data-theme="light"] .wbc-unavail-chip  { background: #fef3c7; color: #78350f; }
body[data-theme="light"] .wbc-unavail-hint  { color: #92400e; }
body[data-theme="light"] .wbc-env-prod { background: #2563eb; }
body[data-theme="light"] .wbc-env-uat  { background: #d97706; }
body[data-theme="light"] .wbc-sr-link  { color: #1d4ed8; }
body[data-theme="light"] .wbc-sr-link:hover { color: #1e40af; }
body[data-theme="light"] .wbc-cat-spare { background: #dbeafe !important; color: #1e3a8a !important; }
body[data-theme="light"] .wbc-cat-tss   { background: #ede9fe !important; color: #4c1d95 !important; }
body[data-theme="light"] .wbc-drawer { background: #f8fafc; border-left-color: #e2e8f0; }
body[data-theme="light"] .wbc-drawer-section-title { color: #6b7280; }
body[data-theme="light"] .wbc-drawer-section { border-color: #e2e8f0; }
body[data-theme="light"] .wbc-hist-row { border-bottom-color: #e2e8f0; }
body[data-theme="light"] .wbc-hist-comment { background: #eff6ff; }
body[data-theme="light"] .wbc-hist-meta { color: #6b7280; }
body[data-theme="light"] .wbc-att-meta { color: #6b7280; }
body[data-theme="light"] .wbc-hist-remark { color: #1d4ed8; }
body[data-theme="light"] .wbc-att-link { color: #1d4ed8; }
body[data-theme="light"] .wbc-drawer-header { border-bottom-color: #e2e8f0; }
body[data-theme="light"] .wbc-drawer-close:hover { background: #f1f5f9; color: #1e293b; }
body[data-theme="light"] .wbc-inferred-pill { background: #e5e7eb !important; color: #6b7280 !important; }
body[data-theme="light"] .wbc-error-banner { border-color: #ef4444; }

/* ── FEAT-361 light theme ───────────────────────────────────────────────── */
body[data-theme="light"] .wbc-view-switch { border-color: #dde2e8; }
body[data-theme="light"] .wbc-view-btn { background: #fff; color: #5c7080; border-right-color: #dde2e8; }
body[data-theme="light"] .wbc-view-btn-on { background: #1d4ed8; color: #fff; }
body[data-theme="light"] .wbc-jump-btn { background: #fff; border-color: #dde2e8; color: #1d4ed8; }
body[data-theme="light"] .wbc-branch-chip { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; }
body[data-theme="light"] .wbc-flowcol-chip { background: #ede9fe; color: #4c1d95; border-color: #ddd6fe; }
body[data-theme="light"] .wbc-wco-chip { background: #dcfce7; color: #14532d; border-color: #bbf7d0; }
body[data-theme="light"] .wbc-col-unavail { color: #92400e; border-color: #d97706; }