/* =====================================================================
   site.css — تخطيط نظام شؤون المعلمين (RTL)
   مبني على قالب WebTemplate المعتمد؛ الألوان في theme.css (درجات الأخضر البحري)
   ===================================================================== */

/* ---- خط Cairo محلي (بلا إنترنت) ---- */
@font-face {
  font-family: "Cairo";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cairo/cairo-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Cairo";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cairo/cairo-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Cairo";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cairo/cairo-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Cairo";
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/cairo/cairo-arabic-800.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Cairo";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cairo/cairo-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+2013-2014, U+2018-201A, U+201C-201E;
}
@font-face {
  font-family: "Cairo";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cairo/cairo-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+2013-2014, U+2018-201A, U+201C-201E;
}

* { scroll-behavior: smooth; }

body {
  font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
  background-color: var(--bs-body-bg, #f4f8f9);
  color: var(--bs-body-color, #243034);
}

:focus-visible { outline: 2px solid var(--app-accent-light); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =====================  صفحة تسجيل الدخول  ===================== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside {
  background-image: var(--app-gradient); color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem; position: relative; overflow: hidden;
}
.auth-aside::before {
  content: ""; position: absolute; inset-block-end: -20%; inset-inline-end: -10%;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.auth-aside h2 { font-weight: 800; }
.auth-form-side { display: grid; place-items: center; padding: 2rem; }
.auth-card { width: 100%; max-width: 420px; }
@media (max-width: 991.98px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}

.brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background-image: var(--app-gradient);
  display: inline-grid; place-items: center; color: #fff; flex: 0 0 auto;
}

/* =====================  تخطيط لوحة التحكّم  ===================== */
.app-shell { min-height: 100vh; }

.app-sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: var(--app-sidebar-width);
  background: var(--app-dark);
  color: #cdd8da; padding: 1rem .75rem;
  display: flex; flex-direction: column; gap: .25rem;
  z-index: 1040; transition: transform .3s ease, width .3s ease;
  overflow-y: auto;
}
.app-sidebar .sidebar-brand {
  display: flex; align-items: center; gap: .6rem;
  color: #fff; font-weight: 800; font-size: 1.05rem;
  padding: .5rem .6rem 1rem; text-decoration: none;
}
.app-sidebar .nav-section {
  color: #6f8488; font-size: .72rem; font-weight: 700; letter-spacing: 1px;
  padding: 1rem .8rem .35rem;
}
.app-sidebar .nav-link {
  --bs-nav-link-color: #cdd8da;
  display: flex; align-items: center; gap: .7rem;
  border-radius: var(--app-radius-sm); padding: .6rem .8rem;
  color: #cdd8da; font-weight: 500; font-size: .94rem; transition: background .15s ease;
}
.app-sidebar .nav-link i { font-size: 1.15rem; flex: 0 0 auto; }
.app-sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.app-sidebar .nav-link.active {
  background-image: var(--app-gradient); color: #fff;
  box-shadow: 0 .25rem .75rem rgba(var(--app-accent-rgb), .35);
}

/* ---------- مجموعات القائمة (أكورديون): العنوان وحده ظاهر حتى يُضغط ---------- */
.app-sidebar .nav-group-toggle {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  background: none; border: 0; text-align: start;
  border-radius: var(--app-radius-sm); padding: .6rem .8rem;
  color: #cdd8da; font-weight: 600; font-size: .94rem;
  transition: background .15s ease;
}
.app-sidebar .nav-group-toggle i { font-size: 1.15rem; flex: 0 0 auto; }
.app-sidebar .nav-group-toggle:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.app-sidebar .nav-group-toggle.active-group { color: #fff; }

/* السهم يدور مع الفتح ليدل على الحالة دون نص */
.app-sidebar .nav-chevron { font-size: .8rem !important; transition: transform .2s ease; }
.app-sidebar .nav-group-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* عناصر المجموعة تُزاح قليلاً وتُوصَل بخط ليظهر انتماؤها */
.app-sidebar .nav-group-items {
  display: flex; flex-direction: column; gap: .15rem;
  margin-inline-start: 1.35rem; padding-inline-start: .5rem;
  border-inline-start: 1px solid rgba(255, 255, 255, .12);
}
.app-sidebar .nav-group-items .nav-link { font-size: .89rem; padding: .45rem .7rem; }
.app-sidebar .nav-group-items .nav-link i { font-size: 1rem; }

/* القائمة المطوية: الأيقونات وحدها — فلا معنى لعناوين المجموعات ولا لعناصرها */
body.sidebar-collapsed .app-sidebar .nav-group-toggle span,
body.sidebar-collapsed .app-sidebar .nav-chevron { display: none; }
body.sidebar-collapsed .app-sidebar .nav-group-toggle { justify-content: center; }
body.sidebar-collapsed .app-sidebar .nav-group-items {
  margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0;
}

.app-main {
  margin-inline-start: var(--app-sidebar-width);
  min-height: 100vh; transition: margin .3s ease;
  display: flex; flex-direction: column;
}

.app-topbar {
  height: var(--app-topbar-height);
  background: var(--bs-body-bg, #fff);
  border-bottom: 1px solid rgba(var(--app-primary-rgb), .12);
  display: flex; align-items: center; gap: 1rem;
  padding-inline: 1.25rem; position: sticky; inset-block-start: 0; z-index: 1030;
}
[data-bs-theme="dark"] .app-topbar { background: #16282b; }
.app-content { padding: 1.5rem; flex: 1 1 auto; }
.app-footer {
  padding: 1rem 1.5rem; color: var(--app-muted); font-size: .85rem;
  border-top: 1px solid rgba(var(--app-primary-rgb), .10);
}

body.sidebar-collapsed .app-sidebar { width: var(--app-sidebar-collapsed); }
body.sidebar-collapsed .app-sidebar .nav-link span,
body.sidebar-collapsed .app-sidebar .nav-section,
body.sidebar-collapsed .app-sidebar .sidebar-brand span { display: none; }
body.sidebar-collapsed .app-sidebar .nav-link { justify-content: center; }
body.sidebar-collapsed .app-main { margin-inline-start: var(--app-sidebar-collapsed); }

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(100%); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .app-main { margin-inline-start: 0; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; display: none; }
  body.sidebar-open .sidebar-backdrop { display: block; }
}

/* ===================== بطاقات الإحصاء ===================== */
.stat-card {
  background: var(--bs-body-bg, #fff); border-radius: var(--app-radius);
  border: 1px solid rgba(var(--app-primary-rgb), .08);
  padding: 1.25rem; box-shadow: var(--app-shadow); height: 100%;
}
[data-bs-theme="dark"] .stat-card { background: #16282b; }
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.3rem; color: #fff;
}
.stat-card .stat-value { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.stat-card .stat-label { color: var(--app-muted); font-size: .85rem; }
.bg-i-1 { background-image: var(--app-gradient); }
.bg-i-2 { background-color: var(--app-secondary); }
.bg-i-3 { background-color: var(--app-accent); }
.bg-i-4 { background-color: var(--app-accent-light); }

.card { border: 1px solid rgba(var(--app-primary-rgb), .08); box-shadow: var(--app-shadow); }
[data-bs-theme="dark"] .card { background: #16282b; }
.card-header { background: transparent; border-bottom: 1px solid rgba(var(--app-primary-rgb), .10); font-weight: 700; }

/* جداول متجاوبة: إخفاء أعمدة على الصغير */
@media (max-width: 575.98px) {
  .cell-optional { display: none !important; }
}
@media (max-width: 767.98px) {
  .cell-optional-md { display: none !important; }
}

.chart-box { position: relative; height: 300px; }
@media (max-width: 991.98px) { .chart-box { height: 260px; } }

/* ── ApexCharts في الوضع الداكن ──
   المكتبة تكتب لون نصوص المفتاح سطرياً (#373d3f رمادي داكن) وتلوّن نصوص
   المحاور بـfill من ورقتها، فتصير النصوص داكنة على خلفية داكنة (تباين 1.4
   أي غير مقروءة عملياً). التصحيح بـ!important لأن السطري يغلب القاعدة
   العادية. اللون مأخوذ من متغيّر النص في theme.css فيتبع القالب. */
[data-bs-theme="dark"] .apexcharts-legend-text { color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .apexcharts-text,
[data-bs-theme="dark"] .apexcharts-xaxis-label,
[data-bs-theme="dark"] .apexcharts-yaxis-label,
[data-bs-theme="dark"] .apexcharts-datalabel,
[data-bs-theme="dark"] .apexcharts-datalabel-label,
[data-bs-theme="dark"] .apexcharts-datalabel-value,
[data-bs-theme="dark"] .apexcharts-title-text { fill: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .apexcharts-gridline { stroke: rgba(255, 255, 255, .10); }
/* قائمة التصدير (تنزيل SVG/PNG/CSV) تُرسم بخلفية بيضاء ونص داكن ثابتين */
[data-bs-theme="dark"] .apexcharts-menu {
  background: #16282b;
  border-color: rgba(255, 255, 255, .15);
}
[data-bs-theme="dark"] .apexcharts-menu-item { color: var(--bs-body-color); }
[data-bs-theme="dark"] .apexcharts-menu-item:hover { background: rgba(255, 255, 255, .08); }

/* ── select2: عرض لا يقل عن 80% (توجيه صاحب النظام) ──
   select2 يكتب style="width:100%" سطرياً على حاويته، وداخل input-group يزاحم
   الأيقونة فتنكسر السطر. نجعلها عنصر flex يتمدد، وبحدٍّ أدنى 80% للعرض. */
.select2-container { min-width: 80%; }
.input-group > .select2-container {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 80%;
}
.input-group > .select2-container .select2-selection {
  height: 100%;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* ── نص التحذير على خلفية فاتحة ──
   أصفر بوتستراب ‎#ffc107‎ نصاً على أبيض تباينه ‎1.63‎ أي شبه غير مقروء
   (مشكلة معروفة في لوحة بوتستراب). نُبقي الحدّ والخلفية كما هما حفاظاً على
   لغة التصميم، ونُغمّق لون النص وحده إلى كهرماني داكن تباينه ‎5.1‎.
   الوضع الداكن لا يحتاجه: الأصفر على خلفية داكنة مقروء أصلاً (تباين 10.7).

   القاعدة الأساس بلا بادئة، ويُعاد الأصفر تحت ‎[data-bs-theme="dark"]‎ —
   أي قاعدة «تُضاف» في الداكن كبقية قواعد هذا الملف. تُجنَّب صياغة
   ‎[data-bs-theme="light"] .foo‎ لأن المتصفح لا يُحرِّر النمط حين تتوقّف
   المطابقة عند التبديل الحيّ، فيبقى لون الفاتح ظاهراً في الوضع الداكن
   إلى أن تُعاد الصفحة (تحقّقنا: ‎.card‎ يتبدّل في الاتجاهين وهذه لا تتبدّل).
   لا نلمس حالة التحويم: بوتستراب يضبط ‎--bs-btn-hover-color: #000‎ أصلاً. */
.btn-outline-warning { color: #8a6100; }
.text-warning { color: #8a6100 !important; }
[data-bs-theme="dark"] .btn-outline-warning { color: #ffc107; }
[data-bs-theme="dark"] .text-warning { color: #ffc107 !important; }

/* ── select2 في الوضع الداكن ──
   ورقة select2 تثبّت خلفية بيضاء ونصاً رمادياً (#fff / #444 / #999) ولا تعرف
   بـdata-bs-theme، فتظهر كل قائمة صندوقاً أبيض ناصعاً وسط صفحة داكنة —
   وكل قوائم التطبيق select2 بتوجيه صاحب النظام، فالأثر عام لا موضعي.
   (نصّ الإرشاد #999 على أبيض تباينه 2.85 أي دون الحد المقبول أصلاً.) */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered,
[data-bs-theme="dark"] .select2-results__option {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-bottom-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
  background-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(255, 255, 255, .10);
  border-color: var(--bs-border-color);
}

/* ── ملخّص التحقق الفارغ لا يُعرض ──
   `asp-validation-summary` يرسم الحاوية دائماً ويضع صنف
   validation-summary-valid حين لا أخطاء، فيظهر شريط أحمر فارغ. */
.validation-summary-valid { display: none !important; }