/* ============================================================================
   style.css — PM System components
   ----------------------------------------------------------------------------
   Requires tokens.css, which MUST load first (templates/index.html).
   tokens.css owns: reset, tokens, base elements, focus, .btn, .form-control,
   .panel, .badge base, kbd. This file owns application components only, in
   dependency order: shell -> surfaces -> data -> pages -> workstation.

   Rules for editing this file
     * No literal colours. Every colour is a token. If you need a new one, add
       it to tokens.css so it can be reasoned about in one place.
     * No literal spacing. Use the --sp-* scale.
     * Blue paints links and the focus ring. Nothing else.
     * Green/amber/red mean complete/waiting/fault. Never decoration.
   ========================================================================== */

/* ============================================================ 1. APP SHELL */

.app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: var(--z-rail);
    background: var(--surface-rail);
    border-right: 1px solid var(--line);
    color: var(--text-secondary);
    transition: width var(--dur) var(--ease);
}

.sidebar-header {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--line);
}
.sidebar-logo {
    width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-size: var(--fs-200);
    font-weight: var(--fw-strong);
    letter-spacing: .06em;
}
.sidebar-header h1 {
    font-size: var(--fs-400); font-weight: var(--fw-medium);
    letter-spacing: 0; color: var(--text-primary);
}

.sidebar-search { padding: var(--sp-3) var(--sp-3) var(--sp-2); position: relative; }
.sidebar-search .form-control {
    min-height: var(--ctl-h-sm);
    font-size: var(--fs-300);
    background: var(--surface-raised);
    border-color: transparent;
}
.sidebar-search .form-control:hover { border-color: var(--line-strong); }
.sidebar-search .form-control:focus { background: var(--surface-sunken); }

#global-search-results {
    display: block;
    position: absolute;
    left: var(--sp-3); right: var(--sp-3);
    z-index: var(--z-pop);
    margin-top: var(--sp-1);
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface-panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
}
.global-search-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.global-search-item:hover { background: var(--surface-hover); }
.global-search-item + .global-search-item { border-top: 1px solid var(--line-subtle); }

.nav-links { list-style: none; padding: var(--sp-2) var(--sp-2); flex: 1; overflow-y: auto; }
.nav-link {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0 var(--sp-3);
    min-height: var(--ctl-h);
    margin-bottom: var(--sp-05);
    border-radius: var(--r-md);
    border-left: 2px solid transparent;
    color: var(--text-muted);
    font-size: var(--fs-300);
    font-weight: var(--fw-regular);
    line-height: var(--lh-ui);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
.nav-link:hover { background: var(--surface-raised); color: var(--text-secondary);
    text-decoration: none; }
/* Active nav is NEUTRAL — the accent is not a wayfinding device here. */
.nav-link.active {
    background: var(--surface-raised);
    border-left-color: var(--g-200);
    color: var(--text-primary);
    font-weight: var(--fw-medium);
}
.nav-link.active svg { opacity: 1; }

.sidebar-footer {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-200);
    color: var(--text-faint);
}

.content {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-6) var(--sp-8);
    background: var(--surface-app);
    color: var(--text-primary);
    scrollbar-gutter: stable;
}

/* ------------------------------------------------------- page header */

.page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
}
.page-header h2 {
    font-size: var(--fs-700); font-weight: var(--fw-strong);
    letter-spacing: var(--ls-tight);
}
.page-header-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* ========================================================== 2. SURFACES */

.card {
    background: var(--surface-panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-3);
}
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-300);
    font-weight: var(--fw-strong);
    color: var(--text-primary);
}
.card-body { padding: var(--sp-4); color: var(--text-primary); }

/* --------------------------------------------------- message surfaces */
/* A rule on the left, a quiet wash. No 2px alarm borders around a paragraph. */

.info-box, .warning-box, .danger-box, .parse-results {
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    border: 1px solid var(--line);
    border-left: 2px solid var(--g-500);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--surface-raised);
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
}
.info-box h4, .warning-box h4, .danger-box h4, .parse-results h4 {
    margin-bottom: var(--sp-1);
    font-size: var(--fs-300); font-weight: var(--fw-strong);
    color: var(--text-primary);
}
.info-box    { border-left-color: var(--g-400); }
.warning-box { border-left-color: var(--amber-text); background: var(--amber-soft); }
.warning-box h4 { color: var(--amber-text); }
.warning-box li { color: var(--text-secondary); font-size: var(--fs-300); }
.warning-box ul { padding-left: var(--sp-5); }
.danger-box  { border-left-color: var(--red-text); background: var(--red-soft); }
.danger-box h4 { color: var(--red-text); }
.parse-results { border-left-color: var(--green-text); background: var(--green-soft); }
.parse-results h4 { color: var(--green-text); margin-bottom: var(--sp-3); }
.parse-result-item { margin-bottom: var(--sp-2); }
.parse-result-item label {
    display: block; font-size: var(--fs-200); font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--green-text);
}
.parse-result-item .value { font-size: var(--fs-400); }

/* ------------------------------------------------------------- modal */

.modal-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: none; align-items: center; justify-content: center;
    background: rgba(6,7,9,.72);
}
.modal-overlay.active { display: flex; }
.modal {
    display: flex; flex-direction: column;
    width: 90%; max-width: 680px; max-height: 85vh;
    background: var(--surface-panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    color: var(--text-primary);
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
}
.modal-header h2 { font-size: var(--fs-500); font-weight: var(--fw-strong); }
.modal-close {
    width: var(--ctl-h); height: var(--ctl-h);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: var(--fs-700); line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal-close:hover { background: var(--surface-hover); color: var(--text-primary); }
.modal-body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.modal-footer {
    display: flex; justify-content: flex-end; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------- toast */

.toast-container {
    position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.toast {
    max-width: 380px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-strong);
    border-left: 2px solid var(--g-400);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    box-shadow: var(--sh-3);
    animation: slideIn var(--dur) var(--ease);
}
.toast-success { border-left-color: var(--green-text); }
.toast-error   { border-left-color: var(--red-text); }
.toast-info    { border-left-color: var(--g-400); }
@keyframes slideIn { from { transform: translateX(12px); opacity: 0; }
                     to   { transform: translateX(0);    opacity: 1; } }

/* ------------------------------------------------- empty / loading */

.empty-state { padding: var(--sp-12) var(--sp-5); text-align: center; color: var(--text-muted); }
.empty-state h3 { margin-bottom: var(--sp-2); font-size: var(--fs-500);
    font-weight: var(--fw-medium); color: var(--text-secondary); }
.loading {
    display: flex; align-items: center; justify-content: center;
    height: 180px; color: var(--text-muted); font-size: var(--fs-300);
}

/* =========================================================== 3. DATA */

.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-panel);
}
table { width: 100%; }
thead th {
    padding: var(--sp-2) var(--sp-4);
    text-align: left;
    white-space: nowrap;
    background: var(--surface-panel);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-muted);
}
tbody td {
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--line-subtle);
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    color: var(--text-secondary);
}
tbody td:first-child { color: var(--text-primary); font-weight: var(--fw-medium); }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-raised); }
tbody tr:last-child td { border-bottom: none; }
tr.disabled-row { opacity: .45; }

/* --------------------------------------------------------- badges ---
   Dark-native. Colour maps to meaning and to nothing else:
   red = fault/overdue, amber = waiting/caution, green = complete/healthy,
   neutral = everything that is merely a category (frequency, type, stage). */

.badge-P0 { background: var(--red-soft);   border-color: var(--red-line);   color: var(--red-text); }
.badge-P1 { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber-text); }
.badge-P2 { background: transparent; border-color: var(--amber-line); color: var(--amber-text); }
.badge-P3, .badge-P4 { background: rgba(255,255,255,.05); border-color: var(--line);
    color: var(--text-secondary); }
.badge-P5 { background: transparent; border-color: var(--line); color: var(--text-muted); }

/* `overdue` marks most rows in a neglected schedule. A filled red chip on
   every line stops discriminating, so it stays an outline; P0/P1 carries the
   real urgency signal. */
.badge-overdue  { background: transparent; border-color: var(--red-line); color: var(--red-text); }
.badge-due      { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber-text); }
.badge-due_soon { background: transparent; border-color: var(--amber-line); color: var(--amber-text); }
.badge-not_due  { background: transparent; border-color: var(--green-line); color: var(--green-text); }
.badge-upcoming { background: rgba(255,255,255,.05); border-color: var(--line); color: var(--text-secondary); }
.badge-disabled { background: transparent; border-color: var(--line); color: var(--text-faint); }

.badge-pending       { background: transparent; border-color: var(--line); color: var(--text-muted); }
.badge-ordered,
.badge-shipped,
.badge-new,
.badge-accepted      { background: rgba(255,255,255,.05); border-color: var(--line);
                       color: var(--text-secondary); }
.badge-in_progress   { background: rgba(255,255,255,.08); border-color: var(--line-strong);
                       color: var(--text-primary); }
.badge-received,
.badge-approved,
.badge-completed,
.badge-complete      { background: var(--green-soft); border-color: var(--green-line);
                       color: var(--green-text); }
