/* =============================================================
   ERP THEME — Modern ERP design layer
   -------------------------------------------------------------
   Loaded AFTER style.bundle.css (Metronic) in:
     - app/Views/admin/layouts/base.php
     - app/Views/login.php
   Restyles the EXISTING Bootstrap 5 / Metronic classes only.
   No markup, no IDs and no JS hooks are changed — DataTables,
   Select2, Metronic menus and all view logic keep working.
   ============================================================= */


/* =============================================
   1. DESIGN TOKENS — light mode
   Anchored on the existing navy sidebar (#1a2238)
   so the whole shell reads as one product.
   ============================================= */
:root {
    /* ── Brand / navy scale ── */
    --erp-navy-900: #141b2d;   /* deepest — sidebar base       */
    --erp-navy-800: #1a2238;   /* sidebar (existing value)     */
    --erp-navy-700: #243050;   /* sidebar hover                */
    --erp-navy-600: #2e3d6a;   /* sidebar border               */
    --erp-navy-500: #425992;   /* sidebar accent (existing)    */

    /* ── Accent (actions, links, focus) ── */
    --erp-accent:        #2f5fd0;
    --erp-accent-hover:  #2650b5;
    --erp-accent-active: #1f428f;
    --erp-accent-soft:   #eaf0fd;  /* tinted background        */
    --erp-accent-ring:   rgba(47, 95, 208, 0.16);

    /* ── Semantic status colours ── */
    --erp-success:      #12805c;
    --erp-success-soft: #e7f6f0;
    --erp-warning:      #b45309;
    --erp-warning-soft: #fdf3e4;
    --erp-danger:       #c02626;
    --erp-danger-soft:  #fdeceb;
    --erp-info:         #0f6fa8;
    --erp-info-soft:    #e8f4fb;

    /* ── Neutral / slate surface scale ── */
    --erp-canvas:    #f4f6fa;  /* page background              */
    --erp-surface:   #ffffff;  /* cards, modals, dropdowns     */
    --erp-surface-2: #f8fafc;  /* table heads, inset panels    */
    --erp-surface-3: #eef2f7;  /* solid inputs, hover fills    */
    --erp-border:    #e3e8ef;  /* hairline dividers            */
    --erp-border-2:  #cfd7e3;  /* stronger borders, inputs     */

    /* ── Text scale ── */
    --erp-text:   #16202e;     /* primary copy                 */
    --erp-text-2: #46536b;     /* secondary copy               */
    --erp-text-3: #7a8699;     /* muted / captions             */

    /* ── Radii ── */
    --erp-radius-sm: 6px;
    --erp-radius:    9px;
    --erp-radius-lg: 13px;

    /* ── Elevation — flat, ERP-appropriate ── */
    --erp-shadow-xs: 0 1px 2px rgba(20, 27, 45, 0.05);
    --erp-shadow-sm: 0 1px 3px rgba(20, 27, 45, 0.07), 0 1px 2px rgba(20, 27, 45, 0.04);
    --erp-shadow:    0 4px 14px rgba(20, 27, 45, 0.08);
    --erp-shadow-lg: 0 16px 40px rgba(20, 27, 45, 0.14);

    /* ── Sidebar-on-navy scale ──
       Consumed by the inline theme in
       app/Views/admin/layouts/sidebar.php. */
    --erp-sb-icon:        #6b82aa;  /* idle menu icon           */
    --erp-sb-icon-active: #8fb4f2;  /* hover / active icon      */
    --erp-sb-arrow:       #4a5f85;  /* accordion caret          */
    --erp-sb-text:        #9fb3d4;  /* idle menu title          */
    --erp-sb-text-2:      #7390b8;  /* sub-item title           */
    --erp-sb-text-active: #e8f0ff;  /* hover / active title     */
    --erp-sb-bullet:      #3a4f75;  /* sub-item bullet dot      */
    --erp-sb-active-bg:   rgba(47, 95, 208, 0.22);  /* active row fill  */
    --erp-sb-active-soft: rgba(47, 95, 208, 0.12);  /* sub-item fill    */
    --erp-sb-active-bar:  #4d7ae0;                  /* active left rule */

    /* In light mode nothing is "lifted" by colour — white already reads
       as raised against the slate canvas, so these resolve to the plain
       surfaces and only the shadow conveys elevation. */
    --erp-elevated:  var(--erp-surface);
    --erp-input-bg:  var(--erp-surface);
    --erp-input-solid: var(--erp-surface-3);
    --erp-btn-neutral:       var(--erp-surface);
    --erp-btn-neutral-hover: var(--erp-surface-3);

    /* ── Metrics ── */
    --erp-header-h: 62px;

    /* ── Bridge tokens into Bootstrap/Metronic ──
       Overriding these re-skins every component that already
       consumes them, without touching any component markup. */
    --bs-body-bg:          var(--erp-surface);
    --bs-body-color:       var(--erp-text);
    --bs-app-bg-color:     var(--erp-canvas);
    --bs-border-color:     var(--erp-border);
    --bs-border-radius:    var(--erp-radius);
    --bs-primary:          var(--erp-accent);
    --bs-primary-rgb:      47, 95, 208;
    --bs-link-color:       var(--erp-accent);
    --bs-link-hover-color: var(--erp-accent-hover);
    --bs-card-bg:            var(--erp-surface);
    --bs-card-border-color:  var(--erp-border);
    --bs-card-border-radius: var(--erp-radius-lg);
    --bs-card-box-shadow:    var(--erp-shadow-sm);

    /* Metronic ships a full family per semantic colour
       (-active / -light / -text). Remapping the family keeps
       utilities like .text-primary and .bg-light-success in system. */
    --bs-primary-active: var(--erp-accent-hover);
    --bs-primary-light:  var(--erp-accent-soft);
    --bs-primary-text:   var(--erp-accent);
    --bs-text-primary:   var(--erp-accent);

    --bs-success:        var(--erp-success);
    --bs-success-active: var(--erp-success);
    --bs-success-light:  var(--erp-success-soft);
    --bs-success-text:   var(--erp-success);
    --bs-text-success:   var(--erp-success);

    --bs-danger:         var(--erp-danger);
    --bs-danger-active:  var(--erp-danger);
    --bs-danger-light:   var(--erp-danger-soft);
    --bs-danger-text:    var(--erp-danger);
    --bs-text-danger:    var(--erp-danger);

    --bs-warning:        var(--erp-warning);
    --bs-warning-active: var(--erp-warning);
    --bs-warning-light:  var(--erp-warning-soft);
    --bs-warning-text:   var(--erp-warning);
    --bs-text-warning:   var(--erp-warning);

    --bs-info:           var(--erp-info);
    --bs-info-active:    var(--erp-info);
    --bs-info-light:     var(--erp-info-soft);
    --bs-info-text:      var(--erp-info);
    --bs-text-info:      var(--erp-info);
}


