/* ============================================================================
   EasyAccounting — Design System
   ----------------------------------------------------------------------------
   A clean, modern, professional dashboard system (Linear / Notion / Stripe
   feel) built on Slate + Teal.

   HOW IT WORKS
   • Section 1 defines every design decision as a reusable TOKEN (CSS variable):
     color, typography, spacing, radius, shadow. Use the tokens — never raw hex.
   • Section 1 also remaps the app's legacy variables (--brand, --sidebar-active,
     --neg …) onto the new palette, so every screen adopts the system with no
     per-screen edits.
   • Section 2 is a small COMPONENT LIBRARY: Button, Card, Table, Input, Select,
     Checkbox, Modal, Dropdown, Grid, Sidebar, Topbar. Components are delivered
     two ways: net-new `.ds-*` classes AND a themed layer over the Bootstrap /
     app classes already wired to JS (.btn, .form-control, .form-select, .card,
     table.dataTable, .modal …) so nothing in the existing markup breaks.

   Loaded AFTER site.css so its tokens and overrides take precedence.
   ============================================================================ */

/* ============================================================================
   1 · TOKENS
   ============================================================================ */
:root {
    /* ---- Color · surfaces ---- */
    --ds-canvas:        #F8FAFC;   /* app background            */
    --ds-surface:       #FFFFFF;   /* cards, inputs, panels     */
    --ds-surface-2:     #F1F5F9;   /* subtle raised / hover     */
    --ds-surface-3:     #E2E8F0;

    /* ---- Color · accent (teal) ---- */
    --ds-accent:        #0D9488;
    --ds-accent-hover:  #0F766E;
    --ds-accent-active: #115E59;
    --ds-accent-soft:   #E0F2F1;   /* tinted background (brief)  */
    --ds-accent-border: #99F6E4;
    --ds-accent-ring:   rgba(13, 148, 136, .18);

    /* ---- Color · ink / text ---- */
    --ds-text:          #0F172A;   /* primary text + nav        */
    --ds-text-2:        #475569;   /* secondary text / labels   */
    --ds-text-muted:    #64748B;   /* muted / meta              */
    --ds-text-inverse:  #F8FAFC;

    /* ---- Color · borders ---- */
    --ds-border:        #E2E8F0;
    --ds-border-strong: #CBD5E1;

    /* ---- Color · status ---- */
    --ds-success:       #0F9D6E;  --ds-success-soft: #ECFDF5;  --ds-success-border: #A7F3D0;
    --ds-warning:       #EA580C;  --ds-warning-soft: #FFF7ED;  --ds-warning-border: #FED7AA;
    --ds-danger:        #E11D48;  --ds-danger-soft:  #FFF1F2;  --ds-danger-border:  #FECDD3;

    /* ---- Color · slate ramp (sidebar / nav) ---- */
    --ds-slate-950:     #020617;
    --ds-slate-900:     #0F172A;
    --ds-slate-800:     #1E293B;
    --ds-slate-700:     #334155;
    --ds-slate-400:     #94A3B8;
    --ds-slate-300:     #CBD5E1;

    /* ---- Typography ---- */
    --ds-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --ds-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

    --ds-text-xs:   .75rem;    /* 12 */
    --ds-text-sm:   .8125rem;  /* 13 */
    --ds-text-base: .875rem;   /* 14 — body default */
    --ds-text-lg:   1rem;      /* 16 */
    --ds-text-xl:   1.125rem;  /* 18 */
    --ds-text-2xl:  1.375rem;  /* 22 */
    --ds-text-3xl:  1.75rem;   /* 28 */

    --ds-leading-tight: 1.25;
    --ds-leading-base:  1.5;

    --ds-weight-normal:   400;
    --ds-weight-medium:   500;
    --ds-weight-semibold: 600;
    --ds-weight-bold:     700;

    --ds-tracking-wide: .04em;   /* uppercase eyebrows / th */

    /* ---- Spacing (4px base) ---- */
    --ds-space-1: .25rem;
    --ds-space-2: .5rem;
    --ds-space-3: .75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.25rem;
    --ds-space-6: 1.5rem;
    --ds-space-8: 2rem;
    --ds-space-10: 2.5rem;

    /* ---- Radius ---- */
    --ds-radius-sm:   6px;
    --ds-radius-md:   8px;    /* default control radius */
    --ds-radius-lg:   12px;   /* cards */
    --ds-radius-xl:   16px;
    --ds-radius-pill: 999px;

    /* ---- Shadows ---- */
    --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --ds-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --ds-shadow-lg: 0 12px 28px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06);
    --ds-shadow-focus: 0 0 0 3px var(--ds-accent-ring);

    /* ---- Motion ---- */
    --ds-ease: .15s ease;

    /* ========================================================================
       Legacy-variable remap — retints the whole app to the new palette.
       (site.css defines these; redefining here — after it — wins.)
       ======================================================================== */
    --brand:          var(--ds-accent);
    --sidebar-bg:     var(--ds-slate-900);
    --sidebar-bg-2:   var(--ds-slate-800);
    --sidebar-fg:     var(--ds-slate-300);
    --sidebar-active: var(--ds-accent);
    --ink:            var(--ds-text);
    --muted:          var(--ds-text-muted);
    --line:           var(--ds-border);
    --bg:             var(--ds-canvas);
    --pos:            var(--ds-success);
    --neg:            var(--ds-danger);
}

body {
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-base);
    color: var(--ds-text);
    -webkit-font-smoothing: antialiased;
    /* Tints native form controls (select option highlight, checkbox, radio, range)
       to the ERP accent instead of the browser's default blue. */
    accent-color: var(--ds-accent);
}
/* Native <select> (short lists kept non-Select2): teal-tint the chosen/hovered option */
.form-select option:checked,
.form-select option:hover { box-shadow: 0 0 10px 100px var(--ds-accent-soft) inset; color: var(--ds-accent-active); }

/* ============================================================================
   2 · COMPONENT LIBRARY
   ============================================================================ */

/* ---------------------------------------------------------------------------
   2.1 · Button
   Net-new: .ds-btn (+ --primary / --secondary / --ghost / --danger / --success
            / --outline / --sm / --block / --icon).
   Themed:  Bootstrap .btn-* remapped to the token palette so JS-wired buttons
            (New / Save / grid actions) match without markup changes.
   --------------------------------------------------------------------------- */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font-family: inherit; font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold);
    line-height: 1; white-space: nowrap; cursor: pointer;
    padding: .55rem .95rem; border: 1px solid transparent; border-radius: var(--ds-radius-md);
    color: var(--ds-text); background: var(--ds-surface);
    transition: background-color var(--ds-ease), border-color var(--ds-ease),
                color var(--ds-ease), box-shadow var(--ds-ease), transform var(--ds-ease);
    text-decoration: none;
}
.ds-btn:hover { text-decoration: none; }
.ds-btn:active { transform: translateY(1px); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); }
.ds-btn:disabled, .ds-btn.disabled { opacity: .55; cursor: not-allowed; }
.ds-btn i { font-size: 1em; line-height: 1; }

