/* =========================================================
   CourseHub • Unified UI (RTL)  —  Clean Light/Dark Theme
   Fonts: Cairo, Tajawal, IBM Plex Sans Arabic
   ========================================================= */

/* ---------- Tokens (Light) ---------- */
:root{
  /* Typography */
  --ff-ar: "Cairo","Tajawal","IBM Plex Sans Arabic",system-ui,-apple-system,Segoe UI,Roboto,Arial;

  /* Text */
  --ink:#101828;         /* main text */
  --ink-2:#344054;       /* secondary text */
  --muted:#667085;       /* muted text */

  /* Brand */
  --brand:#2563eb;       /* blue */
  --brand-2:#06b6d4;     /* teal accent */

  /* Surfaces */
  --bg:#f6f9ff;          /* page bg */
  --card:#ffffff;        /* cards */
  --soft:#f1f5ff;        /* soft chip/tab bg */

  /* Borders */
  --border:#dbe4ff;
  --border-2:#c8d5ff;

  /* States */
  --ok:#10b981;   --ok-200:#a7f3d0;
  --warn:#f59e0b; --warn-200:#fde68a;
  --bad:#ef4444;  --bad-200:#fecaca;

  /* FX */
  --shadow:0 12px 34px rgba(24,48,96,.08);
  --r-lg:22px; --r:16px; --r-sm:12px;

  /* Header helpers */
  --head:#eef3ff;
  --chip:#eef3ff;
}

/* ---------- Tokens (Dark) ---------- */
html.dark{
  --ink:#e7ecff;
  --ink-2:#cfd8ff;
  --muted:#aab6db;

  --brand:#3b82f6;
  --brand-2:#22d3ee;

  --bg:#0b1020;
  --card:#101936;
  --soft:#0f1834;

  --border:#233762;
  --border-2:#2a4674;

  --shadow:0 16px 40px rgba(0,0,0,.35);

  --head:#0f1d3f;
  --chip:#13224a;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--ff-ar);
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg),#fff 520px) fixed;
  direction:rtl;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video,canvas{ max-width:100%; display:block }