/* =============================================
   2. DESIGN TOKENS — dark mode
   Same token names, remapped. Metronic already
   toggles [data-bs-theme] from the header menu.
   ============================================= */
[data-bs-theme="dark"] {
    --erp-accent:        #5b8dea;
    --erp-accent-hover:  #7aa3f0;
    --erp-accent-active: #4778d6;
    --erp-accent-soft:   #1c2740;
    --erp-accent-ring:   rgba(91, 141, 234, 0.24);

    --erp-success:      #34c48e;
    --erp-success-soft: #14291f;
    --erp-warning:      #e0a33a;
    --erp-warning-soft: #2b2213;
    --erp-danger:       #f0605f;
    --erp-danger-soft:  #2e1717;
    --erp-info:         #4aa8dd;
    --erp-info-soft:    #12232f;

    --erp-canvas:    #0f1420;
    --erp-surface:   #161d2c;
    --erp-surface-2: #1b2334;
    --erp-surface-3: #212b3f;
    --erp-border:    #29344a;
    --erp-border-2:  #36435e;

    /* Dark UI reverses elevation: a raised surface gets LIGHTER, not
       darker. Modals and dropdowns lift above the card plane, and form
       controls sit recessed below it so they stay readable inside both. */
    --erp-elevated:  #1e2739;   /* modals, dropdowns, popovers */
    --erp-input-bg:  #10161f;   /* recessed field wells        */
    --erp-input-solid: #131a26; /* Metronic "solid" fields     */
    --erp-btn-neutral:       #2a3548;  /* light/secondary buttons */
    --erp-btn-neutral-hover: #34415a;

    --erp-text:   #e6ecf6;
    --erp-text-2: #a9b6cb;
    --erp-text-3: #76839a;

    --erp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --erp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
    --erp-shadow:    0 4px 14px rgba(0, 0, 0, 0.45);
    --erp-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    --bs-body-bg:      var(--erp-surface);
    --bs-body-color:   var(--erp-text);
    --bs-app-bg-color: var(--erp-canvas);
    --bs-border-color: var(--erp-border);
    --bs-primary:      var(--erp-accent);
    --bs-primary-rgb:  91, 141, 234;

    /* The semantic families above resolve through the erp-* tokens,
       so they follow dark mode automatically — only -light needs a
       nudge, since the tinted fills flip from pale to deep. */
    --bs-primary-light: var(--erp-accent-soft);
    --bs-success-light: var(--erp-success-soft);
    --bs-danger-light:  var(--erp-danger-soft);
    --bs-warning-light: var(--erp-warning-soft);
    --bs-info-light:    var(--erp-info-soft);
}


/* =============================================
   3. BASE — typography & page canvas
   ============================================= */