.ds-btn--primary   { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; box-shadow: var(--ds-shadow-xs); }
.ds-btn--primary:hover { background: var(--ds-accent-hover); border-color: var(--ds-accent-hover); color: #fff; }
.ds-btn--secondary { background: var(--ds-surface); border-color: var(--ds-border-strong); color: var(--ds-text-2); }
.ds-btn--secondary:hover { background: var(--ds-surface-2); color: var(--ds-text); }
.ds-btn--ghost     { background: transparent; border-color: transparent; color: var(--ds-text-2); }
.ds-btn--ghost:hover { background: var(--ds-surface-2); color: var(--ds-text); }
.ds-btn--outline   { background: transparent; border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-btn--outline:hover { background: var(--ds-accent-soft); }
.ds-btn--danger    { background: var(--ds-danger); border-color: var(--ds-danger); color: #fff; }
.ds-btn--danger:hover { filter: brightness(.94); color: #fff; }
.ds-btn--success   { background: var(--ds-success); border-color: var(--ds-success); color: #fff; }
.ds-btn--success:hover { filter: brightness(.94); color: #fff; }

.ds-btn--sm    { padding: .38rem .7rem; font-size: var(--ds-text-sm); border-radius: var(--ds-radius-sm); }
.ds-btn--block { width: 100%; }
.ds-btn--icon  { padding: .4rem; width: 2rem; height: 2rem; }

/* Icon-only action button used in data-grid rows (keeps .record-view / .record-log hooks) */
.ds-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border); background: var(--ds-surface); color: var(--ds-text-2);
    cursor: pointer; transition: background-color var(--ds-ease), color var(--ds-ease), border-color var(--ds-ease);
    text-decoration: none;
}
.ds-icon-btn:hover  { background: var(--ds-accent-soft); border-color: var(--ds-accent-border); color: var(--ds-accent); }
.ds-icon-btn--danger:hover { background: var(--ds-danger-soft); border-color: var(--ds-danger-border); color: var(--ds-danger); }
.ds-icon-btn:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); }

/* Themed Bootstrap buttons (JS-wired: New / Save / grid outline actions) */
.btn { border-radius: var(--ds-radius-md); font-weight: var(--ds-weight-semibold); transition: all var(--ds-ease); }
.btn-sm { border-radius: var(--ds-radius-sm); }
.btn-primary { background-color: var(--ds-accent); border-color: var(--ds-accent); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--ds-accent-hover); border-color: var(--ds-accent-hover); }
.btn-primary:active { background-color: var(--ds-accent-active) !important; border-color: var(--ds-accent-active) !important; }
.btn-outline-primary { color: var(--ds-accent); border-color: var(--ds-accent); }
.btn-outline-primary:hover { background-color: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }
.btn-check:focus + .btn, .btn:focus { box-shadow: var(--ds-shadow-focus); }

/* ---------------------------------------------------------------------------
   2.2 · Card
   --------------------------------------------------------------------------- */
.ds-card {
    background: var(--ds-surface); border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); overflow: hidden;
}
.ds-card__header {
    display: flex; align-items: center; gap: .6rem;
    padding: var(--ds-space-4) var(--ds-space-5);
    border-bottom: 1px solid var(--ds-border);
    font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); color: var(--ds-text);
}
.ds-card__header .ds-card__icon {
    width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: var(--ds-radius-sm); background: var(--ds-accent-soft); color: var(--ds-accent); font-size: 1rem;
}
.ds-card__body   { padding: var(--ds-space-5); }
.ds-card__footer { padding: var(--ds-space-4) var(--ds-space-5); border-top: 1px solid var(--ds-border); background: var(--ds-canvas); }

/* Themed Bootstrap card (used by the data-grid screens) */
.card { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); }
.card-header { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); font-weight: var(--ds-weight-semibold); color: var(--ds-text); }

/* ---------------------------------------------------------------------------
   2.3 · Page header  (title + actions row)
   --------------------------------------------------------------------------- */
.ds-page-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4);
    margin-bottom: var(--ds-space-5); flex-wrap: wrap;
}
.ds-page-header__title { display: flex; align-items: center; gap: .6rem; margin: 0;
    font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); color: var(--ds-text); letter-spacing: -.01em; }
.ds-page-header__title .ds-page-header__eyebrow { display: block; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold);
    text-transform: uppercase; letter-spacing: var(--ds-tracking-wide); color: var(--ds-text-muted); margin-bottom: .15rem; }
.ds-page-header__actions { display: flex; align-items: center; gap: var(--ds-space-2); }

/* ---------------------------------------------------------------------------
   2.4 · Grid  (form field layout)
   --------------------------------------------------------------------------- */
.ds-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ds-space-4); }
.ds-col-3  { grid-column: span 3; }
.ds-col-4  { grid-column: span 4; }
.ds-col-6  { grid-column: span 6; }
.ds-col-9  { grid-column: span 9; }
.ds-col-12 { grid-column: span 12; }
@media (max-width: 767.98px) {
    .ds-col-3, .ds-col-4, .ds-col-6, .ds-col-9 { grid-column: span 12; }
}

/* ---------------------------------------------------------------------------
   2.5 · Field · Input · Select
   Component = .ds-field (layout) + .ds-label + themed .form-control / .form-select
   (kept for Bootstrap validation visuals and the Select2 / cross-tab-refresh JS).
   --------------------------------------------------------------------------- */
.ds-field { display: flex; flex-direction: column; gap: .35rem; }
.ds-label { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); color: var(--ds-text-2); }
.ds-label .ds-req { color: var(--ds-danger); margin-inline-start: .15rem; }
.ds-hint  { font-size: var(--ds-text-xs); color: var(--ds-text-muted); }

.form-label { font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-sm); color: var(--ds-text-2); }

.form-control, .form-select {
    font-size: var(--ds-text-base); color: var(--ds-text);
    border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-md);
    padding: .5rem .7rem; background-color: var(--ds-surface);
    transition: border-color var(--ds-ease), box-shadow var(--ds-ease);
}
.form-control::placeholder { color: var(--ds-slate-400); }
.form-control:focus, .form-select:focus {
    border-color: var(--ds-accent); box-shadow: var(--ds-shadow-focus);
}
.form-control:disabled, .form-select:disabled,
.form-control[readonly] { background-color: var(--ds-surface-2); color: var(--ds-text-muted); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ds-danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--ds-danger-soft); }

