/* ==========================================================================
   Profincare Loan CRM — design system
   Layered over Bootstrap 5.3. Every class name that existing views already use
   (.card, .stat-card, .stat-value, .stat-label, .table, .btn, .badge,
   .app-sidebar, .app-topbar, .page-header, .filter-bar, .notif-*, .dashboard-*)
   keeps working; this file restyles them rather than renaming anything.

   Colour is a token system with a light and a dark theme. Both themes are
   defined entirely through custom properties on the root element, so a single
   [data-theme] switch repaints the shell, cards, tables, forms, third-party
   widgets and the Chart.js canvases (app.js reads the same properties).

   Sections
     1  Tokens (light)              9  Tables + DataTables
     2  Tokens (dark)              10  Forms + Tom Select + Flatpickr
     3  Base                       11  Buttons + badges
     4  Sidebar                    12  Alerts
     5  Main shell + topbar        13  Menus, modals, notifications
     6  Page header                14  Print
     7  Cards + metric tiles       15  Motion preference
     8  Dashboard
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — light
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Brand */
    --pf-brand:        #2563eb;
    --pf-brand-600:    #1d4ed8;
    --pf-brand-700:    #1e40af;
    --pf-brand-soft:   #eef4ff;
    --pf-brand-soft-2: #dfe9ff;
    --pf-brand-ring:   rgba(37, 99, 235, .18);
    --pf-on-brand:     #ffffff;

    /* Neutral ink + surfaces */
    --pf-ink:          #0b1220;
    --pf-ink-2:        #33415a;
    --pf-muted:        #5b6878;
    --pf-faint:        #657186;
    --pf-surface:      #ffffff;
    --pf-surface-2:    #f8fafc;
    --pf-surface-3:    #f1f5f9;
    --pf-canvas:       #f4f6fa;
    --pf-canvas-tint:  radial-gradient(1100px 520px at 78% -12%, rgba(37, 99, 235, .055), transparent 62%),
                       radial-gradient(760px 380px at 4% 0%, rgba(27, 175, 122, .04), transparent 58%);
    --pf-border:       #e3e8f0;
    --pf-border-soft:  #edf1f6;
    --pf-border-strong:#d3dbe7;

    /* Semantic tones. Each tone carries a readable ink, a soft fill and a
       stronger line colour, so a tinted chip never needs a hand-picked value. */
    --pf-success:      #12703b;
    --pf-success-soft: #e7f8ee;
    --pf-success-line: #1baf7a;
    --pf-warning:      #a4530a;
    --pf-warning-soft: #fdf4e3;
    --pf-warning-line: #eda100;
    --pf-danger:       #b3211f;
    --pf-danger-soft:  #fdecea;
    --pf-danger-line:  #e34948;
    --pf-info:         #0b6d85;
    --pf-info-soft:    #e4f5fa;
    --pf-info-line:    #12a3c4;
    --pf-neutral:      #4a5567;
    --pf-neutral-soft: #eef1f6;
    --pf-neutral-line: #94a3b8;

    /* Chart series — validated CVD-safe palette, fixed order, never cycled. */
    --pf-series-1: #2a78d6;
    --pf-series-2: #eb6834;
    --pf-series-3: #1baf7a;
    --pf-series-4: #eda100;
    --pf-series-5: #e87ba4;
    --pf-series-6: #008300;
    --pf-series-7: #4a3aa7;
    --pf-series-8: #e34948;

    /* Values app.js hands to Chart.js */
    --pf-chart-ink:     #0b1220;
    --pf-chart-muted:   #5b6878;
    --pf-chart-grid:    #eaeef4;
    --pf-chart-surface: #ffffff;
    --pf-chart-tip-bg:  #0b1220;
    --pf-chart-tip-ink: #f8fafc;
    --pf-chart-fill-a:  .30;   /* area gradient, top stop */
    --pf-chart-fill-b:  .02;   /* area gradient, bottom stop */

    /* Shape + depth */
    --pf-radius-lg: 16px;
    --pf-radius:    13px;
    --pf-radius-sm: 9px;
    --pf-radius-xs: 7px;
    --pf-shadow-1:  0 1px 2px rgba(11, 18, 32, .05);
    --pf-shadow-2:  0 1px 3px rgba(11, 18, 32, .07), 0 8px 20px -10px rgba(11, 18, 32, .13);
    --pf-shadow-3:  0 2px 6px rgba(11, 18, 32, .08), 0 22px 44px -18px rgba(11, 18, 32, .22);
    --pf-shadow-lift: 0 2px 4px rgba(11, 18, 32, .06), 0 16px 32px -14px rgba(11, 18, 32, .20);
    --pf-inset-hi:  inset 0 1px 0 rgba(255, 255, 255, .7);

    /* Shell */
    --pf-sidebar-width:  256px;
    --pf-sidebar-bg:     #0b1220;
    --pf-sidebar-bg-2:   #111b2e;
    --pf-sidebar-ink:    #c3cede;
    --pf-sidebar-hover:  rgba(255, 255, 255, .06);
    --pf-sidebar-active: rgba(59, 130, 246, .17);
    --pf-topbar-bg:      rgba(255, 255, 255, .82);
    --pf-topbar-height:  60px;

    /* Bootstrap bridge */
    --bs-primary:       #2563eb;
    --bs-primary-rgb:   37, 99, 235;
    --bs-body-color:    #0b1220;
    --bs-body-bg:       #f4f6fa;
    --bs-border-color:  #e3e8f0;
    --bs-link-color:    #2563eb;
    --bs-link-hover-color: #1d4ed8;
    --bs-emphasis-color: #0b1220;
}