a{ text-decoration:none; color:var(--ink-2); }
a:hover{ color:var(--brand) }
button{ font-family:inherit }
input,select,textarea{ font-family:inherit }
.muted{ color:var(--muted)!important }
.wrap{ max-width:1200px; margin-inline:auto; padding:10px 12px }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:120;
  background:color-mix(in oklab, var(--card) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; padding:10px 0;
}
.brand{ font-weight:900; font-size:22px; color:var(--ink) }
.brand span{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.nav a{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 12px; border-radius:12px; border:1px solid transparent;
  font-weight:800; font-size:14.5px; color:var(--ink);
}
.nav a:hover{ background:var(--soft) }
.nav a.active{
  background:var(--brand); color:#fff!important;
  border-color:color-mix(in oklab,var(--brand) 80%, #fff 20%);
}
.user-menu{ display:flex; align-items:center; gap:10px }
.hamb{ display:none }

/* ---------- Cards / Surfaces ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:14px;
  box-shadow:var(--shadow);
}
.card--soft{
  background:linear-gradient(180deg,#fff 0%, var(--soft) 100%);
  border:1px solid var(--border);
  border-radius:18px;
}

/* ---------- Buttons ---------- */
.btn{
  --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; cursor:pointer; user-select:none;
  font-weight:800; border:1px solid transparent;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:var(--btn-fg) !important;      /* يمنع توريث لون الرابط */
  box-shadow:0 8px 18px rgba(37,99,235,.18);
  transition:filter .12s ease, transform .12s ease;
}
.btn i{ font-size:0.95em }
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform:translateY(1px) }

.btn.ghost{
  background:var(--card); color:var(--ink)!important;
  border:1px solid var(--border);
  box-shadow:0 4px 14px rgba(13,28,73,.05);
}
.btn.soft{
  background:var(--soft); color:var(--ink)!important;
  border:1px solid var(--border-2);
}
.btn.ok{ background:var(--ok); border-color:var(--ok-200) }
.btn.warn{ background:var(--warn); border-color:var(--warn-200); color:#1f2937!important }
.btn.bad{ background:var(--bad); border-color:var(--bad-200) }
.btn.min{ padding:8px 10px; border-radius:10px }

/* “الروابط السريعة” كأزرار */
.quick{ display:flex; gap:8px; flex-wrap:wrap }
.quick .btn{ min-width:140px }
.quick .btn i{ margin-inline-start:2px }

/* ---------- Badges / Tabs / Chips ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; font-weight:800;
  background:var(--soft); color:var(--ink);
  border:1px solid var(--border);
}
.badge.on{  background:#ecfdf5; color:#065f46; border-color:#bbf7d0 }
.badge.off{ background:#fff1f2; color:#7c2d12; border-color:#fecdd3 }

.tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; font-weight:800;
  background:var(--soft); border:1px solid var(--border); color:var(--ink);
}
.tab.active{
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff;
  border-color:transparent;
}

/* ---------- KPI ---------- */
.kpis{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
.kpi{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  background:linear-gradient(180deg,#fff 0%, var(--soft) 100%);
  border:1px solid var(--border); border-radius:18px; padding:12px; box-shadow:var(--shadow);
}
.kpi .icon{ width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-size:18px }
.kpi h4{ margin:0; font-size:14px; color:#1f2a44; font-weight:800 }
.kpi .val{ font-size:22px; font-weight:900; color:var(--ink) }

/* ---------- Progress ---------- */
.progress{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; margin-top:8px }
.progress__bar{ height:14px; background:#eaf0ff; border-radius:999px; overflow:hidden; border:1px solid #dbe4ff }
.progress__bar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); width:0% }

/* ---------- Course Map ---------- */
.sec{ margin-bottom:10px }
.sec h3{ margin:0 0 8px; font-size:15px; display:flex; align-items:center; gap:8px; color:#1f2a44; font-weight:900 }
.lesson{
  display:flex; gap:10px; align-items:center; padding:10px;
  border-radius:12px; border:1px dashed #dbe4ff; background:#fbfdff; margin:6px 0
}
.lesson .state{
  width:22px; height:22px; display:inline-grid; place-items:center;
  border-radius:50%; border:2px solid #dbe4ff; font-size:12px
}
.lesson.done .state{ border-color:#b6f0d6; background:#ecfff7; color:#0a7a55 }
.lesson a{ color:#101828; font-weight:800 }
.lesson small{ color:var(--muted) }

/* ---------- Content ---------- */
.content{ line-height:1.9; color:var(--ink-2) }
.content img, .content video, .content iframe{
  max-width:100%; border-radius:12px; border:1px solid #e6eeff; margin:10px 0
}

/* ---------- Tables ---------- */
.table{ width:100%; border-collapse:separate; border-spacing:0 8px }
.table thead th{
  text-align:right; font-size:13px; color:#2b3d73; padding:8px 10px;
  background:var(--head); border:1px solid var(--border); border-radius:10px
}
.table td{
  background:#fff; border:1px solid var(--border); padding:10px 12px; color:var(--ink-2);
  border-right:0; border-left:0
}
.table tr td:first-child{ border-radius:12px 0 0 12px; border-right:1px solid var(--border) }
.table tr td:last-child { border-radius:0 12px 12px 0; border-left:1px solid var(--border) }

/* ---------- Forms ---------- */
.label{ font-weight:800; color:#1b2a52; margin-bottom:6px; display:block }
.input, select, textarea{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--ink);
}
.input:focus, select:focus, textarea:focus{
  outline:none; border-color:#b8c7ff; box-shadow:0 0 0 3px rgba(59,130,246,.12)
}

/* ---------- Alerts ---------- */
.alert{
  border:1px solid var(--warn-200);
  background:#fff8eb;
  color:#7a4d0b;
  padding:10px 12px; border-radius:12px;
}
.alert.ok{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46 }
.alert.bad{ background:#fff1f2; border-color:#fecdd3; color:#7f1d1d }

/* ---------- Skeleton ---------- */
.skel{ position:relative; overflow:hidden; background:#eaf0ff; border-radius:8px }
.skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-100%); animation:skel 1.2s infinite;
}
@keyframes skel{ to{ transform:translateX(100%) } }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nav{ display:none; position:absolute; right:12px; left:12px; top:60px;
        background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:8px }
  .nav.open{ display:flex }
  .hamb{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
         border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--ink) }
}

/* ---------- Dark polish ---------- */
html.dark body{ background:linear-gradient(180deg,var(--bg),var(--card) 520px) }
html.dark .site-header{ background:color-mix(in oklab, var(--card) 90%, transparent) }
html.dark .nav a{ color:var(--ink)!important }
html.dark .nav a:hover{ background:#172449 }
html.dark .card{ background:var(--card); border-color:var(--border) }
html.dark .btn.ghost{ background:#0f1a33; color:var(--ink)!important; border-color:var(--border) }
html.dark .table thead th{ background:var(--head); color:#cfe0ff }

/* ==== Hard override for anchor buttons to beat legacy .btn rules ==== */
a.btn, a.btn:link, a.btn:visited {
  color: #fff !important;
  text-decoration: none !important;
}

a.btn:not(.ghost):not(.secondary) {
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.18) !important;
}

a.btn.ghost {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 14px rgba(13,28,73,.05) !important;
}

a.btn.soft {
  background: var(--soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-2) !important;
}

a.btn.ok    { background: var(--ok)   !important; border-color: var(--ok-200)   !important; color:#fff !important; }
a.btn.warn  { background: var(--warn) !important; border-color: var(--warn-200) !important; color:#1f2937 !important; }
a.btn.bad   { background: var(--bad)  !important; border-color: var(--bad-200)  !important; color:#fff !important; }

html.dark a.btn.ghost { background:#0f1a33 !important; color: var(--ink) !important; border-color: var(--border) !important; }

/* مساحات وروابط سريعة تبدو كأزرار */
.quick a.btn { min-width: 140px; }