/* Select2 combobox — match the design-system control */
.select2-container--bootstrap-5 .select2-selection {
    border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-md); min-height: calc(1.5em + .9rem + 2px);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--ds-accent); box-shadow: var(--ds-shadow-focus);
}
/* Option the user is hovering / arrow-keying to — solid teal */
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background: var(--ds-accent) !important; color: #fff !important;
}
/* The already-chosen option (was Bootstrap blue) — tinted teal, not blue */
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background: var(--ds-accent-soft) !important; color: var(--ds-accent-active) !important; font-weight: var(--ds-weight-semibold);
}
/* …but hovering the chosen option still gives the solid teal highlight */
.select2-container--bootstrap-5 .select2-results__option--selected.select2-results__option--highlighted {
    background: var(--ds-accent) !important; color: #fff !important;
}
/* Multi-select tags */
.select2-container--bootstrap-5 .select2-selection__choice {
    background: var(--ds-accent-soft) !important; border-color: var(--ds-accent-border) !important; color: var(--ds-accent-active) !important;
}
.select2-container--bootstrap-5 .select2-selection__choice__remove { color: var(--ds-accent-active) !important; }
.select2-container--bootstrap-5 .select2-selection__clear:hover { color: var(--ds-accent) !important; }
/* The search box inside the open dropdown — teal focus, not the browser's blue */
.select2-container--bootstrap-5 .select2-dropdown .select2-search__field:focus {
    border-color: var(--ds-accent) !important; box-shadow: var(--ds-shadow-focus) !important; outline: none !important;
}

/* ---------------------------------------------------------------------------
   2.6 · Checkbox
   --------------------------------------------------------------------------- */
.ds-check { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none; }
.ds-check__label { font-size: var(--ds-text-base); color: var(--ds-text-2); }
.form-check-input { border-color: var(--ds-border-strong); cursor: pointer; }
.form-check-input:checked { background-color: var(--ds-accent); border-color: var(--ds-accent); }
.form-check-input:focus { border-color: var(--ds-accent); box-shadow: var(--ds-shadow-focus); }

/* ---------------------------------------------------------------------------
   2.7 · Table  (themes the DataTables grid used across the ERP)
   --------------------------------------------------------------------------- */
.card:has(.dataTable)::before {
    background: linear-gradient(90deg, var(--ds-accent) 0%, #14B8A6 55%, #2DD4BF 100%);
}
table.dataTable thead th {
    background: linear-gradient(180deg, var(--ds-accent-soft) 0%, #E2F5F1 100%);
    color: var(--ds-accent-active); border-bottom: 2px solid var(--ds-accent-border);
    font-size: var(--ds-text-xs); text-transform: uppercase; letter-spacing: var(--ds-tracking-wide);
    font-weight: var(--ds-weight-bold);
}
table.dataTable tbody td { font-size: var(--ds-text-base); border-bottom: 1px solid var(--ds-border); }
table.dataTable tbody td:first-child { font-weight: var(--ds-weight-bold); color: var(--ds-accent); }
table.dataTable tbody tr:nth-child(even) > td { background-color: #F8FAFC; }
table.dataTable.table-hover tbody tr:hover > td { background-color: var(--ds-accent-soft); }
table.dataTable thead th.sorting:before, table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before, table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before, table.dataTable thead th.sorting_desc:after { color: var(--ds-accent); }

/* Data-grid chrome: search, segmented rows control, pagination, advanced panel */
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ds-accent); box-shadow: var(--ds-shadow-focus); }
.ea-seg button:hover { color: var(--ds-accent); background: var(--ds-accent-soft); }
.ea-seg button.active { background: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-accent-active) 100%); box-shadow: 0 2px 6px var(--ds-accent-ring); }
.ea-adv-toggle.active { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }
.dataTables_wrapper .pagination .page-item.active .page-link { background: var(--ds-accent); border-color: var(--ds-accent); }
.dataTables_wrapper .pagination .page-link:hover { background: var(--ds-accent-soft); border-color: var(--ds-accent-border); color: var(--ds-accent); }
.dataTables_wrapper .pagination .page-item.active .page-link:hover { color: #fff; }
.dataTables_wrapper .pagination .page-link:focus { box-shadow: var(--ds-shadow-focus); }

/* Row action group (View / Edit / Log / Delete) */
.ds-row-actions { display: inline-flex; align-items: center; gap: .3rem; }

/* Status pills (Active / Inactive …) */
.badge.bg-success   { background-color: var(--ds-success) !important; }
.badge.bg-secondary { background-color: var(--ds-slate-400) !important; }

/* ---------------------------------------------------------------------------
   2.8 · Modal  (themes the shared _RecordView / _LogView dialogs)
   --------------------------------------------------------------------------- */
.modal-content { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); }
.modal-header  { border-bottom: 1px solid var(--ds-border); }
.modal-footer  { border-top: 1px solid var(--ds-border); }

/* ---------------------------------------------------------------------------
   2.9 · Dropdown  (themes Bootstrap dropdown menus)
   --------------------------------------------------------------------------- */
