/* =============================================================================
   PRECISION LEDGER — ERP Cloud 365 design system
   -----------------------------------------------------------------------------
   Single authoritative theme layer. Loaded LAST so it wins over style.css,
   app-pro.css, saas-premium.css and premium-overrides.css.

   Strategy: the whole app is token-driven (CSS custom properties spread across
   the four base stylesheets). We re-map every token here — for BOTH the light
   default (:root) and the dark theme ([data-theme="dark"]) — so all pages
   re-skin at once with zero markup / JS changes. A small set of component
   refinements follows, targeting the real class names, to match the Figma
   "Precision Ledger" spec (sidebar, appbar, tables, buttons, inputs, cards,
   chips). Where the base layers use `!important` we match it; everywhere else
   the cascade (load order) is enough.

   Source of truth: Design/stitch_erpcloud365_ui_ux_redesign/precision_ledger/
   DESIGN.md  +  the per-screen code.html mockups.
   ========================================================================== */

/* JetBrains Mono for ledger figures (Inter is already loaded by index.php). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS — LIGHT  (the "Precision Ledger" default)
   -------------------------------------------------------------------------- */
:root {
    /* Brand — deep-navy gravitas + vibrant indigo for actions ---------------- */
    --pl-navy:        #161b2b;   /* primary-container — sidebar / dark surfaces  */
    --pl-navy-2:      #1f2538;
    --pl-indigo:      #4b41e1;   /* secondary — primary action colour            */
    --pl-indigo-2:    #645efb;   /* secondary-container — hover / active tint    */
    --pl-blue:        #3b82f6;   /* vibrant-blue — focus rings, active rail      */
    --pl-emerald:     #10b981;   /* credits / positive                           */
    --pl-crimson:     #ef4444;   /* debits / errors                              */

    /* Map every brand alias used by the base layers ------------------------- */
    --brand-1:        var(--pl-indigo);
    --brand-2:        #3a31c9;             /* darker indigo — gradient end       */
    --brand-3:        var(--pl-blue);
    --brand-grad:     linear-gradient(135deg, #4b41e1 0%, #3a31c9 100%);
    --brand-gradient: var(--brand-grad);
    --accent:         var(--pl-indigo);
    --accent-soft:    rgba(75, 65, 225, 0.08);
    --focus-ring:     var(--pl-blue);

    /* Surfaces — off-white workspace, white containers ---------------------- */
    --bg:           #f9fafb;   /* surface-muted — the fluid canvas              */
    --background:   #f9fafb;
    --bg-elevated:  #ffffff;
    --bg-soft:      #f3f4f6;
    --surface:      #ffffff;
    --surface-1:    #ffffff;
    --surface-2:    #f3f4f6;
    --surface-3:    #e5e7eb;
    --surface-glass: #ffffff;

    /* Hairlines — low-contrast tonal outlines, not shadows ------------------ */
    --hairline:        #e7e5ea;
    --hairline-strong: #d6d4da;

    /* Text — high-contrast neutral ramp ------------------------------------- */
    --fg:        #1c1b1d;
    --fg-muted:  #46464c;
    --fg-faint:  #76767d;
    --text-main:  #1c1b1d;
    --text-muted: #46464c;
    --text-faint: #76767d;

    /* Semantic -------------------------------------------------------------- */
    --success:      #10b981;
    --success-soft: rgba(16, 185, 129, 0.12);
    --danger:       #ef4444;
    --danger-soft:  rgba(239, 68, 68, 0.12);
    --warning:      #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.14);
    --info:         #3b82f6;
    --info-soft:    rgba(59, 130, 246, 0.12);

    /* Shape — soft, max 8px ------------------------------------------------- */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 8px;

    /* Elevation — flat / tonal; popovers get a whisper of shadow ------------ */
    --shadow-sm:      0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow:         0 4px 12px rgba(16, 24, 40, 0.05);
    --shadow-lg:      0 4px 12px rgba(16, 24, 40, 0.06);
    --shadow-soft:    0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md:      0 4px 12px rgba(16, 24, 40, 0.05);
    --shadow-premium: 0 1px 2px rgba(16, 24, 40, 0.04);
    --card-shadow-premium: 0 1px 2px rgba(16, 24, 40, 0.04);
    --card-shadow-hover:   0 4px 12px rgba(16, 24, 40, 0.06);
    --btn-shadow:        none;
    --btn-shadow-hover:  0 2px 8px rgba(75, 65, 225, 0.22);

    /* Layout ---------------------------------------------------------------- */
    --sidebar-width: 260px;
    --header-height: 68px;

    /* Header chrome --------------------------------------------------------- */
    --header-bg:     #ffffff;
    --header-fg:     #1c1b1d;
    --header-muted:  #46464c;
    --header-border: #e7e5ea;

    /* Sidebar aliases (style.css token names) ------------------------------- */
    --sidebar-bg:     #161b2b;
    --sidebar-fg:     #c1c5dc;
    --sidebar-muted:  #7f8398;
    --sidebar-faint:  #5c6075;
    --sidebar-border: rgba(255, 255, 255, 0.07);
    --sidebar-active: rgba(75, 65, 225, 0.20);

    /* Typography ------------------------------------------------------------ */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -----------------------------------------------------------------------------
   2. DESIGN TOKENS — DARK  (professional accounting: deep navy / charcoal)
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    --bg:           #0e1118;
    --background:   #0e1118;
    --bg-elevated:  #161b2b;
    --bg-soft:      #11151f;
    --surface:      #161b2b;
    --surface-1:    #161b2b;
    --surface-2:    #1f2538;
    --surface-3:    #2a3147;
    --surface-glass: #161b2b;

    --hairline:        rgba(255, 255, 255, 0.07);
    --hairline-strong: rgba(255, 255, 255, 0.14);

    --fg:        #e6e3e8;
    --fg-muted:  #a7abba;
    --fg-faint:  #767b8c;
    --text-main:  #e6e3e8;
    --text-muted: #a7abba;
    --text-faint: #767b8c;

    --brand-1:   #7c74f2;     /* lift indigo for contrast on dark */
    --brand-2:   #5d54e8;
    --accent:    #7c74f2;
    --accent-soft: rgba(124, 116, 242, 0.18);
    --brand-grad: linear-gradient(135deg, #6d64ef 0%, #524bd6 100%);
    --brand-gradient: var(--brand-grad);

    --success-soft: rgba(16, 185, 129, 0.18);
    --danger-soft:  rgba(239, 68, 68, 0.18);
    --warning-soft: rgba(245, 158, 11, 0.18);
    --info-soft:    rgba(59, 130, 246, 0.18);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --card-shadow-premium: 0 1px 2px rgba(0, 0, 0, 0.4);
    --card-shadow-hover:   0 8px 24px rgba(0, 0, 0, 0.5);

    --header-bg:     #11151f;
    --header-fg:     #f3f1f5;
    --header-muted:  #a7abba;
    --header-border: rgba(255, 255, 255, 0.07);

    --sidebar-bg:     #0c0f17;
    --sidebar-fg:     #c1c5dc;
    --sidebar-muted:  #8389a0;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --sidebar-active: rgba(124, 116, 242, 0.22);
}

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY  — Inter workhorse, weight-driven hierarchy
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: 14px;            /* body-md */
    line-height: 1.45;
    letter-spacing: -0.006em;
    color: var(--fg);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, .h1 { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h2, .h2 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h3, .h3 { font-size: 16px; font-weight: 600; line-height: 1.4; }
h4, h5, h6 { font-weight: 600; }

.appbar .header-title h1,
#page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--header-fg); }
.appbar .header-title p,
#page-subtitle { font-size: 13px; color: var(--fg-muted); }

small, .text-sm, .muted { font-size: 13px; }

/* Monospaced ledger figures — applied to anything tagged numeric, plus the
   right-aligned currency cells the data tables produce. */
.mono, .amount, .currency, .num, .figure,
code, kbd, samp,
td.text-right, td.num, td.amount, td.text-end,
.data-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.01em;
}

/* -----------------------------------------------------------------------------
   4. SIDEBAR — navy rail, muted labels, indigo active item + blue edge
   -------------------------------------------------------------------------- */
.sidebar {
    --sb-bg-1:        #161b2b;
    --sb-bg-2:        #131826;
    --sb-fg:          #c1c5dc;
    --sb-fg-strong:   #ffffff;
    --sb-muted:       #7f8398;
    --sb-faint:       #5c6075;
    --sb-border:      rgba(255, 255, 255, 0.07);
    --sb-hairline:    rgba(255, 255, 255, 0.05);
    --sb-hover:       rgba(255, 255, 255, 0.05);
    --sb-hover-strong: rgba(255, 255, 255, 0.08);
    --sb-active-fg:   #ffffff;
    --sb-accent:      var(--pl-blue);
    --sb-accent-2:    var(--pl-indigo);
    --sb-accent-glow: rgba(59, 130, 246, 0.0);
    --sb-rail:        4px;
    background: linear-gradient(180deg, #161b2b 0%, #131826 100%);
}
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #0c0f17 0%, #0a0d14 100%);
}

/* The base layers flip the sidebar to a LIGHT palette under [data-theme="light"]
   (the live default) with dark text — invisible on our navy rail. Re-assert the
   navy palette + light text at matching specificity (this file loads later). */
[data-theme="light"] .sidebar {
    --sb-bg-1:        #161b2b;
    --sb-bg-2:        #131826;
    --sb-fg:          #c1c5dc;
    --sb-fg-strong:   #ffffff;
    --sb-muted:       #8b90a6;
    --sb-faint:       #5c6075;
    --sb-border:      rgba(255, 255, 255, 0.07);
    --sb-hover:       rgba(255, 255, 255, 0.05);
    --sb-hover-strong:rgba(255, 255, 255, 0.08);
    --sb-active-fg:   #ffffff;
    background: linear-gradient(180deg, #161b2b 0%, #131826 100%);
}
[data-theme="light"] .sidebar .nav-item,
[data-theme="light"] .sidebar .nav-links > li,
[data-theme="light"] .sidebar .nav-sub-menu .nav-item { color: var(--sb-fg); }
[data-theme="light"] .sidebar .nav-item i,
[data-theme="light"] .sidebar .nav-group-title .group-icon { color: var(--sb-muted); }
[data-theme="light"] .sidebar .nav-group-title { color: var(--sb-muted); }
[data-theme="light"] .sidebar .nav-item:hover,
[data-theme="light"] .sidebar .nav-sub-menu .nav-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .sidebar .nav-item:hover i,
[data-theme="light"] .sidebar .nav-group-title:hover .group-icon { color: #ffffff; }
/* Keep the active item readable: white text on the indigo fill (base layer
   already provides the gradient + blue rail). */
[data-theme="light"] .sidebar .nav-item.active,
[data-theme="light"] .sidebar .nav-sub-menu .nav-item.active { color: #ffffff; }
[data-theme="light"] .sidebar .nav-item.active i { color: #ffffff; }

/* Brand block */
.sidebar .logo { border-bottom: 1px solid var(--sb-border); }
/* Wordmark must stay readable on the navy rail. The base layers clip a dark
   gradient into the text (invisible on navy) — force a solid white fill in
   both themes, overriding the higher-specificity [data-theme] rules. */
.sidebar .logo span.brand-wordmark,
[data-theme="light"] .sidebar .logo span.brand-wordmark,
[data-theme="dark"]  .sidebar .logo span.brand-wordmark {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Group headers — quiet, uppercase categorisation */
.sidebar .nav-group-title {
    color: var(--sb-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.sidebar .nav-group-title:hover { color: var(--sb-fg-strong); background: var(--sb-hover); }

/* Nav items — label-md, generous tap target */
.sidebar .nav-item,
.sidebar .nav-links > li {
    color: var(--sb-fg);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.005em;
    border-radius: 6px;
}
.sidebar .nav-item i,
.sidebar .nav-group-title i { color: var(--sb-muted); }
.sidebar .nav-item:hover {
    background: var(--sb-hover);
    color: var(--sb-fg-strong);
}
.sidebar .nav-item:hover i { color: var(--sb-fg-strong); }

/* Active item — indigo tint, white text, vibrant-blue left rail */
.sidebar .nav-item.active {
    background: var(--sb-active, rgba(75, 65, 225, 0.20));
    color: var(--sb-active-fg);
    font-weight: 600;
    box-shadow: inset var(--sb-rail) 0 0 0 var(--pl-blue);
}
.sidebar .nav-item.active i { color: #ffffff; }

/* -----------------------------------------------------------------------------
   5. APPBAR / HEADER — white, hairline base, compact
   -------------------------------------------------------------------------- */
/* `header.appbar` (element+class) hardcodes a translucent-white background in
   the base layer, which stays light in dark mode. Match its specificity here
   (loaded later) so the bar follows the theme token in both modes. */
.appbar,
header.appbar {
    background: var(--header-bg) !important;
    color: var(--header-fg);
    border-bottom: 1px solid var(--header-border) !important;
    box-shadow: none !important;
    min-height: var(--header-height);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.appbar .search-trigger {
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--fg-faint);
    transition: border-color .15s ease, background .15s ease;
}
.appbar .search-trigger:hover { border-color: var(--hairline-strong); }
.appbar .kbd, .kbd {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    color: var(--fg-faint);
    font-family: var(--font-mono);
    font-size: 11px;
}
.appbar .btn-icon { color: var(--header-muted); }
.appbar .btn-icon:hover { background: var(--surface-2); color: var(--fg); }
.profile-avatar {
    background: var(--pl-indigo);
    color: #fff;
}

/* -----------------------------------------------------------------------------
   6. BUTTONS — solid indigo primary, ghost outline, 6px radius
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 13px;
    letter-spacing: -0.005em;
}
.btn-primary {
    background: var(--pl-indigo) !important;
    background-image: none !important;
    border: 1px solid var(--pl-indigo) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-primary:hover {
    background: #3a31c9 !important;
    border-color: #3a31c9 !important;
    box-shadow: var(--btn-shadow-hover) !important;
    filter: none !important;
}
.btn-ghost, .btn-secondary, .btn-outline {
    background: var(--surface) !important;
    color: var(--fg-muted) !important;
    border: 1px solid var(--hairline-strong) !important;
    box-shadow: none !important;
}
.btn-ghost:hover, .btn-secondary:hover, .btn-outline:hover {
    background: var(--surface-2) !important;
    color: var(--fg) !important;
    border-color: var(--hairline-strong) !important;
}
.btn-icon { border-radius: 6px !important; }
.btn-success { background: var(--success) !important; border-color: var(--success) !important; color:#fff !important; }
.btn-danger  { background: var(--danger)  !important; border-color: var(--danger)  !important; color:#fff !important; }

/* -----------------------------------------------------------------------------
   7. INPUTS — 1px border, soft radius, vibrant-blue focus ring
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea,
.voucher-input, .voucher-select, .voucher-textarea,
.form-control, .input {
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--hairline-strong);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--font-sans);
}
input:focus, select:focus, textarea:focus,
.voucher-input:focus, .voucher-select:focus, .voucher-textarea:focus,
.form-control:focus, .input:focus {
    outline: none;
    border-color: var(--pl-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
label, .form-label { font-size: 12px; font-weight: 600; color: var(--fg-muted); letter-spacing: 0.01em; }

/* -----------------------------------------------------------------------------
   8. CARDS — flat white, 1px border, 8px radius (no heavy shadow)
   -------------------------------------------------------------------------- */
.card, .dashboard-card, .stat-card, .datatable-wrapper, .panel, .widget {
    background: var(--surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 8px !important;
    box-shadow: var(--card-shadow-premium) !important;
}
.card:hover, .dashboard-card:hover, .stat-card:hover {
    box-shadow: var(--card-shadow-hover) !important;
    transform: none !important;
}
.stat-card .stat-value, .dashboard-card .value, .kpi-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Modals / popovers — Level 2 ambient shadow */
.modal, .dropdown-menu, .profile-dropdown, .popover, .command-palette {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08) !important;
}

/* -----------------------------------------------------------------------------
   9. DATA TABLES — the core component: zebra, 40px rows, label headers
   -------------------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; }
table thead th,
.datatable thead th {
    background: var(--surface-2);
    color: var(--fg-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--hairline-strong);
    padding: 10px 14px;
    white-space: nowrap;
}
table tbody td,
.datatable tbody td {
    font-size: 13px;
    padding: 9px 14px;            /* ~40px row height */
    border-bottom: 1px solid var(--hairline);
    color: var(--fg);
}
table tbody tr:nth-child(even) td { background: rgba(16, 24, 40, 0.018); }
[data-theme="dark"] table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
table tbody tr:hover td { background: var(--accent-soft); }

/* Currency / numeric columns — mono, right aligned */
table td.text-right, table th.text-right,
table td.num, table td.amount, table .text-end {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Sticky headers keep their tonal background while scrolling */
table.sticky-thead thead th { position: sticky; top: 0; z-index: 2; }

/* -----------------------------------------------------------------------------
   10. STATUS CHIPS / BADGES — subtle tinted background, same-hue text
   -------------------------------------------------------------------------- */
.badge, .chip, .status, .tag, .pill {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 9999px;
    padding: 2px 10px;
    border: 1px solid transparent;
}
.badge-success, .status-paid, .status-active, .badge-paid,
.is-success, .status--success {
    background: var(--success-soft); color: #047857; border-color: rgba(16,185,129,0.25);
}
.badge-danger, .status-overdue, .badge-overdue, .is-danger, .status--danger {
    background: var(--danger-soft); color: #b91c1c; border-color: rgba(239,68,68,0.25);
}
.badge-warning, .status-pending, .badge-pending, .is-warning, .status--warning {
    background: var(--warning-soft); color: #b45309; border-color: rgba(245,158,11,0.28);
}
.badge-info, .status-draft, .is-info, .status--info {
    background: var(--info-soft); color: #1d4ed8; border-color: rgba(59,130,246,0.25);
}
[data-theme="dark"] .badge-success, [data-theme="dark"] .status-paid { color: #34d399; }
[data-theme="dark"] .badge-danger,  [data-theme="dark"] .status-overdue { color: #f87171; }
[data-theme="dark"] .badge-warning, [data-theme="dark"] .status-pending { color: #fbbf24; }
[data-theme="dark"] .badge-info,    [data-theme="dark"] .status-draft { color: #60a5fa; }

/* Positive / negative ledger figures */
.amount-positive, .text-success, .credit { color: var(--success); }
.amount-negative, .text-danger, .debit  { color: var(--danger); }

/* -----------------------------------------------------------------------------
   11. MISC — links, scrollbars, focus visibility, dark-mode legibility
   -------------------------------------------------------------------------- */
a { color: var(--pl-indigo); }
[data-theme="dark"] a { color: #8b85ff; }

:focus-visible { outline: 2px solid var(--pl-blue); outline-offset: 2px; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }
.sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }

/* Keep body text readable on the dim canvas in dark mode */
[data-theme="dark"] body { background: var(--bg); color: var(--fg); }
[data-theme="dark"] .muted, [data-theme="dark"] .text-muted { color: var(--fg-muted); }

/* ---------------------------------------------------------------------------
   Accessibility (WCAG 2.4.7) — a guaranteed keyboard focus ring on interactive
   controls. Uses :focus-visible so it shows ONLY for keyboard / assistive-tech
   focus and never on mouse click, leaving the pointer experience unchanged.
   !important so the ring always wins over any element-level `outline:none`.
   Pairs with the now keyboard-operable sidebar navigation.
--------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible,
.nav-group-title:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--pl-blue, #2f6df6) !important;
    outline-offset: 2px !important;
}

/* Respect the OS "reduce motion" preference (WCAG 2.3.3 / vestibular safety):
   collapse animations and transitions to near-instant and disable smooth
   auto-scrolling for users who have asked their system to minimise motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}