.badge-triaged       { background: transparent; border-color: var(--amber-line); color: var(--amber-text); }
.badge-waiting_parts { background: var(--amber-soft); border-color: var(--amber-line);
                       color: var(--amber-text); }
.badge-cancelled,
.badge-rejected      { background: transparent; border-color: var(--line); color: var(--text-faint); }
.badge-incomplete    { background: var(--red-soft); border-color: var(--red-line); color: var(--red-text); }

.badge-cs-pending       { background: transparent; border-color: var(--line); color: var(--text-muted); }
.badge-cs-in_progress   { background: rgba(255,255,255,.08); border-color: var(--line-strong);
                          color: var(--text-primary); }
.badge-cs-waiting_parts { background: var(--amber-soft); border-color: var(--amber-line);
                          color: var(--amber-text); }
.badge-cs-on_hold       { background: var(--red-soft); border-color: var(--red-line);
                          color: var(--red-text); }

/* Frequency is a CATEGORY, not a severity. It gets no colour at all — this
   alone removes a third of the chips that used to shout from every PM row. */
.badge-daily, .badge-weekly, .badge-biweekly, .badge-monthly,
.badge-quarterly, .badge-semiannual, .badge-annual {
    background: transparent; border-color: var(--line); color: var(--text-muted);
    font-weight: var(--fw-regular);
}

/* Effort / scope / severity words that reach `badge()` from several pages */
.badge-critical, .badge-urgent {
    background: var(--red-soft); border-color: var(--red-line); color: var(--red-text); }
.badge-high   { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber-text); }
.badge-medium { background: rgba(255,255,255,.05); border-color: var(--line); color: var(--text-secondary); }
.badge-low    { background: transparent; border-color: var(--line); color: var(--text-muted); }
.badge-split  { background: transparent; border-color: var(--line); color: var(--text-muted); }
.badge-built  { background: rgba(255,255,255,.08); border-color: var(--line-strong); color: var(--text-primary); }

/* ------------------------------------------------------ detail view */

.detail-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-4); margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.detail-header h2 { font-size: var(--fs-600); letter-spacing: var(--ls-tight); }
.detail-header-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.detail-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-5); }
.detail-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-5); }
.detail-field label {
    display: block; margin-bottom: var(--sp-05);
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
}
.detail-field .value { font-size: var(--fs-400); line-height: var(--lh-snug); }
.detail-field .empty { color: var(--text-faint); font-style: italic; }

.instructions-list { padding-left: var(--sp-5); }
.instructions-list li { padding: var(--sp-05) 0; font-size: var(--fs-400);
    line-height: var(--lh-normal); color: var(--text-secondary); }

.back-link {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    margin-bottom: var(--sp-4);
    color: var(--text-muted); font-size: var(--fs-300); cursor: pointer;
}
.back-link:hover { color: var(--text-primary); text-decoration: none; }

/* --------------------------------------------- small data furniture */

.search-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.search-bar .form-control { max-width: 340px; }

.metrics-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.metric-card {
    flex: 1; min-width: 110px; padding: var(--sp-3); text-align: center;
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md);
}
.metric-card .mc-value { font-family: var(--font-mono); font-size: var(--fs-700);
    font-weight: var(--fw-strong); line-height: var(--lh-tight); }
.metric-card .mc-label { margin-top: var(--sp-1); font-size: var(--fs-200);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tag {
    padding: var(--sp-05) var(--sp-2);
    background: rgba(255,255,255,.05); border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--fs-200); color: var(--text-secondary);
}

.activity-list { list-style: none; }
.activity-item {
    display: flex; gap: var(--sp-3); padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--line-subtle);
    font-size: var(--fs-300); line-height: var(--lh-snug);
}
.activity-item:last-child { border-bottom: none; }
.activity-time { min-width: 78px; flex-shrink: 0; font-family: var(--font-mono);
    font-size: var(--fs-200); color: var(--text-faint); white-space: nowrap; }
.activity-text { color: var(--text-secondary); }

.email-preview {
    padding: var(--sp-4);
    background: var(--surface-sunken); border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-family: var(--font-mono); font-size: var(--fs-300);
    line-height: var(--lh-normal); white-space: pre-wrap; color: var(--text-secondary);
}
.email-preview .email-subject { margin-bottom: var(--sp-3); padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line); font-weight: var(--fw-strong); color: var(--text-primary); }

.workload-health { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.workload-item { flex: 1; min-width: 120px; }
.workload-item .wl-label { font-size: var(--fs-200); font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
.workload-item .wl-value { font-family: var(--font-mono); font-size: var(--fs-700);
    font-weight: var(--fw-strong); line-height: var(--lh-tight); }
.workload-overloaded { color: var(--red-text); }
.workload-ok { color: var(--green-text); }

.order-items-list { margin-top: var(--sp-2); }
.order-item-row, .order-item-input-row {
    display: grid; grid-template-columns: 2fr 2fr 1fr 1fr auto;
    gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2);
}
.oi-name, .oi-pn, .oi-qty, .oi-vendor { font-size: var(--fs-300); color: var(--text-secondary); }
.oi-name { color: var(--text-primary); font-weight: var(--fw-medium); }
.remove-item-btn {
    width: var(--ctl-h-sm); height: var(--ctl-h-sm); border-radius: var(--r-sm);
    color: var(--text-muted); font-size: var(--fs-500); line-height: 1; cursor: pointer;
}
.remove-item-btn:hover { background: var(--red-soft); color: var(--red-text); }

.notes-input-area { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.notes-input-area textarea { flex: 1; }

/* Idle mic rests NEUTRAL — red conventionally means recording-in-progress. */
.voice-btn {
    width: var(--ctl-h-lg); height: var(--ctl-h-lg); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    background: var(--surface-raised); color: var(--text-muted);
    cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.voice-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.voice-btn.recording {
    background: var(--red-fill); border-color: var(--red-fill); color: var(--red-on);
    animation: pulse 1.4s infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--red-line); }
    50%      { box-shadow: 0 0 0 8px rgba(224,108,108,0); }
}

/* ====================================================== 4. DASHBOARD */

.dashboard-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.stat-card {
    padding: var(--sp-4);
    background: var(--surface-panel); border: 1px solid var(--line);
    border-left: 2px solid transparent; border-radius: var(--r-md);
}
.stat-card .stat-label {
    margin-bottom: var(--sp-1);
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
}
.stat-card .stat-value { font-family: var(--font-mono); font-size: var(--fs-800);
    font-weight: var(--fw-strong); line-height: var(--lh-tight); color: var(--text-primary); }
.stat-card .stat-sub { margin-top: var(--sp-1); font-size: var(--fs-200); color: var(--text-faint); }
.stat-card.warning { border-left-color: var(--amber-text); }
.stat-card.warning .stat-value { color: var(--amber-text); }
.stat-card.danger  { border-left-color: var(--red-text); }
.stat-card.danger .stat-value  { color: var(--red-text); }
.stat-card.success { border-left-color: var(--green-text); }
.stat-card.success .stat-value { color: var(--green-text); }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
    margin-bottom: var(--sp-3); }
.dashboard-grid .card { min-height: 180px; margin-bottom: 0; }
.dashboard-full { margin-bottom: var(--sp-3); }

.dash-stats-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.dash-stat {
    flex: 1; min-width: 110px; padding: var(--sp-4) var(--sp-3); text-align: center;
    background: var(--surface-panel); border: 1px solid var(--line);
    border-top: 2px solid transparent; border-radius: var(--r-md);
}
.dash-stat-num {
    font-family: var(--font-mono); font-size: var(--fs-800); font-weight: var(--fw-strong);
    line-height: var(--lh-tight); color: var(--text-primary);
}
.dash-stat-label {
    margin-top: var(--sp-1);
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
}
.dash-stat-sub { margin-top: var(--sp-05); font-size: var(--fs-200); color: var(--text-faint); }
.dash-stat-danger { border-top-color: var(--red-text); }
.dash-stat-danger .dash-stat-num { color: var(--red-text); }
.dash-stat-warn { border-top-color: var(--amber-text); }
.dash-stat-warn .dash-stat-num { color: var(--amber-text); }
.dash-stat-ok .dash-stat-num { color: var(--green-text); }

.dash-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--sp-4); }
.dash-main, .dash-side { min-width: 0; }
.dash-task-card {
    margin-bottom: var(--sp-1); padding: var(--sp-2) var(--sp-3);
    background: var(--surface-raised); border: 1px solid transparent;
    border-left: 2px solid var(--g-600); border-radius: 0 var(--r-md) var(--r-md) 0;
    cursor: pointer; transition: background var(--dur-fast) var(--ease);
}
.dash-task-card:hover { background: var(--surface-hover); }
.dash-task-overdue { border-left-color: var(--red-text); }

/* ====================================================== 5. EQUIPMENT */

.eq-detail-hero {
    display: flex; gap: var(--sp-5); margin-bottom: var(--sp-4); padding: var(--sp-5);
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.eq-detail-info { flex: 1; min-width: 0; }
.eq-detail-photo { flex-shrink: 0; border-radius: var(--r-md); overflow: hidden; }
.eq-detail-meta {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3);
}
.eq-meta-item { display: flex; flex-direction: column; }
.eq-meta-label {
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
}
.eq-meta-value { font-size: var(--fs-300); color: var(--text-primary); }