.dropdown-menu { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-md); padding: .35rem; }
.dropdown-item { border-radius: var(--ds-radius-sm); font-size: var(--ds-text-base); padding: .45rem .6rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ds-accent-soft); color: var(--ds-accent-active); }
.dropdown-item.active, .dropdown-item:active { background: var(--ds-accent); color: #fff; }

/* ---------------------------------------------------------------------------
   2.10 · Sidebar  (themes the app-shell nav — retinted to the slate + teal ramp)
   --------------------------------------------------------------------------- */
.sidebar .brand i { color: var(--ds-accent); }
.nav-menu .nav-link.active { border-left-color: var(--ds-accent); background: var(--ds-slate-800); color: #fff; }
[dir="rtl"] .nav-menu .nav-link.active { border-right-color: var(--ds-accent); }

/* ---- Nested transaction sub-menus: tree guide-rail look ----
   Replaces the old `bi-dot` marker with a Notion/Linear-style guide rail +
   node. Scoped to the transaction buckets ([data-group^="tx-"]) so the
   General Master sub-menu keeps its meaningful per-item icons.
   The item's icon is hidden here (used only for the collapsed rail + tab
   icon) and a teal-on-hover node sits on the rail instead. */
.nav-group[data-group^="tx-"] .nav-group-body { position: relative; }
.nav-group[data-group^="tx-"] .nav-group-body::before {
    content: ""; position: absolute; top: .2rem; bottom: .2rem; left: 1.78rem;
    width: 1px; background: rgba(148, 163, 184, .22);
}
.nav-menu .nav-group[data-group^="tx-"] .nav-link.nav-sublink { position: relative; }
.nav-menu .nav-group[data-group^="tx-"] .nav-link.nav-sublink i { display: none; }
.nav-menu .nav-group[data-group^="tx-"] .nav-link.nav-sublink::before {
    content: ""; position: absolute; left: calc(1.78rem - 3px); top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: var(--ds-slate-700);
    box-shadow: 0 0 0 3px var(--sidebar-bg);
    transition: background-color var(--ds-ease), transform var(--ds-ease);
}
.nav-menu .nav-group[data-group^="tx-"] .nav-link.nav-sublink:hover::before { background: var(--ds-slate-400); }
.nav-menu .nav-group[data-group^="tx-"] .nav-link.nav-sublink.active::before {
    background: var(--ds-accent); transform: translateY(-50%) scale(1.15);
}
[dir="rtl"] .nav-group[data-group^="tx-"] .nav-group-body::before { left: auto; right: 1.78rem; }
[dir="rtl"] .nav-menu .nav-group[data-group^="tx-"] .nav-link.nav-sublink::before { left: auto; right: calc(1.78rem - 3px); }

/* Collapsed icon rail: drop the rail/node and restore the (bucket) icon */
@media (min-width: 992px) {
    .sidebar-collapsed .nav-group[data-group^="tx-"] .nav-group-body::before,
    .sidebar-collapsed .nav-menu .nav-group[data-group^="tx-"] .nav-link.nav-sublink::before { display: none; }
    .sidebar-collapsed .nav-menu .nav-group[data-group^="tx-"] .nav-link.nav-sublink i { display: inline; }
}

/* ---------------------------------------------------------------------------
   2.11 · Topbar  (themes the app-shell header)
   --------------------------------------------------------------------------- */
.topbar { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); }
.badge-ctx { background: var(--ds-accent-soft); color: var(--ds-accent-active); border: 1px solid var(--ds-accent-border); border-radius: var(--ds-radius-sm); }
.ea-menu-btn:hover { background: var(--ds-accent-soft); color: var(--ds-accent); }
.ea-tab.active { color: var(--ds-accent); box-shadow: inset 0 -2px 0 var(--ds-accent); }

/* ---------------------------------------------------------------------------
   2.12 · Auth  (login / password screens)
   --------------------------------------------------------------------------- */
.auth-body {
    background:
        radial-gradient(1100px 560px at 15% -10%, rgba(13, 148, 136, .35) 0%, transparent 55%),
        radial-gradient(900px 500px at 100% 110%, rgba(30, 41, 59, .8) 0%, transparent 60%),
        var(--ds-slate-950);
}
.auth-card { border: 1px solid rgba(15, 23, 42, .06); border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-lg); padding: var(--ds-space-8); }
.auth-brand .auth-logo {
    width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: var(--ds-radius-md); font-size: 1.5rem; color: #fff;
    background: linear-gradient(135deg, var(--ds-accent) 0%, var(--ds-accent-active) 100%);
    box-shadow: 0 6px 16px var(--ds-accent-ring);
}
.auth-brand i { color: #fff; font-size: 1.5rem; }
.auth-title { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-bold); color: var(--ds-text); }
.auth-sub   { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.auth-links a, .auth-footer a { color: var(--ds-accent); text-decoration: none; }
.auth-links a:hover { color: var(--ds-accent-hover); text-decoration: underline; }
.auth-lang a.active, .auth-lang a:hover { color: var(--ds-accent); }

/* ============================================================================
   3 · DATA GRID  (Linear / Notion-style)
   ----------------------------------------------------------------------------
   Progressive enhancement over every `.datatable` grid. The JS in site.js
   injects the selection column, per-row ⋯ menu, bulk bar, toolbar controls,
   avatars and progress bars; these rules style them. All colors come from the
   grid token block below (which reuses the --ds-* tokens).
   ============================================================================ */
:root {
    --grid-canvas:       var(--ds-canvas);      /* #F8FAFC */
    --grid-surface:      var(--ds-surface);     /* #FFFFFF */
    --grid-accent:       var(--ds-accent);      /* #0D9488 */
    --grid-accent-soft:  var(--ds-accent-soft); /* #E0F2F1 */
    --grid-text:         var(--ds-text);        /* #0F172A */
    --grid-secondary:    var(--ds-text-2);      /* #475569 */
    --grid-muted:        var(--ds-slate-400);   /* #94A3B8 */
    --grid-border:       var(--ds-border);      /* #E2E8F0 */
    --grid-success:      var(--ds-success);     /* #0F9D6E */
    --grid-warning:      var(--ds-warning);     /* #EA580C */
    --grid-danger:       var(--ds-danger);      /* #E11D48 */
}

/* ---- Card / sticky header ----
   The grid card must NOT be its own scroll container, otherwise the sticky
   header has nothing to stick to. Keep the top accent bar rounded instead. */
.card:has(.dataTable) { overflow: visible; }
.card:has(.dataTable)::before { border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; }
.card:has(.dataTable) .card-body { border-radius: var(--ds-radius-lg); }

table.dataTable thead th {
    position: sticky; top: 0; z-index: 3; cursor: pointer;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    color: var(--grid-muted); border-bottom: 1px solid var(--grid-border);
    box-shadow: 0 1px 0 var(--grid-border);
}
table.dataTable thead th.ea-sel, table.dataTable thead th.ea-act { cursor: default; }
table.dataTable thead th:hover:not(.ea-sel):not(.ea-act) { color: var(--grid-secondary); }
table.dataTable tbody tr { transition: background-color var(--ds-ease); }
table.dataTable tbody td { color: var(--grid-secondary); }
table.dataTable tbody td:first-child { color: var(--grid-secondary); font-weight: var(--ds-weight-normal); }
/* first *data* cell (after the injected selection column) reads as the row's key */
table.dataTable tbody td.ea-sel-cell + td { font-weight: var(--ds-weight-semibold); color: var(--grid-text); }
table.dataTable.table-hover tbody tr:hover > td { background-color: var(--grid-accent-soft); }
/* Amount / numeric columns: right-aligned, tabular figures */
table.dataTable td.text-end, table.dataTable th.text-end { font-variant-numeric: tabular-nums; }

/* ---- Custom checkbox (selection + select-all) ---- */
.ea-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.ea-check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.ea-check > span {
    width: 16px; height: 16px; border: 1.5px solid var(--ds-border-strong); border-radius: 5px;
    display: inline-block; position: relative; background: var(--grid-surface);
    transition: background-color var(--ds-ease), border-color var(--ds-ease);
}
.ea-check:hover > span { border-color: var(--grid-accent); }
.ea-check input:checked + span, .ea-check input:indeterminate + span { background: var(--grid-accent); border-color: var(--grid-accent); }
.ea-check input:checked + span::after {
    content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ea-check input:indeterminate + span::after {
    content: ""; position: absolute; left: 3px; top: 6.5px; width: 8px; height: 2px; background: #fff; border-radius: 1px;
}
.ea-check input:focus-visible + span { box-shadow: var(--ds-shadow-focus); }
table.dataTable td.ea-sel-cell, table.dataTable th.ea-sel { width: 40px; text-align: center; padding-left: 0; padding-right: 0; }

/* ---- Supplier / name initials avatar ---- */
.ds-avatar {
    width: 26px; height: 26px; flex: 0 0 auto; border-radius: 7px; display: inline-grid; place-items: center;
    font-size: .68rem; font-weight: var(--ds-weight-bold); color: #fff; letter-spacing: .02em;
    margin-inline-end: .55rem; vertical-align: middle;
}
.ds-cell-named { display: inline-flex; align-items: center; }

/* ---- Fulfillment mini progress bar ---- */
.ds-progress { display: inline-flex; align-items: center; gap: .55rem; min-width: 120px; }
.ds-progress__track { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--ds-surface-3); overflow: hidden; min-width: 60px; }
.ds-progress__fill  { height: 100%; border-radius: 999px; background: var(--grid-accent); transition: width .3s ease; }
.ds-progress__val   { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--grid-muted); min-width: 34px; text-align: right; }
.ds-progress--done .ds-progress__fill { background: var(--grid-success); }

