/* ==========================================================================
   Aurum — gold & white design system
   --------------------------------------------------------------------------
   The restraint is the luxury. Gold appears in roughly 4% of the pixels; its
   rarity is what makes it read as valuable.

   Principles enforced here:
     · Paper, not screen      — surfaces are warm off-whites, never pure grey
     · Gold is punctuation    — active state, brand mark, and nothing else
     · Hairlines, not shadows — 0.5px rules, no elevation
     · Numbers are the hero   — the largest type on a screen is a figure
     · Never neutral grey     — every neutral carries a 38-45 degree hue bias
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Vazirmatn:wght@400;500&family=Spectral:wght@400;500&display=swap');

/* ==========================================================================
   1. TOKENS — LIGHT
   ========================================================================== */

:root {
    /* Paper — surfaces only, never text */
    --paper-pure:      #FFFFFF;
    --paper-porcelain: #FDFCFA;
    --paper-ivory:     #F8F6F1;
    --paper-alabaster: #F1EDE4;
    --paper-pearl:     #E5E0D5;

    /* Gold ramp — hue drifts 46deg to 41deg as it darkens, so it reads as metal */
    --gold-50:  #FBF6E9;
    --gold-100: #F5E9C8;
    --gold-200: #EBD79B;
    --gold-300: #DFC271;
    --gold-400: #D4AF37;
    --gold-500: #C49B22;
    --gold-600: #A67C12;
    --gold-700: #7E5C0C;
    --gold-800: #4F390A;

    /* Ink — brown-biased, never neutral black */
    --ink-900: #14120E;
    --ink-700: #2E2A22;
    --ink-500: #5C5648;
    --ink-300: #8C8677;

    /* Semantic surfaces */
    --surface-page:      #F8F6F1;
    --surface-card:      #FFFFFF;
    --surface-hover:     #FDFCFA;
    --surface-well:      #F1EDE4;
    --sidebar-bg:        #14120E;
    --sidebar-active-bg: #2E2A22;

    /* Semantic text */
    --text-primary:  #14120E;
    --text-body:     #2E2A22;
    --text-muted:    #5C5648;
    --text-disabled: #8C8677;
    --text-on-gold:  #14120E;

    /* Gold roles. --gold-fill is the one token identical in both modes:
       that fixed point is what keeps the brand recognisable across the switch. */
    --gold-fill:       var(--gold-400);
    --gold-fill-hover: var(--gold-500);
    --gold-text:       var(--gold-700);
    --gold-badge-bg:   var(--gold-200);
    --gold-badge-text: var(--gold-800);
    --gold-well:       var(--gold-50);

    /* The matrix boards - the payment grid and Banky Cihan - and nothing else.
       A cool blue ramp, specified directly: three surfaces, deliberately only
       three, each a clear step from the last so a row is named at a glance
       rather than compared against its neighbour:

         --row-base    paper, the first user band
         --row-stripe  the second user band
         --row-group   group headings, and with them the board's own furniture:
                       the pinned header and the totals strip, which are
                       structure rather than data and so belong on the structural
                       colour rather than on a fourth tone of their own

       These three are the only blues in the interface - the rest of the app is
       warm ivory and gold, and the boards are meant to stand apart from it.

       --row-hover is not a fourth surface but a state, and it is deliberately
       the one warm colour in the set: a hovered cell has to be unmistakable on
       any of the three, and no further step along a blue ramp could be. Gold on
       blue also puts the cell hover in the same family as the gold the pinned
       name column already takes on hover. */
    --row-base:   #FFFFFF;
    --row-stripe: #D6E4F0;
    --row-group:  #B8CBE0;
    --row-hover:  var(--gold-100);

    /* Rules */
    --border:        #E5E0D5;
    --border-strong: #D4CEC0;

    /* Jewels — status only, never decorative, never branding */
    --success: #1E6F5C;
    --danger:  #9B2C2C;
    --info:    #2A4D8F;
    --pending-bg:   #EFE0C4;
    --pending-text: #4F390A;

    /* Allocation ramp — tonal, not multi-hue, so wallets stay distinguishable
       without ever putting two competing golds in one viewport */
    --series-1: var(--gold-400);
    --series-2: var(--gold-600);
    --series-3: var(--ink-300);
    --series-4: var(--border-strong);
    /* The two Asia Pay channels continue the same tonal series rather than
       introducing hues of their own: one further step down the gold, and one
       further step down the ink. Six wallets still read as one family, and no
       screen ends up with two colours competing for the same attention. */
    --series-5: var(--gold-700);
    --series-6: var(--ink-500);

    /* Geometry */
    --radius-card:    12px;
    --radius-control: 8px;
    --radius-pill:    20px;
    --rule:           0.5px;
    --sidebar-w:      212px;

    /* Type */
    --font-ui:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif:  'Spectral', Georgia, serif;
    --font-num:    'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   2. TOKENS — DARK
   Not a mechanical inversion. Gold moves the opposite way: what is unusable
   for text on white becomes the safest text colour on obsidian.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface-page:      #100E0A;
        --surface-card:      #1B1813;
        --surface-hover:     #24211A;
        --surface-well:      #24211A;
        --sidebar-bg:        #100E0A;
        --sidebar-active-bg: #24211A;

        --text-primary:  #F8F6F1;
        --text-body:     #D9D3C6;
        --text-muted:    #948D7D;
        --text-disabled: #5C5648;

        --gold-text:       var(--gold-200);
        --gold-badge-bg:   var(--gold-800);
        --gold-badge-text: var(--gold-200);
        --gold-well:       #2A2008;

        /* Alternating matrix rows: both bands sit below the hover fill, so a
           striped row and a hovered row never read alike. */
        /* The same three roles carried into the dark theme, on the same blue
           but from the dark end of it. The light values cannot be reused here:
           paper white under light ivory text is unreadable, which is the one
           thing these rows must not become. */
        --row-base:   #131A21;
        --row-stripe: #1E2A35;
        --row-group:  #2C3D4C;
        --row-hover:  #574A26;

        --border:        #322D23;
        --border-strong: #453E30;

        --success: #45B48F;
        --danger:  #E8756F;
        --info:    #7BA3E8;
        --pending-bg:   #2A2008;
        --pending-text: #EBD79B;

        --series-3: #948D7D;
        --series-4: #453E30;
        /* Gold moves the opposite way in the dark theme, so the fifth step is
           the light gold rather than the deep one; the sixth stays an ink tone
           a clear step above --series-4. */
        --series-5: var(--gold-200);
        --series-6: #6E6757;
    }
}