/* --------------------------------------------------------------------------
   2. Tokens — dark
   The whole palette is redefined here; nothing else in the file needs to know
   which theme is active. `data-theme` is set by the topbar toggle (persisted
   in localStorage and applied before first paint by an inline script in the
   layout head), and `prefers-color-scheme` supplies the default when the user
   has never chosen.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --pf-brand:        #5b8cf5;
    --pf-brand-600:    #7aa3f8;
    --pf-brand-700:    #a6c1fb;
    --pf-brand-soft:   rgba(91, 140, 245, .15);
    --pf-brand-soft-2: rgba(91, 140, 245, .24);
    --pf-brand-ring:   rgba(91, 140, 245, .34);
    --pf-on-brand:     #0b1220;

    --pf-ink:          #e9eef7;
    --pf-ink-2:        #bcc8da;
    --pf-muted:        #93a1b5;
    --pf-faint:        #828fa5;
    --pf-surface:      #131b29;
    --pf-surface-2:    #172130;
    --pf-surface-3:    #1d2838;
    --pf-canvas:       #0a0f18;
    --pf-canvas-tint:  radial-gradient(1100px 520px at 78% -12%, rgba(91, 140, 245, .10), transparent 62%),
                       radial-gradient(760px 380px at 4% 0%, rgba(27, 175, 122, .06), transparent 58%);
    --pf-border:       #263143;
    --pf-border-soft:  #1f2938;
    --pf-border-strong:#33405a;

    --pf-success:      #4ade80;
    --pf-success-soft: rgba(74, 222, 128, .15);
    --pf-success-line: #4ade80;
    --pf-warning:      #fbbf24;
    --pf-warning-soft: rgba(251, 191, 36, .15);
    --pf-warning-line: #fbbf24;
    --pf-danger:       #fb7185;
    --pf-danger-soft:  rgba(251, 113, 133, .16);
    --pf-danger-line:  #fb7185;
    --pf-info:         #38bdf8;
    --pf-info-soft:    rgba(56, 189, 248, .15);
    --pf-info-line:    #38bdf8;
    --pf-neutral:      #b0bccd;
    --pf-neutral-soft: rgba(176, 188, 205, .13);
    --pf-neutral-line: #7b8aa0;

    /* Same eight hues, lightened by a fixed 25% toward white so the order and
       the colour-vision separation are preserved while staying legible on a
       dark surface. No new hues are introduced. */
    --pf-series-1: #5f9ae0;
    --pf-series-2: #f08e67;
    --pf-series-3: #54c39b;
    --pf-series-4: #f1b940;
    --pf-series-5: #ee9cbb;
    --pf-series-6: #40a240;
    --pf-series-7: #776bbd;
    --pf-series-8: #ea7676;

    --pf-chart-ink:     #e9eef7;
    --pf-chart-muted:   #93a1b5;
    --pf-chart-grid:    #222c3d;
    --pf-chart-surface: #131b29;
    --pf-chart-tip-bg:  #020617;
    --pf-chart-tip-ink: #e9eef7;
    --pf-chart-fill-a:  .38;
    --pf-chart-fill-b:  .03;

    --pf-shadow-1:  0 1px 2px rgba(0, 0, 0, .40);
    --pf-shadow-2:  0 1px 3px rgba(0, 0, 0, .45), 0 8px 20px -10px rgba(0, 0, 0, .60);
    --pf-shadow-3:  0 2px 6px rgba(0, 0, 0, .50), 0 22px 44px -18px rgba(0, 0, 0, .70);
    --pf-shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 32px -14px rgba(0, 0, 0, .62);
    --pf-inset-hi:  inset 0 1px 0 rgba(255, 255, 255, .045);

    --pf-sidebar-bg:     #080d15;
    --pf-sidebar-bg-2:   #0d1523;
    --pf-sidebar-ink:    #aebbcd;
    --pf-sidebar-hover:  rgba(255, 255, 255, .05);
    --pf-sidebar-active: rgba(91, 140, 245, .18);
    --pf-topbar-bg:      rgba(19, 27, 41, .84);

    --bs-primary:       #5b8cf5;
    --bs-primary-rgb:   91, 140, 245;
    --bs-body-color:    #e9eef7;
    --bs-body-bg:       #0a0f18;
    --bs-border-color:  #263143;
    --bs-link-color:    #7aa3f8;
    --bs-link-hover-color: #a6c1fb;
    --bs-emphasis-color: #ffffff;
}

/* System preference, only while the user has not made an explicit choice. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --pf-brand:        #5b8cf5;
        --pf-brand-600:    #7aa3f8;
        --pf-brand-700:    #a6c1fb;
        --pf-brand-soft:   rgba(91, 140, 245, .15);
        --pf-brand-soft-2: rgba(91, 140, 245, .24);
        --pf-brand-ring:   rgba(91, 140, 245, .34);
        --pf-on-brand:     #0b1220;

        --pf-ink:          #e9eef7;
        --pf-ink-2:        #bcc8da;
        --pf-muted:        #93a1b5;
        --pf-faint:        #828fa5;
        --pf-surface:      #131b29;
        --pf-surface-2:    #172130;
        --pf-surface-3:    #1d2838;
        --pf-canvas:       #0a0f18;
        --pf-canvas-tint:  radial-gradient(1100px 520px at 78% -12%, rgba(91, 140, 245, .10), transparent 62%),
                           radial-gradient(760px 380px at 4% 0%, rgba(27, 175, 122, .06), transparent 58%);
        --pf-border:       #263143;
        --pf-border-soft:  #1f2938;
        --pf-border-strong:#33405a;

        --pf-success:      #4ade80;
        --pf-success-soft: rgba(74, 222, 128, .15);
        --pf-success-line: #4ade80;
        --pf-warning:      #fbbf24;
        --pf-warning-soft: rgba(251, 191, 36, .15);
        --pf-warning-line: #fbbf24;
        --pf-danger:       #fb7185;
        --pf-danger-soft:  rgba(251, 113, 133, .16);
        --pf-danger-line:  #fb7185;
        --pf-info:         #38bdf8;
        --pf-info-soft:    rgba(56, 189, 248, .15);
        --pf-info-line:    #38bdf8;
        --pf-neutral:      #b0bccd;
        --pf-neutral-soft: rgba(176, 188, 205, .13);
        --pf-neutral-line: #7b8aa0;

        --pf-series-1: #5f9ae0;
        --pf-series-2: #f08e67;
        --pf-series-3: #54c39b;
        --pf-series-4: #f1b940;
        --pf-series-5: #ee9cbb;
        --pf-series-6: #40a240;
        --pf-series-7: #776bbd;
        --pf-series-8: #ea7676;

        --pf-chart-ink:     #e9eef7;
        --pf-chart-muted:   #93a1b5;
        --pf-chart-grid:    #222c3d;
        --pf-chart-surface: #131b29;
        --pf-chart-tip-bg:  #020617;
        --pf-chart-tip-ink: #e9eef7;
        --pf-chart-fill-a:  .38;
        --pf-chart-fill-b:  .03;

        --pf-shadow-1:  0 1px 2px rgba(0, 0, 0, .40);
        --pf-shadow-2:  0 1px 3px rgba(0, 0, 0, .45), 0 8px 20px -10px rgba(0, 0, 0, .60);
        --pf-shadow-3:  0 2px 6px rgba(0, 0, 0, .50), 0 22px 44px -18px rgba(0, 0, 0, .70);
        --pf-shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 32px -14px rgba(0, 0, 0, .62);
        --pf-inset-hi:  inset 0 1px 0 rgba(255, 255, 255, .045);

        --pf-sidebar-bg:     #080d15;
        --pf-sidebar-bg-2:   #0d1523;
        --pf-sidebar-ink:    #aebbcd;
        --pf-sidebar-hover:  rgba(255, 255, 255, .05);
        --pf-sidebar-active: rgba(91, 140, 245, .18);
        --pf-topbar-bg:      rgba(19, 27, 41, .84);

        --bs-primary:       #5b8cf5;
        --bs-primary-rgb:   91, 140, 245;
        --bs-body-color:    #e9eef7;
        --bs-body-bg:       #0a0f18;
        --bs-border-color:  #263143;
        --bs-link-color:    #7aa3f8;
        --bs-link-hover-color: #a6c1fb;
        --bs-emphasis-color: #ffffff;
    }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
html, body { height: 100%; }

body.app-body {
    background-color: var(--pf-canvas);
    background-image: var(--pf-canvas-tint);
    background-attachment: fixed;
    color: var(--pf-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .9rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "ss01";
}

h1, h2, h3, h4, h5, h6 { color: var(--pf-ink); font-weight: 650; letter-spacing: -.012em; }
a { text-decoration: none; color: var(--bs-link-color); }
a:hover { text-decoration: none; color: var(--bs-link-hover-color); }
:focus-visible { outline: 2px solid var(--pf-brand); outline-offset: 2px; border-radius: 4px; }
.text-muted { color: var(--pf-muted) !important; }
.text-dark { color: var(--pf-ink) !important; }
.bg-white { background-color: var(--pf-surface) !important; }
.bg-light { background-color: var(--pf-surface-2) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--pf-border) !important; }
hr { border-color: var(--pf-border); opacity: 1; }
::selection { background: var(--pf-brand-soft-2); color: var(--pf-ink); }

/* Figures always align in columns */
.text-num, .stat-value, .metric-value, .kpi-value, td.text-end, th.text-end {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.app-wrapper { display: flex; min-height: 100vh; }

/* --------------------------------------------------------------------------
   4. Sidebar
   -------------------------------------------------------------------------- */
.app-sidebar {
    width: var(--pf-sidebar-width);
    background: linear-gradient(180deg, var(--pf-sidebar-bg-2) 0%, var(--pf-sidebar-bg) 42%);
    color: var(--pf-sidebar-ink);
    position: fixed; inset: 0 auto 0 0;
    display: flex; flex-direction: column;
    z-index: 1040;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
    border-right: 1px solid rgba(255, 255, 255, .05);
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }

.sidebar-brand {
    height: var(--pf-topbar-height);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}
/* Company logo: the reversed (light) version, since the sidebar is dark in both themes */
.sidebar-logo { display: block; height: 26px; width: auto; }

/* Sign-in pages: logo above the card; the reversed logo takes over in the dark theme */
.auth-brand { margin: 0 0 .45rem; line-height: 0; }
.auth-brand img { height: 42px; width: auto; max-width: 100%; }
.logo-on-dark { display: none; }
:root[data-theme="dark"] .logo-on-light { display: none; }
:root[data-theme="dark"] .logo-on-dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-on-light { display: none; }
    :root:not([data-theme="light"]) .logo-on-dark { display: inline-block; }
}

