/* ============================================================
   العقيق للتعلم — النمط الأساسي
   assets/css/main.css
   ------------------------------------------------------------
   ⚠️ قاعدة مستفادة من البوابة: كل رمز لون يبدأ بـ --lms- ويُستعمل
      دائماً بقيمة احتياطية  var(--lms-x, #fallback)  — لأن نسخة
      الإنتاج من ملف الأنماط قد تختلف عن المحلية فتخرج البطاقات
      شفافة بلا خلفية.
   ============================================================ */

:root{
  --lms-bg:        #f4f6f9;
  --lms-card:      #ffffff;
  --lms-ink:       #16233a;
  --lms-ink-soft:  #5a6a80;
  --lms-line:      #dfe5ee;
  --lms-brand:     #0f6e68;
  --lms-brand-dk:  #0b544f;
  --lms-accent:    #1f3864;
  --lms-warn:      #a86a1f;
  --lms-danger:    #9e3b33;
  --lms-ok:        #1f7a4d;
  --lms-radius:    12px;
  --lms-shadow:    0 1px 2px rgba(22,35,58,.06), 0 10px 26px -14px rgba(22,35,58,.25);
  --lms-sidebar-w: 250px;
  --lms-font:      "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--lms-bg, #f4f6f9);
  color: var(--lms-ink, #16233a);
  font-family: var(--lms-font, "Segoe UI", Tahoma, sans-serif);
  font-size: 15px;
  line-height: 1.8;
  direction: rtl;
}

a{ color: var(--lms-brand, #0f6e68); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--lms-brand, #0f6e68);
  outline-offset: 2px;
}

/* ── القالب العام ───────────────────────────────────────── */
.app-layout{ min-height: 100vh; }

.app-header{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: 60px; padding: 0 18px;
  background: var(--lms-card, #fff);
  border-bottom: 1px solid var(--lms-line, #dfe5ee);
}
.app-header .brand{ display:flex; align-items:center; gap:10px; font-weight:700; color: var(--lms-accent, #1f3864); }
.app-header .brand .mark{
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--lms-brand, #0f6e68); color:#fff;
  display:grid; place-items:center; font-size: 14px; font-weight:700;
}
.app-header .spacer{ flex: 1; }
.app-header .who{ color: var(--lms-ink-soft, #5a6a80); font-size: 13.5px; }
.app-header .portal-back{
  font-size: 13px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--lms-line, #dfe5ee); color: var(--lms-ink-soft, #5a6a80);
}

.app-sidebar{
  position: fixed; top: 60px; inset-inline-end: 0; bottom: 0;
  width: var(--lms-sidebar-w, 250px);
  background: var(--lms-card, #fff);
  border-inline-start: 1px solid var(--lms-line, #dfe5ee);
  overflow-y: auto; padding: 14px 10px;
}
.app-sidebar .group{ margin-bottom: 14px; }
.app-sidebar .group > .label{
  font-size: 11.5px; letter-spacing: .08em; font-weight: 700;
  color: var(--lms-ink-soft, #5a6a80); padding: 6px 10px;
}
.app-sidebar a.item{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--lms-ink, #16233a); font-size: 14px;
  border-inline-start: 3px solid transparent;
}
.app-sidebar a.item:hover{ background: var(--lms-bg, #f4f6f9); text-decoration: none; }
.app-sidebar a.item.active{
  background: var(--lms-bg, #f4f6f9);
  border-inline-start-color: var(--lms-brand, #0f6e68);
  font-weight: 600;
}

/* ⚠️ إلزامي: كل صفحة تلفّ محتواها بـ main.main-content — وإلا
   لن تُطبَّق الإزاحة وسيرتسم المحتوى تحت الشريط الجانبي. */
.main-content{
  margin-inline-end: var(--lms-sidebar-w, 250px);
  padding: 22px 22px 64px;
  min-height: calc(100vh - 60px);
}
@media (max-width: 900px){
  .app-sidebar{ position: static; width: auto; border: 0; border-bottom: 1px solid var(--lms-line,#dfe5ee); }
  .main-content{ margin-inline-end: 0; padding: 16px 14px 48px; }
}

/* ── مكوّنات ────────────────────────────────────────────── */
.page-title{ font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--lms-accent, #1f3864); }
.page-sub{ color: var(--lms-ink-soft, #5a6a80); margin: 0 0 20px; }

.card{
  background: var(--lms-card, #ffffff);
  border: 1px solid var(--lms-line, #dfe5ee);
  border-radius: var(--lms-radius, 12px);
  box-shadow: var(--lms-shadow, 0 1px 2px rgba(0,0,0,.06));
  padding: 18px;
}
.grid{ display: grid; gap: 14px; }
.grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px){ .grid.cols-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px){ .grid.cols-4, .grid.cols-3, .grid.cols-2{ grid-template-columns: 1fr; } }

.stat .k{ font-size: 13px; color: var(--lms-ink-soft, #5a6a80); }
.stat .v{ font-size: 27px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stat .hint{ font-size: 12px; color: var(--lms-ink-soft, #5a6a80); }

.badge{
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: #e8f2f1; color: var(--lms-brand, #0f6e68);
}
.badge.warn{ background: #f8efe1; color: var(--lms-warn, #a86a1f); }
.badge.danger{ background: #f9e9e7; color: var(--lms-danger, #9e3b33); }

.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 9px; border: 1px solid transparent;
  background: var(--lms-brand, #0f6e68); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.btn:hover{ background: var(--lms-brand-dk, #0b544f); text-decoration: none; }
.btn.ghost{ background: transparent; color: var(--lms-ink, #16233a); border-color: var(--lms-line, #dfe5ee); }
.btn[disabled]{ opacity: .55; cursor: not-allowed; }

table.data{ width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td{
  padding: 10px 12px; text-align: right;
  border-bottom: 1px solid var(--lms-line, #dfe5ee);
}
table.data th{ background: var(--lms-bg, #f4f6f9); font-size: 13px; color: var(--lms-ink-soft, #5a6a80); }
table.data td.num{ font-variant-numeric: tabular-nums; }

.alert{
  border-radius: 10px; padding: 12px 15px; margin-bottom: 16px; font-size: 14.5px;
  border-inline-start: 3px solid var(--lms-brand, #0f6e68); background: #eaf4f3;
}
.alert.error{ border-inline-start-color: var(--lms-danger, #9e3b33); background: #fbeceb; }
.alert.warn { border-inline-start-color: var(--lms-warn, #a86a1f);  background: #fbf3e6; }

/* ── صفحة الدخول ───────────────────────────────────────── */
.auth-wrap{ min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card{
  width: 100%; max-width: 420px;
  background: var(--lms-card, #fff);
  border: 1px solid var(--lms-line, #dfe5ee);
  border-radius: 16px; box-shadow: var(--lms-shadow, 0 10px 30px rgba(0,0,0,.08));
  padding: 30px 28px;
}
.auth-card .mark{
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px;
  background: var(--lms-brand, #0f6e68); color: #fff;
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
}
.auth-card h1{ text-align: center; font-size: 21px; margin: 0 0 4px; color: var(--lms-accent,#1f3864); }
.auth-card .sub{ text-align: center; color: var(--lms-ink-soft, #5a6a80); font-size: 13.5px; margin-bottom: 22px; }
.field{ margin-bottom: 14px; }
.field label{ display: block; font-size: 13px; color: var(--lms-ink-soft, #5a6a80); margin-bottom: 6px; }
.field input{
  width: 100%; padding: 11px 13px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--lms-line, #dfe5ee); border-radius: 9px;
  background: var(--lms-bg, #f4f6f9); color: var(--lms-ink, #16233a);
}
.auth-card .btn{ width: 100%; justify-content: center; margin-top: 6px; }
.auth-foot{ margin-top: 18px; text-align: center; font-size: 13px; color: var(--lms-ink-soft,#5a6a80); }

@media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } }