/* Pfoods Dashboard — look and feel (CLAUDE.md §13, redesign step 17). Bootstrap 5 does components; this file the
   brand, layout shell (sidebar + top bar), cards, tables and light / dark themes. Colours are tokens: change them
   here only. Dark mode = Bootstrap's data-bs-theme="dark" on <html>; every component follows. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/PopularFoods/fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/PopularFoods/fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/PopularFoods/fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/PopularFoods/fonts/ibm-plex-sans-latin-700.woff2") format("woff2"); }

:root {
    --pf-navy: #1F4E78;          /* brand: primary buttons, links, selected states */
    --pf-navy-dark: #173B5B;
    --pf-side: #13304A;          /* sidebar */
    --pf-bg: #F3F5F8;            /* page */
    --pf-surface: #FFFFFF;       /* cards, tables */
    --pf-surface-2: #F7F9FB;     /* table header, notes, segmented controls */
    --pf-border: #E1E6EC;
    --pf-line: #EEF1F4;          /* table row lines */
    --pf-text: #18212B;
    --pf-muted: #4A5868;
    --pf-faint: #6B7785;
    --pf-link: #1F4E78;
    --pf-input: #FFFFFF;
    --pf-input-line: #D3DAE2;
    --pf-total: #EAF0F7;         /* Grand Total rows */
    --pf-total-line: #C9D6E3;
    --pf-chip-on: #E8EFF7;
    --pf-track: #EEF1F4;
    --pf-skel: #E7ECF1;
    --pf-good: #1E7B34; --pf-good-bg: #E3F2E7; --pf-good-fg: #17652B;   /* Ach % >= 100 %, growth up */
    --pf-warn: #B26B00; --pf-warn-bg: #FCEFD8; --pf-warn-fg: #7E4A00;   /* Ach % 70–99.99 % */
    --pf-bad: #B42318;  --pf-bad-bg: #FBE6E4;  --pf-bad-fg: #A11F15;    /* Ach % < 70 %, growth down, failures */
    --pf-none-bg: #EEF1F4; --pf-none-fg: #4A5868;
    --pf-font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --pf-side-w: 248px;
    --pf-side-w-collapsed: 76px;

    --bs-body-font-family: var(--pf-font);
    --bs-body-font-size: 0.9375rem;
    --bs-body-bg: var(--pf-bg);
    --bs-body-color: var(--pf-text);
    --bs-border-color: var(--pf-border);
    --bs-secondary-color: var(--pf-muted);
    --bs-primary: var(--pf-navy);
    --bs-primary-rgb: 31, 78, 120;
    --bs-link-color: var(--pf-link);
    --bs-link-color-rgb: 31, 78, 120;
    --bs-link-hover-color: var(--pf-navy-dark);
    --bs-card-bg: var(--pf-surface);
}

[data-bs-theme="dark"] {
    --pf-side: #0A121B;
    --pf-bg: #0E151D;
    --pf-surface: #151F2A;
    --pf-surface-2: #1A2633;
    --pf-border: #253343;
    --pf-line: #1E2B39;
    --pf-text: #E6EDF3;
    --pf-muted: #A9B7C5;
    --pf-faint: #8A99A8;
    --pf-link: #8DB8E0;
    --pf-input: #101922;
    --pf-input-line: #2C3B4B;
    --pf-total: #1C3047;
    --pf-total-line: #2C4762;
    --pf-chip-on: #1C3047;
    --pf-track: #223040;
    --pf-skel: #1F2C3A;
    --pf-good: #4CB574; --pf-good-bg: rgba(70, 180, 110, .16); --pf-good-fg: #86D9A2;
    --pf-warn: #E39A3B; --pf-warn-bg: rgba(230, 150, 60, .16); --pf-warn-fg: #F3BC77;
    --pf-bad: #E3675B;  --pf-bad-bg: rgba(230, 90, 80, .18);  --pf-bad-fg: #F59A90;
    --pf-none-bg: #223140; --pf-none-fg: #A9B7C5;

    --bs-body-bg: var(--pf-bg);
    --bs-body-color: var(--pf-text);
    --bs-border-color: var(--pf-border);
    --bs-secondary-color: var(--pf-muted);
    --bs-link-color: var(--pf-link);
    --bs-link-color-rgb: 141, 184, 224;
    --bs-link-hover-color: #B5D2EE;
    --bs-card-bg: var(--pf-surface);
    --bs-tertiary-bg: var(--pf-surface-2);
    color-scheme: dark;
}