.sidebar-nav { flex: 1 1 auto; padding: .5rem .625rem 1rem; }
.sidebar-heading {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
    color: #8093ab; font-weight: 650;
    padding: 1rem .625rem .35rem;
}
.sidebar-nav .nav-link {
    color: var(--pf-sidebar-ink);
    padding: .5rem .625rem;
    border-radius: var(--pf-radius-sm);
    font-size: .875rem;
    font-weight: 500;
    display: flex; align-items: center;
    position: relative;
    transition: background .15s ease, color .15s ease;
}
.sidebar-nav .nav-link .bi { color: #8fa1b8; transition: color .15s ease; }
.sidebar-nav .nav-link:hover { background: var(--pf-sidebar-hover); color: #fff; }
.sidebar-nav .nav-link:hover .bi { color: #cfe0f7; }
.sidebar-nav .nav-link.active {
    background: var(--pf-sidebar-active);
    color: #fff;
    font-weight: 600;
}
.sidebar-nav .nav-link.active .bi { color: #93c5fd; }
.sidebar-nav .nav-link.active::before {
    content: ""; position: absolute; left: -.625rem; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0;
    background: #60a5fa;
}
.sidebar-nav .nav-link .chev { transition: transform .2s ease; }
.sidebar-nav .nav-link.collapsed .chev { transform: rotate(-90deg); }
.sidebar-sub { margin: .125rem 0 .25rem; }
.sidebar-sub .nav-link { padding-left: 2.35rem; font-size: .83rem; }
.sidebar-sub .nav-link.active { background: var(--pf-sidebar-active); }
.sidebar-sub .nav-link.active::before { display: none; }
.sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .07); flex-shrink: 0; }
.sidebar-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(4, 8, 15, .55);
    backdrop-filter: blur(2px);
    z-index: 1035;
}

/* --------------------------------------------------------------------------
   5. Main shell + topbar
   -------------------------------------------------------------------------- */
.app-main {
    flex: 1 1 auto;
    margin-left: var(--pf-sidebar-width);
    display: flex; flex-direction: column;
    min-width: 0;
}
.app-topbar {
    height: var(--pf-topbar-height);
    position: sticky; top: 0; z-index: 1030;
    background: var(--pf-topbar-bg) !important;
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--pf-border) !important;
}
.topbar-title { font-size: .98rem; font-weight: 650; color: var(--pf-ink); letter-spacing: -.01em; }
.app-topbar .nav-link { color: var(--pf-ink-2); }
.app-topbar .nav-link:hover { color: var(--pf-ink); }
.app-content { flex: 1 1 auto; }
.app-footer { background: var(--pf-surface); border-color: var(--pf-border) !important; color: var(--pf-muted) !important; }

.avatar {
    display: inline-flex; width: 32px; height: 32px; border-radius: 50%;
    background: var(--pf-brand-soft); color: var(--pf-brand-700);
    align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 650;
    border: 1px solid var(--pf-brand-ring);
}

/* Theme toggle */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border-radius: 9px;
    border: 1px solid var(--pf-border);
    background: var(--pf-surface-2);
    color: var(--pf-ink-2);
    line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { background: var(--pf-surface-3); color: var(--pf-ink); border-color: var(--pf-border-strong); }
.theme-toggle .bi { font-size: .95rem; }
.theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .theme-icon-dark { display: inline-block; }
    :root:not([data-theme="light"]) .theme-toggle .theme-icon-light { display: none; }
}

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: var(--pf-shadow-3); }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .app-main { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   6. Page header
   -------------------------------------------------------------------------- */
.page-header { margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.45rem; font-weight: 690; letter-spacing: -.024em; line-height: 1.22; }
.page-header .breadcrumb { margin-bottom: .3rem; font-size: .78rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--pf-faint); }
.breadcrumb-item a { color: var(--pf-muted); }
.breadcrumb-item a:hover { color: var(--pf-brand); }
.breadcrumb-item.active { color: var(--pf-ink-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   7. Cards + metric tiles
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow-1);
    background: var(--pf-surface);
    color: var(--pf-ink);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--pf-border-soft);
    font-weight: 620;
    font-size: .9rem;
    color: var(--pf-ink);
    padding: .85rem 1.15rem;
    letter-spacing: -.005em;
}
.card-body { padding: 1.15rem; }
.card-footer { background: transparent; border-top: 1px solid var(--pf-border-soft); }

/* --- Legacy metric tiles (leads/show, partners/show, ledger, statement) --- */
.stat-card {
    --tone:      var(--pf-neutral);
    --tone-soft: var(--pf-neutral-soft);
    --tone-line: var(--pf-neutral-line);
    position: relative;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow-1);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.stat-card:hover {
    box-shadow: var(--pf-shadow-2);
    transform: translateY(-1px);
    border-color: var(--pf-border-strong);
}
.stat-card .card-body { padding: 1.05rem 1.1rem; display: flex; flex-direction: column; }