.eq-parts-grid { overflow-x: auto; }
.eq-parts-table { width: 100%; font-size: var(--fs-300); }
.eq-parts-table th {
    padding: var(--sp-2) var(--sp-3); text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-200); font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
}
.eq-parts-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-subtle); }
.eq-parts-table tr:hover { background: var(--surface-raised); }
.eq-parts-table tr.eq-parts-low { background: var(--red-soft); }

.eq-tree-node { }
.eq-tree-children { margin-left: var(--sp-5); border-left: 1px solid var(--line);
    padding-left: var(--sp-3); }
.eq-tree-item:hover { background: var(--surface-hover) !important; }
.eq-toggle { width: 18px; flex-shrink: 0; color: var(--text-muted); font-family: var(--font-mono); }

/* =================================================== 6. WORK SESSIONS */

.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-3); }
.ws-card { cursor: pointer; transition: background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease); }
.ws-card:hover { border-color: var(--line-strong); }
.ws-eq-option:hover { background: var(--surface-hover) !important; }

.ws-detail-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    margin-bottom: var(--sp-4); padding-bottom: var(--sp-2);
    background: var(--surface-app); border-bottom: 1px solid var(--line);
}
.ws-tabs { display: flex; gap: var(--sp-1); }
.ws-tab {
    padding: 0 var(--sp-4); min-height: var(--ctl-h);
    border: none; border-bottom: 2px solid transparent; background: transparent;
    color: var(--text-muted); font-size: var(--fs-300); font-weight: var(--fw-medium);
    cursor: pointer; transition: color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}
.ws-tab:hover { color: var(--text-secondary); }
.ws-tab-active { color: var(--text-primary); border-bottom-color: var(--g-200); }

.ws-resolution-opt { background: var(--surface-raised); border: 1px solid transparent;
    transition: all var(--dur-fast) var(--ease); }
.ws-resolution-active,
.ws-resolution-opt:has(input:checked) {
    background: var(--surface-hover) !important;
    border-color: var(--line-strong) !important;
}

/* ====================================================== 7. RUNBOOK */

.rb-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-4); max-width: 1200px; margin: var(--sp-8) auto; }
.rb-select-card {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    min-height: 220px; padding: var(--sp-6) var(--sp-5); text-align: center;
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-lg);
    cursor: pointer; transition: background var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}
.rb-select-card:hover { background: var(--surface-raised); border-color: var(--line-strong); }
.rb-select-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface-raised);
}
.rb-select-icon svg { width: 22px; height: 22px; stroke: var(--text-secondary); fill: none;
    stroke-width: 2; }
.rb-select-name { font-size: var(--fs-500); font-weight: var(--fw-strong); color: var(--text-primary); }
.rb-select-desc { flex: 1; font-size: var(--fs-300); line-height: var(--lh-normal);
    color: var(--text-muted); }
.rb-select-cta {
    width: 100%; min-height: var(--ctl-h); padding: 0 var(--sp-3);
    border: none; border-radius: var(--r-md);
    background: var(--g-100); color: var(--text-inverse);
    font-size: var(--fs-300); font-weight: var(--fw-strong); cursor: pointer;
}
.rb-select-cta:hover { background: var(--g-50); }

.rb-wizard { display: flex; flex-direction: column; min-height: calc(100vh - 60px);
    margin: calc(var(--sp-6) * -1) calc(var(--sp-8) * -1); }
.rb-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    padding: var(--sp-3) var(--sp-6) 0;
    background: var(--surface-rail); border-bottom: 1px solid var(--line);
}
.rb-header-row { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-2); }
.rb-header-title { font-size: var(--fs-500); font-weight: var(--fw-medium); color: var(--text-primary); }
.rb-timer { font-family: var(--font-mono); font-size: var(--fs-700); font-weight: var(--fw-strong);
    letter-spacing: .04em; color: var(--green-text); }
.rb-timer.paused { color: var(--amber-text); }

.rb-progress { display: flex; align-items: center; justify-content: center;
    padding: var(--sp-2) 0 var(--sp-3); overflow-x: auto; }
.rb-step-ind { display: flex; flex-direction: column; align-items: center; position: relative; }
.rb-step-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: var(--r-pill);
    background: var(--g-700); border: 2px solid var(--g-700); transition: all var(--dur) var(--ease); }
.rb-step-dot.done   { background: var(--green-text); border-color: var(--green-text); }
.rb-step-dot.active { background: var(--g-100); border-color: var(--g-100); }
.rb-step-line { width: 28px; height: 2px; flex-shrink: 0; margin-bottom: var(--sp-5); background: var(--g-700); }
.rb-step-line.done { background: var(--green-text); }
.rb-step-lbl { margin-top: var(--sp-1); max-width: 72px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--fs-200); color: var(--text-faint); }
.rb-step-lbl.active { color: var(--text-primary); font-weight: var(--fw-medium); }
.rb-step-lbl.done { color: var(--green-text); }

.rb-body { flex: 1; display: grid; grid-template-columns: minmax(0,1fr) 340px;
    gap: var(--sp-6); padding: var(--sp-6); }
.rb-body.no-ctx { grid-template-columns: minmax(0,1fr); }
.rb-main { min-width: 0; }
.rb-step-title { margin-bottom: var(--sp-1); font-size: var(--fs-600);
    font-weight: var(--fw-strong); letter-spacing: var(--ls-tight); }
.rb-step-sub { margin-bottom: var(--sp-6); font-size: var(--fs-300); color: var(--text-muted); }
.rb-step-content { animation: rbFadeIn var(--dur) var(--ease); }
@keyframes rbFadeIn { from { opacity: 0; transform: translateY(4px); }
                      to   { opacity: 1; transform: translateY(0); } }

.rb-ctx { display: flex; flex-direction: column; gap: var(--sp-3);
    max-height: calc(100vh - 220px); overflow-y: auto; }
.rb-ctx-card { padding: var(--sp-3); background: var(--surface-panel);
    border: 1px solid var(--line); border-radius: var(--r-md); }
.rb-ctx-title { margin-bottom: var(--sp-2); font-size: var(--fs-200); font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
.rb-ctx-item { padding: var(--sp-1) 0; border-bottom: 1px solid var(--line-subtle);
    font-size: var(--fs-300); color: var(--text-secondary); }
.rb-ctx-item:last-child { border-bottom: none; }
.rb-ctx-date { font-size: var(--fs-200); color: var(--text-faint); }

.rb-nav {
    position: sticky; bottom: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-3) var(--sp-6);
    background: var(--surface-rail); border-top: 1px solid var(--line);
}
.rb-nav-next {
    min-height: var(--ctl-h-lg); padding: 0 var(--sp-8);
    border: none; border-radius: var(--r-md);
    background: var(--g-100); color: var(--text-inverse);
    font-size: var(--fs-400); font-weight: var(--fw-strong); cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.rb-nav-next:hover { background: var(--g-50); }
.rb-nav-next.submit { background: var(--green-fill); color: var(--green-on); }
.rb-nav-next.submit:hover { background: var(--green-fill-h); }
.rb-nav-next:disabled { background: var(--g-600); color: var(--g-400); cursor: not-allowed; }
.rb-nav-back {
    min-height: var(--ctl-h-lg); padding: 0 var(--sp-5);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    background: transparent; color: var(--text-secondary);
    font-size: var(--fs-400); font-weight: var(--fw-medium); cursor: pointer;
}
.rb-nav-back:hover { background: var(--surface-raised); color: var(--text-primary); }

.rb-field { margin-bottom: var(--sp-4); }
.rb-field label { display: block; margin-bottom: var(--sp-1);
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
.rb-field label .rb-req { margin-left: var(--sp-05); color: var(--red-text); }
.rb-field .rb-error { display: none; margin-top: var(--sp-1); font-size: var(--fs-200);
    color: var(--red-text); }
.rb-field.has-error .form-control { border-color: var(--red-text); }
.rb-field.has-error .rb-error { display: block; }
.rb-field-row { display: flex; gap: var(--sp-2); }

.rb-check-item {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    margin-bottom: var(--sp-1); padding: var(--sp-3);
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-md);
    cursor: pointer; user-select: none; transition: all var(--dur-fast) var(--ease);
}
.rb-check-item:hover { background: var(--surface-raised); border-color: var(--line-strong); }
.rb-check-item.checked { background: var(--green-soft); border-color: var(--green-line); }
.rb-check-box {
    width: 20px; height: 20px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--g-600); border-radius: var(--r-sm);
    transition: all var(--dur-fast) var(--ease);
}
.rb-check-item.checked .rb-check-box { background: var(--green-fill); border-color: var(--green-fill); }
.rb-check-item.checked .rb-check-box::after { content: '\2713'; color: var(--green-on);
    font-size: var(--fs-300); font-weight: var(--fw-strong); }
