/* ═══════════════════════════════════════════════════════════════
   theme.css — الهوية البصرية الموحّدة لكل صفحات النظام
   مصدر واحد لكل الألوان/البطاقات/الجداول/الأزرار. تعديل المظهر يتم هنا فقط.
   ملاحظة: أسماء المتغيّرات والأصناف الأساسية ثابتة (تعتمدها القوالب) — لا تُحذف.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── الهوية الأساسية (تعتمدها القوالب مباشرةً — أبقِها) ── */
  --primary:        #1a3a5c;
  --primary-light:  #2a5a8c;
  --accent:         #e8f0f8;
  --border:         #d3e0ee;
  --success:        #12805c;
  --danger:         #d64550;
  --zoom:           #2D8CFF;

  /* ── لكنة نحاسية راقية (اتجاه «مؤسسي راقٍ») — تُستخدم بتحفّظ للتمييز ── */
  --gold:        #b07d2b;
  --gold-strong: #8f6820;
  --gold-soft:   #f3ead9;
  --gold-light:  #e7c98d;

  /* ── تدرّج لوني موسّع (للاستخدام الداخلي في المكوّنات) ── */
  --primary-50:  #f2f7fc;
  --primary-100: #e3edf7;
  --primary-200: #c6d9ec;
  --primary-300: #9dbcda;
  --primary-600: #1f4670;
  --primary-700: #163454;
  --primary-900: #0e2033;

  /* ── محايدات (نصوص/خلفيات) ── */
  --ink:        #16283a;   /* نص أساسي */
  --ink-soft:   #4a5c6e;   /* نص ثانوي */
  --ink-muted:  #7b8ea0;   /* تلميحات */
  --canvas:     #eef3f9;   /* خلفية الصفحة */
  --surface:    #ffffff;   /* البطاقات */
  --surface-2:  #f6f9fd;   /* سطح ثانوي */

  /* ── الظلال (طبقات ناعمة متدرّجة) ── */
  --shadow-xs: 0 1px 2px rgba(16,40,63,.06);
  --shadow-sm: 0 2px 6px rgba(16,40,63,.07), 0 1px 2px rgba(16,40,63,.05);
  --shadow-md: 0 6px 18px rgba(16,40,63,.09), 0 2px 6px rgba(16,40,63,.05);
  --shadow-lg: 0 14px 40px rgba(16,40,63,.16);
  --ring:      0 0 0 .2rem rgba(26,58,92,.18);

  /* ── نصف الأقطار والحركة ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --t-fast: .12s ease;
  --t:      .18s cubic-bezier(.4,0,.2,1);
}

* { scrollbar-color: var(--primary-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--primary-300); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--primary-light); background-clip: content-box; }

body {
  font-family: 'Tajawal', -apple-system, 'Segoe UI', sans-serif;
  background: var(--canvas);
  background-image: radial-gradient(1200px 600px at 100% -10%, #e7eef7 0%, transparent 55%),
                    radial-gradient(1000px 500px at -10% 0%, #eaf1f9 0%, transparent 45%);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(26,58,92,.16); }

h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }

a { text-decoration: none; }

/* إتاحة التركيز الواضح للوصولية (لوحة المفاتيح) دون التأثير على النقر بالفأرة */
:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.nav-link:focus-visible { outline: none; box-shadow: var(--ring); }