[data-theme="dark"] {
    --surface-page:      #100E0A;
    --surface-card:      #1B1813;
    --surface-hover:     #24211A;
    --surface-well:      #24211A;
    --sidebar-bg:        #100E0A;
    --sidebar-active-bg: #24211A;

    --text-primary:  #F8F6F1;
    --text-body:     #D9D3C6;
    --text-muted:    #948D7D;
    --text-disabled: #5C5648;

    --gold-text:       var(--gold-200);
    --gold-badge-bg:   var(--gold-800);
    --gold-badge-text: var(--gold-200);
    --gold-well:       #2A2008;

    /* Alternating matrix rows: both bands sit below the hover fill, so a
       striped row and a hovered row never read alike. */
    /* The same three roles carried into the dark theme, on the same blue but
       from the dark end of it. The light values cannot be reused here: paper
       white under light ivory text is unreadable, which is the one thing these
       rows must not become. */
    --row-base:   #131A21;
    --row-stripe: #1E2A35;
    --row-group:  #2C3D4C;
    --row-hover:  #574A26;

    --border:        #322D23;
    --border-strong: #453E30;

    --success: #45B48F;
    --danger:  #E8756F;
    --info:    #7BA3E8;
    --pending-bg:   #2A2008;
    --pending-text: #EBD79B;

    --series-3: #948D7D;
    --series-4: #453E30;
    --series-5: var(--gold-200);
    --series-6: #6E6757;
}

/* ==========================================================================
   3. BOOTSTRAP BRIDGE
   Redirects Bootstrap's own variables at the source so every utility class
   already in the markup resolves to an Aurum colour.
   ========================================================================== */

:root {
    --bs-body-bg:         var(--surface-page);
    --bs-body-color:      var(--text-body);
    --bs-body-font-family: var(--font-ui);
    --bs-border-color:    var(--border);
    --bs-border-width:    var(--rule);
    --bs-border-radius:            var(--radius-control);
    --bs-border-radius-sm:         6px;
    --bs-border-radius-lg:         var(--radius-card);
    --bs-border-radius-xl:         var(--radius-card);
    --bs-border-radius-2xl:        var(--radius-card);
    --bs-border-radius-pill:       var(--radius-pill);

    --bs-primary:   #D4AF37;
    --bs-secondary: #5C5648;
    --bs-success:   #1E6F5C;
    --bs-danger:    #9B2C2C;
    --bs-warning:   #A67C12;
    --bs-info:      #2A4D8F;
    --bs-light:     #F8F6F1;
    --bs-dark:      #14120E;

    --bs-primary-rgb:   212, 175, 55;
    --bs-secondary-rgb: 92, 86, 72;
    --bs-success-rgb:   30, 111, 92;
    --bs-danger-rgb:    155, 44, 44;
    --bs-warning-rgb:   166, 124, 18;
    --bs-info-rgb:      42, 77, 143;
    --bs-light-rgb:     248, 246, 241;
    --bs-dark-rgb:      20, 18, 14;

    --bs-emphasis-color:           var(--text-primary);
    --bs-secondary-color:          var(--text-muted);
    --bs-tertiary-color:           var(--text-disabled);
    --bs-secondary-bg:             var(--surface-well);
    --bs-tertiary-bg:              var(--surface-well);
    --bs-heading-color:            var(--text-primary);
    --bs-link-color:               var(--gold-text);
    --bs-link-hover-color:         var(--gold-600);
    --bs-focus-ring-color:         var(--gold-400);
    --bs-box-shadow:               none;
    --bs-box-shadow-sm:            none;
    --bs-box-shadow-lg:            none;
}

/* Subtle contextual pairs, rebuilt on warm neutrals */
:root {
    --bs-primary-bg-subtle:   var(--gold-100);
    --bs-primary-text-emphasis: var(--gold-800);
    --bs-primary-border-subtle: var(--gold-200);
    --bs-success-bg-subtle:   #E4EFEA;
    --bs-success-text-emphasis: #145243;
    --bs-success-border-subtle: #BFD9D0;
    --bs-danger-bg-subtle:    #F5E4E4;
    --bs-danger-text-emphasis: #7A2222;
    --bs-danger-border-subtle: #E2C4C4;
    --bs-warning-bg-subtle:   var(--gold-100);
    --bs-warning-text-emphasis: var(--gold-800);
    --bs-warning-border-subtle: var(--gold-200);
    --bs-info-bg-subtle:      #E3E9F4;
    --bs-info-text-emphasis:  #1F3A6B;
    --bs-info-border-subtle:  #C3CFE6;
    --bs-secondary-bg-subtle: var(--surface-well);
    --bs-secondary-text-emphasis: var(--ink-700);
    --bs-secondary-border-subtle: var(--border);
    --bs-light-bg-subtle:     var(--paper-ivory);
    --bs-dark-bg-subtle:      var(--surface-well);
}

[data-theme="dark"], :root:not([data-theme="light"]) {
    --bs-primary-bg-subtle:     var(--gold-800);
    --bs-primary-text-emphasis: var(--gold-200);
    --bs-primary-border-subtle: #6B4E10;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bs-success-bg-subtle:     #16302A;
        --bs-success-text-emphasis: #45B48F;
        --bs-success-border-subtle: #24493F;
        --bs-danger-bg-subtle:      #351A19;
        --bs-danger-text-emphasis:  #E8756F;
        --bs-danger-border-subtle:  #542A28;
        --bs-warning-bg-subtle:     var(--gold-800);
        --bs-warning-text-emphasis: var(--gold-200);
        --bs-warning-border-subtle: #6B4E10;
        --bs-info-bg-subtle:        #1A253A;
        --bs-info-text-emphasis:    #7BA3E8;
        --bs-info-border-subtle:    #2C3A57;
        --bs-light:                 #24211A;
        --bs-light-rgb:             36, 33, 26;
        --bs-dark:                  #F8F6F1;
        --bs-dark-rgb:              248, 246, 241;
    }
}

[data-theme="dark"] {
    --bs-success-bg-subtle:     #16302A;
    --bs-success-text-emphasis: #45B48F;
    --bs-success-border-subtle: #24493F;
    --bs-danger-bg-subtle:      #351A19;
    --bs-danger-text-emphasis:  #E8756F;
    --bs-danger-border-subtle:  #542A28;
    --bs-warning-bg-subtle:     var(--gold-800);
    --bs-warning-text-emphasis: var(--gold-200);
    --bs-warning-border-subtle: #6B4E10;
    --bs-info-bg-subtle:        #1A253A;
    --bs-info-text-emphasis:    #7BA3E8;
    --bs-info-border-subtle:    #2C3A57;
    --bs-light:                 #24211A;
    --bs-light-rgb:             36, 33, 26;
    --bs-dark:                  #F8F6F1;
    --bs-dark-rgb:              248, 246, 241;
}

/* ==========================================================================
   4. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    background: var(--surface-page);
    color: var(--text-body);
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0;
}

html[dir="rtl"] body { font-family: 'Vazirmatn', var(--font-ui); }

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: -0.01em;
}
h1 { font-size: 26px; }
h2 { font-size: 22px; }
h3 { font-size: 19px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; }

/* Two weights only — bold reads cheap against a gold accent */
.fw-bold, .fw-semibold, .fw-bolder, b, strong, th {
    font-weight: 500 !important;
}