/* ---- Status pill with colored dot (upgrades existing .badge status cells) ---- */
.badge.bg-success, .badge.bg-secondary, .badge.bg-danger, .badge.bg-warning, .ds-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .28rem .62rem; border-radius: 999px; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); line-height: 1;
}
.badge.bg-success::before, .badge.bg-secondary::before, .badge.bg-danger::before,
.badge.bg-warning::before, .ds-pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}
.badge.bg-success   { background: var(--ds-success-soft) !important; color: var(--grid-success) !important; }
.badge.bg-secondary { background: var(--ds-surface-2)  !important; color: var(--grid-muted)   !important; }
.badge.bg-danger    { background: var(--ds-danger-soft)  !important; color: var(--grid-danger)  !important; }
.badge.bg-warning   { background: var(--ds-warning-soft) !important; color: var(--grid-warning) !important; }

/* ---- Per-row actions: always-visible ⋯ trigger + popover menu ---- */
.ea-act-cell > *:not(.ds-actions) { display: none !important; }   /* hide the original icon buttons; menu proxies to them */
.ds-actions { display: inline-flex; }
.ds-actions__trigger {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border: 1px solid transparent; border-radius: var(--ds-radius-sm); background: transparent;
    color: var(--grid-muted); cursor: pointer; transition: background-color var(--ds-ease), color var(--ds-ease);
}
.ds-actions__trigger:hover, .ds-actions__trigger.open { background: var(--ds-surface-2); color: var(--grid-text); border-color: var(--grid-border); }

.ds-menu {
    position: fixed; z-index: 1090; min-width: 220px; padding: .35rem;
    background: var(--grid-surface); border: 1px solid var(--grid-border);
    border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-lg);
    opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .12s ease, transform .12s ease;
}
.ds-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ds-menu__label { padding: .3rem .6rem .4rem; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--grid-muted); }
.ds-menu__item {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem;
    border: 0; background: transparent; border-radius: var(--ds-radius-sm); cursor: pointer;
    font-size: var(--ds-text-base); font-weight: var(--ds-weight-medium); color: var(--grid-text); text-align: start; text-decoration: none;
}
.ds-menu__item i:first-child { width: 16px; text-align: center; color: var(--grid-muted); font-size: 1rem; }
.ds-menu__item:hover, .ds-menu__item:focus { background: var(--grid-accent-soft); color: var(--grid-accent); }
.ds-menu__item:hover i:first-child, .ds-menu__item:focus i:first-child { color: var(--grid-accent); }
.ds-menu__item .ds-menu__key {
    margin-inline-start: auto; font-size: .68rem; font-weight: var(--ds-weight-semibold); color: var(--grid-muted);
    background: var(--ds-surface-2); border: 1px solid var(--grid-border); border-radius: 5px; padding: .1rem .35rem; min-width: 18px; text-align: center;
}
.ds-menu__divider { height: 1px; background: var(--grid-border); margin: .35rem .3rem; }
.ds-menu__item--danger { color: var(--grid-danger); }
.ds-menu__item--danger i:first-child { color: var(--grid-danger); }
.ds-menu__item--danger:hover, .ds-menu__item--danger:focus { background: var(--ds-danger-soft); color: var(--grid-danger); }
.ds-menu__item--danger:hover i:first-child { color: var(--grid-danger); }

/* ---- Bulk action bar (teal, appears on selection) ---- */
.ds-bulkbar {
    display: none; align-items: center; gap: .9rem; margin-bottom: .9rem;
    padding: .55rem .5rem .55rem .9rem; border-radius: var(--ds-radius-md);
    background: var(--grid-accent); color: #fff; box-shadow: var(--ds-shadow-sm);
}
.ds-bulkbar.show { display: flex; }
.ds-bulkbar__count { font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-base); }
.ds-bulkbar__count b { font-weight: var(--ds-weight-bold); }
.ds-bulkbar__spacer { margin-inline-start: auto; }
.ds-bulkbar__btn {
    display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .7rem; border-radius: var(--ds-radius-sm);
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
    font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); cursor: pointer; transition: background-color var(--ds-ease);
}
.ds-bulkbar__btn:hover { background: rgba(255, 255, 255, .28); color: #fff; }

/* ---- Toolbar: chips, Sort / Columns buttons, view switcher ---- */
.ds-chips { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ds-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .7rem; border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); cursor: pointer;
    border: 1px dashed var(--ds-border-strong); background: var(--grid-surface); color: var(--grid-secondary);
    transition: all var(--ds-ease);
}
.ds-chip:hover { border-color: var(--grid-accent); color: var(--grid-accent); }
.ds-chip--active { border-style: solid; border-color: var(--grid-accent); background: var(--grid-accent-soft); color: var(--grid-accent); }
.ds-chip--active .ds-chip__x { display: inline-flex; }
.ds-chip__x { display: none; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; font-size: .9rem; line-height: 1; }
.ds-chip__x:hover { background: rgba(13, 148, 136, .18); }