.rb-check-text { font-size: var(--fs-400); line-height: var(--lh-snug); color: var(--text-primary); }
.rb-check-item.checked .rb-check-text { color: var(--text-muted); text-decoration: line-through; }
.rb-check-counter { margin-bottom: var(--sp-3); font-size: var(--fs-300);
    font-weight: var(--fw-medium); color: var(--text-muted); }

.rb-confirm { padding: var(--sp-10) var(--sp-5); text-align: center; }
.rb-confirm-summary { max-width: 520px; margin: 0 auto var(--sp-8); text-align: left; }
.rb-confirm-row { display: flex; justify-content: space-between; padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--line-subtle); font-size: var(--fs-300); }
.rb-confirm-label { color: var(--text-muted); }
.rb-confirm-value { color: var(--text-primary); font-weight: var(--fw-medium); }
.rb-start-btn {
    min-height: var(--ctl-h-lg); padding: 0 var(--sp-10);
    border: none; border-radius: var(--r-md);
    background: var(--green-fill); color: var(--green-on);
    font-size: var(--fs-500); font-weight: var(--fw-strong); cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.rb-start-btn:hover { background: var(--green-fill-h); }

.rb-finding { margin-bottom: var(--sp-3); padding: var(--sp-4);
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-md);
    animation: rbFadeIn var(--dur) var(--ease); }
.rb-finding-header { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-3); }
.rb-finding-num { font-family: var(--font-mono); font-size: var(--fs-200);
    font-weight: var(--fw-strong); letter-spacing: var(--ls-caps); text-transform: uppercase;
    color: var(--text-muted); }
.rb-finding-del { padding: var(--sp-1); border-radius: var(--r-sm); color: var(--text-muted);
    font-size: var(--fs-500); line-height: 1; cursor: pointer; }
.rb-finding-del:hover { background: var(--red-soft); color: var(--red-text); }
.rb-add-finding {
    width: 100%; min-height: var(--ctl-h-lg); padding: var(--sp-3);
    border: 1px dashed var(--line-strong); border-radius: var(--r-md);
    background: transparent; color: var(--text-muted);
    font-size: var(--fs-300); font-weight: var(--fw-medium); cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.rb-add-finding:hover { background: var(--surface-raised); border-color: var(--g-500);
    color: var(--text-primary); }
.rb-eq-result:hover { background: var(--surface-hover) !important;
    border-color: var(--line-strong) !important; }

.rb-summary-section { margin-bottom: var(--sp-5); }
.rb-summary-label { margin-bottom: var(--sp-1); font-size: var(--fs-200);
    font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase;
    color: var(--text-muted); }
.rb-summary-value { font-size: var(--fs-400); line-height: var(--lh-normal); }
.rb-summary-card { margin-bottom: var(--sp-3); padding: var(--sp-4);
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.rb-complete-btn {
    width: 100%; min-height: var(--ctl-h-lg); border: none; border-radius: var(--r-md);
    background: var(--green-fill); color: var(--green-on);
    font-size: var(--fs-500); font-weight: var(--fw-strong); cursor: pointer;
}
.rb-complete-btn:hover { background: var(--green-fill-h); }

/* ============================================== 8. FEATURE REQUESTS */

.fr-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-3); }
.fr-card {
    padding: var(--sp-4);
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-md);
    cursor: pointer; transition: background var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}
.fr-card:hover { background: var(--surface-raised); border-color: var(--line-strong); }
.fr-card-top { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-2); }
.fr-card-id { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-faint); }
.fr-card-title { margin-bottom: var(--sp-2); font-size: var(--fs-400);
    font-weight: var(--fw-strong); line-height: var(--lh-snug); }
.fr-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-1); font-size: var(--fs-200); color: var(--text-muted); }
.fr-card-solution { margin-top: var(--sp-1); font-size: var(--fs-300);
    line-height: var(--lh-snug); color: var(--text-muted); }
.fr-card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.fr-card-action { margin-top: var(--sp-3); }

.fr-progress { display: flex; align-items: center; justify-content: center; padding: var(--sp-2) 0; }
.fr-progress-step { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.fr-step-dot { width: 18px; height: 18px; border-radius: var(--r-pill);
    background: var(--g-800); border: 2px solid var(--g-700); transition: all var(--dur) var(--ease); }
.fr-step-done .fr-step-dot { background: var(--green-text); border-color: var(--green-text); }
.fr-step-current .fr-step-dot { background: var(--g-100); border-color: var(--g-100); }
.fr-step-label { font-size: var(--fs-200); color: var(--text-muted); white-space: nowrap; }
.fr-step-done .fr-step-label { color: var(--green-text); }
.fr-step-line { width: 48px; height: 2px; margin-bottom: var(--sp-5); background: var(--g-700); }
.fr-step-done + .fr-step-line { background: var(--green-text); }

.fr-admin-panel {
    margin-top: var(--sp-4); padding: var(--sp-4);
    background: var(--surface-raised); border: 1px solid var(--line);
    border-left: 2px solid var(--g-400); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.fr-admin-panel h4 { margin-bottom: var(--sp-1); font-size: var(--fs-300);
    color: var(--text-primary); }
.fr-admin-panel p { font-size: var(--fs-300); color: var(--text-muted); }

.fr-ai-banner {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4);
    background: var(--surface-raised); border: 1px solid var(--line);
    border-left: 2px solid var(--g-400); border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--fs-300); color: var(--text-secondary);
}
.fr-ai-build { border-left-color: var(--green-text); background: var(--green-soft);
    color: var(--green-text); }
.fr-ai-spinner {
    width: 14px; height: 14px; flex-shrink: 0;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: var(--r-pill); animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =================================================== 9. USERS & ROLES */

.user-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-3); }
.user-card {
    display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-md);
    cursor: pointer; transition: background var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}
.user-card:hover { background: var(--surface-raised); border-color: var(--line-strong); }
.user-card-disabled { opacity: .45; }
.user-card-avatar {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill);
    color: var(--text-inverse); font-size: var(--fs-400); font-weight: var(--fw-strong);
}
.user-card-info { flex: 1; min-width: 0; }
.user-card-name { font-size: var(--fs-400); font-weight: var(--fw-medium); }
.user-card-meta { margin-top: var(--sp-05); font-size: var(--fs-200); color: var(--text-muted); }
.user-card-role { flex-shrink: 0; }

.role-picker { display: flex; flex-direction: column; gap: var(--sp-2);
    max-height: 400px; overflow-y: auto; }
.role-card {
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md);
    cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.role-card:hover { border-color: var(--line-strong); }
.role-card-selected { background: var(--surface-hover); border-color: var(--g-300); }
.role-card-header { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-1); }
.role-card-perms, .role-ref-perms { list-style: none; font-size: var(--fs-200);
    color: var(--text-muted); }
.role-card-perms li { padding: var(--sp-05) 0; }
.role-card-perms li::before {
    content: ""; display: inline-block; width: 4px; height: 4px; margin-right: var(--sp-2);
    border-radius: var(--r-pill); background: var(--g-500); vertical-align: middle;
}
.role-reference-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-4); }
.role-ref-item { padding: var(--sp-3); background: var(--surface-raised);
    border: 1px solid var(--line); border-radius: var(--r-md); }
.role-ref-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.role-ref-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--r-pill); }
.role-ref-perms li { position: relative; padding: var(--sp-05) 0 var(--sp-05) var(--sp-4); }
.role-ref-perms li::before { content: "\2713"; position: absolute; left: 0;
    color: var(--green-text); }

/* ======================================================== 10. LOGIN */

.login-container {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--surface-app);
}
.login-card {
    width: 100%; max-width: 380px; padding: var(--sp-8);
    background: var(--surface-panel); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-3); text-align: center;
}
.login-logo {
    width: 44px; height: 44px; margin: 0 auto var(--sp-4);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    background: var(--surface-raised);
    color: var(--text-primary); font-size: var(--fs-400); font-weight: var(--fw-strong);
    letter-spacing: .06em;
}
.login-title { margin-bottom: var(--sp-1); font-size: var(--fs-600); font-weight: var(--fw-strong); }
.login-subtitle { margin-bottom: var(--sp-6); font-size: var(--fs-300); color: var(--text-muted); }
.login-card .form-group { margin-bottom: var(--sp-3); text-align: left; }
.login-error { margin-bottom: var(--sp-3); font-size: var(--fs-300); color: var(--red-text); }

/* ===================================================== 11. CALENDAR
   Rebuilt dark-native. The previous ~400 lines here were written for a light
   theme and never converted: cream gradients, #f8fafc hovers and an
   invisible rgba(0,0,0,.08) progress track, all painted onto a dark app. */

.cal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-3); margin-bottom: var(--sp-5); }
.cal-stat {
    padding: var(--sp-3) var(--sp-4); text-align: center;
    background: var(--surface-panel); border: 1px solid var(--line);
    border-top: 2px solid transparent; border-radius: var(--r-md);
}
.cal-stat .cs-value { font-family: var(--font-mono); font-size: var(--fs-800);
    font-weight: var(--fw-strong); line-height: var(--lh-tight); color: var(--text-primary); }