/* Bootstrap tone classes still used across the app map onto the tone triple. */
.stat-card.border-primary,   .stat-card.tone-brand   { --tone: var(--pf-brand);   --tone-soft: var(--pf-brand-soft);   --tone-line: var(--pf-brand); }
.stat-card.border-info,      .stat-card.tone-info    { --tone: var(--pf-info);    --tone-soft: var(--pf-info-soft);    --tone-line: var(--pf-info-line); }
.stat-card.border-success,   .stat-card.tone-success { --tone: var(--pf-success); --tone-soft: var(--pf-success-soft); --tone-line: var(--pf-success-line); }
.stat-card.border-warning,   .stat-card.tone-warning { --tone: var(--pf-warning); --tone-soft: var(--pf-warning-soft); --tone-line: var(--pf-warning-line); }
.stat-card.border-danger,    .stat-card.tone-danger  { --tone: var(--pf-danger);  --tone-soft: var(--pf-danger-soft);  --tone-line: var(--pf-danger-line); }
.stat-card.border-secondary, .stat-card.tone-neutral { --tone: var(--pf-neutral); --tone-soft: var(--pf-neutral-soft); --tone-line: var(--pf-neutral-line); }

/* `border-start border-4 border-<tone>` is the older accent form. Repaint the
   rail with the tone token instead of the raw Bootstrap colour. */
.stat-card.border-start.border-4 { border-left-color: var(--tone-line) !important; }

.stat-label {
    font-size: .69rem;
    font-weight: 650;
    color: var(--pf-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height: 1.35;
}
.stat-value {
    font-size: 1.6rem;
    font-weight: 690;
    letter-spacing: -.03em;
    color: var(--pf-ink);
    line-height: 1.14;
    margin-top: .45rem;
}
.stat-hint { font-size: .765rem; color: var(--pf-muted); margin-top: .3rem; line-height: 1.35; }

/* --------------------------------------------------------------------------
   8. Dashboard
   -------------------------------------------------------------------------- */

/* 8.1 Sticky filter bar ---------------------------------------------------- */
.filter-bar { background: var(--pf-surface); }
.filter-bar .form-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 650; color: var(--pf-muted);
}
.dashboard-filter-bar {
    position: sticky;
    top: calc(var(--pf-topbar-height) + .5rem);
    z-index: 1015;
    background: var(--pf-topbar-bg);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: var(--pf-shadow-1);
}
/* The filter card is a disclosure on phones only. From 576px up the body is
   forced open whatever Bootstrap's collapse classes say and the toggle is gone,
   so a desktop sees exactly the bar it always saw. */
.dashboard-filter-toggle {
    display: none;
    width: 100%; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .25rem 0; border: 0; background: none; color: var(--pf-ink-2);
    font-size: .8rem; font-weight: 600;
}
.dashboard-filter-toggle-label { display: inline-flex; align-items: center; gap: .4rem; }
.dashboard-filter-toggle-note {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--pf-muted); font-weight: 500; font-size: .74rem;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dashboard-filter-toggle-note .bi { transition: transform .18s ease; }
.dashboard-filter-toggle[aria-expanded="true"] .dashboard-filter-toggle-note .bi { transform: rotate(180deg); }
.dashboard-filter-toggle:focus-visible { outline: 2px solid var(--pf-brand); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 575.98px) {
    .dashboard-filter-toggle { display: flex; }
    .dashboard-filter-body.show, .dashboard-filter-body.collapsing { padding-top: .55rem; }
}
@media (min-width: 576px) {
    .dashboard-filter-body { display: block !important; height: auto !important; }
}

/* 8.2 Dashboard switcher — segmented control that WRAPS ---------------------
   It used to be `nowrap` with `overflow-x:auto` and no scrollbar, fade or
   arrows, so anything past the fold was silently unreachable-looking: 5 of 11
   items at 1440px, 9 of 11 at 375px. It now holds the six peer dashboards only
   (the registers live in the sidebar) and wraps, so every item is always
   visible at every width and no scroll affordance is needed. */
.dashboard-switcher {
    display: flex; flex-wrap: wrap; gap: .25rem;
    padding: .3rem;
    background: var(--pf-surface-3);
    border: 1px solid var(--pf-border);
    border-radius: 12px;
}
.dashboard-switcher-item {
    display: inline-flex; align-items: center; gap: .38rem;
    color: var(--pf-ink-2);
    text-decoration: none;
    font-weight: 550;
    font-size: .82rem;
    padding: .38rem .72rem;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}
.dashboard-switcher-item:hover { background: var(--pf-surface); color: var(--pf-ink); }
.dashboard-switcher-item:focus-visible { outline: 2px solid var(--pf-brand); outline-offset: 1px; }
.dashboard-switcher-item.is-current {
    background: var(--pf-surface);
    color: var(--pf-brand-700);
    font-weight: 640;
    box-shadow: var(--pf-shadow-1);
}
.dashboard-switcher-item .bi { opacity: .78; }
.dashboard-switcher-item.is-current .bi { opacity: 1; }

/* 8.2b Phones: the switcher earns ONE row, not three ------------------------
   Wrapped, the six items took 115px and — stacked with the page header, the
   filter card and the rate-card warning — put the first figure on the page most
   of a screen down. It becomes a single scrolling row here. The earlier version
   of that idea failed because it hid the scrollbar and offered no affordance;
   this one fades whichever edge still has items behind it (app.js toggles the
   two classes) and scrolls the current dashboard into view on load. */
@media (max-width: 575.98px) {
    .dashboard-switcher {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        position: relative;
    }
    .dashboard-switcher::-webkit-scrollbar { height: 0; }
    .dashboard-switcher-item { flex: 0 0 auto; scroll-snap-align: center; }
    /* Content is faded at an edge only while something is actually past it. */
    .dashboard-switcher.can-scroll-right {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
    }
    .dashboard-switcher.can-scroll-left {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px);
        mask-image: linear-gradient(to right, transparent 0, #000 34px);
    }
    .dashboard-switcher.can-scroll-left.can-scroll-right {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
    }
}

/* 8.3 Section rhythm ------------------------------------------------------- */
.dash-section { margin-bottom: 1.6rem; }
.dash-section-head {
    display: flex; align-items: baseline; gap: .6rem;
    margin: 0 0 .8rem;
}
.dash-section-title {
    font-size: .72rem; font-weight: 680; text-transform: uppercase;
    letter-spacing: .1em; color: var(--pf-muted); margin: 0;
}
.dash-section-note { font-size: .76rem; color: var(--pf-faint); }
.dash-section-rule { flex: 1 1 auto; height: 1px; background: var(--pf-border); }

