/* ============================================================
   BASE THEME TOKENS — Default skin + shared contract
   ============================================================

   Loaded on EVERY page, BEFORE any skin stylesheet.

   Components across the app consume two design-token families:

     --nm-*        neumorphic family (defined by neumorphic.css)
     --glass-* /
     --accent-* /
     --text-* ...  glass family    (defined by custom.css)

   Only one skin stylesheet is ever loaded at a time, so a component
   that reads a token from the *other* family used to render with an
   undefined value (transparent background, missing shadow, invisible
   text). On the "Default" skin neither file loads, so every token was
   undefined.

   This file defines the full contract for BOTH families in a flat,
   AdminLTE-native style for light mode and `body.dark-mode`. Skin
   stylesheets load afterwards and override whatever they care about,
   so:

     - Default skin      -> these values (flat AdminLTE look)
     - Glass skin        -> custom.css overrides the glass family,
                            these values back the --nm-* family
     - Neumorphic skin   -> neumorphic.css overrides --nm-*,
                            these values back the glass family

   Every skin therefore has a complete set of tokens in both light and
   dark mode. Declarations only — no element selectors live here, so
   loading this file never changes AdminLTE's own appearance.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   LIGHT MODE
   ════════════════════════════════════════════════════════════ */
:root {
    /* ── Neumorphic family: surface ───────────────────────── */
    --nm-bg: #ffffff;

    /* Raw shadow colours. The "light" side is transparent so the
       dual-shadow recipes used by components collapse into a single
       flat drop shadow instead of a neumorphic highlight. */
    --nm-shadow-light: rgba(255, 255, 255, 0);
    --nm-shadow-dark: rgba(0, 0, 0, 0.14);

    /* ── Neumorphic family: composite shadows ─────────────── */
    --nm-shadow-convex:
        0 2px 4px rgba(0, 0, 0, 0.10),
        0 4px 8px rgba(0, 0, 0, 0.06);

    --nm-shadow-concave: inset 0 1px 3px rgba(0, 0, 0, 0.12);

    --nm-shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.10);

    --nm-shadow-sm-concave: inset 0 1px 2px rgba(0, 0, 0, 0.10);

    --nm-shadow-sm-hover:
        0 2px 5px rgba(0, 0, 0, 0.12),
        0 4px 10px rgba(0, 0, 0, 0.10);

    --nm-shadow-lg:
        0 2px 6px rgba(0, 0, 0, 0.10),
        0 8px 20px rgba(0, 0, 0, 0.08);

    --nm-shadow-lg-hover:
        0 4px 10px rgba(0, 0, 0, 0.14),
        0 12px 28px rgba(0, 0, 0, 0.12);

    /* ── Neumorphic family: shape ─────────────────────────── */
    --nm-radius: 8px;
    --nm-radius-sm: 6px;
    --nm-radius-pill: 50px;

    /* ── Neumorphic family: accents ───────────────────────── */
    --nm-accent-1: #007bff;
    --nm-accent-2: #6f42c1;
    --nm-accent-3: #e83e8c;
    --nm-accent-glow: rgba(0, 123, 255, 0.15);

    /* ── Neumorphic family: text ──────────────────────────── */
    --nm-text-primary: #212529;
    --nm-text-secondary: #495057;
    --nm-text-muted: #6c757d;
    --nm-text-inverse: #ffffff;

    --nm-border: rgba(0, 0, 0, 0.125);

    /* ── Neumorphic family: chrome ────────────────────────── */
    --nm-sidebar-bg: #343a40;
    --nm-sidebar-text: #c2c7d0;
    --nm-sidebar-item-hover: rgba(255, 255, 255, 0.10);
    --nm-sidebar-active-bg: rgba(255, 255, 255, 0.15);

    --nm-header-bg: #ffffff;
    --nm-footer-bg: #ffffff;

    --nm-modal-bg: #ffffff;
    --nm-dropdown-bg: #ffffff;
    --nm-toast-bg: #ffffff;
    --nm-select2-bg: #ffffff;

    /* ── Neumorphic family: tables ────────────────────────── */
    --nm-table-head-bg: rgba(0, 0, 0, 0.03);
    --nm-table-head-color: var(--nm-text-primary);
    --nm-table-row-hover: rgba(0, 0, 0, 0.04);
    --nm-table-stripe: rgba(0, 0, 0, 0.02);
    --nm-table-border: #dee2e6;

    /* ── Neumorphic family: inputs ────────────────────────── */
    --nm-input-bg: #ffffff;
    --nm-input-focus-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    --nm-input-text: #495057;

    /* ── Neumorphic family: lists ─────────────────────────── */
    --nm-list-bg: #ffffff;
    --nm-list-border: rgba(0, 0, 0, 0.125);
    --nm-list-hover: rgba(0, 0, 0, 0.03);
    --nm-list-active: rgba(0, 123, 255, 0.10);

    /* ── Neumorphic family: pagination ────────────────────── */
    --nm-pg-bg: #ffffff;
    --nm-pg-border: #dee2e6;
    --nm-pg-hover-bg: #e9ecef;
    --nm-pg-active-bg: var(--nm-accent-1);
    --nm-pg-text: var(--nm-accent-1);

    --nm-progress-track: #e9ecef;

    --nm-scrollbar-thumb: rgba(0, 0, 0, 0.20);
    --nm-scrollbar-hover: rgba(0, 0, 0, 0.35);

    /* ── Glass family: surfaces ───────────────────────────── */
    --glass-bg: #ffffff;
    --glass-bg-hover: #f8f9fa;
    --glass-bg-active: #e9ecef;
    --glass-border: rgba(0, 0, 0, 0.125);
    --glass-border-sub: rgba(0, 0, 0, 0.075);
    --glass-shadow:
        0 2px 6px rgba(0, 0, 0, 0.10),
        0 8px 20px rgba(0, 0, 0, 0.08);
    --glass-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10);

    /* Flat skin has no frosting — `backdrop-filter: none` is a valid,
       cheap no-op, so glass components degrade to solid panels. */
    --glass-blur: none;
    --glass-blur-heavy: none;

    --glass-radius: 8px;
    --glass-radius-sm: 6px;

    /* ── Glass family: accents ────────────────────────────── */
    --accent-1: #007bff;
    --accent-2: #6f42c1;
    --accent-3: #e83e8c;
    --accent-glow: rgba(0, 123, 255, 0.15);
    --apple-blue: #007bff;

    /* ── Glass family: text ───────────────────────────────── */
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --text-inverse: #ffffff;
    --glass-text: #212529;

    /* ── Glass family: page background ────────────────────── */
    --bg-base: #f4f6f9;
    --bg-grad-1: transparent;
    --bg-grad-2: transparent;
    --bg-grad-3: transparent;
    --bg-grad-4: transparent;

    /* ── Glass family: chrome ─────────────────────────────── */
    --sidebar-glass-bg: #343a40;
    --sidebar-glass-border: rgba(0, 0, 0, 0.20);
    --sidebar-text: #c2c7d0;
    --sidebar-item-hover: rgba(255, 255, 255, 0.10);
    --sidebar-active-bg: rgba(255, 255, 255, 0.15);

    --header-bg: #ffffff;
    --footer-bg: #ffffff;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --toast-bg: #ffffff;
    --select2-bg: #ffffff;

    /* ── Glass family: tables ─────────────────────────────── */
    --table-head-bg: rgba(0, 0, 0, 0.03);
    --table-head-color: #212529;
    --table-row-hover: rgba(0, 0, 0, 0.04);
    --table-stripe: rgba(0, 0, 0, 0.02);
    --table-border: #dee2e6;

    /* ── Glass family: misc ───────────────────────────────── */
    --progress-track: #e9ecef;
    --overlay-bg: rgba(255, 255, 255, 0.60);
    --scrollbar-thumb: rgba(0, 0, 0, 0.20);
    --scrollbar-hover: rgba(0, 0, 0, 0.35);

    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    --input-text: #495057;

    --list-bg: #ffffff;
    --list-border: rgba(0, 0, 0, 0.125);
    --list-hover: rgba(0, 0, 0, 0.03);
    --list-active: rgba(0, 123, 255, 0.10);

    --pg-bg: #ffffff;
    --pg-border: #dee2e6;
    --pg-hover-bg: #e9ecef;
    --pg-active-bg: #007bff;
    --pg-text: #007bff;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE  (body.dark-mode)
   ════════════════════════════════════════════════════════════ */
