/* styles.css — نسخة محسّنة ومختصرة */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Base fallback tokens. appearance.css owns the fixed light/dark palettes;
   appearance.js restores only mode, effects, local images and typography. */
:root {
  --app-font: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  /* حجم الخط بيتغير كنسبة من الأساس، والعناصر بتستخدم em/rem فتكبر معاه
     بشكل متناسق من غير ما تتكسر النوافذ أو الجداول */
  --app-font-scale: 1;
  --app-font-weight: 500;
  --app-text-color: #1e293b;
  --primary-color: #2563eb;
  --primary-color-dark: #1d4ed8;
  --primary-bg: #2563eb;
  --sidebar-bg: #0f172a;
  --sidebar-hover: #1e293b;
  --sidebar-active: #2563eb;
}

/* التكبير بيتم على مستوى html عشان كل وحدات rem تتناسب معاه تلقائياً */
html {
  font-size: calc(16px * var(--app-font-scale));
}

body {
  font-family: var(--app-font);
  font-weight: var(--app-font-weight);
  background: #f1f5f9;
  color: var(--app-text-color);
}

/* Native controls must use the selected bundled Arabic font too. */
button, input, select, textarea { font-family: inherit; }

/* ═══════════════════════════════════════════════════════════════
   حماية التنسيق: العناصر اللي لونها لازم يفضل ثابت مهما اتغير
   لون النص العام — عشان النصوص تفضل واضحة على خلفياتها الملوّنة.
   من غير القواعد دي، لو المستخدم اختار لون نص غامق، النصوص اللي
   على الشريط الجانبي الغامق أو الأزرار الملونة كانت هتختفي.
   ═══════════════════════════════════════════════════════════════ */
.sidebar, .sidebar *,
.btn-primary, .btn-success, .btn-danger, .btn-danger-sm,
.btn-logout, .btn-change-pwd,
.data-table th,
.badge, .tag,
.modal-content h3 {
  color: revert;
}