body { background: var(--pf-bg); color: var(--pf-text); font-family: var(--pf-font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }

/* ---- Buttons and focus ---- */
.btn { font-weight: 600; border-radius: 8px; }
.btn-primary {
    --bs-btn-bg: var(--pf-navy); --bs-btn-border-color: var(--pf-navy);
    --bs-btn-hover-bg: var(--pf-navy-dark); --bs-btn-hover-border-color: var(--pf-navy-dark);
    --bs-btn-active-bg: var(--pf-navy-dark); --bs-btn-active-border-color: var(--pf-navy-dark);
    --bs-btn-disabled-bg: var(--pf-navy); --bs-btn-disabled-border-color: var(--pf-navy);
}
.btn-outline-primary {
    --bs-btn-color: var(--pf-link); --bs-btn-border-color: var(--pf-input-line);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--pf-navy); --bs-btn-hover-border-color: var(--pf-navy);
    --bs-btn-active-bg: var(--pf-navy-dark);
}
.btn-ghost { border: 1px solid var(--pf-input-line); background: var(--pf-surface); color: var(--pf-text); }
.btn-ghost:hover { border-color: var(--pf-faint); color: var(--pf-text); background: var(--pf-surface); }
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: 3px solid #86B7FE; outline-offset: 2px;
}
.form-control, .form-select { border-radius: 8px; border-color: var(--pf-input-line); background-color: var(--pf-input); color: var(--pf-text); min-height: 40px; }
.form-label, .field-label { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--pf-muted); text-transform: none; }

/* ---- Shell: sidebar + top bar ---- */
.app { display: flex; min-height: 100vh; }
.app-sidebar { flex: 0 0 var(--pf-side-w); width: var(--pf-side-w); background: var(--pf-side); color: #fff; padding: 20px 14px;
    display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: flex-basis .2s, width .2s; }