/* 8.4 KPI grid ------------------------------------------------------------- */
.kpi-grid { display: grid; gap: .85rem; margin-bottom: .85rem; }
.kpi-grid--hero { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.kpi-grid--rest { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
/* A 375px phone gives the content column 343px, and two 196px tracks need 406px:
   the seven supporting tiles fell to one column and the KPI band became 1,300px
   of stacked slabs before the first chart. Nothing in a supporting tile — a
   chip, an uppercase label, a figure and a 30px sparkline — needs 343px, so they
   pair up here. The hero figures keep the full width: they have earned it. */
@media (max-width: 575.98px) {
    .kpi-grid--rest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .kpi-grid--rest .kpi-card .card-body { padding: .7rem .75rem .75rem; }
    .kpi-grid--rest .kpi-value { font-size: 1.28rem; }
    .kpi-grid--rest .kpi-value.is-long { font-size: 1.08rem; }
    .kpi-grid--rest .kpi-value.is-xlong { font-size: .95rem; }
    .kpi-grid--rest .kpi-main { gap: .3rem; }
    .kpi-grid--rest .kpi-label { font-size: .64rem; }
}

/* Hierarchy: the hero tiles carry a tinted surface and a heavier shadow so
   the eye lands on them first; the supporting tiles stay on the plain
   surface and spend their colour only on the tone rule and the icon chip.
   A page of equal-weight coloured slabs would read as a rainbow. */
.kpi-card {
    position: relative;
    display: flex; flex-direction: column;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    background: var(--pf-surface);
    box-shadow: var(--pf-shadow-1), var(--pf-inset-hi);
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1),
                transform .2s cubic-bezier(.4, 0, .2, 1),
                border-color .2s ease;
}
.kpi-card--hero {
    background:
        linear-gradient(170deg, var(--tone-soft) 0%, transparent 52%),
        var(--pf-surface);
    box-shadow: var(--pf-shadow-2), var(--pf-inset-hi);
}
/* A supporting tile only turns coloured when its state genuinely needs
   attention — a warning or a danger tone. */
.kpi-card.border-warning, .kpi-card.border-danger {
    background:
        linear-gradient(180deg, var(--tone-soft) 0%, transparent 46%),
        var(--pf-surface);
}
/* A 2px tone rule across the top is the family marker: it reads at a glance
   without turning the whole tile into a colour block. */
.kpi-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: var(--tone-line);
    background: linear-gradient(90deg, var(--tone-line), color-mix(in srgb, var(--tone-line) 35%, transparent));
    z-index: 2;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--pf-shadow-lift);
    border-color: var(--pf-border-strong);
}
.kpi-card:focus-within { border-color: var(--tone-line); }
.kpi-card .card-body {
    padding: 1rem 1.05rem 0.9rem;
    display: flex; flex-direction: column; gap: .1rem;
    flex: 1 1 auto;
}

.kpi-head { display: flex; align-items: center; gap: .55rem; min-height: 30px; }
.kpi-chip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--tone-soft);
    color: var(--tone);
    border: 1px solid var(--pf-border);
    border-color: color-mix(in srgb, var(--tone-line) 26%, transparent);
    font-size: .88rem;
}
.kpi-card--hero .kpi-chip { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; }
.kpi-label {
    font-size: .685rem; font-weight: 660; color: var(--pf-muted);
    text-transform: uppercase; letter-spacing: .075em; line-height: 1.25;
    min-width: 0;
}
.kpi-card--hero .kpi-label { font-size: .72rem; }

.kpi-main {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: .5rem; flex-wrap: wrap;
    margin-top: .6rem;
}
.kpi-value {
    font-size: 1.62rem;
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--pf-ink);
    line-height: 1.1;
    margin: 0;
    min-width: 0;
}
.kpi-card--hero .kpi-value { font-size: 2.1rem; letter-spacing: -.04em; }
.kpi-value.is-long { font-size: 1.32rem; }
.kpi-card--hero .kpi-value.is-long { font-size: 1.66rem; }
.kpi-value.is-xlong { font-size: 1.15rem; }
.kpi-card--hero .kpi-value.is-xlong { font-size: 1.42rem; }
.kpi-cur { font-size: .72em; font-weight: 600; color: var(--pf-muted); margin-right: .06em; }
.kpi-dec { font-size: .62em; font-weight: 600; color: var(--pf-faint); letter-spacing: -.01em; }
.kpi-unit { font-size: .62em; font-weight: 640; color: var(--pf-muted); margin-left: .08em; }

/* Delta pill — green only when the direction is good FOR THIS METRIC, and the
   arrow glyph carries the same information so colour is never the only cue. */
.kpi-delta {
    display: inline-flex; align-items: center; gap: .22rem;
    font-size: .715rem; font-weight: 680;
    padding: .17rem .42rem .17rem .34rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}
.kpi-delta .bi { font-size: .78em; }
.kpi-delta.is-good { background: var(--pf-success-soft); color: var(--pf-success); border-color: color-mix(in srgb, var(--pf-success-line) 28%, transparent); }
.kpi-delta.is-bad  { background: var(--pf-danger-soft);  color: var(--pf-danger);  border-color: color-mix(in srgb, var(--pf-danger-line) 28%, transparent); }
.kpi-delta.is-flat { background: var(--pf-neutral-soft); color: var(--pf-neutral); border-color: color-mix(in srgb, var(--pf-neutral-line) 30%, transparent); }
/* Moved, but the direction carries no verdict: a statutory deduction that
   tracks its own payout, a settlement paid. Arrow and figure, no green, no red
   — red spent where nothing is wrong is red nobody reads where it matters. */
.kpi-delta.is-neutral { background: var(--pf-neutral-soft); color: var(--pf-neutral); border-color: color-mix(in srgb, var(--pf-neutral-line) 30%, transparent); }

.kpi-spark { margin-top: .7rem; line-height: 0; }
.kpi-spark svg { display: block; width: 100%; height: 30px; overflow: visible; }
.kpi-card--hero .kpi-spark svg { height: 44px; }
.kpi-spark .spark-line { fill: none; stroke: var(--tone-line); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.kpi-spark .spark-dot { fill: var(--tone-line); stroke: var(--pf-surface); stroke-width: 2; }
/* An unchanged series: a dashed rule, no fill — it must not look like volume. */
.kpi-spark .spark.is-flat .spark-line { stroke-dasharray: 3 4; opacity: .6; }
.kpi-spark .spark.is-flat + .spark-dot, .kpi-spark .spark.is-flat .spark-dot { opacity: .7; }

.kpi-foot {
    margin-top: auto;
    padding-top: .55rem;
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: .1rem .5rem;
    font-size: .715rem; color: var(--pf-muted);
    line-height: 1.35;
}
.kpi-hint { flex: 1 1 9rem; min-width: 0; }
.kpi-delta-label { color: var(--pf-faint); white-space: nowrap; font-size: .69rem; }
/* A period that produced no records at all: the tile says so in the same voice
   the chart panels use, instead of showing a bare zero under a red −100%. */
.kpi-empty {
    display: inline-flex; align-items: baseline; gap: .3rem;
    color: var(--pf-faint); font-size: .7rem; font-style: italic;
}
.kpi-empty .bi { font-style: normal; opacity: .75; }
.kpi-card.is-empty .kpi-value { color: var(--pf-faint); font-weight: 620; }
.kpi-card.is-empty .kpi-chip { opacity: .55; }
/* The whole card opens the records behind it, but the drill-through link sits
   UNDER the content rather than over it: painted on top it swallowed every
   pointer event, so the one thing people do with a figure in a loan CRM —
   select "₹1,67,399.09" and paste it into a statement — was impossible, and
   nothing inside the tile could carry a hover tooltip. The body passes clicks
   through to the link; the value and the delta pill take their events back. */
.kpi-open {
    position: absolute; inset: 0; z-index: 0;
    border-radius: inherit;
    text-indent: -9999px; overflow: hidden;
}
.kpi-card .card-body { position: relative; z-index: 1; pointer-events: none; }
.kpi-card .kpi-value, .kpi-card .kpi-delta { pointer-events: auto; }
.kpi-card .kpi-value { user-select: text; cursor: text; }
.kpi-open:focus-visible { outline: 2px solid var(--pf-brand); outline-offset: -3px; }
.kpi-card .kpi-arrow {
    position: absolute; right: .8rem; bottom: .8rem;
    color: var(--pf-faint); font-size: .78rem;
    opacity: 0; transform: translateX(-3px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1;
}
.kpi-card:hover .kpi-arrow { opacity: 1; transform: translateX(0); }

/* 8.5 Chart cards ---------------------------------------------------------- */
.chart-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.chart-card .card-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .75rem; padding: .95rem 1.15rem .8rem;
    border-bottom: 1px solid var(--pf-border-soft);
    background: linear-gradient(180deg, var(--pf-surface-2), transparent);
}
.chart-head-main { min-width: 0; }
.chart-title {
    display: flex; align-items: center; gap: .45rem;
    font-size: .925rem; font-weight: 650; color: var(--pf-ink);
    letter-spacing: -.012em; line-height: 1.3;
}
/* The swatch is the same series hue app.js paints the marks with, so the
   header and the chart cannot drift apart. Shown only where one hue really
   does stand for the whole chart. */
.chart-swatch {
    flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px;
    background: var(--sw, var(--pf-series-1));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw, var(--pf-series-1)) 16%, transparent);
}
/* A chart painted category by category is introduced by the hues it actually
   uses, in the order it uses them — never by one hue standing in for eight. */