body {
    background-color: var(--erp-canvas) !important;
    color: var(--erp-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13.5px;                 /* denser ERP reading size */
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tighter, more deliberate headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--erp-text);
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Re-map Metronic text utilities onto the token scale */
.text-dark, .text-gray-900, .text-gray-800   { color: var(--erp-text) !important; }
.text-gray-700, .text-gray-600               { color: var(--erp-text-2) !important; }
.text-muted, .text-gray-500, .text-gray-400  { color: var(--erp-text-3) !important; }

a { text-decoration: none; }

/* Financial figures line up column-to-column */
.erp-num, td.text-end, th.text-end, .fs-2x, .fs-2qx {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ── Custom scrollbars — slim, unobtrusive ── */
::-webkit-scrollbar       { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--erp-border-2);
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--erp-text-3); background-clip: content-box; }


/* =============================================
   4. APP SHELL — header / content region
   ============================================= */
.app-header {
    background-color: var(--erp-surface) !important;
    border-bottom: 1px solid var(--erp-border) !important;
    box-shadow: var(--erp-shadow-xs) !important;
    min-height: var(--erp-header-h);
}
.app-header .app-container { min-height: var(--erp-header-h); }

/* Header icon buttons — quiet until hovered */
.app-navbar-item .btn.btn-icon {
    border-radius: var(--erp-radius-sm);
    color: var(--erp-text-2);
    transition: background-color .15s ease, color .15s ease;
}
.app-navbar-item .btn.btn-icon:hover,
.app-navbar-item .btn.btn-icon.show {
    background-color: var(--erp-surface-3);
    color: var(--erp-accent);
}

/* Content region sits on the canvas, not on white */
.app-wrapper, .app-main, .app-content { background-color: var(--erp-canvas); }

/* Sidebar container — align to the token palette */
.app-sidebar {
    background-color: var(--erp-navy-800) !important;
    border-right: 1px solid var(--erp-navy-600) !important;
    box-shadow: 1px 0 0 rgba(0, 0, 0, .06) !important;
}


/* =============================================
   5. PAGE TOOLBAR — title + breadcrumb bar
   Rendered by every view as #kt_app_toolbar.
   ============================================= */
.app-toolbar {
    padding-top: 1.35rem !important;
    padding-bottom: 1.1rem !important;
}
.page-heading, .page-title h1 {
    font-size: 1.32rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em;
    color: var(--erp-text) !important;
}

/* Breadcrumb — small, muted, non-competing */
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
    color: var(--erp-text-3) !important;
    font-size: 11.5px;
    font-weight: 500;
}
.breadcrumb .breadcrumb-item:last-child { color: var(--erp-text-2) !important; }
.breadcrumb .bullet { background-color: var(--erp-border-2) !important; }


/* =============================================
   6. CARDS — the primary ERP container
   Flat surface, hairline border, whisper shadow.
   ============================================= */
.card {
    background-color: var(--erp-surface);
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius-lg) !important;
    box-shadow: var(--erp-shadow-sm) !important;
}

/* Card header — its own band, separated by a hairline */
.card > .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--erp-border) !important;
    min-height: 60px;
    padding: 0.9rem 1.4rem !important;
    align-items: center;
}
/* Views that open the header with `pt-6` keep working */
.card > .card-header.pt-6 { padding-top: 0.9rem !important; }

.card > .card-header .card-title,
.card > .card-header .card-label {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--erp-text);
    letter-spacing: -0.01em;
}
.card > .card-body   { padding: 1.4rem; }
.card > .card-footer {
    background-color: var(--erp-surface-2);
    border-top: 1px solid var(--erp-border) !important;
    padding: 0.9rem 1.4rem;
}

/* Metronic's borderless card variant */
.card.card-flush > .card-header { border-bottom: 0 !important; }

/* Optional lift — only where a view opts in via .stat-card */
.card.stat-card { transition: transform .18s ease, box-shadow .18s ease; }
.card.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--erp-shadow) !important;
}


/* =============================================
   6b. KPI TILES — dashboard metric cards
   Replaces six full-bleed saturated blocks with
   one surface tile + a colour-coded accent rule,
   so the figures carry the screen, not the fill.
   Applied via .erp-kpi + .erp-kpi--<n> in
   app/Views/admin/dashboard/home.php.
   ============================================= */
.card.erp-kpi {
    background-color: var(--erp-surface) !important;
    border-left: 3px solid var(--erp-kpi, var(--erp-accent)) !important;
    overflow: hidden;
    position: relative;
}
/* Faint wash of the accent so tiles stay distinguishable at a glance */
.card.erp-kpi::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--erp-kpi, var(--erp-accent));
    opacity: 0.035;
    pointer-events: none;
}
.card.erp-kpi > .card-body { padding: 1.1rem 1.2rem; position: relative; z-index: 1; }

/* The tiles were authored with .text-white on every span —
   remap those roles onto the token scale instead of editing markup. */
.card.erp-kpi .text-white   { color: var(--erp-text-2) !important; }
.card.erp-kpi .opacity-75   { color: var(--erp-text-3) !important; opacity: 1 !important; }
.card.erp-kpi .currency-sub { color: var(--erp-text-2) !important; opacity: 1; font-size: 12px !important; }
.card.erp-kpi .fs-8         { color: var(--erp-text-3) !important; font-size: 11px !important; }

