/* ============================================================
   Quran LMS — Shared Design System v2 ("Calm Education")
   - Royal-teal / calm-blue palette
   - Light + Dark themes via html[data-theme="dark"]
   - Additive: loads BEFORE page inline <style>. Component colors
     are driven by CSS variables, so the app shell + standard
     components adapt to dark mode automatically.
   - Theme color (--primary-color) still comes from settings via
     header.php / parent_common.php :root override.
   ============================================================ */

/* ---------- Design tokens : LIGHT (default) ---------- */
:root{
  --primary-color:#0f766e;            /* royal teal (settings may override) */
  --primary-600:#0c5e57;
  --primary-700:#0a4f49;
  --primary-050:#e6f3f1;
  --accent:#0e7490;                   /* calm blue-teal (links/focus) */
  --accent-2:#2563eb;                 /* calm blue */

  --success:#1e9e5a; --success-bg:#e7f7ee;
  --danger:#d63b3b;  --danger-bg:#fdeaea;
  --warning:#c98a00; --warning-bg:#fdf3df;
  --info:#1f7aad;    --info-bg:#e6f3fb;

  --text:#1f2d35; --text-muted:#647581; --border:#e2e9ee;
  --bg:#eef3f5; --surface:#ffffff; --surface-2:#f6f9fa;

  /* app shell */
  --header-grad-1:#0f766e;
  --header-grad-2:#155e75;            /* teal -> calm blue */
  --sidebar-bg:#0f2b38;
  --sidebar-link:#c5d3da;
  --sidebar-hover-bg:rgba(255,255,255,.07);
  --on-accent:#ffffff;

  --radius-sm:8px; --radius:14px; --radius-lg:20px;
  --shadow-sm:0 1px 3px rgba(16,24,40,.06);
  --shadow:0 6px 20px rgba(16,24,40,.08);
  --shadow-lg:0 18px 40px rgba(16,24,40,.16);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-8:48px;
  --font-sans:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,"Roboto","Noto Sans","Helvetica Neue",Arial,sans-serif;
  --font-arabic:"Noto Naskh Arabic","Scheherazade New","Amiri","Segoe UI",serif;
  --maxw:1240px;
}

/* ---------- Design tokens : DARK ---------- */
html[data-theme="dark"]{
  --primary-color:#2dd4bf;            /* bright teal for contrast on dark */
  --primary-600:#14b8a6;
  --primary-700:#0d9488;
  --primary-050:rgba(45,212,191,.12);
  --accent:#38bdf8;
  --accent-2:#60a5fa;

  --success:#34d399; --success-bg:rgba(52,211,153,.14);
  --danger:#f87171;  --danger-bg:rgba(248,113,113,.14);
  --warning:#fbbf24; --warning-bg:rgba(251,191,36,.14);
  --info:#38bdf8;    --info-bg:rgba(56,189,248,.14);

  --text:#e6eef2; --text-muted:#9fb0bb; --border:#2a3c47;
  --bg:#0b1620; --surface:#13212b; --surface-2:#1a2c38;

  --header-grad-1:#0b3a44;
  --header-grad-2:#0a2a33;
  --sidebar-bg:#0a141c;
  --sidebar-link:#9fb0bb;
  --sidebar-hover-bg:rgba(255,255,255,.05);

  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow:0 6px 20px rgba(0,0,0,.5);
  --shadow-lg:0 18px 40px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--font-sans); color:var(--text); background:var(--bg); line-height:1.55; }
img{max-width:100%;height:auto}
a{color:var(--accent)}
h1,h2,h3,h4{line-height:1.25}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,white);outline-offset:2px}
body,.card,.ds-card,.ds-table,.content,.sidebar,.header,input,select,textarea{
  transition:background-color .25s ease,color .25s ease,border-color .25s ease}