.chart-swatch--multi {
    display: inline-flex; gap: 2px;
    width: auto; height: 9px; border-radius: 0;
    background: none; box-shadow: none;
}
.chart-swatch--multi i {
    width: 5px; height: 9px; border-radius: 2px;
    background: var(--sw, var(--pf-series-1));
}
/* An ordinal chart is painted on a severity ramp, not on the categorical
   palette, so its mark is that ramp: calm, watch, overdue. */
.chart-swatch--ramp {
    width: 22px; height: 9px; border-radius: 2px; box-shadow: none;
    background: linear-gradient(to right,
        var(--pf-neutral-line) 0%, var(--pf-warning-line) 52%, var(--pf-danger-line) 100%);
}
.chart-subtitle { font-size: .755rem; font-weight: 500; color: var(--pf-muted); margin-top: .18rem; letter-spacing: 0; text-transform: none; }
/* Unit mark — which scale the reader is looking at, in one glyph. */
.chart-kind {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    font-size: .76rem; font-weight: 640; line-height: 1;
    color: var(--pf-muted);
    background: var(--pf-surface-3);
    border: 1px solid var(--pf-border);
    border-radius: 7px;
}
.chart-card .card-body { padding: .9rem 1rem 1rem; flex: 1 1 auto; display: flex; flex-direction: column; }
.chart-card .card-body > .dashboard-chart-wrap { flex: 0 0 auto; }
.dashboard-chart-wrap { position: relative; min-height: 260px; }
.dashboard-chart-wrap canvas { display: block; width: 100% !important; }
/* A doughnut carries no length scale, so it is centred at a readable size
   rather than stretched across a full-width card.
   `width: 100%` is load-bearing: with two auto inline margins and no width the
   block shrank to fit its only child, a canvas forced to `width: 100%` by the
   rule above — a circular dependency that pinned the ring at 300px inside a
   560px panel and, after a viewport resize, collapsed it to 0 with no error and
   no empty state, leaving a chart card with a title and a blank body. */
.dashboard-chart-wrap.is-radial { width: 100%; max-width: 440px; margin-inline: auto; }

/* 8.6 Funnel — hand-built proportion bars, not Chart.js --------------------- */
.funnel {
    list-style: none; margin: 0; padding: .2rem 0 0;
    display: flex; flex-direction: column;
    flex: 1 1 auto; justify-content: space-evenly;
    gap: .85rem;
}
.funnel-step { display: block; }
.funnel-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .6rem; margin-bottom: .32rem;
}
.funnel-label { font-size: .78rem; font-weight: 600; color: var(--pf-ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnel-figures { display: flex; align-items: baseline; gap: .45rem; white-space: nowrap; }
.funnel-value { font-size: .92rem; font-weight: 690; color: var(--pf-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.funnel-share { font-size: .7rem; font-weight: 620; color: var(--pf-muted); font-variant-numeric: tabular-nums; }
.funnel-track {
    position: relative; height: 12px; border-radius: 999px;
    background: var(--pf-surface-3);
    border: 1px solid var(--pf-border-soft);
    overflow: hidden;
}
.funnel-fill {
    position: absolute; inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--step);
    background: linear-gradient(90deg, color-mix(in srgb, var(--step) 78%, transparent), var(--step));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
    width: var(--w, 0%);
    animation: pf-funnel-in .7s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes pf-funnel-in { from { width: 0; } to { width: var(--w, 0%); } }
.funnel-note { font-size: .695rem; color: var(--pf-faint); margin-top: .28rem; display: flex; align-items: center; gap: .3rem; }
.funnel-note .bi { font-size: .78em; }

/* 8.7 Empty states — designed, not apologetic ------------------------------ */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2.4rem 1rem; gap: .1rem;
    color: var(--pf-muted); min-height: 200px; flex: 1 1 auto;
}
.empty-state .empty-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px;
    background: var(--pf-surface-3);
    border: 1px solid var(--pf-border);
    color: var(--pf-faint);
    font-size: 1.2rem;
    margin-bottom: .7rem;
}
.empty-state .empty-title { font-size: .875rem; font-weight: 620; color: var(--pf-ink-2); }
.empty-state .empty-note { font-size: .78rem; color: var(--pf-faint); max-width: 30ch; margin-top: .18rem; }

/* 8.8 Sections accordion + tables ----------------------------------------- */
.dashboard-table-wrap { max-height: 520px; overflow: auto; }
.dashboard-table-wrap thead { position: sticky; top: 0; z-index: 1; }
.dashboard-sections .accordion-item {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius) !important;
    margin-bottom: .7rem;
    overflow: hidden;
    box-shadow: var(--pf-shadow-1);
    background: var(--pf-surface);
}
.dashboard-sections .accordion-button {
    font-weight: 630;
    font-size: .9rem;
    background: var(--pf-surface);
    color: var(--pf-ink);
    padding: .9rem 1.15rem;
    gap: .55rem;
}
.dashboard-sections .accordion-button:not(.collapsed) {
    background: var(--pf-surface);
    color: var(--pf-ink);
    box-shadow: none;
    border-bottom: 1px solid var(--pf-border-soft);
}
.dashboard-sections .accordion-button:focus { box-shadow: none; }
.dashboard-sections .accordion-button::after { filter: var(--pf-chevron-filter, none); }
:root[data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.8); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.8); }
}
.dashboard-sections .accordion-body { background: var(--pf-surface); }
.section-count {
    font-size: .68rem; font-weight: 660; letter-spacing: .04em;
    background: var(--pf-surface-3); color: var(--pf-ink-2);
    border: 1px solid var(--pf-border);
    border-radius: 999px; padding: .1rem .45rem;
    font-variant-numeric: tabular-nums;
}
.section-toolbar {
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--pf-border-soft);
    background: var(--pf-surface-2);
    display: flex; justify-content: flex-end; gap: .5rem;
}

