/* ========================================================
   بوابة الحرس الملكي — Design System
   Enterprise Royal Guard Management System
   Kingdom of Saudi Arabia
   ======================================================== */

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; background: var(--bg-page); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; width: 100%; }

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  /* ─ Primary: Saudi institutional green ─ */
  --primary-50: #ECFDF5;
  --primary-100: #D1FAE5;
  --primary-200: #A7F3D0;
  --primary-300: #6EE7B7;
  --primary-400: #34D399;
  --primary-500: #0E9A6E;
  --primary-600: #0E6E4E;
  --primary-700: #065F46;
  --primary-800: #064E3B;
  --primary-900: #022C22;

  /* ─ Secondary: Institutional navy ─ */
  --secondary-50: #EFF6FF;
  --secondary-100: #DBEAFE;
  --secondary-200: #BFDBFE;
  --secondary-300: #93C5FD;
  --secondary-400: #60A5FA;
  --secondary-500: #3B82F6;
  --secondary-600: #1B4B7A;
  --secondary-700: #1E3A5F;
  --secondary-800: #1E2D4A;
  --secondary-900: #0F172A;

  /* ─ Accent: Saudi gold ─ */
  --accent-50: #FFFBEB;
  --accent-100: #FEF3C7;
  --accent-200: #FDE68A;
  --accent-300: #FCD34D;
  --accent-400: #FBBF24;
  --accent-500: #C9A84C;
  --accent-600: #B8941F;
  --accent-700: #92740C;
  --accent-800: #78620A;
  --accent-900: #5C4A09;

  /* ─ Semantic ─ */
  --success-50: #ECFDF5; --success-100: #D1FAE5; --success-500: #059669; --success-600: #047857; --success-700: #065F46;
  --warning-50: #FFFBEB; --warning-100: #FEF3C7; --warning-500: #D97706; --warning-600: #B45309; --warning-700: #92400E;
  --danger-50: #FEF2F2; --danger-100: #FEE2E2; --danger-500: #DC2626; --danger-600: #B91C1C; --danger-700: #991B1B;
  --info-50: #EFF6FF; --info-100: #DBEAFE; --info-500: #2563EB; --info-600: #1D4ED8; --info-700: #1E40AF;

  /* ─ Neutrals ─ */
  --neutral-0: #FFFFFF;
  --neutral-25: #FCFCFD;
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-150: #ECEDF0;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;
  --neutral-950: #030712;

  /* ─ Surfaces (Light Mode) ─ */
  --bg-page: #F5F6FA;
  --bg-surface: #FFFFFF;
  --bg-surface-secondary: #F9FAFB;
  --bg-surface-hover: #F3F4F6;
  --bg-surface-active: #E5E7EB;
  --bg-sidebar: #FFFFFF;
  --bg-header: rgba(255,255,255,0.85);
  --bg-overlay: rgba(0,0,0,0.4);
  --bg-skeleton: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);

  /* ─ Text ─ */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --text-inverse: #FFFFFF;
  --text-link: #0E6E4E;
  --text-link-hover: #065F46;

  /* ─ Borders ─ */
  --border-default: #E5E7EB;
  --border-light: #F3F4F6;
  --border-strong: #D1D5DB;
  --border-focus: #0E6E4E;

  /* ─ Typography Scale ─ */
  --font-xs: 0.6875rem;    /* 11px */
  --font-sm: 0.8125rem;    /* 13px */
  --font-base: 0.875rem;   /* 14px */
  --font-md: 0.9375rem;    /* 15px */
  --font-lg: 1rem;         /* 16px */
  --font-xl: 1.125rem;     /* 18px */
  --font-2xl: 1.25rem;     /* 20px */
  --font-3xl: 1.5rem;      /* 24px */
  --font-4xl: 1.75rem;     /* 28px */
  --font-5xl: 2rem;        /* 32px */

  /* ─ Font Weights ─ */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ─ Spacing (8px base) ─ */
  --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 */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ─ Border Radius ─ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ─ Elevation ─ */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 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.08), 0 10px 10px -5px rgba(0,0,0,0.02);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.05);
  --shadow-focus: 0 0 0 3px rgba(14,110,78,0.15);

  /* ─ Transitions ─ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;

  /* ─ Layout ─ */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --header-height: 64px;
  --page-max-width: 1440px;
  --content-max-width: 1200px;

  /* ─ Z-Index ─ */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-sidebar: 400;
  --z-overlay: 500;
  --z-dialog: 600;
  --z-drawer: 700;
  --z-toast: 800;
  --z-tooltip: 900;
}

/* ── Dark Mode ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-page: #0C0D14;
  --bg-surface: #161822;
  --bg-surface-secondary: #1C1E2C;
  --bg-surface-hover: #22243A;
  --bg-surface-active: #2A2D44;
  --bg-sidebar: #12131C;
  --bg-header: rgba(22,24,34,0.92);
  --bg-overlay: rgba(0,0,0,0.6);
  --bg-skeleton: linear-gradient(90deg, #1C1E2C 25%, #22243A 50%, #1C1E2C 75%);
  --text-primary: #E8E8F0;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;
  --text-inverse: #111827;
  --text-link: #34D399;
  --text-link-hover: #6EE7B7;
  --border-default: #2A2D44;
  --border-light: #1C1E2C;
  --border-strong: #3A3D54;
  --border-focus: #34D399;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.4);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.5);
  --shadow-focus: 0 0 0 3px rgba(52,211,153,0.2);
}

/* ── Typography Utilities ──────────────────────────────── */
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-md { font-size: var(--font-md); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }
.text-2xl { font-size: var(--font-2xl); }
.text-3xl { font-size: var(--font-3xl); }
.text-4xl { font-size: var(--font-4xl); }
.text-5xl { font-size: var(--font-5xl); }
.font-light { font-weight: var(--weight-light); }
.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-success { color: var(--success-500); }
.text-warning { color: var(--warning-500); }
.text-danger { color: var(--danger-500); }
.text-info { color: var(--info-500); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Layout Utilities ──────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--neutral-600); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--neutral-500); }