a { color: var(--gold-text); text-decoration: none; }
a:hover { color: var(--gold-600); text-decoration: underline; }

/* Currency figures use tabular lining numerals so columns align */
.font-monospace, .aurum-num, td.text-end, .table td, .table th {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.font-monospace { font-family: var(--font-num) !important; }

/* Sentence case throughout — all-caps in a gold palette tips into hotel signage.
   The one exception is the 11px section label, which is tracked, not shouted. */
.aurum-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: none;
}
.text-uppercase { text-transform: none !important; letter-spacing: 0.06em; }

/* Numbers are the hero */
.aurum-figure {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums lining-nums;
}
.aurum-figure-lg { font-size: 32px; }
.aurum-figure-sm { font-size: 19px; }
.aurum-figure.is-gold { color: var(--gold-text); }

.aurum-serif { font-family: var(--font-serif); font-weight: 400; }

/* Elevation is banished. The focus ring is the only permitted shadow. */
.shadow, .shadow-sm, .shadow-lg, .shadow-xl,
.card, .dropdown-menu, .modal-content, .btn, .form-control, .form-select {
    box-shadow: none !important;
}

/* ==========================================================================
   5. LAYOUT SHELL
   ========================================================================== */

.aurum-shell { display: flex; min-height: 100vh; }

.aurum-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
}

.aurum-main { flex: 1; padding: 18px; }

/* Pages carry their own .container-fluid from the previous layout; the shell
   already owns the gutter, so neutralise the inner one rather than editing
   every page. */
.aurum-main > .container-fluid,
.aurum-main .container-fluid.px-lg-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none;
}

@media (max-width: 991.98px) { .aurum-main { padding: 14px; } }

/* ==========================================================================
   6. SIDEBAR
   212px expanded. Four zones: brand, primary group, secondary group, account.
   ========================================================================== */

.aurum-sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: var(--rule) solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1030;
}

html[dir="rtl"] .aurum-sidebar {
    border-right: 0;
    border-left: var(--rule) solid var(--border);
}

/* --- Brand block --- */
.aurum-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: var(--rule) solid rgba(229, 224, 213, 0.14);
    text-decoration: none;
}
.aurum-brand:hover { text-decoration: none; }

.aurum-mark {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: var(--gold-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-900);
    font-size: 11px;
}

.aurum-wordmark {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--paper-ivory);
    line-height: 1.2;
}
.aurum-brand-sub {
    font-size: 11px;
    color: var(--ink-300);
    letter-spacing: 0.02em;
}

/* --- Groups --- */
.aurum-nav { padding: 14px 0 8px; }
.aurum-nav + .aurum-nav {
    border-top: var(--rule) solid rgba(229, 224, 213, 0.14);
    margin-top: 6px;
}

.aurum-nav-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-300);
    padding: 0 16px 8px;
}

/* --- Item anatomy: 9px 16px padding, 10px gap, 17px icon, 13px label --- */
.nav-item-aurum {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-left: 3px solid transparent;
    border-radius: 0;              /* never round a single-sided border */
    font-size: 13px;
    font-weight: 400;
    color: var(--paper-pearl);
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
html[dir="rtl"] .nav-item-aurum {
    border-left: 0;
    border-right: 3px solid transparent;
}

.nav-item-aurum i {
    font-size: 17px;
    line-height: 1;
    color: var(--ink-300);        /* dimmer than its label, so the rail reads text-first */
    transition: color .12s ease;
}

.nav-item-aurum:hover {
    background: var(--sidebar-active-bg);
    color: var(--paper-ivory);
    text-decoration: none;
}

/* Active: fill AND rule AND both colours change — unmistakable at a glance.
   Hover uses the fill without the rule, keeping the two clearly distinct. */
.nav-item-aurum[aria-current="page"] {
    background: var(--sidebar-active-bg);
    border-left-color: var(--gold-400);
    color: var(--gold-50);
}
html[dir="rtl"] .nav-item-aurum[aria-current="page"] {
    border-left-color: transparent;
    border-right-color: var(--gold-400);
}
.nav-item-aurum[aria-current="page"] i { color: var(--gold-400); }

.nav-item-aurum:focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 2px;
}

.nav-item-aurum.is-disabled {
    color: var(--ink-500);        /* literal colour, never opacity */
    pointer-events: none;
}
.nav-item-aurum.is-disabled i { color: var(--ink-500); }

/* --- Counters: never gold on gold at the same lightness --- */
.aurum-counter {
    margin-left: auto;
    background: var(--gold-badge-bg);
    color: var(--gold-badge-text);
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-pill);
    padding: 1px 7px;
    font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .aurum-counter { margin-left: 0; margin-right: auto; }

/* --- Account footer, pinned --- */
.aurum-account {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: var(--rule) solid rgba(229, 224, 213, 0.14);
}

.aurum-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--sidebar-active-bg);
    border: 1px solid var(--gold-400);
    color: var(--gold-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}

.aurum-account-name { font-size: 12px; color: var(--paper-ivory); line-height: 1.3; }
.aurum-account-tier { font-size: 11px; color: var(--gold-400); letter-spacing: 0.04em; }

.aurum-icon-link {
    margin-left: auto;
    color: var(--ink-300);
    font-size: 15px;
    display: inline-flex;
    padding: 4px;
    border-radius: 6px;
}
html[dir="rtl"] .aurum-icon-link { margin-left: 0; margin-right: auto; }
.aurum-icon-link:hover { color: var(--gold-400); background: var(--sidebar-active-bg); }

/* --- The toggle is always available: it slides the rail over the page on
       mobile, and closes it away entirely on desktop. --- */
.aurum-sidebar-toggle { display: inline-flex; }
.aurum-backdrop { display: none; }

/* --- Desktop: sidebar closes to nothing and gives the page its width --- */
@media (min-width: 992px) {
    .aurum-sidebar {
        transition: width .18s ease, flex-basis .18s ease;
    }
    html.aurum-nav-closed .aurum-sidebar {
        width: 0;
        flex-basis: 0;
        overflow: hidden;
        visibility: hidden;         /* out of the tab order while closed */
        border-right-width: 0;
    }
    html[dir="rtl"].aurum-nav-closed .aurum-sidebar { border-left-width: 0; }
}

@media (max-width: 991.98px) {
    /* Which way the rail is parked off-screen is a property of the writing
       direction, and whether it is open is a property of the state. Both used
       to be written as a transform on the rail itself, and the direction rule
       carried an extra element in its selector - so on an RTL page it outranked
       .is-open and the rail stayed parked no matter how often the button was
       pressed, while the backdrop underneath it opened and closed as normal.
       Direction now only names its side; the state alone owns the transform,
       and the two can no longer outrank each other. */
    html            { --rail-parked: -100%; }
    html[dir="rtl"] { --rail-parked: 100%; }

    .aurum-sidebar {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        inset-inline-end: auto;
        transform: translateX(var(--rail-parked));
        transition: transform .2s ease;
    }
    .aurum-sidebar.is-open { transform: translateX(0); }
    .aurum-sidebar-toggle { display: inline-flex; }
    .aurum-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(20, 18, 14, .5);
        z-index: 1029;
    }
}

