/* ═══════════════════════════════════════════════════════════════════════════════
 *
 *  EL MATAJER — ADMIN DESIGN TOKENS
 *  Single source of truth for all CSS custom properties.
 *  Load this file FIRST — before bootstrap, style.css, and all other sheets.
 *
 *  Structure:
 *  ├─ 1. Brand & Semantic Colors
 *  ├─ 2. Theme Surface Colors (dark default — overridden per mode below)
 *  ├─ 3. Spacing Scale
 *  ├─ 4. Typography Scale
 *  ├─ 5. Border Radius Scale
 *  ├─ 6. Elevation / Shadow Scale
 *  ├─ 7. Animation Tokens
 *  ├─ 8. Layout Dimensions (sidebar, topbar)
 *  ├─ 9. Z-Index Scale  ← single source for all layering
 *  ├─ 10. Scrollbar Tokens
 *  ├─ 11. Bootstrap Component Token Overrides (:root)
 *  ├─ 12. Compatibility / Legacy Aliases
 *  ├─ 13. Dark Mode Overrides  (body.dark-mode)
 *  └─ 14. Light Mode Overrides (body:not(.dark-mode))
 *
 * ═══════════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── 1. Brand & Semantic Colors ─────────────────────────────────────────── */
  --primary:            #1d6ef5;   /* canonical brand blue — updated from #5B3DF5 to match runtime */
  --primary-hover:      #1558d0;
  --success:            #16a34a;
  --danger:             #dc2626;
  --warning:            #f59e0b;
  --info:               #0ea5e9;
  --text-color:         #111827;
  --text-muted:         #6b7280;
  --border-color:       #e5e7eb;
  --bg-light:           #f9fafb;

  /* Status badge colors */
  --success-bg:   #dcfce7;
  --success-text: #16a34a;
  --danger-bg:    #fee2e2;
  --danger-text:  #dc2626;
  --info-bg:      #e0e7ff;
  --info-text:    #4f46e5;
  --warning-bg:   #fef3c7;
  --warning-text: #92400e;

  /* Semantic colour scale (--color-* namespace, absorbed from SECTION E3) */
  --color-success:        #10b981;
  --color-warning:        #f59e0b;
  --color-danger:         #ef4444;
  --color-info:           #3b82f6;
  --color-success-light:  rgba(16,185,129,0.1);
  --color-warning-light:  rgba(245,158,11,0.1);
  --color-danger-light:   rgba(239,68,68,0.1);
  --color-info-light:     rgba(59,130,246,0.1);

  /* ── 2. Theme Surface Colors (dark by default) ──────────────────────────── */
  --bg-primary:   #27272a;
  --bg-secondary: #323238;
  --card-bg:      #323238;
  --text-primary:   #f4f4f5;
  --text-secondary: #a1a1aa;
  --border-soft:  #27272a;
  --brand-color:  var(--primary);              /* resolves to #1d6ef5 */
  --brand-hover:  var(--primary-hover);        /* resolves to #1558d0 */
  --brand-light:  rgba(29, 110, 245, 0.15);
  --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.7);

  /* Compatibility aliases */
  --bg-surface:      var(--bg-secondary);
  --bg-card:         var(--card-bg);
  --bg-main:         var(--bg-primary);
  --bg-sidebar:      var(--bg-primary);
  --soft-bg:         var(--bg-secondary);
  --border-main:     var(--border-color);
  --border:          var(--border-color);
  --text-title:      var(--text-primary);
  --text-main:       var(--text-primary);
  --muted:           var(--text-muted);
  --card-radius:     var(--radius-lg);
  --accent:          var(--brand-color);
  --accent-soft:     rgba(91, 61, 245, .1);
  --p-800:           #3d28d0;
  --transition-base: var(--duration-base) var(--ease-base);
  --transition-fast: var(--duration-fast) var(--ease-base);

  /* ── 3. Spacing Scale ───────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── 4. Typography ──────────────────────────────────────────────────────── */
  --font-family:         "Zain", sans-serif;
  --bs-body-font-family: "Zain", sans-serif;
  --bs-body-font-size:   1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;

  --text-xs:     0.6875rem;   /* 11px */
  --text-sm:     0.8125rem;   /* 13px */
  --text-base:   0.875rem;    /* 14px */
  --text-md:     1rem;        /* 16px */
  --text-lg:     1.125rem;    /* 18px */
  --text-xl:     1.25rem;     /* 20px */
  --text-2xl:    1.5rem;      /* 24px */
  --text-3xl:    1.875rem;    /* 30px */
  --line-tight:  1.25;
  --line-normal: 1.5;
  --line-relaxed:1.7;

  /* ── 5. Border Radius Scale ─────────────────────────────────────────────── */
  --radius-sm:  6px;      /* = 0.375rem at 16px base */
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  20px;     /* = 1.25rem */
  --radius-2xl: 24px;     /* = 1.5rem  — absorbed from SECTION E3 */

  /* ── 6. Elevation / Shadow Scale ────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
  --shadow-md:    0 4px 10px rgba(0,0,0,.08);
  --shadow-xs:    0 1px 2px rgba(0,0,0,.04);

  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --elevation-2: 0 2px 4px rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.04);
  --elevation-3: 0 4px 8px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.06);
  --elevation-4: 0 8px 16px rgba(0,0,0,.1), 0 16px 32px rgba(0,0,0,.08);

  /* ── 7. Animation Tokens ────────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-base:  cubic-bezier(0.4, 0, 0.2, 1);
  --transition: .3s ease;

  /* ── 8. Layout Dimensions ───────────────────────────────────────────────── */
  --sidebar-width:           270px;
  --sidebar-collapsed-width: 60px;
  --hd-h:                    60px;   /* topbar height — used by fixed header + wrapper padding */
  --topbar-height:           64px;   /* legacy alias — prefer --hd-h */
  --content-offset:          var(--sidebar-width);
  --content-offset-rtl:      var(--sidebar-width);

  /* ── 9. Z-Index Scale ───────────────────────────────────────────────────── */
  /*
   *  Layering reference (Bootstrap defaults shown for context):
   *  Bootstrap dropdown:  1000
   *  Bootstrap sticky:    1020
   *  Bootstrap fixed:     1030
   *  Bootstrap modal-b:   1040
   *  Bootstrap offcanvas: 1045
   *  Bootstrap modal:     1050
   *  Bootstrap popover:   1070
   *  Bootstrap tooltip:   1080
   */
  --z-below:    -1;
  --z-base:      1;
  --z-raised:   10;
  --z-dropdown: 100;   /* local dropdowns inside cards */
  --z-sticky:  1000;   /* sticky elements */
  --z-topbar:  1030;   /* fixed topbar — same as Bootstrap fixed */
  --z-sidebar: 1031;   /* sidebar — 1 above topbar so it overlaps on mobile */
  --z-overlay: 1040;   /* sidebar mobile overlay */
  --z-modal:   1050;   /* modal dialogs */
  --z-popover: 1060;
  --z-toast:   1070;   /* toastr notifications — always on top */

  /* ── 10. Scrollbar Tokens ───────────────────────────────────────────────── */
  --scrollbar-width: 6px;
  --scrollbar-thumb: var(--border-color);
  --scrollbar-track: transparent;

  /* ── 11. Bootstrap Component Token Overrides ────────────────────────────── */
  --bs-primary:   var(--primary);
  --bs-secondary: #2C1F71;
  --bs-body-bg:   var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-card-bg:   var(--card-bg);
  --bs-card-border-color: var(--border-color);
  --bs-card-cap-bg: var(--bg-secondary);
  --bs-border-color: var(--border-color);
  --bs-modal-bg: var(--card-bg);
  --bs-modal-header-border-color: var(--border-color);
  --bs-modal-footer-border-color: var(--border-color);
  --bs-dropdown-bg: var(--card-bg);
  --bs-dropdown-border-color: var(--border-color);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: rgba(255,255,255,0.05);
  --bs-dropdown-divider-bg: var(--border-color);
  --bs-table-color: var(--text-primary);
  --bs-table-bg: var(--card-bg);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg: rgba(255,255,255,0.02);
  --bs-table-hover-bg: rgba(255,255,255,0.04);
  --bs-list-group-bg: var(--card-bg);
  --bs-list-group-border-color: var(--border-color);
  --bs-list-group-color: var(--text-primary);
  --bs-offcanvas-bg: var(--card-bg);
  --bs-accordion-bg: var(--card-bg);
  --bs-accordion-border-color: var(--border-color);
  --bs-accordion-btn-color: var(--text-primary);
  --bs-accordion-color: var(--text-primary);
  --bs-pagination-bg: var(--card-bg);
  --bs-pagination-border-color: var(--border-color);
  --bs-pagination-color: var(--text-secondary);
  --bs-pagination-hover-bg: rgba(255,255,255,0.06);
  --bs-pagination-hover-color: var(--text-primary);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-nav-tabs-border-color: var(--border-color);
  --bs-nav-tabs-link-active-bg: var(--card-bg);
  --bs-nav-tabs-link-active-border-color: var(--border-color);
  --bs-input-bg: var(--bg-secondary);
  --bs-input-border-color: var(--border-color);
  --bs-input-color: var(--text-primary);
  --bs-input-placeholder-color: var(--text-muted);
  --bs-input-focus-border-color: var(--primary);

  /* ── 12a. Pre-existing orphaned vars — fixed here (were always undefined) ── */
  --white:    #ffffff;           /* used in .theme-label color */
  --bg-white: #ffffff;           /* used in legacy sidebar/nav background */
  --bg-date:  var(--border-color); /* used in .notes-box dotted border */
  --bg-hover: rgba(255,255,255,.05); /* generic hover background in dark mode */

  /* ── 12. Legacy Bootstrap aliases (Bootstrap 5 reset values kept for compat) */
  --bg-body: #27272a;
  --bs-border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #374366;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
  --bs-box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
}