.app-brand { display: flex; align-items: center; gap: 12px; padding: 0 6px; color: #fff; text-decoration: none; }
.app-brand:hover { color: #fff; }
.app-logo { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; background: #fff; color: #13304A; display: flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.app-brand-name { display: flex; flex-direction: column; white-space: nowrap; line-height: 1.25; }
.app-brand-name strong { font-size: 16px; }
.app-brand-name small { font-size: 12px; color: #9FB3C8; }
.nav-section { display: flex; flex-direction: column; gap: 4px; }
.nav-section-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7F96AD; padding: 0 12px 6px; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #C9D6E3; text-decoration: none;
    font-size: 14px; font-weight: 500; white-space: nowrap; }
.side-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.side-link.active { background: #fff; color: #13304A; }
[data-bs-theme="dark"] .side-link.active { background: var(--pf-navy); color: #fff; }
.side-link svg { flex: 0 0 auto; }
html.pf-collapsed .app-sidebar { flex-basis: var(--pf-side-w-collapsed); width: var(--pf-side-w-collapsed); }
html.pf-collapsed .lbl { display: none; }
html.pf-collapsed .side-link { justify-content: center; }

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 12px; background: var(--pf-surface);
    border-bottom: 1px solid var(--pf-border); position: sticky; top: 0; z-index: 30; }
.icon-btn { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--pf-border); background: var(--pf-surface); color: var(--pf-text);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.icon-btn:hover { border-color: var(--pf-input-line); }
.topbar-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pf-muted); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.theme-icon-dark { display: none; }
[data-bs-theme="dark"] .theme-icon-dark { display: inline; }
[data-bs-theme="dark"] .theme-icon-light { display: none; }
.account-btn { height: 40px; display: inline-flex; align-items: center; gap: 10px; padding: 0 10px 0 4px; border-radius: 999px;
    border: 1px solid var(--pf-border); background: var(--pf-surface); color: var(--pf-text); }
.account-btn:hover { border-color: var(--pf-input-line); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #2C5A84; color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.account-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.account-text span:first-child { font-size: 13px; font-weight: 600; }
.account-text span:last-child { font-size: 11.5px; color: var(--pf-faint); }
.app-content { flex: 1 1 auto; padding: 28px 40px 48px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.site-footer { color: var(--pf-faint); font-size: .8rem; padding: 16px 40px; border-top: 1px solid var(--pf-border); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }

/* phones: the sidebar becomes a panel opened with the menu button */
@media (max-width: 767.98px) {
    .app-sidebar { position: fixed; z-index: 50; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; }
    html.pf-nav-open .app-sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
    html.pf-collapsed .app-sidebar { flex-basis: var(--pf-side-w); width: var(--pf-side-w); }
    html.pf-collapsed .lbl { display: initial; }
    .app-content { padding: 20px 16px 40px; }
    .site-footer { padding: 16px; }
    .account-text { display: none; }
    .app-topbar { padding: 0 12px; }
}

/* ---- Page header ---- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page-title { margin: 0; font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.page-sub { font-size: 14px; color: var(--pf-muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.breadcrumb { margin-bottom: 4px; font-size: 14px; --bs-breadcrumb-divider: "›"; }
.breadcrumb a { text-decoration: none; font-weight: 500; }
.breadcrumb-item.active { color: var(--pf-text); font-weight: 600; }
.view-title { margin: 0 0 12px; font-size: 1.35rem; font-weight: 700; }

/* ---- Cards and states ---- */
.card { border-color: var(--pf-border); border-radius: 12px; background: var(--pf-surface); }
.pf-card { background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: 12px; }
.hint { color: var(--pf-muted); font-size: 1rem; background: var(--pf-surface); border: 1px dashed var(--pf-input-line);
    border-radius: 12px; padding: 28px; text-align: center; margin: 0; }
.alert { border-radius: 10px; }
.division-failed { background: var(--pf-bad-bg); color: var(--pf-bad-fg); border: 1px solid var(--pf-bad); }
.division-failed strong { color: inherit; }
.report-note { margin: 0; padding: 14px 20px; border-top: 1px solid var(--pf-border); background: var(--pf-surface-2); font-size: 13px;
    color: var(--pf-muted); display: flex; gap: 10px; align-items: flex-start; }
.report-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--pf-link); }
.report-period { color: var(--pf-muted); }

/* ---- Filters ---- */
.filter-summary { padding: 10px 12px 10px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.filter-summary .sep { color: var(--pf-faint); }
.filter-summary .filter-lead { color: var(--pf-muted); }
.filter-summary .edit { margin-left: auto; }
.filter-bar { padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.filter-bar .field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; min-width: 0; }
.filter-bar .field-wide { flex: 2 1 380px; }
.filter-bar .filter-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.filter-bar[hidden], .filter-summary[hidden] { display: none !important; }
.legend-row { width: 100%; display: flex; justify-content: space-between; align-items: baseline; padding: 0; margin-bottom: 6px; float: none; }
.link-btn { border: none; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--pf-link); cursor: pointer; }
.dchips { display: flex; gap: 8px; flex-wrap: wrap; }
.dchip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--pf-input-line); background: var(--pf-input); color: var(--pf-muted); font-size: 14px; font-weight: 500;
    cursor: pointer; user-select: none; margin: 0; }
.dchip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dchip .tick { display: none; }
.dchip:hover { border-color: var(--pf-faint); }
.dchip:has(input:checked) { background: var(--pf-chip-on); border-color: var(--pf-link); color: var(--pf-text); font-weight: 600; }
.dchip:has(input:checked) .tick { display: block; }
.dchip:has(input:focus-visible) { outline: 3px solid #86B7FE; outline-offset: 2px; }

/* ---- Summary tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tile { background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.tile-label { font-size: 13px; color: var(--pf-muted); font-weight: 500; }
.tile-value { font-size: 1.75rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 12.5px; color: var(--pf-faint); }
.tile-bar { height: 6px; border-radius: 999px; background: var(--pf-track); overflow: hidden; margin-top: 2px; }
.tile-bar > span { display: block; height: 100%; border-radius: 999px; }

/* ---- Division chips ---- */
.division-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.division-chips .title { font-size: 13px; color: var(--pf-muted); font-weight: 600; margin-right: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--pf-surface);
    border: 1px solid var(--pf-border); font-size: 13px; color: var(--pf-muted); }

/* ---- Table card ---- */
.table-card { background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: 12px; overflow: hidden; }
.table-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 20px;
    border-bottom: 1px solid var(--pf-border); }
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--pf-surface-2); border: 1px solid var(--pf-border); border-radius: 10px; }
.seg button { height: 32px; padding: 0 12px; border-radius: 7px; border: none; background: transparent; color: var(--pf-muted); font: inherit;
    font-size: 13px; font-weight: 500; cursor: pointer; }