.dashboard-source-note {
    border-style: dashed !important;
    background: transparent;
    box-shadow: none;
}
.dashboard-source-note .card-body { color: var(--pf-muted); }

/* Chart draw-in: the canvas fades up once, Chart.js animates the marks. */
.chart-card, .kpi-card { animation: pf-rise .42s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes pf-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   9. Tables + DataTables
   -------------------------------------------------------------------------- */
.table {
    --bs-table-border-color: var(--pf-border-soft);
    --bs-table-color: var(--pf-ink);
    --bs-table-bg: transparent;
    --bs-table-striped-color: var(--pf-ink);
    --bs-table-hover-color: var(--pf-ink);
    color: var(--pf-ink);
    margin-bottom: 0;
}
.table > thead > tr > th {
    font-size: .69rem;
    font-weight: 660;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pf-muted);
    white-space: nowrap;
    background: var(--pf-surface-2);
    border-bottom: 1px solid var(--pf-border);
    padding: .6rem .8rem;
}
.table > tbody > tr > td { vertical-align: middle; padding: .62rem .8rem; border-color: var(--pf-border-soft); color: var(--pf-ink); }
.table-hover > tbody > tr:hover > * { background-color: var(--pf-surface-2); color: var(--pf-ink); }
.table thead.table-light th, .table-light { background: var(--pf-surface-2); color: var(--pf-ink); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--pf-surface-2); color: var(--pf-ink); }
.text-num { text-align: right; white-space: nowrap; }
.table-actions { white-space: nowrap; }

/* The leading column of a record list is an identifier (BK-001, U-010, LD-00007)
   and must never wrap onto a second line. */
table[data-datatable] > tbody > tr > td:first-child { white-space: nowrap; }

/* Long free-text cells (product lists, remarks) stay on one line so a row's
   height is set by its content, not by its longest column. */
.cell-clamp { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-actions .btn { padding: .15rem .45rem; font-size: .78rem; }

div.dt-container { color: var(--pf-ink); }
div.dt-container .dt-search input {
    width: 240px; border-radius: var(--pf-radius-sm);
    border: 1px solid var(--pf-border); padding: .35rem .7rem; font-size: .85rem;
    background: var(--pf-surface); color: var(--pf-ink);
}
div.dt-container div.dt-length select {
    width: 5rem; border-radius: var(--pf-radius-sm);
    background: var(--pf-surface); color: var(--pf-ink); border: 1px solid var(--pf-border);
}
div.dt-container .dt-info, div.dt-container .dt-length label, div.dt-container .dt-search label {
    color: var(--pf-muted); font-size: .82rem;
}
div.dt-container .dt-paging .dt-paging-button {
    color: var(--pf-ink-2) !important;
    border-radius: var(--pf-radius-xs);
}
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .page-item.active .page-link {
    background: var(--pf-brand) !important; border-color: var(--pf-brand) !important; color: var(--pf-on-brand) !important;
}
div.dt-container .page-link { background: var(--pf-surface); border-color: var(--pf-border); color: var(--pf-ink-2); }
div.dt-container .page-link:hover { background: var(--pf-surface-3); color: var(--pf-ink); }
div.dt-container .page-item.disabled .page-link { background: var(--pf-surface); color: var(--pf-faint); }
.dt-processing { z-index: 5; border-radius: var(--pf-radius-sm); background: var(--pf-surface) !important; color: var(--pf-ink) !important; border-color: var(--pf-border) !important; }
table.dataTable > thead > tr > th.dt-orderable-asc span.dt-column-order::before,
table.dataTable > thead > tr > th.dt-orderable-desc span.dt-column-order::after { color: var(--pf-faint); }

/* --------------------------------------------------------------------------
   10. Forms + Tom Select + Flatpickr
   -------------------------------------------------------------------------- */
.form-label { font-weight: 560; margin-bottom: .3rem; font-size: .82rem; color: var(--pf-ink-2); }
.form-control, .form-select {
    background-color: var(--pf-surface);
    border-color: var(--pf-border);
    border-radius: var(--pf-radius-sm);
    font-size: .875rem;
    color: var(--pf-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    background-color: var(--pf-surface);
    color: var(--pf-ink);
    border-color: var(--pf-brand);
    box-shadow: 0 0 0 3px var(--pf-brand-ring);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--pf-surface-3); color: var(--pf-muted);
}
.form-control::placeholder { color: var(--pf-faint); }
.input-group-text { background: var(--pf-surface-3); border-color: var(--pf-border); color: var(--pf-ink-2); }
.form-check-input { background-color: var(--pf-surface); border-color: var(--pf-border-strong); }
.form-check-input:checked { background-color: var(--pf-brand); border-color: var(--pf-brand); }
.form-check-input:focus { border-color: var(--pf-brand); box-shadow: 0 0 0 3px var(--pf-brand-ring); }
.required-note { font-size: .8rem; color: var(--pf-muted); }
.form-text { color: var(--pf-muted); font-size: .78rem; }
.invalid-feedback { color: var(--pf-danger); }
.is-invalid.form-control, .is-invalid.form-select { border-color: var(--pf-danger-line); }
:root[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2393a1b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

/* Tom Select */
.ts-wrapper .ts-control {
    background: var(--pf-surface) !important;
    border-color: var(--pf-border) !important;
    border-radius: var(--pf-radius-sm) !important;
    color: var(--pf-ink);
    font-size: .875rem;
    min-height: calc(1.5em + .75rem + 2px);
}
.ts-wrapper.focus .ts-control { border-color: var(--pf-brand) !important; box-shadow: 0 0 0 3px var(--pf-brand-ring) !important; }
.ts-wrapper .ts-control > input { color: var(--pf-ink); }
.ts-wrapper .ts-control input::placeholder { color: var(--pf-faint); }
.ts-dropdown {
    background: var(--pf-surface);
    color: var(--pf-ink);
    border-color: var(--pf-border);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-shadow-3);
}
.ts-dropdown .option { color: var(--pf-ink-2); }
.ts-dropdown .active { background: var(--pf-brand-soft); color: var(--pf-brand-700); }
.ts-dropdown .optgroup-header { background: var(--pf-surface-2); color: var(--pf-muted); }
.ts-wrapper.multi .ts-control > div { background: var(--pf-surface-3); color: var(--pf-ink); border-color: var(--pf-border); }
.ts-wrapper .clear-button, .ts-wrapper .ts-control .item .remove { color: var(--pf-muted) !important; }

/* Flatpickr */
.flatpickr-calendar {
    background: var(--pf-surface);
    color: var(--pf-ink);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow-3);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--pf-surface); }
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: var(--pf-surface); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays, span.flatpickr-weekday { background: var(--pf-surface); color: var(--pf-ink); fill: var(--pf-ink); }
span.flatpickr-weekday { color: var(--pf-muted); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--pf-ink-2); }
.flatpickr-day { color: var(--pf-ink-2); border-radius: 8px; }
.flatpickr-day:hover { background: var(--pf-surface-3); border-color: var(--pf-surface-3); color: var(--pf-ink); }
.flatpickr-day.today { border-color: var(--pf-brand); }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
    background: var(--pf-brand); border-color: var(--pf-brand); color: var(--pf-on-brand);
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--pf-faint); }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
    background: var(--pf-surface); color: var(--pf-ink);
}
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover { background: var(--pf-surface-3); }
.numInputWrapper span { border-color: var(--pf-border); }