/* Last, so it wins over both the desktop and the mobile transition above. */
@media (prefers-reduced-motion: reduce) {
    .aurum-sidebar { transition: none; }
}

/* ==========================================================================
   7. TOP BAR
   ========================================================================== */

.aurum-topbar {
    background: var(--surface-card);
    border-bottom: var(--rule) solid var(--border);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.aurum-greeting { font-size: 15px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.aurum-date { font-size: 12px; color: var(--text-muted); }
.aurum-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
html[dir="rtl"] .aurum-topbar-actions { margin-left: 0; margin-right: auto; }

.aurum-icon-btn {
    width: 30px; height: 30px;
    border: var(--rule) solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-card);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
}
.aurum-icon-btn:hover { background: var(--surface-well); color: var(--text-primary); }

/* ==========================================================================
   7b. STICKY CONTROL BARS
   --------------------------------------------------------------------------
   The boards here are long: twenty-four columns of cells, a hundred rows of
   ledger, a roster of every account. Scrolling to row 80 used to take the tabs,
   the month picker and the group filter off the top of the screen with it, so
   changing what you were looking at meant scrolling back up to find the control
   that changes it.

   These rules pin the controls and let the content run underneath. Three
   decisions are worth stating:

   position: sticky, never fixed. A sticky element keeps its space in the flow,
   so nothing reflows at the moment it pins and the page cannot jump. A fixed one
   is removed from the flow, which is what makes every hand-rolled sticky header
   shift the content by its own height the instant it engages.

   The offset is measured, not guessed. The top bar above is itself sticky and
   its height changes with the viewport - the greeting wraps on a narrow screen.
   --aurum-topbar-h is written by footer.php from the element's real height, so
   a bar pins exactly beneath the top bar rather than under a hardcoded 58px that
   is right on one screen and wrong on the next.

   Opaque backgrounds throughout. Content passing behind a translucent bar is
   unreadable, and these bars are read while the page moves under them.

   Sticky needs an unclipped ancestor: `overflow` other than `visible` on any
   parent turns it back into a normal element. The shell sets none, and the
   .aurum-sticky-host rule below keeps a card from acquiring one.
   ========================================================================== */

:root {
    /* Replaced at runtime with the top bar's measured height. The fallback is
       its natural desktop height, so the bars sit correctly even before the
       script runs - or if it never does. */
    --aurum-topbar-h: 58px;

    /* Breathing room between the top bar and a pinned control bar. */
    --aurum-sticky-gap: 0px;
}

/* A control bar that pins directly beneath the top bar. */
.aurum-sticky {
    position: sticky;
    top: calc(var(--aurum-topbar-h) + var(--aurum-sticky-gap));
    z-index: 1015;                 /* under the top bar (1020), over the content */
    background: var(--surface-card);
}

/* A second bar pinning beneath the first - a filter row under a row of tabs.
   It is given the height of whatever is pinned above it, measured the same way. */
.aurum-sticky-2 {
    position: sticky;
    top: calc(var(--aurum-topbar-h) + var(--aurum-sticky-gap) + var(--aurum-sticky-1-h, 0px));
    z-index: 1014;
    background: var(--surface-card);
}

/* A bare row of tabs has no padding of its own, so pinned it would sit flush
   against the top bar with the content sliding right up to it. This gives it
   the breathing room a card would have brought with it, and the negative side
   margins let its background reach the full page width so nothing shows past
   its edges as it scrolls. */
.aurum-sticky-pad {
    padding: 10px 12px;
    margin-inline: -12px;
}

/* Cards are the usual container for these bars. Bootstrap does not clip a card,
   but rounded corners plus a sticky child invite an `overflow: hidden` to be
   added later - which would silently stop the pinning. Stated explicitly so the
   behaviour cannot be broken from a distance. */
.aurum-sticky-host { overflow: visible !important; }

/* The pinned bar earns its edge only once it is actually pinned, so the page
   looks untouched until scrolling begins. footer.php sets is-pinned. */
.aurum-sticky.is-pinned,
.aurum-sticky-2.is-pinned {
    border-bottom: var(--rule) solid var(--border);
    box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .45);
}

/* A card header that pins keeps its rounded top corners square while pinned,
   so it reads as a bar across the page rather than a card floating mid-scroll. */
.aurum-sticky.is-pinned.card-header,
.aurum-sticky-2.is-pinned.card-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* A jump link lands its target at the very top of the viewport, which is exactly
   where the pinned bars are - so the heading being jumped to arrives underneath
   them. scroll-margin-top reserves that space, so an anchor lands below the bars
   rather than behind them. Applied to anything with an id, because any of them
   may be a link target; it changes nothing until something scrolls there. */
.aurum-main [id] {
    scroll-margin-top: calc(var(--aurum-topbar-h) + var(--aurum-sticky-1-h, 0px) + 16px);
}

/* On a short viewport a pinned bar can eat the whole screen. Below this height
   the controls scroll away with the page, which is better than having no room
   left to read the thing they filter. */
@media (max-height: 520px) {
    .aurum-sticky, .aurum-sticky-2 { position: static; }
    /* The table header is not covered by this: it pins inside its own bounded
       box rather than eating into the viewport, so it costs the reader nothing
       on a short screen and is worth most there. */
}

/* Printing has no viewport to pin to. */
@media print {
    .aurum-sticky, .aurum-sticky-2 { position: static; box-shadow: none; }
}

/* ==========================================================================
   8. CARDS, WELLS, RULES
   ========================================================================== */

.card {
    background: var(--surface-card);
    border: var(--rule) solid var(--border);
    border-radius: var(--radius-card);
}
.card-header {
    background: var(--surface-card);
    border-bottom: var(--rule) solid var(--border);
    padding: 14px 16px;
    color: var(--text-primary);
}
.card-body { padding: 14px 16px; }
.card-footer { background: var(--surface-card); border-top: var(--rule) solid var(--border); }

.aurum-well {
    background: var(--surface-well);
    border: var(--rule) solid var(--border);
    border-radius: var(--radius-control);
    padding: 14px 16px;
}
.aurum-well.is-gold { background: var(--gold-well); border-color: var(--gold-200); }

.aurum-stack > * + * { margin-top: 12px; }

/* Section banner — an ink field carrying one gold accent. No shadow, no
   gradient, no text-shadow. */
.aurum-banner {
    background: var(--ink-900);
    border: var(--rule) solid var(--ink-900);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    color: var(--paper-pearl);
}
/* A banner split into a title block and a controls strip so that only the strip
   pins. The two share one surface, so the seam between them must not read as a
   gap: the title block loses its bottom radius and the strip loses its top one,
   and neither draws a rule where they meet. */
