/* =============================================================================
   SANAD skin v2 — shared tokens (client-owned layer, rule UI-1)
   Approved mock 2026-11-02: restrained accounting-software look.
   Neutral greys + 1px borders carry the UI; navy = navigation + primary action;
   gold = thin accent only (active marker, tab underline). One sans, small radii.
   Loaded after every upstream stylesheet. Visual only: no ids/classes renamed.
   ============================================================================= */

:root {
    /* Brand */
    --sk-navy:      #072750;
    --sk-navy-ink:  #041A36;
    --sk-navy-rgb:  7, 39, 80;
    --sk-gold:      #CFA768;
    --sk-nav-text:  #C9D3E1;   /* sidebar text on navy (9.6:1) */
    --sk-nav-muted: #8494AB;   /* sidebar section labels (4.9:1 on navy) */

    /* Neutrals */
    --sk-bg:        #F5F6F8;
    --sk-surface:   #FFFFFF;
    --sk-subtle:    #F9FAFB;   /* table head, footers */
    --sk-hover:     #F7F9FC;
    --sk-line:      #E3E6EA;
    --sk-line-2:    #EEF0F3;
    --sk-line-3:    #CDD2D9;   /* input hover / stronger rule */
    --sk-text:      #1B2430;
    --sk-text-2:    #4A5462;
    --sk-muted:     #6B7480;   /* 4.8:1 on white */

    /* Semantic — one colour per state, tinted badge backgrounds */
    --sk-ok:   #1F7A4D;  --sk-ok-bg:   #E8F3EC;
    --sk-warn: #8A5A00;  --sk-warn-bg: #FBF1DC;
    --sk-err:  #B42318;  --sk-err-bg:  #FDECEA;
    --sk-info: #1D4F91;  --sk-info-bg: #E8EFF8;
    --sk-neu:  #4A5462;  --sk-neu-bg:  #EEF0F3;
    --sk-focus: #2E6BC6;

    /* Type */
    --sk-font: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sk-font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
    --sk-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    /* Shape — 8px spacing scale, small radii, no shadows */
    --sk-r: 4px;
    --sk-r-lg: 6px;
    --sk-pop: 0 8px 24px rgba(16, 24, 40, .12);   /* menus/modals only */

    /* Re-point upstream brand tokens at Sanad (works before Admin → Settings is filled) */
    --brand: var(--sk-navy); --brand-dark: var(--sk-navy-ink); --brand-accent: var(--sk-gold);
    --brand-rgb: var(--sk-navy-rgb); --brand-on: #fff; --brand-accent-on: var(--sk-navy-ink);
    --bs-primary: var(--sk-navy); --bs-primary-rgb: var(--sk-navy-rgb);
    --bs-link-color: var(--sk-navy); --bs-link-color-rgb: var(--sk-navy-rgb); --bs-link-hover-color: var(--sk-navy-ink);
    --bs-body-font-family: var(--sk-font);
    --bs-body-font-size: 14px;
    --bs-body-color: var(--sk-text);
    --bs-body-bg: var(--sk-bg);
    --bs-border-color: var(--sk-line);
    --bs-border-radius: var(--sk-r); --bs-border-radius-sm: var(--sk-r); --bs-border-radius-lg: var(--sk-r-lg);
    --bs-focus-ring-color: rgba(46, 107, 198, .35);
}

html[lang^="ar"], [dir="rtl"], [direction="rtl"] { --sk-font: var(--sk-font-ar); }

body { font-family: var(--sk-font); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--sk-font); letter-spacing: 0; }

/* Amounts line up */
.table td, .table th, .stat-value, .num, .amount, .money, td.text-end, th.text-end { font-variant-numeric: tabular-nums; }
code, kbd, samp { font-family: var(--sk-mono); }

::selection { background: rgba(var(--sk-navy-rgb), .15); }

/* Visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--sk-focus) !important; outline-offset: 1px !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}