/* ── 13. Dark Mode Overrides ─────────────────────────────────────────────────── */
body.dark-mode {
  --bg-primary:    #27272a;
  --bg-secondary:  #323238;
  --bg-light:      #1e1e22;
  --card-bg:       #323238;
  --text-primary:  #f4f4f5;
  --text-secondary:#a1a1aa;
  --text-color:    #f4f4f5;
  --text-muted:    #71717a;
  --border-color:  #3f3f46;
  --border-soft:   #3f3f46;
  --shadow-sm:     0 1px 2px 0 rgb(0 0 0 / 0.5);
  --shadow-md:     0 4px 6px -1px rgb(0 0 0 / 0.6);
  --brand-light:   rgba(91, 61, 245, 0.15);
  --bs-body-bg:    #27272a;
  --bs-body-color: #f4f4f5;
}

/* ── 14. Light Mode Overrides ────────────────────────────────────────────────── */
body:not(.dark-mode) {
  --bg-primary:    #f1f5f9;
  --bg-secondary:  #ffffff;
  --bg-body:       #f1f5f9;
  --bg-light:      #f9fafb;
  --card-bg:       #ffffff;
  --text-primary:  #111827;
  --text-secondary:#374151;
  --text-color:    #111827;
  --text-muted:    #6b7280;
  --border-color:  #e5e7eb;
  --border-soft:   #f3f4f6;
  --brand-light:   rgba(29, 110, 245, 0.08);
  --shadow-sm:     0 2px 4px rgba(15,23,42,0.04);
  --shadow-md:     0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:     0 12px 24px rgba(15,23,42,0.08), 0 4px 8px rgba(15,23,42,0.04);
  --accent-soft:   rgba(29, 110, 245, 0.08);

  /* Bootstrap component overrides — light mode */
  --bs-body-bg:                     #f1f5f9;
  --bs-body-color:                  #374151;
  --bs-card-bg:                     #ffffff;
  --bs-card-border-color:           #e5e7eb;
  --bs-card-cap-bg:                 #f9fafb;
  --bs-border-color:                #e5e7eb;
  --bs-modal-bg:                    #ffffff;
  --bs-modal-header-border-color:   #e5e7eb;
  --bs-modal-footer-border-color:   #e5e7eb;
  --bs-dropdown-bg:                 #ffffff;
  --bs-dropdown-border-color:       #e5e7eb;
  --bs-dropdown-link-color:         #374151;
  --bs-dropdown-link-hover-bg:      #f3f4f6;
  --bs-dropdown-divider-bg:         #e5e7eb;
  --bs-table-color:                 #374151;
  --bs-table-bg:                    #ffffff;
  --bs-table-border-color:          #e5e7eb;
  --bs-table-striped-bg:            rgba(0,0,0,0.02);
  --bs-table-hover-bg:              rgba(0,0,0,0.02);
  --bs-list-group-bg:               #ffffff;
  --bs-list-group-border-color:     #e5e7eb;
  --bs-list-group-color:            #374151;
  --bs-offcanvas-bg:                #ffffff;
  --bs-accordion-bg:                #ffffff;
  --bs-accordion-border-color:      #e5e7eb;
  --bs-accordion-btn-color:         #111827;
  --bs-accordion-color:             #374151;
  --bs-pagination-bg:               #ffffff;
  --bs-pagination-border-color:     #e5e7eb;
  --bs-pagination-color:            #374151;
  --bs-pagination-hover-bg:         #f3f4f6;
  --bs-pagination-hover-color:      #111827;
  --bs-input-bg:                    #ffffff;
  --bs-input-border-color:          #e5e7eb;
  --bs-input-color:                 #111827;
  --bs-input-placeholder-color:     #9ca3af;

  /* Sidebar — light mode */
  --sb-bg:        #ffffff;
  --sb-border:    #e5e7eb;
  --sb-text:      #374151;
  --sb-text-hover:#111827;
  --sb-active-bg: rgba(91, 61, 245, 0.08);
  --sb-active-text: var(--primary);
}