/**
 * ================================================================
 * أكاديمية جدير - نظام التوكنات والتصميم المركزي (Master Design Tokens)
 * Light Theme & Solarized Dark Theme (3-Color Executive Palette)
 * ================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap');

:root,
[data-theme="light"] {
  /* Surface Hierarchy (Canvas, Cards, Elevated) */
  --bg-app: #f1f5f9;
  --bg-card: #ffffff;
  --bg-secondary: #e2e8f0;
  --bg-tertiary: #cbd5e1;
  --bg-subtle: #f8fafc;
  --bg-hover: #e2e8f0;
  --bg-active: #cbd5e1;

  --surface-glass: rgba(255, 255, 255, 0.96);
  --surface-glass-border: rgba(203, 213, 225, 0.85);
  --surface-elevated: #ffffff;
  --surface-elevated-hover: #f8fafc;
  --surface-rail: #ffffff;

  /* Executive Layout Ergonomics (Laptop High-Density Spec) */
  --header-height: 40px;
  --sidebar-width: 172px;
  --nav-group-header-height: 28px;
  --nav-item-height: 25px;

  /* Borders */
  --border-subtle: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-strong: #94a3b8;
  --border-hover: #059669;
  --border-focus: #059669;

  /* Typography Colors */
  --text-primary: #0f172a;
  --text-main: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --text-inverse: #ffffff;

  /* Brand & Status Accents */
  --accent-emerald: #059669;
  --accent-emerald-hover: #047857;
  --accent-emerald-light: rgba(5, 150, 105, 0.09);
  --accent-emerald-border: rgba(5, 150, 105, 0.25);

  --accent-blue: #2563eb;
  --accent-blue-hover: #1d4ed8;
  --accent-blue-light: rgba(37, 99, 235, 0.09);
  --accent-blue-border: rgba(37, 99, 235, 0.25);

  --accent-amber: #d97706;
  --accent-amber-hover: #b45309;
  --accent-amber-light: rgba(217, 119, 6, 0.09);
  --accent-amber-border: rgba(217, 119, 6, 0.25);

  --accent-rose: #e11d48;
  --accent-rose-hover: #be123c;
  --accent-rose-light: rgba(225, 29, 72, 0.09);
  --accent-rose-border: rgba(225, 29, 72, 0.25);

  --accent-purple: #7c3aed;
  --accent-purple-hover: #6d28d9;
  --accent-purple-light: rgba(124, 58, 237, 0.09);
  --accent-purple-border: rgba(124, 58, 237, 0.25);

  /* Inputs & Forms */
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-border-hover: #94a3b8;
  --input-focus-border: #059669;
  --input-height: 32px;
  --input-height-sm: 28px;

  /* Radiuses */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

  /* Modals Standard */
  --modal-backdrop-bg: rgba(15, 23, 42, 0.65);
  --modal-bg: var(--bg-card);
  --modal-border: var(--border-medium);
  --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);

  /* Universal Window Standard Sizes (Full Executive Unified Standard) */
  --win-width-pro: min(98vw, calc(100vw - 24px));
  --win-max-width-pro: min(98vw, calc(100vw - 24px));
  --win-height-pro: min(95vh, calc(100vh - 24px));
  --win-max-height-pro: min(95vh, calc(100vh - 24px));
}

[data-theme="dark"] {
  /* ================= SOLARIZED DARK — 3-COLOR BALANCED PALETTE =================
     Surface Base:  #111a2e (warm navy, not pure black)
     Primary:       #10b981 (emerald)
     Functional:    #3b82f6 (sapphire blue)
     ================= */
  --bg-app: #0c1322;
  --bg-card: #111a2e;
  --bg-secondary: #182338;
  --bg-tertiary: #243044;
  --bg-subtle: #141e32;
  --bg-hover: #1e2c45;
  --bg-active: #283a54;

  --surface-glass: rgba(17, 26, 46, 0.96);
  --surface-glass-border: rgba(40, 58, 84, 0.85);
  --surface-elevated: #182338;
  --surface-elevated-hover: #1e2c45;
  --surface-rail: #111a2e;

  --border-subtle: #1c2a42;
  --border-medium: #283a54;
  --border-strong: #3a4f6e;
  --border-hover: #10b981;
  --border-focus: #10b981;

  --text-primary: #e8edf5;
  --text-main: #e8edf5;
  --text-secondary: #9caabd;
  --text-muted: #64748b;
  --text-subtle: #475569;
  --text-inverse: #0f172a;

  --accent-emerald: #10b981;
  --accent-emerald-hover: #059669;
  --accent-emerald-light: rgba(16, 185, 129, 0.16);
  --accent-emerald-border: rgba(16, 185, 129, 0.35);

  --accent-blue: #3b82f6;
  --accent-blue-hover: #2563eb;
  --accent-blue-light: rgba(59, 130, 246, 0.16);
  --accent-blue-border: rgba(59, 130, 246, 0.35);

  --accent-amber: #f59e0b;
  --accent-amber-hover: #d97706;
  --accent-amber-light: rgba(245, 158, 11, 0.16);
  --accent-amber-border: rgba(245, 158, 11, 0.35);

  --accent-rose: #f43f5e;
  --accent-rose-hover: #e11d48;
  --accent-rose-light: rgba(244, 63, 94, 0.16);
  --accent-rose-border: rgba(244, 63, 94, 0.35);

  --accent-purple: #a855f7;
  --accent-purple-hover: #9333ea;
  --accent-purple-light: rgba(168, 85, 247, 0.16);
  --accent-purple-border: rgba(168, 85, 247, 0.35);

  --input-bg: #141e32;
  --input-border: #243044;
  --input-border-hover: #3a4f6e;
  --input-focus-border: #10b981;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.65);

  --modal-backdrop-bg: rgba(6, 10, 18, 0.82);
  --modal-bg: var(--bg-card);
  --modal-border: var(--border-medium);
  --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
}

/* ================================================================
   UI Density Modes for Laptop & Multi-Resolution Display Tuning
   ================================================================ */

/* Default & Compact Mode (Optimized for 1366x768 to 1920x1080 Laptop Screens) */
:root,
[data-density="compact"] {
  --header-height: 38px;
  --sidebar-width: 168px;
  --nav-group-header-height: 26px;
  --nav-item-height: 23px;
  --input-height: 30px;
  --input-height-sm: 26px;
  --table-cell-py: 5px;
  --table-cell-px: 8px;
  --table-row-min-h: 29px;
  --card-padding-compact: 8px 12px;
}

/* Ultra Compact Mode (Maximum rows and data density on compact/split laptop screens) */
[data-density="ultra"] {
  --header-height: 34px;
  --sidebar-width: 156px;
  --nav-group-header-height: 24px;
  --nav-item-height: 21px;
  --input-height: 27px;
  --input-height-sm: 24px;
  --table-cell-py: 3px;
  --table-cell-px: 6px;
  --table-row-min-h: 25px;
  --card-padding-compact: 6px 10px;
}

/* Normal / Comfortable Mode (For large external desktop monitors 24"+) */
[data-density="normal"] {
  --header-height: 44px;
  --sidebar-width: 184px;
  --nav-group-header-height: 29px;
  --nav-item-height: 26px;
  --input-height: 34px;
  --input-height-sm: 28px;
  --table-cell-py: 8px;
  --table-cell-px: 12px;
  --table-row-min-h: 36px;
  --card-padding-compact: 14px 18px;
}