/* نظام إدارة الرسوم الدراسية — الأنماط (Styles)
   مستخرجة من التصميم الأصلي دون تغيير بصري. */

/* --- سمة الواجهة (فاتحة/داكنة) ---
   ⚠️ قاعدة ملزمة: ألوان الوضع الداكن تُطبَّق على حاويات الواجهة فقط
   (.main و.sidebar والنوافذ)، ولا تُوضع أبداً على body أو html.
   السبب: قالب الوصل (#receiptTemplate) خارج .main، وأنماط .rec-* عامة لا
   داخل @media print. لو لوّنّا body لورث الوصلُ لونَ نص فاتحاً وطُبع أبيضَ
   على أبيض. الطباعة اختُبرت فعلياً على ورق A5 ولا يجوز المساس بها. */
:root {
  --primary: #2c3e50;
  --secondary: #34495e;
  --accent: #27ae60;
  --danger: #c0392b;
  --warning: #f39c12;
  --light: #ecf0f1;
  --border: #bdc3c7;
  --success: #218c53;
  --bg-body: #eef1f5;

  /* أسطح وطبقات */
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #eef2f6;
  --text: #1f2933;
  --text-muted: #6b7785;
  --border-soft: #e3e8ef;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .14), 0 4px 8px rgba(16, 24, 40, .06);
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --sidebar-bg: linear-gradient(180deg, #2c3e50, #22303d);
  --row-hover: #f2f7fb;
  --focus-ring: 0 0 0 3px rgba(39, 174, 96, .25);
}

/* الوضع الداكن: نفس الأسماء بقيم أخرى، فلا تتغيّر أي قاعدة أدناه */
html[data-theme="dark"] {
  --primary: #1b2733;
  --secondary: #24313f;
  --accent: #2ecc71;
  --danger: #e74c3c;
  --warning: #f0a92c;
  --light: #263341;
  --border: #3a4a5c;
  --success: #27ae60;
  --bg-body: #131a21;

  --surface: #1b232c;
  --surface-2: #202a35;
  --surface-3: #26323e;
  --text: #e6edf3;
  --text-muted: #9aa8b8;
  --border-soft: #2d3a48;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .55);
  --sidebar-bg: linear-gradient(180deg, #17202a, #121a22);
  --row-hover: #232f3b;
  --focus-ring: 0 0 0 3px rgba(46, 204, 113, .28);
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  background-color: var(--bg-body);
  display: flex;
  height: 100vh;
  overflow: hidden;
  /* لا color هنا عمداً — راجع التحذير أعلى الملف */
}

/* الحاويات وحدها تحمل لون النص، فلا يصل إلى قالب الوصل */
.main, .modal-box, #login-container { color: var(--text); }

/* شاشة تسجيل الدخول */
#login-container {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex; justify-content: center; align-items: center;
  z-index: 2000;
}
.login-box {
  background: white; padding: 40px; border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  width: 350px; text-align: center;
}
.login-box h2 { color: var(--primary); margin-bottom: 20px; border: none; }
.login-box input { margin-bottom: 15px; padding: 12px; font-size: 1rem; border: 1px solid var(--border); border-radius: 4px; width: 100%; box-sizing: border-box; }
.login-box button { width: 100%; padding: 12px; font-size: 1.1rem; }

/* القائمة الجانبية */
.sidebar {
  width: 250px;
  background: var(--sidebar-bg);
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  display: none;
  overflow-y: auto;
  flex-shrink: 0;
  z-index: 120;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}

.logo {
  padding: 20px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 1px solid rgba(255,255,255,.09);
  flex-shrink: 0;
  letter-spacing: .3px;
}

.nav-item {
  padding: 13px 20px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-right: 4px solid transparent;
  font-size: .95rem;
}

.nav-item:hover { background-color: rgba(255,255,255,.07); }
.nav-item.active {
  background-color: rgba(255,255,255,.11);
  border-right-color: var(--accent);
  font-weight: 600;
}

.user-info {
  margin-top: auto;
  padding: 15px;
  font-size: 0.8rem;
  background: rgba(0,0,0,.22);
  text-align: center;
  flex-shrink: 0;
  line-height: 1.6;
}

/* المحتوى الرئيسي */
.main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  position: relative;
  display: none;
}

.view-section {
  display: none;
  background: var(--surface);
  padding: 22px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  min-height: 90%;
}

.view-section.active {
  display: block;
}

h2 { margin-top: 0; color: var(--text); border-bottom: 2px solid var(--border-soft); padding-bottom: 12px; font-size: 1.35rem; letter-spacing: -.2px; }
h3, h4 { color: var(--text); }

/* الجداول */
table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: .93rem; }
th, td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--border-soft); }
th {
  background-color: var(--secondary); color: #fff; position: sticky; top: 0;
  font-weight: 600; font-size: .88rem; white-space: nowrap; z-index: 2;
}
tbody tr { transition: background .14s ease; }
tbody tr:hover { background-color: var(--row-hover); }