.ds-tool-btn {
    display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: var(--ds-radius-md);
    border: 1px solid var(--grid-border); background: var(--grid-surface); color: var(--grid-secondary);
    font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); cursor: pointer; transition: all var(--ds-ease);
}
.ds-tool-btn:hover, .ds-tool-btn.open { border-color: var(--ds-border-strong); background: var(--ds-surface-2); color: var(--grid-text); }

.ds-viewswitch { display: inline-flex; padding: 3px; gap: 2px; background: var(--ds-surface-2); border: 1px solid var(--grid-border); border-radius: var(--ds-radius-md); }
.ds-viewswitch button {
    display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .6rem; border: 0; border-radius: var(--ds-radius-sm);
    background: transparent; color: var(--grid-secondary); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); cursor: pointer;
    transition: all var(--ds-ease);
}
.ds-viewswitch button:hover { color: var(--grid-text); }
.ds-viewswitch button.active { background: var(--grid-surface); color: var(--grid-accent); box-shadow: var(--ds-shadow-xs); }

/* Columns visibility dropdown (shares .ds-menu look) */
.ds-colmenu .ds-menu__item { font-weight: var(--ds-weight-medium); }
.ds-colmenu .ea-check { margin-inline-end: .1rem; }

/* Placeholder shown for the (presentational) Board / Calendar views */
.ds-view-placeholder {
    display: none; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    padding: 3rem 1rem; text-align: center; color: var(--grid-muted);
}
.ds-view-placeholder i { font-size: 2rem; color: var(--ds-border-strong); }
.ds-view-placeholder.show { display: flex; }

/* ---- Grouped rows with subtotals (opt-in via data-group-col) ---- */
tr.ds-group-row > td {
    background: var(--grid-canvas) !important; border-top: 1px solid var(--grid-border); border-bottom: 1px solid var(--grid-border);
    padding-top: .5rem; padding-bottom: .5rem;
}
.ds-group { display: inline-flex; align-items: center; gap: .5rem; font-weight: var(--ds-weight-bold); color: var(--grid-text); font-size: var(--ds-text-sm); }
.ds-group__caret { color: var(--grid-muted); transition: transform var(--ds-ease); }
tr.ds-group-row.collapsed .ds-group__caret { transform: rotate(-90deg); }
.ds-group__meta { font-weight: var(--ds-weight-medium); color: var(--grid-muted); }
.ds-group__meta b { color: var(--grid-secondary); font-weight: var(--ds-weight-semibold); }

@media (max-width: 575px) {
    .ds-menu { min-width: 190px; }
    .ds-viewswitch button span { display: none; }
}

/* ============================================================================
   4 · DASHBOARD  (Dashboard/Index — KPI cards, trend chart, donut, activity)
   ----------------------------------------------------------------------------
   A modern analytics overview built entirely on the --ds-* tokens. Charts are
   inline SVG (no chart-library / CDN dependency); colors resolve from tokens so
   the whole surface retints with the design system.
   ============================================================================ */
.dash { display: flex; flex-direction: column; gap: var(--ds-space-5); }

/* ---- Header ---- */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-4); flex-wrap: wrap; }
.dash-title { margin: 0; font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); color: var(--ds-text); letter-spacing: -.01em; }
.dash-sub { font-size: var(--ds-text-sm); color: var(--ds-text-muted); margin-top: .15rem; }
.dash-head-actions { display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap; }

.dash-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--ds-surface-2); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
.dash-seg button {
    border: 0; background: transparent; color: var(--ds-text-2); cursor: pointer;
    padding: .3rem .6rem; border-radius: var(--ds-radius-sm);
    font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); transition: all var(--ds-ease);
}
.dash-seg button:hover { color: var(--ds-text); }
.dash-seg button.active { background: var(--ds-surface); color: var(--ds-accent); box-shadow: var(--ds-shadow-xs); }

/* ---- KPI cards ---- */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-space-4); }
.dash-kpi {
    background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm); padding: var(--ds-space-5);
    display: flex; flex-direction: column; gap: .55rem; transition: box-shadow var(--ds-ease), transform var(--ds-ease);
}
.dash-kpi:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-1px); }
.dash-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dash-kpi-label { font-size: var(--ds-text-sm); color: var(--ds-text-muted); font-weight: var(--ds-weight-medium); }
.dash-kpi-ic { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--ds-radius-md); font-size: 1.05rem; }
.dash-kpi-ic--teal   { background: var(--ds-accent-soft);  color: var(--ds-accent); }
.dash-kpi-ic--indigo { background: #EEF2FF; color: #6366F1; }
.dash-kpi-ic--green  { background: var(--ds-success-soft); color: var(--ds-success); }
.dash-kpi-ic--rose   { background: var(--ds-danger-soft);  color: var(--ds-danger); }
.dash-kpi-val { font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-bold); color: var(--ds-text); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-kpi-foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dash-kpi-hint { font-size: var(--ds-text-xs); color: var(--ds-text-muted); }

.dash-delta { display: inline-flex; align-items: center; gap: .1rem; padding: .15rem .45rem .15rem .3rem; border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); line-height: 1; }
.dash-delta i { font-size: 1rem; margin: -2px 0; }
.dash-delta--up   { background: var(--ds-success-soft); color: var(--ds-success); }
.dash-delta--down { background: var(--ds-danger-soft);  color: var(--ds-danger); }
.dash-delta--flat { background: var(--ds-surface-2);    color: var(--ds-text-muted); padding: .15rem .5rem; }

.dash-kpi-pill { display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); background: var(--ds-accent-soft); color: var(--ds-accent); }
.dash-kpi-pill--warn { background: var(--ds-warning-soft); color: var(--ds-warning); }

/* ---- Rows ---- */
.dash-row { display: grid; gap: var(--ds-space-4); }
.dash-row--chart { grid-template-columns: 1.9fr 1fr; }
.dash-row--split { grid-template-columns: 1fr 1fr; }