.cal-stat .cs-label { margin-top: var(--sp-1); font-size: var(--fs-200);
    font-weight: var(--fw-medium); line-height: var(--lh-ui); letter-spacing: var(--ls-caps);
    text-transform: uppercase; color: var(--text-muted); }
/* Progress counters are neutral; only the streak carries a hint of amber
   because it is the one value that degrades if ignored. */
.cal-stat.xp-card .cs-value,
.cal-stat.level-card .cs-value { color: var(--text-primary); }
.cal-stat.level-card .cs-value { font-family: var(--font-sans); font-size: var(--fs-500); }
.cal-stat.streak-card { border-top-color: var(--amber-line); }
.cal-stat.streak-card .cs-value { color: var(--amber-text); }

.xp-bar-wrap { margin-top: var(--sp-2); height: 4px; overflow: hidden;
    border-radius: var(--r-pill); background: var(--g-700); }
.xp-bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--g-300);
    transition: width .5s var(--ease); }

.cal-progress-section { display: flex; align-items: stretch; gap: var(--sp-5);
    margin-bottom: var(--sp-5); }
.cal-progress-ring-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 200px; padding: var(--sp-6);
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.progress-ring-container { position: relative; width: 132px; height: 132px; }
.progress-ring-container svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.progress-ring-bg { fill: none; stroke: var(--g-800); stroke-width: 8; }
.progress-ring-fill { fill: none; stroke-width: 8; stroke-linecap: round;
    transition: stroke-dashoffset .6s var(--ease); }
.progress-ring-fill.green { stroke: var(--green-text); }
.progress-ring-fill.blue  { stroke: var(--g-300); }   /* neutral, not blue */
.progress-ring-fill.gold  { stroke: var(--amber-text); }
.progress-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; }
/* app.js sets this inline to var(--primary)/var(--success)/var(--xp-gold).
   The arc already carries the state; the numeral stays neutral so a 0% day
   does not paint a blue disc in the middle of the page. Remove the
   !important once the inline style is swept (see design handoff). */
.progress-ring-pct { font-family: var(--font-mono); font-size: var(--fs-900);
    font-weight: var(--fw-strong); line-height: var(--lh-tight);
    color: var(--text-primary) !important; }
.progress-ring-label { margin-top: var(--sp-05); font-size: var(--fs-200);
    font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase;
    color: var(--text-muted); }
.cal-progress-ring-card .ring-subtitle { margin-top: var(--sp-3); font-size: var(--fs-300);
    color: var(--text-muted); text-align: center; }

.cal-checklist-card { flex: 1; display: flex; flex-direction: column;
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.cal-checklist-card .card-header { padding: var(--sp-3) var(--sp-4); }
.cal-checklist { list-style: none; flex: 1; max-height: 360px; overflow-y: auto; }
.cal-check-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--line-subtle);
    cursor: pointer; transition: background var(--dur-fast) var(--ease);
}
.cal-check-item:hover { background: var(--surface-raised); }
.cal-check-item:last-child { border-bottom: none; }
.cal-check-item.done { opacity: .5; }
.cal-check-item.done .cci-title { text-decoration: line-through; }
.cal-check-item.blocked { background: var(--amber-soft); }
.cci-check {
    width: 18px; height: 18px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--g-600); border-radius: var(--r-pill); font-size: var(--fs-200);
}
.cal-check-item.done .cci-check { background: var(--green-fill); border-color: var(--green-fill);
    color: var(--green-on); }
.cal-check-item.blocked .cci-check { background: var(--amber-fill); border-color: var(--amber-fill);
    color: var(--amber-on); }
.cci-body { flex: 1; min-width: 0; }
.cci-title { font-size: var(--fs-300); font-weight: var(--fw-medium);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cci-sub { font-size: var(--fs-200); color: var(--text-muted); }
.cci-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.cci-xp { padding: 0 var(--sp-1); border: 1px solid var(--line); border-radius: var(--r-sm);
    background: transparent; font-family: var(--font-mono); font-size: var(--fs-200);
    color: var(--text-faint); }
.cci-time { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-muted); }

.cal-tabs { display: inline-flex; gap: var(--sp-05); width: fit-content;
    margin-bottom: var(--sp-5); padding: var(--sp-05);
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md); }
.cal-tab {
    min-height: var(--ctl-h-sm); padding: 0 var(--sp-4);
    border: none; border-radius: var(--r-sm); background: transparent;
    color: var(--text-muted); font-size: var(--fs-300); font-weight: var(--fw-medium);
    cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.cal-tab:hover:not(.active) { background: var(--surface-hover); color: var(--text-secondary); }
.cal-tab.active { background: var(--surface-active); color: var(--text-primary); }

.week-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3);
    margin-bottom: var(--sp-5); }
.week-day-col {
    display: flex; flex-direction: column; min-height: 200px; overflow: hidden;
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-md);
}
.week-day-col.is-today { border-color: var(--g-500); }
.week-day-col.is-past { opacity: .55; }
.wdc-header { display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
.wdc-header .wdc-day { font-size: var(--fs-200); font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-secondary); }
.week-day-col.is-today .wdc-header .wdc-day { color: var(--text-primary); }
.wdc-header .wdc-date { font-family: var(--font-mono); font-size: var(--fs-200);
    color: var(--text-faint); }
.wdc-progress { height: 2px; background: var(--g-800); }
.wdc-progress-fill { height: 100%; background: var(--green-text); transition: width .4s var(--ease); }
.wdc-body { flex: 1; max-height: 400px; overflow-y: auto; padding: var(--sp-1); }
.wdc-item {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-05); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
    font-size: var(--fs-200); cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.wdc-item:hover { background: var(--surface-hover); }
.wdc-item.done { opacity: .4; text-decoration: line-through; }
.wdc-item.blocked { opacity: .55; }
.wdc-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--r-pill); }
.wdc-dot.p0 { background: var(--red-text); }
.wdc-dot.p1 { background: var(--amber-text); }
.wdc-dot.p2 { background: var(--amber-fill); }
.wdc-dot.p3 { background: var(--g-400); }
.wdc-dot.p4 { background: var(--g-500); }
.wdc-dot.p5 { background: var(--g-600); }
.wdc-item-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdc-item-xp { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-200);
    color: var(--text-faint); }
.wdc-footer { display: flex; justify-content: space-between; padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--line); font-size: var(--fs-200); color: var(--text-muted); }
.wdc-footer .wdc-xp { font-family: var(--font-mono); color: var(--text-faint); }

/* =================================================== 12. PERFORMANCE */

.perf-dashboard { max-width: 1200px; }
.perf-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-3); margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line); }
.perf-header h2 { font-size: var(--fs-700); letter-spacing: var(--ls-tight); }
.perf-filters { display: flex; gap: var(--sp-2); }
.perf-filters .form-control { min-width: 150px; }

.perf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
    margin-bottom: var(--sp-6); }
.perf-card { padding: var(--sp-5); background: var(--surface-panel);
    border: 1px solid var(--line); border-radius: var(--r-lg); }
.perf-card-label { margin-bottom: var(--sp-2); font-size: var(--fs-200);
    font-weight: var(--fw-medium); line-height: var(--lh-ui); letter-spacing: var(--ls-caps);
    text-transform: uppercase; color: var(--text-muted); }
.perf-card-value { font-family: var(--font-mono); font-size: var(--fs-900);
    font-weight: var(--fw-strong); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.perf-card-unit { font-size: var(--fs-400); font-weight: var(--fw-regular);
    color: var(--text-muted); }
.perf-card-sub { margin-top: var(--sp-1); font-size: var(--fs-200); color: var(--text-faint); }

.perf-charts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.perf-chart-card { padding: var(--sp-5); background: var(--surface-panel);
    border: 1px solid var(--line); border-radius: var(--r-lg); }
.perf-chart-card h3 { margin-bottom: var(--sp-4); font-size: var(--fs-400);
    font-weight: var(--fw-medium); color: var(--text-secondary); }
.perf-chart-card canvas { height: 280px !important; }

/* ================================================ 13. UPDATE BANNER */

.update-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-banner);
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface-panel);
    border-bottom: 1px solid var(--line-strong);
    border-left: 3px solid var(--green-text);
    color: var(--text-secondary); font-size: var(--fs-300);
    box-shadow: var(--sh-2);
    animation: slideDown var(--dur) var(--ease);
}
.update-banner-header { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-1); font-size: var(--fs-400); color: var(--text-primary); }
.update-close { padding: 0 var(--sp-1); color: var(--text-muted); font-size: var(--fs-600);
    line-height: 1; cursor: pointer; }
.update-close:hover { color: var(--text-primary); }
.update-changes { margin-left: var(--sp-5); columns: 2; column-gap: var(--sp-6); list-style: disc; }
.update-changes li { margin-bottom: var(--sp-05); }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* =================================================== 14. WORKSTATION
   Three columns: queue | current work order | parts & context.
   The technician's screen. Density is the point; the screen must barely move. */

.wk-layout {
    display: grid;
    grid-template-columns: 275px minmax(0, 1fr) 340px;
    gap: var(--sp-4);
    align-items: start;
}
.wk-layout.wk-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0,1fr) 340px; }
.wk-col-left, .wk-col-right {
    position: sticky; top: 0;
    max-height: calc(100vh - var(--sp-10));
    overflow-y: auto;
    padding-right: var(--sp-05);
}
/* The centre column had NO rules at all — its layout depended entirely on
   inline styles emitted by app.js. */