/* ============ LOGIN ============ */
.login-body {
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e3a8a, var(--primary-color));
}
.login-card {
  background: #fff; padding: 40px; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  width: 380px;
  position: relative;
}
.gear-btn {
  position: absolute; top: 14px; left: 14px;
  background: none; border: none; font-size: 18px;
  cursor: pointer; color: #94a3b8; padding: 4px;
  border-radius: 6px; transition: all 0.2s;
}
.gear-btn:hover { color: var(--primary-color); background: #eff6ff; }
.remember-row { display: flex; align-items: center; }
.remember-label {
  display: flex !important; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500 !important; color: #334155;
  cursor: pointer; margin-bottom: 0 !important;
}
.remember-label input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: #2563eb; }

/* Connection setup modal */
.conn-modal {
  position: fixed; inset: 0; background: rgba(15,23,42,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.conn-modal-box {
  background: #fff; border-radius: 14px; padding: 28px;
  width: 340px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.conn-modal-box h3 { font-size: 17px; color: #1e3a8a; margin-bottom: 8px; }
.conn-modal-hint { font-size: 12px; color: #64748b; margin-bottom: 18px; line-height: 1.6; }
.conn-modal-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.conn-modal-actions .btn-primary, .conn-modal-actions .btn-danger-sm { flex: 1; padding: 10px; }
.app-title { font-size: 24px; text-align: center; color: #1e3a8a; margin-bottom: 4px; }
.app-subtitle { text-align: center; color: #64748b; font-size: 13px; margin-bottom: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #334155; }
.form-group input, .form-group select {
  width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1;
  border-radius: 8px; font-size: 14px; outline: none; transition: all 0.2s;
}
.form-group input:focus, .form-group select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.btn-primary {
  width: 100%; padding: 12px; background: var(--primary-bg); color: #fff;
  border: none; border-radius: 8px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.2s;
  /* الصور والتدرّجات تغطّي الزر كله بدل ما تتكرر */
  background-size: cover;
  background-position: center;
}
/* 🐛 الهوفر كان بيستبدل الخلفية بلون صلب — فالتدرّج/الصورة تختفي
   أول ما تحط الماوس. دلوقتي بنغمّق بطبقة سودا شفافة فوق نفس
   الخلفية بدل ما نستبدلها. */
.btn-primary:hover {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.18)),
    var(--primary-bg);
  background-color: var(--primary-color-dark);
}
.color-field {
  width: 100%; height: 42px; padding: 4px; border: 1px solid #cbd5e1;
  border-radius: 8px; cursor: pointer; background: #fff;
}
.btn-success {
  padding: 10px 20px; background: #16a34a; color: #fff;
  border: none; border-radius: 8px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.btn-success:hover { background: #15803d; }
.error-msg { color: #dc2626; font-size: 13px; margin-bottom: 10px; min-height: 16px; }
.hint { margin-top: 16px; font-size: 11px; color: #94a3b8; text-align: center; }

/* ============ DASHBOARD ============ */
.dashboard-layout { display: flex; height: 100vh; }

.sidebar {
  width: 260px; background: var(--sidebar-bg); color: #f8fafc;
  display: flex; flex-direction: column; padding: 24px 16px;
}
.sidebar-title { font-size: 18px; margin-bottom: 4px; font-weight: 700; }
.user-info { font-size: 12px; color: #94a3b8; margin-bottom: 28px; }

/* ═══════════════════════════════════════════════════════════════
   القائمة الجانبية — تمرير ناعم بدون أسهم، وحركة سلسة للعناصر

   المشكلة القديمة: القائمة فيها 16 تبويب من غير أي إعداد للتمرير،
   فالمتصفح كان بيعرض شريط التمرير الافتراضي بتاع ويندوز بسهمين
   فوق وتحت — وده شكله وحش وقديم. دلوقتي بقى شريط رفيع أنيق من غير
   أسهم خالص، وبيظهر بس وقت ما تقرّب الماوس من القائمة.
   ═══════════════════════════════════════════════════════════════ */
.menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 6px;
  margin-left: -6px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}
.menu:hover {
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

/* شريط تمرير مخصص: رفيع، دائري، وبدون أزرار أسهم */
.menu::-webkit-scrollbar { width: 6px; }
.menu::-webkit-scrollbar-track { background: transparent; }
.menu::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.menu::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background 0.3s ease;
}
.menu:hover::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.45); }
.menu:hover::-webkit-scrollbar-thumb:hover { background: rgba(203, 213, 225, 0.75); }

.menu-item {
  position: relative;
  background: none;
  border: none;
  color: #cbd5e1;
  text-align: right;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  overflow: hidden;
  transition: background-color 0.25s ease, color 0.25s ease,
              transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), padding 0.25s ease;
}

/* المؤشر الجانبي المتحرك اللي بيوضح التبويب المفتوح */
.menu-item::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 999px 0 0 999px;
  background: #fff;
  transform: translateY(-50%);
  transition: height 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.menu-item:hover {
  background: var(--sidebar-hover);
  color: #fff;
  transform: translateX(-4px);
}
.menu-item:hover::before { height: 40%; background: rgba(255, 255, 255, 0.5); }

.menu-item.active {
  background: var(--sidebar-active);
  color: #fff;
  transform: translateX(-4px);
  /* ظل محايد بدل الأزرق الثابت — عشان ما يلوّنش اللون المختار */
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45);
}
.menu-item.active::before { height: 60%; background: #fff; }

.menu-item:active { transform: translateX(-4px) scale(0.985); }

/* ⚠️ اتشالت حركة ظهور تبويبات القائمة الجانبية بالتتابع.
   كانت بتخلي القائمة تتبني تبويب ورا تبويب عند كل فتح للبرنامج،
   وده بيدي نفس الإحساس بالبطء. القائمة بتظهر كاملة فوراً دلوقتي،
   والحركة عند مرور الماوس والضغط موجودة زي ما هي. */

/* احترام تفضيل تقليل الحركة لمن يحتاجه */
@media (prefers-reduced-motion: reduce) {
  .menu-item, .menu-item::before { transition: none; animation: none; }
}

/* رسالة خطأ داخل الفورم (تظهر مكان المشكلة مباشرة) */
.form-msg {
  font-size: 13px;
  margin: 6px 2px 0;
  min-height: 18px;
  transition: color 0.2s ease;
}
.form-msg-error {
  color: #dc2626;
  font-weight: 600;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 12px;
}

.btn-change-pwd {
  background: transparent;
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 9px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-change-pwd:hover {
  background: rgba(148, 163, 184, 0.15);
  color: #fff;
  border-color: rgba(203, 213, 225, 0.6);
}

.btn-logout {
  background: #dc2626; color: #fff; border: none;
  padding: 10px; border-radius: 8px; cursor: pointer;
  font-weight: 700; transition: background 0.2s;
}
.btn-logout:hover { background: #b91c1c; }

.main-content {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
  overflow-x: hidden;
  /* حماية مهمة: من غير min-width:0 عنصر الـ flex بيرفض ينكمش عن حجم
     محتواه، فالجداول العريضة كانت بتمدّ الصفحة كلها بدل ما تمرّر
     جوه الكارت بتاعها */
  min-width: 0;
}

/* Section Header */
.section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
/* العنوان بياخد المساحة الفاضية، فالبادچ وزر التحديث بيتجمّعوا في الآخر */
.section-header h2 { color: #0f172a; font-size: 20px; margin-inline-end: auto; }

/* ═══ زر تحديث التبويب ═══ */
.section-refresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #334155;
  border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 7px 14px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.section-refresh-btn:hover:not(:disabled) {
  background: #eff6ff; border-color: #60a5fa; color: #1d4ed8;
}
.section-refresh-btn:active:not(:disabled) { transform: translateY(1px); }
.section-refresh-btn:disabled { opacity: .65; cursor: progress; }
.section-refresh-btn .refresh-icon { display: inline-block; font-size: 14px; line-height: 1; }
.section-refresh-btn.spinning .refresh-icon { animation: refresh-spin .8s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }

/* على الموبايل نسيب الأيقونة بس عشان المساحة */
@media (max-width: 640px) {
  .section-refresh-btn { padding: 7px 10px; }
  .section-refresh-btn .refresh-text { display: none; }
}
.badge {
  background: #e2e8f0; color: #475569; padding: 6px 14px;
  border-radius: 20px; font-size: 13px; font-weight: 700;
}
.badge.green { background: #dcfce7; color: #166534; }

/* Cards */
.card-form {
  background: #fff; padding: 20px; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 20px;
  border: 1px solid #e2e8f0;
}
.form-row { display: flex; flex-wrap: wrap; gap: 14px; }
.form-row .form-group { flex: 1; min-width: 180px; }
.form-row .form-group.small { flex: 0 0 120px; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

/* Table Card */
/* ═══════════════════════════════════════════════════════════════
   الجداول — تمرير أفقي سلس بدل اختفاء الأعمدة

   المشكلة القديمة: .table-card كان عليه overflow: hidden، يعني أي
   جدول أعرض من الكارت (زي شجرة الحسابات، ميزان المراجعة، مسير
   الرواتب، تقرير التحصيل) كانت أعمدته الأخيرة **تتقص وتختفي تماماً**
   من غير أي شريط تمرير يوصّلك لها.

   الحل: الكارت بقى يمرّر أفقياً، والجدول بيتمدد على قد محتواه بدل
   ما ينضغط. الحل ده بيتطبق على كل الجداول في البرنامج دفعة واحدة.
   ═══════════════════════════════════════════════════════════════ */
.table-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #e2e8f0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* شريط تمرير أفقي واضح ومريح (مش مخفي زي بتاع القائمة الجانبية،
   لأن هنا لازم المستخدم يعرف إن فيه بيانات كمان على الجنب) */
.table-card::-webkit-scrollbar { height: 10px; }
.table-card::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.table-card::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 0 0 12px 12px; }
.table-card::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 999px; border: 2px solid #f1f5f9;
}
.table-card::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.table-card { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; }

.table-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid #f1f5f9;
  position: sticky; right: 0;
}
.table-header h3 { font-size: 15px; color: #334155; white-space: nowrap; }
.search-input {
  padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 13px; width: 240px; outline: none;
}
.search-input:focus { border-color: var(--primary-color); }

/* Data Table */
.data-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}
.data-table th, .data-table td {
  padding: 12px 16px; text-align: right; font-size: 13px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
/* العناوين ما تتلفّش على سطرين — أوضح للقراءة مع التمرير */
.data-table th { white-space: nowrap; }

/* أعمدة الأزرار والأرقام والتواريخ ما تتكسرش على أكتر من سطر */
.data-table td:last-child { white-space: nowrap; }

.data-table th {
  background: #f8fafc; color: #475569; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.data-table tr:hover { background: #f8fafc; }
.data-table tr:last-child td { border-bottom: none; }

/* Tags & Links */
.tag {
  background: #dbeafe; color: #1e40af; padding: 4px 10px;
  border-radius: 12px; font-size: 12px; font-weight: 600;
}
.btn-link {
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
  padding: 4px 10px; border-radius: 8px; font-size: 12px;
  cursor: pointer; font-weight: 600; transition: all 0.2s;
}
.btn-link:hover { background: #dcfce7; }
.receipt {
  background: #eff6ff; color: #1d4ed8; padding: 4px 10px;
  border-radius: 6px; font-size: 12px; font-weight: 700;
}

/* تمييز صف الإيصال المُصدر حديثاً في سجل مدفوعات الطالب */
.flash-highlight { animation: flashHighlight 2.4s ease-out 1; }
@keyframes flashHighlight {
  0%   { background-color: #fef9c3; }
  70%  { background-color: #fef9c3; }
  100% { background-color: transparent; }
}

/* Buttons */
.btn-danger-sm {
  background: #fee2e2; color: #dc2626; border: none;
  padding: 6px 10px; border-radius: 6px; font-size: 12px;
  cursor: pointer; transition: background 0.2s;
}
.btn-danger-sm:hover { background: #fecaca; }

/* Stats Grid */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  background: #fff; padding: 18px; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #e2e8f0;
  text-align: center;
}
.stat-card.blue { border-top: 3px solid #2563eb; }
.stat-card.green { border-top: 3px solid #16a34a; }
.stat-card.red { border-top: 3px solid #dc2626; }
.stat-label { font-size: 12px; color: #64748b; margin-bottom: 6px; }
.stat-value { font-size: 18px; font-weight: 800; color: #0f172a; }

.hidden { display: none !important; }

/* ============ APP RESPONSIVENESS: TOAST + CONFIRM (بديل alert/confirm) ============ */
body.app-busy { cursor: progress; }

#toastContainer {
  position: fixed; bottom: 24px; left: 24px; z-index: 3000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.app-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: #1e293b; color: #f8fafc;
  padding: 12px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 360px; cursor: pointer;
}
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast-success { background: #16a34a; }
.app-toast-error { background: #dc2626; }
.app-toast-warning { background: #d97706; }
.app-toast-info { background: #1e293b; }

.app-confirm-overlay {
  position: fixed; inset: 0; z-index: 3100;
  background: rgba(15,23,42,0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s ease;
}
.app-confirm-overlay.show { opacity: 1; }
.app-confirm-box {
  background: #fff; border-radius: 14px; padding: 26px;
  width: 340px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  text-align: center;
}
.app-confirm-msg { font-size: 14px; color: #1e293b; margin-bottom: 20px; line-height: 1.6; }
.app-confirm-actions { display: flex; justify-content: center; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .app-toast, .app-confirm-overlay { transition: none; }
}

/* Role badges */
.role-tag { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.role-tag.admin { background: #ede9fe; color: #6d28d9; }
.role-tag.accountant { background: #dcfce7; color: #166534; }
.role-tag.student_affairs { background: #dbeafe; color: #1e40af; }
.role-tag.owner { background: #fef3c7; color: #92400e; }
.role-tag.general_manager { background: #e0e7ff; color: #3730a3; }
.role-tag.board_chairman { background: #fce7f3; color: #9d174d; }
.role-tag.controller { background: #ffedd5; color: #9a3412; }
.role-tag.bus_manager { background: #cffafe; color: #155e75; }
.role-tag.warehouse_manager { background: #f1f5f9; color: #334155; }
.role-tag.hr { background: #ede9fe; color: #5b21b6; }
.role-tag.reception { background: #fef9c3; color: #854d0e; }
.role-tag.parent { background: #dbeafe; color: #1e40af; }

/* ============================================================
   🔹 تنسيقات خاصة بلوحة المالك (Owner Dashboard)
   ============================================================ */

/* 1. شبكة البطاقات الإحصائية 6 أعمدة */
#owner .stats-grid {
  grid-template-columns: repeat(6, 1fr);
}
/* تلوين إضافي لبطاقات المالك */
#owner .stat-card {
  border-top-width: 4px;
  border-top-style: solid;
}
#owner .stat-card:nth-child(1) { border-top-color: #2563eb; } /* طلاب */
#owner .stat-card:nth-child(2) { border-top-color: #8b5cf6; } /* باصات */
#owner .stat-card:nth-child(3) { border-top-color: #f59e0b; } /* فصول */
#owner .stat-card:nth-child(4) { border-top-color: #16a34a; } /* إيرادات */
#owner .stat-card:nth-child(5) { border-top-color: #dc2626; } /* مصروفات */
#owner .stat-card:nth-child(6) { border-top-color: #1d4ed8; } /* صافي */

/* 2. أزرار الطباعة داخل لوحة المالك */
#owner .btn-success,
#owner .btn-primary {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
  font-weight: 600;
  width: auto;
}
#owner .btn-success {
  background: #16a34a;
  color: #fff;
}
#owner .btn-success:hover {
  background: #15803d;
}

/* 3. تحسين مظهر الجداول في لوحة المالك */
#owner .data-table th {
  background: #f1f5f9;
  color: #1e293b;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
#owner .data-table td {
  font-size: 13px;
  vertical-align: middle;
}
#owner .data-table tr:hover {
  background: #f8fafc;
}
#owner .data-table .tag {
  font-size: 11px;
}

/* 4. نافذة عرض طلاب الباص المنبثقة (Owner Bus Roster) */
#ownerBusRosterModal .modal-content {
  max-width: 900px;
  padding: 20px;
}
#ownerBusRosterModal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: center;
}
#ownerBusRosterModal table th,
#ownerBusRosterModal table td {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
}
#ownerBusRosterModal table th {
  background: #f1f5f9;
  font-weight: 700;
}
#ownerBusRosterModal table tr:nth-child(even) {
  background: #fafafa;
}

/* 5. تنسيق ملخص الميزانية في لوحة المالك */
#owner .stats-grid .stat-card .stat-value {
  font-size: 18px;
}

/* ============================================================
   🔹 تحسينات خاصة بتبويب الكنترول (Control Tab)
   ============================================================ */

/* 1. تبويبات الكنترول الفرعية (Sub-tabs) */
.ctrl-subtab {
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    margin-right: 4px !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important;
}

.ctrl-subtab:hover {
    color: var(--primary-color, #2563eb) !important;
    background: #f1f5f9 !important;
    border-bottom-color: #94a3b8 !important;
}

.ctrl-subtab.active {
    color: var(--primary-color, #2563eb) !important;
    border-bottom-color: var(--primary-color, #2563eb) !important;
    background: #eff6ff !important;
    font-weight: 700 !important;
}

/* 2. الألواح (Panes) داخل الكنترول */
.ctrl-pane {
    padding: 24px 0 !important;
    animation: fadeInPane 0.2s ease-out;
}

@keyframes fadeInPane {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 3. تحسين شكل البطاقات والنماذج داخل الكنترول */
#control .card-form {
    padding: 28px 30px !important;
    margin-bottom: 28px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e9edf2 !important;
}

#control .card-form h3 {
    font-size: 17px !important;
    color: #1e293b !important;
    margin-bottom: 18px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 4. تكبير حقول الإدخال والاختيار داخل الكنترول */
#control .form-group input,
#control .form-group select {
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

#control .form-group input:focus,
#control .form-group select:focus {
    border-color: var(--primary-color, #2563eb) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}

/* تخصيص أعمدة أعمال السنة داخل رأس كشف الرصد. */
#bulkDistribution {
    width: 100%;
    min-width: 0;
    flex-basis: 100%;
}
#bulkDistribution .search-input {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* 5. أزرار الكنترول (مثل "إضافة المادة" و "حفظ الإعدادات") */
#control .btn-primary,
#control .btn-success {
    padding: 12px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    letter-spacing: 0.3px !important;
    transition: all 0.2s !important;
}

#control .btn-primary {
    background: var(--primary-color, #2563eb) !important;
}
#control .btn-primary:hover {
    background: var(--primary-color-dark, #1d4ed8) !important;
    transform: scale(1.02);
}

/* 6. الجداول داخل الكنترول */
#control .data-table th {
    background: #f8fafc !important;
    font-size: 13px !important;
    padding: 14px 18px !important;
    border-bottom: 2px solid #e2e8f0 !important;
}
#control .data-table td {
    padding: 14px 18px !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}
#control .data-table tr:hover {
    background: #f1f5f9 !important;
}

/* 7. تنسيق خاص لحقول الأعداد الصغيرة في الكنترول (مثل نسبة أعمال السنة) */
#control .form-group.small input[type="number"] {
    max-width: 140px !important;
}

/* 8. تحسين رسائل الخطأ والتنبيه داخل الكنترول */
#control .error-msg {
    font-size: 14px !important;
    padding: 8px 0 !important;
    color: #dc2626 !important;
    font-weight: 500 !important;
}

/* 9. شريط السياق العلوي (المرحلة، الترم، العام الدراسي) */
#control .card-form:first-of-type .form-row {
    gap: 18px !important;
}
#control .card-form:first-of-type .form-group {
    min-width: 160px !important;
}
#control .card-form:first-of-type label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

/* 10. جعل التابات الفرعية تتكيف مع الشاشات الصغيرة */
@media (max-width: 768px) {
    .ctrl-subtab {
        padding: 10px 16px !important;
        font-size: 13px !important;
        flex: 1 0 auto !important;
        text-align: center !important;
    }
    #control .card-form {
        padding: 20px !important;
    }
    #control .form-group {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* ============================================================
   🔹 التجاوب مع الشاشات المختلفة (لوحة المالك)
   ============================================================ */
@media (max-width: 1200px) {
    #owner .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    #owner .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #owner .stat-card .stat-value {
        font-size: 15px;
    }
}
@media (max-width: 480px) {
    #owner .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   🔹 تحسينات الطباعة (Print) للوحة المالك
   ============================================================ */
@media print {
    /* إخفاء أزرار الطباعة والعمليات غير الضرورية */
    #owner .btn-success,
    #owner .btn-primary,
    #owner .btn-link,
    #owner .search-input,
    #owner .table-header .btn-success,
    #owner .table-header .btn-primary {
        display: none !important;
    }
    /* إظهار الجداول بشكل كامل */
    #owner .data-table {
        font-size: 10px !important;
    }
    #owner .data-table th,
    #owner .data-table td {
        padding: 4px 6px !important;
        border: 1px solid #000 !important;
    }
    /* إخفاء العناصر غير المرغوب فيها */
    .no-print {
        display: none !important;
    }
}
/* ============================================================
   🔹 تبويبات فرعية خاصة بقسم الحسابات العامة والمالية (Accounting Sub-tabs)
   نسخة مطابقة تماماً في الشكل لـ .ctrl-subtab/.ctrl-pane لكن بأسماء
   كلاسات مستقلة، عشان تبديل تاب في قسم الحسابات ميأثرش على حالة
   التابات الفرعية المفتوحة في قسم الكنترول (والعكس) بما إنهم مقسمين
   على اسم كلاس مختلف تماماً.
   ============================================================ */
.acc-subtab {
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    margin-right: 4px !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important;
}

.acc-subtab:hover {
    color: var(--primary-color, #2563eb) !important;
    background: #f1f5f9 !important;
    border-bottom-color: #94a3b8 !important;
}

.acc-subtab.active {
    color: var(--primary-color, #2563eb) !important;
    border-bottom-color: var(--primary-color, #2563eb) !important;
    background: #eff6ff !important;
    font-weight: 700 !important;
}

.acc-pane {
    padding: 24px 0 !important;
    animation: fadeInPane 0.2s ease-out;
}

@media (max-width: 768px) {
    .acc-subtab {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   تابات فرعية مستقلة لقسم "الموارد البشرية وشئون العاملين" —
   نفس مبدأ عزل .acc-subtab/.acc-pane تماماً، بكلاس مختلف عشان
   تبديل تاب هنا ميأثرش على أي قسم تابيه تاني في الصفحة.
   ============================================================ */
.hr-subtab {
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    margin-right: 4px !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important;
}

.hr-subtab:hover {
    color: var(--primary-color, #2563eb) !important;
    background: #f1f5f9 !important;
    border-bottom-color: #94a3b8 !important;
}

.hr-subtab.active {
    color: var(--primary-color, #2563eb) !important;
    border-bottom-color: var(--primary-color, #2563eb) !important;
    background: #eff6ff !important;
    font-weight: 700 !important;
}

.hr-pane {
    padding: 24px 0 !important;
    animation: fadeInPane 0.2s ease-out;
}

@media (max-width: 768px) {
    .hr-subtab {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   تابات فرعية مستقلة لقسم "الاستقبال والبوابة" — نفس مبدأ عزل
   .acc-subtab/.hr-subtab تماماً.
   ============================================================ */
.recep-subtab {
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    margin-right: 4px !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important;
}

.recep-subtab:hover {
    color: var(--primary-color, #2563eb) !important;
    background: #f1f5f9 !important;
    border-bottom-color: #94a3b8 !important;
}

.recep-subtab.active {
    color: var(--primary-color, #2563eb) !important;
    border-bottom-color: var(--primary-color, #2563eb) !important;
    background: #eff6ff !important;
    font-weight: 700 !important;
}

.recep-pane {
    padding: 24px 0 !important;
    animation: fadeInPane 0.2s ease-out;
}

@media (max-width: 768px) {
    .recep-subtab {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   👨‍👩‍👦 تبويبات بوابة ولي الأمر
   نسخة مطابقة في الشكل لـ .recep-subtab/.acc-subtab لكن بكلاس
   مستقل عشان العزل الكامل — الشاشة دي بيفتحها ناس من برّه المدرسة
   وماينفعش أي تغيير في قسم تاني يأثر عليها.
   ============================================================ */
.pp-subtab {
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    margin-right: 4px !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important;
}

.pp-subtab:hover {
    color: var(--primary-color, #2563eb) !important;
    background: #f1f5f9 !important;
    border-bottom-color: #94a3b8 !important;
}

.pp-subtab.active {
    color: var(--primary-color, #2563eb) !important;
    border-bottom-color: var(--primary-color, #2563eb) !important;
    background: #eff6ff !important;
    font-weight: 700 !important;
}

.pp-pane .data-table td.num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pp-pane {
    padding: 24px 0 !important;
    animation: fadeInPane 0.2s ease-out;
}

@media (max-width: 768px) {
    .pp-subtab {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   📱 النسخة المحمولة (الموبايل والتابلت)

   المشكلة قبل كده: التخطيط الأساسي كان مصمّم للديسكتوب بس —
   الشريط الجانبي عرضه 260px ثابت، وعلى شاشة موبايل عرضها 380px
   كان بياكل تلتين الشاشة ويسيب المحتوى مزنوق في الباقي.

   الحل: على الموبايل الشريط بيتحول لـ "درج" (Drawer) بينزلق من
   اليمين لما تدوس على زرار القائمة، وبيقفل لما تختار تبويب أو
   تدوس على الخلفية. المحتوى بياخد الشاشة كلها.
   ═══════════════════════════════════════════════════════════════ */

/* زرار القائمة والخلفية الغامقة — مخفيين على الديسكتوب تماماً */
.mobile-topbar { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 900px) {

  /* ── شريط علوي ثابت فيه زرار القائمة ── */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--sidebar-bg);
    color: #fff;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .mobile-menu-btn {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    /* 44px هو الحد الأدنى المريح للمس بالإصبع */
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    cursor: pointer;
  }
  .mobile-menu-btn:active { background: rgba(255,255,255,0.25); }
  .mobile-topbar-title {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── التخطيط: عمودي بدل أفقي ── */
  .dashboard-layout {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;   /* بيراعي شريط المتصفح المتحرك على الموبايل */
  }

  /* ── الشريط الجانبي كدرج منزلق ── */
  .sidebar {
    position: fixed;
    top: 0;
    right: -300px;              /* مخفي برّه الشاشة (RTL) */
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    z-index: 1100;
    transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(0,0,0,0.3);
    padding: 20px 14px;
  }
  .sidebar.open { right: 0; }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .sidebar-overlay.show { opacity: 1; pointer-events: auto; }

  /* عناصر القائمة أكبر عشان اللمس */
  .menu-item { padding: 14px 16px; font-size: 15px; }

  /* ── المحتوى ياخد الشاشة كلها ── */
  .main-content {
    padding: 14px 12px;
    width: 100%;
  }

  /* ── الفورمات: كل حقل في سطر ── */
  .form-row { flex-direction: column; gap: 10px; }
  .form-row .form-group,
  .form-row .form-group.small {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  .card-form { padding: 16px; }

  /* حقول الإدخال 16px على الأقل — أقل من كده أندرويد و iOS
     بيعملوا zoom تلقائي مزعج عند الكتابة */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* الأزرار أكبر وبعرض مريح للمس */
  .btn-primary, .btn-success, .btn-danger, .btn-danger-sm, .btn-link {
    min-height: 44px;
    padding: 12px 18px;
  }
  .form-actions {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: stretch;
  }
  .form-actions button { flex: 1 1 auto; }

  /* ── الجداول: التمرير الأفقي بقى ضروري أكتر هنا ── */
  .table-card { border-radius: 10px; }
  .data-table th, .data-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
  .table-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .search-input { width: 100%; }

  /* ── النوافذ المنبثقة: شبه ملء الشاشة ── */
  .modal-content {
    width: 96%;
    max-width: 96%;
    max-height: 92vh;
    max-height: 92dvh;
    padding: 18px;
    border-radius: 14px;
  }

  /* ── التابات الفرعية: تمرير أفقي بدل ما تتزنق ── */
  .acc-subtab, .hr-subtab, .recep-subtab, .ctrl-subtab, .stu-subtab,
  .pp-subtab, .rpt-subtab {
    flex: 0 0 auto;
  }
  .subtabs, .acc-subtabs, .hr-subtabs, .recep-subtabs, .pp-subtabs,
  .rpt-subtabs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-header h2 { font-size: 17px; }
}

/* ── شاشات صغيرة جداً ── */
@media (max-width: 480px) {
  .main-content { padding: 12px 10px; }
  .card-form { padding: 14px; }
  .data-table th, .data-table td { padding: 9px 10px; font-size: 12.5px; }
  .modal-content { padding: 14px; }
  .mobile-topbar-title { font-size: 14px; }
}

/* ── الوضع الأفقي (Landscape) على الموبايل ── */
@media (max-width: 900px) and (orientation: landscape) {
  .sidebar { padding: 12px 14px; }
  .menu-item { padding: 10px 14px; }
}

/* الشريط العلوي والدرج مايظهروش في الطباعة */
@media print {
  .mobile-topbar, .sidebar-overlay { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   🌐 دعم الاتجاه من اليسار لليمين (LTR) للغة الإنجليزية

   التصميم الأصلي كان مبني على RTL بالكامل (text-align: right،
   الشريط الجانبي على اليمين...). القواعد دي بتعكس كل ده لما
   المستخدم يختار الإنجليزية أو اتجاه LTR يدوياً.
   ═══════════════════════════════════════════════════════════════ */

html[dir="ltr"] .data-table th,
html[dir="ltr"] .data-table td {
  text-align: left;
}

html[dir="ltr"] .sidebar {
  box-shadow: 4px 0 24px rgba(0,0,0,0.06);
}

html[dir="ltr"] .menu-item {
  text-align: left;
}

/* المؤشر الجانبي المتحرك يتنقل للجهة التانية */
html[dir="ltr"] .menu-item::before {
  right: auto;
  left: 0;
  border-radius: 0 999px 999px 0;
}
html[dir="ltr"] .menu-item:hover,
html[dir="ltr"] .menu-item.active {
  transform: translateX(4px);
}
html[dir="ltr"] .menu-item:active {
  transform: translateX(4px) scale(0.985);
}

html[dir="ltr"] .close-modal {
  left: auto;
  right: 16px;
}

html[dir="ltr"] .form-actions {
  justify-content: flex-start;
}

html[dir="ltr"] .table-header {
  right: auto;
  left: 0;
}

/* الحقول اللي محتواها دايماً إنجليزي (عناوين، أكواد) تفضل LTR
   في الحالتين عشان تتقرا صح */
input[type="email"],
input[type="url"],
input[type="number"],
#conn_ip, #conn_port,
#set_server_ip, #set_server_port,
.ltr-field {
  direction: ltr;
  text-align: left;
}

/* الشريط الجانبي على الموبايل بينزلق من الشمال في وضع LTR */
@media (max-width: 900px) {
  html[dir="ltr"] .sidebar {
    right: auto;
    left: -300px;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  }
  html[dir="ltr"] .sidebar.open {
    left: 0;
    right: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   🏫 شعار المدرسة
   ═══════════════════════════════════════════════════════════════ */
.school-logo {
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
}

.login-card .school-logo {
  max-width: 110px;
  max-height: 110px;
}

/* الشعار جنب الاسم في الشريط الجانبي */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.sidebar-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}
.sidebar-brand .sidebar-title {
  margin-bottom: 0;
}

/* الشعار في الطباعة — يطلع في ترويسة التقارير */
@media print {
  .school-logo, .sidebar-brand img { display: none !important; }
  .print-logo { display: block !important; max-height: 70px; margin: 0 auto 8px; }
}
.print-logo { display: none; }

/* ═══════════════════════════════════════════════════════════════
   ✨ الطبقة العصرية (Fluent / Windows 11)

   مبدأ التصميم: كل القواعد دي **إضافية فوق** التصميم الموجود —
   مفيش أي قاعدة قديمة اتشالت أو اتغيّرت. لو حصل أي مشكلة، حذف
   القسم ده بيرجّع البرنامج لشكله السابق بالظبط.

   المبادئ المتبعة (نفس منهج Windows 11):
     • حواف أنعم وأكبر (Rounded corners)
     • ظلال متدرجة الطبقات (Elevation) بدل الحدود الحادة
     • حركة سريعة وهادفة (150-300ms) مش استعراضية
     • تأثير الضغط (Depth) — العنصر ينزل شوية عند الضغط
     • خلفيات شبه شفافة مع ضبابية (Acrylic)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* منحنيات الحركة — نفس اللي بتستخدمها مايكروسوفت في Fluent */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.4s;

  /* طبقات الظلال */
  --elev-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --elev-2: 0 2px 6px rgba(15, 23, 42, 0.07), 0 4px 12px rgba(15, 23, 42, 0.05);
  --elev-3: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
  --elev-4: 0 16px 48px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.08);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* ── خلفية متدرجة ناعمة بدل اللون المسطح ── */
body {
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(37, 99, 235, 0.05), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(99, 102, 241, 0.045), transparent 55%),
    #f1f5f9;
  background-attachment: fixed;
}

/* ═══════════ البطاقات ═══════════ */
.card-form,
.table-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  border-color: rgba(226, 232, 240, 0.9);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.card-form:hover,
.table-card:hover {
  box-shadow: var(--elev-2);
}

/* ⚠️ اتشالت حركة ظهور البطاقات المتتابعة عمداً.
   كانت بتخلي كل بطاقة تظهر بتأخير عن اللي قبلها، والنتيجة إن
   الصفحة بتتبنى قدام عينك على مراحل — وده بيدي إحساس بالبطء
   والتهنيج حتى لو البرنامج سريع فعلاً.
   الصفحات دلوقتي بتظهر فوراً زي ما كانت، والتحسين البصري
   (الظلال والحواف والتفاعل مع الماوس) موجود زي ما هو. */

/* ═══════════ الأزرار ═══════════ */
.btn-primary,
.btn-success,
.btn-danger,
.btn-danger-sm,
.btn-link {
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              filter var(--dur-fast) ease;
}
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-danger-sm:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
  filter: brightness(1.06);
}
/* تأثير الضغط — العنصر ينزل زي ما بيحصل في ويندوز 11 */
.btn-primary:active,
.btn-success:active,
.btn-danger:active,
.btn-danger-sm:active,
.btn-link:active {
  transform: translateY(0) scale(0.975);
  box-shadow: var(--elev-1);
  filter: brightness(0.97);
}

/* موجة الضغط (Ripple) */
.btn-primary::after,
.btn-success::after,
.btn-danger-sm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.35), transparent 60%);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease-out);
}
.btn-primary:active::after,
.btn-success:active::after,
.btn-danger-sm:active::after {
  opacity: 1;
  transform: scale(1.6);
  transition: none;
}

/* حلقة التركيز — مهمة للوصولية والتنقل بالكيبورد */
.btn-primary:focus-visible,
.btn-success:focus-visible,
.btn-danger-sm:focus-visible,
.menu-item:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ═══════════ الحقول ═══════════ */
.form-group input,
.form-group select,
.form-group textarea,
.search-input {
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) ease,
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) ease;
}
.form-group input:hover:not(:focus),
.form-group select:hover:not(:focus),
.form-group textarea:hover:not(:focus) {
  border-color: #cbd5e1;
  background-color: #fcfdff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.search-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ═══════════ الشريط الجانبي ═══════════ */
/* 🐛 كان فيه طبقة تدرّج أزرق ثابتة (rgba(37,99,235,.10)) فوق
   var(--sidebar-bg). النتيجة إن أي لون يختاره المستخدم كان بيتغطّى
   بمسحة زرقاء — فاللون الأخضر يبان مائل للأزرق، والأسود يبان كحلي.
   دلوقتي اللون المختار بيظهر زي ما هو بالظبط. */
.sidebar {
  background: var(--sidebar-bg);
  box-shadow: var(--elev-3);
}

.menu-item {
  border-radius: 10px;
}
/* توهج خفيف يتبع العنصر النشط */
/* 🐛 كان بيحوّل اللون المختار لتدرّج (linear-gradient + color-mix).
   يعني المستخدم يختار أخضر صريح فيطلع متدرّج من أخضر لأخضر غامق —
   مش اللون اللي اختاره. وكمان الظل الأزرق الثابت تحت كان بيلوّنه.
   دلوقتي لون مسطح زي ما اتحدد بالظبط. */
.menu-item.active {
  background: var(--sidebar-active);
}

/* ═══════════ الجداول ═══════════ */
.data-table tbody tr {
  transition: background-color var(--dur-fast) ease;
}
.data-table thead th {
  position: relative;
}
/* خط رفيع تحت رأس الجدول بدل الحد الحاد */
.data-table thead th::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,0.5), transparent);
}

/* ⚠️ اتشالت حركة ظهور صفوف الجدول عمداً — نفس السبب.
   الجداول بتظهر كاملة فوراً، وده أسرع وأوضح للاستخدام اليومي. */

/* ═══════════ التابات الفرعية ═══════════ */
.acc-subtab, .hr-subtab, .recep-subtab, .ctrl-subtab, .stu-subtab,
.pp-subtab, .rpt-subtab {
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) ease,
              color var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease-out);
}
.acc-subtab:hover, .hr-subtab:hover, .stu-subtab:hover,
.recep-subtab:hover, .ctrl-subtab:hover, .pp-subtab:hover, .rpt-subtab:hover {
  transform: translateY(-1px);
}
.acc-subtab:active, .hr-subtab:active, .stu-subtab:active,
.recep-subtab:active, .ctrl-subtab:active, .pp-subtab:active, .rpt-subtab:active {
  transform: scale(0.97);
}

/* ═══════════ الشارات ═══════════ */
.badge, .tag {
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.badge:hover { transform: scale(1.04); }

/* ═══════════ التنبيهات (Toast) ═══════════ */
.app-toast {
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  backdrop-filter: blur(10px);
  animation: toastIn var(--dur-base) var(--ease-bounce) both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════ نافذة التأكيد ═══════════ */
.app-confirm-overlay {
  backdrop-filter: blur(3px);
  animation: fadeIn var(--dur-fast) ease both;
}
.app-confirm-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-4);
  animation: dialogIn var(--dur-base) var(--ease-bounce) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════ نافذة الاتصال ═══════════ */
.conn-modal-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-4);
  animation: dialogIn var(--dur-base) var(--ease-bounce) both;
}

/* ═══════════ بطاقة الدخول ═══════════ */
.login-card {
  border-radius: 20px;
  box-shadow: var(--elev-4);
  animation: loginIn var(--dur-slow) var(--ease-out) both;
}
@keyframes loginIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card .school-logo {
  animation: logoIn 0.6s var(--ease-bounce) both;
  animation-delay: 0.1s;
}
@keyframes logoIn {
  from { opacity: 0; transform: scale(0.7) rotate(-6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* ═══════════ الشريط العلوي للموبايل ═══════════ */
.mobile-topbar {
  backdrop-filter: blur(12px);
  background: rgba(15, 23, 42, 0.92);
}

/* ═══════════════════════════════════════════════════════════════
   ⚠️ ضوابط السلامة — دي أهم حاجة في القسم كله
   ═══════════════════════════════════════════════════════════════ */

/* 1) احترام تفضيل تقليل الحركة — إلزامي للوصولية.
      المستخدمين اللي عندهم حساسية للحركة بيتضرروا فعلياً منها. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 2) الطباعة: أي حركة أو ظل أو شفافية لازم تتلغي تماماً —
      وإلا التقارير المطبوعة بتطلع بظلال رمادية أو عناصر ناقصة */
@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  body { background: #fff !important; }
  .card-form, .table-card { border-radius: 0 !important; }
}

/* 3) على الموبايل: حركة أخف عشان الأجهزة الضعيفة ما تتلككش */
@media (max-width: 900px) {
  :root {
    --dur-base: 0.18s;
    --dur-slow: 0.22s;
  }
  .data-table tbody tr { animation: none; }
  .card-form:hover, .table-card:hover { box-shadow: var(--elev-1); }
}

/* ═══════════════════════════════════════════════════════════════
   ✨ تحسينات بصرية إضافية — بدون أي حركة دخول

   القاعدة هنا: الحركة الوحيدة المسموحة هي **رد فعل لتصرّف المستخدم**
   (مرور الماوس، الضغط، التركيز على حقل). أي حركة بتحصل لوحدها عند
   فتح الصفحة اتشالت، لأنها بتدي إحساس بالبطء حتى لو البرنامج سريع.
   ═══════════════════════════════════════════════════════════════ */

/* ── رأس القسم: خط ملوّن أنيق جنب العنوان ── */
.section-header h2 {
  position: relative;
  padding-inline-start: 14px;
}
.section-header h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary-color), rgba(37, 99, 235, 0.35));
}

/* ── ترويسة البطاقات: تدرّج خفيف جداً بدل اللون المسطح ── */
.table-header {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0));
}

/* ── رؤوس الجداول: أوضح وأنعم ── */
.data-table thead th {
  background: #f8fafc;
  letter-spacing: 0;
  font-size: 12.5px;
  color: #475569;
}

/* ── صفوف متبادلة اللون: تسهّل قراءة الجداول العريضة ── */
.data-table tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.55);
}
.data-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.055);
}

/* ── الشارات: شكل أنعم ── */
.badge {
  background: rgba(37, 99, 235, 0.09);
  color: #1e40af;
  font-weight: 700;
  padding: 5px 12px;
  border: 1px solid rgba(37, 99, 235, 0.14);
}

/* ── الأزرار الأساسية: تدرّج خفيف يديها عمق ── */

/* 🐛 المشكلة اللي كانت هنا:
   `background: var(--primary-bg)` اختصار بيضبط background-image كمان.
   لما المستخدم يختار تدرّج لوني أو صورة خلفية، القيمة بتتحط في
   background-image — وبعدين القاعدة دي كانت بتدوس عليها بتدرّج
   أبيض/أسود شفاف، فالزر يطلع أبيض أو شفاف بدل لون المستخدم.

   الحل: بنستخدم background-image نفسه ونحط اللمعة **فوق** لون
   المستخدم بدل ما نستبدله. الطبقة الأولى (اللمعة) شفافة فبيبان
   اللي تحتها. */
.btn-primary {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.06)),
    var(--primary-bg);
  /* احتياطي لو المتصفح ما فهمش الطبقتين */
  background-color: var(--primary-color);
}
.btn-success {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.06));
}

/* ── الحقول: خلفية أنعم شوية من الأبيض الصريح ── */
.form-group input,
.form-group select,
.form-group textarea {
  background-color: #fdfdfe;
}

/* ── التسميات فوق الحقول ── */
.form-group label {
  letter-spacing: 0.1px;
}

/* ── فواصل أنعم بين صفوف الجدول ── */
.data-table th,
.data-table td {
  border-bottom-color: rgba(241, 245, 249, 0.9);
}

/* ── بطاقة الدخول: توهج خفيف حوالين الشعار ── */
.login-card .school-logo {
  filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.18));
}

/* ── الشريط الجانبي: فاصل رفيع فوق أزرار الخروج ── */
.btn-change-pwd {
  margin-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 14px;
  border-radius: 0 0 8px 8px;
}

/* ── شريط التمرير العام: أنعم وأحدث ── */
.main-content::-webkit-scrollbar { width: 10px; }
.main-content::-webkit-scrollbar-button { display: none; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.main-content::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.55);
  background-clip: content-box;
}

/* ── الطباعة: إلغاء كل التحسينات دي كمان ── */
@media print {
  .section-header h2::before { display: none !important; }
  .table-header { background: none !important; }
  .data-table tbody tr:nth-child(even) { background: none !important; }
  .badge { background: none !important; border: none !important; }
  .btn-primary, .btn-success { background-image: none !important; }
}

/* ═══ تبويبات شؤون الطلبة — نفس نمط .acc-subtab بكلاس مستقل ═══ */
.stu-subtab, .fee-subtab, .inv-subtab, .bus-subtab, .cls-subtab, .own-subtab, .usr-subtab {
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    margin-right: 4px !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important;
}

.stu-subtab:hover, .fee-subtab:hover, .inv-subtab:hover, .bus-subtab:hover, .cls-subtab:hover, .own-subtab:hover, .usr-subtab:hover {
    color: var(--primary-color, #2563eb) !important;
    background: #f1f5f9 !important;
    border-bottom-color: #94a3b8 !important;
}

.stu-subtab.active, .fee-subtab.active, .inv-subtab.active, .bus-subtab.active, .cls-subtab.active, .own-subtab.active, .usr-subtab.active {
    color: var(--primary-color, #2563eb) !important;
    border-bottom-color: var(--primary-color, #2563eb) !important;
    background: #eff6ff !important;
    font-weight: 700 !important;
}

.stu-pane, .fee-pane, .inv-pane, .bus-pane, .cls-pane, .own-pane, .usr-pane {
    padding: 24px 0 !important;
    animation: fadeInPane 0.2s ease-out;
}
/* ═══ تبويبات الإعدادات — نفس نمط تبويبات شؤون الطلبة ═══ */

.set-subtab {
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    margin-right: 4px !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important;
}

.set-subtab:hover {
    color: var(--primary-color, #2563eb) !important;
    background: #f1f5f9 !important;
    border-bottom-color: #94a3b8 !important;
}

.set-subtab.active {
    color: var(--primary-color, #2563eb) !important;
    border-bottom-color: var(--primary-color, #2563eb) !important;
    background: #eff6ff !important;
    font-weight: 700 !important;
}

.set-pane {
    padding: 24px 0 !important;
    animation: fadeInPane 0.2s ease-out;
}
/* ════════════════════════════════════════════════
   ☑️ تحديد الكل — مربّع رئيسي + عدّاد المحدد
   ════════════════════════════════════════════════ */

/* المربّع الرئيسي أكبر شوية من مربّعات الصفوف عشان يبان إنه مختلف */
.bulk-master {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
  vertical-align: middle;
}

.bulk-master:disabled {
  cursor: not-allowed;
  opacity: .45;
}

/* شارة "X محدد من Y" — بتظهر بس لما يكون في حاجة محددة */
.bulk-count {
  display: none;
  margin-inline-start: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   📜 الجداول الطويلة — الشريط الأفقي يفضل في متناول اليد
   ───────────────────────────────────────────────────────────────
   🐛 المشكلة: الكارت كان بيمرّر أفقياً بس من غير حد لطوله. يعني
      جدول فيه 2000 صف بيخلّي الكارت طوله عشرات الآلاف من البكسل،
      والشريط الأفقي بيقعد في آخره خالص — فالمستخدم لازم ينزل لآخر
      الجدول كله عشان يوصل للشريط ويشوف الأعمدة اللي على الجنب.

   ✅ الحل: بنحدّد أقصى ارتفاع للكارت ونخلّيه يمرّر رأسياً كمان.
      وبكده:
        • الشريط الأفقي بيبقى في آخر الجزء الظاهر — قدامك دايماً
        • رؤوس الأعمدة بتفضل ثابتة فوق وإنت بتنزل في الصفوف
        • باقي الصفحة بتمرّر لوحدها من غير ما الجدول يمدّها

   ملاحظة: بنقسّم على --app-zoom عشان الارتفاع يفضل مظبوط بصرياً
   مهما كانت نسبة التكبير (وحدة vh مابتتأثرش بالتكبير).
   ═══════════════════════════════════════════════════════════════ */
:root {
  --app-zoom: 1;
  /* الجدول ما يزيدش عن ارتفاع الشاشة — عشان أول ما تنزّله يبقى
     الشريط الأفقي في آخر الشاشة قدامك، مش تحت 2000 صف */
  --table-viewport: calc((100vh - 130px) / var(--app-zoom));
}

.table-card:has(> table.data-table),
.card-form:has(> table.data-table),
.table-scroll {
  max-height: var(--table-viewport);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* شريط عنوان الجدول (الاسم + البحث + الأزرار) يفضل ثابت فوق —
   عشان تفضل قادر تبحث وإنت نازل في آلاف الصفوف */
.table-card:has(> table.data-table) > .table-header {
  position: sticky;
  top: 0; right: 0;
  z-index: 5;
  background: #fff;
}

/* ورؤوس الأعمدة تحتيه على طول (ارتفاعه بيتحسب في fitTableHeaders) */
.table-card:has(> table.data-table) > .data-table thead th,
.card-form:has(> table.data-table) > .data-table thead th,
.table-scroll > .data-table thead th {
  position: sticky;
  top: var(--table-head-h, 0px);
  z-index: 3;
  /* الحدود العادية بتختفي مع sticky، فبنرسمها بالظل */
  box-shadow: inset 0 -1px 0 #e2e8f0;
}

/* شريطي التمرير: واضحين ومريحين للسحب بالماوس */
.table-card:has(> table.data-table)::-webkit-scrollbar,
.card-form:has(> table.data-table)::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar { width: 12px; height: 12px; }

.table-card:has(> table.data-table)::-webkit-scrollbar-track,
.card-form:has(> table.data-table)::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track { background: #f1f5f9; }

.table-card:has(> table.data-table)::-webkit-scrollbar-thumb,
.card-form:has(> table.data-table)::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb {
  background: #b6c2d1; border-radius: 999px; border: 3px solid #f1f5f9;
}
.table-card:has(> table.data-table)::-webkit-scrollbar-thumb:hover,
.card-form:has(> table.data-table)::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover { background: #8b9bb0; }

/* الركن اللي بين الشريطين */
.table-card:has(> table.data-table)::-webkit-scrollbar-corner,
.card-form:has(> table.data-table)::-webkit-scrollbar-corner,
.table-scroll::-webkit-scrollbar-corner { background: #f1f5f9; }

/* تمرير أنعم لمحتوى الصفحة نفسه */
.main-content { scroll-behavior: smooth; }

/* الطباعة: مفيش حدود ولا تمرير — الجدول كله يطلع على الورق */
@media print {
  .table-card, .card-form, .table-scroll {
    max-height: none !important;
    overflow: visible !important;
  }
  .data-table thead th { position: static !important; box-shadow: none !important; }
}

/* الشاشات القصيرة: نسيب مساحة أقل للجدول عشان يفضل باين */
@media (max-height: 700px) {
  :root { --table-viewport: calc((100vh - 90px) / var(--app-zoom)); }
}

/* ═══════════════════════════════════════════════════════════════
   🔍 تكبير وتصغير الواجهة (زي المتصفحات)
   بيتطبق على البرنامج كله عن طريق خاصية zoom — بتعيد ترتيب
   العناصر فعلياً مش بتشدّها، فالنصوص بتفضل واضحة في أي نسبة.
   ═══════════════════════════════════════════════════════════════ */
.zoom-bar {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 14px 6px; padding: 6px 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
}
.zoom-bar button {
  flex: none; width: 30px; height: 28px; padding: 0;
  background: rgba(255,255,255,.1); color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.14); border-radius: 7px;
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background .15s;
}
.zoom-bar button:hover { background: rgba(255,255,255,.22); }
.zoom-bar button:active { transform: translateY(1px); }
.zoom-bar button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }
.zoom-bar button:disabled { opacity: .35; cursor: not-allowed; }
.zoom-level {
  flex: 1; text-align: center; font-size: 12.5px; font-weight: 700;
  color: #cbd5e1; font-variant-numeric: tabular-nums; cursor: pointer;
  user-select: none; padding: 4px 0; border-radius: 6px;
}
.zoom-level:hover { background: rgba(255,255,255,.1); color: #fff; }

@media print { .zoom-bar { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════
   ظِلال حواف الجدول — علامة إن فيه أعمدة كمان على الجنب
   بتظهر لوحدها لما يكون في محتوى مخفي في الاتجاه ده، وبتختفي أول
   ما توصل لآخره. مهمة لأن بعض الأنظمة بتخفي شريط التمرير لحد ما
   تبدأ تحرّك — فمن غيرها المستخدم ممكن ما يعرفش إن في أعمدة تانية.
   ═══════════════════════════════════════════════════════════════ */
.table-card:has(> table.data-table),
.card-form:has(> table.data-table),
.table-scroll {
  background-image:
    linear-gradient(to left,  rgba(15,23,42,.13), rgba(15,23,42,0)),
    linear-gradient(to right, rgba(15,23,42,.13), rgba(15,23,42,0));
  background-position: right center, left center;
  background-repeat: no-repeat;
  background-size: 16px 100%, 16px 100%;
  background-attachment: scroll, scroll;
}

/* الصفوف بتغطي الظل، فبنخلي خلفيتها شفافة عشان يبان من وراها */
.table-card:has(> table.data-table) .data-table tbody tr,
.card-form:has(> table.data-table) .data-table tbody tr,
.table-scroll .data-table tbody tr { background: transparent; }

/* ═══════════════════════════════════════════════════════════════
   ملء الشاشة مع أي نسبة تكبير
   وحدة vh بتقيس النافذة الحقيقية ومابتتأثرش بالتكبير. يعني مع
   zoom 70% كان الهيكل بيرسم 100vh وبعدين يتصغّر لـ70% — فيفضل
   ثلث الشاشة تحت فاضي أبيض. القسمة على النسبة بتظبّطه.
   ═══════════════════════════════════════════════════════════════ */
.dashboard-layout { height: calc(100vh / var(--app-zoom)); }
.login-body { height: calc(100vh / var(--app-zoom)); }

/* الموبايل: الهيكل بيبقى عمودي وبيستخدم dvh عشان شريط المتصفح */
@media (max-width: 900px) {
  .dashboard-layout { height: calc(100dvh / var(--app-zoom)); }
}

/* خانة الإدخال في صندوق showPrompt */
.app-prompt-input {
  width: 100%; margin: 14px 0 4px; padding: 10px 12px;
  border: 1px solid #cbd5e1; border-radius: 8px;
  font-family: inherit; font-size: 14px; outline: none;
}
.app-prompt-input:focus { border-color: var(--primary-color); }

/* صندوق الحقول الإضافية في نموذجي تسجيل وتعديل الطالب */
.custom-fields-box {
  margin-top: 18px; padding: 16px 18px 6px;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px;
}
.custom-fields-title {
  margin: 0 0 12px; font-size: 13.5px; font-weight: 700; color: #1e3a8a;
}

/* ═══════════════════════════════════════════════════════════════
   📊 مركز التقارير
   شريط الأقسام: نفس شكل باقي أشرطة التبويبات في البرنامج بالظبط
   (نسخة من .pp-subtab بكلاس مستقل عشان العزل)
   ============================================================ */
.rpt-subtab {
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    margin-right: 4px !important;
    letter-spacing: 0.3px !important;
    border-radius: 0 !important;
}

.rpt-subtab:hover {
    color: var(--primary-color, #2563eb) !important;
    background: #f1f5f9 !important;
    border-bottom-color: #94a3b8 !important;
}

.rpt-subtab.active {
    color: var(--primary-color, #2563eb) !important;
    border-bottom-color: var(--primary-color, #2563eb) !important;
    background: #eff6ff !important;
    font-weight: 700 !important;
}

.rpt-pane {
    padding: 8px 0 !important;
    animation: fadeInPane 0.2s ease-out;
}

/* ── بطاقات التقارير ────────────────────────────────────────── */
.rpt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.rpt-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    font-family: inherit;
}

.rpt-card:hover {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 6px 18px rgba(37, 99, 235, .10);
    transform: translateY(-2px);
}

.rpt-card h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.rpt-card p {
    margin: 0;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.6;
}

.rpt-card .rpt-card-go {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color, #2563eb);
}

.rpt-empty {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 13.5px;
}

/* ── لوحة البناء ────────────────────────────────────────────── */
.rpt-builder-head { padding: 18px 20px; }

/* 🐛 .btn-primary في البرنامج معمول أصلاً لنموذج الدخول فعرضه 100%.
      في شريط أدوات فيه 6 أزرار جنب بعض ده كان بيخلي زر "معاينة
      وطباعة" ياخد سطر كامل لوحده والباقي يتناثر تحته. هنا الأزرار
      بتاخد عرض محتواها زي أي شريط أدوات. */
#reports .btn-primary,
#reports .btn-secondary,
#rptPreviewModal .btn-primary,
#rptPreviewModal .btn-secondary {
    width: auto;
}

#reports .rpt-builder-head .btn-primary { padding: 9px 22px; }

.rpt-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.rpt-filters .form-group { margin: 0; }

.rpt-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.rpt-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rpt-actions button { padding: 7px 14px; font-size: 13px; }

.rpt-sep {
    width: 1px;
    align-self: stretch;
    background: #e2e8f0;
    margin: 0 2px;
}

.rpt-count {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.rpt-count small {
    display: block;
    font-weight: 500;
    color: #64748b;
    font-size: 11.5px;
    margin-top: 2px;
}

/* منتقي الأعمدة */
.rpt-colpicker {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rpt-colchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
    transition: all .15s ease;
}

.rpt-colchip input { margin: 0; cursor: pointer; }

.rpt-colchip.on {
    border-color: var(--primary-color, #2563eb);
    background: #eff6ff;
    color: #1e40af;
    font-weight: 600;
}

/* تنبيه القص */
.rpt-cap {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.7;
}

/* ── جدول النتائج ───────────────────────────────────────────── */
.rpt-table-wrap {
    max-height: 62vh;
    overflow: auto;
    border-radius: 14px;
}

.rpt-table { margin: 0; }

.rpt-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.rpt-table td, .rpt-table th { white-space: nowrap; }

/* 🐛 الأرقام السالبة كانت بتطلع "1,234.00-" لأن الجدول RTL فعلامة
      السالب بتروح لآخر السطر. الاتجاه LTR على خلية الرقم بس بيرجّع
      العلامة مكانها الصح "-1,234.00" من غير ما يأثر على أي نص عربي. */
.rpt-table td.rpt-num, .rpt-table th.rpt-num {
    text-align: center;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.rpt-table td.rpt-neg { color: #b91c1c; }

.rpt-table td.rpt-text { white-space: normal; min-width: 130px; }

.rpt-table tr.rpt-off td { opacity: .38; }

.rpt-table tfoot td {
    position: sticky;
    bottom: 0;
    background: #f1f5f9;
    font-weight: 800;
    color: #0f172a;
    border-top: 2px solid #cbd5e1;
    z-index: 2;
}

.rpt-pick { width: 34px; text-align: center; }

.rpt-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 11.5px;
    font-weight: 600;
}

/* ── ورقة الطباعة ───────────────────────────────────────────── */
.rpt-sheet { padding: 6px 10px; color: #0f172a; }

.rpt-sheet-head {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 2px solid #0f172a;
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.rpt-sheet-head img { height: 58px; width: auto; }

.rpt-sheet-head .rpt-sheet-title { flex: 1; text-align: center; }

.rpt-sheet-head h2 { margin: 0 0 2px; font-size: 19px; }
.rpt-sheet-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: #334155; }

.rpt-sheet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 11.5px;
    color: #475569;
    margin-bottom: 12px;
}

.rpt-sheet-meta span b { color: #0f172a; }

.rpt-sheet table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.rpt-sheet th, .rpt-sheet td {
    border: 1px solid #94a3b8;
    padding: 6px 8px;
    text-align: center;
}

.rpt-sheet td.rpt-num, .rpt-sheet tfoot td { direction: ltr; }
.rpt-sheet td.rpt-text { text-align: right; direction: rtl; }

.rpt-sheet thead th {
    background: #e2e8f0;
    font-weight: 700;
    color: #0f172a;
}

.rpt-sheet tbody tr:nth-child(even) td { background: #f8fafc; }

.rpt-sheet tfoot td {
    background: #e2e8f0;
    font-weight: 800;
    border-top: 2px solid #0f172a;
}

.rpt-sheet-foot {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #64748b;
    border-top: 1px solid #cbd5e1;
    padding-top: 8px;
}

@media (max-width: 768px) {
    .rpt-subtab { padding: 10px 14px !important; font-size: 13px !important; }
    .rpt-grid { grid-template-columns: 1fr; }
    .rpt-table-wrap { max-height: 55vh; }
}

/* البحث داخل نتيجة التقرير */
.rpt-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.rpt-search input {
    flex: 1;
    min-width: 200px;
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    background: #f8fafc;
}

.rpt-search input:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    background: #fff;
}

.rpt-search button { padding: 7px 13px; font-size: 12.5px; }

.rpt-search-info {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color, #2563eb);
    min-width: 84px;
}

/* ═══════════════════════════════════════════════════════════════
   🎨 تصميم تقرير — المصمّم
   جدول بيتبني بالإيد جوّه البرنامج. الكلاسات كلها بادئة rdz-
   عشان تفضل معزولة تماماً عن أي جدول تاني في البرنامج.
   ============================================================ */
.rdz-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
}

.rdz-name {
    flex: 1;
    min-width: 200px;
    padding: 9px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: #0f172a;
    background: #f8fafc;
}

.rdz-name:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    background: #fff;
}

.rdz-bar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.rdz-bar-actions button { padding: 7px 14px; font-size: 13px; }

.rdz-status {
    flex-basis: 100%;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    min-height: 16px;
}

.rdz-status.dirty { color: #b45309; }
.rdz-status.saved { color: #166534; }
.rdz-status.err   { color: #b91c1c; }

/* الأقسام القابلة للطي */
.rdz-fold {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    padding: 4px 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
}

.rdz-caret { transition: transform .2s ease; color: #94a3b8; }
.rdz-fold.closed .rdz-caret { transform: rotate(-90deg); }
.rdz-fold-body { padding-top: 14px; }
.rdz-fold-body.hidden { display: none; }

.rdz-checks {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* شبكة إعدادات الورقة ملزوقة في رأس القسم مش تحتها فراغ زيادة */
#rdzPaperBox .rpt-filters { margin-top: 0; }

/* الملاحظات: صندوق عريض بعرض البطاقة، مش بعرض حقل عادي */
#rdzSignBox .form-group textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.8;
    resize: vertical;
}

/* قائمة نوع العمود لازم يبان فيها النص مش السهم بس */
.rdz-colops select { min-width: 54px; }

/* شريط أدوات الجدول */
.rdz-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.rdz-tools button { padding: 7px 14px; font-size: 13px; }

.rdz-size {
    margin-right: auto;
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.rdz-tip {
    margin: 12px 0 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.7;
}

/* ── شبكة التصميم ──────────────────────────────────────────── */
.rdz-grid-wrap {
    max-height: 60vh;
    overflow: auto;
    border-radius: 14px;
}

.rdz-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.rdz-grid th, .rdz-grid td {
    border-left: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 0;
    background: #fff;
}

.rdz-grid th:first-child, .rdz-grid td:first-child { border-right: 1px solid #e2e8f0; }

.rdz-grid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f1f5f9;
    padding: 8px;
    vertical-align: top;
    min-width: 150px;
}

.rdz-grid thead th.rdz-corner {
    min-width: 46px;
    width: 46px;
    text-align: center;
    font-size: 12px;
    color: #64748b;
    vertical-align: middle;
}

.rdz-colhead { display: flex; flex-direction: column; gap: 6px; }

.rdz-colhead input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    color: #0f172a;
    background: #fff;
    text-align: center;
}

.rdz-colhead input:focus { outline: none; border-color: var(--primary-color, #2563eb); }

.rdz-colops { display: flex; gap: 3px; align-items: center; justify-content: center; }

.rdz-colops select {
    flex: 1;
    min-width: 0;
    padding: 3px 4px;
    font-size: 11px;
    font-family: inherit;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #475569;
}

.rdz-mini {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    flex: 0 0 auto;
}

.rdz-mini:hover { background: #eff6ff; border-color: var(--primary-color, #2563eb); color: #1e40af; }
.rdz-mini.on { background: #dbeafe; border-color: #2563eb; color: #1e40af; font-weight: 700; }
.rdz-mini.danger:hover { background: #fee2e2; border-color: #dc2626; color: #b91c1c; }

/* خلايا الإدخال */
.rdz-grid td input {
    width: 100%;
    border: none;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #0f172a;
    background: transparent;
}

.rdz-grid td input:focus {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: -2px;
    background: #eff6ff;
    border-radius: 4px;
}

.rdz-grid td.rdz-al-center input { text-align: center; }
.rdz-grid td.rdz-al-left  input { text-align: left; direction: ltr; }
.rdz-grid td.rdz-al-right input { text-align: right; }

.rdz-rownum {
    width: 46px;
    text-align: center;
    background: #f8fafc !important;
    font-size: 12px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    position: relative;
}

.rdz-rownum span { display: block; padding: 8px 2px; }

.rdz-rownum .rdz-mini {
    position: absolute;
    inset-inline-end: 2px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .15s ease;
}

.rdz-grid tbody tr:hover .rdz-rownum .rdz-mini { opacity: 1; }

.rdz-grid tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #f1f5f9;
    font-weight: 800;
    color: #0f172a;
    border-top: 2px solid #cbd5e1;
    padding: 9px 10px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.rdz-grid tfoot td.rdz-foot-label { direction: rtl; }

.rdz-empty {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 13.5px;
}

/* ── التوقيعات ─────────────────────────────────────────────── */
.rdz-signs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.rdz-sign {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rdz-sign input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
}

.rdz-sign-row { display: flex; align-items: center; gap: 8px; }
.rdz-sign-row label { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 5px; margin: 0; }

/* ── نافذة الاستيراد ───────────────────────────────────────── */
.rdz-imp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.rdz-imp-mode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.rdz-imp-mode .form-group { margin: 0; }

/* ── بطاقات التصاميم المحفوظة ──────────────────────────────── */
.rdz-card { position: relative; }

.rdz-card .rdz-card-del {
    position: absolute;
    inset-inline-start: 10px;
    top: 10px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #fff;
    color: #dc2626;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    font-family: inherit;
}

.rdz-card .rdz-card-del:hover { background: #fee2e2; }

.rdz-card small { font-size: 11.5px; color: #94a3b8; }

/* ── ورقة الطباعة الخاصة بالتصميم ──────────────────────────── */
.rdz-sheet-notes {
    margin-top: 14px;
    font-size: 12px;
    color: #334155;
    line-height: 1.9;
    white-space: pre-wrap;
    text-align: right;
}

.rdz-sheet-signs {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    justify-content: space-around;
    page-break-inside: avoid;
    break-inside: avoid;
}

.rdz-sheet-sign {
    min-width: 150px;
    text-align: center;
    font-size: 12.5px;
}

.rdz-sheet-sign b { display: block; color: #0f172a; margin-bottom: 4px; }
.rdz-sheet-sign .rdz-sign-name { color: #334155; margin-bottom: 6px; min-height: 15px; }
.rdz-sheet-sign .rdz-sign-line {
    border-bottom: 1px solid #0f172a;
    height: 26px;
    margin: 0 8px;
}

@media (max-width: 768px) {
    .rdz-grid-wrap { max-height: 52vh; }
    .rdz-grid thead th { min-width: 130px; }
    .rdz-signs { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   📲 شريط "ثبّت التطبيق"
   بيظهر بس لما المتصفح يقول إن الموقع قابل للتثبيت (أو على iOS
   اللي مالوش زرار تثبيت فبنشرح الخطوة). القاعدة: مايظهرش أبداً
   جوّه التطبيق المتثبّت نفسه.
   ============================================================ */
.install-bar {
    margin-top: 16px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: #1e40af;
    line-height: 1.7;
    text-align: right;
}

.install-bar.hidden { display: none; }

.install-bar span { flex: 1; }

.install-btn {
    flex: 0 0 auto;
    padding: 7px 16px;
    border: none;
    border-radius: 9px;
    background: var(--primary-bg, #2563eb);
    background-color: var(--primary-color, #2563eb);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    width: auto;
}

.install-btn:hover { filter: brightness(1.08); }

.install-x {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.install-x:hover { background: #dbeafe; color: #1e40af; }

/* ═══════════════════════════════════════════════════════════════
   📱 طبقة الموبايل الموحّدة — الواجهة منظمة زي الديسكتوب
   ═══════════════════════════════════════════════════════════════
   المشاكل اللي بتتصلّح هنا:

   ١) أشرطة التبويبات الفرعية (شؤون الطلاب، الحسابات، الموظفين…)
      كانت متكتوبة inline بـ flex-wrap:wrap، فعلى شاشة 360px الـ٩
      أزرار كانوا بيتوزّعوا على ٧ سطور — كل زرار تحت التاني وشكلهم
      مبعتر. دلوقتي بقوا صف واحد بيتسحب يمين وشمال بالإصبع.

   ٢) خانات الجداول كان الكلام فيها بيتكسر تحت بعضه لأن مافيش
      nowrap على td. دلوقتي كل خانة سطر واحد، والجدول بيتمدد على
      قد محتواه والكارت بيتسحب أفقياً — في الوضع الرأسي والأفقي.

   ٣) رأس القسم كان بينزل عمودي (٩٤px من ٣٦٠px في الوضع الأفقي!).
      دلوقتي العنوان والبادچ وزر التحديث في سطر واحد.

   ٤) الكروت كانت لازقة في بعض من غير مسافات واضحة.

   القواعد كلها جوّه max-width:900px — الديسكتوب مابيتأثرش بحرف.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ═══ ١) أشرطة التبويبات الفرعية: صف واحد يتسحب ═══
     !important ضروري لأن الـ flex-wrap مكتوب inline في الـHTML */
  .subtab-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* ظل على الحافة بيقول "في تبويبات كمان على الجنب" — وبيختفي
       لوحده لما توصل للآخر (حيلة background-attachment: local) */
    background-image:
      linear-gradient(to left,  #fff 55%, rgba(255,255,255,0)),
      linear-gradient(to right, #fff 55%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(15,23,42,0.13), rgba(15,23,42,0)),
      linear-gradient(to left,  rgba(15,23,42,0.13), rgba(15,23,42,0));
    background-position: left center, right center, left center, right center;
    background-size: 30px 100%, 30px 100%, 15px 100%, 15px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .subtab-bar::-webkit-scrollbar { height: 0; width: 0; }

  .subtab-bar > button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: end;
    padding: 11px 15px !important;
    font-size: 13.5px !important;
    min-height: 44px;
  }

  /* ═══ ٢) الجداول: كل خانة سطر واحد + سحب أفقي ═══ */
  .table-card,
  .rpt-table-wrap,
  .rdz-grid-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* الجدول بيتمدد على قد محتواه (مش بينضغط في عرض الشاشة) */
  .data-table {
    width: max-content !important;
    min-width: 100% !important;
  }
  .data-table th,
  .data-table td {
    white-space: nowrap !important;
    padding: 11px 13px;
    font-size: 13px;
  }
  /* الخانات اللي فيها نص طويل (ملاحظات/عنوان) بتفضل تلف عشان
     الجدول مايبقاش عرضه ٣ آلاف بكسل — بس بحد أقصى معقول */
  .data-table td.cell-long,
  .data-table td[data-long] {
    white-space: normal !important;
    min-width: 180px;
    max-width: 240px;
  }

  /* شريط التمرير الأفقي أوضح على الموبايل */
  .table-card::-webkit-scrollbar { height: 7px; }
  .table-card::-webkit-scrollbar-thumb { background: #94a3b8; }

  /* رأس الجدول اللي جوّه الكارت (العنوان + البحث) بيفضل ثابت
     وإنت بتسحب يمين وشمال — مايتحركش مع الجدول.
     ⚠️ من غير width محدد بالقصد: أول ما حطينا max-content الكارت
     اتوسّع لـ1096px (عرض حقل البحث الطبيعي) وطلع سحب فاضي على
     الجنب. الـsticky لوحده كفاية إنه يفضل ثابت. */
  .table-card > .table-header {
    position: sticky;
    right: 0;
    box-sizing: border-box;
  }

  /* ═══ ٣) رأس القسم: سطر واحد بدل ما ينزل عمودي ═══ */
  .section-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px;
  }
  .section-header h2 {
    font-size: 17px !important;
    margin-inline-end: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .section-header .badge,
  .section-header .tag,
  .section-header .section-refresh-btn { flex: 0 0 auto; }

  /* ═══ ٤) مسافات واضحة بين الكروت ═══ */
  .table-card,
  .card-form,
  .rpt-pane > .card-form,
  .chart-card {
    margin-bottom: 14px;
  }
  .main-content > *:last-child { margin-bottom: 0; }

  /* رأس الكارت: العنوان والبادچ والبحث مايتفرّقوش على ٣ سطور */
  .table-header {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  .table-header h3 { flex: 1 1 auto; min-width: 0; font-size: 14px; }
  .table-header .search-input { flex: 1 1 160px; width: auto !important; min-width: 140px; }

  /* ═══ ٥) شبكة الإحصائيات: عمودين مريحين بدل عمود واحد طويل ═══ */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px;
  }
  .stat-card { padding: 13px 10px; }
  .stat-label { font-size: 11.5px; }
  .stat-value { font-size: 16px; }
}

/* ═══ الشاشات الضيقة جداً (≤ 380px) ═══ */
@media (max-width: 380px) {
  .subtab-bar > button { padding: 10px 12px !important; font-size: 13px !important; }
  .data-table th, .data-table td { padding: 10px 11px; font-size: 12.5px; }
  .section-header h2 { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   📱↔️ الوضع الأفقي (Landscape) — الشاشة قصيرة جداً في الارتفاع
   المشكلة: على 800×360 كان الشريط العلوي + رأس القسم بياكلوا
   نص الشاشة قبل ما تشوف أي بيانات. هنا بنضغط كل حاجة رأسياً
   ونسيب أكبر مساحة ممكنة للجدول.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 500px) {
  .mobile-topbar { padding: 6px 12px; }
  .mobile-menu-btn { min-width: 38px; min-height: 38px; font-size: 18px; }
  .mobile-topbar-title { font-size: 13.5px; }

  .main-content { padding: 10px 12px; }
  .section-header { margin-bottom: 9px; }
  .section-header h2 { font-size: 15.5px !important; }

  .subtab-bar > button { padding: 8px 14px !important; min-height: 38px; font-size: 13px !important; }

  .table-card, .card-form { margin-bottom: 10px; }
  .table-header { padding: 8px 12px !important; }
  .data-table th, .data-table td { padding: 7px 12px; }

  /* الفورمات بترجع صفوف أفقية — في عرض كفاية هنا */
  .form-row { flex-direction: row !important; flex-wrap: wrap !important; gap: 10px; }
  .form-row .form-group { flex: 1 1 210px !important; min-width: 210px !important; }
  input, select, textarea { min-height: 38px; }
  .btn-primary, .btn-success, .btn-danger, .btn-link { min-height: 38px; padding: 8px 16px; }

  /* الدرج الجانبي بيبقى قابل للتمرير لأن الشاشة قصيرة */
  .sidebar { overflow-y: auto; padding: 10px 12px; }
  .menu-item { padding: 8px 13px; font-size: 14px; }

  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  .stat-card { padding: 9px 8px; }
}

/* ══ نهاية طبقة الموبايل ══
   (أي حاجة تحت السطر ده تخص كل المقاسات — مش الفون بس) */

/* ═══════════════════════════════════════════════════════════════
   🔘 الزرار الثانوي — .btn-secondary
   ───────────────────────────────────────────────────────────────
   🐛 الكلاس ده كان مستعمل في **٢٦ زرار** في تبويب التقارير وتصميم
      تقرير (رجوع · الأعمدة · تحديد الكل · Excel · Word · معاينة ·
      إلغاء الفلاتر · إضافة عمود/صف …) — وماكانش معرّف في أي مكان
      في الـCSS خالص.

      يعني كل الأزرار دي كانت بتطلع بشكل المتصفح الافتراضي: رمادي
      باهت بحواف مربعة وخط مختلف — شكل غريب وسط برنامج كل أزراره
      متنسّقة. وده اللي المستخدم شافه: «أزرار الرجوع وغيره مش جميل
      زي باقي البرنامج».

   الحل: الزرار الثانوي بياخد نفس لغة تصميم الزرار الأساسي —
   نفس نصف القطر والحركة والظل والضغط — بس بسطح محايد بدل الأزرق،
   عشان يفضل واضح إنه إجراء مساعد مش الإجراء الرئيسي.
   ═══════════════════════════════════════════════════════════════ */

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  background: #fff;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm, 8px);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: transform var(--dur-fast, .12s) var(--ease-out, ease),
              box-shadow var(--dur-base, .2s) var(--ease-out, ease),
              background-color var(--dur-fast, .12s) ease,
              border-color var(--dur-fast, .12s) ease,
              color var(--dur-fast, .12s) ease;
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: var(--elev-2, 0 4px 10px rgba(15, 23, 42, 0.10));
}

/* نفس إحساس الضغط بتاع باقي أزرار البرنامج */
.btn-secondary:active {
  transform: translateY(0) scale(0.975);
  box-shadow: var(--elev-1, 0 1px 3px rgba(15, 23, 42, 0.10));
  background: #f1f5f9;
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--primary-color, #2563eb);
  outline-offset: 2px;
}

.btn-secondary:disabled,
.btn-secondary[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* موجة الضغط — زي .btn-primary بالظبط بس بلون غامق على سطح فاتح */
.btn-secondary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(37, 99, 235, 0.14), transparent 62%);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: opacity var(--dur-slow, .4s) ease, transform var(--dur-slow, .4s) var(--ease-out, ease);
}
.btn-secondary:active::after { opacity: 1; transform: scale(1.6); transition: none; }

/* ── زرار «رجوع» بيتميّز شوية: بيرجّعك لبرّه فمالوش نفس وزن
      باقي الأزرار اللي بتعمل حاجة في الشاشة نفسها ── */
.btn-secondary.rpt-back,
.btn-secondary.rdz-back {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
  font-weight: 700;
}
.btn-secondary.rpt-back:hover,
.btn-secondary.rdz-back:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #1e293b;
}

/* الأزرار جنب بعض في أشرطة الأدوات: نفس الارتفاع مهما كان
   جوّاها إيموجي أو نص طويل */
#reports .btn-secondary,
#reports .btn-primary,
#reports .btn-success {
  min-height: 38px;
  vertical-align: middle;
}

/* على الموبايل: مساحة لمس مريحة زي باقي الأزرار */
@media (max-width: 900px) {
  .btn-secondary { min-height: 44px; padding: 11px 16px; }
}

/* Admissions uses the same application font and compact controls as Student Affairs. */
#stuAdmissions { min-width:0; font-family:var(--app-font); font-size:.875rem; line-height:1.7; }
#stuAdmissions > .table-card { padding:24px; min-width:0; max-width:100%; overflow-wrap:anywhere; }
#stuAdmissions h3 { font:700 1.125rem/1.6 var(--app-font); margin:0 0 8px; }
#stuAdmissions p { font:inherit; line-height:1.8; margin:8px 0; }
#stuAdmissions label { font:600 .875rem/1.6 var(--app-font); margin:0; }
#stuAdmissions button { width:auto; max-width:100%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:9px 20px; min-height:40px; margin:0; font:600 .875rem/1.5 var(--app-font); white-space:normal; overflow-wrap:anywhere; }
#stuAdmissions select { width:260px; min-width:0 !important; max-width:100%; flex:0 1 auto; min-height:42px; font:inherit; background:var(--field-bg,#fff); color:var(--app-text-color); }
#stuAdmissions #admissionStageFilter { flex-basis:260px; }
#stuAdmissions .sp-field select { width:100%; max-width:420px; height:auto; flex:0 0 auto; }
#admissionStaffList,#admissionStaffDetail { min-width:0; max-width:100%; }
#admissionStaffList > div:first-child { padding:12px 0; }
#admissionStaffList > div > strong,#admissionStaffList > div > span,#admissionStaffList [data-admission-request] > strong,#admissionStaffList [data-admission-request] > span { min-width:0; overflow-wrap:anywhere; }
#admissionStaffDetail:not(:empty) { margin-top:22px; padding-top:20px; border-top:1px solid #e2e8f0; }
#admissionStaffDetail .admission-details-grid { display:grid; gap:12px; margin-top:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
#admissionStaffDetail .admission-details-grid > div { min-width:0; }
#admissionStaffDetail .admission-details-grid strong { display:block; font-size:.8125rem; color:var(--muted,#475569); }
@media(max-width:600px) { #stuAdmissions > .table-card { padding:16px; } #stuAdmissions #admissionStageFilter { flex-basis:220px; } #stuAdmissions button { padding:9px 16px; } }

/* Parent result publication, shared on desktop and mobile. */
.pr-panel{padding:22px}.pr-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}.pr-heading h3{margin:0 0 8px}.pr-heading p,.pr-note{color:#526579;font-size:13px;line-height:1.8}.pr-heading p{margin:0}.pr-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}.pr-panel fieldset{border:1px solid #dce5ed;border-radius:12px;padding:18px;margin:18px 0}.pr-panel legend{padding:0 8px;font-weight:700}.pr-label{display:flex;flex-direction:column;gap:8px;max-width:620px;margin:12px 0}.pr-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.pr-choice-grid label{display:flex;gap:10px;align-items:center;background:#f4f8fb;border:1px solid #dce5ed;border-radius:8px;padding:12px;font-size:14px}.pr-choice-grid input{width:18px;height:18px;flex:0 0 18px}.pr-separated{border-top:1px solid #dce5ed;padding-top:16px;margin-top:16px}.pr-preview-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:20px 0}.pr-preview-controls label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:180px}.pr-error{color:#b42318;background:#fff2f0;padding:12px;border-radius:8px}.pr-preview-label{color:#7d4e00;background:#fff5d6;padding:12px;border-radius:8px}.pr-result-card{border:1px solid #d8e3ec;border-top:5px solid #176e88;border-radius:12px;padding:24px;margin-top:18px;background:white;color:#19334a}.pr-result-card header{text-align:center}.pr-result-card h3{font-size:23px;margin:12px 0}.pr-result-card h4{font-size:21px;margin:8px 0}.pr-eyebrow{color:#176e88;font-size:13px;font-weight:700}.pr-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.pr-summary>div{padding:14px;background:#eef7f8;border-radius:8px;display:flex;gap:8px;flex-direction:column;text-align:center}.pr-summary span{color:#4d6575;font-size:13px}.pr-summary strong{font-size:18px}.pr-table-wrap{overflow-x:auto}.pr-result-card table{border-collapse:collapse;width:100%;margin:18px 0}.pr-result-card th,.pr-result-card td{border:1px solid #dce5ed;padding:12px;text-align:right;vertical-align:top}.pr-result-card thead{background:#edf4f8}.pr-result-card small{display:block;font-weight:400;color:#526579;font-size:12px;margin-top:6px}.pr-mark{display:flex;justify-content:space-between;gap:16px;padding:5px 0}.pr-mark strong{white-space:nowrap}.pr-result-card footer{text-align:center;margin-top:18px}#ppResultsStatus:empty,#prContextStatus:empty{display:none}
@media(max-width:650px){.pr-panel{padding:12px}.pr-panel fieldset{padding:12px}.pr-result-card{padding:12px}.pr-summary{grid-template-columns:repeat(2,1fr)}.pr-choice-grid{grid-template-columns:1fr}.pr-preview-controls{align-items:stretch;flex-direction:column}.pr-heading h3{font-size:19px}.pr-result-card th,.pr-result-card td{padding:8px}.pr-mark{flex-direction:column;gap:3px}}
@media print{.pr-result-card{border-radius:0;margin:0;padding:10px;font-size:12px;break-inside:auto}.pr-result-card tr{break-inside:avoid}.pr-table-wrap{overflow:visible}.pr-result-card header{break-after:avoid}.pr-summary{grid-template-columns:repeat(4,1fr)}.pr-mark{flex-direction:row}.pr-result-card table{font-size:12px}}

.control-policy-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.control-help, #controlPolicyMessage { color: #475569; font-size: 13px; line-height: 1.8; }
#controlPolicyMessage { margin-top: 12px; }
#control input[dir="auto"], #control select[dir="auto"] { text-align: start; }
#control bdi, .pr-result-card bdi { unicode-bidi: isolate; }
.pr-result-card[dir="ltr"] { text-align: left; }
.pr-result-card[dir="ltr"] th { text-align: left; }
/* Integrated school bus trips: readable controls on a phone and isolated map stacking. */
.bus-panel { padding:20px; margin-bottom:16px; min-width:0; }
.bus-help { color:#526176; font-size:13px; line-height:1.8; margin:10px 0; }
.bus-status { color:#124880; background:#edf5ff; border:1px solid #c8def7; border-radius:10px; padding:12px 14px; line-height:1.8; }
.bus-status:empty { display:none; }
.bus-error { color:#9e231f; background:#fff1f0; border-color:#f2bbb5; }
.bus-form-row,.bus-title-row,.bus-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.bus-form-row { align-items:flex-end; }
.bus-form-row label { flex:1 1 190px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.bus-form-row select,.bus-search-label input { padding:11px; border:1px solid #cbd5e1; border-radius:9px; width:100%; min-width:0; box-sizing:border-box; background:#fff; }
.bus-title-row { justify-content:space-between; }
.bus-panel button { width:auto; min-height:44px; white-space:normal; }
.bus-summary { display:flex; gap:10px 20px; flex-wrap:wrap; margin:14px 0 20px; line-height:1.8; }
.bus-summary strong { flex:1 0 100%; font-size:18px; }
.bus-passenger-state { font-weight:700; color:#0f6847; }
.bus-map { height:340px; max-height:55vh; width:100%; border:1px solid #cbd5e1; border-radius:12px; z-index:0; background:#eaf0f6; direction:ltr; }
.bus-map .leaflet-control-attribution { font:11px/1.4 Arial,sans-serif; max-width:100%; }
.bus-roster { display:grid; gap:12px; margin-top:16px; }
.bus-roster-card { border:1px solid #dce4ee; border-radius:12px; padding:14px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.bus-roster-card > div:first-child { display:grid; gap:6px; flex:1 1 230px; min-width:0; overflow-wrap:anywhere; }
.bus-roster-card small { color:#64748b; font-size:12px; }
.bus-roster-card .bus-actions { flex:0 1 auto; }
.bus-roster-card .bus-actions button { border:1px solid #ccd8e8; min-width:76px; padding:9px 12px; }
.bus-search-label { display:grid; gap:8px; }
.bus-checks { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.bus-check { display:flex; align-items:center; gap:8px; border:1px solid #dce4ee; border-radius:9px; padding:10px; }
.bus-check input { width:20px; height:20px; }
.bus-empty { color:#64748b; line-height:1.8; }
#busConfirmModal { z-index:3050; }
#busConfirmModal textarea { width:100%; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:8px; padding:10px; margin:12px 0; font:inherit; }
#busConfirmModal p { white-space:pre-wrap; line-height:1.9; }
@media (max-width:600px) {
  .bus-panel { padding:14px; }
  .bus-map { height:290px; }
  .bus-actions { width:100%; }
  .bus-actions button { flex:1 1 120px; }
  .bus-summary { gap:8px; flex-direction:column; }
  .bus-form-row > button { width:100%; }
  #busTrips .section-header { flex-wrap:wrap; gap:10px; }
}

/* ═══════════════════════════════════════════════════════════════
   📋 قوائم الفصول (class-lists-ui.js)
   ═══════════════════════════════════════════════════════════════ */
.cl-host { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.oi-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:18px 0; }
.oi-summary .stat-value { font-size:24px; }
.oi-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:20px; }
.oi-table-scroll { overflow-x:auto; margin-top:12px; }
.oi-stock-table { min-width:1200px; }
.oi-movement-table { min-width:950px; }
.oi-stock-alert { color:#b45309; font-size:13px; font-weight:700; }
.oi-pager { margin:12px 0 28px; }
.oi-filters { margin-top:14px; }
.oi-filters label { display:flex; align-items:center; gap:8px; }
.oi-filters input,.oi-filters select { padding:8px; border:1px solid #cbd5e1; border-radius:8px; font:inherit; }
.oi-pager button:disabled { opacity:.45; cursor:default; }
.cl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.cl-toolbar label { font-weight: 700; color: #334155; font-size: 14px; }
.cl-select { padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; min-width: 220px; background: #fff; font-family: inherit; }
.cl-muted { color: #64748b; font-size: 12.5px; }
.cl-note { color: #6b7280; font-size: 13px; padding: 10px 0; }
.cl-note.small { font-size: 12px; padding: 4px 0 10px; }
.cl-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.cl-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin: 8px 0; }
.cl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.cl-card { background: linear-gradient(180deg, #f8fafc, #fff); border: 1px solid #e2e8f0; border-top: 4px solid var(--primary-color, #2563eb); border-radius: 14px; padding: 18px 14px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: box-shadow .2s, transform .2s; }
.cl-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,0.08); transform: translateY(-2px); }
.cl-card-name { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.3; word-break: break-word; }
.cl-card-total { font-size: 13px; color: #475569; }
.cl-card-total strong { font-size: 18px; color: var(--primary-color-dark, #1d4ed8); }
.cl-more, .cl-btn { font-family: inherit; cursor: pointer; border-radius: 8px; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border: 1px solid #cbd5e1; background: #fff; color: #334155; transition: background .15s, border-color .15s; }
.cl-more { width: 100%; background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.cl-more:hover, .cl-btn:hover { background: #f1f5f9; }
.cl-more:hover { background: #dbeafe; }
.cl-btn.cl-primary { background: var(--primary-bg, #2563eb); border-color: transparent; color: #fff; }
.cl-btn.cl-primary.dirty { box-shadow: 0 0 0 3px rgba(37,99,235,0.25); }
.cl-btn.cl-toggle.active { background: #1e293b; border-color: #1e293b; color: #fff; }
.cl-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.cl-section-title { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0; }
.cl-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cl-option { font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s, background .15s; }
.cl-option:hover { border-color: #93c5fd; }
.cl-option.active { border-color: var(--primary-color, #2563eb); background: #eff6ff; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
.cl-option-icon { font-size: 24px; }
.cl-option-title { font-weight: 800; font-size: 14px; color: #0f172a; }
.cl-option-hint { font-size: 11.5px; color: #64748b; }
.cl-panel { border-top: 1px solid #f1f5f9; padding-top: 14px; }
.cl-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-count { background: #f1f5f9; color: #334155; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; }
.cl-count strong { font-size: 14px; margin-inline-start: 2px; }
.cl-count.boys { background: #eff6ff; color: #1d4ed8; }
.cl-count.girls { background: #fdf2f8; color: #9d174d; }
.cl-count.ok, .cl-count.st-present { background: #dcfce7; color: #166534; }
.cl-count.off, .cl-count.st-absent { background: #fee2e2; color: #991b1b; }
.cl-count.st-late { background: #fef3c7; color: #92400e; }
.cl-count.st-excused { background: #e0e7ff; color: #3730a3; }
.cl-count.st-none { background: #f1f5f9; color: #64748b; }
.cl-group { font-size: 13.5px; margin: 14px 0 8px; color: #334155; }
.cl-group.boys { color: #1d4ed8; }
.cl-group.girls { color: #9d174d; }
.cl-table-wrap { margin-bottom: 10px; }
.cl-table td, .cl-table th { padding: 9px 12px; }
.cl-name { font-family: inherit; background: none; border: none; padding: 0; color: #1d4ed8; font-weight: 700; font-size: 13px; cursor: pointer; text-align: inherit; }
.cl-name:hover { text-decoration: underline; }
.cl-badge { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; background: #f1f5f9; color: #475569; }
.cl-badge.ok { background: #dcfce7; color: #166534; }
.cl-badge.off { background: #fee2e2; color: #991b1b; }
.cl-badge.view { background: #e0e7ff; color: #3730a3; }
.cl-bus { font-weight: 700; color: #0f172a; }
.cl-unsubscribed td { color: #64748b; }
.cl-unset td { background: #fafafa; }
.cl-status { font-weight: 700; font-size: 12.5px; }
.cl-status.st-none { color: #94a3b8; }
.cl-status-select, .cl-note-input { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; font-family: inherit; }
.cl-note-input { width: 100%; min-width: 140px; }
.cl-att-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cl-att-date label { font-weight: 700; font-size: 13px; }
.cl-att-date .cl-select { min-width: 160px; }
.cl-days { margin-bottom: 12px; }
.cl-days-title { font-size: 12.5px; font-weight: 700; color: #475569; margin-bottom: 6px; }
.cl-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.cl-chip { font-family: inherit; cursor: pointer; flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; align-items: center; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 11.5px; color: #334155; }
.cl-chip.active { border-color: var(--primary-color, #2563eb); background: #eff6ff; }
.cl-chip-day { font-weight: 700; }
.cl-chip-stats { color: #64748b; }
.cl-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.cl-bus-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.cl-overlay { position: fixed; inset: 0; z-index: 1500; background: rgba(15,23,42,0.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cl-sheet { background: #fff; border-radius: 14px; width: 100%; max-width: 620px; max-height: 90vh; overflow: auto; padding: 20px 22px; box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
.cl-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cl-sheet-head h3 { margin: 0; font-size: 18px; color: #0f172a; }
.cl-x { font-family: inherit; border: none; background: #f1f5f9; border-radius: 8px; width: 34px; height: 34px; font-size: 20px; cursor: pointer; color: #475569; }
.cl-fields { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 0; margin: 0; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.cl-fields dt, .cl-fields dd { margin: 0; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.cl-fields dt { background: #f8fafc; color: #475569; font-weight: 700; }
.cl-fields dd { color: #0f172a; word-break: break-word; }
.cl-sheet-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 600px) {
  .cl-card-name { font-size: 19px; }
  .cl-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cl-option { padding: 10px 4px; }
  .cl-option-title { font-size: 12.5px; text-align: center; }
  .cl-option-hint { display: none; }
  .cl-fields { grid-template-columns: 1fr; }
  .cl-fields dt { border-bottom: none; padding-bottom: 2px; }
}
@media print { .cl-overlay { display: none !important; } }

/* ═══ 👩‍🏫 حساب المعلم من الموارد البشرية (teacher-link-ui.js) ═══ */
.tl-card { background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.tl-card h4 { margin:0 0 4px; font-size:14px; color:#1e40af; }
.tl-note { font-size:12.5px; color:#475569; margin:0 0 10px; line-height:1.8; }
.tl-empty { font-size:13px; color:#92400e; background:#fffbeb; border-radius:8px; padding:8px 12px; margin:6px 0; }
.tl-legacy { font-size:13px; color:#92400e; margin:0 0 10px; }
.tl-current { display:flex; flex-wrap:wrap; align-items:center; gap:6px; background:#fff; border:1px solid #bfdbfe; border-radius:10px; padding:8px 12px; margin-bottom:10px; font-size:13.5px; }
.tl-current .tl-change { width:auto; margin-inline-start:auto; padding:6px 12px; }
.tl-list { display:grid; gap:6px; max-height:320px; overflow:auto; padding:2px; }
.tl-item { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #dbeafe; border-radius:10px; padding:8px 12px; cursor:pointer; }
.tl-item:hover { border-color:#93c5fd; }
.tl-item.is-chosen { border-color:#2563eb; box-shadow:0 0 0 2px #2563eb inset; }
.tl-item.is-disabled { cursor:not-allowed; opacity:.7; background:#f8fafc; }
.tl-item input { width:auto; margin:0; flex:0 0 auto; }
.tl-names { display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-width:0; }
.tl-en { font-weight:700; color:#0f172a; direction:ltr; unicode-bidi:isolate; max-width:100%; overflow-wrap:anywhere; }
.tl-names .tl-en { align-self:flex-start; }
.tl-ar { font-size:12.5px; color:#475569; }
.tl-badge { flex:0 0 auto; font-size:11.5px; padding:2px 8px; border-radius:999px; background:#f1f5f9; color:#64748b; }
.tl-badge.ok { background:#dcfce7; color:#166534; }
.tl-badge.warn { background:#fef3c7; color:#92400e; }
@media (max-width:560px) { .tl-item { flex-wrap:wrap; } .tl-names { flex-basis:calc(100% - 40px); } .tl-badge { margin-inline-start:26px; } }
.tl-chosen:empty { display:none; }
.tl-chosen { margin:10px 0 0; font-size:13px; color:#1e3a8a; font-weight:600; }
.hr-field-hint { display:block; font-size:11.5px; color:#64748b; margin-top:4px; }
.hr-account-note { background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:8px 12px; margin:0 0 12px; font-size:12.5px; line-height:1.8; color:#1e3a8a; }
.hr-name-en { display:block; width:fit-content; max-width:100%; font-size:12px; color:#475569; font-weight:400; direction:ltr; unicode-bidi:isolate; }
.hr-account-badge { display:inline-block; margin-top:3px; font-size:11px; padding:1px 8px; border-radius:999px; background:#dbeafe; color:#1e40af; font-weight:600; }
.hr-account-badge.off { background:#fee2e2; color:#991b1b; }
.user-hr-link { display:block; margin-top:5px; font-size:12px; color:#475569; }
.user-hr-link.missing { color:#b45309; }

/* ═══ 🔎 إدارة المستخدمين ← «بحث وتعديل مستخدم» (users-directory-ui.js) ═══ */
#usersPaneAdd.usr-pane, #usersPaneSearch.usr-pane { padding: 0 !important; }
.users-filter-bar { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:14px 16px 4px; }
.users-filter-bar .users-filter-field { flex:1 1 170px; min-width:150px; margin-bottom:10px; }
.users-filter-bar .users-search-field { flex:2 1 260px; }
.users-filter-bar label { font-size:12.5px; }
.users-filter-bar select, .users-filter-bar input { width:100%; min-width:0; height:44px; box-sizing:border-box; font-size:14px; line-height:1.5; }
#clsUnassigned .card-form .form-group { margin-bottom:0; }
#clsUnassigned .card-form .form-actions { margin-top:0; }
#clsUnassigned .table-header { flex-wrap:wrap; justify-content:flex-start; gap:8px; }
#clsUnassigned .table-header h3 { flex:1 0 100%; white-space:normal; }
#clsUnassigned .table-header button { flex:0 1 auto; white-space:normal; }
#clsUnassigned .table-header .btn-success { flex-basis:100%; }
#clsUnassigned .table-card > .form-actions { gap:8px; justify-content:flex-start; }
#clsUnassigned .table-card > .form-actions select { flex:1 1 160px; min-width:0; padding:8px; }
#clsUnassigned .table-card > .form-actions .btn-primary { width:auto; }
.users-extra-filters { display:contents; }
.users-extra-filters.hidden { display:none !important; }
.users-filter-error { flex:1 1 100%; margin:0 0 8px; color:#b91c1c; font-size:13px; }
.users-table-wrap { overflow-x:auto; }
.users-table .users-group-row th { background:#eff6ff; color:#1e3a8a; text-align:start; font-size:13.5px; font-weight:700; padding:9px 14px; border-top:2px solid #bfdbfe; }
.users-table .users-group-row .users-group-count { color:#475569; font-weight:600; margin-inline-start:6px; }
.users-table tr.is-inactive td { background:#f8fafc; color:#64748b; }
.user-status-badge { display:inline-block; margin-inline-start:6px; font-size:11px; padding:1px 8px; border-radius:999px; background:#fee2e2; color:#991b1b; font-weight:600; vertical-align:middle; }
.user-username { direction:ltr; unicode-bidi:isolate; font-family:inherit; }
.user-details { display:block; margin-top:5px; font-size:12px; color:#475569; line-height:1.7; }
.user-actions { display:flex; flex-wrap:wrap; gap:6px; }
/* التعديل جاي من «بحث وتعديل»: زرار «رجوع لقائمة البحث» بيعمل الإلغاء نفسه، فمش محتاجين الاتنين */
#userFormBackBtn:not(.hidden) + #userFormCancelBtn { display:none !important; }
.user-actions button { width:auto !important; padding:5px 10px !important; font-size:12.5px !important; white-space:nowrap; }
.user-actions .user-action-toggle { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; border-radius:8px; cursor:pointer; }
.user-actions .user-action-toggle.on { background:#ecfdf5; color:#166534; border-color:#bbf7d0; }
@media (max-width: 720px) {
  .users-filter-bar { padding:12px 12px 2px; gap:8px; }
  .users-filter-bar .users-filter-field { flex:1 1 100%; }
  /* الموبايل: كل حساب كارت (الاسم واليوزر ثم التفاصيل ثم الأزرار) بدل جدول بيتسحب بالعرض */
  #usersPaneSearch .table-card { overflow-x: visible !important; }
  #usersPaneSearch .users-table { width: 100% !important; min-width: 0 !important; }
  #usersPaneSearch .users-table thead { display: none; }
  #usersPaneSearch .users-table, #usersPaneSearch .users-table tbody, #usersPaneSearch .users-table tr { display: block; width: 100%; }
  #usersPaneSearch .users-table tr:not(.users-group-row) { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
  #usersPaneSearch .users-table td { display: block; border: none !important; padding: 0 !important; white-space: normal !important; font-size: 13px; }
  #usersPaneSearch .users-table td:nth-child(1) { display: none; }
  #usersPaneSearch .users-table td:nth-child(2) { grid-column: 1; }
  #usersPaneSearch .users-table td:nth-child(3) { grid-column: 2; align-self: center; color: #475569; }
  #usersPaneSearch .users-table td:nth-child(4), #usersPaneSearch .users-table td:nth-child(5) { grid-column: 1 / -1; }
  #usersPaneSearch .users-table td:nth-child(5) { margin-top: 6px; }
  #usersPaneSearch .users-table .users-group-row { display: block; }
  #usersPaneSearch .users-table .users-group-row th { display: block; white-space: normal !important; }
}
/* HR attendance history: bounded controls and an independently scrollable table. */
.hr-att-history { margin-bottom: 20px; min-width: 0; }
.hr-att-history-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; align-items: end; padding: 16px 20px; }
.hr-att-history-filters .form-group { min-width: 0; margin: 0; }
.hr-att-history-filters input, .hr-att-history-filters select { width: 100%; min-width: 0; box-sizing: border-box; height: 44px; }
.hr-att-history-filters button { height: 44px; width: 100%; margin: 0; }
.hr-att-history-note, #empAttHistMsg, .hr-att-history-summary { margin: 0; padding: 0 20px 14px; line-height: 1.8; }
.hr-att-history-note { color: #475569; font-size: 13px; }
.hr-att-history-summary p { margin: 0 0 8px; }
.hr-att-history-summary > div { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.hr-att-history-table { overflow-x: auto; max-width: 100%; }
.hr-att-history-table table { min-width: 860px; }
.hr-att-history-table td small { display: block; color: #64748b; }
.hr-att-history-table td:last-child { white-space: normal; overflow-wrap: anywhere; max-width: 260px; }
.hr-att-history-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding: 14px 20px; }
/* Payroll attendance snapshots remain readable on desktop, small screens and print. */
#payrollRunModal .modal-content { min-width: 0; }
#payrollRunModal .payroll-table-scroll { max-width: 100%; overflow-x: auto; }
.payroll-attendance-detail { min-width: 220px; text-align: start; font-size: 11px; line-height: 1.7; }
.payroll-attendance-detail p { margin: 3px 0; overflow-wrap: anywhere; }
.payroll-attendance-detail summary { cursor: pointer; color: #334155; font-weight: 600; }
@media print {
  #payrollRunModal .payroll-table-scroll { overflow: visible; }
  .payroll-attendance-detail { min-width: 0; font-size: 9px; }
  .payroll-attendance-detail details::details-content { display: block; content-visibility: visible; }
}

/* Bus collection: stage/name/class picker stays bounded on small screens. */
.bus-payment-picker { margin-block: 16px; padding-block-end: 14px; border-bottom: 1px solid var(--border-color, #dce3ec); }
.bus-payment-picker .form-group { min-width: 0; }
.bus-payment-picker select { width: 100%; max-width: 100%; text-overflow: ellipsis; }
.bus-payment-picker-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 8px; }
.bus-payment-picker-status [role="status"] { flex: 1 1 220px; }
.bus-payment-picker-status button { min-height: 36px; }