.dash-panel { padding: var(--ds-space-5); display: flex; flex-direction: column; }
.dash-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: var(--ds-space-4); }
.dash-panel-title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); color: var(--ds-text); }
.dash-panel-sub { font-size: var(--ds-text-sm); color: var(--ds-text-muted); margin-top: .1rem; }
.dash-panel-fig { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.dash-panel-amt { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); color: var(--ds-text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dash-panel-link { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); color: var(--ds-accent); text-decoration: none; }
.dash-panel-link:hover { color: var(--ds-accent-hover); text-decoration: underline; }

/* ---- Area chart ---- */
.dash-chart { flex: 1 1 auto; min-height: 210px; }
.dash-area { width: 100%; height: 210px; display: block; }
.dash-chart-axis { display: flex; justify-content: space-between; margin-top: .6rem; font-size: var(--ds-text-xs); color: var(--ds-text-muted); }

/* ---- Donut ---- */
.dash-donut-wrap { display: flex; align-items: center; gap: var(--ds-space-5); flex: 1 1 auto; }
.dash-donut { position: relative; width: 140px; height: 140px; flex: 0 0 auto; }
.dash-donut-svg { width: 140px; height: 140px; display: block; }
.dash-donut-svg circle { transition: stroke-dasharray .4s ease; }
.dash-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dash-donut-num { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); color: var(--ds-text); line-height: 1; }
.dash-donut-cap { font-size: var(--ds-text-xs); color: var(--ds-text-muted); margin-top: .1rem; }
.dash-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .5rem; }
.dash-legend li { display: flex; align-items: center; gap: .55rem; font-size: var(--ds-text-sm); }
.dash-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dash-legend-label { color: var(--ds-text-2); }
.dash-legend-val { margin-inline-start: auto; font-weight: var(--ds-weight-bold); color: var(--ds-text); font-variant-numeric: tabular-nums; }

/* ---- Activity list ---- */
.dash-list { display: flex; flex-direction: column; }
.dash-item { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--ds-border); }
.dash-item:first-child { border-top: 0; }
.dash-item-ic { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 1rem; }
.dash-item-ic--ok     { background: var(--ds-success-soft); color: var(--ds-success); }
.dash-item-ic--accent { background: var(--ds-accent-soft);  color: var(--ds-accent); }
.dash-item-ic--warn   { background: var(--ds-warning-soft); color: var(--ds-warning); }
.dash-item-ic--muted  { background: var(--ds-surface-2);    color: var(--ds-text-muted); }
.dash-item-body { flex: 1 1 auto; min-width: 0; }
.dash-item-title { font-size: var(--ds-text-base); color: var(--ds-text-2); }
.dash-item-title b { color: var(--ds-text); font-weight: var(--ds-weight-semibold); }
.dash-item-sub { font-size: var(--ds-text-xs); color: var(--ds-text-muted); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-item-time { font-size: var(--ds-text-xs); color: var(--ds-text-muted); flex: 0 0 auto; white-space: nowrap; }

/* ---- Top suppliers ---- */
.dash-sup { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--ds-border); }
.dash-sup:first-child { border-top: 0; }
.dash-sup-av { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--ds-radius-md);
    color: #fff; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); letter-spacing: .02em; }
.dash-sup-body { flex: 1 1 auto; min-width: 0; }
.dash-sup-name { font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold); color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-sup-meta { font-size: var(--ds-text-xs); color: var(--ds-text-muted); margin-top: .1rem; }
.dash-sup-right { flex: 0 0 130px; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.dash-sup-amt { font-size: var(--ds-text-base); font-weight: var(--ds-weight-bold); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.dash-sup-bar { width: 100%; height: 5px; border-radius: 999px; background: var(--ds-surface-2); overflow: hidden; }
.dash-sup-bar span { display: block; height: 100%; border-radius: 999px; background: var(--ds-accent); }

/* ---- Empty states ---- */
.dash-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    padding: 2.5rem 1rem; color: var(--ds-text-muted); text-align: center; }
.dash-empty i { font-size: 1.8rem; color: var(--ds-border-strong); }
.dash-empty span { font-size: var(--ds-text-sm); }
.dash-empty--sm { padding: 1.5rem 1rem; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .dash-row--chart, .dash-row--split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .dash-kpis { grid-template-columns: 1fr; }
    .dash-donut-wrap { flex-direction: column; align-items: stretch; }
    .dash-legend { width: 100%; }
}

/* ============================================================================
   5 · STICKY FORM ACTION BAR  (Save / Back follow the scroll on long forms)
   ----------------------------------------------------------------------------
   On any long data-entry form the primary Save button and a mirror of the
   header Back link are pinned to the bottom of the scroll viewport, so the
   actions stay reachable without scrolling to the top or bottom of the page.
   Built + toggled centrally by site.js (no per-screen markup): the bar is
   appended as the last child of <main class="content"> and only revealed
   (.ea-actionbar-on) when the screen actually overflows its scroll viewport.
   The real Save button stays inside its <form> (id / listeners / validation
   untouched) but is hidden while the bar is shown; the bar's Save proxies a
   click to it and mirrors its disabled state.
   ============================================================================ */
.ea-actionbar {
    position: sticky; bottom: 0; z-index: 20;
    display: none;
    margin-top: var(--ds-space-5);
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .04);
}
.ea-actionbar__inner { display: flex; align-items: center; gap: var(--ds-space-2); justify-content: flex-end; }
.ea-actionbar__back  { margin-inline-end: auto; }   /* Back sits far-left; Cancel + Save group right */

/* Cancel injected next to the inline Save on forms that don't show the bar */
.ea-inline-cancel { margin-inline-end: .5rem; }

.ea-actionbar-on .ea-actionbar     { display: block; }
.ea-actionbar-on .ea-inline-save,
.ea-actionbar-on .ea-inline-cancel { display: none !important; }

@media (max-width: 575px) {
    /* Pull the bar flush to the pane edges, and pad past the phone's bottom
       safe area (iOS home indicator) so Save / Cancel are never under it. */
    .ea-actionbar {
        margin-inline: calc(-1 * var(--ds-space-2));
        padding-bottom: calc(var(--ds-space-3) + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================================
   6 · REPORT FILTER PANEL  (.rf-*)
   ----------------------------------------------------------------------------
   The shared chrome for every screen under Reports: one card carrying the
   report's identity (icon + title + period chip), a read-at-a-glance summary
   strip of what is currently selected, and the filter controls themselves.

   It is PRESENTATION ONLY. Every control underneath is still the same plain
   <input type="checkbox"> / <select> / <input type="date"> posting the same
   name+value as before — a chip and a pick row are a checkbox plus a <label>
   styled through the `:checked + label` sibling selector, so the look needs no
   JavaScript and none of the report logic changes.
   ============================================================================ */

.rf-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
    margin-bottom: var(--ds-space-5);
}

/* ---- Header: icon tile, title + subtitle, period chip ---- */
.rf-head {
    display: flex; align-items: center; gap: var(--ds-space-4);
    padding: var(--ds-space-5);
    border-bottom: 1px solid var(--ds-border);
}
.rf-head__icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--ds-radius-md);
    background: var(--ds-accent-soft); color: var(--ds-accent);
    font-size: 1.25rem;
}
.rf-head__text  { min-width: 0; }
.rf-head__title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ds-text); }
.rf-head__sub   { margin: .125rem 0 0; font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.rf-head__meta  { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }

.rf-chip-meta {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-text-2);
    white-space: nowrap;
}
.rf-chip-meta .bi { color: var(--ds-text-muted); }