.aurum-banner-title-block {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}
.aurum-banner-controls {
    border-top: 0;
    border-radius: 0;
    padding-top: 8px;
    padding-bottom: 12px;
}
/* Pinned, the strip is the top of the page rather than the middle of a card,
   so it carries a hairline of its own to separate it from what runs beneath. */
.aurum-banner-controls.is-pinned { border-bottom: var(--rule) solid var(--ink-700, #3a2f1c); }

.aurum-banner h1, .aurum-banner h2, .aurum-banner h3,
.aurum-banner h4, .aurum-banner h5, .aurum-banner .h5 { color: var(--paper-ivory); }
.aurum-banner .text-muted,
.aurum-banner .text-white-50 { color: var(--ink-300) !important; }
.aurum-banner strong, .aurum-banner b { color: var(--paper-pearl); }
.aurum-banner a { color: var(--gold-400); }
.aurum-banner .badge.bg-white,
.aurum-banner .badge.bg-light {
    background: var(--sidebar-active-bg) !important;
    color: var(--gold-200) !important;
}

hr, .dropdown-divider {
    border: 0;
    border-top: var(--rule) solid var(--border);
    opacity: 1;
}

/* Allocation bar — tonal ramp, 6px */
.aurum-alloc { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-well); }
.aurum-alloc span { display: block; height: 100%; }
.aurum-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-muted); }
.aurum-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }
html[dir="rtl"] .aurum-legend i { margin-right: 0; margin-left: 5px; }

.aurum-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: 0 0 8px; }

/* ==========================================================================
   PAYMENT CELL STATES
   Empty, Pending, Completed, Cancelled. Gold marks Pending because that is
   the one state asking for the administrator's attention — which is exactly
   what gold is reserved for.
   ========================================================================== */

.cell-badge-empty {
    background: var(--surface-well) !important;
    color: var(--text-muted) !important;
}
.cell-badge-pending {
    background: var(--gold-badge-bg) !important;
    color: var(--gold-badge-text) !important;
}
.cell-badge-completed {
    background: var(--success) !important;
    color: var(--paper-ivory) !important;
}
.cell-badge-cancelled {
    background: var(--danger) !important;
    color: var(--paper-ivory) !important;
}
[data-theme="dark"] .cell-badge-completed,
[data-theme="dark"] .cell-badge-cancelled { color: var(--ink-900) !important; }

/* Identified-cell timestamp: the clock time carries the weight, the date
   trails behind it quietly. */
.cell-time {
    font-weight: 500;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums lining-nums;
}
.cell-date {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 6px;
    font-variant-numeric: tabular-nums lining-nums;
}
html[dir="rtl"] .cell-date { margin-left: 0; margin-right: 6px; }

/* Matrix grid states */
/* ==========================================================================
   MATRIX GRID
   Shared by the Daily Payment Matrix and the Banky Cihan cell board: both
   are the same object - users down, cells across - so they are the same
   CSS rather than two drifting copies.
   ========================================================================== */
/* Bootstrap paints every cell in a .table transparent, at a weight no lone
   class here can beat - so the table's own background is what actually shows
   through the group heading rows and the totals strip, and it has to be the
   structural colour rather than the card. Card here would have landed between
   the two user bands in light mode and among them in dark. */
.matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--row-group);
    border: var(--rule) solid var(--border);
    font-size: 12px;
}

/* Category super-headers — distinguished by a 3px top rule from the
   allocation ramp, not by four competing background colours. */