body.dark-mode {
    /* ── Neumorphic family: surface ───────────────────────── */
    --nm-bg: #343a40;

    --nm-shadow-light: rgba(255, 255, 255, 0);
    --nm-shadow-dark: rgba(0, 0, 0, 0.50);

    --nm-shadow-convex:
        0 2px 4px rgba(0, 0, 0, 0.40),
        0 4px 8px rgba(0, 0, 0, 0.28);

    --nm-shadow-concave: inset 0 1px 3px rgba(0, 0, 0, 0.45);

    --nm-shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.30);

    --nm-shadow-sm-concave: inset 0 1px 2px rgba(0, 0, 0, 0.40);

    --nm-shadow-sm-hover:
        0 2px 5px rgba(0, 0, 0, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.38);

    --nm-shadow-lg:
        0 2px 6px rgba(0, 0, 0, 0.45),
        0 8px 20px rgba(0, 0, 0, 0.35);

    --nm-shadow-lg-hover:
        0 4px 10px rgba(0, 0, 0, 0.55),
        0 12px 28px rgba(0, 0, 0, 0.45);

    /* ── Neumorphic family: accents ───────────────────────── */
    --nm-accent-1: #6ea8fe;
    --nm-accent-2: #b197fc;
    --nm-accent-3: #f783ac;
    --nm-accent-glow: rgba(110, 168, 254, 0.18);

    /* ── Neumorphic family: text ──────────────────────────── */
    --nm-text-primary: rgba(255, 255, 255, 0.90);
    --nm-text-secondary: rgba(255, 255, 255, 0.65);
    --nm-text-muted: rgba(255, 255, 255, 0.45);
    --nm-text-inverse: #212529;

    --nm-border: rgba(255, 255, 255, 0.12);

    /* ── Neumorphic family: chrome ────────────────────────── */
    --nm-sidebar-bg: #343a40;
    --nm-sidebar-text: rgba(255, 255, 255, 0.85);
    --nm-sidebar-item-hover: rgba(255, 255, 255, 0.10);
    --nm-sidebar-active-bg: rgba(255, 255, 255, 0.16);

    --nm-header-bg: #343a40;
    --nm-footer-bg: #343a40;

    --nm-modal-bg: #343a40;
    --nm-dropdown-bg: #3f474e;
    --nm-toast-bg: #3f474e;
    --nm-select2-bg: #3f474e;

    /* ── Neumorphic family: tables ────────────────────────── */
    --nm-table-head-bg: rgba(255, 255, 255, 0.05);
    --nm-table-head-color: var(--nm-text-primary);
    --nm-table-row-hover: rgba(255, 255, 255, 0.05);
    --nm-table-stripe: rgba(255, 255, 255, 0.03);
    --nm-table-border: rgba(255, 255, 255, 0.12);

    /* ── Neumorphic family: inputs ────────────────────────── */
    --nm-input-bg: #454d55;
    --nm-input-focus-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.30);
    --nm-input-text: rgba(255, 255, 255, 0.90);

    /* ── Neumorphic family: lists ─────────────────────────── */
    --nm-list-bg: #343a40;
    --nm-list-border: rgba(255, 255, 255, 0.12);
    --nm-list-hover: rgba(255, 255, 255, 0.05);
    --nm-list-active: rgba(110, 168, 254, 0.18);

    /* ── Neumorphic family: pagination ────────────────────── */
    --nm-pg-bg: #343a40;
    --nm-pg-border: rgba(255, 255, 255, 0.12);
    --nm-pg-hover-bg: rgba(255, 255, 255, 0.08);
    --nm-pg-active-bg: var(--nm-accent-1);
    --nm-pg-text: var(--nm-accent-1);

    --nm-progress-track: rgba(255, 255, 255, 0.10);

    --nm-scrollbar-thumb: rgba(255, 255, 255, 0.20);
    --nm-scrollbar-hover: rgba(255, 255, 255, 0.35);

    /* ── Glass family: surfaces ───────────────────────────── */
    --glass-bg: #343a40;
    --glass-bg-hover: #3f474e;
    --glass-bg-active: #4b545c;
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-sub: rgba(255, 255, 255, 0.08);
    --glass-shadow:
        0 2px 6px rgba(0, 0, 0, 0.45),
        0 8px 20px rgba(0, 0, 0, 0.35);
    --glass-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);

    --glass-blur: none;
    --glass-blur-heavy: none;

    /* ── Glass family: accents ────────────────────────────── */
    --accent-1: #6ea8fe;
    --accent-2: #b197fc;
    --accent-3: #f783ac;
    --accent-glow: rgba(110, 168, 254, 0.18);
    --apple-blue: #6ea8fe;

    /* ── Glass family: text ───────────────────────────────── */
    --text-primary: rgba(255, 255, 255, 0.90);
    --text-secondary: rgba(255, 255, 255, 0.65);
    --text-muted: rgba(255, 255, 255, 0.45);
    --text-inverse: #212529;
    --glass-text: rgba(255, 255, 255, 0.90);

    /* ── Glass family: page background ────────────────────── */
    --bg-base: #454d55;

    /* ── Glass family: chrome ─────────────────────────────── */
    --sidebar-glass-bg: #343a40;
    --sidebar-glass-border: rgba(255, 255, 255, 0.12);
    --sidebar-text: rgba(255, 255, 255, 0.85);
    --sidebar-item-hover: rgba(255, 255, 255, 0.10);
    --sidebar-active-bg: rgba(255, 255, 255, 0.16);

    --header-bg: #343a40;
    --footer-bg: #343a40;
    --modal-bg: #343a40;
    --dropdown-bg: #3f474e;
    --toast-bg: #3f474e;
    --select2-bg: #3f474e;

    /* ── Glass family: tables ─────────────────────────────── */
    --table-head-bg: rgba(255, 255, 255, 0.05);
    --table-head-color: rgba(255, 255, 255, 0.90);
    --table-row-hover: rgba(255, 255, 255, 0.05);
    --table-stripe: rgba(255, 255, 255, 0.03);
    --table-border: rgba(255, 255, 255, 0.12);

    /* ── Glass family: misc ───────────────────────────────── */
    --progress-track: rgba(255, 255, 255, 0.10);
    --overlay-bg: rgba(0, 0, 0, 0.50);
    --scrollbar-thumb: rgba(255, 255, 255, 0.20);
    --scrollbar-hover: rgba(255, 255, 255, 0.35);

    --input-bg: #454d55;
    --input-border: rgba(255, 255, 255, 0.16);
    --input-focus-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.30);
    --input-text: rgba(255, 255, 255, 0.90);

    --list-bg: #343a40;
    --list-border: rgba(255, 255, 255, 0.12);
    --list-hover: rgba(255, 255, 255, 0.05);
    --list-active: rgba(110, 168, 254, 0.18);

    --pg-bg: #343a40;
    --pg-border: rgba(255, 255, 255, 0.12);
    --pg-hover-bg: rgba(255, 255, 255, 0.08);
    --pg-active-bg: #6ea8fe;
    --pg-text: #6ea8fe;
}