/* --------------------------------------------------------------------------
   11. Buttons + badges
   -------------------------------------------------------------------------- */
.btn { border-radius: var(--pf-radius-sm); font-weight: 550; font-size: .855rem; transition: all .15s ease; }
.btn-sm { font-size: .8rem; padding: .32rem .68rem; }
.btn-primary {
    background: var(--pf-brand); border-color: var(--pf-brand); color: var(--pf-on-brand);
    box-shadow: 0 1px 2px rgba(37, 99, 235, .28);
}
.btn-primary:hover, .btn-primary:focus { background: var(--pf-brand-600); border-color: var(--pf-brand-600); color: var(--pf-on-brand); }
.btn-outline-secondary { border-color: var(--pf-border); color: var(--pf-ink-2); background: var(--pf-surface); }
.btn-outline-secondary:hover { background: var(--pf-surface-3); border-color: var(--pf-border-strong); color: var(--pf-ink); }
.btn-outline-primary { border-color: var(--pf-brand); color: var(--pf-brand); background: transparent; }
.btn-outline-primary:hover { background: var(--pf-brand); border-color: var(--pf-brand); color: var(--pf-on-brand); }
.btn-light { background: var(--pf-surface-2); border-color: var(--pf-border); color: var(--pf-ink-2); }
.btn-light:hover { background: var(--pf-surface-3); color: var(--pf-ink); }
.btn-link { color: var(--bs-link-color); }

.badge { font-weight: 600; font-size: .7rem; padding: .32em .6em; border-radius: 6px; letter-spacing: .01em; }
.text-bg-success { background: var(--pf-success-soft) !important; color: var(--pf-success) !important; }
.text-bg-warning { background: var(--pf-warning-soft) !important; color: var(--pf-warning) !important; }
.text-bg-danger  { background: var(--pf-danger-soft) !important;  color: var(--pf-danger) !important; }
.text-bg-secondary { background: var(--pf-neutral-soft) !important; color: var(--pf-ink-2) !important; }
.text-bg-info    { background: var(--pf-info-soft) !important;    color: var(--pf-info) !important; }
.text-bg-primary { background: var(--pf-brand-soft) !important;   color: var(--pf-brand-700) !important; }
.text-bg-light   { background: var(--pf-surface-3) !important;    color: var(--pf-ink-2) !important; }
.text-success { color: var(--pf-success) !important; }
.text-danger  { color: var(--pf-danger) !important; }
.text-warning { color: var(--pf-warning) !important; }
.text-primary { color: var(--pf-brand) !important; }
.text-info    { color: var(--pf-info) !important; }

/* --------------------------------------------------------------------------
   12. Alerts
   -------------------------------------------------------------------------- */
.alert { border-radius: var(--pf-radius); border-width: 1px; font-size: .875rem; padding: .8rem 1rem; }
.alert-success { background: var(--pf-success-soft); border-color: color-mix(in srgb, var(--pf-success-line) 34%, transparent); color: var(--pf-success); }
.alert-warning { background: var(--pf-warning-soft); border-color: color-mix(in srgb, var(--pf-warning-line) 36%, transparent); color: var(--pf-warning); }
.alert-danger  { background: var(--pf-danger-soft);  border-color: color-mix(in srgb, var(--pf-danger-line) 34%, transparent);  color: var(--pf-danger); }
.alert-info    { background: var(--pf-info-soft);    border-color: color-mix(in srgb, var(--pf-info-line) 34%, transparent);    color: var(--pf-info); }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(1) brightness(2); }
}

/* --------------------------------------------------------------------------
   13. Menus, modals, notifications
   -------------------------------------------------------------------------- */
.notif-menu {
    width: 360px; max-width: 92vw; padding: 0;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow-3);
    overflow: hidden;
    background: var(--pf-surface);
}
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { white-space: normal; padding: .7rem 1rem; border-bottom: 1px solid var(--pf-border-soft); color: var(--pf-ink-2); }
.notif-item:hover { background: var(--pf-surface-2); color: var(--pf-ink); }
.notif-item.unread { background: var(--pf-brand-soft); }
.notif-item.unread:hover { background: var(--pf-brand-soft-2); }

.dropdown-menu {
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow-3);
    font-size: .875rem;
    padding: .35rem;
    background: var(--pf-surface);
    color: var(--pf-ink);
}
.dropdown-item { border-radius: 7px; padding: .45rem .7rem; color: var(--pf-ink-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--pf-surface-2); color: var(--pf-ink); }
.dropdown-header { color: var(--pf-muted); }
.dropdown-divider { border-color: var(--pf-border-soft); }

.modal-content { border: 1px solid var(--pf-border); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow-3); background: var(--pf-surface); color: var(--pf-ink); }
.modal-header, .modal-footer { border-color: var(--pf-border-soft); }

.nav-tabs { border-color: var(--pf-border); }
.nav-tabs .nav-link { color: var(--pf-muted); border-radius: var(--pf-radius-xs) var(--pf-radius-xs) 0 0; }
.nav-tabs .nav-link.active { color: var(--pf-ink); background: var(--pf-surface); border-color: var(--pf-border) var(--pf-border) var(--pf-surface); }
.list-group-item { background: var(--pf-surface); border-color: var(--pf-border-soft); color: var(--pf-ink); }
.progress { background: var(--pf-surface-3); }
.spinner-border { color: var(--pf-brand); }

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */
@media print {
    .app-sidebar, .app-topbar, .app-footer, .page-actions,
    .dashboard-switcher, .filter-bar, .sidebar-backdrop, .section-toolbar,
    .kpi-arrow, .chart-kind { display: none !important; }
    .app-main { margin-left: 0; }
    body.app-body { background: #fff !important; background-image: none !important; font-size: .8rem; color: #000; }
    .card, .kpi-card, .chart-card { box-shadow: none !important; border-color: #d6dbe4 !important; break-inside: avoid; animation: none !important; }
    .dashboard-table-wrap { max-height: none; overflow: visible; }
    .dashboard-filter-bar { position: static; }
    .kpi-grid--hero, .kpi-grid--rest { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   15. Motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .stat-card:hover, .kpi-card:hover { transform: none; }
    .funnel-fill { animation: none !important; width: var(--w, 0%); }
}