/* الأزرار والمدخلات */
.btn {
  padding: 9px 17px;
  /* شفافة لا none: زر .btn-outline يحمل حدّاً حقيقياً، ولولا هذا لصار أطول
     من جيرانه بمقدار سماكة الحدّ فتتفاوت أحجام الأزرار داخل خلية الإجراءات */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  font-family: inherit;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { filter: brightness(1.07); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; }
.btn-primary { background: var(--accent); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-warning { background: var(--warning); color: white; }
.btn-info { background: #3498db; color: white; }
.btn-success { background: var(--success); color: white; }
.btn-outline { background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: none; }
.btn-outline:hover { background: var(--surface-3); }
.btn-sm { padding: 4px 8px; font-size: 0.85rem; }

input, select, textarea {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .94rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
label { font-size: .88rem; color: var(--text-muted); display: block; margin-bottom: 4px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* كروت لوحة التحكم */
.dashboard-cards {
  display: grid;
  /* 210px يسمح بصفٍّ واحد يضم كل البطاقات على الشاشات العريضة */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 15px;
}
.card {
  background: var(--surface);
  padding: 18px 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  text-align: center;
  position: relative;
  min-width: 0;            /* يمنع تمدّد البطاقة خارج عمود الشبكة بسبب رقم طويل */
  overflow: hidden;
  transition: transform .16s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card h3 { margin: 0; color: var(--secondary); font-size: 0.9rem; display: flex; justify-content: center; align-items: center; gap: 5px;}
/* المبالغ تصل إلى مليارات (14 خانة مع الفواصل). القياس هنا مضبوط ليتّسع
   لرقم بحجم 10,000,000,000 داخل أضيق بطاقة دون أن يخرج عن حدودها. */
.card-note {
  font-size: 0.7rem; color: #8e44ad; margin-top: 3px; min-height: 1em;
  white-space: nowrap; direction: ltr;
}
.card .value {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--accent);
  margin-top: 8px;
  white-space: nowrap;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  direction: ltr;          /* الأرقام تُقرأ يساراً-يميناً حتى داخل صفحة RTL */
}

/* تفاصيل الدفع للطلاب */
.breakdown-table {
    width: 100%;
    background: #f8f9fa;
    border-radius: 6px;
    margin: 10px 0;
    border: 1px solid #e9ecef;
}
.breakdown-table td { border-bottom: 1px solid #e9ecef; padding: 8px; }
.breakdown-table tr:last-child td { border-bottom: none; font-weight: bold; }

/* مؤشر التحميل */
#loading {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.8);
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
  flex-direction: column;
}
.spinner {
  border: 5px solid #f3f3f3; border-top: 5px solid var(--accent);
  border-radius: 50%; width: 50px; height: 50px;
  animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.perm-checkbox { transform: scale(1.2); cursor: pointer; }

/* أنماط الطباعة */
/* الوصل ورقة A5 عرضية كاملة (210×148mm) — الورقة نفسها A5، لا وصلٌ صغير داخل A4.
   المساحة القابلة للطباعة بعد هوامش 10mm: 190mm عرضاً × 128mm ارتفاعاً.
   العرض قريب من A4 فلا يزيد التفاف النص، لكن الارتفاع أقل بكثير (128 بدل 177)،
   ولذلك ضُبطت الخطوط والهوامش أدناه لتملأ الصفحة دون تجاوزها. */
@page { size: A5 landscape; margin: 10mm; }

@media print {
  body { display: block !important; background-color: white !important; height: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  .sidebar, #login-container, #studentModal, #userModal, #paymentEditModal, #loading, .btn, .no-print { display: none !important; }

  .main { padding: 0 !important; margin: 0 !important; display: block !important; overflow: visible !important; }
  .view-section { display: none !important; }

  .receipt-container {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999;
    font-family: 'Times New Roman', Times, serif;
  }
  /* يملأ صفحة A5 العرضية كاملة: 148mm ارتفاعاً ناقص هامشَي 10mm */
  .receipt-copy {
    height: 128mm;
    border: 2px solid black;
    padding: 5mm 6mm;
    box-sizing: border-box;
    position: relative;
    background: white;
    page-break-inside: avoid;
    display: flex;
    flex-direction: column;
  }

  body.printing-receipt .main { display: none !important; }
}

.receipt-container { display: none; }
.status-paid { color: green; font-weight: bold; }
.status-debt { color: red; font-weight: bold; }

/* تصميم الوصل — صفحة A5 عرضية كاملة (190×128mm قابلة للطباعة).
   المقاسات مضبوطة تجريبياً على أطول اسم وقسم في البيانات الفعلية، ومبلغ من
   7 أرقام، ومتبقٍّ من 8 أرقام. */
.rec-logo-header { text-align: center; margin-bottom: 2.5mm; padding-bottom: 1.5mm; border-bottom: 3px double #000; }
.rec-logo-header h2 { font-size: 17px; margin: 0 0 1.2mm 0; border: none; letter-spacing: 0.3px; }
.rec-logo-header h3 { font-size: 13px; margin: 0; display: inline-block; border: 1.5px solid #000; padding: 0.8mm 5mm; }

/* سطر البيانات العلوي: يلتفّ عند الحاجة بدل أن يتزاحم */
.rec-top-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1mm 4mm; margin-bottom: 2.5mm; font-weight: bold; font-size: 11px; }

.rec-table-info { width: 100%; border-collapse: collapse; margin-bottom: 2.5mm; }
.rec-table-info td { border: 1px solid black; padding: 1.3mm 2.5mm; font-size: 12px; font-weight: bold; }
.rec-label-cell { width: 26%; background-color: #f0f0f0; }

/* كتلة المبلغ مبرَزة — أهم رقم في الوصل */
.rec-amount-block { border: 1.5px solid #000; margin-bottom: 2.5mm; }
.rec-amount-figure { display: flex; align-items: center; gap: 3mm; padding: 1.5mm 2.5mm; border-bottom: 1px solid #000; background: #f0f0f0; }
.rec-amount-figure .rec-amount { font-size: 18px; font-weight: bold; letter-spacing: 0.5px; }
.rec-amount-words { display: flex; align-items: baseline; gap: 3mm; padding: 1.5mm 2.5mm; }
.rec-amount-words .rec-text-amount { font-size: 12px; font-weight: bold; }
.rec-amount-label { font-size: 11px; font-weight: bold; white-space: nowrap; }
.rec-amount-label::after { content: ":"; }

/* التواقيع في أسفل الوصل دائماً */
/* توقيع واحد: يُحاذى لليسار بعرض محدود بدل أن يمتد على عرض الصفحة كاملاً */
.rec-signatures { margin-top: auto; display: flex; gap: 10mm; padding-top: 1mm; justify-content: flex-start; }
.rec-sign-box { width: 60mm; border-top: 1px solid #000; padding-top: 1.5mm; text-align: center; }
.rec-sign-label { font-size: 11px; font-weight: bold; }

/* ==================== إضافات النسخة الجديدة ==================== */

.status-hint { display: block; color: #5d8a76; font-size: 0.78rem; margin-top: 4px; min-height: 1em; }

/* فلاتر التقارير: مربعات تأشير في حاوية قابلة للتمرير، بديلاً عن
   select[multiple] الذي كان يلزمه Ctrl لاختيار أكثر من واحد. الألوان كلها من
   طبقة الرموز لا hex صريح — حاوية بخلفية بيضاء ثابتة تصير أبيض على أبيض في
   الوضع الداكن. والارتفاع ثابت لا أقصى فقط، فتبقى الحاويات الثلاث بمحاذاة
   واحدة مهما تفاوت عدد خياراتها. و.report-controls مخفية كلياً في الطباعة،
   فلا شيء من هذا يصل إلى الورق. */
.check-list {
  /* 140px = ست صفوف كاملة (23.2px للصف + حشوة 10px): أطول قائمة ثابتة هي
     الحالات بستّ، فلا يُقصّ صفّ في منتصفه. الأقسام وحدها قد تتجاوزها فتُمرَّر. */
  height: 140px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); padding: 5px 7px;
}
.check-item {
  display: flex; align-items: center; gap: 7px;
  margin: 0; padding: 2px 0; cursor: pointer;
  font-weight: normal; font-size: 0.82rem;
}
.check-item input { width: 15px; height: 15px; margin: 0; cursor: pointer; flex: none; }
.check-item:hover { color: var(--brand); }
.multi-hint { display: block; color: #7f8c8d; font-size: 0.72rem; margin-top: 2px; }

/* تحديد الطلاب ونقلهم بين السنوات */
.col-select { width: 34px; text-align: center; }
.col-select input { width: 16px; height: 16px; cursor: pointer; margin: 0; }
tr.row-selected { background: #eaf4fd !important; }
.selection-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #2c3e50; color: #fff; padding: 10px 14px; border-radius: 6px; margin-bottom: 10px;
}
.selection-bar > span { font-weight: bold; margin-left: auto; }

.transfer-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.transfer-actions label {
  display: flex; align-items: baseline; gap: 8px; background: #f7f9fa;
  border: 1px solid #e1e6e8; border-radius: 5px; padding: 8px 10px; cursor: pointer;
}
.transfer-actions label:hover { background: #eef4f7; }
.transfer-actions small { color: #667; margin-right: auto; }

.transfer-preview { margin-top: 14px; }
.t-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.t-summary > div {
  flex: 1 1 110px; background: #fff; border: 1px solid #d4efdf; border-radius: 5px;
  padding: 6px 10px; text-align: center;
}
.t-summary small { display: block; color: #5d8a76; font-size: 0.72rem; }
.t-summary b { color: #145a32; font-size: 1rem; }
.t-warn { background: #fdebd0; border: 1px solid #f39c12; color: #7e5109; border-radius: 5px; padding: 8px 10px; margin-top: 8px; font-size: 0.87rem; line-height: 1.8; }
.t-stages, .t-sample { margin-top: 8px; font-size: 0.85rem; color: #4a5568; line-height: 1.7; }
.t-loading { color: #667; font-size: 0.9rem; padding: 8px 0; }

/* محوّل السنة الدراسية في القائمة الجانبية */
.year-picker { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); margin-bottom: 6px; }
.year-picker label { display: block; font-size: 0.75rem; opacity: 0.75; margin-bottom: 4px; color: #fff; }
.year-picker select { width: 100%; margin: 0; padding: 6px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); color: #fff; font-weight: bold; }
.year-picker select option { color: #000; }
.year-locked-badge { display: none; margin-top: 6px; font-size: 0.72rem; font-weight: bold; color: #ffd27f; }

/* شارات حالة السنة في جدول السنوات */
.year-tag { padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: bold; white-space: nowrap; }
.year-tag.open { background: #d4efdf; color: #145a32; }
.year-tag.locked { background: #fdebd0; color: #7e5109; }
.years-hint { background: #f7f9fa; border-right: 4px solid var(--secondary); padding: 10px 12px; border-radius: 4px; color: #4a5568; font-size: 0.9rem; line-height: 1.7; margin: 10px 0 16px; }

/* شريط تنبيه السنة المقفلة */
.locked-banner { background: #fdebd0; border: 1px solid #f39c12; color: #7e5109; padding: 10px 14px; border-radius: 6px; font-weight: bold; margin-bottom: 12px; }

/* أعمدة قابلة للترتيب بالنقر */
th.sortable { cursor: pointer; user-select: none; position: relative; padding-left: 18px; }
th.sortable:hover { background: rgba(255,255,255,0.12); }
/* سهم باهت على كل عمود قابل للترتيب، يتضح ويتغيّر اتجاهه على العمود الفعّال */
th.sortable::after {
  content: "↕"; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  font-size: 0.75em; opacity: 0.35;
}
th.sortable.sorted::after { opacity: 1; }
th.sortable[data-dir="asc"]::after  { content: "▲"; }
th.sortable[data-dir="desc"]::after { content: "▼"; }

/* شريط فلاتر شاشة الطلاب */
.filters-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: #f7f9fa; border: 1px solid #e1e6e8; border-radius: 6px;
  padding: 10px; margin-bottom: 12px;
}
.filters-bar input[type="text"] { flex: 1 1 260px; margin: 0; }
.filters-bar select { flex: 0 1 auto; width: auto; min-width: 130px; margin: 0; }
.filters-bar .btn { margin: 0; }
.filter-count { margin-right: auto; color: #5d6d7e; font-size: 0.9rem; font-weight: bold; white-space: nowrap; }

/* ملخّص الخصم داخل بطاقة الطالب: المبلغ والنسبة معاً مهما كان النوع المُدخَل */
.disc-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.disc-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  background: #fff; border: 1px solid #d4efdf; border-radius: 5px;
  padding: 4px 14px; min-width: 110px;
}
.disc-chip small { color: #5d8a76; font-size: 0.75rem; }
.disc-chip b { color: #145a32; font-size: 1.05rem; }
/* النتيجة النهائية (الرسوم بعد الخصم) مميّزة عن بقية الأرقام */
.disc-chip-final { background: #145a32; border-color: #145a32; }
.disc-chip-final small { color: #b7e4c7; }
.disc-chip-final b { color: #fff; }
.disc-warn { display: none; color: var(--danger); font-size: 0.85rem; font-weight: bold; margin: 6px 0 0 0; }

/* قائمة الخصومات: كل خصم سطر مستقل، فيبقى سببه وقيمته ظاهرين بدل رقم مجموع واحد */
.disc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.disc-empty { color: #5d8a76; font-size: 0.85rem; margin: 8px 0 0 0; }
.disc-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid #d4efdf; border-radius: 5px;
  padding: 6px 10px; margin-top: 6px;
}
.disc-row-main { display: flex; align-items: baseline; gap: 6px; min-width: 150px; }
.disc-row-kind { color: #5d8a76; font-size: 0.78rem; }
.disc-row-amount { color: #145a32; font-weight: bold; font-size: 1.02rem; }
.disc-row-reason { color: #555; font-size: 0.85rem; flex: 1; min-width: 120px; }
.disc-row-reason:empty::before { content: "بلا سبب مذكور"; color: #aaa; }
/* وسم الخصم غير المتكرّر — يوضّح أنه لن ينتقل مع الطالب للسنة القادمة */
.disc-badge {
  font-size: 0.72rem; padding: 1px 7px; border-radius: 10px;
  background: #fdebd0; color: #8a5a00; border: 1px solid #f5cba7; white-space: nowrap;
}
.disc-meta { color: #999; font-size: 0.72rem; white-space: nowrap; }
.disc-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.88rem; }
.disc-check input { width: auto; margin: 0; }
.disc-preview { margin: 10px 0 0 0; font-size: 0.9rem; color: #145a32; min-height: 1.2em; }
.disc-preview.over { color: var(--danger); font-weight: bold; }

/* النوافذ المنبثقة (كانت أنماطاً سطرية داخل HTML) */
.modal-backdrop {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}
.modal-box {
  background: white;
  margin: 50px auto;
  padding: 20px;
  border-radius: 8px;
  max-height: 90vh;
  overflow-y: auto;
}

/* شاشة التقارير */
.report-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  align-items: start;
}
.report-controls label { font-size: 0.9rem; font-weight: bold; color: var(--secondary); }

#reportTable th { position: static; }

/* التقارير تُطبع على A4 عمودي، لا على A5 العرضية.
   قاعدة @page أعلاه عامة على التطبيق كله — وُضعت للوصل فأصابت التقارير معها،
   فكانت تُطبع على 210×148mm. الصفحة المسمّاة تخصّ التقرير وحده، والوصل يبقى
   على @page الافتراضية بلا أي مساس (مطبوع ومختبَر فعلياً على ورق A5). ولو لم
   يدعم متصفحٌ الصفحات المسمّاة، رجع التقرير إلى A5 — أي السلوك الحالي، لا
   انحدار عنه. */
@page reportA4 { size: A4 portrait; margin: 12mm; }

/* طباعة تقرير: يظهر جدول التقرير وعنوانه فقط */
@media print {
  /* ⚠️ الصفحة المسمّاة على body لا على .main: إسنادها إلى عنصر داخلي يعني
     انتقالاً من نوع صفحة إلى آخر في منتصف المستند، والمتصفح يفصل بينهما بكسر
     صفحة — فتخرج ورقة فارغة. */
  body.printing-report { page: reportA4; }

  /* أزرار وأغطية الواجهة المضافة بعد كتابة كتلة الطباعة الأصلية.
     زر القائمة تحديداً يظهر عند العرض الأقل من 860px، وورقة A4 عرضها نحو
     794px، فالطباعة نفسها كانت تُفعّل نمط الجوال وتطبع الزر على الورق. */
  #menu-toggle, #sidebar-scrim, #toast-host,
  #confirmModal, #promptModal { display: none !important; }

  body.printing-report .main { display: block !important; }
  body.printing-report .view-section { display: none !important; }
  body.printing-report #reports {
    display: block !important; box-shadow: none !important; padding: 0 !important;
    border: none !important; background: #fff !important; min-height: 0 !important;
  }
  body.printing-report .report-controls,
  body.printing-report .dashboard-cards,
  body.printing-report #report-empty { display: none !important; }
  body.printing-report .report-print-header { display: block !important; text-align: center; margin-bottom: 15px; }
  body.printing-report .receipt-container { display: none !important; }

  /* ⚠️ الوضع الداكن يجب ألا يصل إلى الورق: بلا هذا يُطبع التقرير بنصّ فاتح
     على أبيض إن كان الموظف يعمل بالوضع الداكن — نفس علّة الوصل. */
  body.printing-report #reports,
  body.printing-report #reports * { color: #000 !important; }

  /* حاوية التمرير صارت بعد تحديث الواجهة بطاقةً لها حدّ وزوايا وظل — زينة شاشة
     لا معنى لها على الورق. */
  body.printing-report #reports div[style*="overflow-x"] {
    border: none !important; border-radius: 0 !important;
    box-shadow: none !important; background: #fff !important; overflow: visible !important;
  }

  /* جدول مضغوط بحدود واضحة: حشوة الشاشة (13px) تهدر نحو ثلث الورقة */
  /* ⚠️ min-width إلزامي هنا، وهو إصلاح عطل «الحدّ الأيسر مفقود من التقرير
     المطبوع» (2026-09-25). السبب **ليس الحدود إطلاقاً** بل قاعدة الجوال:
     `.view-section table { min-width: 720px }` في كتلة max-width:860px —
     وورقة A4 أضيق من 860px، **فالطباعة نفسها تُفعّل نمط الجوال** (نفس الفخّ
     الذي طبع زر القائمة على الورق، راجع CLAUDE.md). النتيجة: جدول بعرض 720px
     مفروضٍ داخل عرض طباعة متاح = 703px فقط (A4 ناقص هامشَي 12mm)، والصفحة RTL
     فالفائض (17px) يخرج من جهة **اليسار** — قياس الحافتين وقتها [-17, 703]:
     اليمنى على الورقة واليسرى خارجها فتُقصّ ومعها حدّها.
     ⚠️ جُرّب إصلاحه مرّتين بحدٍّ على الجدول (1px ثم 2px) ولم ينفع، لأن الحدّ
     كان يُرسم فعلاً لكن خارج الورقة. لا تُعِد المحاولة من جهة الحدود. */
  body.printing-report #reportTable {
    width: 100%; min-width: 0 !important; border-collapse: collapse;
  }
  body.printing-report #reportTable th,
  body.printing-report #reportTable td {
    border: 1px solid #999 !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    background: #fff !important;
  }
  body.printing-report #reportTable th {
    background: #eee !important; color: #000 !important;
    font-weight: bold; position: static !important;
  }
  /* ترويسة الجدول تتكرر في كل صفحة، ولا ينكسر صفٌّ بين صفحتين */
  body.printing-report #reportTable thead { display: table-header-group; }
  body.printing-report #reportTable tr { page-break-inside: avoid; }
}

/* ==================== واجهة النسخة المحدَّثة (2026-08-17) ==================== */
/* ⚠️ كل ما تحت هذا السطر خاص بالشاشة فقط. لا يُضاف هنا أي شيء يخص الطباعة،
   وقواعد @page و@media print أعلاه لم تُمسّ إطلاقاً. */

/* --- تبديل الوضع الداكن (داخل القائمة الجانبية) --- */
.theme-toggle {
  margin: 10px 14px 4px;
  padding: 9px 12px;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: .86rem;
  display: flex; align-items: center; gap: 8px; justify-content: center;
  transition: background .18s ease;
  flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,.16); }

/* --- زر القائمة وغطاؤها (الشاشات الصغيرة) --- */
.menu-toggle {
  display: none;
  position: fixed; top: 12px; right: 12px; z-index: 200;
  width: 42px; height: 42px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: 1.25rem; cursor: pointer; box-shadow: var(--shadow-md);
}
.sidebar-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 110;
  background: rgba(9, 14, 20, .5);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .25s ease;
}
.sidebar-scrim.open { display: block; opacity: 1; }

/* --- التنبيهات المنزلقة (بديل alert) --- */
#toast-host {
  position: fixed; top: 16px; left: 16px; z-index: 10000;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-right: 4px solid var(--text-muted);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  font-size: .92rem; line-height: 1.55;
  animation: toast-in .3s cubic-bezier(.2,.9,.3,1.2);
}
.toast-out { animation: toast-out .28s ease forwards; }
.toast-icon { flex-shrink: 0; font-weight: bold; font-size: 1rem; line-height: 1.4; }
.toast-body { flex: 1; white-space: pre-line; word-break: break-word; }
.toast-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.25rem; line-height: 1; padding: 0 2px;
}
.toast-close:hover { color: var(--text); }
.toast-success { border-right-color: var(--accent); }
.toast-success .toast-icon { color: var(--accent); }
.toast-error { border-right-color: var(--danger); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning { border-right-color: var(--warning); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info { border-right-color: #3498db; }
.toast-info .toast-icon { color: #3498db; }

@keyframes toast-in  { from { opacity: 0; transform: translateX(-24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(-24px) scale(.97); } }

/* --- نافذة التأكيد (بديل confirm) --- */
.confirm-backdrop { z-index: 9500; align-items: center; justify-content: center; }
.confirm-box {
  width: min(460px, calc(100vw - 40px));
  animation: modal-in .24s cubic-bezier(.2,.9,.3,1.1);
}
.confirm-box h3 { margin: 0 0 10px; font-size: 1.12rem; }
#confirm-message {
  margin: 0 0 20px; color: var(--text-muted);
  white-space: pre-line; line-height: 1.7; font-size: .95rem;
}
.confirm-actions { display: flex; gap: 10px; justify-content: flex-start; }

@keyframes modal-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }

/* --- حالة الجدول الفارغ --- */
.empty-state {
  text-align: center; padding: 40px 20px; color: var(--text-muted);
}
.empty-state-icon { font-size: 2.4rem; opacity: .5; display: block; margin-bottom: 10px; }

/* --- تحسينات عامة --- */
.main { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }

/* الأسطح الداخلية التي كانت بيضاء صريحة، كي تتبع السمة */
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .login-box { background: var(--surface); }
html[data-theme="dark"] .breakdown-table td { border-color: var(--border-soft); }
html[data-theme="dark"] #loading { background: rgba(10, 15, 20, .75); }

/* --- الاستجابة للشاشات الصغيرة واللوحية --- */
@media (max-width: 1024px) {
  .form-grid { grid-template-columns: 1fr; }
  .main { padding: 14px; }
  .view-section { padding: 16px; border-radius: var(--radius); }
}

@media (max-width: 860px) {
  .menu-toggle { display: block; }
  /* القائمة تنزلق من اليمين (RTL) فوق المحتوى بدل أن تزاحمه */
  .sidebar {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 260px;
    transform: translateX(100%);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .main { padding: 62px 12px 12px; width: 100%; }
  h2 { font-size: 1.15rem; }

  /* الجداول العريضة تُمرَّر أفقياً داخل حاويتها بدل أن تكسر الصفحة */
  .view-section table { min-width: 720px; }
  .view-section > div[style*="overflow-x"] , .table-scroll { -webkit-overflow-scrolling: touch; }

  #toast-host { left: 12px; right: 12px; max-width: none; top: 64px; }
  .dashboard-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .card .value { font-size: 1.15rem; }
  .filters-bar { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  .btn { padding: 8px 13px; font-size: .88rem; }
  .view-section { padding: 13px; }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; }
}

/* من يفضّل تقليل الحركة: تُلغى الانتقالات ويبقى كل شيء وظيفياً */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==================== الهوية البصرية الجديدة ==================== */
/* لا شيء هنا يخص الطباعة. قواعد @page و@media print أعلاه لم تُمسّ. */

:root {
  --brand: #2f6bff;
  --brand-2: #1e4fd6;
  --brand-soft: #e8efff;
}
html[data-theme="dark"] {
  --brand: #4d82ff;
  --brand-2: #2f6bff;
  --brand-soft: #1d2a44;
}

/* --- شاشة الدخول --- */
#login-container {
  background: linear-gradient(160deg, #eaf0fb 0%, #f6f8fc 55%, #eef3fb 100%);
}
html[data-theme="dark"] #login-container {
  background: linear-gradient(160deg, #10161d 0%, #151d26 55%, #111820 100%);
}
.login-box {
  width: 400px; max-width: calc(100vw - 32px);
  padding: 38px 34px 30px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: 0 24px 60px rgba(20, 35, 70, .12);
  text-align: center;
}
.login-mark {
  width: 74px; height: 74px; margin: 0 auto 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 26px rgba(47, 107, 255, .34);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.login-box h2 { border: none; padding: 0; margin: 0 0 6px; font-size: 1.32rem; font-weight: 700; }
.login-sub { color: var(--text-muted); margin: 0 0 26px; font-size: .93rem; }
.login-box .field { text-align: right; margin-bottom: 15px; }
.login-box .field label { font-size: .86rem; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.login-box input {
  margin: 0; padding: 12px 13px; font-size: .97rem;
  background: var(--surface-2); border-radius: 11px;
}
.btn-block { width: 100%; padding: 13px; font-size: 1rem; border-radius: 12px; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 20px rgba(47, 107, 255, .3);
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(47, 107, 255, .4); }
.login-error { color: var(--danger); margin-top: 14px; font-size: .89rem; }

/* --- الشعار في القائمة --- */
.logo { display: flex; align-items: center; gap: 11px; text-align: right; padding: 18px 18px; }
.logo-mark {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--brand), var(--brand-2));
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  box-shadow: 0 6px 14px rgba(47, 107, 255, .35);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.25; font-size: 1rem; }
.logo-text small { font-size: .68rem; opacity: .6; font-weight: normal; margin-top: 2px; }

/* --- عناصر القائمة --- */
.sidebar { padding-bottom: 8px; }
.nav-item {
  margin: 2px 10px; padding: 11px 13px;
  border-radius: 11px; border-right: none;
  font-size: .93rem; font-weight: 500;
}
.nav-item:hover { background-color: rgba(255,255,255,.08); }
.nav-item.active {
  background: rgba(255,255,255,.14);
  border-right: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.nav-ico { width: 22px; text-align: center; flex-shrink: 0; font-size: 1.02rem; }
.nav-logout { margin-top: auto; background: rgba(192,57,43,.9); }
.nav-logout:hover { background: rgba(192,57,43,1); }
.user-info { border-radius: 0; margin-top: 6px; }

/* --- بطاقات لوحة التحكم --- */
.dashboard-cards { gap: 14px; }
.card {
  display: flex; align-items: center; gap: 14px;
  text-align: right; padding: 17px 16px;
  border-radius: 14px;
}
.card-badge {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.card-body { min-width: 0; flex: 1; }
.card h3 { font-size: .82rem; color: var(--text-muted); margin: 0 0 5px; font-weight: 600; border: none; }
.card .value { font-size: 1.42rem; font-weight: 700; letter-spacing: -.4px; }
.value-green { color: var(--accent); }
.value-red { color: var(--danger); }
.value-purple { color: #a366d6; }
.card-edit-btn { border: none; cursor: pointer; margin-right: 4px; padding: 1px 4px; background: transparent; box-shadow: none; }

.badge-blue   { background: #e3edff; color: #2f6bff; }
.badge-green  { background: #dff5e8; color: #17915a; }
.badge-red    { background: #fde6e6; color: #d64545; }
.badge-amber  { background: #fdf0d5; color: #b6801f; }
.badge-purple { background: #f0e5fb; color: #8e44ad; }
.badge-slate  { background: #e9eef3; color: #5b6b7c; }
html[data-theme="dark"] .badge-blue   { background: #1d2c46; color: #6f9bff; }
html[data-theme="dark"] .badge-green  { background: #16342a; color: #43d190; }
html[data-theme="dark"] .badge-red    { background: #3a2027; color: #ff7b7b; }
html[data-theme="dark"] .badge-amber  { background: #3a2e18; color: #e5ae4a; }
html[data-theme="dark"] .badge-purple { background: #2e2340; color: #b98ae0; }
html[data-theme="dark"] .badge-slate  { background: #232f3b; color: #9fb0c2; }

/* --- ترويسة الشاشة --- */
.view-section > h2 {
  border-bottom: none; padding-bottom: 0; margin-bottom: 18px;
  font-size: 1.45rem; font-weight: 700;
}

/* --- الجداول --- */
th {
  background-color: var(--surface-3) !important;
  color: var(--text-muted) !important;
  font-size: .8rem; text-transform: none;
  border-bottom: 1px solid var(--border-soft);
  letter-spacing: .2px;
}
td { font-size: .92rem; }
tbody tr:last-child td { border-bottom: none; }
#studentsTable td:first-child, #studentsTable td:nth-child(2) { color: var(--text-muted); font-size: .86rem; }

/* شارات الحالة داخل الجداول */
.year-tag, .disc-badge { border-radius: 999px; padding: 3px 11px; font-size: .75rem; font-weight: 600; }

/* --- النوافذ --- */
.modal-box {
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
  animation: modal-in .22s cubic-bezier(.2,.9,.3,1.1);
}
.modal-box h3 { font-size: 1.16rem; margin-top: 0; }

/* --- المدخلات --- */
input, select, textarea { border-radius: 9px; }
input:hover, select:hover, textarea:hover { border-color: var(--text-muted); }

/* --- شريط الفلاتر --- */
.filters-bar {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  padding: 13px;
}
.filters-bar input, .filters-bar select { margin-bottom: 0; }

/* --- زر القائمة والسمة على الجوال --- */
.menu-toggle { border-radius: 11px; }

/* ==================== الجداول والنوافذ — الشكل الحديث ==================== */
/* لا شيء هنا يخص الطباعة: لا يستهدف أي محدِّد .rec-* أو .receipt-* أو printing-*. */

/* --- الجدول داخل بطاقة --- */
/* حاويات التمرير الأفقي مكتوبة بأنماط سطرية في HTML، فنستهدفها بالسمة نفسها
   بدل إضافة صنف لكل جدول — لا تغيير في البنية ولا في المعرّفات. */
.view-section div[style*="overflow-x"] {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: auto;
}
.view-section div[style*="overflow-x"] > table { margin-top: 0; }

table { border-spacing: 0; }
th {
  padding: 13px 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3px;
  background-color: var(--surface-3) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-soft);
}
td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
/* الأرقام بعرض ثابت للخانة فتصطفّ المبالغ عمودياً وتُقارَن بالنظر */
td { font-variant-numeric: tabular-nums; }
tbody tr { transition: background .13s ease, box-shadow .13s ease; }
tbody tr:hover { background: var(--row-hover); }
tbody tr:last-child td { border-bottom: none; }

/* عمود الإجراءات: أزرار متقاربة لا تلتفّ */
.col-actions { white-space: nowrap; }
.col-actions .btn { margin-left: 3px; }
.btn-sm { padding: 5px 10px; font-size: .8rem; border-radius: 7px; }

/* صف محدَّد */
tr.row-selected { background: var(--brand-soft) !important; }

/* رأس الجدول يبقى ظاهراً عند التمرير داخل الحاوية */
thead th { position: sticky; top: 0; z-index: 2; }

/* --- النوافذ المنبثقة --- */
.modal-backdrop {
  background: rgba(12, 18, 28, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-box {
  background: var(--surface);          /* كان white صريحاً فاحتاج ترقيعاً للوضع الداكن */
  padding: 0 22px 20px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 24px 64px rgba(10, 18, 34, .3);
  max-width: calc(100vw - 28px);
}
/* العنوان ترويسة ثابتة تعلو المحتوى عند التمرير داخل نافذة طويلة */
.modal-box > h3 {
  position: sticky; top: 0; z-index: 3;
  margin: 0 -22px 18px;
  padding: 17px 22px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  border-radius: 18px 18px 0 0;
  font-size: 1.1rem; font-weight: 700;
}
/* أزرار النافذة تُفصل بخط علوي كتذييل */
.modal-box > div[style*="text-align:left"],
.modal-box form > div[style*="text-align:left"] {
  border-top: 1px solid var(--border-soft);
  margin: 18px -22px 0;
  padding: 15px 22px 0;
  display: flex; gap: 9px; justify-content: flex-start;
}

/* الأقسام المجمَّعة داخل بطاقة الطالب */
.modal-box .form-grid > div[style*="grid-column"],
#st-pay-box, #st-disc-list {
  border-radius: 12px;
}
#st-pay-box { background: var(--surface-2); border: 1px solid var(--border-soft); padding: 14px; }
#st-pay-box h4 { margin-top: 0; font-size: .97rem; }

/* الحقول داخل النوافذ: مسافة أوضح بين التسمية والحقل */
.modal-box label { font-weight: 600; }
.modal-box .form-grid { gap: 14px 16px; }

/* نافذة التأكيد ترث ما سبق مع تذييل خاص بها */
.confirm-box { padding: 0 22px 20px; }
.confirm-box > h3 { margin-bottom: 16px; }
.confirm-actions {
  border-top: 1px solid var(--border-soft);
  margin: 18px -22px 0; padding: 15px 22px 0;
}

/* --- حالة فارغة داخل الجداول --- */
.empty-state { background: var(--surface); border-radius: 14px; }

/* --- شريط التحديد فوق جدول الطلاب --- */
.selection-bar {
  border-radius: 12px;
  border: 1px solid var(--brand);
  background: var(--brand-soft);
}

/* ==================== طبقة الألوان الدلالية ====================
   سبب وجودها: عشرات المكوّنات (تنبيهات، شارات، بطاقات الخصم، شريط الفلاتر)
   كُتبت بألوان فاتحة ثابتة (#f7f9fa، ‎#d4efdf، ‎#fdebd0 …) فظهرت في الوضع الداكن
   كمساحات بيضاء ونصوصٍ لا تُقرأ. أُعيدت صياغتها كلها بمتغيّرات لها قيمتان،
   فأي مكوّن يستعملها يصحّ في الوضعين معاً.
   لا شيء هنا يخصّ الطباعة: لا محدِّد rec- ولا printing- ولا قاعدة صفحة. */

:root {
  --ok:          #15804a;
  --ok-soft:     #eaf7f0;
  --ok-line:     #cfe9dc;
  --ok-dim:      #4d8a6d;
  --warn-fg:     #8a5a00;
  --warn-soft:   #fdf3e0;
  --warn-line:   #f0d5a6;
  --info-fg:     #1d4ed8;
  --info-soft:   #edf3ff;
  --info-line:   #d3e1ff;
  --danger-soft: #fdecec;
  --danger-line: #f7cccc;
  --purple:      #8e44ad;
}
html[data-theme="dark"] {
  --ok:          #46d492;
  --ok-soft:     #16302a;
  --ok-line:     #265844;
  --ok-dim:      #74b899;
  --warn-fg:     #e9b869;
  --warn-soft:   #33280f;
  --warn-line:   #5b4620;
  --info-fg:     #8fb0ff;
  --info-soft:   #1a2540;
  --info-line:   #2f4372;
  --danger-soft: #3a2027;
  --danger-line: #5e2f36;
  --purple:      #bb8ce0;
}

/* --- أصناف مساعدة تحلّ محلّ الأنماط السطرية التي كانت داخل HTML --- */
.panel {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  padding: 15px;
}
.panel-title { margin: 0 0 13px; font-size: 1rem; font-weight: 700; }
.panel-label { display: block; margin: 0 0 6px; font-weight: 700; color: var(--text); font-size: .9rem; }
.panel-label-danger { color: var(--danger); }
.panel-plain  { background: var(--surface); }
.panel-info   { background: var(--info-soft); border-color: var(--info-line); }
.panel-accent { background: var(--ok-soft);   border-color: var(--ok-line); }
.panel-accent .panel-label { color: var(--ok); }
.panel-warn   { background: var(--warn-soft); border-color: var(--warn-line); }
.panel-warn .panel-label { color: var(--warn-fg); }
.panel-total {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 13px; padding: 12px 15px; margin: 10px 0;
}
.panel-total p { margin: 0; font-size: .93rem; }
.panel-total #st-calc-final { font-weight: 700; font-size: 1.28rem; color: var(--brand); }
/* المدفوع أصغر قليلاً من المتبقي وبلون «المحصّل» نفسه المستعمل في الجداول —
   المتبقي يبقى الرقم الأبرز في البطاقة. الألوان من طبقة الرموز لا hex مباشر،
   وإلا انكسر الوضع الداكن. */
.panel-total #st-calc-paid { font-weight: 700; font-size: 1.1rem; color: var(--ok); }
.panel-total #st-calc-paid-parts { margin-right: 6px; font-size: .8rem; }

.hint { color: var(--text-muted); }
.txt-ok     { color: var(--ok);     font-weight: 700; }
.txt-danger { color: var(--danger); font-weight: 700; }
.txt-purple { color: var(--purple); }

/* صفوف مميّزة داخل الجداول — اللون يوضع على الخلية لا على الصف، فالصف قد
   يحمل أيضاً تمييز التحديد أو المرور بالمؤشر فيتغلّب أحدهما على الآخر. */
tr.row-head td, tr.row-head th { background: var(--surface-3); font-weight: 700; }
tr.row-total td { background: var(--surface-3); font-weight: 700; }
tr.row-current td { background: var(--info-soft); }
tr.row-debt td { font-size: 1.05rem; background: var(--danger-soft); }
tr.row-selected td { background: var(--brand-soft); }
tr.row-selected { background: transparent !important; }

.status-paid { color: var(--ok);     font-weight: 700; }
.status-debt { color: var(--danger); font-weight: 700; }

/* --- عمود الإجراءات: لا يلتفّ ولا يُضغَط --- */
/* عرض 1% مع التخطيط التلقائي للجدول يجعل العمود بعرض محتواه تماماً، فتبقى
   الأزرار في سطر واحد بدل أن تتكدّس عمودياً. */
td.col-actions, th.col-actions { width: 1%; white-space: nowrap; }
td.col-actions .btn { margin: 0 0 0 5px; vertical-align: middle; }
td.col-actions .btn:last-child { margin-left: 0; }
.btn-sm { padding: 6px 11px; font-size: .8rem; border-radius: 8px; line-height: 1.1; }

/* --- المدخلات: توحيد المظهر في الوضعين --- */
select option { background: var(--surface); color: var(--text); }
select[multiple] {
  height: auto; padding: 6px; border-radius: 10px;
  background: var(--surface); color: var(--text);
}
select[multiple] option { padding: 6px 9px; border-radius: 7px; margin-bottom: 2px; }
/* التدرّج المكرَّر هو الطريقة الوحيدة التي تحترمها المتصفحات لتلوين الخيار المحدَّد */
select[multiple] option:checked {
  background: linear-gradient(var(--brand), var(--brand));
  color: #fff; font-weight: 600;
}
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--brand);
  vertical-align: middle; cursor: pointer;
}
input[type="checkbox"]:disabled { cursor: default; }
/* حقل التاريخ يرسمه المتصفح نفسه؛ بلا هذا يبقى أبيض ناصعاً في الوضع الداكن */
input[type="date"] { color-scheme: light; }
html[data-theme="dark"] input[type="date"] { color-scheme: dark; }

/* --- المكوّنات التي كانت بألوان ثابتة --- */
.status-hint { color: var(--ok-dim); }
.multi-hint  { color: var(--text-muted); }
.filter-count { color: var(--text-muted); }
.card-note { color: var(--purple); }

.filters-bar { background: var(--surface-2); border-color: var(--border-soft); }

.years-hint {
  background: var(--info-soft); border: 1px solid var(--info-line);
  border-right: 4px solid var(--brand);
  color: var(--text); border-radius: 11px; padding: 12px 14px;
}
.locked-banner {
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  color: var(--warn-fg); border-radius: 11px;
}
.year-tag.open   { background: var(--ok-soft);   color: var(--ok);      border: 1px solid var(--ok-line); }
.year-tag.locked { background: var(--warn-soft); color: var(--warn-fg); border: 1px solid var(--warn-line); }

.transfer-actions label {
  background: var(--surface-2); border-color: var(--border-soft);
  border-radius: 10px; color: var(--text);
}
.transfer-actions label:hover { background: var(--surface-3); }
.transfer-actions small { color: var(--text-muted); }
.t-summary > div { background: var(--surface); border-color: var(--ok-line); border-radius: 10px; }
.t-summary small { color: var(--ok-dim); }
.t-summary b { color: var(--ok); }
.t-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-fg); border-radius: 10px; }
.t-stages, .t-sample { color: var(--text-muted); }
.t-loading { color: var(--text-muted); }

.disc-chip { background: var(--surface); border-color: var(--ok-line); border-radius: 10px; }
.disc-chip small { color: var(--ok-dim); }
.disc-chip b { color: var(--ok); }
.disc-chip-final { background: var(--ok); border-color: var(--ok); }
.disc-chip-final small { color: rgba(255,255,255,.82); }
.disc-chip-final b { color: #fff; }
/* في الوضع الداكن لون النجاح فاتح، فالنص فوقه يجب أن ينقلب داكناً */
html[data-theme="dark"] .disc-chip-final small { color: rgba(14,26,21,.72); }
html[data-theme="dark"] .disc-chip-final b { color: #0e1a15; }
.disc-empty { color: var(--text-muted); }
.disc-row { background: var(--surface); border-color: var(--ok-line); border-radius: 10px; }
.disc-row-kind { color: var(--ok-dim); }
.disc-row-amount { color: var(--ok); }
.disc-row-reason { color: var(--text); }
.disc-row-reason:empty::before { color: var(--text-muted); }
.disc-badge { background: var(--warn-soft); color: var(--warn-fg); border-color: var(--warn-line); }
.disc-meta { color: var(--text-muted); }
.disc-preview { color: var(--ok); }

.breakdown-table { background: transparent; border: 1px solid var(--border-soft); border-radius: 10px; }
.breakdown-table td { border-bottom-color: var(--border-soft); }

.report-controls { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 13px; }
.report-controls label { color: var(--text); font-weight: 600; }

.selection-bar { background: var(--brand-soft); color: var(--text); border: 1px solid var(--brand); }

#loading { background: rgba(0, 0, 0, .35); }
.spinner { border-color: var(--border-soft); border-top-color: var(--brand); }

/* --- نافذة الإدخال (بديل نافذة المتصفح) --- */
#prompt-input { margin: 4px 0 0; }
#prompt-message { color: var(--text-muted); margin: 0 0 6px; }

/* ==================== ضبط الأعمدة وأزرار الصفوف ====================
   المشكلة المرصودة: جدول الطلاب يوزّع العرض حسب المحتوى، فعمود «الاسم» —
   وهو أهمّ ما في الصف — كان ينكمش إلى ‎61px فيلتفّ الاسم على ثلاثة أسطر بينما
   عمود الإجراءات يأخذ ‎234px. حدٌّ أدنى للاسم وأزرارٌ أصغر يعالجان الاثنين. */

#studentsTable th:nth-child(4), #studentsTable td:nth-child(4) { min-width: 185px; }
#studentsTable th:nth-child(5), #studentsTable td:nth-child(5) { min-width: 105px; }
#studentsTable td:nth-child(4) { font-weight: 600; }
/* الملاحظات والمعلومات قد تكون طويلة جداً — تُقصّ بعرض معقول بدل ابتلاع الصف */
#studentsTable td:nth-child(14), #studentsTable td:nth-child(15) { max-width: 210px; }

#paymentsTable th:nth-child(2), #paymentsTable td:nth-child(2) { min-width: 175px; }

/* الرمز داخل زر بنصّ: حجم ثابت لا يرفع ارتفاع الزر مهما اختلف خطّ الإيموجي */
.btn .ico {
  display: inline-block; width: 1.05em; margin-left: 5px;
  font-size: .95em; line-height: 1; text-align: center;
  font-family: "Segoe UI Symbol", "Segoe UI Emoji", inherit;
}
td.col-actions .btn { padding: 5px 10px; font-size: .79rem; }

/* زر برمز واحد: مربّع ثابت، فلا تختلف أحجام الأزرار في الصف باختلاف الرمز */
.btn-icon {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; line-height: 1; border-radius: 8px;
  font-family: "Segoe UI Symbol", "Segoe UI Emoji", inherit;
}
td.col-actions .btn-icon { margin-left: 5px; }
td.col-actions .btn-icon:last-child { margin-left: 0; }

/* أصناف ألوان البطاقات: .card .value أعلى تخصيصاً من .value-red وحده،
   فكان لون كل بطاقة أخضر مهما كان صنفها — الديون والخصومات ضمناً. */
/* القيمة المحايدة نص عادي: تلوين كل رقم بالأخضر جعل «الرسوم قبل الخصم»
   تبدو كمبلغ محصَّل. اللون الآن دلالة لا زينة. */
.card .value { color: var(--text); }
.card .value-green  { color: var(--ok); }
.card .value-red    { color: var(--danger); }
.card .value-purple { color: var(--purple); }

/* ==================== ضبط الوضع الفاتح ====================
   اللوحة الأولى كانت مأخوذة من التصميم القديم (رماديات مزرقّة باهتة وظلال
   ثقيلة) فبدت الشاشة مغسولة. هذه لوحة محايدة أنظف: خلفية أهدأ، أسطح بيضاء
   بحدود أدقّ، ظلال أخفّ، ونصّ أعمق تبايناً.
   تُكتب في :root وحده — محدِّد html[data-theme="dark"] أعلى تخصيصاً (0,1,1)
   من :root‏ (0,1,0)، فالوضع الداكن يتغلّب عليها مهما كان ترتيب الكتابة. */
:root {
  --bg-body:     #eff2f7;
  --surface:     #ffffff;
  --surface-2:   #f7f9fc;
  --surface-3:   #eff3f8;
  --text:        #0f1b2d;
  --text-muted:  #64748b;
  --border:      #cbd5e1;
  --border-soft: #e5eaf1;
  --row-hover:   #f6f9fd;

  --shadow-sm: 0 1px 2px rgba(15, 27, 45, .04), 0 1px 3px rgba(15, 27, 45, .05);
  --shadow-md: 0 4px 14px rgba(15, 27, 45, .07), 0 2px 5px rgba(15, 27, 45, .04);
  --shadow-lg: 0 18px 44px rgba(15, 27, 45, .12), 0 4px 10px rgba(15, 27, 45, .05);

  --sidebar-bg: linear-gradient(180deg, #1c2537, #141b2a);
  --focus-ring: 0 0 0 3px rgba(47, 107, 255, .22);

  --accent:  #16a34a;
  --danger:  #d93a3a;
  --warning: #e0940f;

  --brand: #2f6bff;  --brand-2: #1e4fd6;  --brand-soft: #eaf0ff;

  --ok: #15803d;        --ok-soft: #f1fbf5;   --ok-line: #c9ecd7;   --ok-dim: #5b8a72;
  --warn-fg: #a16207;   --warn-soft: #fffaeb; --warn-line: #f6dfa8;
  --info-fg: #1d4ed8;   --info-soft: #f0f5ff; --info-line: #dbe6ff;
  --danger-soft: #fef4f4; --danger-line: #f8d3d3;
  --purple: #7c3aed;
}

/* رأس الجدول أهدأ: كان أزرق داكناً صلباً ثم رمادياً غامقاً، وكلاهما يزاحم
   البيانات نفسها على الانتباه */
th { font-weight: 600; }
/* أرقام الجداول: الدلالة تكفيها 600 — 700 في كل صف يجعل العمود كتلة صارخة */
.status-debt, .status-paid { font-weight: 600; }

/* ==================== شريط أزرار التقارير ==================== */
.report-actions {
  grid-column: 1 / -1;
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  margin-top: 2px; padding-top: 13px;
  border-top: 1px solid var(--border-soft);
}
.report-actions .btn { white-space: nowrap; }

/* قوائم الفلاتر بارتفاع موحّد مع بقية الحقول في الصف */
.report-controls .check-list { margin-bottom: 4px; }
.report-controls > div { min-width: 0; }

/* ==================== حقل للقراءة فقط ==================== */
/* البريد الإلكتروني عند تعديل مستخدم: لا يُحرَّر، ويجب أن يظلّ مقروءاً */
input[readonly], textarea[readonly] {
  background: var(--surface-3);
  color: var(--text-muted);
  cursor: default;
}
input[readonly]:focus { border-color: var(--border); box-shadow: none; }

/* عنوان البطاقة سطر واحد: زر التعديل بجانب «آخر وصل رقم» كان يكسر العنوان
   إلى سطرين فيختلّ ارتفاع البطاقة عن جاراتها في الصف. */
.card h3 { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.card-edit-btn { padding: 0; width: 20px; height: 20px; font-size: .72rem; flex-shrink: 0; }

/* ==================== الوصل: أسود ثابت بلا استثناء ==================== */
/* لم يكن لأي عنصر داخل الوصل لون نصّ صريح — كله يرث --text من السمة، فعنوان
   الكلية وعنوان «وصل قبض» ظهرا رماديين، وفي الوضع الداكن كانا سيطبعان بلون
   فاتح جداً على ورق أبيض. هذه القاعدة كانت موثَّقة في CLAUDE.md كموجودة "في
   أسفل الملف" لكنها لم تُكتب فعلياً — ذلك هو سبب المشكلة، لا أمراً جديداً.
   !important عمداً: الوصل مستند رسمي أحادي اللون، ولا يجوز لأي قاعدة سمة
   مستقبلية أن تُسرّب لوناً إليه. */
.receipt-container, .receipt-container * { color: #000 !important; }

/* شريط «تحميل المزيد» أسفل جدول الوصولات */
.payments-more {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

/* حقول الفلاتر: تسمية فوق الحقل داخل شريط الفلاتر */
.filter-field { display: flex; flex-direction: column; gap: 3px; }
.filter-field label { margin: 0; font-size: .78rem; }
/* ⚠️ flex: none ضروري لا تجميلي. القاعدة العامة أعلاه
   (.filters-bar input[type="text"] { flex: 1 1 260px }) كُتبت لشريط فلاتر
   الطلاب حيث الاتجاه صفّي، فـ260px عرضٌ. وهنا الاتجاه عمودي، وflex-basis يقيس
   المحور الرئيسي — فصار الرقم ارتفاعاً، وامتد حقل البحث 260px طولاً. */
/* التخصيص هنا مقصود: القاعدة العامة محدِّدها (0,2,1) — صنف + سمة + عنصر — فلا
   يكفي `.filter-field input` وهو (0,1,1). هذا (0,3,1) فيتغلّب عليها. */
.filters-bar .filter-field input,
.filters-bar .filter-field select {
  flex: none; margin: 0; width: 100%;
}
.filter-field-grow { flex: 1 1 220px; }

/* صف تعيين كلمة المرور داخل نافذة المستخدم */
.pass-set-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.pass-set-row input { margin: 0; flex: 1 1 auto; }
.pass-set-row .btn { flex: none; }
.pass-sep { border: none; border-top: 1px solid var(--border-soft); margin: 12px 0 8px; }

/* ==================== الوصل المُبطَل ==================== */
/* الوصل المُبطَل يبقى معروضاً في جدول المقبوضات وفي بطاقة الطالب — الغرض أن
   يُعرف لأي طالب صدر ولماذا أُبطل. يُقرأ فوراً أنه غير محتسَب: مبلغ مشطوب
   وشارة، لا صف مخفي. */
tr.pay-cancelled td { opacity: .72; }
.pay-cancelled-amount {
  text-decoration: line-through;
  color: var(--text-muted) !important;
  font-weight: 600;
}
.pay-cancelled-badge {
  display: inline-block; margin-inline-start: 6px;
  padding: 1px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid var(--danger-line);
}
/* سبب الإبطال في صفٍّ تحت الوصل: نصٌّ ثانوي لا يزاحم بيانات الوصل نفسه */
tr.pay-cancelled-reason td {
  padding-top: 0; padding-bottom: 9px;
  font-size: .8rem; color: var(--text-muted);
  background: var(--danger-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* ختم «مُبطَل» على الوصل — يظهر فقط عند إعادة طباعة وصل مُبطَل.
   خارج @media print عمداً: القاعدتان المحميّتان لم تُمسّا، والختم يرث
   font-family الوصل ويظهر في الطباعة لأن .receipt-container يصير مرئياً هناك. */
.rec-cancelled-stamp {
  border: 2.5px solid #000;
  padding: 1.5mm 3mm;
  margin-bottom: 2mm;
  text-align: center;
  color: #000;
}
.rec-cancelled-word {
  display: block;
  font-size: 20px; font-weight: bold; letter-spacing: 3px;
}
.rec-cancelled-reason { display: block; font-size: 11px; font-weight: bold; }
.rec-cancelled-reason:not(:empty)::before { content: "سبب الإبطال: "; }

/* ترتيب التقارير بالنقر على رأس العمود.
   ⚠️ داخل @media screen عمداً: السهام لا تُطبع (لا معنى لمؤشّر تفاعلي على ورق)،
   وبهذا لم تُمَسّ أيٌّ من كتلتَي @media print — لا المحمية للوصل ولا تلك للتقرير. */
@media screen {
  #report-head-row th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
  #report-head-row th.sortable:hover { background: var(--primary-dark, #1d3f5e); }
  /* مؤشّر باهت على كل عمود قابل للترتيب: بلا هذا لا شيء يدل على أن الرأس يُنقر */
  #report-head-row th.sortable::after { content: " ⇅"; opacity: .4; font-size: 11px; }
  #report-head-row th.sort-asc::after  { content: " ▲"; opacity: 1; font-size: 10px; }
  #report-head-row th.sort-desc::after { content: " ▼"; opacity: 1; font-size: 10px; }
}