/* ========================================================================
   ALWADI ADMIN DASHBOARD — Design Tokens / CSS Variables
   ======================================================================== */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ---- Brand Colors ---- */
    --primary:            #1B6FA8;
    --primary-hover:      #145580;
    --primary-light:      #E8F4FD;
    --primary-rgb:        27, 111, 168;

    --secondary:          #F59E0B;
    --secondary-hover:    #D97706;
    --secondary-light:    #FEF3C7;

    /* ---- Semantic Colors ---- */
    --success:            #10B981;
    --success-light:      #D1FAE5;
    --danger:             #EF4444;
    --danger-light:       #FEE2E2;
    --warning:            #F59E0B;
    --warning-light:      #FEF3C7;
    --info:               #6366F1;
    --info-light:         #E0E7FF;

    /* ---- Surface / Background ---- */
    --surface:            #F1F5F9;
    --surface-card:       #FFFFFF;
    --surface-hover:      #F8FAFC;
    --surface-border:     #E2E8F0;

    /* ---- Sidebar ---- */
    --sidebar-bg:         #0F172A;
    --sidebar-hover:      #1E293B;
    --sidebar-active:     rgba(27, 111, 168, 0.15);
    --sidebar-text:       #94A3B8;
    --sidebar-text-active:#FFFFFF;
    --sidebar-width:      260px;
    --sidebar-collapsed:  72px;

    /* ---- Navbar ---- */
    --navbar-height:      64px;
    --navbar-bg:          #FFFFFF;
    --navbar-shadow:      0 1px 3px rgba(0,0,0,0.08);

    /* ---- Text ---- */
    --text-primary:       #1E293B;
    --text-secondary:     #64748B;
    --text-muted:         #94A3B8;
    --text-white:         #FFFFFF;

    /* ---- Typography ---- */
    --font-en:            'Inter', sans-serif;
    --font-ar:            'Cairo', sans-serif;
    --font-family:        var(--font-en);

    --fs-xs:              0.75rem;    /* 12px */
    --fs-sm:              0.8125rem;  /* 13px */
    --fs-base:            0.875rem;   /* 14px */
    --fs-md:              1rem;       /* 16px */
    --fs-lg:              1.125rem;   /* 18px */
    --fs-xl:              1.25rem;    /* 20px */
    --fs-2xl:             1.5rem;     /* 24px */
    --fs-3xl:             2rem;       /* 32px */

    /* ---- Spacing ---- */
    --space-1:            0.25rem;    /* 4px */
    --space-2:            0.5rem;     /* 8px */
    --space-3:            0.75rem;    /* 12px */
    --space-4:            1rem;       /* 16px */
    --space-5:            1.25rem;    /* 20px */
    --space-6:            1.5rem;     /* 24px */
    --space-8:            2rem;       /* 32px */
    --space-10:           2.5rem;     /* 40px */
    --space-12:           3rem;       /* 48px */

    /* ---- Border Radius ---- */
    --radius-sm:          0.375rem;
    --radius:             0.5rem;
    --radius-lg:          0.75rem;
    --radius-xl:          1rem;
    --radius-2xl:         1.5rem;
    --radius-full:        9999px;

    /* ---- Shadows ---- */
    --shadow-xs:          0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:          0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow:             0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-md:          0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-lg:          0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    /* ---- Transitions ---- */
    --transition-fast:    150ms ease;
    --transition:         250ms ease;
    --transition-slow:    350ms ease;
}

/* ========================================================================
   DARK THEME
   ======================================================================== */
[data-theme="dark"] {
    --surface:            #0F172A;
    --surface-card:       #1E293B;
    --surface-hover:      #334155;
    --surface-border:     #334155;

    --navbar-bg:          #1E293B;
    --navbar-shadow:      0 1px 3px rgba(0,0,0,0.3);

    --text-primary:       #F1F5F9;
    --text-secondary:     #94A3B8;
    --text-muted:         #64748B;

    --primary-light:      rgba(27, 111, 168, 0.2);
    --success-light:      rgba(16, 185, 129, 0.15);
    --danger-light:       rgba(239, 68, 68, 0.15);
    --warning-light:      rgba(245, 158, 11, 0.15);
    --info-light:         rgba(99, 102, 241, 0.15);
    --secondary-light:    rgba(245, 158, 11, 0.15);

    --shadow-xs:          0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm:          0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow:             0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
    --shadow-md:          0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.2);
    --shadow-lg:          0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.2);
}

/* ========================================================================
   ARABIC / RTL Mode
   ======================================================================== */
[dir="rtl"] {
    --font-family: var(--font-ar);
}

/* ========================================================================
   BASE RESETS
   ======================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background-color: var(--surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--transition), color var(--transition);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* Do not recolor Dashboard action buttons on hover (primary/hover match blanks white labels) */
a:hover:not(.btn-primary-custom):not(.btn-secondary-custom):not(.btn-danger-custom):not(.btn-success-custom):not(.btn-warning-custom) {
    color: var(--primary-hover);
}

img {
    max-width: 100%;
    height: auto;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--surface);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}