.wk-col-center {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-bottom: var(--sp-10);
}

/* --- left: intake + queue ------------------------------------------- */

.wk-newcall {
    width: 100%; min-height: var(--ctl-h-lg); margin-bottom: var(--sp-2);
    border: 1px solid var(--red-fill); border-radius: var(--r-md);
    background: var(--red-fill); color: var(--red-on);
    font-size: var(--fs-400); font-weight: var(--fw-strong);
    letter-spacing: var(--ls-caps); text-transform: uppercase;
    cursor: pointer; transition: background var(--dur-fast) var(--ease);
}
.wk-newcall:hover { background: var(--red-fill-h); }

/* NEW CALL is the loud one. "New Work Order" is the planned-work sibling and
   must not compete with it, so the light primary fill is demoted here. */
.wk-col-left .btn-primary {
    background: transparent; color: var(--text-secondary);
    border-color: var(--line-strong); font-weight: var(--fw-medium);
}
.wk-col-left .btn-primary:hover { background: var(--surface-raised); color: var(--text-primary); }
.wk-col-left .btn-primary:active { background: var(--surface-hover); }
.wk-col-left .btn-primary kbd { color: var(--text-faint); background: transparent;
    border-color: var(--line); }

.wk-group-label {
    margin: var(--sp-4) 0 var(--sp-1) var(--sp-05);
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
}
.wk-queue-item {
    margin-bottom: var(--sp-1); padding: var(--sp-2) var(--sp-3);
    background: var(--surface-panel);
    border: 1px solid var(--line);
    border-left: 2px solid transparent;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.wk-queue-item:hover { background: var(--surface-raised); }
.wk-queue-item.selected { background: var(--surface-hover); border-left-color: var(--g-200); }
.wk-queue-item.wk-q-active { border-left-color: var(--green-text); }
.wk-queue-item .wk-q-num { font-family: var(--font-mono); font-size: var(--fs-200);
    color: var(--text-faint); }
.wk-queue-item .wk-q-title { margin: var(--sp-05) 0; font-size: var(--fs-300);
    font-weight: var(--fw-medium); line-height: var(--lh-snug);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-queue-item .wk-q-sub { font-size: var(--fs-200); color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-q-other { opacity: .68; border-left-color: var(--g-600); }
.wk-q-other:hover { opacity: 1; }
.wk-owner { padding: 0 var(--sp-1); border: 1px solid var(--line); border-radius: var(--r-sm);
    font-size: var(--fs-200); color: var(--text-muted); }
.wk-age { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--amber-text); }
.wk-cheat { margin-top: var(--sp-3); font-size: var(--fs-200); line-height: 2;
    color: var(--text-faint); }

.wk-rail-btn {
    width: 100%; min-height: var(--ctl-h); margin-bottom: var(--sp-2);
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface-panel); color: var(--text-secondary);
    font-size: var(--fs-400); cursor: pointer;
}
.wk-rail-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.wk-rail-item {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-05);
    margin-bottom: var(--sp-1); padding: var(--sp-2) 0;
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: var(--fs-300); cursor: pointer;
}
.wk-rail-item:hover { background: var(--surface-hover); }
.wk-rail-n { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-muted); }

/* --- centre: header + form ------------------------------------------ */

.wk-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
    margin-bottom: var(--sp-3); padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
}
.wk-header h2 { font-size: var(--fs-700); font-family: var(--font-mono);
    letter-spacing: var(--ls-tight); }
.wk-header-active { border-left: 2px solid var(--green-text); padding-left: var(--sp-3); }
.wk-status-pill {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: var(--sp-05) var(--sp-2);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: rgba(255,255,255,.05);
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: 18px;
}
.wk-timer { font-family: var(--font-mono); font-size: var(--fs-700);
    font-weight: var(--fw-strong); font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-tight); color: var(--green-text); }
.wk-timer-idle { font-weight: var(--fw-regular); color: var(--text-muted); }
/* Action row sits hard right so the header reads: identity | state | actions. */
.wk-header #wk-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wk-header #wk-actions .btn { min-height: var(--ctl-h-lg); }

.wk-owner-banner {
    margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3);
    background: var(--amber-soft); border: 1px solid var(--amber-line);
    border-radius: var(--r-md); font-size: var(--fs-300); color: var(--amber-text);
}
.wk-missing {
    margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3);
    background: var(--red-soft); border: 1px solid var(--red-line);
    border-radius: var(--r-md); font-size: var(--fs-300); color: var(--text-secondary);
}

.wk-field-group { margin-bottom: var(--sp-3); }
.wk-field-group label {
    display: block; margin-bottom: var(--sp-1);
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
}

/* --- field weighting -------------------------------------------------
   Not every field on a work order matters the same amount. app.js stamps
   each wrapper with data-f="<record field>", which is the hook that lets the
   stylesheet rank them without touching the markup.

     tier 1  title                   — the identity of the job
     tier 2  diagnosis, work_performed — the narrative the printed form wants
     tier 3  everything else         — quiet outlines that recede until used

   Tier 3 rests as a hairline outline on the page surface rather than a filled
   box, which is what removes the "wall of identical form controls" read. */

.wk-col-center .form-control {
    background: transparent;
    border-color: var(--line);
}
.wk-col-center .form-control:hover:not(:disabled) {
    background: var(--surface-sunken); border-color: var(--line-strong);
}
.wk-col-center .form-control:focus {
    background: var(--surface-sunken); border-color: var(--focus);
}

/* tier 1 */
.wk-field-group[data-f="title"] > label { color: var(--text-secondary); }
.wk-field-group[data-f="title"] .form-control {
    font-size: var(--fs-500); font-weight: var(--fw-medium);
    min-height: var(--ctl-h-lg);
}

/* tier 2 */
.wk-field-group[data-f="diagnosis"] > label,
.wk-field-group[data-f="work_performed"] > label { color: var(--text-secondary); }
.wk-field-group[data-f="diagnosis"] .form-control,
.wk-field-group[data-f="work_performed"] .form-control {
    background: var(--surface-sunken);
    border-color: var(--line-strong);
    line-height: var(--lh-normal);
}
.wk-field-group[data-f="diagnosis"], .wk-field-group[data-f="work_performed"] {
    margin-bottom: var(--sp-4);
}

/* tier 3 — the request-details and closeout selects are metadata */
.wk-section .form-control { min-height: var(--ctl-h); font-size: var(--fs-300); }
/* A saved field confirms in GREEN — the write succeeded. The old animation
   flashed the accent across a full field on every keystroke batch. */
.wk-flash { animation: wkflash 1s ease-out; border-radius: var(--r-sm); }
@keyframes wkflash {
    0%   { background-color: var(--green-soft); }
    100% { background-color: transparent; }
}
.wk-field-missing { border-color: var(--red-text) !important; }

/* The utterance box is the primary input. It rests NEUTRAL and only lights up
   under focus — a permanent ring on the busiest control is visual noise. */
.wk-ai-box {
    width: 100%; min-height: 58px; padding: var(--sp-3);
    background: var(--surface-sunken);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    color: var(--text-primary); font-family: inherit; font-size: var(--fs-400);
    line-height: var(--lh-normal); resize: vertical;
    transition: border-color var(--dur-fast) var(--ease);
}
.wk-ai-box::placeholder { color: var(--text-faint); }
.wk-ai-box:hover { border-color: var(--g-600); }
.wk-ai-box:focus { outline: none; border-color: var(--focus); }
.wk-ai-box:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }

.wk-ai-strip {
    margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-2);
    background: var(--surface-raised);
    border-left: 2px solid var(--g-500); border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs-300); color: var(--text-secondary);
}
/* AI-derived value marker. Neutral and monospace so it reads as metadata,
   not as a status. */
.wk-prov {
    margin-left: var(--sp-1); padding: 0 var(--sp-1); vertical-align: middle;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: transparent;
    font-family: var(--font-mono); font-size: var(--fs-200); font-weight: var(--fw-medium);
    color: var(--text-muted);
}

.wk-yn { display: flex; gap: var(--sp-1); }
.wk-yn button {
    min-height: var(--ctl-h); padding: 0 var(--sp-4);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: transparent; color: var(--text-muted);
    font-size: var(--fs-300); font-weight: var(--fw-medium); cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.wk-yn button:hover { background: var(--surface-raised); color: var(--text-primary); }
.wk-yn button.on-yes { background: var(--green-soft); border-color: var(--green-line);
    color: var(--green-text); }
.wk-yn button.on-no  { background: var(--surface-hover); border-color: var(--line-strong);
    color: var(--text-primary); }

.wk-part-row {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-1); padding: var(--sp-2) var(--sp-3);
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-md);
}
.wk-part-row .wk-part-name { flex: 1; min-width: 0; font-size: var(--fs-300);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-qty-btn {
    width: var(--ctl-h-sm); height: var(--ctl-h-sm); flex-shrink: 0;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: transparent; color: var(--text-secondary);
    font-size: var(--fs-300); line-height: 1; cursor: pointer;
}
.wk-qty-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.wk-qty-remove { margin-left: var(--sp-2); color: var(--text-muted); }
.wk-qty-remove:hover { background: var(--red-soft); border-color: var(--red-line);
    color: var(--red-text); }

.wk-tech-chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    margin: 0 var(--sp-1) var(--sp-1) 0; padding: var(--sp-05) var(--sp-2);
    background: var(--surface-raised); border: 1px solid var(--line);
    border-radius: var(--r-sm); font-size: var(--fs-300);
}
.wk-tech-chip button { padding: 0; color: var(--text-muted); font-size: var(--fs-400);
    line-height: 1; cursor: pointer; }