/* ---------- Buttons (opt-in utility set) ---------- */
.ds-btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font:inherit;font-weight:600;padding:10px 18px;border-radius:var(--radius-sm);
  border:1px solid transparent;cursor:pointer;text-decoration:none;transition:.18s ease;line-height:1}
.ds-btn:hover{transform:translateY(-1px)}
.ds-btn:active{transform:translateY(0)}
.ds-btn-primary{background:var(--primary-color);color:var(--on-accent)}
.ds-btn-primary:hover{background:var(--primary-600)}
.ds-btn-success{background:var(--success);color:#fff}
.ds-btn-danger{background:var(--danger);color:#fff}
.ds-btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.ds-btn-ghost:hover{background:var(--primary-050)}
.ds-btn-sm{padding:6px 12px;font-size:13px}
.ds-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- Theme toggle button ---------- */
.ds-theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:15px;
  transition:.2s ease;flex-shrink:0}
.ds-theme-toggle:hover{background:rgba(255,255,255,.3);transform:translateY(-1px)}

/* ---------- Badges / chips ---------- */
.ds-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.6;background:var(--primary-050);color:var(--primary-color)}
.ds-badge-success{background:var(--success-bg);color:var(--success)}
.ds-badge-danger{background:var(--danger-bg);color:var(--danger)}
.ds-badge-warning{background:var(--warning-bg);color:var(--warning)}
.ds-badge-info{background:var(--info-bg);color:var(--info)}
.ds-badge-muted{background:color-mix(in srgb,var(--text-muted) 16%,var(--surface));color:var(--text-muted)}

/* ---------- Alerts ---------- */
.ds-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--radius-sm);
  border:1px solid transparent;margin:0 0 16px}
.ds-alert-success{background:var(--success-bg);border-color:color-mix(in srgb,var(--success) 35%,transparent);color:var(--success)}
.ds-alert-danger{background:var(--danger-bg);border-color:color-mix(in srgb,var(--danger) 35%,transparent);color:var(--danger)}
.ds-alert-warning{background:var(--warning-bg);border-color:color-mix(in srgb,var(--warning) 35%,transparent);color:var(--warning)}
.ds-alert-info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 35%,transparent);color:var(--info)}

/* Map existing message classes onto the new look (additive) */
.success-msg{display:block;background:var(--success-bg);color:var(--success);border:1px solid color-mix(in srgb,var(--success) 35%,transparent);
  padding:12px 16px;border-radius:var(--radius-sm);font-weight:600}
.error-msg{display:block;background:var(--danger-bg);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);
  padding:12px 16px;border-radius:var(--radius-sm);font-weight:600}

/* ---------- Cards ---------- */
.ds-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:var(--space-5);color:var(--text)}
.ds-card-pad-sm{padding:var(--space-4)}
.ds-grid{display:grid;gap:var(--space-5)}
.ds-grid-2{grid-template-columns:repeat(2,1fr)}
.ds-grid-3{grid-template-columns:repeat(3,1fr)}
.ds-grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Form polish ---------- */
.ds-field{margin-bottom:var(--space-4)}
.ds-label{display:block;font-weight:600;margin-bottom:6px;font-size:14px;color:var(--text)}
.ds-input,.ds-select,.ds-textarea{width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font:inherit;background:var(--surface);color:var(--text);transition:.15s}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}
.ds-help{color:var(--text-muted);font-size:12px;margin-top:4px}

/* ---------- Table polish (when .ds-table used) ---------- */
.ds-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.ds-table th,.ds-table td{padding:12px 14px;text-align:start;border-bottom:1px solid var(--border);color:var(--text)}
.ds-table thead th{background:var(--primary-050);color:var(--primary-color);font-size:13px;
  text-transform:uppercase;letter-spacing:.04em}
.ds-table tbody tr:hover{background:var(--primary-050)}
.ds-table tbody tr:last-child td{border-bottom:0}
.ds-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Modal ---------- */
.ds-modal-backdrop{position:fixed;inset:0;background:rgba(8,12,18,.6);display:none;
  align-items:center;justify-content:center;z-index:1000;padding:16px}