.matrix-cat-head-alipay,
.matrix-cat-head-switch,
.matrix-cat-head-zain,
.matrix-cat-head-cihan,
.matrix-cat-head-wechat,
.matrix-cat-head-mastercard {
    background: var(--surface-well);
    color: var(--text-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .04em;
    text-align: center;
    padding: 9px 0;
    border: var(--rule) solid var(--border);
}
/* Each band is named by its place in the allocation ramp, so a payment type
   carries the same tone here as it does in every wallet chart. */
.matrix-cat-head-alipay     { border-top: 3px solid var(--series-1); }
.matrix-cat-head-switch     { border-top: 3px solid var(--series-2); }
.matrix-cat-head-zain       { border-top: 3px solid var(--series-4); }
.matrix-cat-head-cihan      { border-top: 3px solid var(--series-3); }
.matrix-cat-head-wechat     { border-top: 3px solid var(--series-5); }
.matrix-cat-head-mastercard { border-top: 3px solid var(--series-6); }

.matrix-th-user {
    background: var(--surface-well);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .06em;
    border: var(--rule) solid var(--border);
    vertical-align: middle;
}

.matrix-th-grand-total {
    background: var(--ink-900);
    color: var(--gold-400);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .06em;
    border: var(--rule) solid var(--ink-900);
    vertical-align: middle;
}

.matrix-subth-cell {
    background: var(--surface-well);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
    border: var(--rule) solid var(--border);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   The matrix header pins to the top of its own scroll box.

   The grid sits in a .table-responsive with a max-height, so it scrolls inside
   itself rather than with the page. Scrolling to row 60 used to take the
   "Alipay | Switch | Zain Cash" band and the cell numbers off the top of that
   box, leaving twenty-four identical columns with nothing to say which was
   which. Pinning them inside the box is what keeps a cell readable.

   Two rows, so two offsets: the category band sits at 0, and the cell-number
   row directly beneath it, at the band's own height. That height was written
   here as 34px, which was right until the band wrapped - footer.php now measures
   it and publishes --matrix-head-1-h, with the old number as the fallback for
   before the script runs.

   The box's height is the other half of this. It was capped at a flat 800px,
   which is taller than the viewport on most laptops: the box never scrolled
   internally, the page scrolled instead, and the pinned header sailed off the
   top of the screen along with the box it was pinned inside. Capping it against
   the viewport instead - minus the top bar and the control bar above it - means
   the rows scroll within a box that is on screen, which is the whole point.

   The name column already pins horizontally (.matrix-user-name-td). Where the
   two meet - the top-left cell, which is both - it needs a higher z-index than
   either, or it is painted under whichever scrolls past second.
   -------------------------------------------------------------------------- */
/* As with the roster: a starting point, replaced by footer.php with the room
   actually beneath the box. */
.matrix-scroll {
    max-height: max(320px, calc(100vh - 300px));
}

/* dvh where it exists: on mobile the browser chrome eats into 100vh and the
   bottom of the box ends up under it. */
@supports (height: 100dvh) {
    .matrix-scroll { max-height: max(320px, calc(100dvh - 300px)); }
}

.matrix-table thead th {
    position: sticky;
    z-index: 3;
}
.matrix-table thead tr:first-child th { top: 0; }
.matrix-table thead tr:nth-child(2) th { top: var(--matrix-head-1-h, 34px); }

/* The user column's header is sticky in both directions at once. */
.matrix-table thead th.matrix-th-user {
    left: 0;
    z-index: 5;
}
html[dir="rtl"] .matrix-table thead th.matrix-th-user { left: auto; right: 0; }

/* A sticky cell paints over the rows beneath it, so a transparent one would
   show them through. Every header here carries its own background already;
   this guards the borders, which collapse away under a sticky cell. */
.matrix-table thead th { background-clip: padding-box; }

/* The header is chrome like the totals strip, and rows travel under it - so it
   takes the structural fill, clear of both user bands. Stated with both classes
   because the generic `.table > thead th` further down the file already outranks
   the individual header classes here; that weight is what the header's colour
   has always actually come from, so this is where it has to be said - and it is
   said for the whole header, which is how the header already renders today.

   The text comes with it. `.table > thead th` also sets the header's colour, to
   --text-muted, which was legible on the pale chrome this used to be and is not
   on the deeper structural colour. --text-body on this fill clears 6:1. */
.matrix-table.table > thead > tr > th {
    background: var(--row-group);
    color: var(--text-body);
}

.matrix-group-td {
    font-weight: 500;
    font-size: 12px;
    border-top: var(--rule) solid var(--border-strong);
    border-bottom: var(--rule) solid var(--border);
    text-align: left;
}

/* The group heading's own colour, third and separate from the two user bands.
   Written against `.matrix-table > tbody > tr >` for the same reason the name
   column below is: Bootstrap paints every cell in a .table through
   `.table > :not(caption) > * > *`, which outranks a lone class - so a fill
   declared on .matrix-group-td alone never reaches the screen, and the heading
   comes out as whatever is behind it. At this weight it does. */
.matrix-table > tbody > tr > .matrix-group-td {
    background: var(--row-group);
    color: var(--text-primary);
}

/* The name column is the row's anchor, so it carries a filled background and a
   strong right edge. Paper here let the names dissolve into the 24 cells they
   are meant to label, especially once the grid is scrolled sideways. */
.matrix-user-name-td {
    background: var(--row-bg, var(--surface-well));
    color: var(--text-primary);
    font-weight: 600;
    border: var(--rule) solid var(--border);
    border-right: 2px solid var(--border-strong);
    position: sticky;
    left: 0;
    z-index: 2;
}
.matrix-user-name-td:hover { background: var(--gold-well); }
html[dir="rtl"] .matrix-user-name-td {
    left: auto;
    right: 0;
    border-right: var(--rule) solid var(--border);
    border-left: 2px solid var(--border-strong);
}

/* --------------------------------------------------------------------------
   Alternating user rows.

   Twenty-four near-identical cells in a row is a place to lose your line, and
   the eye recovers it from banding faster than from any border. Two tints, one
   step apart on the paper ramp, applied to every other user.

   Carried as variables on the row rather than as a background on the cells.
   The cells already choose their own fills - gold for a filled cell, a deeper
   well for the name and total columns - and a stripe painted over the top would
   erase exactly the states the banding is supposed to sit behind. Handing the
   row's tint down as a variable lets each cell keep deciding: a plain cell
   takes the stripe, a filled one stays gold, and hover still wins over both
   because those rules are untouched.

   Which row is which is decided in PHP, counting user rows only - the group
   divider rows in between must not consume a turn, or the banding restarts
   mid-table. That also keeps it right through search, filtering and paging,
   since the count is taken over whatever the page actually renders.
   -------------------------------------------------------------------------- */
.matrix-table tbody tr { --row-bg: var(--row-base); }
.matrix-table tbody tr.aurum-row-b { --row-bg: var(--row-stripe); }

.matrix-table tbody tr.aurum-row-a,
.matrix-table tbody tr.aurum-row-b {
    background: var(--row-bg);
}

/* The name column is pinned to the edge of the scroll box, and the cells of a
   sideways-scrolled row travel underneath it. Bootstrap paints every table cell
   through `.table > :not(caption) > * > *`, which outranks a lone class - so
   this column has been transparent all along, and the figures sliding beneath
   it would show through the names. Stated at a weight that actually wins, and
   in the row's own colour, so the row still reads as one band of one colour.
   The hover is raised in step, or this rule would silence it. */
.matrix-table > tbody > tr > .matrix-user-name-td {
    background: var(--row-bg, var(--row-base));
}
.matrix-table > tbody > tr > .matrix-user-name-td:hover {
    background: var(--gold-well);
}

/* A filled cell is marked by a warm gold well, an empty one stays paper */
.matrix-cell-active {
    background: var(--gold-well);
    color: var(--gold-text);
    font-weight: 500;
    border: var(--rule) solid var(--gold-200);
    font-variant-numeric: tabular-nums lining-nums;
}

.matrix-cell-empty {
    background: var(--row-bg, var(--row-base));
    color: var(--text-disabled);
    border: var(--rule) solid var(--border);
}

/* Hover has to beat all three surfaces, not just one. Any further step along
   the paper ramp would land on one of them - which is why --row-hover leaves the
   ramp and goes gold, in the family the pinned name column already hovers to. */
.matrix-cell-active:hover, .matrix-cell-empty:hover {
    background: var(--row-hover);
    color: var(--text-primary);
    outline: 1px solid var(--gold-400);
    outline-offset: -1px;
}

.matrix-user-grand-total {
    background: var(--row-bg, var(--surface-well));
    color: var(--text-primary);
    font-weight: 500;
    border: var(--rule) solid var(--border);
    font-variant-numeric: tabular-nums lining-nums;
}

.matrix-footer-label-th {
    background: var(--row-group);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .06em;
    border: var(--rule) solid var(--border);
}

.matrix-footer-day-th {
    background: var(--row-group);
    color: var(--text-body);
    font-weight: 400;
    border: var(--rule) solid var(--border);
    font-variant-numeric: tabular-nums;
}

.matrix-footer-grand-total-th {
    background: var(--ink-900);
    color: var(--gold-400);
    font-weight: 500;
    font-size: 13px;
    border: var(--rule) solid var(--ink-900);
    font-variant-numeric: tabular-nums lining-nums;
}


.matrix-cell-pending {
    background: var(--gold-well);
    color: var(--gold-text);
    font-weight: 500;
    border: var(--rule) solid var(--gold-300);
    border-left: 3px solid var(--gold-400);
    font-size: 15px;
    line-height: 1;
}
.matrix-cell-pending:hover {
    background: var(--gold-100);
    color: var(--gold-800);
}

/* Wallet chip — neutral by design, identified by its ramp dot, not by a fill */
.wallet-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-body);
    background: var(--surface-card);
    border: var(--rule) solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    white-space: nowrap;
}

/* ==========================================================================
   9. BUTTONS
   One primary action per view. Everything else is bordered or ghost.
   ========================================================================== */

.btn {
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-control);
    border-width: var(--rule);
    padding: 7px 14px;
    letter-spacing: 0;
}
.btn-sm { font-size: 12px; padding: 5px 10px; }
.btn-lg { font-size: 14px; padding: 9px 18px; }

