/* ============================================================
   ElSaqa Platform — Shared Theme, Dark Mode & Responsive CSS
   Load this BEFORE page-specific <style> blocks so variables
   cascade correctly.
   ============================================================ */

/* ─── Typography system ──────────────────────────────────── */
:root {
  /*
   * Primary Arabic font: Tajawal (all pages)
   * Heading/display font: IBM Plex Sans Arabic (Phase 1 addition)
   * IBM Plex Sans Arabic is loaded via <link> in each HTML file.
   * It has geometric precision ideal for large headings and numeric
   * data (grades, counters), while Tajawal stays for body/UI copy.
   */
  --font-body:    'Tajawal', sans-serif;
  --font-heading: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;

  /* Type scale — clamp() keeps sizes fluid between breakpoints */
  --text-xs:    0.75rem;    /* 12px — labels, captions        */
  --text-sm:    0.875rem;   /* 14px — secondary info          */
  --text-base:  1rem;       /* 16px — body copy               */
  --text-lg:    1.125rem;   /* 18px — lead text               */
  --text-xl:    1.25rem;    /* 20px — card titles             */
  --text-2xl:   1.5rem;     /* 24px — section headings        */
  --text-3xl:   clamp(1.75rem, 3vw, 2.25rem);  /* sub-hero   */
  --text-4xl:   clamp(2rem,   4vw, 2.75rem);   /* page titles */
  --text-hero:  clamp(2.25rem, 5.5vw, 3.75rem);/* hero H1    */
}

/* ─── Light theme (default) ─────────────────────────────── */
:root {
  --primary:        #1B3A5C;
  --primary-dark:   #0F2540;
  --accent:         #C53030;
  --accent-light:   #E53E3E;
  --gold:           #D69E2E;
  --gold-light:     #F6E05E;

  /*
   * Sky (accent-3) — the platform's differentiating colour.
   * Contrast vs navy #1B3A5C: ~4.7:1 (WCAG AA for large text ≥18pt).
   * Safe for badges, borders, hover rings, progress bars, timeline dots.
   * Do NOT use as body text on navy backgrounds — use --sky-on-dark
   * (#7DD3FC, contrast ~8.2:1) when white text is unavailable.
   */
  --sky:            #0EA5E9;
  --sky-dark:       #0284C7;
  --sky-light:      #BAE6FD;
  --sky-on-dark:    #7DD3FC;  /* lighter variant for dark bg legibility */

  --bg:             #F0F4F8;
  --card-bg:        #FFFFFF;
  --text:           #2D3748;
  --text-light:     #718096;
  --border:         #E2E8F0;

  --success:        #38A169;
  --warning:        #D69E2E;
  --danger:         #E53E3E;
  --info:           #3182CE;

  --sidebar-width:  280px;
  --topbar-height:  60px;

  /* Inputs & surfaces */
  --input-bg:       #FFFFFF;
  --input-border:   #CBD5E0;
  --hover-bg:       #EDF2F7;
  --shadow-sm:      0 2px 8px rgba(0,0,0,.06);
  --shadow-md:      0 8px 24px rgba(0,0,0,.10);
  --shadow-lg:      0 20px 50px rgba(0,0,0,.14);

  /* Toast */
  --toast-bg:       #FFFFFF;
  --toast-text:     #2D3748;

  /* Transitions */
  --transition:     0.25s ease;
}

/* ─── Dark theme ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:             #0F1923;
  --card-bg:        #1A2433;
  --text:           #E2E8F0;
  --text-light:     #A0AEC0;
  --border:         #2D3748;

  --input-bg:       #1E2D3D;
  --input-border:   #2D4057;
  --hover-bg:       #1E2D3D;
  --shadow-sm:      0 2px 8px rgba(0,0,0,.30);
  --shadow-md:      0 8px 24px rgba(0,0,0,.40);
  --shadow-lg:      0 20px 50px rgba(0,0,0,.55);

  --toast-bg:       #1A2433;
  --toast-text:     #E2E8F0;

  /* Slightly lighter primary so text on dark sidebar stays readable */
  --primary:        #2A4F7A;
  --primary-dark:   #1A3550;
}

/* ─── Dark-mode: override inline hardcoded values ────────── */
[data-theme="dark"] body {
  color-scheme: dark;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}
[data-theme="dark"] .app-toast {
  background: var(--toast-bg) !important;
  color: var(--toast-text) !important;
}

/* ─── Dark Mode Toggle Button ────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: var(--hover-bg);
  color: var(--text-light);
  font-size: 1rem;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--border);
  color: var(--text);
}
/* In dark mode show sun icon; in light mode show moon icon */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none;  }
[data-theme="dark"] .theme-toggle .icon-moon { display: none;  }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }

/* ─── Mobile Bottom Navigation Bar ──────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.mobile-bottom-nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  margin: 0; padding: 0;
}
.mobile-bottom-nav li {
  flex: 1;
  text-align: center;
}
.mobile-bottom-nav a,
.mobile-bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  color: var(--text-light);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  width: 100%;
  transition: color var(--transition);
  font-family: 'Tajawal', sans-serif;
}
.mobile-bottom-nav a i,
.mobile-bottom-nav button i { font-size: 1.2rem; }
.mobile-bottom-nav a.active,
.mobile-bottom-nav .active { color: var(--gold) !important; }

/* ─── Responsive: Table → Card layout ───────────────────── */
@media (max-width: 640px) {
  /* Hide table header */
  .responsive-table thead { display: none; }

  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }

  .responsive-table tr {
    background: var(--card-bg);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }

  .responsive-table td {
    padding: 0.3rem 0;
    border: none;
    font-size: 0.9rem;
  }

  /* Label each cell using data-label */
  .responsive-table td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--text-light);
    font-size: 0.78rem;
    display: block;
    margin-bottom: 0.15rem;
  }

  /* Show bottom nav on mobile */
  .mobile-bottom-nav { display: block; }

  /* Hide desktop sidebar on mobile */
  .sidebar { transform: translateX(110%); }
  .sidebar.open { transform: translateX(0); }

  /* Main content fills full width on mobile */
  .main-content { margin-right: 0 !important; padding-bottom: 70px; }

  /* Full-screen modals on mobile */
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal,
  .auth-modal,
  .results-modal-box {
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    overflow-y: auto;
  }
}

/* ─── Global Responsive Helpers ─────────────────────────── */
@media (max-width: 1024px) {
  :root { --sidebar-width: 260px; }
}

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }

  /* Stack grid layouts to single column */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Sidebar Overlay (mobile) ───────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.45);
}
@media (max-width: 640px) {
  .sidebar-overlay.open { display: block; }
}

/* ─── Scrollbar styling (WebKit only — avoids invalid-selector warnings elsewhere) ── */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-light); }
}

/* ─── Accessibility: respect users who prefer no motion ─── */
/*
 * This single block disables ALL transitions and animations defined
 * anywhere in the platform for users who have "Reduce Motion" enabled
 * in their OS accessibility settings.
 * Individual animation classes (fadeInUp, hover lifts, etc.) added in
 * later phases all fall under this umbrella automatically.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}