/* ── Used Parts KPI Dashboard ── */
.upk-wrap {
    --upk-primary: #1565C0;
    --upk-primary-dark: #0D47A1;
    --upk-primary-light: #42A5F5;
    --upk-primary-bg: #E3F2FD;
    --upk-accent: #1976D2;
    --upk-bg: #F5F7FA;
    --upk-white: #FFFFFF;
    --upk-card: #FFFFFF;
    --upk-border: #E0E6ED;
    --upk-border-light: #EEF2F7;
    --upk-text: #2C3E50;
    --upk-text-sec: #607D8B;
    --upk-text-muted: #90A4AE;
    --upk-green: #2E7D32;
    --upk-green-bg: #E8F5E9;
    --upk-red: #C62828;
    --upk-red-bg: #FFEBEE;
    --upk-orange: #E65100;
    --upk-orange-bg: #FFF3E0;
    --upk-yellow: #F9A825;
    --upk-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --upk-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --upk-radius: 8px;
    --upk-radius-lg: 12px;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Dark mode overrides
   18 Aug 2026 (Mohit) — --upk-primary/green/red/orange/yellow were NEVER redefined here, only
   their translucent _bg pairs were. Those 5 tokens are chosen to read on a WHITE card
   (e.g. --upk-green #2E7D32, a dark forest green) and drive most of the app's "important" text —
   KPI card values, section headers, the active tab, trend arrows, status-badge text, the
   Part Type CSV icon. On the dark navy card (#1e293b) that dark-tuned green/red/blue reads as
   dull, low-contrast text — exactly Mohit's report ("Statistics/Order Detail/Part Type text
   dull, mil ja raha hai"). Brightened to the same vivid tones Extended KPIs already used in its
   own always-dark palette, so every tab now matches Extended's brightness standard. --upk-text-
   muted was also measured too dim to pass contrast on dark navy (~2.9:1) — brightened. */
.dark .upk-wrap {
    --upk-bg: #1a1a2e;
    --upk-white: #16213e;
    --upk-card: #1e293b;
    --upk-border: #334155;
    --upk-border-light: #2d3a4a;
    --upk-text: #e2e8f0;
    --upk-text-sec: #94a3b8;
    --upk-text-muted: #8899ac;
    --upk-primary: #60a5fa;
    --upk-green: #34d399;
    --upk-red: #f87171;
    --upk-orange: #ffa726;
    --upk-yellow: #ffca28;
    --upk-primary-bg: rgba(21,101,192,0.15);
    --upk-green-bg: rgba(46,125,50,0.15);
    --upk-red-bg: rgba(198,40,40,0.15);
    --upk-orange-bg: rgba(230,81,0,0.15);
    --upk-shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --upk-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ── Sub-Tabs ── */
.upk-tabs {
    display: flex;
    gap: 4px;
    padding: 0 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--upk-border);
    overflow-x: auto;
}
.upk-tab {
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.83rem;
    color: var(--upk-text-sec);
    border: none;
    background: none;
    position: relative;
    transition: all 0.15s;
    white-space: nowrap;
    /* 10 Aug 2026 — tabs became <a href="#..."> (from <button>) so ctrl/cmd-click can open a
       new browser tab; these reset the default anchor look back to how the button looked. */
    display: inline-block;
    text-decoration: none;
}
.upk-tab:visited { color: var(--upk-text-sec); }
.upk-tab.active:visited { color: var(--upk-primary); }
.upk-tab:hover { color: var(--upk-primary); background: var(--upk-primary-bg); }
.upk-tab.active {
    color: var(--upk-primary);
    font-weight: 600;
}
.upk-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    right: 18px;
    height: 2.5px;
    background: var(--upk-primary);
    border-radius: 2px 2px 0 0;
}
.upk-tab-panel { display: none; }
.upk-tab-panel.active { display: block; }

/* ── Filter Bar ── */
.upk-filters {
    background: var(--upk-card);
    padding: 14px 18px;
    border-radius: var(--upk-radius-lg);
    border: 1px solid var(--upk-border);
    margin-bottom: 16px;
    box-shadow: var(--upk-shadow-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.upk-filters label {
    color: var(--upk-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
    display: block;
}
.upk-filters select,
.upk-filters input[type="date"] {
    background: var(--upk-bg);
    color: var(--upk-text);
    border: 1px solid var(--upk-border);
    font-size: 0.83rem;
    border-radius: 6px;
    padding: 6px 10px;
    outline: none;
}
.upk-filters select:focus,
.upk-filters input[type="date"]:focus {
    background: var(--upk-card);
    border-color: var(--upk-primary-light);
    box-shadow: 0 0 0 3px rgba(21,101,192,0.1);
}

/* ── Buttons ── */
.upk-btn {
    font-weight: 600;
    font-size: 0.83rem;
    border-radius: 6px;
    padding: 6px 16px;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}
.upk-btn-primary {
    background: var(--upk-primary);
    color: #fff;
}
.upk-btn-primary:hover { background: var(--upk-primary-dark); }
.upk-btn-outline {
    background: transparent;
    color: var(--upk-text-sec);
    border: 1px solid var(--upk-border);
}
.upk-btn-outline:hover { background: var(--upk-bg); color: var(--upk-text); }

/* Per-row CSV export icon (Part Type tab) — 2 Jun 2026 */
.upk-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 5px;
    color: var(--upk-green, #16a34a);
    font-size: 1.05rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.upk-icon-btn:hover { background: var(--upk-primary-bg); color: var(--upk-primary); }
/* Narrow CSV-icon column on the Part Type table — only as wide as the icon.
   Every column in this table is nowrap, so with no flexible column the browser shares
   free width across all of them. Making the Part Type label column greedy (width:100%)
   forces every other column — including this one — to collapse to its content width. */
.upk-pttable .rl { width: 100%; }
.upk-csv-col {
    width: 1px;
    white-space: nowrap;
    text-align: center;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* ── Cards ── */
.upk-card {
    background: var(--upk-card);
    border: 1px solid var(--upk-border);
    border-radius: var(--upk-radius-lg);
    box-shadow: var(--upk-shadow-sm);
    overflow: hidden;
}

/* ── KPI Cards ── */
.upk-kpi-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-bottom: 20px;
}
.upk-kpi-card {
    background: var(--upk-card);
    border: 1px solid var(--upk-border);
    border-radius: var(--upk-radius-lg);
    padding: 18px;
    text-align: center;
    box-shadow: var(--upk-shadow-sm);
    transition: box-shadow 0.2s;
}
.upk-kpi-card:hover { box-shadow: var(--upk-shadow); }
.upk-kpi-value { font-size: 1.8rem; font-weight: 700; color: var(--upk-primary); }
/* 18 Aug 2026 (Mohit) — headline card VALUE should read as bright white in dark mode, same as
   Extended KPIs' .xkpi-value (var(--x-text)) and Vendor Scorecard's .sc-xcard .xv (already
   var(--upk-text)) — blue-on-navy still reads duller than plain bright text even after the
   primary-blue brightening above. Light mode is untouched (blue value was not the complaint). */
.dark .upk-kpi-value { color: var(--upk-text); }
.upk-kpi-label {
    font-size: 0.72rem;
    color: var(--upk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 2px;
}
.upk-kpi-sub { font-size: 0.75rem; color: var(--upk-text-sec); margin-top: 4px; }

/* ── DataTables Override ── */
.upk-wrap table.dataTable { color: var(--upk-text) !important; }
.upk-wrap table.dataTable thead th {
    background: var(--upk-bg) !important;
    color: var(--upk-text-sec) !important;
    border-bottom: 2px solid var(--upk-border) !important;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    padding: 10px 10px !important;
}
/* Grouped column headers */
.upk-wrap table.dataTable thead tr.upk-col-group th.upk-group-hdr {
    background: var(--upk-primary) !important;
    color: #fff !important;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 8px !important;
    border-right: 2px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid var(--upk-primary-dark) !important;
}
.upk-wrap table.dataTable thead tr.upk-col-group th.upk-group-hdr:last-child {
    border-right: none;
}
/* Narrow date column */
.upk-col-date { width: 80px !important; max-width: 90px; font-size: 0.8rem; }
/* Advanced Filters */
.upk-adv-filters {
    background: var(--upk-bg); border: 1px solid var(--upk-border); border-radius: var(--upk-radius);
    padding: 10px 14px; margin-bottom: 10px;
}
.upk-adv-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
    font-size: 0.8rem; font-weight: 600; color: var(--upk-text-sec);
}
.upk-btn-xs {
    font-size: 0.72rem; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--upk-primary-light);
    background: var(--upk-primary-bg); color: var(--upk-primary); cursor: pointer; font-weight: 600;
}
.upk-btn-xs:hover { background: var(--upk-primary); color: #fff; }
.upk-btn-clear { border-color: var(--upk-red); background: var(--upk-red-bg); color: var(--upk-red); }
.upk-btn-clear:hover { background: var(--upk-red); color: #fff; }
.upk-filter-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap;
}
.upk-filter-row select, .upk-filter-row input {
    font-size: 0.8rem; padding: 4px 8px; border: 1px solid var(--upk-border); border-radius: 5px;
    background: var(--upk-white); color: var(--upk-text);
}
.upk-filter-row select { min-width: 120px; }
.upk-filter-row input[type="number"] { width: 90px; }
.upk-filter-row .upk-filter-remove {
    font-size: 0.75rem; color: var(--upk-red); cursor: pointer; padding: 2px 6px;
    border: 1px solid var(--upk-red); border-radius: 4px; background: none;
}
.upk-filter-row .upk-filter-remove:hover { background: var(--upk-red); color: #fff; }
.upk-filter-count { font-size: 0.72rem; color: var(--upk-primary); font-weight: 600; margin-left: auto; }
#upkFilterToggle.active { background: var(--upk-primary); color: #fff; }
/* Multi-select dropdown */
.upk-mselect { position: relative; display: inline-block; min-width: 180px; }
.upk-mselect-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; border: 1px solid var(--upk-border); border-radius: 6px;
    background: var(--upk-white); cursor: pointer; font-size: 0.83rem; color: var(--upk-text);
    min-height: 34px;
}
.upk-mselect-trigger:hover { border-color: var(--upk-primary-light); }
.upk-mselect-arrow { font-size: 0.7rem; color: var(--upk-text-muted); }
.upk-mselect-drop {
    position: absolute; top: 100%; left: 0; right: 0; min-width: 220px;
    background: var(--upk-white); border: 1px solid var(--upk-border); border-radius: 6px;
    box-shadow: var(--upk-shadow); z-index: 100; margin-top: 4px; overflow: hidden;
}
.upk-mselect-search {
    width: 100%; padding: 7px 10px; border: none; border-bottom: 1px solid var(--upk-border-light);
    font-size: 0.8rem; outline: none; color: var(--upk-text) !important; background: var(--upk-white) !important; box-sizing: border-box;
}
.upk-mselect-search:focus { border-bottom-color: var(--upk-primary-light); }
.upk-mselect-actions {
    display: flex; gap: 12px; padding: 5px 10px; border-bottom: 1px solid var(--upk-border-light);
    font-size: 0.72rem;
}
.upk-mselect-actions a { color: var(--upk-primary); text-decoration: none; font-weight: 600; }
.upk-mselect-actions a:hover { text-decoration: underline; }
#upkMsOptions { max-height: 200px; overflow-y: auto; padding: 4px 0; }
.upk-mselect-opt {
    display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer;
    font-size: 0.8rem; color: var(--upk-text); transition: background 0.1s;
}
.upk-mselect-opt:hover { background: var(--upk-primary-bg); }
.upk-mselect-opt input[type="checkbox"] { accent-color: var(--upk-primary); margin: 0; }
/* 2 Jun 2026 — Part Type multi-select option text was rendering grey/low-contrast in dark mode
   (global Filament label color overriding var(--upk-text)). Force the visible theme text colour.
   18 Jun 2026 — generalised to ALL multi-select option lists (Part Type, Category/PCDB, Vendors)
   so the Category/PCDB options are also readable in dark mode. */
.dark .upk-wrap .upk-mselect-opt { color: var(--upk-text) !important; }
.upk-mselect-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.upk-wrap table.dataTable tbody td {
    border-color: var(--upk-border-light) !important;
    padding: 8px 10px !important;
    font-size: 0.83rem;
    vertical-align: middle;
}
.upk-wrap table.dataTable tbody tr { transition: background 0.1s; }
.upk-wrap table.dataTable tbody tr:hover { background: var(--upk-primary-bg) !important; }
.upk-wrap .dataTables_wrapper .dataTables_filter input {
    background: var(--upk-bg);
    color: var(--upk-text);
    border: 1px solid var(--upk-border);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.83rem;
}
.upk-wrap .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--upk-primary-light);
    box-shadow: 0 0 0 3px rgba(21,101,192,0.1);
    outline: none;
}
.upk-wrap .dataTables_wrapper .dataTables_length select {
    background: var(--upk-bg);
    color: var(--upk-text);
    border: 1px solid var(--upk-border);
    border-radius: 6px;
    padding: 4px 8px;
}
.upk-wrap .dataTables_wrapper .dataTables_info,
.upk-wrap .dataTables_wrapper .dataTables_length label,
.upk-wrap .dataTables_wrapper .dataTables_filter label {
    color: var(--upk-text-muted) !important;
    font-size: 0.8rem;
}
.upk-wrap .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--upk-text-sec) !important;
    border-radius: 6px !important;
    border: 1px solid var(--upk-border) !important;
    margin: 0 2px;
    font-size: 0.8rem;
}
.upk-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--upk-primary) !important;
    color: #fff !important;
    border-color: var(--upk-primary) !important;
}
.upk-wrap .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--upk-primary-bg) !important;
    color: var(--upk-primary) !important;
    border-color: var(--upk-primary-light) !important;
}

