/* ═══════════════════════════════════════════════════════════════════
   Workshop Monitor  (.wrk- prefix)  FEAT-046
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page ─────────────────────────────────────────────────────────── */
.wrk-page {
    min-height: 100vh;
    padding-bottom: 40px;
    font-family: inherit;
    color: #c5cad6;
}

/* ── Header ───────────────────────────────────────────────────────── */
.wrk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px 14px;
    border-bottom: 1px solid #2d3548;
    background: #1e2537;
}

.wrk-page-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #e4e8f0;
    letter-spacing: 0.02em;
}

.wrk-refresh-btn {
    background: #2a3149;
    color: #8899bb;
    border: 1px solid #3a4258;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s;
}
.wrk-refresh-btn:hover { background: #3a4258; color: #c5cad6; }

/* ── Controls row ─────────────────────────────────────────────────── */
.wrk-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 24px;
    border-bottom: 1px solid #2d3548;
    background: #1a1f2e;
}

.wrk-controls-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wrk-label {
    font-size: 0.78rem;
    color: #6b7899;
}

.wrk-date-picker .DateInput_input {
    background: #252c3e;
    border-color: #3a4258;
    color: #c5cad6;
    border-radius: 6px;
    font-size: 0.82rem;
    padding: 4px 10px;
}

.wrk-search-input {
    background: #252c3e;
    border: 1px solid #3a4258;
    border-radius: 6px;
    color: #c5cad6;
    font-size: 0.82rem;
    padding: 5px 12px;
    outline: none;
    width: 220px;
    transition: border-color 0.15s;
}
.wrk-search-input:focus { border-color: #4a9eff; }
.wrk-search-input::placeholder { color: #4a5a78; }

/* ── View toggle ──────────────────────────────────────────────────── */
.wrk-view-toggle {
    display: flex;
    gap: 6px;
}

.wrk-view-btn {
    background: #252c3e;
    color: #7a8aaa;
    border: 1px solid #3a4258;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.wrk-view-btn:hover    { background: #2e3855; color: #c5cad6; }
.wrk-view-active {
    background: #1e4a8a;
    color: #90c0ff;
    border-color: #2a5fa8;
}

/* ── KPI Strip ────────────────────────────────────────────────────── */
.wrk-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 18px 24px 0;
}

.wrk-kpi-card {
    background: #1e2537;
    border: 1px solid #2d3548;
    border-top: 3px solid transparent;
    border-radius: 10px;
    padding: 14px 18px;
    text-align: center;
}
.wrk-kpi-warning { border-top-color: #f0a04a; }
.wrk-kpi-teal    { border-top-color: #20c997; }

.wrk-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e4e8f0;
}
.wrk-kpi-label {
    font-size: 0.68rem;
    color: #5a6478;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 5px;
}

/* ── Content area ─────────────────────────────────────────────────── */
.wrk-content { padding: 20px 24px; }
.wrk-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #5a6478;
    font-size: 0.9rem;
}

/* ── Group accordions ─────────────────────────────────────────────── */
.wrk-groups { display: flex; flex-direction: column; gap: 16px; }

.wrk-group {
    background: #1e2537;
    border: 1px solid #2d3548;
    border-radius: 10px;
    overflow: hidden;
}

.wrk-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: #252c3e;
    border-bottom: 1px solid #2d3548;
}

.wrk-group-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #90c0ff;
}

.wrk-group-count {
    font-size: 0.72rem;
    color: #5a6478;
    background: #1a1f2e;
    border: 1px solid #2d3548;
    border-radius: 12px;
    padding: 2px 10px;
}

.wrk-group-body { padding: 0 8px 8px; }

/* ── RO table rows ────────────────────────────────────────────────── */
.wrk-ro-header {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #2d3548;
    margin-bottom: 2px;
}