.wk-tech-chip button:hover { color: var(--red-text); }

.wk-section {
    grid-column: 1 / 3;
    margin: var(--sp-2) 0 var(--sp-3);
    padding: var(--sp-1) var(--sp-4) var(--sp-2);
    background: var(--surface-panel);
    border: 1px solid var(--line); border-radius: var(--r-md);
}
.wk-section summary {
    padding: var(--sp-2) 0; cursor: pointer; user-select: none;
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted);
}
.wk-section summary:hover { color: var(--text-secondary); }
.wk-section[open] summary { color: var(--text-secondary);
    border-bottom: 1px solid var(--line-subtle); margin-bottom: var(--sp-3); }

/* Destructive action rests NEUTRAL — a permanent alarm-red in the primary
   button row pulled the eye to 'destroy' on every work order. */
.wk-danger { border-color: var(--line-strong) !important; color: var(--text-muted) !important; }
.wk-danger:hover { background: var(--red-soft) !important; border-color: var(--red-line) !important;
    color: var(--red-text) !important; }

/* --- right: parts / equipment / history ------------------------------ */

.wk-tabs { display: flex; gap: var(--sp-05); margin-bottom: var(--sp-2); padding: var(--sp-05);
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md); }
.wk-tab {
    flex: 1; min-height: var(--ctl-h-sm);
    border: 1px solid transparent; border-radius: var(--r-sm);
    background: transparent; color: var(--text-muted);
    font-size: var(--fs-200); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps);
    text-transform: uppercase; text-align: center; cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.wk-tab:hover { color: var(--text-secondary); }
.wk-tab.active { background: var(--surface-active); border-color: var(--line);
    color: var(--text-primary); }

.wk-r-result {
    margin-bottom: var(--sp-1); padding: var(--sp-2) var(--sp-3);
    background: var(--surface-panel); border: 1px solid var(--line); border-radius: var(--r-md);
}
.wk-r-result .wk-r-title { font-size: var(--fs-300); font-weight: var(--fw-medium);
    line-height: var(--lh-snug); }
.wk-r-result .wk-r-sub { font-family: var(--font-mono); font-size: var(--fs-200);
    color: var(--text-muted); }
.wk-r-selected { background: var(--surface-hover) !important;
    border-color: var(--g-300) !important; }

.wk-add-btn {
    min-height: var(--ctl-h-sm); padding: 0 var(--sp-3); flex-shrink: 0;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--surface-raised); color: var(--text-secondary);
    font-size: var(--fs-200); font-weight: var(--fw-medium); cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.wk-add-btn:hover { background: var(--g-100); border-color: var(--g-100);
    color: var(--text-inverse); }
/* Zero-stock add stays available but visibly demoted. */
.wk-add-zero { background: transparent; border-color: var(--line); color: var(--text-faint); }
.wk-add-zero:hover { background: var(--surface-hover); border-color: var(--line-strong);
    color: var(--text-secondary); }

/* --- workstation chrome ---------------------------------------------- */

.app.wk-mode .sidebar { width: var(--sidebar-w-collapsed); }
.app.wk-mode .sidebar-header h1,
.app.wk-mode .sidebar-footer span:not(:first-child),
.app.wk-mode #sidebar-user,
.app.wk-mode .sidebar-search { display: none; }
.app.wk-mode .nav-link { justify-content: center; gap: 0; padding-left: 0; padding-right: 0;
    font-size: 0; border-left-width: 0; }
.app.wk-mode .nav-link svg { width: 18px; height: 18px; }
.app.wk-mode .sidebar-header { justify-content: center; padding: var(--sp-4) 0 var(--sp-3); }
.app.wk-mode .sidebar-footer { justify-content: center; }
.app.wk-mode .content { padding: var(--sp-5); }

.wk-kbd, kbd.wk-kbd, .wk-kbd-note {
    font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-medium);
    letter-spacing: 0; text-transform: none; color: var(--text-muted);
}
kbd.wk-kbd { padding: 0 var(--sp-1); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: rgba(255,255,255,.05); }
kbd.wk-kbd-inverse { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.22);
    color: rgba(255,255,255,.88); }
.wk-kbd-note { font-weight: var(--fw-regular); }

#wk-save-badge {
    position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-pop);
    padding: var(--sp-2) var(--sp-3);
    background: var(--red-fill); color: var(--red-on);
    border-radius: var(--r-md); font-size: var(--fs-300); font-weight: var(--fw-strong);
    box-shadow: var(--sh-2); cursor: pointer;
}


/* ============================================ 14b. SHARED AUTOCOMPLETE
   One control behind every picker: equipment, location, technicians, parts,
   the modal equipment box, the runbook browser and the sidebar search.

   `.ac-overlay` is position:fixed on <body> and placed by acPosition(), so no
   ancestor's overflow can clip it and it never participates in layout — the
   old #wk-eq-results sat in normal flow and pushed the whole form down.
   `.ac-inline` is the same list rendered as a panel that owns its column. */

.ac-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface-panel);
    color: var(--text-primary);
}
.ac-overlay {
    display: none;
    position: fixed;
    /* Above the modal layer: the work-session modal owns an equipment picker,
       and at --z-pop the list rendered UNDERNEATH the dialog that opened it. */
    z-index: calc(var(--z-modal) + 10);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
}
.ac-overlay.ac-show { display: block; }
.ac-inline {
    max-height: calc(100vh - 220px);
    background: transparent;
}

.ac-group {
    display: flex; align-items: baseline; gap: var(--sp-2);
    position: sticky; top: 0; z-index: 1;
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
    background: var(--surface-panel);
    border-bottom: 1px solid var(--line-subtle);
}
.ac-inline .ac-group { background: var(--surface-app); }
.ac-group-name {
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-secondary);
}
/* Carries the group's shared reason when one was hoisted out of the rows, so
   it must wrap — clamped to two lines so a header can never dwarf its list. */
.ac-group-sub {
    flex: 1; min-width: 0;
    font-size: var(--fs-200); line-height: var(--lh-snug); color: var(--text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ac-group-n { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-faint); }

.ac-opt {
    position: relative;
    padding: var(--sp-2) var(--sp-3);
    border-left: 2px solid transparent;
    cursor: pointer;
}
.ac-opt + .ac-opt { border-top: 1px solid var(--line-subtle); }
.ac-opt:hover { background: var(--surface-raised); }
/* Keyboard selection is a NEUTRAL lift plus a rail — not a colour fill. */
.ac-opt.ac-sel {
    background: var(--surface-hover);
    border-left-color: var(--g-200);
}
.ac-inline .ac-opt {
    margin-bottom: var(--sp-1);
    border: 1px solid var(--line);
    border-left-width: 2px;
    border-radius: var(--r-md);
    background: var(--surface-panel);
}
.ac-inline .ac-opt + .ac-opt { border-top: 1px solid var(--line); }

.ac-main {
    font-size: var(--fs-300); font-weight: var(--fw-medium); line-height: var(--lh-snug);
    color: var(--text-primary);
    display: flex; align-items: baseline; gap: var(--sp-2);
}
.ac-main-tail { margin-left: auto; font-weight: var(--fw-regular); font-size: var(--fs-200);
    color: var(--text-muted); }
.ac-sub {
    font-size: var(--fs-200); line-height: var(--lh-snug); color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ac-note {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--line-subtle);
    font-size: var(--fs-200); line-height: var(--lh-snug); color: var(--text-secondary);
}
.ac-note-warn { background: var(--amber-soft); border-bottom-color: var(--amber-line);
    color: var(--amber-text); }
.ac-note-ok   { background: var(--green-soft); border-bottom-color: var(--green-line);
    color: var(--green-text); }
.ac-inline .ac-note { margin-bottom: var(--sp-2); border: 1px solid var(--line);
    border-radius: var(--r-md); }
.ac-inline .ac-note-warn { border-color: var(--amber-line); }
.ac-inline .ac-note-ok { border-color: var(--green-line); }

.ac-empty, .ac-foot {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-200); line-height: var(--lh-snug); color: var(--text-muted);
}
.ac-foot { position: sticky; bottom: 0; background: var(--surface-panel);
    border-top: 1px solid var(--line-subtle); }
.ac-inline .ac-foot { position: static; background: transparent; }
.ac-hint { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-200); color: var(--text-faint); }