/* ---- Summary strip: what the report will run with, at a glance ---- */
.rf-summary {
    display: flex; flex-wrap: wrap;
    border-bottom: 1px solid var(--ds-border);
}
.rf-summary__cell {
    flex: 1 1 12rem; min-width: 0;
    padding: var(--ds-space-3) var(--ds-space-5);
    border-inline-end: 1px solid var(--ds-border);
}
.rf-summary__cell:last-child { border-inline-end: 0; }
.rf-summary__label { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.rf-summary__value {
    font-weight: 600; color: var(--ds-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Body + one filter block ---- */
.rf-body  { padding: var(--ds-space-5); }
.rf-field { margin-bottom: var(--ds-space-5); }
.rf-field:last-child { margin-bottom: 0; }
.rf-field__head {
    display: flex; align-items: center; gap: var(--ds-space-3);
    margin-bottom: var(--ds-space-2);
    flex-wrap: wrap;   /* label + Select all / Clear share a half-width column */
}
.rf-label {
    font-size: .75rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ds-text-muted); margin: 0;
}
.rf-hint    { margin-inline-start: auto; font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.rf-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }
.rf-actions .rf-sep { color: var(--ds-border-strong); }
.rf-link {
    background: none; border: 0; padding: 0;
    font-size: var(--ds-text-sm); font-weight: 600;
    color: var(--ds-accent); display: inline-flex; align-items: center; gap: .3rem;
}
.rf-link:hover        { color: var(--ds-accent-hover); text-decoration: underline; }
.rf-link--muted       { color: var(--ds-text-muted); }
.rf-link--muted:hover { color: var(--ds-text-2); }

/* ---- Chip toggles (a checkbox + its label) ---- */
.rf-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.rf-chip-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.rf-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem;
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    font-weight: 600; color: var(--ds-text-2);
    cursor: pointer; user-select: none;
    transition: all var(--ds-ease, .15s ease);
}
.rf-chip:hover { background: var(--ds-surface-2); border-color: var(--ds-border-strong); color: var(--ds-text); }
/* The tick only exists once the chip is on, so an unchecked chip keeps its own
   width and the row doesn't reflow as chips are toggled. */
.rf-chip .bi { display: none; font-size: .9em; }
.rf-chip-input:checked + .rf-chip {
    background: var(--ds-accent); border-color: var(--ds-accent); color: #fff;
    box-shadow: var(--ds-shadow-xs);
}
.rf-chip-input:checked + .rf-chip .bi   { display: inline-block; }
.rf-chip-input:checked + .rf-chip:hover { background: var(--ds-accent-hover); color: #fff; }
.rf-chip-input:disabled + .rf-chip      { opacity: .5; cursor: not-allowed; }
.rf-chip-input:focus-visible + .rf-chip { outline: none; box-shadow: var(--ds-shadow-focus); }

/* ---- Date / select control with a leading icon ---- */
.rf-control { position: relative; display: block; }
.rf-control--date { max-width: 16rem; }
.rf-control > .bi {
    position: absolute; inset-inline-start: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--ds-accent); pointer-events: none; z-index: 2;
}
.rf-control > .form-control,
.rf-control > .form-select { padding-inline-start: 2.5rem; }
.rf-control--date > .form-control { font-weight: 600; }

/* ---- Pick list (search + scrollable rows + count footer) ---- */
.rf-picker {
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
    overflow: hidden; background: var(--ds-surface);
}
.rf-picker__search { position: relative; border-bottom: 1px solid var(--ds-border); }
.rf-picker__search > .bi {
    position: absolute; inset-inline-start: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--ds-text-muted); pointer-events: none;
}
.rf-picker__search .form-control {
    border: 0; border-radius: 0; padding-inline-start: 2.5rem; box-shadow: none;
}
.rf-picker__list { max-height: 15rem; overflow-y: auto; }

.rf-row { position: relative; border-bottom: 1px solid var(--ds-border); }
.rf-row:last-child { border-bottom: 0; }
.rf-row-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.rf-row-label {
    display: flex; align-items: center; gap: var(--ds-space-3);
    padding: .55rem var(--ds-space-4);
    margin: 0; cursor: pointer; width: 100%;
    transition: background var(--ds-ease, .15s ease);
}
.rf-row-label:hover { background: var(--ds-surface-2); }
.rf-row-input:checked + .rf-row-label { background: var(--ds-accent-soft); }

/* Custom tick box — the real checkbox is hidden, so this is what the user sees. */
.rf-check {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem;
    border: 1.5px solid var(--ds-border-strong); border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: #fff; font-size: .8rem;
}
.rf-check::before { content: "\F26E"; font-family: bootstrap-icons; opacity: 0; }  /* bi-check2 */
.rf-row-input:checked + .rf-row-label .rf-check {
    background: var(--ds-accent); border-color: var(--ds-accent);
}
.rf-row-input:checked + .rf-row-label .rf-check::before { opacity: 1; }
.rf-row-input:focus-visible + .rf-row-label .rf-check { box-shadow: var(--ds-shadow-focus); }

.rf-code {
    flex: 0 0 auto;
    font-family: var(--ds-font-mono); font-size: var(--ds-text-sm);
    padding: .1rem .45rem;
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-2); color: var(--ds-text-2);
}
.rf-row-input:checked + .rf-row-label .rf-code {
    border-color: var(--ds-accent-border); background: var(--ds-surface); color: var(--ds-accent-active);
}
.rf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-text); }

.rf-picker__foot {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    padding: .5rem var(--ds-space-4);
    border-top: 1px solid var(--ds-border); background: var(--ds-canvas);
    font-size: var(--ds-text-sm); color: var(--ds-text-muted);
}
.rf-picker__count { font-weight: 600; color: var(--ds-accent); }

/* ---- Footer actions ---- */
.rf-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--ds-space-3);
    padding: var(--ds-space-4) var(--ds-space-5);
    border-top: 1px solid var(--ds-border);
}
.rf-foot__left { margin-inline-end: auto; }

/* Result-side toolbar (Print / Excel) so it reads as part of the same system */
.rf-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--ds-space-2); margin-bottom: var(--ds-space-4); }

@media (max-width: 575px) {
    .rf-head { flex-wrap: wrap; }
    .rf-head__meta { margin-inline-start: 0; width: 100%; }
    .rf-summary__cell { flex-basis: 100%; border-inline-end: 0; border-bottom: 1px solid var(--ds-border); }
    .rf-summary__cell:last-child { border-bottom: 0; }
}