/* ====================================================================
   AMTOSADMIN — Design Tokens
   ====================================================================
   All visual design parameters live here as CSS custom properties.

   To add a new theme in the future:
     1. Add a  body.theme-NAME { ... }  block at the bottom of this file
     2. Override only the variables you want to change
     3. Activate it by setting  document.body.className = 'theme-NAME'
        (or via a server-side cookie / user preference)
   ==================================================================== */

:root {

    /* ------------------------------------------------------------------
       Brand  (Aggregator Solutions palette)
    ------------------------------------------------------------------ */
    --color-primary:          #475569;   /* Neutral Slate (Default)    */
    --color-primary-hover:    #334155;
    --color-primary-dark:     #1E293B;
    --color-primary-light:    #E2E8F0;
    --color-accent:           #64748B;
    --color-accent-mid:       #475569;

    /* ------------------------------------------------------------------
       Neutral Palette
    ------------------------------------------------------------------ */
    --theme-bg-rgb:           248, 250, 252;
    --bg-intensity-factor:    1;
    --text-shift-factor:      0;
    --color-bg-surface:       #FFFFFF;
    --color-bg-header:        #FFFFFF;
    --color-bg-overlay:       rgba(0, 0, 0, 0.50);

    --color-border:           #E2E8F0;   /* Neutral borders             */
    --color-border-light:     #F1F5F9;

    /* ------------------------------------------------------------------
       Text
    ------------------------------------------------------------------ */
    --color-text-primary:     #1E293B;   /* Slate 900 (Dark)            */
    --color-text-secondary:   #475569;   /* Slate 600 (Medium)          */
    --color-text-muted:       #94A3B8;   /* Slate 400 (Light)           */
    --color-text-inverse:     #FFFFFF;
    --color-text-link:        #334155;

    /* ------------------------------------------------------------------
       Status / Semantic
    ------------------------------------------------------------------ */
    --color-success:          #10B981;
    --color-success-bg:       #ECFDF5;
    --color-warning:          #F59E0B;
    --color-warning-bg:       #FFFBEB;
    --color-danger:           #EF4444;
    --color-danger-bg:        #FEF2F2;
    --color-info:             #3B82F6;   /* Bright Blue                 */
    --color-info-bg:          #EFF6FF;

    /* Status badge text (dark-mode-aware, redefined in body.theme-dark) */
    --badge-success-text:     #155724;
    --badge-warning-text:     #856404;
    --badge-danger-text:      #721C24;
    --badge-pending-bg:       #E9ECEF;
    --badge-pending-text:     #495057;

    /* ------------------------------------------------------------------
       Typography
    ------------------------------------------------------------------ */
    --font-family:            'Noto Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    --font-size-xs:           11px;
    --font-size-sm:           12px;
    --font-size-base:         14px;
    --font-size-md:           16px;
    --font-size-lg:           18px;
    --font-size-xl:           24px;

    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;

    /* ------------------------------------------------------------------
       Spacing scale (multiples of 4px)
    ------------------------------------------------------------------ */
    --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;

    /* ------------------------------------------------------------------
       Border Radius
    ------------------------------------------------------------------ */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-pill:  9999px;

    /* ------------------------------------------------------------------
       Shadows
    ------------------------------------------------------------------ */
    --shadow-xs:  0 1px 2px  rgba(0, 0, 0, 0.05);
    --shadow-sm:  0 1px 4px  rgba(0, 0, 0, 0.07);
    --shadow-md:  0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 6px 20px rgba(0, 0, 0, 0.12);
    --shadow-xl:  0 8px 32px rgba(0, 0, 0, 0.18);

    /* ------------------------------------------------------------------
       Motion
    ------------------------------------------------------------------ */
    --transition-fast:   0.15s ease;
    --transition-base:   0.20s ease;
    --transition-slow:   0.30s ease;

    /* ------------------------------------------------------------------
       Layout — Header
    ------------------------------------------------------------------ */
    --header-height:          56px;
    --header-bg:              var(--color-bg-header);
    --header-border:          var(--color-border);
    --header-shadow:          var(--shadow-sm);

    /* ------------------------------------------------------------------
       Layout — Content
    ------------------------------------------------------------------ */
    --content-bg:             var(--color-bg-page);
    --content-padding:        var(--space-6);

    /* ------------------------------------------------------------------
       Component — Cards
    ------------------------------------------------------------------ */
    --card-bg:                var(--color-bg-surface);
    --card-border:            var(--color-border);
    --card-radius:            var(--radius-lg);
    --card-shadow:            var(--shadow-md);
    --card-shadow-hover:      var(--shadow-lg);
    --card-padding:           var(--space-6);

    /* ------------------------------------------------------------------
       Component — Buttons
    ------------------------------------------------------------------ */
    --btn-primary-bg:         var(--color-primary);
    --btn-primary-hover:      var(--color-primary-hover);
    --btn-primary-text:       var(--color-text-inverse);
    --btn-radius:             var(--radius-md);

    /* ------------------------------------------------------------------
       Component — Navigation Menu (DevExpress)
    ------------------------------------------------------------------ */
    --menu-bg:                var(--color-bg-header);
    --menu-text:              var(--color-text-primary);
    --menu-item-hover-bg:     var(--color-primary-light);
    --menu-item-hover-text:   var(--color-primary);
    --menu-submenu-bg:        var(--color-bg-surface);
    --menu-submenu-text:      var(--color-text-secondary);
    --menu-submenu-hover-bg:  var(--color-primary-light);

    /* ------------------------------------------------------------------
       Component — DevExpress Popups
    ------------------------------------------------------------------ */
    --popup-header-bg:        var(--color-primary);
    --popup-header-text:      var(--color-text-inverse);
    --popup-header-border:    var(--color-primary-hover);

    /* ------------------------------------------------------------------
       Component — Modals
    ------------------------------------------------------------------ */
    --modal-radius:           var(--radius-lg);
    --modal-shadow:           var(--shadow-xl);
    --modal-btn-danger-bg:    var(--color-danger);
    --modal-btn-cancel-bg:    #F5F5F5;

    /* ------------------------------------------------------------------
       Grid component tokens (mirrors ThemeHelper.GridHeader/AltRow/Btn)
    ------------------------------------------------------------------ */
    --grid-header-bg:         #E8EEF8;
    --grid-alt-row-bg:        #EDF2F8;
    --grid-btn-bg:            #E8EEF8;

    /* ------------------------------------------------------------------
       Scheduler event type colors
    ------------------------------------------------------------------ */
    --event-class:            #e05555;
    --event-exam:             #4a90d9;
    --event-event:            #56ab56;

    /* ------------------------------------------------------------------
       Login Page
    ------------------------------------------------------------------ */
    --login-bg-from:          #0A1F5C;   /* Deep Navy                   */
    --login-bg-mid:           #1A3A8F;   /* Rich Blue                   */
    --login-bg-to:            #2563C8;   /* Mid Blue                    */

    /* ------------------------------------------------------------------
       Layout — Navbar
    ------------------------------------------------------------------ */
    --navbar-height:               52px;
    --navbar-bg:                   #0A1F5C;   /* Deep Navy                */
    --navbar-text:                 #FFFFFF;
    --navbar-text-muted:           rgba(255,255,255,0.70);
    --navbar-hover-bg:             rgba(255,255,255,0.10);
    --navbar-active-bg:            rgba(59,130,246,0.25);
    --navbar-border:               rgba(255,255,255,0.07);
    --dropdown-bg:                 #FFFFFF;
    --dropdown-text:               #0A1F5C;
    --dropdown-hover-bg:           #EFF6FF;
    --dropdown-shadow:             0 8px 24px rgba(0,0,0,0.14);
    --dropdown-radius:             var(--radius-md);

    /* ------------------------------------------------------------------
       Layout — Topbar
    ------------------------------------------------------------------ */
    --topbar-height:               52px;
    --topbar-bg:                   var(--color-bg-surface);
    --topbar-border:               var(--color-border);
    --topbar-shadow:               var(--shadow-xs);

    /* ------------------------------------------------------------------
       Card accent gradients (for icon containers on dashboard)
    ------------------------------------------------------------------ */
    --card-accent-blue:    linear-gradient(135deg, #1A3A8F, #2563C8);
    --card-accent-green:   linear-gradient(135deg, #27ae60, #2ecc71);
    --card-accent-orange:  linear-gradient(135deg, #e67e22, #f39c12);
    --card-accent-purple:  linear-gradient(135deg, #8e44ad, #9b59b6);
    --card-accent-dark:    linear-gradient(135deg, #2c3e50, #34495e);
    --card-accent-red:     linear-gradient(135deg, #e74c3c, #c0392b);
    --card-accent-teal:    linear-gradient(135deg, #1abc9c, #16a085);
}

body {
    --color-bg-page: rgba(var(--theme-bg-rgb), calc(var(--bg-intensity-factor) * 0.25));
}


/* ====================================================================
   THEME PALETTES  —  applied via  body.theme-NAME  on <body>
   ==================================================================== */

/* ── Blue (Original Default) ────────────────────────────────────────── */
body.theme-blue,
[data-theme="blue"] {
    --color-primary:          #1A3A8F;
    --color-primary-hover:    #0A1F5C;
    --color-primary-dark:     #0A1F5C;
    --color-primary-light:    #BFDBFE;
    --color-accent:           #3B82F6;
    --color-accent-mid:       #2563C8;
    --theme-bg-rgb:           59, 130, 246;  /* Blue 500 */
    --color-border:           #BFDBFE;
    --color-border-light:     #F0F6FF;
    --color-text-primary:     color-mix(in srgb, #0A1F5C, white calc(var(--text-shift-factor) * 80%));
    --color-text-secondary:   color-mix(in srgb, #1E3A8A, white calc(var(--text-shift-factor) * 90%));
    --color-text-muted:       color-mix(in srgb, #3B82F6, white calc(var(--text-shift-factor) * 95%));
    --color-text-link:        #2563C8;
    --navbar-bg:              #0A1F5C;
    --dropdown-hover-bg:      #EFF6FF;
    --navbar-active-bg:       rgba(59, 130, 246, 0.25);
    --grid-header-bg:         #E8EEF8;
    --grid-alt-row-bg:        #EDF2F8;
    --grid-btn-bg:            #E8EEF8;
    --card-accent-blue:       linear-gradient(135deg, #1A3A8F, #2563C8);
    --color-bg-page:          rgba(var(--theme-bg-rgb), calc(var(--bg-intensity-factor) * 0.25));
}

/* ── Slate ──────────────────────────────────────────────────────────── */
body.theme-slate,
[data-theme="slate"] {
    --color-primary:          #475569;
    --color-primary-hover:    #334155;
    --color-primary-dark:     #1E293B;
    --color-primary-light:    #E2E8F0;
    --color-accent:           #64748B;
    --color-accent-mid:       #475569;
    --theme-bg-rgb:           100, 116, 139; /* Slate 500 */
    --color-border:           #D1D5DB;
    --color-border-light:     #E5E7EB;
    --color-text-primary:     color-mix(in srgb, #1E293B, white calc(var(--text-shift-factor) * 80%));
    --color-text-secondary:   color-mix(in srgb, #475569, white calc(var(--text-shift-factor) * 90%));
    --color-text-muted:       color-mix(in srgb, #64748B, white calc(var(--text-shift-factor) * 95%));
    --color-text-link:        #475569;
    --navbar-bg:              #1E293B;
    --dropdown-hover-bg:      #F1F5F9;
    --btn-primary-bg:         #475569;
    --btn-primary-hover:      #334155;
    --card-accent-blue:       linear-gradient(135deg, #475569, #64748B);
    --color-bg-page:          rgba(var(--theme-bg-rgb), calc(var(--bg-intensity-factor) * 0.25));
    --grid-header-bg:         #E2E8F0;
    --grid-alt-row-bg:        #F1F5F9;
    --grid-btn-bg:            #E2E8F0;
    --navbar-active-bg:       rgba(100, 116, 139, 0.25);
}

/* ── Forest ─────────────────────────────────────────────────────────── */
body.theme-forest,
[data-theme="forest"] {
    --color-primary:          #166534;
    --color-primary-hover:    #14532D;
    --color-primary-dark:     #052E16;
    --color-primary-light:    #BBF7D0;
    --color-accent:           #22C55E;
    --color-accent-mid:       #16A34A;
    --theme-bg-rgb:           34, 197, 94;   /* Green 500 */
    --color-border:           #BBF7D0;
    --color-border-light:     #F0FDF4;
    --color-text-primary:     color-mix(in srgb, #14532D, white calc(var(--text-shift-factor) * 80%));
    --color-text-secondary:   color-mix(in srgb, #334155, white calc(var(--text-shift-factor) * 90%));
    --color-text-muted:       color-mix(in srgb, #475569, white calc(var(--text-shift-factor) * 95%));
    --color-text-link:        #16A34A;
    --navbar-bg:              #14532D;
    --dropdown-hover-bg:      #DCFCE7;
    --btn-primary-bg:         #166534;
    --btn-primary-hover:      #14532D;
    --card-accent-blue:       linear-gradient(135deg, #166534, #22C55E);
    --color-bg-page:          rgba(var(--theme-bg-rgb), calc(var(--bg-intensity-factor) * 0.25));
    --grid-header-bg:         #DCFCE7;
    --grid-alt-row-bg:        #F0FDF4;
    --grid-btn-bg:            #DCFCE7;
    --navbar-active-bg:       rgba(34, 197, 94, 0.25);
}

/* ── Dark ───────────────────────────────────────────────────────────── */
body.theme-dark {
    --color-primary:          #5A8FD4;
    --color-primary-hover:    #4A7DBF;
    --color-primary-light:    #1E2D45;
    --color-accent:           #60A5FA;

    --theme-bg-base:          #0F1117;
    --theme-bg-rgb:           15, 17, 23;
    --color-bg-page:          rgba(var(--theme-bg-rgb), calc(var(--bg-intensity-factor) * 0.25));
    --color-bg-surface:       #1A1D23;
    --color-bg-header:        #13161C;
    --color-bg-overlay:       rgba(0, 0, 0, 0.70);

    --color-border:           #2D3240;
    --color-border-light:     #252932;

    --color-text-primary:     #F0F2F5;
    --color-text-secondary:   #9CA3AF;
    --color-text-muted:       #6B7280;
    --color-text-link:        #60A5FA;

    --navbar-bg:              #13161C;
    --dropdown-bg:            #1A1D23;
    --dropdown-text:          #F0F2F5;
    --dropdown-hover-bg:      #252932;
    --card-bg:                #1A1D23;
    --card-border:            #2D3240;
    --header-shadow:          none;

    /* Semantic backgrounds (light versions are unreadable on dark surfaces) */
    --color-success-bg:       #0D2E1F;
    --color-warning-bg:       #2A1E06;
    --color-danger-bg:        #2D0D0D;
    --color-info-bg:          #0C1B35;
    --modal-btn-cancel-bg:    #252932;

    /* Grid tokens */
    --grid-header-bg:         #252932;
    --grid-alt-row-bg:        #1E2128;
    --grid-btn-bg:            #252932;

    /* Badge text (needs lighter tones on dark backgrounds) */
    --badge-success-text:     #6EE7B7;
    --badge-warning-text:     #FCD34D;
    --badge-danger-text:      #FCA5A5;
    --badge-pending-bg:       #2D3240;
    --badge-pending-text:     #9CA3AF;

    /* Explicitly resolve chained variables so browsers don't fall back to :root values */
    --content-bg:             #0F1117;
    --topbar-bg:              #1A1D23;
    --header-bg:              #13161C;
    --menu-bg:                #13161C;
    --menu-submenu-bg:        #1A1D23;
}

/* ====================================================================
   COLOUR INTENSITY  —  applied via  data-intensity="..."  on <body>
   Stacks on top of the active theme palette.
   "normal" needs no block — it is the theme default.
   ==================================================================== */

/* ── Intensity Overrides ───────────────────────────────────────────── */
[data-intensity="light"] {
    --color-bg-page: rgba(var(--theme-bg-rgb), calc(var(--bg-intensity-factor) * 0.15));
}

[data-intensity="vivid"] {
    --color-bg-page: rgba(var(--theme-bg-rgb), calc(var(--bg-intensity-factor) * 0.40));
}

/* ── Blue + Light ───────────────────────────────────────────────────── */
body.theme-blue[data-intensity="light"],
body:not([class*="theme-"])[data-intensity="light"],
[data-theme="blue"][data-intensity="light"],
:not([data-theme])[data-intensity="light"],
.theme-blue .intensity-preview-light,
[data-theme="blue"] .intensity-preview-light {
    --color-primary:        #3D64C8;
    --color-primary-hover:  #2A4FA0;
    --color-primary-dark:   #1A3A8F;
    --color-accent:         #60A5FA;
    --color-accent-mid:     #3B82F6;
    --navbar-bg:            #1A3A8F;
    --color-primary-light:  #DBEAFE;
}

/* ── Blue + Vivid ───────────────────────────────────────────────────── */
body.theme-blue[data-intensity="vivid"],
body:not([class*="theme-"])[data-intensity="vivid"],
[data-theme="blue"][data-intensity="vivid"],
:not([data-theme])[data-intensity="vivid"],
.theme-blue .intensity-preview-vivid,
[data-theme="blue"] .intensity-preview-vivid {
    --color-primary:        #0F2260;
    --color-primary-hover:  #060F30;
    --color-primary-dark:   #060F30;
    --color-accent:         #1D4ED8;
    --color-accent-mid:     #1E40AF;
    --navbar-bg:            #060F30;
    --color-primary-light:  #BFDBFE;
}

/* ── Slate + Light ──────────────────────────────────────────────────── */
body.theme-slate[data-intensity="light"],
[data-theme="slate"][data-intensity="light"],
.theme-slate .intensity-preview-light,
[data-theme="slate"] .intensity-preview-light {
    --color-primary:        #64748B;
    --color-primary-hover:  #475569;
    --color-primary-dark:   #334155;
    --color-accent:         #94A3B8;
    --color-accent-mid:     #64748B;
    --navbar-bg:            #334155;
    --color-border:         #E5E7EB;
}

/* ── Slate + Vivid ──────────────────────────────────────────────────── */
body.theme-slate[data-intensity="vivid"],
[data-theme="slate"][data-intensity="vivid"],
.theme-slate .intensity-preview-vivid,
[data-theme="slate"] .intensity-preview-vivid {
    --color-primary:        #1E293B;
    --color-primary-hover:  #0F172A;
    --color-primary-dark:   #020617;
    --color-accent:         #475569;
    --color-accent-mid:     #334155;
    --navbar-bg:            #0F172A;
    --color-border:         #94A3B8;
}

/* ── Forest + Light ─────────────────────────────────────────────────── */
body.theme-forest[data-intensity="light"],
[data-theme="forest"][data-intensity="light"],
.theme-forest .intensity-preview-light,
[data-theme="forest"] .intensity-preview-light {
    --color-primary:        #2D8A54;
    --color-primary-hover:  #1E6B40;
    --color-primary-dark:   #166534;
    --color-accent:         #4ADE80;
    --color-accent-mid:     #22C55E;
    --navbar-bg:            #166534;
    --color-primary-light:  #DCFCE7;
    --color-border:         #BBF7D0;
}

/* ── Forest + Vivid ─────────────────────────────────────────────────── */
body.theme-forest[data-intensity="vivid"],
[data-theme="forest"][data-intensity="vivid"],
.theme-forest .intensity-preview-vivid,
[data-theme="forest"] .intensity-preview-vivid {
    --color-primary:        #052E16;
    --color-primary-hover:  #022c10;
    --color-primary-dark:   #020600;
    --color-accent:         #15803D;
    --color-accent-mid:     #166534;
    --navbar-bg:            #022c10;
    --color-border:         #4ADE80;
}

/* ====================================================================
   FONT STACKS  —  applied via  data-font="..."  on <body>
   ==================================================================== */
[data-font="Noto Sans Arabic"] { --font-family: 'Noto Sans Arabic', sans-serif; }
[data-font="Inter"]            { --font-family: 'Inter', sans-serif; }
[data-font="Roboto"]           { --font-family: 'Roboto', sans-serif; }