.wrk-ro-row {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
}
.wrk-ro-row:hover { background: #252c3e; }
.wrk-ro-row-expanded { background: #202840; border-left: 3px solid #4a9eff; }

/* ── Column widths ────────────────────────────────────────────────── */
.wrk-col {
    flex: 1;
    font-size: 0.8rem;
    color: #c5cad6;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 4px;
}

.wrk-col-hdr {
    color: #4a5a78;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wrk-col-bus    { flex: 1.2; }
.wrk-col-rono   { flex: 1.4; }
.wrk-col-period { flex: 1.8; }
.wrk-col-dur    { flex: 0.8; }
.wrk-col-type   { flex: 0.8; }
.wrk-col-check  { flex: 1.2; }
.wrk-col-stk    { flex: 0.6; text-align: center; }
.wrk-col-status { flex: 0.9; }
.wrk-col-wide   { flex: 2.4; }
.wrk-col-rank   { flex: 0.5; text-align: center; }

/* ── Badges ───────────────────────────────────────────────────────── */
.wrk-badge {
    display: inline-block;
    font-size: 0.67rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 7px;
    letter-spacing: 0.04em;
}
.wrk-badge-v2     { background: #163d6a; color: #6bbcff; }
.wrk-badge-legacy { background: #2e2820; color: #b8964a; }
.wrk-badge-nok    { background: #5c1a1a; color: #ff6b6b; }
.wrk-badge-mon    { background: #453216; color: #f0a04a; }

/* ── Status chips ─────────────────────────────────────────────────── */
.wrk-status {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 8px;
}
.wrk-status-done   { background: #103828; color: #3dd68c; }
.wrk-status-active { background: #2e3012; color: #c8d44a; }

/* ── Rank badge ───────────────────────────────────────────────────── */
.wrk-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #252c3e;
    border: 1px solid #3a4258;
    font-size: 0.75rem;
    font-weight: 700;
    color: #90c0ff;
}

/* ── Inline detail panel ──────────────────────────────────────────── */
.wrk-detail-panel {
    background: #161c2c;
    border: 1px solid #2d3548;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 4px 2px 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.wrk-detail-section { flex: 1; min-width: 200px; }
.wrk-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4a9eff;
    margin-bottom: 8px;
}

.wrk-detail-row {
    display: flex;
    gap: 6px;
    font-size: 0.82rem;
    margin-bottom: 5px;
    align-items: baseline;
}
.wrk-detail-key {
    color: #5a6478;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.wrk-legacy-label {
    display: inline-block;
    background: #2e2820;
    color: #b8964a;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 8px;
    margin-bottom: 8px;
}
.wrk-legacy-notice { font-size: 0.78rem; color: #5a6478; margin-top: 10px; }

/* ── Task list ────────────────────────────────────────────────────── */
.wrk-task-list  { display: flex; flex-direction: column; gap: 5px; }
.wrk-task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 5px;
    background: #1e2537;
}
.wrk-task-desc   { flex: 1; color: #c5cad6; }
.wrk-task-counts { font-size: 0.72rem; color: #7a8aaa; }
.wrk-task-done   { color: #3dd68c; }
.wrk-task-inprog { color: #f0a04a; }
.wrk-task-pending{ color: #6b7899; }

/* ── Stockout items in detail panel ───────────────────────────────── */
.wrk-so-list { display: flex; flex-direction: column; gap: 4px; }
.wrk-so-row  { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 4px 8px; background: #1e2537; border-radius: 5px; }
.wrk-so-name { color: #c5cad6; flex: 1; }
.wrk-so-qty  { color: #6bbcff; font-weight: 600; flex-shrink: 0; margin-left: 8px; }

/* ── Watch List view ──────────────────────────────────────────────── */
.wrk-wl-table { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.wrk-wl-row {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    background: #1e2537;
    border: 1px solid #2d3548;
}
.wrk-wl-row:hover { background: #252c3e; }

/* ── Stockout Intelligence view ───────────────────────────────────── */
.wrk-stk-table { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.wrk-stk-row {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    background: #1e2537;
    border: 1px solid #2d3548;
    transition: background 0.12s;
}
.wrk-stk-row:hover   { background: #252c3e; }
.wrk-stk-row-expanded { background: #202840; border-left: 3px solid #4a9eff; }
.wrk-stk-detail-panel {
    background: #161c2c;
    border: 1px solid #2d3548;
    border-radius: 8px;
    padding: 10px 16px;
    margin: 2px 4px 4px;
}
.wrk-stk-detail-row {
    display: flex;
    align-items: center;
    padding: 5px 6px;
    font-size: 0.78rem;
    border-radius: 4px;
    transition: background 0.1s;
}
.wrk-stk-detail-row:hover { background: #252c3e; }

.wrk-empty { font-size: 0.8rem; color: #4a5a78; padding: 8px 4px; }

/* ════════════════════════════════════════════════════════════════════
   Light theme overrides
   ════════════════════════════════════════════════════════════════════ */
body[data-theme="light"] .wrk-page           { color: #2d3a55; }
body[data-theme="light"] .wrk-header         { background: #f0f4ff; border-bottom-color: #cdd5e0; }
body[data-theme="light"] .wrk-page-title     { color: #1a2540; }
body[data-theme="light"] .wrk-refresh-btn    { background: #e0e8ff; color: #3a5090; border-color: #b0c0e0; }
body[data-theme="light"] .wrk-refresh-btn:hover { background: #ccd8ff; }
body[data-theme="light"] .wrk-controls       { background: #f8faff; border-bottom-color: #cdd5e0; }
body[data-theme="light"] .wrk-label          { color: #7a8aaa; }
body[data-theme="light"] .wrk-search-input   { background: #fff; border-color: #b0c0e0; color: #2d3a55; }
body[data-theme="light"] .wrk-search-input::placeholder { color: #aab0c0; }
body[data-theme="light"] .wrk-view-btn       { background: #e8eeff; color: #3a5090; border-color: #b0c0e0; }
body[data-theme="light"] .wrk-view-btn:hover { background: #d0dcff; }
body[data-theme="light"] .wrk-view-active    { background: #1e4a8a; color: #c0d8ff; border-color: #2a5fa8; }
body[data-theme="light"] .wrk-kpi-card       { background: #fff; border-color: #cdd5e0; }
body[data-theme="light"] .wrk-kpi-value      { color: #1a2540; }
body[data-theme="light"] .wrk-kpi-label      { color: #7a8aaa; }
body[data-theme="light"] .wrk-group          { background: #fff; border-color: #cdd5e0; }
body[data-theme="light"] .wrk-group-header   { background: #f0f4ff; border-bottom-color: #cdd5e0; }
body[data-theme="light"] .wrk-group-label    { color: #1a4a8a; }
body[data-theme="light"] .wrk-group-count    { background: #e8eeff; border-color: #b0c0e0; color: #5a6a8a; }
body[data-theme="light"] .wrk-col            { color: #2d3a55; }
body[data-theme="light"] .wrk-col-hdr        { color: #8090b0; }
body[data-theme="light"] .wrk-ro-row:hover   { background: #f0f4ff; }
body[data-theme="light"] .wrk-ro-row-expanded { background: #e8f0ff; border-left-color: #2a6ae0; }
body[data-theme="light"] .wrk-ro-header      { border-bottom-color: #cdd5e0; }
body[data-theme="light"] .wrk-detail-panel   { background: #f8faff; border-color: #cdd5e0; }
body[data-theme="light"] .wrk-detail-key     { color: #8090b0; }
body[data-theme="light"] .wrk-section-label  { color: #1a4a8a; }
body[data-theme="light"] .wrk-task-row       { background: #f0f4ff; }
body[data-theme="light"] .wrk-task-desc      { color: #2d3a55; }
body[data-theme="light"] .wrk-task-counts    { color: #6a7aaa; }
body[data-theme="light"] .wrk-so-row         { background: #f0f4ff; }
body[data-theme="light"] .wrk-so-name        { color: #2d3a55; }
body[data-theme="light"] .wrk-wl-row         { background: #fff; border-color: #cdd5e0; }
body[data-theme="light"] .wrk-wl-row:hover   { background: #f0f4ff; }
body[data-theme="light"] .wrk-stk-row        { background: #fff; border-color: #cdd5e0; }
body[data-theme="light"] .wrk-stk-row:hover  { background: #f0f4ff; }
body[data-theme="light"] .wrk-stk-row-expanded { background: #e8f0ff; border-left-color: #2a6ae0; }
body[data-theme="light"] .wrk-stk-detail-panel { background: #f8faff; border-color: #cdd5e0; }
body[data-theme="light"] .wrk-stk-detail-row:hover { background: #e8eeff; }
body[data-theme="light"] .wrk-empty-state    { color: #8090b0; }
body[data-theme="light"] .wrk-empty          { color: #8090b0; }
body[data-theme="light"] .wrk-rank-badge     { background: #e8eeff; border-color: #b0c0e0; color: #1a4a8a; }
body[data-theme="light"] .wrk-legacy-notice  { color: #8090b0; }