/* The primary button inverts between modes: a dark button on a dark page
   disappears, so the accent must be the lightest element in exactly one place. */
.btn-primary,
.btn-primary-gradient,
.btn-success,
.btn-dark {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: var(--gold-200);
}
.btn-primary:hover, .btn-primary-gradient:hover, .btn-success:hover, .btn-dark:hover,
.btn-primary:focus, .btn-success:focus, .btn-dark:focus {
    background: var(--ink-700);
    border-color: var(--ink-700);
    color: var(--gold-100);
}

[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-primary-gradient,
[data-theme="dark"] .btn-success, [data-theme="dark"] .btn-dark {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--ink-900);
}
[data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-success:hover,
[data-theme="dark"] .btn-dark:hover {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--ink-900);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-primary,
    :root:not([data-theme="light"]) .btn-primary-gradient,
    :root:not([data-theme="light"]) .btn-success,
    :root:not([data-theme="light"]) .btn-dark {
        background: var(--gold-400);
        border-color: var(--gold-400);
        color: var(--ink-900);
    }
    :root:not([data-theme="light"]) .btn-primary:hover,
    :root:not([data-theme="light"]) .btn-success:hover,
    :root:not([data-theme="light"]) .btn-dark:hover {
        background: var(--gold-500);
        border-color: var(--gold-500);
        color: var(--ink-900);
    }
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark,
.btn-outline-info, .btn-outline-warning, .btn-outline-success, .btn-light {
    background: var(--surface-card);
    border-color: var(--border-strong);
    color: var(--text-body);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover,
.btn-outline-info:hover, .btn-outline-warning:hover, .btn-outline-success:hover, .btn-light:hover {
    background: var(--surface-well);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--paper-ivory);
}
[data-theme="dark"] .btn-danger { color: var(--ink-900); }

.btn-outline-danger {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--danger);
}
.btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--paper-ivory); }
[data-theme="dark"] .btn-outline-danger:hover { color: var(--ink-900); }

.btn-warning {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--ink-900);
}
.btn-warning:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); }

.btn-link { color: var(--gold-text); }

.btn:focus-visible, .btn:focus {
    outline: 2px solid var(--gold-400);
    outline-offset: 2px;
    box-shadow: none !important;
}

.btn:disabled, .btn.disabled {
    opacity: 1;                    /* never opacity for disabled */
    background: var(--surface-well);
    border-color: var(--border);
    color: var(--text-disabled);
}

/* ==========================================================================
   10. BADGES & PILLS
   ========================================================================== */

.badge {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: var(--radius-pill);
    padding: 2px 8px;
}

.badge.bg-primary, .badge.bg-warning { background: var(--gold-badge-bg) !important; color: var(--gold-badge-text) !important; }
.badge.bg-dark   { background: var(--ink-900) !important; color: var(--gold-200) !important; }
.badge.bg-secondary { background: var(--surface-well) !important; color: var(--text-body) !important; }
.badge.bg-success { background: var(--success) !important; color: var(--paper-ivory) !important; }
.badge.bg-danger  { background: var(--danger) !important; color: var(--paper-ivory) !important; }
.badge.bg-info    { background: var(--info) !important; color: var(--paper-ivory) !important; }
.badge.bg-light, .badge.bg-white { background: var(--surface-well) !important; color: var(--text-body) !important; }

[data-theme="dark"] .badge.bg-dark { background: var(--gold-400) !important; color: var(--ink-900) !important; }
[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .badge.bg-danger,
[data-theme="dark"] .badge.bg-info { color: var(--ink-900) !important; }

.aurum-pending {
    background: var(--pending-bg);
    color: var(--pending-text);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
}

/* ==========================================================================
   11. TABLES — hairline separated, no card per row
   ========================================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-body);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--surface-hover);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-striped-bg: var(--surface-hover);
    font-size: 13px;
    margin-bottom: 0;
}

.table > thead th,
.table > thead > tr > th {
    background: var(--surface-well);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    border-bottom: var(--rule) solid var(--border);
    padding: 9px 12px;
    white-space: nowrap;
}

.table > tbody > tr > td { padding: 10px 12px; border-top: var(--rule) solid var(--border); border-bottom: 0; vertical-align: middle; }
.table > tbody > tr:first-child > td { border-top: 0; }

.table-dark, .table-dark > thead th, thead.table-dark th {
    background: var(--surface-well) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}
.table-light, .table-light > tr > th, tfoot.table-light > tr > td, tfoot.table-light > tr > th {
    background: var(--surface-well) !important;
    color: var(--text-body) !important;
}
.table-secondary, .table-secondary > td, .table-secondary > th {
    background: var(--surface-well) !important;
    color: var(--text-muted) !important;
}

.table tfoot td, .table tfoot th {
    border-top: var(--rule) solid var(--border-strong);
    background: var(--surface-well);
    color: var(--text-primary);
    padding: 10px 12px;
}

/* ==========================================================================
   12. FORMS
   ========================================================================== */

.form-control, .form-select {
    background: var(--surface-card);
    border: var(--rule) solid var(--border-strong);
    border-radius: var(--radius-control);
    color: var(--text-body);
    font-size: 13px;
    padding: 7px 10px;
}
.form-control-lg, .form-select-lg { font-size: 14px; padding: 9px 12px; }
.form-control-sm, .form-select-sm { font-size: 12px; padding: 5px 8px; }

.form-control:focus, .form-select:focus {
    background: var(--surface-card);
    border-color: var(--gold-400);
    color: var(--text-body);
    outline: 2px solid var(--gold-400);
    outline-offset: 2px;
    box-shadow: none;
}
.form-control::placeholder { color: var(--text-disabled); }
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background: var(--surface-well);
    color: var(--text-muted);
    opacity: 1;
}

.form-label { font-size: 12px; font-weight: 500; color: var(--text-body); margin-bottom: 5px; }
.form-text  { font-size: 11px; color: var(--text-muted); }

.input-group-text {
    background: var(--surface-well);
    border: var(--rule) solid var(--border-strong);
    color: var(--text-muted);
    font-size: 13px;
}

.is-invalid, .form-control.is-invalid { border-color: var(--danger); }

/* ==========================================================================
   13. ALERTS, MODALS, DROPDOWNS
   ========================================================================== */