/* ------------------------------------------ 14c. PART CANDIDATE ROWS
   Every candidate states what it is, whether we have one, where it sits, and
   WHY it surfaced. A weak guess must look weak: the strength bar and the tier
   chip are the difference between a 100-point exact match and a 40-point
   two-token coincidence, which used to render identically. */

.wk-cand { cursor: pointer; }
.wk-cand-head { display: flex; align-items: baseline; gap: var(--sp-2); }
/* The identifier used to sit on this line and, in a ~320px panel, squeezed the
   description down to ~145px: "19 Inch Hose-A  Ve..." and two Hydraulic Return
   Oil Filter Cartridges that were byte-identical on screen. The NAME is what a
   technician reads to pick the right part, so it now owns the head line and may
   wrap to two lines; the part number moved down to the metadata row. */
.wk-cand-pn { font-size: var(--fs-200); color: var(--text-secondary); flex-shrink: 0; }
.wk-cand-name {
    flex: 1; min-width: 0;
    font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--text-primary);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere;
}
.wk-score {
    flex-shrink: 0; width: 42px; height: 4px;
    border-radius: var(--r-pill); background: var(--g-800); overflow: hidden;
}
.wk-score i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--g-500); }
.wk-score-strong i { background: var(--g-100); }
.wk-score-ok i     { background: var(--g-400); }
.wk-score-weak i   { background: var(--g-600); }
.wk-score-faint i  { background: var(--g-700); }
.wk-score-n {
    flex-shrink: 0; min-width: 22px; text-align: right;
    font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-faint);
}
.wk-score-strong + .wk-score-n { color: var(--text-secondary); }

.wk-cand-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
    margin-top: var(--sp-05);
    font-size: var(--fs-200); color: var(--text-muted);
}
.wk-cand-mfg { font-family: var(--font-mono); }
.wk-cand-loc { font-family: var(--font-mono); }
.wk-cand-req { color: var(--text-secondary); }
.wk-stock { color: var(--green-text); font-weight: var(--fw-medium); }
/* Zero stock is stated, never hidden — a part the shelf does not have is the
   single most expensive thing to discover at the machine. */
.wk-stock-out {
    padding: 0 var(--sp-1);
    border: 1px solid var(--red-line); border-radius: var(--r-sm);
    background: var(--red-soft); color: var(--red-text);
    font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase;
}

.wk-why {
    display: flex; align-items: baseline; gap: var(--sp-2);
    margin-top: var(--sp-1);
    font-size: var(--fs-200); line-height: var(--lh-snug); color: var(--text-muted);
}
/* Clamped to two lines: the bridge reason is a full sentence and an unclamped
   row grew to 5 lines, which turned a 12-candidate list into a scroll marathon.
   The full text stays available in the row's title attribute. */
.wk-why-text {
    flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.wk-ev {
    flex-shrink: 0;
    padding: 0 var(--sp-1);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: rgba(255,255,255,.05);
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: 17px;
    letter-spacing: var(--ls-caps); text-transform: uppercase;
    color: var(--text-secondary);
}
/* The tiers are ranked by how much they are worth, using surface weight —
   confirmed-on-this-machine is the brightest, raw inventory the quietest. */
.wk-ev-on   { background: rgba(255,255,255,.11); border-color: var(--line-strong);
    color: var(--text-primary); }
.wk-ev-used { background: rgba(255,255,255,.07); color: var(--text-secondary); }
.wk-ev-sim  { background: transparent; border-style: dashed; color: var(--text-muted); }
.wk-ev-inv  { background: transparent; border-color: var(--line-subtle); color: var(--text-faint); }

.wk-add-hint {
    display: none;
    position: absolute; right: var(--sp-3); top: var(--sp-2);
    pointer-events: none;
}
.ac-opt.ac-sel .wk-add-hint,
.ac-opt:hover .wk-add-hint,
.wk-cand:hover .wk-add-hint { display: inline-flex; align-items: center; }
.ac-opt.ac-sel .wk-cand-head,
.ac-opt:hover .wk-cand-head,
.wk-cand:hover .wk-cand-head { padding-right: 84px; }

/* ------------------------------------------ 14d. PARTS ON THE WORK ORDER */

.wk-parts-q { margin-bottom: var(--sp-2); }
.wk-parts-empty { padding: var(--sp-1) 0; font-size: var(--fs-300); color: var(--text-muted); }
.wk-part-main { flex: 1; min-width: 0; }
.wk-part-id { display: flex; align-items: baseline; gap: var(--sp-2); }
.wk-part-id strong { font-size: var(--fs-200); color: var(--text-secondary); }
.wk-part-meta { font-size: var(--fs-200); color: var(--text-muted); }
.wk-part-qty-ro { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--text-secondary); }
.wk-qty-input {
    width: 52px; min-height: var(--ctl-h-sm); flex-shrink: 0;
    padding: 0 var(--sp-1);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--surface-sunken); color: var(--text-primary);
    font-family: var(--font-mono); font-size: var(--fs-300); text-align: center;
}
.wk-qty-input:focus { outline: none; border-color: var(--focus); }
.wk-qty-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }

/* "Remember this part for <machine>" — the ONLY path that writes the
   equipment knowledge map. It rests quiet so it never reads as required. */
.wk-remember {
    margin-top: var(--sp-1);
    padding: 0 var(--sp-2); min-height: var(--ctl-h-sm);
    border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
    background: transparent; color: var(--text-muted);
    font-size: var(--fs-200); cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}
.wk-remember:hover { border-style: solid; background: var(--surface-hover); color: var(--text-primary); }
.wk-remember.is-on {
    border-style: solid; border-color: var(--green-line);
    background: var(--green-soft); color: var(--green-text);
}

.wk-prov-unlisted { color: var(--amber-text); border-color: var(--amber-line); }

.wk-qty-prompt {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3);
    background: var(--surface-raised);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    font-size: var(--fs-300);
}
.wk-qty-prompt-pn { flex: 1; min-width: 0; font-size: var(--fs-200); color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-qty-prompt-lbl { font-size: var(--fs-200); color: var(--text-muted); text-transform: uppercase;
    letter-spacing: var(--ls-caps); }
.wk-qty-prompt-input { width: 64px; min-height: var(--ctl-h-sm); padding: 0 var(--sp-2);
    text-align: center; font-family: var(--font-mono); }

/* ------------------------------------------ 14e. AI CANDIDATE PICK-LISTS */

.wk-aipick {
    margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-1);
    background: var(--surface-panel);
    border: 1px solid var(--line); border-radius: var(--r-md);
}
.wk-aipick-q {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-200); font-weight: var(--fw-medium); line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-secondary);
}
.wk-aipick-qty { font-family: var(--font-mono); color: var(--text-muted); text-transform: none;
    letter-spacing: 0; }
.wk-aipick-eq { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.wk-aipick .wk-r-result { background: var(--surface-raised); }
.wk-ai-note { margin-top: var(--sp-2); font-size: var(--fs-200); line-height: var(--lh-snug);
    color: var(--text-muted); }

/* ==================================================== 15. RESPONSIVE */

@media (max-width: 1100px) {
    .wk-layout { grid-template-columns: minmax(0, 1fr); }
    .wk-col-left, .wk-col-right { position: static; max-height: none; }
    .week-grid { grid-template-columns: repeat(3, 1fr); }
    .rb-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .perf-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .sidebar { width: var(--sidebar-w-collapsed); }
    .sidebar-header h1, .nav-link span, .sidebar-footer span,
    .sidebar-search { display: none; }
    .sidebar-header { justify-content: center; padding: var(--sp-4) 0 var(--sp-3); }
    .nav-link { justify-content: center; padding: 0; border-left-width: 0; }
    .nav-link svg { width: 18px; height: 18px; }
    .content { padding: var(--sp-4); }
    .dashboard-grid, .form-row, .form-row-3,
    .detail-grid, .detail-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
    .week-grid { grid-template-columns: repeat(2, 1fr); }
    .cal-stats { grid-template-columns: repeat(2, 1fr); }
    .cal-progress-section { flex-direction: column; }
    .perf-cards, .perf-charts { grid-template-columns: minmax(0, 1fr); }
    .perf-header { flex-direction: column; align-items: flex-start; }
    .perf-filters { width: 100%; flex-direction: column; }
}

/* ---- role chip -----------------------------------------------------------
   A role is a hierarchy, not a status, so it gets a neutral surface and takes
   only its text colour from the role ladder. The previous markup built a
   translucent background by string-concatenating "22" onto a hex literal,
   which silently produced invalid CSS the moment the colour became a token. */
.role-chip {
    display: inline-block;
    margin-top: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    letter-spacing: .04em;
}


/* ---- due cell ------------------------------------------------------------
   State AND magnitude in one cell. Red is reserved for genuinely late work; a
   list where every row is red carries no signal at all. */
.due-date { color: var(--text-secondary); }
.due-tag {
    display: inline-block; margin-left: var(--sp-2);
    font-size: var(--fs-200); font-weight: var(--fw-medium);
    font-family: var(--font-mono); white-space: nowrap;
}
.due-over { color: var(--red-text); }
.due-soon { color: var(--amber-text); }
.due-ok   { color: var(--text-faint); }