/* ── الشريط العلوي ── */
.navbar {
  background: linear-gradient(100deg, var(--primary-900) 0%, var(--primary-700) 45%, var(--primary) 120%) !important;
  box-shadow: var(--shadow-md);
  position: sticky; top: 0; z-index: 1030;
  padding-top: .5rem; padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar-brand { font-size: 1.12rem; font-weight: 800; color: #fff !important;
  letter-spacing: -.02em; display: inline-flex; align-items: center; }
.navbar-brand i { color: var(--gold-light); opacity: 1; }   /* لكنة نحاسية على الشعار */
/* أضيق قليلاً كي لا تلتفّ روابط التنقّل على سطرين */
.navbar .nav-link { color: rgba(255,255,255,.82) !important; font-weight: 600; font-size: .875rem;
  border-radius: var(--r-sm); padding: .38rem .58rem !important; transition: background var(--t-fast), color var(--t-fast);
  display: inline-flex; align-items: center; white-space: nowrap; position: relative; }
.navbar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.1); }
.navbar .nav-link.active { color: #fff !important; }
/* الرابط النشط: خطّ نحاسي رفيع أسفله (توقيع «مؤسسي راقٍ») */
.navbar .nav-link.active::after { content: ""; position: absolute; inset-inline: .58rem; bottom: 1px;
  height: 2px; border-radius: 2px; background: var(--gold-light); }
.navbar .dropdown-menu { border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: .35rem; margin-top: .4rem; }
.navbar .dropdown-item { border-radius: var(--r-sm); font-weight: 600; font-size: .92rem; padding: .5rem .75rem; }
.navbar .dropdown-item:hover { background: var(--accent); color: var(--primary); }
.navbar-toggler { border-color: rgba(255,255,255,.3); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.25); }

/* ── ترويسة الصفحات الداخلية ── */
.page-header {
  background: linear-gradient(100deg, var(--primary-900) 0%, var(--primary-700) 55%, var(--primary) 130%);
  color: #fff; padding: 1.15rem 1.5rem 1.15rem 1.7rem; border-radius: var(--r-md);
  margin-bottom: 1.5rem; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
/* شريط نحاسي رفيع على حافة البداية — لكنة «مؤسسي راقٍ» على الترويسة الكحلية */
.page-header::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 4px; background: var(--gold); }
.page-header h1, .page-header h2, .page-header h3, .page-header h4 { margin: 0; font-weight: 800; letter-spacing: -.02em; }