.seg button.active, .seg button[aria-pressed="true"] { background: var(--pf-surface); color: var(--pf-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.density { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pf-faint); }
.table-wrap { overflow: auto; max-height: 72vh; }
.table-report { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 14px; white-space: nowrap;
    font-variant-numeric: tabular-nums; --bs-table-bg: var(--pf-surface); --bs-table-color: var(--pf-text); color: var(--pf-text); }
.table-report > :not(caption) > * > * { padding: 11px 16px; border-bottom: 1px solid var(--pf-line); background: var(--pf-surface); box-shadow: none; }
.table-report thead th { position: sticky; top: 0; z-index: 2; background: var(--pf-surface-2); color: var(--pf-muted); font-size: 12px;
    font-weight: 600; letter-spacing: .02em; text-transform: uppercase; border-bottom: 1px solid var(--pf-border); }
.table-report th[scope="row"], .table-report thead th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; }
.table-report th[scope="row"] { font-weight: 500; }
.table-report thead th:first-child { z-index: 3; }
.table-report .num { text-align: right; }
.table-report tbody tr:hover > * { background: var(--pf-surface-2); }
.table-report .row-total > * { background: var(--pf-total) !important; font-weight: 700; border-top: 1px solid var(--pf-total-line); border-bottom: none; }
.table-report .row-zero > * { color: var(--pf-faint); }
.sort-btn { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sort-btn:focus-visible { outline: 3px solid #86B7FE; outline-offset: 2px; border-radius: 4px; }
.sort-btn .arr { font-size: 11px; color: var(--pf-faint); min-width: 10px; }
.sort-btn:hover, th[aria-sort="ascending"] .sort-btn, th[aria-sort="descending"] .sort-btn { color: var(--pf-text); }
th[aria-sort="ascending"] .arr, th[aria-sort="descending"] .arr { color: var(--pf-text); }
html.pf-dense .table-report { font-size: 13px; }
html.pf-dense .table-report > :not(caption) > * > * { padding: 5px 12px; }
html.pf-dense .databar { margin-top: 3px; }

/* badges: colour plus text / arrow, never colour alone (§13.2) */
.pct { display: inline-flex; align-items: center; justify-content: center; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
span.pct-good { background: var(--pf-good-bg); color: var(--pf-good-fg); }
span.pct-warn { background: var(--pf-warn-bg); color: var(--pf-warn-fg); }
span.pct-bad { background: var(--pf-bad-bg); color: var(--pf-bad-fg); }
span.pct-none { background: var(--pf-none-bg); color: var(--pf-none-fg); font-weight: 500; }
.pct-good { color: var(--pf-good-fg); font-weight: 600; }
.pct-warn { color: var(--pf-warn-fg); font-weight: 600; }
.pct-bad { color: var(--pf-bad-fg); font-weight: 600; }
.pct-none { color: var(--pf-muted); }
.text-good { color: var(--pf-good-fg); font-weight: 600; }
.databar { display: block; margin: 5px 0 0 auto; width: 72px; height: 4px; border-radius: 999px; background: var(--pf-track); overflow: hidden; }
.databar > span { display: block; height: 100%; border-radius: 999px; }
.bar-pct-good { background: var(--pf-good); }
.bar-pct-warn { background: var(--pf-warn); }
.bar-pct-bad { background: var(--pf-bad); }
.bar-pct-none { background: transparent; }
.c21 { display: block; font-size: 11.5px; color: var(--pf-faint); font-weight: 400; cursor: help; }

/* ---- Loading skeleton ---- */
.skel { display: block; border-radius: 6px; background: var(--pf-skel); animation: pf-pulse 1.4s ease-in-out infinite; }
@keyframes pf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--pf-input-line); border-top-color: var(--pf-link);
    animation: pf-spin .9s linear infinite; display: inline-block; flex: 0 0 auto; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .skel, .spin { animation: none; } }

/* ---- Admin pages ---- */
.status-pill { font-size: .8rem; border-radius: 999px; padding: .35em .7em; }
.status-ok { background: var(--pf-good-bg); color: var(--pf-good-fg); }
.status-failed { background: var(--pf-bad-bg); color: var(--pf-bad-fg); }
.status-off { background: var(--pf-none-bg); color: var(--pf-none-fg); }
.card-division.is-failed { border-color: var(--pf-bad); }
.table { --bs-table-bg: var(--pf-surface); --bs-table-color: var(--pf-text); --bs-table-border-color: var(--pf-line); }
.table > thead th { color: var(--pf-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; background: var(--pf-surface-2); }

/* ---- Sign-in / change password ---- */
.auth { min-height: 100vh; display: flex; flex-wrap: wrap; background: var(--pf-bg); }
.auth-aside { flex: 1 1 420px; background: var(--pf-side); color: #fff; padding: 56px 64px; display: flex; flex-direction: column;
    justify-content: space-between; gap: 48px; }
.auth-aside h1 { margin: 0; font-size: 2.4rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; max-width: 520px; }
.auth-aside p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: #C9D6E3; max-width: 520px; }
.auth-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-tags span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; color: #DCE6F0; }
.auth-foot { font-size: 13px; color: #7F96AD; }
.auth-main { flex: 1 1 480px; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: 16px;
    padding: 36px; box-shadow: 0 12px 32px rgba(19, 48, 74, .08); }
.auth-card h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
.auth-card .form-control { min-height: 44px; }
.auth-card .btn-primary { min-height: 46px; }
@media (max-width: 767.98px) { .auth-aside { padding: 32px 24px; gap: 24px; } .auth-aside h1 { font-size: 1.8rem; } }

/* ---- Print (§13.8): the report only ---- */
@media print {
    .app-sidebar, .app-topbar, .site-footer, .btn, form, .filter-summary, .seg, .density, #loading, .division-chips .chip .spin { display: none !important; }
    body, .app-content { background: #fff; padding: 0; }
    .table-wrap { max-height: none; overflow: visible; }
    .report-view.d-none { display: none !important; }
    .table-card, .tile { border-color: #ccc; }
}

/* ---- Excel download in progress (report.js) ---- */
.btn-export.is-busy { opacity: .8; cursor: progress; }
.export-progress { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 14px;
    background: var(--pf-chip-on); border: 1px solid var(--pf-link); color: var(--pf-text); }
.export-progress-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.export-eta { margin-left: auto; color: var(--pf-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.export-bar { height: 8px; border-radius: 999px; background: var(--pf-track); overflow: hidden; }
.export-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--pf-navy); transition: width .6s ease; }
[data-bs-theme="dark"] .export-bar > span { background: var(--pf-link); }
.export-progress.done .export-bar > span { background: var(--pf-good); }
.export-progress.failed { background: var(--pf-bad-bg); border-color: var(--pf-bad); color: var(--pf-bad-fg); }
.export-progress.failed .export-bar { display: none; }
.export-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.export-steps:empty { display: none; }
.export-steps .chip { font-size: 12.5px; padding: 3px 9px; }
.export-steps .step-done { color: var(--pf-good-fg); }
.export-steps .step-failed { color: var(--pf-bad-fg); border-color: var(--pf-bad); }
.export-steps .step-running { color: var(--pf-text); border-color: var(--pf-link); }
.export-progress[hidden] { display: none; }
.export-progress.done { background: var(--pf-good-bg); border-color: var(--pf-good); color: var(--pf-good-fg); }
.btn-primary .spin { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }

/* ---- Dashboard (step 24): layout of the client's design "Credit & SKU performance" (Claude Design mock-up) ---- */
.dash {
    --d-ink: #0F172A; --d-ink-2: #334155; --d-ink-3: #475569; --d-muted: #556274;
    --d-line: #E4E8EE; --d-line-2: #EDF0F4; --d-input: #D5DBE3; --d-surface: #FFFFFF; --d-soft: #F8FAFC; --d-soft-2: #F1F4F8;
    --d-track: #EEF1F5; --d-accent: #3346D3; --d-accent-soft: #EEF0FD; --d-accent-bg: #F5F6FE;
    --d-red: #D92D20; --d-red-ink: #B42318; --d-red-soft: #FEECEB;
    --d-amber: #F0A01F; --d-amber-ink: #93370D; --d-amber-soft: #FEF4E2;
    --d-green: #139C55; --d-green-ink: #067647; --d-green-soft: #E7F6EE; --d-grey: #64748B;
    --d-orange: #EA6A0C; --d-orange-ink: #9A3412; --d-orange-soft: #FFEDD5;
    font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .dash {
    --d-ink: #E6EDF3; --d-ink-2: #C9D3DD; --d-ink-3: #A9B7C5; --d-muted: #93A3B4;
    --d-line: #253343; --d-line-2: #1E2B39; --d-input: #2C3B4B; --d-surface: #151F2A; --d-soft: #121B25; --d-soft-2: #1C2733;
    --d-track: #223040; --d-accent: #8DA2FF; --d-accent-soft: #1F2A55; --d-accent-bg: #18213F;
    --d-red-ink: #FF8A80; --d-red-soft: #3A1714; --d-amber-ink: #FFC46B; --d-amber-soft: #3A2A0E;
    --d-green-ink: #6FD9A0; --d-green-soft: #12301F; --d-orange-ink: #FDBA74; --d-orange-soft: #3A1E0C;
}
.dash .d-head { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 16px; padding: 20px 24px 0; }
.d-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
.d-brand { display: flex; align-items: center; gap: 14px; }
.d-logo { width: 44px; height: 44px; border-radius: 12px; background: var(--d-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.d-brand-text { display: flex; flex-direction: column; gap: 2px; }
.d-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--d-muted); }
.d-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--d-ink); }
.d-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.d-pill { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--d-line); border-radius: 10px;
    font-size: 14px; font-weight: 500; color: var(--d-ink-2); background: var(--d-surface); }
.d-pill-tag { padding: 2px 8px; border-radius: 999px; background: var(--d-soft-2); color: var(--d-ink-3); font-size: 12px; font-weight: 600; }
.d-btn-dark { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: #0F172A;
    color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
[data-bs-theme="dark"] .d-btn-dark { background: var(--d-accent); color: #0B1020; }
.d-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 -6px; }
.d-tabs [role="tab"] { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 0; background: transparent;
    cursor: pointer; font-size: 15px; font-weight: 600; color: var(--d-muted); border-bottom: 3px solid transparent; }
.d-tabs [role="tab"][aria-selected="true"] { color: var(--d-ink); border-bottom-color: var(--d-accent); }
.d-badge { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.d-badge-green { background: var(--d-green-soft); color: var(--d-green-ink); }
.d-badge-red { background: var(--d-red-soft); color: var(--d-red-ink); }
.d-panel { display: flex; flex-direction: column; gap: 20px; color: var(--d-ink); }
.d-panel[hidden] { display: none; }
.d-intro { display: flex; flex-direction: column; gap: 6px; max-width: 780px; }
.d-h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.d-h3 { margin: 0; font-size: 16px; font-weight: 700; }
.d-lead { margin: 0; font-size: 14px; line-height: 1.55; color: var(--d-ink-3); }
.d-lead strong { color: var(--d-ink); }
.d-insight { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; border: 1px solid; }
.d-insight p { margin: 0; flex: 1 1 420px; font-size: 14px; line-height: 1.5; }
.d-insight-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; }
.d-insight-amber { background: #FFF8EB; border-color: #F8DDA9; color: #4A2A06; }
.d-insight-amber .d-insight-icon { background: #FDE7BF; color: #93370D; }
.d-insight-red { background: #FEF3F2; border-color: #F9C9C4; color: #55160C; }
.d-insight-red .d-insight-icon { background: #FDDCD8; color: #912018; }
.d-insight-green { background: var(--d-green-soft); border-color: #B7E4C9; color: var(--d-green-ink); }
.d-insight-green .d-insight-icon { background: #CDEFD9; }
[data-bs-theme="dark"] .d-insight-amber { background: #2A200C; border-color: #5C4313; color: #FFDFA6; }
[data-bs-theme="dark"] .d-insight-red { background: #2C1311; border-color: #5E2420; color: #FFC9C3; }
.d-insight-btn { height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #E9B45C; background: #fff; color: #93370D; font-size: 14px; font-weight: 600; cursor: pointer; }
.d-insight-red .d-insight-btn { border-color: #F2A39B; color: #B42318; }
.d-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.d-tile { text-align: left; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 16px; background: var(--d-surface);
    border: 2px solid var(--d-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); color: var(--d-ink); font: inherit; }
button.d-tile { cursor: pointer; }
button.d-tile:hover { border-color: #C3CAD5; }
.d-tile.is-on { border-color: var(--d-accent); }
.d-tile-static { border-width: 1px; }
.d-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.d-tile-label { font-size: 14px; font-weight: 600; color: var(--d-ink-3); }
.d-glyph { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.d-red { background: var(--d-red-soft); color: var(--d-red-ink); }
.d-amber { background: var(--d-amber-soft); color: var(--d-amber-ink); }
.d-green { background: var(--d-green-soft); color: var(--d-green-ink); }
.d-grey { background: var(--d-soft-2); color: var(--d-ink); }
.d-orange { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.d-orange-ink { color: var(--d-orange-ink); }
.d-fill-orange, .dash .slice-orange { background: var(--d-orange); }
.d-status-orange { background: var(--d-orange-soft); color: var(--d-orange-ink); } .d-status-orange i { background: var(--d-orange); }
.age-late { color: var(--d-orange-ink); } .age-late i { background: var(--d-orange); }
.d-tile-value { display: flex; align-items: baseline; gap: 8px; font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.d-unit { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--d-muted); }
.d-tile-sub { font-size: 13px; color: var(--d-muted); }
.d-red-ink { color: var(--d-red-ink); } .d-amber-ink { color: var(--d-amber-ink); } .d-green-ink { color: var(--d-green-ink); }
.d-ink { color: var(--d-ink); } .d-ink-soft { color: var(--d-ink-2); } .d-strong { font-weight: 700; }
.d-muted { color: var(--d-muted); } .d-small { font-size: 12px; }
.d-bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--d-track); overflow: hidden; }
.d-bar > span { display: block; height: 100%; border-radius: 999px; }
.d-bar-5 { height: 5px; }
.d-fill-red { background: var(--d-red); } .d-fill-amber { background: var(--d-amber); } .d-fill-green { background: var(--d-green); } .d-fill-grey { background: var(--d-grey); }
.d-stack { display: flex; width: 100%; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--d-track); }
.d-stack > span { height: 100%; }
.d-stack-10 { height: 10px; } .d-stack-6 { height: 6px; }
.d-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.d-card { padding: 22px; border-radius: 16px; background: var(--d-surface); border: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 18px; }
.d-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.d-keys { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--d-ink-3); }
.d-keys span { display: flex; align-items: center; gap: 6px; }
.d-keys i { width: 10px; height: 10px; border-radius: 3px; }
.d-donut-row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.d-donut { width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.d-donut-hole { width: 124px; height: 124px; border-radius: 50%; background: var(--d-surface); display: flex; flex-direction: column; align-items: center;
    justify-content: center; font-size: 13px; color: var(--d-muted); }
.d-donut-num { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--d-ink); line-height: 1.15; }
.d-legend { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.d-legend-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 10px; border: 1px solid transparent;
    background: var(--d-soft); text-align: left; color: var(--d-ink); font: inherit; width: 100%; }
button.d-legend-item { cursor: pointer; }
button.d-legend-item:hover { border-color: var(--d-line); }
.d-legend-item.is-on { border-color: var(--d-accent); background: var(--d-accent-bg); }
.d-swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.d-legend-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.d-legend-name { font-size: 14px; font-weight: 600; }
.d-legend-sub { font-size: 12px; color: var(--d-muted); }
.d-legend-count { font-size: 15px; font-weight: 700; }
.d-legend-pct { width: 52px; text-align: right; font-size: 13px; color: var(--d-muted); }
.dash .slice-bad { background: var(--d-red); } .dash .slice-warn { background: var(--d-amber); } .dash .slice-good { background: var(--d-green); }
.d-rsms { display: flex; flex-direction: column; gap: 10px; }
.d-rsm { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--d-line); background: var(--d-surface);
    cursor: pointer; text-align: left; color: var(--d-ink); width: 100%; font: inherit; }
.d-rsm:hover { border-color: #C3CAD5; }
.d-rsm.is-on { border-color: var(--d-accent); background: var(--d-accent-bg); }
.d-rsm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; font-size: 14px; }
.d-rsm-name { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.d-avatar-round { width: 32px; height: 32px; border-radius: 50%; background: var(--d-accent-soft); color: var(--d-accent); font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; }
.d-rsm-counts { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--d-ink-3); }
.d-table-card { border-radius: 16px; background: var(--d-surface); border: 1px solid var(--d-line); overflow: hidden; scroll-margin-top: 80px; }
.d-table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--d-line); }
.d-table-title { display: flex; flex-direction: column; gap: 4px; }
.d-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.d-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--d-soft-2); }
.d-chips button { min-height: 36px; padding: 0 12px; border-radius: 9px; border: 0; background: transparent; color: var(--d-ink-3); font-size: 13px; font-weight: 600; cursor: pointer; }
.d-chips button span { color: var(--d-muted); font-weight: 500; }
.d-chips button.is-on { background: var(--d-surface); color: var(--d-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.d-search { display: flex; align-items: center; gap: 8px; height: 44px; width: 300px; max-width: 100%; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--d-input); background: var(--d-surface); color: var(--d-muted); margin: 0; }
.d-search input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 14px; color: var(--d-ink); background: transparent; }
.d-search:focus-within { border-color: var(--d-accent); box-shadow: 0 0 0 3px var(--d-accent-soft); }
.d-table-scroll { overflow-x: auto; }
.d-table { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: 14px; color: var(--d-ink); }
.d-table th { text-align: left; padding: 12px; font-size: 12px; font-weight: 600; color: var(--d-muted); letter-spacing: .04em; text-transform: uppercase; background: var(--d-soft); }
.d-table td { padding: 14px 12px; border-top: 1px solid var(--d-line-2); vertical-align: middle; }
.d-table th:first-child, .d-table td:first-child { padding-left: 22px; }
.d-table th:last-child, .d-table td:last-child { padding-right: 22px; }
.d-table .num { text-align: right; }
.d-party-cell { display: flex; align-items: center; gap: 12px; }
.d-avatar { width: 38px; height: 38px; border-radius: 10px; background: var(--d-soft-2); color: var(--d-ink-2); font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.d-avatar-lg { width: 48px; height: 48px; border-radius: 12px; background: var(--d-accent-soft); color: var(--d-accent); font-size: 15px; font-weight: 800; }
.d-stack-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d-stack-text strong { font-weight: 600; }
.d-right { align-items: flex-end; }
.d-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.d-status i, .d-ago i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.d-status-red { background: var(--d-red-soft); color: var(--d-red-ink); } .d-status-red i { background: var(--d-red); }
.d-status-amber { background: var(--d-amber-soft); color: var(--d-amber-ink); } .d-status-amber i { background: var(--d-amber); }
.d-status-green { background: var(--d-green-soft); color: var(--d-green-ink); } .d-status-green i { background: var(--d-green); }
.d-owes { font-weight: 700; font-size: 15px; }
.d-used { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.d-used .d-bar { flex: 1; }
.d-ago { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.age-new { color: var(--d-green-ink); } .age-new i { background: var(--d-green); }
.age-mid { color: var(--d-amber-ink); } .age-mid i { background: var(--d-amber); }
.age-old { color: var(--d-red-ink); } .age-old i { background: var(--d-red); }
.d-empty { padding: 40px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.d-empty[hidden] { display: none; }
.d-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px;
    border-top: 1px solid var(--d-line); background: var(--d-soft); }
.d-btn-light { height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--d-input); background: var(--d-surface); font-size: 14px;
    font-weight: 600; cursor: pointer; color: var(--d-ink); }
.d-btn-light[hidden] { display: none; }
.d-brands { display: flex; flex-direction: column; gap: 16px; }
.d-brand-row { display: flex; flex-direction: column; gap: 8px; border: 0; background: none; padding: 6px 8px; margin: -6px -8px; border-radius: 10px;
    text-align: left; color: var(--d-ink); font: inherit; cursor: pointer; }
.d-brand-row:hover { background: var(--d-soft); }
.d-brand-row.is-on { background: var(--d-accent-bg); box-shadow: inset 0 0 0 1px var(--d-accent); }
.d-brands:not(.show-all) .d-extra { display: none; }
.d-brand-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; }
.d-link { border: 0; background: none; padding: 0; font-size: 14px; font-weight: 600; color: var(--d-accent); cursor: pointer; text-align: left; }
.d-party { border-top: 1px solid var(--d-line); }
.d-party:first-child { border-top: 0; }
.d-party-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; width: 100%; padding: 20px 22px; border: 0; background: var(--d-surface);
    text-align: left; color: var(--d-ink); font: inherit; cursor: pointer; }
.d-party-head:hover, .d-party.is-open .d-party-head { background: var(--d-soft); }
.d-party-id { display: flex; align-items: center; gap: 14px; flex: 1 1 360px; min-width: 0; }
.d-party-name { font-size: 17px; font-weight: 700; }
.d-party-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.d-cap { font-size: 12px; font-weight: 600; color: var(--d-muted); text-transform: uppercase; letter-spacing: .04em; }
.d-met { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.d-met-value { font-size: 20px; font-weight: 800; }
.d-tags { display: flex; gap: 8px; }
.d-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.d-tag-red { background: var(--d-red-soft); color: var(--d-red-ink); }
.d-tag-amber { background: var(--d-amber-soft); color: var(--d-amber-ink); }
.d-short { display: flex; flex-direction: column; gap: 2px; text-align: right; min-width: 120px; }
.d-short-value { font-size: 24px; font-weight: 800; color: var(--d-red-ink); }
.d-chevron { color: var(--d-muted); transition: transform .15s; }
.d-party.is-open .d-chevron { transform: rotate(180deg); }
.d-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; padding: 22px; border-top: 1px solid var(--d-line); }
.d-groups[hidden] { display: none; }
.d-group { border: 1px solid var(--d-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.d-group.d-dim { opacity: .35; }
.d-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; }
.d-group-head .d-strong { font-size: 13px; white-space: nowrap; }
.d-sku { display: flex; flex-direction: column; gap: 5px; }
.d-sku-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.d-sku-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--d-ink-2); min-width: 0; }
.d-sku-glyph { width: 18px; height: 18px; border-radius: 5px; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.d-sku .d-bar { margin-left: 26px; width: auto; }
.dash .division-chips { margin: 0; }
@media (max-width: 767.98px) {
    .dash .d-head { padding: 16px 16px 0; }
    .d-charts { grid-template-columns: 1fr; }
    .d-search { width: 100%; }
    .d-short { text-align: left; }
}
@media print {
    .d-tabs, .d-head-tools .d-btn-dark, .d-table-foot, .d-search, .d-chips, .d-insight-btn, .d-chevron { display: none !important; }
    .d-panel[hidden] { display: flex !important; }
    .d-donut, .d-stack span, .d-bar span, .d-swatch, .d-keys i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}