/* ── Status Badges ── */
.upk-status {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-block;
    letter-spacing: 0.2px;
}
.upk-status-shipped { background: var(--upk-green-bg); color: var(--upk-green); }
.upk-status-cancelled { background: var(--upk-red-bg); color: var(--upk-red); }
.upk-status-return { background: var(--upk-orange-bg); color: var(--upk-orange); }
.upk-status-pending { background: #FFF8E1; color: #F57F17; }
.dark .upk-status-pending { background: rgba(245,127,23,0.15); color: #ffb74d; }
.upk-status-ordered { background: var(--upk-primary-bg); color: var(--upk-primary); }
.upk-status-other { background: #ECEFF1; color: #607D8B; }
.dark .upk-status-other { background: rgba(96,125,139,0.15); color: #b0bec5; }

/* ── Monthly Tables ── */
.upk-mtable { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.upk-mtable th, .upk-mtable td {
    padding: 8px 6px;
    border: 1px solid var(--upk-border-light);
    text-align: center;
    white-space: nowrap;
}
.upk-mtable th {
    background: var(--upk-bg);
    color: var(--upk-text-sec);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.4px;
}
.upk-mtable .rl {
    text-align: left;
    font-weight: 600;
    color: var(--upk-text);
    background: var(--upk-bg);
    min-width: 140px;
    font-size: 0.78rem;
}
.upk-mtable .rc { font-weight: 600; }
.upk-mtable .tc { background: rgba(21,101,192,0.04); font-weight: 700; }
.dark .upk-mtable .tc { background: rgba(21,101,192,0.1); }
.upk-rate-good { color: var(--upk-green); }
.upk-rate-warn { color: var(--upk-orange); }
.upk-rate-bad { color: var(--upk-red); }

/* ── Vendor Pills ── */
.upk-vpill {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 4px 4px 0;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    border: 2px solid transparent;
    transition: all 0.15s;
    color: #fff;
}
.upk-vpill:hover { opacity: 0.85; transform: translateY(-1px); }
.upk-vpill.active { border-color: var(--upk-primary-dark); box-shadow: var(--upk-shadow); }

.upk-vchip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
}

/* ── Section Titles ── */
.upk-section {
    color: var(--upk-primary);
    font-size: 0.83rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--upk-primary-bg);
    display: flex;
    align-items: center;
    gap: 8px;
}
.upk-section::before {
    content: '';
    width: 3px;
    height: 16px;
    background: var(--upk-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Contact Cards ── */
.upk-contact-card {
    background: var(--upk-card);
    border: 1px solid var(--upk-border);
    border-radius: var(--upk-radius-lg);
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--upk-shadow-sm);
    transition: box-shadow 0.2s;
}
.upk-contact-card:hover { box-shadow: var(--upk-shadow); }
.upk-contact-card .vn { font-size: 0.95rem; font-weight: 700; margin-bottom: 10px; }
.upk-contact-card .ci { padding: 7px 0; border-bottom: 1px solid var(--upk-border-light); font-size: 0.83rem; }
.upk-contact-card .ci:last-child { border: none; }
.upk-contact-primary {
    background: var(--upk-primary-bg);
    color: var(--upk-primary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    letter-spacing: 0.3px;
}

/* ── Vendor Filter Pills ── */
.upk-vendor-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.upk-vendor-pills .upk-vpill {
    padding: 4px 12px;
    font-size: 0.75rem;
    margin: 0;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.15s;
}
.upk-vendor-pills .upk-vpill.active { opacity: 1; }
.upk-vendor-pills .upk-vpill:hover { opacity: 0.85; }

/* ── Scorecard Inputs ── */
.upk-sc-input {
    background: var(--upk-bg);
    color: var(--upk-text);
    border: 1px solid var(--upk-border);
    width: 58px;
    text-align: center;
    padding: 4px;
    border-radius: 6px;
    font-size: 0.8rem;
    transition: border-color 0.15s;
}
.upk-sc-input:focus { border-color: var(--upk-primary-light); outline: none; box-shadow: 0 0 0 2px rgba(21,101,192,0.1); }

/* ── Loading ── */
.upk-loading { text-align: center; padding: 50px; color: var(--upk-text-muted); }
.upk-loading i { font-size: 2rem; color: var(--upk-primary-light); animation: upkSpin 1s linear infinite; }
.upk-spinner {
    width: 36px; height: 36px; margin: 0 auto;
    border: 3px solid var(--upk-border);
    border-top: 3px solid var(--upk-primary);
    border-radius: 50%;
    animation: upkSpin 0.8s linear infinite;
}
.upk-spinner-inline {
    display: inline-block; vertical-align: middle;
    width: 14px; height: 14px;
    border: 2px solid var(--upk-border);
    border-top: 2px solid var(--upk-primary);
    border-radius: 50%;
    animation: upkSpin 0.8s linear infinite;
    margin-right: 4px;
}
/* ── Center Loader (Order Detail) ── */
.upk-center-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}
.upk-spinner-lg {
    width: 48px; height: 48px;
    border: 4px solid var(--upk-border);
    border-top: 4px solid var(--upk-primary);
    border-radius: 50%;
    animation: upkSpin 0.8s linear infinite;
}

@keyframes upkSpin { to { transform: rotate(360deg); } }

.upk-summary-row { background: var(--upk-primary-bg) !important; font-weight: 700 !important; }

/* ── Order count / info text ── */
.upk-info { color: var(--upk-text-muted); font-size: 0.83rem; font-weight: 500; }

/* ── Statistics Tab ── */
.upk-stats-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 20px;
}
.upk-stat-card {
    background: var(--upk-card);
    border: 1px solid var(--upk-border);
    border-radius: var(--upk-radius-lg);
    padding: 18px 14px;
    text-align: center;
    box-shadow: var(--upk-shadow-sm);
    min-width: 0;   /* allow grid items to shrink and avoid overflow */
    overflow: hidden;
}
.upk-stat-value {
    font-size: 1.5rem; font-weight: 700; color: var(--upk-primary);
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* 18 Aug 2026 (Mohit) — same white-in-dark treatment as .upk-kpi-value above; this is the
   Statistics tab's card value and was the one he pointed at directly. */
.dark .upk-stat-value { color: var(--upk-text); }
.upk-stat-label {
    font-size: 0.72rem; color: var(--upk-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-top: 2px;
    overflow-wrap: anywhere;
}
.upk-stat-trend {
    font-size: 0.78rem; font-weight: 600; margin-top: 6px;
    overflow-wrap: anywhere;
}
.upk-trend-up { color: var(--upk-green); }
.upk-trend-down { color: var(--upk-red); }
.upk-trend-neutral { color: var(--upk-text-muted); }
.upk-charts-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    margin-bottom: 20px;
}
.upk-chart-card {
    background: var(--upk-card); border: 1px solid var(--upk-border);
    border-radius: var(--upk-radius-lg); padding: 16px;
    box-shadow: var(--upk-shadow-sm);
}
.upk-chart-title {
    font-size: 0.8rem; font-weight: 700; color: var(--upk-text);
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 12px;
}
.upk-compare-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.upk-compare-table th, .upk-compare-table td {
    padding: 10px 12px; border: 1px solid var(--upk-border-light); text-align: right;
}
.upk-compare-table th { background: var(--upk-bg); color: var(--upk-text-sec); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.4px; }
.upk-compare-table td:first-child, .upk-compare-table th:first-child { text-align: left; font-weight: 600; }
.upk-compare-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--upk-text-sec); cursor: pointer; white-space: nowrap; }
.upk-compare-toggle input { cursor: pointer; }

/* ── Extended KPIs Tab (Jun 2026) ──
   18 Aug 2026 (Mohit) — was a forced-dark "suggested layout" theme that stayed near-black
   regardless of the app's light/dark toggle, so in light mode it showed as a black box and
   several text-only colors below (--x-blue-l/--x-green/--x-red as bare hex) were tuned for a
   dark background and had poor contrast if ever read against light. Now follows .dark like the
   rest of the page: light-mode values below reuse the same --upk-* tokens as everywhere else;
   the ORIGINAL dark values are preserved unchanged under .dark .upk-ext-dash so the dark-mode
   look does not regress. */
.upk-ext-dash {
    --x-bg: var(--upk-bg);
    --x-panel: var(--upk-card);
    --x-panel-border: var(--upk-border);
    --x-card: var(--upk-bg);
    --x-card-border: var(--upk-border);
    --x-text: var(--upk-text);
    --x-muted: var(--upk-text-sec);
    --x-blue: var(--upk-primary);
    --x-blue-l: var(--upk-primary-dark);
    --x-green: var(--upk-green);
    --x-red: var(--upk-red);
    --x-cyan: #0E7490;
    background: var(--x-bg);
    border: 1px solid var(--x-panel-border);
    border-radius: 14px;
    padding: 12px;
    margin-top: 4px;
    color: var(--x-text);
}
.dark .upk-ext-dash {
    --x-bg: #0a0f1e;
    --x-panel: #0e1525;
    --x-panel-border: #1c2740;
    --x-card: #121b30;
    --x-card-border: #243149;
    --x-text: #e6edf7;
    --x-muted: #8b97ad;
    --x-blue: #3b82f6;
    --x-blue-l: #60a5fa;
    --x-green: #34d399;
    --x-red: #f87171;
    --x-cyan: #22d3ee;
}

/* Section panels */
.upk-ext-dash .xkpi-section {
    background: var(--x-panel);
    border: 1px solid var(--x-panel-border);
    border-radius: 12px;
    padding: 10px 12px 11px;
    margin-bottom: 10px;
}
/* 31 Jul 2026 — multi-panel rows. The suggested layout puts Revenue+COGS on one line and
   Profitability+Returns+Catalog on the next; that is what makes the cards small and dense.
   Full-width stacked sections stretched every tile and was the real layout defect. */
.upk-ext-dash .xkpi-row2,
.upk-ext-dash .xkpi-row3 { display: grid; gap: 10px; align-items: start; }
.upk-ext-dash .xkpi-row2 { grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); }
.upk-ext-dash .xkpi-row3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.upk-ext-dash .xkpi-row2 > .xkpi-section,
.upk-ext-dash .xkpi-row3 > .xkpi-section { margin-bottom: 0; height: 100%; }
.upk-ext-dash .xkpi-shead { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.upk-ext-dash .xkpi-snum {
    width: 19px; height: 19px; border-radius: 5px;
    background: var(--x-blue); color: #fff;
    font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.upk-ext-dash .xkpi-stitle {
    color: var(--x-blue-l); font-size: 0.76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
}

/* Card grid + base card — compact, to match the suggested layout's tile density */
.upk-ext-dash .xkpi-cards {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.upk-ext-dash .xkpi-card {
    background: var(--x-card);
    border: 1px solid var(--x-card-border);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    min-width: 0; overflow: hidden;
}
.upk-ext-dash .xkpi-label {
    color: var(--x-muted); font-size: 0.6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.25;
    overflow-wrap: anywhere;
}
.upk-ext-dash .xkpi-value {
    color: var(--x-text); font-size: 1.05rem; font-weight: 700;
    margin: 6px 0 4px; line-height: 1.1; overflow-wrap: anywhere;
}
.upk-ext-dash .xkpi-trend { font-size: 0.62rem; font-weight: 600; }
.upk-ext-dash .xkpi-trend .lbl { color: var(--x-muted); font-weight: 500; margin-left: 4px; }
.upk-ext-dash .xkpi-trend.up { color: var(--x-green); }
.upk-ext-dash .xkpi-trend.down { color: var(--x-red); }
.upk-ext-dash .xkpi-trend.flat { color: var(--x-muted); }

/* Executive row: 5 cards + Benefits panel */
.upk-ext-dash .xkpi-exec-row { display: grid; grid-template-columns: 1fr 250px; gap: 12px; align-items: stretch; }
/* Executive cards still read as the headline row, but 3 Aug 2026 (Mohit) they were tightened:
   the five tiles were noticeably bulkier than every group below them and pushed the charts down.
   Everything below is a proportional shrink — no element was dropped. */
/* align-content:start is what actually controls the exec card HEIGHT. .xkpi-exec-row is a grid
   with align-items:stretch, so this card grid is stretched to the height of the Benefits panel
   beside it, and each card then fills its row — the tiles were sized by the Benefits panel, not
   by their own padding. Without this line, shrinking padding/fonts changes nothing vertically. */
.upk-ext-dash .xkpi-exec-cards {
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 8px;
    align-content: start;
}
.upk-ext-dash .xkpi-exec-card { text-align: left; padding: 10px 10px; }
.upk-ext-dash .xkpi-exec-card .xkpi-label { font-size: 0.6rem; }
.upk-ext-dash .xkpi-exec-card .xkpi-trend { font-size: 0.63rem; }
.upk-ext-dash .xkpi-ehead { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.upk-ext-dash .xkpi-iconbox {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.upk-ext-dash .xkpi-exec-card .xkpi-value { font-size: 1.08rem; margin: 2px 0 3px; }

/* Benefits panel — tightened 3 Aug 2026 alongside the exec cards, then brought down again to
   sit at the SAME height as a card so the row reads as one band. This panel is the tallest
   thing in the row, so it sets the Executive Summary's overall height: left at the old size it
   would just put whitespace under the now-shorter cards instead of making the row compact.
   All three benefit lines are kept — only the spacing and type size came down. */
.upk-ext-dash .xkpi-benefits {
    background: linear-gradient(180deg, rgba(59,130,246,0.10), var(--x-card));
    border: 1px solid var(--x-card-border); border-radius: 12px; padding: 8px 11px;
}
.upk-ext-dash .xkpi-benefits-h {
    color: var(--x-blue-l); font-weight: 700; font-size: 0.78rem;
    display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.upk-ext-dash .xkpi-benefits-h .bi-star-fill { color: var(--x-blue); }
.upk-ext-dash .xkpi-benefit {
    color: var(--x-text); font-size: 0.72rem; display: flex; align-items: center; gap: 6px;
    padding: 1px 0; line-height: 1.35;
}
.upk-ext-dash .xkpi-benefit i { color: var(--x-green); font-size: 0.8rem; }

/* Revenue row with operator signs */
.upk-ext-dash .xkpi-rev-cards { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.upk-ext-dash .xkpi-rev-cards .xkpi-card { flex: 1 1 88px; }
.upk-ext-dash .xkpi-op {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 12px; color: var(--x-muted); font-size: 1rem; font-weight: 700;
}

/* COGS circular cyan icons */
.upk-ext-dash .xkpi-cogs-icon {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.5px solid rgba(34,211,238,0.45); color: var(--x-cyan);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 7px; font-size: 0.85rem;
}
/* 31 Jul 2026 — .xkpi-cogs-card was emitted by the JS but never had a rule; the COGS tiles
   therefore sat at a different height to every other card. */
.upk-ext-dash .xkpi-cogs-card { display: flex; flex-direction: column; }

/* Sub-lines inside a card (payment-method split). Keeps the detail without extra tiles.
   3 Aug 2026 (Mohit) — COLLAPSED behind the card's ⓘ, same interaction as the section notes.
   The host tile is normal width when closed and widens to span 2 only while open: at normal
   width the sub-line label and its amount collide, which is what went wrong on the first pass. */
.upk-ext-dash .xkpi-detail {
    display: none;
    margin-top: 8px; padding-top: 7px;
    border-top: 1px dashed var(--x-card-border);
    flex-direction: column; gap: 3px;
    text-align: left;
}
.upk-ext-dash .xkpi-card.detail-open .xkpi-detail { display: flex; }
/* ⓘ sits in the tile's top-right corner; .xkpi-info's margin-left:auto is for the section
   header's flex row and must not apply here. */
.upk-ext-dash .xkpi-has-detail { position: relative; }
.upk-ext-dash .xkpi-dinfo {
    position: absolute; top: 5px; right: 6px; margin-left: 0; z-index: 1;
    font-size: 0.72rem;
}
.upk-ext-dash .xkpi-card.detail-open .xkpi-dinfo { color: var(--x-blue-l); }
/* Widen only while open, so the collapsed row stays a tidy single-width grid. */
.upk-ext-dash .xkpi-cogs-card.detail-open { grid-column: span 2; }
.upk-ext-dash .xkpi-drow {
    display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
    font-size: 0.64rem; color: var(--x-muted); font-weight: 500;
    line-height: 1.35;
}
.upk-ext-dash .xkpi-drow > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.upk-ext-dash .xkpi-drow b {
    color: var(--x-text); font-weight: 600; white-space: nowrap; flex-shrink: 0;
}

/* Double-width tile, for cards carrying a detail breakdown */
.upk-ext-dash .xkpi-span2 { grid-column: span 2; }
.upk-ext-dash .xkpi-rev-cards .xkpi-span2 { flex: 1 1 190px; }

/* Collapsible reconciliation panel below the charts (Profit Derivation) */
.upk-ext-dash .xkpi-collapse { margin-top: 16px; }
.upk-ext-dash .xkpi-ctoggle {
    width: 100%; text-align: left; cursor: pointer;
    background: var(--x-panel); border: 1px solid var(--x-panel-border);
    border-radius: 12px; padding: 12px 16px;
    color: var(--x-blue-l); font-size: 0.82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    display: flex; align-items: center; gap: 8px;
}
.upk-ext-dash .xkpi-ctoggle:hover { border-color: rgba(59,130,246,0.5); }
.upk-ext-dash .xkpi-ctoggle .bi { transition: transform 0.15s ease; }
.upk-ext-dash .xkpi-chint {
    color: var(--x-muted); font-weight: 500; text-transform: none; letter-spacing: 0;
    font-size: 0.75rem;
}
.upk-ext-dash .xkpi-cbody { display: none; margin-top: 12px; }
.upk-ext-dash .xkpi-collapse.open .xkpi-cbody { display: block; }
.upk-ext-dash .xkpi-collapse.open .xkpi-ctoggle .bi { transform: rotate(90deg); }
.upk-ext-dash .xkpi-collapse .xkpi-section { margin-bottom: 0; }

/* Calculation note — COLLAPSED by default (31 Jul 2026). Always-open notes were 3-5 lines a
   piece and were what pushed the six card groups + charts off one screen. */
.upk-ext-dash .xkpi-note {
    display: none;
    margin-bottom: 10px;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--x-muted);
    background: rgba(59,130,246,0.06);
    border-left: 3px solid rgba(59,130,246,0.35);
    border-radius: 6px;
    padding: 7px 10px;
}
.upk-ext-dash .xkpi-section.note-open .xkpi-note { display: block; }
.upk-ext-dash .xkpi-info {
    background: none; border: none; cursor: pointer; padding: 0 2px;
    color: var(--x-muted); font-size: 0.8rem; line-height: 1; margin-left: auto;
}
.upk-ext-dash .xkpi-info:hover { color: var(--x-blue-l); }
.upk-ext-dash .xkpi-section.note-open .xkpi-info { color: var(--x-blue-l); }

/* Connector caption (dashed line + label) */
.upk-ext-dash .xkpi-connector {
    position: relative; text-align: center; margin-top: 9px;
    color: var(--x-muted); font-size: 0.78rem; font-weight: 500;
}
.upk-ext-dash .xkpi-connector::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    border-top: 1px dashed var(--x-card-border);
}
.upk-ext-dash .xkpi-connector span { position: relative; background: var(--x-panel); padding: 0 14px; }

/* Charts */
.upk-ext-dash .xkpi-charts {
    display: grid; gap: 10px;
    grid-template-columns: repeat(3, minmax(0,1fr));
}
.upk-ext-dash .xkpi-chart-card {
    background: var(--x-panel); border: 1px solid var(--x-panel-border);
    border-radius: 12px; padding: 10px 12px;
}
/* Fixed chart height (charts run maintainAspectRatio:false) so the three trends sit on the
   same screen as the six card groups instead of each being half the viewport tall. */
.upk-ext-dash .xkpi-chart-card canvas { height: 150px !important; max-height: 150px; }
.upk-ext-dash .xkpi-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.upk-ext-dash .xkpi-chart-title {
    color: var(--x-text); font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.upk-ext-dash .xkpi-mpill {
    background: var(--x-card); border: 1px solid var(--x-card-border); color: var(--x-muted);
    font-size: 0.72rem; padding: 3px 10px; border-radius: 6px;
}
/* Multi-panel rows collapse on smaller screens so the tiles never get squeezed unreadable. */
@media (max-width: 1400px) {
    .upk-ext-dash .xkpi-row3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1100px) {
    .upk-ext-dash .xkpi-row2,
    .upk-ext-dash .xkpi-row3 { grid-template-columns: 1fr; }
}
/* On a narrow grid a span-2 tile would force a 2-column layout and squeeze every other
   card, so drop the span and let it sit at normal width. */
@media (max-width: 640px) {
    .upk-ext-dash .xkpi-span2 { grid-column: auto; }
    .upk-ext-dash .xkpi-cogs-card.detail-open { grid-column: auto; }
}
@media (max-width: 1024px) {
    .upk-ext-dash .xkpi-exec-row { grid-template-columns: 1fr; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .upk-filters { padding: 10px 12px; }
    .upk-tabs { gap: 0; }
    .upk-tab { padding: 8px 12px; font-size: 0.78rem; }
    .upk-charts-grid { grid-template-columns: 1fr; }
}

/* ── Vendor Scorecard, single-page layout (4 Aug 2026 — Uday's section 6) ──
   Everything below is scoped under .upk-scdash so it cannot leak into the other tabs.
   Colours come from the existing --upk-* variables, so light and dark both work
   without a second set of rules. */
.upk-scdash { display: flex; flex-direction: column; gap: 12px; }

/* Executive card row: score gauge + 5 headline cards */
.upk-scdash .sc-exec {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.upk-scdash .sc-xcard {
    background: var(--upk-card);
    border: 1px solid var(--upk-border);
    border-radius: var(--upk-radius-lg);
    padding: 14px 16px;
    box-shadow: var(--upk-shadow-sm);
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0;
}
.upk-scdash .sc-xcard .xl {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--upk-text-sec);
}
.upk-scdash .sc-xcard .xv {
    font-size: 1.65rem; font-weight: 700; color: var(--upk-text);
    margin-top: 4px; line-height: 1.15; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.upk-scdash .sc-xcard .xs { font-size: 0.74rem; color: var(--upk-text-muted); margin-top: 3px; }

/* Score gauge — a conic-gradient ring, no chart library needed */
.upk-scdash .sc-score { flex-direction: row; align-items: center; gap: 14px; }
.upk-scdash .sc-ring {
    width: 84px; height: 84px; border-radius: 50%; flex: none;
    display: grid; place-items: center; position: relative;
}
.upk-scdash .sc-ring::after {
    content: ''; position: absolute; inset: 8px;
    background: var(--upk-card); border-radius: 50%;
}
.upk-scdash .sc-ring .rv {
    position: relative; z-index: 1; text-align: center;
    font-size: 1.4rem; font-weight: 700; line-height: 1;
}
.upk-scdash .sc-ring .rd { font-size: 0.62rem; color: var(--upk-text-muted); font-weight: 600; }

/* The four metric group panels */
.upk-scdash .sc-groups {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.upk-scdash .sc-panel {
    background: var(--upk-card);
    border: 1px solid var(--upk-border);
    border-radius: var(--upk-radius-lg);
    overflow: hidden;
}
.upk-scdash .sc-panel > .ph {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 13px; font-size: 0.85rem; font-weight: 700;
    border-bottom: 1px solid var(--upk-border-light);
}
.upk-scdash .sc-panel > .pb {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--upk-border-light);
}
.upk-scdash .sc-tile {
    background: var(--upk-card); padding: 11px 13px; min-width: 0;
}
.upk-scdash .sc-tile .tl {
    font-size: 0.73rem; color: var(--upk-text-sec); font-weight: 500;
    min-height: 2.1em; line-height: 1.05rem;
}
.upk-scdash .sc-tile .tv { font-size: 1.28rem; font-weight: 700; margin-top: 2px; }
.upk-scdash .sc-tile .ts { font-size: 0.7rem; font-weight: 600; margin-top: 1px; }
.upk-scdash .sc-tile.na .tv { color: var(--upk-text-muted); font-weight: 600; font-size: 1.05rem; }
.upk-scdash .sc-tile.na .ts { color: var(--upk-text-muted); font-weight: 500; }
/* 11 Aug 2026 (Mohit) — clickable tiles that open the order-by-order drill-down page. */
.upk-scdash .sc-tile-clickable { transition: background 0.12s ease; }
.upk-scdash .sc-tile-clickable:hover { background: var(--upk-border-light); }
.upk-scdash .sc-drill-hint { font-size: 0.68rem; opacity: 0.55; margin-left: 2px; }

/* Status colours shared by tiles, the gauge and the monthly table */
.upk-scdash .sc-good { color: var(--upk-green); }
.upk-scdash .sc-watch { color: var(--upk-yellow); }
.upk-scdash .sc-poor { color: var(--upk-red); }
.upk-scdash .sc-plain { color: var(--upk-text); }

/* Monthly table + legend */
.upk-scdash .sc-tablecard {
    background: var(--upk-card);
    border: 1px solid var(--upk-border);
    border-radius: var(--upk-radius-lg);
    padding: 12px 14px;
}
.upk-scdash .sc-thead {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 9px;
}
.upk-scdash .sc-ttitle { font-size: 0.92rem; font-weight: 700; color: var(--upk-primary); }
.upk-scdash .sc-legend {
    margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 0.72rem; color: var(--upk-text-sec);
}
.upk-scdash .sc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.upk-scdash .sc-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.upk-scdash .sc-scroll { overflow-x: auto; }
.upk-scdash .sc-grouprow td {
    background: var(--upk-bg); font-weight: 700; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--upk-text-sec);
}
.upk-scdash .sc-note { font-size: 0.72rem; color: var(--upk-text-muted); margin-top: 8px; }

@media (max-width: 1400px) {
    .upk-scdash .sc-exec { grid-template-columns: minmax(190px,1fr) repeat(3, minmax(0,1fr)); }
    .upk-scdash .sc-groups { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
    .upk-scdash .sc-exec { grid-template-columns: 1fr 1fr; }
    .upk-scdash .sc-groups { grid-template-columns: 1fr; }
}

/* ── Glossary tab (18 Aug 2026) — non-technical Ops reference. Plain content styling,
   colors entirely from the same --upk-* tokens as every other tab so light/dark both work
   without a second palette. Native <details>/<summary> for collapsibility — no JS needed. */
.upk-gloss-intro {
    background: var(--upk-primary-bg); border: 1px solid var(--upk-border);
    border-radius: var(--upk-radius-lg); padding: 16px 18px; margin-bottom: 18px;
    font-size: 0.88rem; line-height: 1.55; color: var(--upk-text);
}
.upk-gloss-intro b { color: var(--upk-primary); }
.upk-gloss-toc {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px;
}
.upk-gloss-toc a {
    background: var(--upk-card); border: 1px solid var(--upk-border); border-radius: 20px;
    padding: 5px 14px; font-size: 0.8rem; font-weight: 600; color: var(--upk-primary);
    text-decoration: none;
}
.upk-gloss-toc a:hover { background: var(--upk-primary-bg); }
.upk-gloss-page {
    margin-bottom: 26px; scroll-margin-top: 16px;
}
.upk-gloss-page-title {
    font-size: 1.1rem; font-weight: 700; color: var(--upk-primary);
    padding: 10px 0; border-bottom: 2px solid var(--upk-primary-bg); margin-bottom: 10px;
}
.upk-gloss-page-desc {
    font-size: 0.85rem; color: var(--upk-text-sec); margin-bottom: 12px; line-height: 1.5;
}
.upk-gloss-metric {
    background: var(--upk-card); border: 1px solid var(--upk-border);
    border-radius: var(--upk-radius); margin-bottom: 8px; overflow: hidden;
}
.upk-gloss-metric > summary {
    padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 0.85rem;
    color: var(--upk-text); list-style: none; display: flex; align-items: center; gap: 8px;
}
.upk-gloss-metric > summary::-webkit-details-marker { display: none; }
.upk-gloss-metric > summary::before {
    content: '▸'; color: var(--upk-primary); font-size: 0.75rem; transition: transform 0.15s;
    flex-shrink: 0;
}
.upk-gloss-metric[open] > summary::before { transform: rotate(90deg); }
.upk-gloss-metric > summary:hover { background: var(--upk-primary-bg); }
.upk-gloss-body {
    padding: 4px 16px 14px 32px; font-size: 0.83rem; line-height: 1.6; color: var(--upk-text);
}
.upk-gloss-body p { margin: 6px 0; }
.upk-gloss-formula {
    display: inline-block; background: var(--upk-bg); border: 1px solid var(--upk-border);
    border-radius: 6px; padding: 6px 10px; font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.78rem; color: var(--upk-primary-dark); margin: 4px 0; word-break: break-word;
}
.dark .upk-gloss-formula { color: var(--upk-primary-light); }
.upk-gloss-why {
    background: var(--upk-orange-bg); border-left: 3px solid var(--upk-orange);
    border-radius: 4px; padding: 8px 12px; margin: 8px 0; font-size: 0.8rem; color: var(--upk-text);
}
.upk-gloss-why b { color: var(--upk-orange); }
.upk-gloss-table {
    width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 8px 0;
}
.upk-gloss-table th, .upk-gloss-table td {
    border: 1px solid var(--upk-border-light); padding: 6px 10px; text-align: left;
}
.upk-gloss-table th {
    background: var(--upk-bg); color: var(--upk-text-sec); font-weight: 600;
    text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.4px;
}
.upk-gloss-table tr:hover td { background: var(--upk-primary-bg); }

/* ═══════════════════════════════════════════════════════════════════════════
   DATA QUALITY FLAG LAYER — 20 Aug 2026 (Uday audit ISS-02)
   Before this, 7 of the 8 KPI tabs had no missing/incorrect-data detection at
   all. These styles are used by upkDqBadges() / upkLoadDqBanner() in
   public/js/used-parts-kpi.js and must read correctly in BOTH themes, so every
   colour below is a --upk-* variable, never a literal (see the 18 Aug 2026
   dark/light fix — Extended KPIs had been forced permanently dark).
   ═══════════════════════════════════════════════════════════════════════════ */
.upk-dq-badge {
    display: inline-block;
    padding: 1px 6px;
    margin: 1px 2px 1px 0;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    white-space: nowrap;
    cursor: help;
}
.upk-col-dq { min-width: 120px; }

.upk-dq-banner-wrap { margin: 0 0 12px 0; }
.upk-dq-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--upk-orange);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--upk-card);
    color: var(--upk-text);
    font-size: 0.82rem;
}
.upk-dq-banner.upk-dq-clean {
    border-color: var(--upk-green);
    color: var(--upk-green);
}
.upk-dq-title { font-weight: 600; color: var(--upk-orange); }
.upk-dq-banner.upk-dq-clean .upk-dq-title { color: var(--upk-green); }
.upk-dq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.upk-dq-chip {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--upk-border);
    border-left-width: 3px;
    border-radius: 12px;
    background: var(--upk-bg);
    font-size: 0.76rem;
    white-space: nowrap;
    cursor: help;
}
/* 21 Aug 2026 (Uday via Mohit) — a chip is a download. It has to LOOK clickable, or nobody
   discovers it; the arrow only appears solid on hover so the row still reads as a count strip. */
.upk-dq-chip.upk-dq-dl { cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.upk-dq-chip.upk-dq-dl:hover { background: var(--upk-bg-alt, rgba(127,127,127,0.12)); }
.upk-dq-dl-icon { color: var(--upk-text-muted); font-weight: 700; opacity: 0.55; }
.upk-dq-chip.upk-dq-dl:hover .upk-dq-dl-icon { opacity: 1; color: var(--upk-text); }

/* ISS-04 — status-change history affordance on the Order Detail Status cell. */
.upk-hist-link {
    font-size: 0.66rem;
    color: var(--upk-text-muted);
    cursor: help;
    border-bottom: 1px dotted var(--upk-border);
}
.upk-hist-link:hover { color: var(--upk-text); }

/* ISS-10 / ISS-26 — metric-definition tooltips on card labels. */
.upk-metric-info {
    display: inline-block;
    margin-left: 4px;
    width: 13px;
    height: 13px;
    line-height: 13px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid var(--upk-text-muted);
    color: var(--upk-text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
}
.upk-metric-info:hover { border-color: var(--upk-text); color: var(--upk-text); }

/* Credit recovery above 100% — real, explained on hover, never silently green. */
.upk-sc-over { border-bottom: 1px dotted currentColor; cursor: help; }