/* ── الهيرو ── */
.hero {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary) 45%, var(--primary-light) 100%);
  color: #fff; padding: 2.4rem 1.5rem 2.6rem; border-radius: 0 0 26px 26px; text-align: center;
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.hero::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 240px at 80% -30%, rgba(255,255,255,.14), transparent 60%); pointer-events: none; }
.hero h1 { font-weight: 800; font-size: 1.85rem; margin-bottom: .4rem; letter-spacing: -.02em; }
.hero p { opacity: .88; margin: 0; font-size: 1rem; }
.hero-zoom { background: linear-gradient(135deg, var(--primary) 0%, #2570d4 55%, var(--zoom) 100%); }

/* ── التبويبات ── */
.nav-tabs { border-bottom: 2px solid var(--border); gap: .15rem; }
.nav-tabs .nav-link { color: var(--ink-soft); font-weight: 700; border: none; border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: .6rem 1rem; margin-bottom: -2px; border-bottom: 2px solid transparent; transition: var(--t-fast); }
.nav-tabs .nav-link:hover:not(.active) { color: var(--primary); background: var(--primary-50); }
.nav-tabs .nav-link.active { color: var(--primary); background: transparent;
  border-bottom-color: var(--primary); font-weight: 800; }

/* ── البطاقات ── */
.card { border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); background: var(--surface); overflow: hidden; }
.card-header { background: linear-gradient(180deg, var(--surface-2), #eef4fb);
  border-bottom: 1px solid var(--border); font-weight: 800; color: var(--primary);
  padding: .8rem 1.1rem; letter-spacing: -.01em; }
.card-body { padding: 1.15rem; }

/* ── الأزرار ── */
.btn { font-weight: 700; border-radius: var(--r-sm); transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--primary-light); border-color: var(--primary-light); box-shadow: var(--shadow-sm); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary-300); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-success { background: var(--success); border-color: var(--success); }
.btn-danger  { background: var(--danger);  border-color: var(--danger); }
.btn-zoom { background: var(--zoom); border-color: var(--zoom); color: #fff; font-weight: 800; box-shadow: var(--shadow-xs); }
.btn-zoom:hover { background: #1b6fd6; border-color: #1b6fd6; color: #fff; box-shadow: var(--shadow-sm); }
.btn-light { background: #fff; border-color: var(--border); color: var(--primary); }
.btn-light:hover { background: var(--accent); border-color: var(--primary-300); }

/* ── الجداول ── */
.table { --bs-table-striped-bg: #f4f8fc; border-color: var(--border); margin-bottom: 0; }
.table thead th { background: var(--primary); color: #fff; border: none; font-weight: 700;
  font-size: .9rem; letter-spacing: -.01em; padding: .7rem .75rem; position: sticky; }
.table thead th:first-child { border-start-start-radius: var(--r-sm); }
.table thead th:last-child  { border-start-end-radius: var(--r-sm); }
.table tbody td { padding: .6rem .75rem; vertical-align: middle; border-color: #e7eef6; }
.table-hover tbody tr { transition: background var(--t-fast); }
.table-hover tbody tr:hover { background: var(--accent); }
.table td .font-monospace, .table .font-monospace { font-variant-numeric: tabular-nums; }
/* غلاف تمرير أفقي أنيق للجداول العريضة على الشاشات الصغيرة */
.table-responsive { border-radius: var(--r-md); box-shadow: var(--shadow-xs); }

/* ── النماذج ── */
.form-label { font-weight: 700; color: var(--primary); margin-bottom: .35rem; }
.form-control, .form-select { border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .5rem .8rem; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.form-control:hover, .form-select:hover { border-color: var(--primary-300); }
.form-control:focus, .form-select:focus { border-color: var(--primary-light); box-shadow: var(--ring); }
.form-control::placeholder { color: var(--ink-muted); }
.input-group-text { background: var(--surface-2); border: 1px solid var(--border); color: var(--primary); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--primary-light); box-shadow: var(--ring); }

/* ── التنبيهات ── */
.alert { border: 1px solid transparent; border-radius: var(--r-md); box-shadow: var(--shadow-xs);
  border-inline-start-width: 4px; font-weight: 600; }
.alert-success { border-inline-start-color: var(--success); }
.alert-danger  { border-inline-start-color: var(--danger); }
.alert-warning { border-inline-start-color: #e0a800; }
.alert-info    { border-inline-start-color: var(--zoom); }

/* ── الشارات ── */
.badge { font-weight: 700; letter-spacing: -.01em; }
.result-badge { font-size: .95rem; padding: .45rem .85rem; border-radius: var(--r-sm); }
.badge-campus-second { background: #fff6e0; color: #8a6100; border: 1px solid #ffd873; }
.badge-campus-main   { background: #dcf3e8; color: #0d6a4c; border: 1px solid #4fc08d; }

/* ── عناصر مشتركة ── */
.step-badge { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff; font-weight: 800; font-size: .95rem; flex-shrink: 0; box-shadow: var(--shadow-xs); }
.section-title { position: relative; font-size: 1.12rem; font-weight: 800; color: var(--primary);
  border-bottom: 2px solid var(--border); padding-bottom: .55rem; margin-bottom: 1rem; letter-spacing: -.01em; }
/* مقطع نحاسي قصير أسفل بداية العنوان — لكنة «مؤسسي راقٍ» */
.section-title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -2px;
  width: 42px; height: 2px; background: var(--gold); border-radius: 2px; }

/* ── بطاقة كيان (فصل/امتحان): مقياس رقمي نحاسي + زر «فتح» خفيف + حذف هادئ ── */
.entity-card { transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.entity-card:hover { border-color: var(--gold-light); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.entity-metric { text-align: center; flex: none; padding-inline-start: 14px; border-inline-start: 1px solid #eef1f5; }
.entity-metric .n { font-size: 1.7rem; font-weight: 800; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.entity-metric .l { font-size: .72rem; color: var(--ink-muted); font-weight: 600; margin-top: 2px; }
.entity-date { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-muted); font-size: .85rem; direction: ltr; }
.entity-actions { border-top: 1px solid #eef1f5; padding-top: .9rem; }
.btn-soft-danger { background: #fff; border: 1px solid #e6dede; color: #b6737a; }
.btn-soft-danger:hover { background: #fdf1f2; border-color: #e6b9be; color: #c0424e; }

/* ── شريط أدوات موحّد (بحث/فلاتر/إجراء) يعلو الجداول والقوائم ── */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: .7rem .85rem;
  box-shadow: var(--shadow-xs); margin-bottom: 1.1rem; }
.toolbar .grow { flex: 1 1 220px; }

/* ── حالة فارغة موحّدة (لا بيانات بعد) ── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-muted); }
.empty-state .ico { width: 84px; height: 84px; margin: 0 auto 1rem; border-radius: 50%; display: grid;
  place-items: center; background: var(--primary-50); color: var(--primary-300); font-size: 2.4rem; }
.empty-state h5 { color: var(--ink-soft); font-weight: 800; margin-bottom: .3rem; }

/* ── رقاقة معلومات صغيرة ── */
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700;
  padding: .26rem .68rem; border-radius: var(--r-pill); background: var(--primary-50);
  color: var(--primary-600); border: 1px solid var(--primary-100); }
.chip.gold { background: var(--gold-soft); color: var(--gold-strong); border-color: #e6d3ae; }
.chip.ok   { background: #e2f4ec; color: #0d6a4c; border-color: #b7e2cd; }
.chip.warn { background: #fff6e0; color: #8a6100; border-color: #ffe3a3; }

/* ════════════════════════════════════════════════════════════════
   تبويب «الجلسات» — تصميم Progressive Disclosure
   بطاقة يوم مطويّة بملخّص → بطاقات جلسات مختصرة → لوحة تفاصيل بأقسام.
   ملاحظة: أسماء الأصناف الوظيفية ثابتة (يعتمدها الـJS) — التنسيق فقط هنا.
   ════════════════════════════════════════════════════════════════ */

/* ── بطاقة اليوم ── */
.day-group { border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 1.25rem; background: var(--surface); }
.day-group-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; cursor: pointer;
  background: linear-gradient(100deg, var(--primary-900) 0%, var(--primary-700) 55%, var(--primary) 120%);
  color: #fff; padding: .9rem 1.15rem; transition: background var(--t-fast); }
.day-group-header:hover { filter: brightness(1.06); }
.dg-title { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.06rem; letter-spacing: -.01em; }
.dg-title > .bi { color: var(--gold-light); font-size: 1.15rem; }
.dg-date { font-weight: 600; opacity: .82; font-size: .88rem; direction: ltr; font-variant-numeric: tabular-nums; }
.dg-summary { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1 1 auto; }
.dg-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700;
  padding: .26rem .68rem; border-radius: var(--r-pill); background: rgba(255,255,255,.15);
  color: #fff; border: 1px solid rgba(255,255,255,.14); font-variant-numeric: tabular-nums; }
.dg-chip .bi { opacity: .9; }
.dg-actions { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; }
.dg-actions .btn { font-size: .8rem; padding: .32rem .6rem; }
.dg-actions .btn-light { color: var(--primary); font-weight: 700; }
.dg-actions .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.4); }
.day-chevron { transition: transform .2s; font-size: 1.1rem; }
.day-sessions { background: var(--canvas); padding: 1rem; display: flex; flex-direction: column; gap: .85rem; }

/* ── بطاقة الجلسة (مختصرة → تفاصيل) ── */
.session-card { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--shadow-xs); overflow: hidden; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.session-card:hover { box-shadow: var(--shadow-sm); border-color: var(--primary-200); }
.session-card.open { border-color: var(--primary-300); box-shadow: var(--shadow-md); }

/* الشريط المختصر */
.session-compact { display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; cursor: pointer; }
.session-compact:hover { background: var(--primary-50); }
.session-title { font-size: 1rem; font-weight: 800; letter-spacing: .01em; background: var(--primary);
  color: #fff !important; padding: .3rem .72rem; border-radius: 9px; white-space: nowrap;
  font-variant-numeric: tabular-nums; flex: none; }
.session-title i { color: rgba(255,255,255,.85); }
.sc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .32rem; }
.sc-courses { font-weight: 700; color: var(--ink); font-size: .92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-courses .muted { color: var(--ink-muted); font-weight: 600; }
.session-summary { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.session-summary .schip { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700;
  padding: .22rem .6rem; border-radius: 999px; background: var(--primary-50); color: var(--primary-600); border: 1px solid var(--primary-100); }
.session-summary .schip .n { font-variant-numeric: tabular-nums; }
.session-summary .sst { font-size: .78rem; font-weight: 800; padding: .22rem .6rem; border-radius: 999px; }
.session-summary .sst.ok   { background: #e4f4ec; color: #12805c; border: 1px solid #bfe3d0; }
.session-summary .sst.warn { background: #fdf3d8; color: #916a10; border: 1px solid #eed9a0; }
.session-summary .sst.dng  { background: #fdeef0; color: #d64550; border: 1px solid #f2c2c9; }
.session-conflict-badge:empty { display: none; }
.sc-actions { display: flex; gap: .32rem; align-items: center; flex-shrink: 0; }
.sc-actions .btn { font-size: .78rem; padding: .3rem .55rem; }

/* لوحة التفاصيل (تظهر عند الفتح) */
.session-details { border-top: 1px solid var(--border); padding: 1.1rem; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 1rem; }
.session-details .row { --bs-gutter-x: 1.6rem; row-gap: 1.2rem; }
.sd-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .95rem 1.05rem; }
.sd-head { font-weight: 800; color: var(--primary); font-size: .98rem; margin-bottom: .8rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; letter-spacing: -.01em; }
.sd-head .bi { color: var(--gold); margin-inline-end: .45rem; }
.sd-field-label { font-size: .78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .25rem; }
.sd-foot { display: flex; gap: .5rem; justify-content: flex-end; align-items: center;
  border-top: 1px dashed var(--border); padding-top: .85rem; }

/* التبديل بين المختصر والتفاصيل */
.session-card:not(.open) .session-details { display: none; }
.session-card.open .session-compact { display: none; }

/* ── المختبرات: شبكة رقاقات مرتّبة ── */
.labs-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: .8rem !important; min-height: 54px; }
.labs-container:empty::before { content: "لم تُضف مختبرات بعد"; color: var(--ink-muted); font-size: .85rem; grid-column: 1/-1; text-align: center; }
.lab-tag { display: flex; align-items: center; gap: .4rem; background: #fff;
  border: 1px solid var(--primary-200); border-radius: var(--r-sm) !important;
  padding: .5rem .7rem !important; font-size: .875rem !important; margin: 0 !important;
  box-shadow: var(--shadow-xs); line-height: 1.35; transition: border-color var(--t-fast); }
.lab-tag > .fw-bold { flex: none; }
.lab-tag > .text-muted.small { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-tag:hover { border-color: var(--gold-light); }
.lab-tag .remove { cursor: pointer; color: var(--danger); font-weight: 800; flex: none; line-height: 1; }

/* ── لوحة المساق/الملف ── */
.file-item { border-radius: var(--r-md) !important; background: var(--surface-2) !important;
  border: 1px solid var(--border) !important; padding: .9rem !important; margin-bottom: .8rem !important; }
.file-item:hover { border-color: var(--primary-300) !important; }

/* قائمة الشعب (عند «توزيع حسب نطاق شعبة») — عرض فقط */
.sf-sections-list:empty { display: none; }
.sf-sections-list .sec-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: .5rem; }
.sec-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700;
  padding: .22rem .58rem; border-radius: 6px; background: var(--primary-50); color: var(--primary-600); border: 1px solid var(--primary-100); }
.sec-pill .n { font-variant-numeric: tabular-nums; }

/* ── ملخّص السعة داخل الجلسة (قسم الإحصائيات) ── */
.cap-meter { height: 8px; background: #e7edf4; border-radius: 999px; overflow: hidden; margin-bottom: .55rem; }
.cap-meter > i { display: block; height: 100%; background: linear-gradient(90deg, #12805c, #37bd8d); }
.cap-meter.dng > i { background: linear-gradient(90deg, var(--danger), #e87d86); }
.stats-status { font-size: .9rem; font-weight: 800; padding: .32rem .8rem; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; }
.stats-status.ok   { background: #e4f4ec; color: #12805c; border: 1px solid #bfe3d0; }
.stats-status.warn { background: #fdf3d8; color: #916a10; border: 1px solid #eed9a0; }
.stats-status.dng  { background: #fdeef0; color: #d64550; border: 1px solid #f2c2c9; }
.stats-brk { direction: ltr; overflow-x: auto; font-variant-numeric: tabular-nums; }
.session-stats { background: var(--surface); overflow-x: auto; line-height: 1.75; }

/* جوال: أعمدة التفاصيل تتكدّس، وأزرار الشريط المختصر تلتفّ */
@media (max-width: 575.98px) {
  .session-compact { flex-wrap: wrap; }
  .sc-actions { width: 100%; justify-content: flex-end; }
  .dg-actions { width: 100%; justify-content: flex-end; }
  .dg-summary { order: 3; width: 100%; }
}

/* ── طبقة الانتظار ── */
.spinner-overlay { position: fixed; inset: 0; background: rgba(238,243,249,.72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 9999;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; }

/* ── شبكة بطاقات البوابة ── */
.apps-grid { max-width: 1000px; margin: 1.5rem auto 0; padding: 0 1rem 2.5rem; position: relative; z-index: 2; }
.card-wrap { position: relative; height: 100%; }
.app-card { display: flex; flex-direction: column; align-items: center; height: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.9rem 1.35rem; text-align: center; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.app-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg);
  border-color: var(--gold-light); color: var(--ink); }
.app-card .ic { width: 78px; height: 78px; margin: 0 auto 1.05rem; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 2.3rem; color: #fff;
  box-shadow: var(--shadow-sm); transition: transform var(--t); }
.app-card:hover .ic { transform: scale(1.06) rotate(-2deg); }
.app-card h5 { font-weight: 800; margin-bottom: .4rem; letter-spacing: -.01em; }
.app-card p { color: var(--ink-muted); font-size: .88rem; margin: 0; line-height: 1.55; }
.app-card.soon { opacity: .6; pointer-events: none; }

/* أيقونات البطاقات — تدرّجات لونية لكل نظام */
.ic-exam       { background: linear-gradient(135deg, #1a3a5c, #2a5a8c); }
.ic-unified    { background: linear-gradient(135deg, #1a3a5c, #2a5a8c); }
.ic-nonunified { background: linear-gradient(135deg, #12805c, #28a745); }
.ic-inperson   { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.ic-ip         { background: linear-gradient(135deg, #0b5394, #3d85c6); }
.ic-grades     { background: linear-gradient(135deg, #12805c, #28a745); }
.ic-zoom       { background: linear-gradient(135deg, #2D8CFF, #4f6bed); }
.ic-attend     { background: linear-gradient(135deg, #fd7e14, #ffb454); }
.ic-settings   { background: linear-gradient(135deg, #6f42c1, #9168d6); }

.soon-badge { position: absolute; top: 12px; inset-inline-start: 12px; background: #fff6e0; color: #8a6100;
  border: 1px solid #ffd873; font-size: .72rem; font-weight: 800; padding: .18rem .6rem; border-radius: var(--r-pill); }
.view-badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--primary-100); color: var(--primary-600);
  border: 1px solid var(--primary-200); font-size: .72rem; font-weight: 800; padding: .18rem .6rem; border-radius: var(--r-pill); }
.no-access { text-align: center; color: var(--ink-muted); padding: 2.5rem 1rem; }
.portal-footer { text-align: center; color: var(--ink-muted); font-weight: 700; font-size: .9rem;
  padding: 1.5rem 1rem 2rem; border-top: 1px solid var(--border); margin-top: 1.5rem; }

/* ── حاوية الصفحات المستقلة + عناصرها ── */
.wrap { max-width: 1180px; margin: 1.5rem auto; padding: 0 1rem 3rem; }

/* بطاقات الإحصائيات */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 1rem .9rem; text-align: center; height: 100%; box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast), box-shadow var(--t-fast); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.stat .n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--primary);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .l { font-size: .8rem; color: var(--ink-muted); margin-top: .25rem; font-weight: 600; }

/* منطقة سحب الملفات */
.drop { border: 2px dashed var(--primary-200); border-radius: var(--r-lg); padding: 2.4rem 1rem;
  text-align: center; background: var(--surface); cursor: pointer; transition: var(--t); }
.drop.drag, .drop:hover { border-color: var(--primary-light); background: var(--primary-50); transform: translateY(-1px); }
.drop i { font-size: 2.7rem; color: var(--primary-light); }

/* ── النوافذ المنبثقة (Bootstrap modal) ── */
.modal-content { border: none; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header { background: linear-gradient(180deg, var(--surface-2), #eef4fb); border-bottom: 1px solid var(--border); }
.modal-title { font-weight: 800; color: var(--primary); }
.modal-footer { border-top: 1px solid var(--border); }

/* ── حركة ظهور لطيفة للمحتوى ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card, .app-card, .stat { animation: fadeUp .28s ease both; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ═══════════ الاستجابة لأحجام الشاشات (جوال/لوحي/سطح مكتب) ═══════════ */
/* أمان عام: لا تمرير أفقي على مستوى الصفحة، والمحتوى العريض يمرَّر داخل حاويته */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
img, svg, canvas, video { max-width: 100%; height: auto; }
.container-fluid, .wrap, .row { max-width: 100%; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* الشعار قد يكون طويلاً — امنعه من دفع الشريط خارج الشاشة */
.navbar-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* لوحي وأصغر (يطوى فيه شريط التنقّل إلى قائمة) */
@media (max-width: 991.98px) {
  .navbar-brand { font-size: .98rem; white-space: nowrap; }
  /* عناصر القائمة المطويّة: أزل الخطّ النحاسي السفلي (غير مناسب عمودياً) وباعد */
  .navbar-collapse .nav-link.active::after { display: none; }
  .navbar-collapse .navbar-nav { padding-top: .4rem; gap: .1rem; }
  .navbar-collapse .nav-item.border-start { border-inline-start: none !important; }
}

/* جوال */
@media (max-width: 575.98px) {
  .navbar { padding-inline: .35rem; }
  .navbar-brand { font-size: .82rem; }
  .navbar-brand i { margin-inline-end: .3rem !important; }

  /* الترويسة: كدّس العنوان فوق الزر، والزر بعرض كامل */
  .page-header { padding: 1rem 1rem 1rem 1.15rem; }
  .page-header.d-flex { flex-direction: column; align-items: stretch !important; gap: .7rem; }
  .page-header .btn { width: 100%; justify-content: center; }

  /* الهيرو أصغر */
  .hero { padding: 1.8rem 1rem 2rem; }
  .hero h1 { font-size: 1.4rem; }
  .hero p { font-size: .9rem; }
  .apps-grid { margin-top: 1rem; }

  /* شريط الأدوات يتكدّس عمودياً */
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .grow { flex: 1 1 auto; width: 100%; }

  /* الجداول: مرّر أفقياً بدل تكسير الخلايا لأسطر */
  .table td, .table th { white-space: nowrap; }

  .card-body { padding: .9rem; }
  .section-title { font-size: 1.02rem; }
  .stat .n { font-size: 1.4rem; }
  .modal-dialog { margin: .5rem; }
}

/* ── الطباعة (كشوفات/تقارير) ── */
@media print {
  .navbar, .page-header .btn, .btn, .spinner-overlay, .no-print { display: none !important; }
  body { background: #fff; }
  .card, .stat { box-shadow: none; border-color: #ccc; }
  .table thead th { background: #1a3a5c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}