.ds-modal-backdrop.open{display:flex}
.ds-modal{background:var(--surface);color:var(--text);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  width:min(560px,100%);max-height:90vh;overflow:auto}
.ds-modal-head{display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700}
.ds-modal-body{padding:20px}
.ds-modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}

/* ---------- Language switcher ---------- */
.ds-lang{display:inline-flex;gap:4px;background:rgba(255,255,255,.18);border-radius:999px;padding:3px}
.ds-lang a{color:#fff;text-decoration:none;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:999px;opacity:.8}
.ds-lang a.active{background:#fff;color:var(--primary-color);opacity:1}

/* ---------- Utilities ---------- */
.ds-stack>*+*{margin-top:var(--space-4)}
.ds-row{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}
.ds-between{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.ds-muted{color:var(--text-muted)}
.ds-text-end{text-align:end}
.ds-mt-0{margin-top:0}.ds-mb-0{margin-bottom:0}
.ds-container{max-width:var(--maxw);margin-inline:auto}
.ds-hide{display:none!important}

/* ============================================================
   DARK-MODE fallbacks for legacy pages that use plain classes
   (best-effort: covers app shell + standard components; pages
   with hard-coded inline background colors may differ slightly)
   ============================================================ */
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .content{color:var(--text)}
html[data-theme="dark"] .card,
html[data-theme="dark"] .ds-card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .widget{background:var(--surface);color:var(--text);border-color:var(--border)}
html[data-theme="dark"] .card h1,html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,html[data-theme="dark"] .card h4{color:var(--text)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:var(--surface-2);color:var(--text);border-color:var(--border)}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--text-muted)}
html[data-theme="dark"] table{color:var(--text)}
html[data-theme="dark"] td{border-color:var(--border)}
html[data-theme="dark"] a{color:var(--accent)}
html[data-theme="dark"] .ds-table thead th{background:var(--surface-2)}
html[data-theme="dark"] .ds-table tbody tr:hover{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .ds-lang{background:rgba(255,255,255,.10)}

/* ============================================================
   RTL support — wins over inline left/right rules via html[dir]
   ============================================================ */
html[dir="rtl"] body{font-family:var(--font-arabic)}
html[dir="rtl"] .sidebar ul li a{border-left:0;border-right:4px solid transparent;text-align:right}
html[dir="rtl"] .sidebar ul li a:hover{border-left:0;border-right:4px solid var(--primary-color)}
html[dir="rtl"] .card{border-top:4px solid var(--primary-color)}
html[dir="rtl"] #globalSearch{padding:10px 40px 10px 15px}
html[dir="rtl"] .ds-modal-foot{justify-content:flex-start}

/* ============================================================
   Responsive — collapse sidebar + stack cards on small screens
   ============================================================ */
@media (max-width:992px){
  .ds-grid-3,.ds-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .main-wrapper{flex-direction:column}
  .sidebar{width:100%!important;display:flex;overflow-x:auto;padding-top:0}
  .sidebar ul{display:flex;flex-wrap:nowrap}
  .sidebar ul li a{white-space:nowrap;border-left:0!important;border-bottom:3px solid transparent}
  .sidebar ul li a:hover{border-left:0!important;border-bottom:3px solid var(--primary-color)}
  .header{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 16px!important}
  #globalSearch{width:100%!important}
  .content{padding:16px!important}
  .dashboard-cards{flex-direction:column}
  .ds-grid-2,.ds-grid-3,.ds-grid-4{grid-template-columns:1fr}
  .ds-modal-foot{flex-direction:column-reverse}
  .ds-btn{width:100%}
}

/* Print */
@media print{.sidebar,.header,.footer,.ds-lang,.ds-theme-toggle{display:none!important}.content{padding:0!important}}