.alert {
    border: var(--rule) solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-card);
    color: var(--text-body);
    font-size: 13px;
    padding: 12px 14px;
}
.alert-success { border-left: 3px solid var(--success); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.alert-danger  { border-left: 3px solid var(--danger);  border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.alert-warning { border-left: 3px solid var(--gold-400); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.alert-info    { border-left: 3px solid var(--info);    border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.alert-light   { background: var(--surface-well); }

html[dir="rtl"] .alert-success, html[dir="rtl"] .alert-danger,
html[dir="rtl"] .alert-warning, html[dir="rtl"] .alert-info {
    border-left: var(--rule) solid var(--border);
    border-radius: var(--radius-control) 0 0 var(--radius-control);
}
html[dir="rtl"] .alert-success { border-right: 3px solid var(--success); }
html[dir="rtl"] .alert-danger  { border-right: 3px solid var(--danger); }
html[dir="rtl"] .alert-warning { border-right: 3px solid var(--gold-400); }
html[dir="rtl"] .alert-info    { border-right: 3px solid var(--info); }

.modal-content {
    background: var(--surface-card);
    border: var(--rule) solid var(--border);
    border-radius: var(--radius-card);
}
.modal-header, .modal-footer { border-color: var(--border); padding: 14px 16px; }
.modal-title { font-size: 15px; font-weight: 500; color: var(--text-primary); }
.modal-body { padding: 16px; }
.modal-backdrop.show { background: var(--ink-900); opacity: .5; }

.dropdown-menu {
    background: var(--surface-card);
    border: var(--rule) solid var(--border);
    border-radius: var(--radius-control);
    font-size: 13px;
    padding: 4px;
}
.dropdown-item { color: var(--text-body); border-radius: 6px; padding: 7px 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-well); color: var(--text-primary); }
.dropdown-item.active, .dropdown-item:active { background: var(--gold-badge-bg); color: var(--gold-badge-text); }

.btn-close { filter: none; opacity: .5; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }

/* ==========================================================================
   14. STATUS COLOUR HELPERS
   Colour never carries meaning alone — pair these with an icon or a word.
   ========================================================================== */

.text-success, .text-emerald { color: var(--success) !important; }
.text-danger,  .text-ruby    { color: var(--danger)  !important; }
.text-info,    .text-sapphire{ color: var(--info)    !important; }
.text-primary  { color: var(--gold-text) !important; }
.text-warning  { color: var(--gold-text) !important; }
.text-muted, .text-secondary { color: var(--text-muted) !important; }
.text-dark     { color: var(--text-primary) !important; }
.text-white, .text-light { color: var(--paper-ivory) !important; }
.text-gold     { color: var(--gold-text) !important; }

.bg-white, .bg-body, .bg-body-tertiary { background: var(--surface-card) !important; }
.bg-light  { background: var(--surface-well) !important; }
.bg-dark   { background: var(--ink-900) !important; }
.bg-primary, .bg-warning { background: var(--gold-400) !important; color: var(--ink-900) !important; }
.bg-success { background: var(--success) !important; }
.bg-danger  { background: var(--danger)  !important; }
.bg-info    { background: var(--info)    !important; }
.bg-secondary { background: var(--surface-well) !important; color: var(--text-body) !important; }

.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--border) !important;
    border-width: var(--rule) !important;
}

/* ==========================================================================
   15. LEGACY CLASS BRIDGE
   Class names inherited from the previous theme, remapped onto Aurum so the
   existing markup keeps working without a page-by-page rename.
   ========================================================================== */

.btn-gold {
    background: var(--ink-900);
    border: var(--rule) solid var(--ink-900);
    color: var(--gold-200);
}
.btn-gold:hover { background: var(--ink-700); border-color: var(--ink-700); color: var(--gold-100); }

[data-theme="dark"] .btn-gold { background: var(--gold-400); border-color: var(--gold-400); color: var(--ink-900); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-gold {
        background: var(--gold-400); border-color: var(--gold-400); color: var(--ink-900);
    }
}

.stat-icon-wrapper {
    width: 34px; height: 34px;
    border-radius: var(--radius-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-well) !important;
    color: var(--text-muted) !important;
    font-size: 15px;
}

/* The roster is wider than the content area - a name, a phone, four wallets, a
   total, a date, a status and the row actions come to something like 1300px
   before they are readable, which is wider than any ordinary laptop. Letting
   that overflow the card rather than scroll inside it drags the whole page
   sideways.

   Sideways only. No height cap and no vertical scroll of its own: the page
   scrolls normally downwards and the header travels up with the rows, the way
   an ordinary table does. */
.table-custom-wrapper { overflow-x: auto; }
.table-custom { width: 100%; }

/* The group heading, now a row spanning the roster rather than a card wrapped
   around it - which is what lets one header pin for the whole list instead of
   one per group scrolling away with its card.

   Written against `.table-custom > tbody > tr >` because Bootstrap paints every
   cell through `.table > :not(caption) > * > *`, which outranks a lone class; a
   heading that loses that contest comes out as unfilled as the rows it is meant
   to separate. */
.table-custom > tbody > tr > .roster-group-td {
    background: var(--surface-well);
    color: var(--text-primary);
    border-top: var(--rule) solid var(--border-strong);
    border-bottom: var(--rule) solid var(--border);
}

/* The first heading sits directly under the pinned header, where a second top
   rule would read as a double line. */
.table-custom > tbody > tr:first-child > .roster-group-td { border-top: 0; }

/* Printing has no viewport to bound it to, and a clipped grid prints as a
   clipped grid - one screenful of rows and the rest silently missing.
   !important because footer.php sets that height as an inline style, which an
   ordinary rule cannot outrank. */
@media print {
    .matrix-scroll {
        overflow: visible !important;
        max-height: none !important;
    }
}

/* Row actions scroll with the rest of the table. They were pinned to the right
   edge, but a pinned cell paints over whatever slides beneath it: on a sideways
   scroll the buttons floated across the status and balance columns and hid the
   data they sat on. An ordinary last column never covers another one — scroll
   right to reach it. */
.col-actions {
    background: var(--surface-card);
    border-left: var(--rule) solid var(--border) !important;
    white-space: nowrap;
}
thead .col-actions { background: var(--surface-well); }
.table-hover tbody tr:hover .col-actions { background: var(--surface-hover); }

html[dir="rtl"] .col-actions {
    border-left: 0 !important;
    border-right: var(--rule) solid var(--border) !important;
}

.locked-banner {
    border-left: 3px solid var(--danger);
    background: var(--surface-well);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    padding: 12px 14px;
}
html[dir="rtl"] .locked-banner {
    border-left: 0;
    border-right: 3px solid var(--danger);
    border-radius: var(--radius-control) 0 0 var(--radius-control);
}

.text-indigo, .bg-indigo { color: var(--gold-text) !important; }
.bg-indigo { background: var(--surface-well) !important; }

/* Bootstrap's opacity helpers would breach the "no opacity" rule on dark */
.bg-opacity-10, .bg-opacity-20, .bg-opacity-25, .bg-opacity-50 { --bs-bg-opacity: 1; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.aurum-footer {
    border-top: var(--rule) solid var(--border);
    background: var(--surface-card);
    color: var(--text-muted);
    font-size: 11px;
    padding: 12px 18px;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   17. PRINT — receipts stay on paper stock
   ========================================================================== */

@media print {
    .aurum-sidebar, .aurum-topbar, .aurum-footer, .btn, .no-print { display: none !important; }
    body { background: #FFFFFF; color: #14120E; }
    .aurum-main { padding: 0; }
}