/* The headline figure carries the tile */
.card.erp-kpi .fs-2x {
    color: var(--erp-text) !important;
    font-size: 1.62rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

/* Label row — small caps, quiet */
.card.erp-kpi .fs-7 {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Metric icon sits in a tinted chip of the tile's accent */
.card.erp-kpi svg, .card.erp-kpi i { color: var(--erp-kpi, var(--erp-accent)) !important; }
.card.erp-kpi .card-body > .d-flex > .d-flex:first-child > svg:first-child,
.card.erp-kpi .card-body > .d-flex > .d-flex:first-child > i:first-child {
    box-sizing: content-box;
    width: 17px !important;
    height: 17px !important;
    padding: 6px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--erp-kpi, var(--erp-accent)) 13%, transparent);
    flex-shrink: 0;
}

/* ── Accent per tile ──
   Derived from the Abyei Life Water logo (deep blue #002F9B,
   sky #038FE4, leaf green #4D9E03) so the dashboard reads as
   the company's own, with two neutral hues to round out six. */
.card.erp-kpi--1 { --erp-kpi: #002F9B; }  /* today's sales     — brand blue  */
.card.erp-kpi--2 { --erp-kpi: #4D9E03; }  /* today's profit    — leaf green  */
.card.erp-kpi--3 { --erp-kpi: #038FE4; }  /* month sales       — sky blue    */
.card.erp-kpi--4 { --erp-kpi: #0d7f8c; }  /* cash & bank       — deep teal   */
.card.erp-kpi--5 { --erp-kpi: #b06a10; }  /* customers         — amber       */
.card.erp-kpi--6 { --erp-kpi: #4b5b7a; }  /* inventory value   — slate       */

/* Dark mode lifts each hue so it holds against the dark surface */
[data-bs-theme="dark"] .card.erp-kpi--1 { --erp-kpi: #6f9bff; }
[data-bs-theme="dark"] .card.erp-kpi--2 { --erp-kpi: #8ed44a; }
[data-bs-theme="dark"] .card.erp-kpi--3 { --erp-kpi: #56b8f5; }
[data-bs-theme="dark"] .card.erp-kpi--4 { --erp-kpi: #3fb6c4; }
[data-bs-theme="dark"] .card.erp-kpi--5 { --erp-kpi: #e0a33a; }
[data-bs-theme="dark"] .card.erp-kpi--6 { --erp-kpi: #93a4c6; }
[data-bs-theme="dark"] .card.erp-kpi::after { opacity: 0.08; }


/* =============================================
   7. BUTTONS — compact, decisive, no gloss
   ============================================= */
.btn {
    --bs-btn-border-radius: var(--erp-radius-sm);
    border-radius: var(--erp-radius-sm) !important;
    font-weight: 550;
    font-size: 13px;
    letter-spacing: 0;
    padding: 0.58rem 1.05rem;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease;
}
.btn:focus-visible { box-shadow: 0 0 0 3px var(--erp-accent-ring) !important; }

.btn.btn-sm { padding: 0.42rem 0.80rem; font-size: 12.5px; }
.btn.btn-lg { padding: 0.72rem 1.35rem; font-size: 14px; }

/* Primary — the single strongest action on a screen */
.btn.btn-primary {
    background-color: var(--erp-accent);
    border-color: var(--erp-accent);
    color: #fff;
    box-shadow: var(--erp-shadow-xs);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--erp-accent-hover);
    border-color: var(--erp-accent-hover);
    color: #fff;
}
.btn.btn-primary:active,
.btn.btn-primary.active {
    background-color: var(--erp-accent-active) !important;
    border-color: var(--erp-accent-active) !important;
}

/* Secondary / neutral */
.btn.btn-light, .btn.btn-secondary {
    background-color: var(--erp-btn-neutral);
    border: 1px solid var(--erp-border-2);
    color: var(--erp-text-2);
}
.btn.btn-light:hover, .btn.btn-secondary:hover {
    background-color: var(--erp-btn-neutral-hover);
    border-color: var(--erp-border-2);
    color: var(--erp-text);
}

/* Solid semantic buttons */
.btn.btn-success { background-color: var(--erp-success); border-color: var(--erp-success); color: #fff; }
.btn.btn-danger  { background-color: var(--erp-danger);  border-color: var(--erp-danger);  color: #fff; }
.btn.btn-warning { background-color: var(--erp-warning); border-color: var(--erp-warning); color: #fff; }
.btn.btn-info    { background-color: var(--erp-info);    border-color: var(--erp-info);    color: #fff; }
.btn.btn-success:hover, .btn.btn-danger:hover,
.btn.btn-warning:hover, .btn.btn-info:hover { filter: brightness(0.93); color: #fff; }

/* Tinted "light-*" buttons — Metronic's quiet action style */
.btn.btn-light-primary { background-color: var(--erp-accent-soft);  color: var(--erp-accent);  border: 1px solid transparent; }
.btn.btn-light-success { background-color: var(--erp-success-soft); color: var(--erp-success); border: 1px solid transparent; }
.btn.btn-light-danger  { background-color: var(--erp-danger-soft);  color: var(--erp-danger);  border: 1px solid transparent; }
.btn.btn-light-warning { background-color: var(--erp-warning-soft); color: var(--erp-warning); border: 1px solid transparent; }
.btn.btn-light-info    { background-color: var(--erp-info-soft);    color: var(--erp-info);    border: 1px solid transparent; }
.btn.btn-light-primary:hover { background-color: var(--erp-accent);  color: #fff; }
.btn.btn-light-success:hover { background-color: var(--erp-success); color: #fff; }
.btn.btn-light-danger:hover  { background-color: var(--erp-danger);  color: #fff; }
.btn.btn-light-warning:hover { background-color: var(--erp-warning); color: #fff; }
.btn.btn-light-info:hover    { background-color: var(--erp-info);    color: #fff; }

/* Icon-only buttons stay square */
.btn.btn-icon { padding: 0; border-radius: var(--erp-radius-sm) !important; }

/* Row-action clusters (edit / delete / view in tables) */
.btn-group > .btn:first-child {
    border-top-left-radius: var(--erp-radius-sm) !important;
    border-bottom-left-radius: var(--erp-radius-sm) !important;
}
.btn-group > .btn:last-child {
    border-top-right-radius: var(--erp-radius-sm) !important;
    border-bottom-right-radius: var(--erp-radius-sm) !important;
}


/* =============================================
   8. FORMS — high-clarity data entry
   ============================================= */
.form-label {
    color: var(--erp-text-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.4rem;
}
.form-label.required::after { color: var(--erp-danger); }

.form-control, .form-select {
    background-color: var(--erp-input-bg);
    border: 1px solid var(--erp-border-2);
    border-radius: var(--erp-radius-sm);
    color: var(--erp-text);
    font-size: 13.5px;
    padding: 0.55rem 0.8rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:focus, .form-select:focus {
    background-color: var(--erp-input-bg);
    border-color: var(--erp-accent);
    box-shadow: 0 0 0 3px var(--erp-accent-ring);
    color: var(--erp-text);
}
.form-control::placeholder { color: var(--erp-text-3); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--erp-surface-3);
    color: var(--erp-text-2);
    cursor: not-allowed;
}

/* Metronic's "solid" variant — filled until focused */
.form-control.form-control-solid, .form-select.form-select-solid {
    background-color: var(--erp-input-solid);
    border-color: transparent;
    color: var(--erp-text);
}
.form-control.form-control-solid:focus, .form-select.form-select-solid:focus {
    background-color: var(--erp-input-bg);
    border-color: var(--erp-accent);
    box-shadow: 0 0 0 3px var(--erp-accent-ring);
}
.form-control.form-control-sm, .form-select.form-select-sm { padding: 0.38rem 0.65rem; font-size: 12.5px; }

/* Input groups — seamless with the control */
.input-group-text {
    background-color: var(--erp-input-solid);
    border: 1px solid var(--erp-border-2);
    border-radius: var(--erp-radius-sm);
    color: var(--erp-text-2);
    font-size: 12.5px;
    font-weight: 500;
}
.form-text { color: var(--erp-text-3); font-size: 11.5px; }

/* Checks / radios / switches */
.form-check-input {
    border-color: var(--erp-border-2);
    background-color: var(--erp-input-bg);
    cursor: pointer;
}
.form-check-input:checked { background-color: var(--erp-accent); border-color: var(--erp-accent); }
.form-check-input:focus   { box-shadow: 0 0 0 3px var(--erp-accent-ring); border-color: var(--erp-accent); }
.form-check-label         { color: var(--erp-text-2); font-size: 13px; }

/* Validation states */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--erp-danger); }
.invalid-feedback { color: var(--erp-danger); font-size: 11.5px; }


/* =============================================
   9. SELECT2 — matched to the native controls
   (Select2 is already loaded app-wide.)
   ============================================= */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--erp-input-solid);
    border: 1px solid transparent !important;
    border-radius: var(--erp-radius-sm) !important;
    min-height: 38px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    background-color: var(--erp-input-bg);
    border-color: var(--erp-accent) !important;
    box-shadow: 0 0 0 3px var(--erp-accent-ring);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--erp-text);
    line-height: 36px;
    font-size: 13.5px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--erp-text-3); }

/* Dropdown panel */
.select2-dropdown {
    background-color: var(--erp-elevated);
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius) !important;
    box-shadow: var(--erp-shadow) !important;
    overflow: hidden;
}
.select2-container--default .select2-results__option { color: var(--erp-text-2); font-size: 13.5px; padding: 8px 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--erp-accent-soft) !important;
    color: var(--erp-accent) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--erp-surface-3);
    color: var(--erp-text);
    font-weight: 600;
}
.select2-search--dropdown .select2-search__field {
    background-color: var(--erp-input-bg);
    border: 1px solid var(--erp-border-2) !important;
    border-radius: var(--erp-radius-sm);
    color: var(--erp-text);
    padding: 7px 10px;
}
/* Multi-select chips */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--erp-accent-soft);
    border: 1px solid transparent;
    border-radius: var(--erp-radius-sm);
    color: var(--erp-accent);
    font-size: 12.5px;
}


/* =============================================
   10. TABLES — the heart of an ERP screen
   Dense rows, quiet zebra, decisive header.
   ============================================= */
.table {
    --bs-table-bg: transparent;
    color: var(--erp-text-2);
    font-size: 13px;
    margin-bottom: 0;
}
.table > thead > tr > th {
    background-color: var(--erp-surface-2);
    border-bottom: 1px solid var(--erp-border) !important;
    color: var(--erp-text-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.8rem 0.9rem;
    white-space: nowrap;
    vertical-align: middle;
}
.table > tbody > tr > td {
    border-bottom: 1px solid var(--erp-border);
    color: var(--erp-text-2);
    padding: 0.7rem 0.9rem;
    vertical-align: middle;
}

/* Row hover — scanning aid for wide financial tables */
.table > tbody > tr { transition: background-color .12s ease; }
.table > tbody > tr:hover > td       { background-color: var(--erp-surface-2); }
.table > tbody > tr:last-child > td  { border-bottom: 0; }

/* Metronic's dashed-row variant used across list views */
.table.table-row-dashed > tbody > tr > td,
.table.table-row-dashed > thead > tr > th { border-bottom-style: solid !important; }

/* Striped */
.table.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--erp-surface-2); }

/* Bordered */
.table.table-bordered > :not(caption) > * > * { border-color: var(--erp-border); }

/* Totals / summary rows read as a footer band */
.table > tfoot > tr > td, .table > tfoot > tr > th {
    background-color: var(--erp-surface-2);
    border-top: 2px solid var(--erp-border-2) !important;
    color: var(--erp-text);
    font-weight: 650;
}

/* Tables scroll inside their card instead of the page */
.table-responsive { border-radius: var(--erp-radius); }

/* ── Contextual rows ──
   Bootstrap's .table-* row classes ship fixed pale fills that do not
   follow dark mode. Reports use .table-primary for account-group
   bands, so drive them from the tokens instead. */
.table > :not(caption) > tr.table-primary > *,
.table > :not(caption) > * > tr.table-primary > * {
    background-color: var(--erp-accent-soft) !important;
    color: var(--erp-accent) !important;
    box-shadow: none !important;
    font-weight: 650;
}
.table > :not(caption) > * > tr.table-success > * { background-color: var(--erp-success-soft) !important; color: var(--erp-success) !important; box-shadow: none !important; }
.table > :not(caption) > * > tr.table-danger  > * { background-color: var(--erp-danger-soft)  !important; color: var(--erp-danger)  !important; box-shadow: none !important; }
.table > :not(caption) > * > tr.table-warning > * { background-color: var(--erp-warning-soft) !important; color: var(--erp-warning) !important; box-shadow: none !important; }
.table > :not(caption) > * > tr.table-info    > * { background-color: var(--erp-info-soft)    !important; color: var(--erp-info)    !important; box-shadow: none !important; }
.table > :not(caption) > * > tr.table-light   > * { background-color: var(--erp-surface-2)    !important; color: var(--erp-text)    !important; box-shadow: none !important; }
/* .table-light is also used on <tfoot> for totals */
.table > tfoot.table-light > tr > * { background-color: var(--erp-surface-2) !important; color: var(--erp-text) !important; }

/* ── DataTables chrome ── */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--erp-input-solid);
    border: 1px solid transparent;
    border-radius: var(--erp-radius-sm);
    color: var(--erp-text);
    padding: 6px 10px;
}
.dataTables_wrapper .dataTables_filter input:focus {
    background-color: var(--erp-surface);
    border-color: var(--erp-accent);
    box-shadow: 0 0 0 3px var(--erp-accent-ring);
    outline: none;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info { color: var(--erp-text-3); font-size: 12.5px; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--erp-radius-sm) !important;
    color: var(--erp-text-2) !important;
    font-size: 12.5px;
    margin: 0 1px;
    padding: 5px 11px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--erp-surface-3) !important;
    border-color: transparent !important;
    color: var(--erp-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--erp-accent) !important;
    border-color: var(--erp-accent) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--erp-text-3) !important; opacity: .45; }

/* ── Bootstrap pagination (server-side paged views) ── */
.pagination .page-link {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--erp-radius-sm) !important;
    color: var(--erp-text-2);
    font-size: 12.5px;
    margin: 0 1px;
}
.pagination .page-link:hover { background-color: var(--erp-surface-3); color: var(--erp-text); }
.pagination .page-item.active .page-link {
    background-color: var(--erp-accent);
    border-color: var(--erp-accent);
    color: #fff;
}


/* =============================================
   11. BADGES — compact status pills
   ============================================= */
.badge {
    border-radius: 5px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.01em;
    padding: 0.34em 0.62em;
}
.badge.badge-circle { border-radius: 50%; }

.badge.badge-primary { background-color: var(--erp-accent);  color: #fff; }
.badge.badge-success { background-color: var(--erp-success); color: #fff; }
.badge.badge-danger  { background-color: var(--erp-danger);  color: #fff; }
.badge.badge-warning { background-color: var(--erp-warning); color: #fff; }
.badge.badge-info    { background-color: var(--erp-info);    color: #fff; }

/* Tinted badges — the default for ERP status columns */
.badge.badge-light-primary { background-color: var(--erp-accent-soft);  color: var(--erp-accent); }
.badge.badge-light-success { background-color: var(--erp-success-soft); color: var(--erp-success); }
.badge.badge-light-danger  { background-color: var(--erp-danger-soft);  color: var(--erp-danger); }
.badge.badge-light-warning { background-color: var(--erp-warning-soft); color: var(--erp-warning); }
.badge.badge-light-info    { background-color: var(--erp-info-soft);    color: var(--erp-info); }
.badge.badge-light         { background-color: var(--erp-surface-3);    color: var(--erp-text-2); }


/* =============================================
   12. ALERTS
   ============================================= */
.alert {
    border: 1px solid transparent;
    border-radius: var(--erp-radius);
    font-size: 13px;
    padding: 0.85rem 1.1rem;
}
.alert-success { background-color: var(--erp-success-soft); border-color: var(--erp-success); color: var(--erp-success); }
.alert-danger  { background-color: var(--erp-danger-soft);  border-color: var(--erp-danger);  color: var(--erp-danger); }
.alert-warning { background-color: var(--erp-warning-soft); border-color: var(--erp-warning); color: var(--erp-warning); }
.alert-info    { background-color: var(--erp-info-soft);    border-color: var(--erp-info);    color: var(--erp-info); }

/* Left accent rule — reads as a status strip */
.alert-success, .alert-danger, .alert-warning, .alert-info { border-width: 1px 1px 1px 3px; }


/* =============================================
   13. MODALS & DROPDOWNS
   ============================================= */
.modal-content {
    background-color: var(--erp-elevated);
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius-lg) !important;
    box-shadow: var(--erp-shadow-lg) !important;
}
.modal-header {
    border-bottom: 1px solid var(--erp-border);
    padding: 1.1rem 1.5rem;
}
.modal-header .modal-title,
.modal-header h2, .modal-header h5 {
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--erp-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.modal-body   { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--erp-border); padding: 1rem 1.5rem; }
.modal-backdrop.show { opacity: .45; }

/* Metronic dropdown menus (header, row actions, theme switcher).
   No padding here — panels like the notification menu render a
   flush coloured header; `overflow:hidden` keeps it inside the radius. */
.menu.menu-sub-dropdown, .dropdown-menu {
    background-color: var(--erp-elevated);
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius) !important;
    box-shadow: var(--erp-shadow) !important;
    overflow: hidden;
}
.dropdown-menu { padding: 0.4rem; }
.dropdown-menu .dropdown-item {
    border-radius: var(--erp-radius-sm);
    color: var(--erp-text-2);
    font-size: 13px;
    padding: 0.5rem 0.75rem;
}
.dropdown-menu .dropdown-item:hover { background-color: var(--erp-surface-3); color: var(--erp-text); }

/* Scoped to dropdowns only — the sidebar menu keeps its own styling */
.menu.menu-sub-dropdown .menu-link {
    border-radius: var(--erp-radius-sm);
    color: var(--erp-text-2);
    font-size: 13px;
}
.menu.menu-sub-dropdown .menu-link:hover { background-color: var(--erp-surface-3); color: var(--erp-accent); }


/* =============================================
   14. TABS — used on dashboard & report views
   ============================================= */
.nav-tabs { border-bottom: 1px solid var(--erp-border); gap: 0.25rem; }
.nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--erp-text-3);
    font-size: 13px;
    font-weight: 600;
    padding: 0.7rem 1rem;
    transition: color .15s ease, border-color .15s ease;
}
.nav-tabs .nav-link:hover { color: var(--erp-text); border-bottom-color: var(--erp-border-2); }
.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--erp-accent);
    border-bottom-color: var(--erp-accent);
}
/* Metronic line-tabs variant (notification dropdown) */
.nav-line-tabs .nav-link.active { border-bottom-color: currentColor; }

/* Pill tabs */
.nav-pills .nav-link { border-radius: var(--erp-radius-sm); color: var(--erp-text-2); font-size: 13px; font-weight: 600; }
.nav-pills .nav-link.active { background-color: var(--erp-accent); color: #fff; }


/* =============================================
   15. TOASTS — raazToast() output in base.php
   ============================================= */
.toast {
    background-color: var(--erp-elevated) !important;
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius) !important;
    box-shadow: var(--erp-shadow-lg) !important;
    font-size: 13px;
}
.toast.border-success { border-left: 3px solid var(--erp-success) !important; }
.toast.border-danger  { border-left: 3px solid var(--erp-danger)  !important; }
.toast.border-warning { border-left: 3px solid var(--erp-warning) !important; }
.toast.border-info    { border-left: 3px solid var(--erp-info)    !important; }
.toast .toast-body    { color: var(--erp-text); padding: 0.85rem 1rem; }


/* =============================================
   16. MISC SURFACES
   ============================================= */
.separator { border-color: var(--erp-border) !important; }
hr         { border-color: var(--erp-border); opacity: 1; }

/* Metronic tinted backgrounds used for inset panels */
.bg-light         { background-color: var(--erp-surface-2) !important; }
.bg-light-primary { background-color: var(--erp-accent-soft) !important; }
.bg-light-success { background-color: var(--erp-success-soft) !important; }
.bg-light-danger  { background-color: var(--erp-danger-soft) !important; }
.bg-light-warning { background-color: var(--erp-warning-soft) !important; }
.bg-light-info    { background-color: var(--erp-info-soft) !important; }

/* Row action menus inside a scrollable table
   ------------------------------------------------------------------
   DataTables wraps its tables in .table-responsive, which sets
   overflow:auto. A row's dropdown is a child of that wrapper, so anything
   extending past the wrapper's edge is clipped - on a short table the menu
   was 79px tall with only 16px visible, which hid the Receipt action on
   Paid Invoices entirely and made it unreachable.

   While a menu is open the wrapper stops clipping. Horizontal scrolling is
   suspended for those few seconds, which is a fair trade for being able to
   reach the actions at all. */
.table-responsive:has(.dropdown-menu.show),
.dataTables_wrapper:has(.dropdown-menu.show) { overflow: visible; }

/* Avatars / symbols */
.symbol > .symbol-label { background-color: var(--erp-surface-3); color: var(--erp-text-2); border-radius: var(--erp-radius-sm); }
.symbol.symbol-circle > .symbol-label, .symbol.symbol-circle > img { border-radius: 50%; }
/* Fill the circle rather than squash the picture into it: avatars are rarely
   square, and without object-fit a portrait photo stretches. */
.symbol > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Progress bars (report views) */
.progress     { background-color: var(--erp-surface-3); border-radius: 20px; height: 6px; }
.progress-bar { background-color: var(--erp-accent); border-radius: 20px; }

/* Tooltips */
.tooltip-inner {
    background-color: var(--erp-navy-800);
    border-radius: var(--erp-radius-sm);
    font-size: 12px;
    padding: 6px 10px;
}

/* Accordions */
.accordion-item   { background-color: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: var(--erp-radius); }
.accordion-button { background-color: transparent; color: var(--erp-text); font-size: 13.5px; font-weight: 600; }
.accordion-button:not(.collapsed) { background-color: var(--erp-accent-soft); color: var(--erp-accent); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px var(--erp-accent-ring); border-color: var(--erp-accent); }


/* =============================================
   17. AUTH SCREEN — login.php
   ============================================= */
body.app-blank { background-color: var(--erp-canvas) !important; }
body.app-blank .form-control {
    background-color: var(--erp-surface);
    border: 1px solid var(--erp-border-2);
    font-size: 14px;
    padding: 0.72rem 0.9rem;
}
body.app-blank h1 {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}
body.app-blank .btn.btn-primary { padding: 0.75rem 1.25rem; font-size: 14px; width: 100%; }


/* =============================================
   18. PRINT — keep documents clean
   Invoice/receipt PDF views render standalone;
   this only guards on-screen printing.
   ============================================= */
@media print {
    .app-sidebar, .app-header, .app-toolbar,
    .btn, .toast-container, .modal-backdrop { display: none !important; }
    .card { border: 0 !important; box-shadow: none !important; }
    body  { background: #fff !important; }
}


/* =============================================
   19. RESPONSIVE — tablet & phone refinements
   ============================================= */
@media (max-width: 991.98px) {
    .card > .card-header {
        flex-wrap: wrap;
        gap: 0.65rem;
        padding: 0.85rem 1rem !important;
    }
    .card > .card-body { padding: 1rem; }
    .page-heading, .page-title h1 { font-size: 1.15rem !important; }

    /* Wide financial tables scroll inside the card, never the page */
    .card > .card-body > .table,
    .card > .card-body > .table-responsive > .table { min-width: 640px; }
    .card > .card-body > .table { display: block; overflow-x: auto; }
}
@media (max-width: 575.98px) {
    body { font-size: 13px; }
    .modal-body { padding: 1.1rem; }
    .modal-header, .modal-footer { padding: 0.9rem 1.1rem; }

    /* Search / filter controls in card headers go full width */
    .card > .card-header .form-control,
    .card > .card-header .form-select { width: 100% !important; }
}