/* =====================================================================
   الإدارة الرقمية — هوية بصرية
   الأخضر العُماني العميق + النحاس، على ورق بارد فاتح
   ===================================================================== */
:root {
  --green-900: #0B3A2C;
  --green-800: #0E4C3A;
  --green-700: #16624B;
  --green-100: #DCE9E2;
  --brass:     #C08A2E;
  --brass-soft:#EBD9B4;
  --ink:       #14201B;
  --ink-soft:  #5D6E66;
  --paper:     #F1F4F1;
  --card:      #FFFFFF;
  --line:      #DEE5E0;
  --crimson:   #A32E27;
  --crimson-bg:#FBEAE8;
  --steel:     #2E6E8E;
  --amber:     #B7791F;
  --amber-bg:  #FDF3DC;
  --ok:        #1F7A4C;
  --ok-bg:     #E4F3EA;
  --radius:    10px;
  --shadow:    0 1px 2px rgba(20,32,27,.06), 0 4px 16px rgba(20,32,27,.05);
  --sidebar-w: 252px;
  --topbar-h: 58px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Tajawal', 'Segoe UI', Tahoma, 'Noto Naskh Arabic', sans-serif;
  font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .display-face {
  font-family: 'Cairo', 'Tajawal', Tahoma, sans-serif; font-weight: 700; letter-spacing: -0.2px;
}
a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-900); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------ التخطيط */
.app-shell { display: flex; min-height: 100vh; align-items: flex-start; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--green-900);
  color: #E7EFE9; position: fixed; inset-inline-start: 0; top: 0; bottom: 0; z-index: 1050;
  display: flex; flex-direction: column; transition: transform .22s ease;
  overflow: hidden;
}
.sidebar-brand { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.09); }
.sidebar-brand .mark {
  width: 38px; height: 38px; border-radius: 9px; background: var(--brass);
  color: var(--green-900); display: grid; place-items: center;
  font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 17px;
}
.sidebar-brand .name { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 16px; color: #fff; }
.sidebar-brand .sub { font-size: 11px; color: rgba(255,255,255,.55); }
.sidebar-school {
  padding: 10px 18px; font-size: 12px; color: var(--brass-soft);
  background: rgba(0,0,0,.18); border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-nav { padding: 10px 0 24px; overflow-y: auto; flex: 1; }
.sidebar-nav .nav-label {
  font-size: 10.5px; letter-spacing: .8px; color: rgba(255,255,255,.38);
  padding: 14px 18px 6px; text-transform: uppercase;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  color: rgba(255,255,255,.78); font-size: 14px; border-inline-start: 3px solid transparent;
  text-decoration: none; transition: background .15s, color .15s;
}
.sidebar-nav a i { font-size: 16px; width: 20px; text-align: center; opacity: .85; }
.sidebar-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar-nav a.active {
  background: linear-gradient(90deg, rgba(192,138,46,.16), transparent);
  color: #fff; border-inline-start-color: var(--brass); font-weight: 600;
}
.sidebar-foot { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: rgba(255,255,255,.45); }

.main {
  flex: 1 1 auto; margin-inline-start: var(--sidebar-w);
  display: flex; flex-direction: column;
  min-width: 0; width: calc(100% - var(--sidebar-w)); min-height: 100vh;
}
.app-shell > .main:first-child { width: 100%; }
/* عندما لا توجد قائمة جانبية (تسجيل الدخول، صفحات الخطأ) يمتد المحتوى بعرض الشاشة */
.app-shell > .main:first-child { margin-inline-start: 0; }
.topbar {
  background: #fff; border-bottom: 1px solid var(--line); padding: 10px 22px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 1040;
  min-height: var(--topbar-h);
}
.topbar .page-title { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 17px; margin: 0; }
.topbar .page-sub { font-size: 12px; color: var(--ink-soft); margin: 0; }
.content { padding: 22px; flex: 1; min-width: 0; max-width: 100%; }
.content-narrow { max-width: 920px; }

/* ------------------------------------------------------------ البطاقات */
.card-da {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 18px; overflow: visible; min-width: 0;
}
.card-da > .card-head {
  padding: 13px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.card-da > .card-head h2, .card-da > .card-head h3 { font-size: 15px; margin: 0; }
.card-da > .card-body { padding: 18px; }
.card-da > .card-body.tight { padding: 0; }

/* بطاقات الأرقام */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.stat::after { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 3px; background: var(--green-700); }
.stat.warn::after { background: var(--amber); }
.stat.bad::after { background: var(--crimson); }
.stat.good::after { background: var(--ok); }
.stat.brass::after { background: var(--brass); }
.stat .label { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.stat .value { font-family: 'Cairo', sans-serif; font-size: 27px; font-weight: 700; line-height: 1.25; }
.stat .hint { font-size: 11.5px; color: var(--ink-soft); }
.stat a.stretched-link { color: inherit; }

/* ------------------------------- شريط اليوم الدراسي (العنصر المميز) */
.day-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; }
.day-strip .period {
  flex: 1 0 84px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  padding: 9px 8px; text-align: center; position: relative;
}
.day-strip .period .no {
  font-family: 'Cairo', sans-serif; font-size: 12px; color: var(--ink-soft);
  border-bottom: 1px dashed var(--line); padding-bottom: 5px; margin-bottom: 6px;
}
.day-strip .period .cnt { font-family: 'Cairo', sans-serif; font-size: 19px; font-weight: 700; }
.day-strip .period .tag { font-size: 10.5px; color: var(--ink-soft); }
.day-strip .period.has-cover { border-color: var(--brass); background: linear-gradient(180deg, #fff, #FDF7EC); }
.day-strip .period.has-gap { border-color: var(--crimson); background: linear-gradient(180deg, #fff, var(--crimson-bg)); }
.day-strip .period.now { box-shadow: 0 0 0 2px rgba(192,138,46,.35); }
.day-strip .period.now::before {
  content: 'الآن'; position: absolute; top: -8px; inset-inline-start: 50%; transform: translateX(50%);
  background: var(--brass); color: #fff; font-size: 9.5px; padding: 1px 7px; border-radius: 20px;
}

/* ------------------------------------------------------------ الجداول */
.table-da { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; }
.table-da td { overflow-wrap: break-word; }
.table-da thead th {
  background: #F6F8F6; text-align: right; font-weight: 600; font-size: 12.5px; color: var(--ink-soft);
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table-da tbody td { padding: 10px 12px; border-bottom: 1px solid #EDF1EE; vertical-align: middle; }
.table-da tbody tr:hover { background: #FAFCFA; }
.table-da tbody tr:last-child td { border-bottom: none; }
.table-da .num { font-variant-numeric: tabular-nums; }
/* الجدول العريض يتجاوز البطاقة على الشاشات الكبيرة أيضاً — كجدول
   الصلاحيات: أحد عشر عموداً. فيُسمح بالتمرير الأفقي دائماً لا على
   الشاشات الصغيرة وحدها. */
.table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------ عناصر */
.btn-da { background: var(--green-800); border: 1px solid var(--green-800); color: #fff; border-radius: 8px; padding: 7px 16px; font-size: 14px; }
.btn-da:hover { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.btn-brass { background: var(--brass); border: 1px solid var(--brass); color: #fff; border-radius: 8px; padding: 7px 16px; }
.btn-brass:hover { background: #A97521; border-color: #A97521; color: #fff; }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 7px 14px; }
.btn-ghost:hover { background: #F5F8F6; color: var(--green-900); }
.btn-sm-da { padding: 3px 10px; font-size: 12.5px; border-radius: 6px; }

.badge-da { display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 20px; font-weight: 600; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-bad { background: var(--crimson-bg); color: var(--crimson); }
.badge-warn { background: var(--amber-bg); color: var(--amber); }
.badge-info { background: #E6F0F5; color: var(--steel); }
.badge-neutral { background: #EEF1EF; color: var(--ink-soft); }
.badge-brass { background: #F7ECD8; color: #8A6318; }

.form-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.form-control, .form-select {
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px; padding: 7px 11px; background: #fff;
}
.form-control:focus, .form-select:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(22,98,75,.12); }
.form-text { font-size: 12px; color: var(--ink-soft); }
.required::after { content: ' *'; color: var(--crimson); }

.section-title {
  font-family: 'Cairo', sans-serif; font-size: 13px; color: var(--ink-soft); font-weight: 700;
  display: flex; align-items: center; gap: 8px; margin: 22px 0 10px;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.empty-state { text-align: center; padding: 44px 20px; color: var(--ink-soft); }
.empty-state i { font-size: 34px; color: var(--line); display: block; margin-bottom: 10px; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--ink-soft); font-weight: 500; font-size: 13px; }
.kv dd { margin: 0; }

.alert-da { border-radius: var(--radius); border: 1px solid var(--line); padding: 11px 15px; font-size: 14px; margin-bottom: 14px; }
.alert-success { background: var(--ok-bg); border-color: #BFE0CC; color: #14532D; }
.alert-danger  { background: var(--crimson-bg); border-color: #F0C7C3; color: #7B211B; }
.alert-warning { background: var(--amber-bg); border-color: #EDD9A7; color: #7A5610; }
.alert-info    { background: #E9F1F5; border-color: #C7DCE7; color: #1F4D64; }

.roster-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #EDF1EE; cursor: pointer; }
.roster-item:hover { background: #FAFCFA; }
.roster-item input { width: 19px; height: 19px; }
.roster-item.marked { background: var(--crimson-bg); }
.roster-item .rowname { flex: 1; font-weight: 500; }

.timetable-grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.timetable-grid th, .timetable-grid td { border: 1px solid var(--line); padding: 6px; text-align: center; }
.timetable-grid th { background: #F6F8F6; font-weight: 600; }
.timetable-grid td.busy { background: #EEF4F0; }
.timetable-grid td.free { background: #FDF7EC; color: var(--brass); }
.timetable-grid td .subj { font-weight: 600; display: block; }
.timetable-grid td .cls { font-size: 11px; color: var(--ink-soft); }

.qr-card {
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 14px; text-align: center;
  background: #fff; break-inside: avoid;
}
.qr-card img { width: 150px; height: 150px; }
.qr-card .title { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 15px; margin-top: 6px; }
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

.nav-tabs-da { border-bottom: 1px solid var(--line); gap: 2px; }
.nav-tabs-da .nav-link {
  border: none; border-bottom: 2px solid transparent; color: var(--ink-soft);
  font-size: 14px; padding: 8px 14px; border-radius: 0;
}
.nav-tabs-da .nav-link.active { color: var(--green-800); border-bottom-color: var(--brass); background: transparent; font-weight: 600; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 14px; }
.toolbar .form-control, .toolbar .form-select { min-width: 140px; }

.mini-bar { height: 6px; background: #EEF1EF; border-radius: 4px; overflow: hidden; min-width: 70px; }
.mini-bar span { display: block; height: 100%; background: var(--green-700); }
.mini-bar.brass span { background: var(--brass); }
.mini-bar.bad span { background: var(--crimson); }

.print-header { display: none; }
.chart-box { position: relative; height: 280px; }
.chart-box.sm { height: 210px; }

/* ------------------------------------------------------------ الطباعة */
@media print {
  .sidebar, .topbar, .no-print, .btn, button { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0 !important; }
  .card-da { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
  .print-header { display: block !important; text-align: center; margin-bottom: 14px; }
  body { background: #fff; font-size: 12pt; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* ------------------------------------------------------------ الجوال */
@media (max-width: 991px) {
  .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: translateX(0); box-shadow: -8px 0 30px rgba(0,0,0,.25); }
  .main { margin-inline-start: 0; }
  .content { padding: 14px; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(11,58,44,.5); z-index: 1035; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =====================================================================
   صفحة تسجيل الدخول
   ===================================================================== */
.auth-shell {
  position: fixed; inset: 0; z-index: 10;
  display: flex; overflow-y: auto;
  background: var(--card);
}
.auth-brand {
  flex: 0 0 46%; min-height: 100%; position: relative; color: #fff; padding: 46px 44px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(155deg, var(--green-800) 0%, var(--green-900) 60%, #082A20 100%);
}
/* نقش خفيف يعطي عمقاً دون تشتيت */
.auth-brand::before {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 1px, transparent 1px 46px),
    radial-gradient(circle at 82% 12%, rgba(192,138,46,.20), transparent 46%);
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand .logo { display: flex; align-items: center; gap: 13px; }
.auth-brand .logo .mark {
  width: 48px; height: 48px; border-radius: 12px; background: var(--brass);
  color: var(--green-900); display: grid; place-items: center;
  font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 20px; flex: none;
}
.auth-brand .logo .name { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.3; }
.auth-brand .logo .en { font-size: 11.5px; opacity: .55; letter-spacing: .4px; }
.auth-brand h2 {
  color: #fff; font-size: clamp(24px, 2.4vw, 33px); line-height: 1.55; margin: 0 0 14px;
}
.auth-brand h2 .accent { color: var(--brass-soft); }
.auth-brand p { opacity: .72; font-size: 14.5px; max-width: 420px; margin: 0; line-height: 1.9; }
.auth-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.auth-chips span {
  border: 1px solid rgba(255,255,255,.20); border-radius: 20px;
  padding: 4px 13px; font-size: 12.5px; opacity: .88;
  background: rgba(255,255,255,.04);
}
.auth-foot { font-size: 11.5px; opacity: .42; display: flex; align-items: center; gap: 7px; }

.auth-form-side {
  flex: 1; min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px; background: var(--card);
}
.auth-form { width: 100%; max-width: 372px; }
.auth-form h1 { font-size: 25px; margin: 0 0 6px; }
.auth-form .lead { color: var(--ink-soft); font-size: 14px; margin: 0 0 26px; }
.auth-form .field { margin-bottom: 17px; }
.auth-form .form-label { font-size: 13.5px; margin-bottom: 6px; }
.auth-form .form-control {
  height: 47px; border-radius: 10px; font-size: 15px; padding: 0 14px;
  background: #fff; border: 1.5px solid var(--line); transition: border-color .15s, box-shadow .15s;
}
.auth-form .form-control:focus {
  border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(22,98,75,.13);
}
/* منع تلوين المتصفح لحقول الإكمال التلقائي */
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  transition: background-color 9999s ease-in-out 0s;
}
/* زر إظهار كلمة المرور داخل الحقل */
.pw-wrap { position: relative; }
/* خصائص فيزيائية متعمدة: الحقل dir=ltr بينما الحاوية rtl،
   فالخصائص المنطقية تتعارض وتضع الزر فوق النص. */
.pw-wrap .form-control { padding-left: 48px; padding-right: 14px; }
.pw-toggle {
  position: absolute; left: 6px; right: auto; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: none; background: transparent; border-radius: 8px;
  color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; font-size: 16px;
}
.pw-toggle:hover { background: #F1F5F2; color: var(--green-800); }
.auth-form .btn-login {
  width: 100%; height: 47px; border-radius: 10px; font-size: 15.5px; font-weight: 600;
  background: var(--green-800); border: 1px solid var(--green-800); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s;
}
.auth-form .btn-login:hover { background: var(--green-900); }
.auth-form .hint {
  font-size: 12.5px; color: var(--ink-soft); margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line); line-height: 1.8;
}
.auth-mobile-logo { display: none; text-align: center; margin-bottom: 26px; }

@media (max-width: 991px) {
  .auth-brand { display: none; }
  .auth-mobile-logo { display: block; }
  .auth-form-side { background: var(--paper); }
  .auth-form {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 28px 24px; box-shadow: var(--shadow);
  }
}

/* =====================================================================
   التحديد الجماعي والتمرير
   ===================================================================== */

/* شريط الإجراءات — مثبّت أسفل الشاشة فلا يُقصّ ولا يختفي مهما طالت القائمة */
.bulk-bar {
  position: fixed; bottom: 16px;
  inset-inline-start: calc(var(--sidebar-w) + 22px); inset-inline-end: 22px;
  z-index: 1035;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  background: var(--green-900); color: #fff;
  border-radius: 12px; padding: 12px 18px;
  box-shadow: 0 10px 34px rgba(11, 58, 44, .38);
  border: 1px solid rgba(255,255,255,.10);
}
.bulk-bar.show { display: flex; animation: bulkIn .16s ease-out; }
@keyframes bulkIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.bulk-bar .count { font-family: 'Cairo', sans-serif; font-size: 14px; }
.bulk-bar .count b { color: var(--brass-soft); font-size: 17px; }
.bulk-bar .btn-ghost { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #fff; }
.bulk-bar .btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.bulk-bar .btn-ghost.text-danger { color: #FFB4AE !important; }
.bulk-bar .btn-da { background: var(--brass); border-color: var(--brass); }
.bulk-bar .btn-da:hover { background: #A97521; border-color: #A97521; }

/* الصف المحدد */
.table-da tbody tr.row-selected { background: #FDF7EC; }
.table-da tbody tr.row-selected:hover { background: #FBF1DE; }
.table-da input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--green-700); }

/* الجداول تمرّر مع الصفحة كاملة — بلا صندوق تمرير داخلي.
   تنبيه: في CSS إذا كان أحد المحورين ليس visible يُحسب الآخر auto،
   لذا نترك overflow: visible تماماً على الشاشات الواسعة. */
.table-scroll { overflow: visible; }
/* على الشاشات الضيقة فقط نسمح بتمرير أفقي داخلي */
@media (max-width: 991px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.table-da.sticky-head thead th {
  position: sticky; top: var(--topbar-h); z-index: 3;
  background: #F1F5F2;
  box-shadow: inset 0 -2px 0 var(--line), 0 2px 8px rgba(20,32,27,.05);
}

/* الصفّ الأول كان يختفي تحت رأس الجدول.
   و`.table-wrap` تعلن `overflow-x: auto`، ويحسب المتصفح معها
   `overflow-y: auto` — فتصير حاوية تمرير قائمة بنفسها. و`top` حينئذ
   يُقاس من أعلى الحاوية لا من أعلى الصفحة، فيهبط الرأس ٥٨ بكسل داخلها
   ويغطّي أول صفّ تغطيةً دائمة لا يزيلها التمرير.
   فالإزاحة صفر داخل الحاوية: الرأس يلتصق بحافتها هي. */
.table-wrap > .table-da.sticky-head thead th,
.table-scroll > .table-da.sticky-head thead th { top: 0; }

/* أشرطة تمرير عريضة وواضحة */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 15px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #E6ECE8; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: #9FB3A8; border-radius: 10px; border: 3px solid #E6ECE8;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--green-700); }
.table-scroll::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.card-body::-webkit-scrollbar { width: 12px; height: 12px; }
.table-scroll::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.card-body::-webkit-scrollbar-track { background: #EDF1EE; border-radius: 8px; }
.table-scroll::-webkit-scrollbar-thumb,
.card-body::-webkit-scrollbar-thumb {
  background: #B9C7BF; border-radius: 8px; border: 2px solid #EDF1EE;
}
.table-scroll::-webkit-scrollbar-thumb:hover,
.card-body::-webkit-scrollbar-thumb:hover { background: var(--green-700); }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); border-radius: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); }
* { scrollbar-width: thin; scrollbar-color: #9FB3A8 #E6ECE8; }
html { scrollbar-width: auto; }
.sidebar { scrollbar-color: rgba(255,255,255,.22) transparent; }

/* تمرير سلس + مساحة أعلى العناصر عند القفز إليها */
html { scroll-behavior: smooth; }
.content { scroll-padding-top: calc(var(--topbar-h) + 20px); }
html { scroll-padding-top: calc(var(--topbar-h) + 20px); }

/* زر العودة إلى الأعلى */
.to-top {
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 1025;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-800); color: #fff; border: none;
  display: none; place-items: center; font-size: 19px;
  box-shadow: 0 4px 16px rgba(11,58,44,.30); cursor: pointer;
}
.to-top.show { display: grid; }
.to-top:hover { background: var(--green-900); }

@media (max-width: 991px) {
  :root { --topbar-h: 54px; }
  .bulk-bar { inset-inline: 12px; bottom: 12px; }
  .to-top { bottom: 84px; }
}
@media print {
  .table-scroll { overflow: visible; }
  .table-da.sticky-head thead th { position: static; }
  .bulk-bar, .to-top, .crumbs { display: none !important; }
}

/* =====================================================================
   مسار التنقّل وزر الرجوع
   ===================================================================== */
.crumb-back {
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 13px 5px 11px; color: var(--green-800); font-weight: 600;
  text-decoration: none; box-shadow: var(--shadow); transition: background .14s, border-color .14s;
}
.crumb-back:hover { background: var(--green-800); border-color: var(--green-800); color: #fff; text-decoration: none; }
.crumb-back i { font-size: 14px; }
.crumb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.crumb {
  color: var(--ink-soft); text-decoration: none; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.crumb:hover { background: #EDF2EF; color: var(--green-800); text-decoration: none; }
.crumb.current { color: var(--ink); font-weight: 600; cursor: default; }
.crumb-arrow { font-size: 10px; color: #B9C7BF; }
@media (max-width: 767px) {
  .crumb:not(.current):not(:first-of-type) { display: none; }
  .crumb-arrow:not(:last-of-type) { display: none; }
}

/* مقبض السحب لإعادة ترتيب الحقول */
.drag-handle { cursor: grab; color: #B9C7BF; text-align: center; }
.drag-handle:active { cursor: grabbing; }
tr.dragging { opacity: .45; background: var(--brass-soft) !important; }
.form-select.is-matched { border-color: #9CC5B0; background: #F4FAF6; }

/* =====================================================================
   رسائل النظام — تظهر كإشعار عائم لا يمكن تفويته
   ===================================================================== */
.toast-stack {
  position: fixed; top: calc(var(--topbar-h) + 12px);
  inset-inline-start: 50%; transform: translateX(50%);
  z-index: 1080; width: min(560px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast-da {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 11px;
  background: #fff; border: 1px solid var(--line); border-inline-start: 5px solid var(--green-700);
  border-radius: 10px; padding: 13px 16px; font-size: 14.5px; line-height: 1.75;
  box-shadow: 0 12px 38px rgba(20,32,27,.20);
  animation: toastIn .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes toastIn { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast-da.hide { animation: toastOut .2s forwards; }
@keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } }
.toast-da i.ico { font-size: 19px; line-height: 1.4; }
.toast-da .body { flex: 1; }
.toast-da .close { background: none; border: none; color: var(--ink-soft); font-size: 17px; cursor: pointer; padding: 0 2px; }
.toast-da.success { border-inline-start-color: var(--ok); }
.toast-da.success i.ico { color: var(--ok); }
.toast-da.danger  { border-inline-start-color: var(--crimson); background: #FFF8F7; }
.toast-da.danger i.ico { color: var(--crimson); }
.toast-da.warning { border-inline-start-color: var(--amber); background: #FFFCF4; }
.toast-da.warning i.ico { color: var(--amber); }
.toast-da.info    { border-inline-start-color: var(--steel); }
.toast-da.info i.ico { color: var(--steel); }
@media (max-width: 991px) { .toast-stack { top: calc(var(--topbar-h) + 8px); } }
@media print { .toast-stack { display: none !important; } }
/* حقل ينتظر قيمة إلزامية */
.form-select.needs-value, .form-control.needs-value {
  border-color: var(--brass); background: #FDF7EC;
  box-shadow: 0 0 0 3px rgba(192,138,46,.12);
}
/* زر تأكيد الإجراءات المدمّرة — واضح ومقصود */
.btn-danger-solid {
  background: var(--crimson); border: 1px solid var(--crimson); color: #fff;
  border-radius: 8px; padding: 7px 18px; font-weight: 600;
}
.btn-danger-solid:hover { background: #8A241E; border-color: #8A241E; color: #fff; }

/* مجموعة أزرار التقدير في استمارة الزيارة */
.rate-group { display: flex; gap: 3px; flex-wrap: wrap; }
.rate-group .btn { font-size: 11.5px; padding: 3px 8px; border-radius: 6px; }
.rate-group .btn-check:checked + .btn {
  background: var(--green-800); border-color: var(--green-800); color: #fff; font-weight: 600;
}
.rate-group .btn-check:checked + .btn.lvl-low {
  background: var(--crimson); border-color: var(--crimson);
}

/* =====================================================================
   استمارة الزيارة الإشرافية — تخطيط مطابق للنموذج الرسمي
   ===================================================================== */
.form-sheet { font-size: 13px; }
.sheet-head { text-align: center; border-bottom: 2px solid var(--green-800); padding-bottom: 10px; margin-bottom: 14px; }
.sheet-head h2 { margin: 8px 0 4px; font-size: 19px; color: var(--green-900); }

.sheet-meta { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.sheet-meta th, .sheet-meta td { border: 1px solid #9AA9A1; padding: 6px 9px; font-size: 12.5px; }
.sheet-meta th { background: #EEF4F0; width: 15%; font-weight: 600; text-align: right; white-space: nowrap; }

.scale-key {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin: 10px 0; font-size: 12px; font-weight: 600;
}
.scale-key span { background: #F1F5F2; border: 1px solid var(--line); border-radius: 4px; padding: 3px 10px; }

.sheet-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.sheet-table th, .sheet-table td { border: 1px solid #9AA9A1; padding: 6px 8px; font-size: 12.5px; vertical-align: middle; }
.sheet-table thead th { background: #DDE8E1; text-align: center; font-weight: 700; }
.sheet-table .domain-cell {
  background: #EEF4F0; font-weight: 700; text-align: center; vertical-align: middle;
  writing-mode: horizontal-tb; width: 14%;
}
.sheet-table .std-cell { background: #F7FAF8; text-align: center; font-size: 12px; }
.sheet-table .rating-cell { text-align: center; font-size: 15px; }
.sheet-table .rating-label { font-size: 10.5px; color: var(--ink-soft); font-weight: 400; }

.sheet-notes { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.sheet-notes th, .sheet-notes td { border: 1px solid #9AA9A1; padding: 8px 10px; font-size: 12.5px; }
.sheet-notes th { background: #EEF4F0; text-align: right; font-weight: 700; }
.sheet-notes td { white-space: pre-wrap; min-height: 54px; height: 54px; vertical-align: top; }
.sheet-notes td.tall { height: 68px; }

.sheet-sign { width: 100%; border-collapse: collapse; margin-top: 20px; }
.sheet-sign td { padding: 10px 12px; font-size: 12.5px; width: 33%; vertical-align: top; }
.sheet-sign .line { border-bottom: 1px dotted #6B7A73; margin-top: 22px; }

.summary-strip {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  background: #F1F5F2; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.summary-strip .brass { color: var(--brass); font-size: 15px; }
.summary-strip .dist { display: flex; gap: 5px; flex-wrap: wrap; margin-inline-start: auto; }

@media print {
  .form-sheet { border: none !important; box-shadow: none !important; }
  .sheet-table { page-break-inside: auto; }
  .sheet-table tr { page-break-inside: avoid; }
  .sheet-head h2 { font-size: 16pt; }
}

/* =====================================================================
   شريط التصفية المتقدم
   ===================================================================== */
.filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.filter-bar .form-select, .filter-bar .form-control { max-width: 210px; height: 38px; }
.filter-bar .f-search { position: relative; flex: 1 1 260px; max-width: 340px; }
.filter-bar .f-search i {
  position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); pointer-events: none; font-size: 14px;
}
.filter-bar .f-search .form-control { max-width: none; padding-inline-start: 36px; }
.filter-bar .chip-count { margin-inline-start: auto; font-size: 13px; color: var(--ink-soft); }

/* قائمة الإجراءات المتسلسلة في اللائحة */
.steps-list { margin: 0; padding-inline-start: 20px; font-size: 13px; line-height: 1.85; }
.steps-list li { padding: 1px 0; }
.steps-list li::marker { color: var(--brass); font-weight: 700; }
.reg-table td { vertical-align: top; }

/* =====================================================================
   قائمة بحث منسدلة (combo) — للأسماء الطويلة
   ===================================================================== */
.combo { position: relative; }
.combo-list {
  display: none; position: absolute; inset-inline: 0; top: calc(100% + 3px); z-index: 1050;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 8px 26px rgba(20,32,27,.16); max-height: 260px; overflow-y: auto;
}
.combo-list.open { display: block; }
.combo-item { padding: 8px 12px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid #F1F5F2; }
.combo-item:last-child { border-bottom: none; }
.combo-item:hover, .combo-item.active { background: var(--green-800); color: #fff; }

/* خانة الملاحظة تتمدد مع الكتابة */
.note-box { resize: vertical; min-height: 32px; line-height: 1.6; overflow: hidden; }
.note-box:focus { min-height: 64px; }
/* ترقيم خطوات النموذج */
.step-no {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--green-800); color: #fff;
  font-size: 13px; font-weight: 700; margin-inline-end: 7px; vertical-align: -3px;
}

/* تنبيه: overflow-wrap: anywhere يجعل أصغر عرض ممكن للعمود صفراً،
   فينهار العمود إلى حرف واحد في كل سطر. الصحيح break-word. */
.table-da th, .table-da td { word-break: normal; overflow-wrap: break-word; }

/* =====================================================================
   جدول المستخدمين — أعمدة ثابتة لا تنهار
   ===================================================================== */
/* أعمدةٌ بالنِّسَب لا بالبكسل، فتتّسع للشاشة ولا تدفع الجدولَ خارجها.
   وكان لها عرضٌ ثابتٌ مجموعُه ١٠٦٠ بكسل، فظهر تمريرٌ أفقيٌّ على الحاسب
   نفسه. والعلاجُ تقليلُ الأعمدة لا توسيعُ الجدول: دُمج «التواصل» في
   خليّة المستخدم، فصارت سبعةً تسع الشاشة. */
.users-table { table-layout: fixed; width: 100%; }
/* عمود التحديد حُذف مع شريط الإجراءات الجماعية، فعادت مساحتُه للاسم */
.users-table .col-user    { width: 38%; }
.users-table .col-role    { width: 22%; }
.users-table .col-login   { width: 13%; }
.users-table .col-status  { width: 17%; }
.users-table .col-act     { width: 96px; }
/* ومع عمود المدرسة تُقلَّص النِّسَب دون أن يُزاد عرضُ الجدول */
.users-table.with-school .col-user   { width: 30%; }
.users-table.with-school .col-role   { width: 18%; }
.users-table.with-school .col-school { width: 16%; }
.users-table.with-school .col-login  { width: 11%; }
.users-table.with-school .col-status { width: 15%; }
.users-table .col-act { text-align: left; }
.users-table .col-act .row-actions { display: flex; gap: 3px; justify-content: flex-start;
  flex-wrap: nowrap; }
.users-table .col-act .btn-sm-da { padding: 4px 7px; }

/* المحاذاة: خلايا الرأس والجسم بنفس الحشو والمحاذاة الرأسية،
   وخلايا التواصل بالإنجليزية تُحاذى لليسار داخل عمود عربي */
.users-table th, .users-table td { padding: 10px 12px; vertical-align: middle; text-align: right; }
.users-table th { vertical-align: middle; }
.users-table .col-login, .users-table .col-status { text-align: center; }
.users-table .col-status .u-sub { white-space: normal; line-height: 1.4; }
.users-table .col-act { text-align: left; }
.users-table .col-contact .u-sub { justify-content: flex-start; direction: ltr; text-align: left; }
.users-table td { vertical-align: middle; }
.users-table .u-name { font-weight: 600; font-size: 14px; line-height: 1.5;
  white-space: normal; word-break: normal; overflow-wrap: break-word; }
.users-table .u-sub {
  font-size: 12px; color: var(--ink-soft); line-height: 1.7;
  display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
}
.users-table .u-username {
  font-family: ui-monospace, Menlo, monospace; direction: ltr;
  background: #F1F5F2; border-radius: 4px; padding: 0 6px;
}
.users-table .u-warn { font-size: 11.5px; color: var(--crimson); margin-top: 3px; }
/* سطر التواصل: الهاتف ثم البريد، كلاهما لاتينيّ فيُعزل اتجاهُه */
.users-table .u-contact { font-size: 11.5px; color: var(--muted, #6b7280); margin-top: 3px;
  direction: ltr; text-align: right; }
.users-table .u-contact .u-dot { color: #C3CDD6; }
.users-table .u-contact .u-mail { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%; }
@media (max-width: 1200px) {
  .users-table .col-school, .users-table .col-contact { display: none; }
}

/* شريط التعبئة التلقائية في استمارة الزيارة */
.auto-fill-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #FDF7EC; border: 1px solid var(--brass-soft);
  border-radius: 9px; padding: 10px 14px; margin-bottom: 4px;
}
.auto-fill-bar .form-text { flex: 1 1 320px; font-size: 12.5px; }
.table-da tbody tr.row-warn { background: #FFFCF4; }
.table-da tbody tr.row-warn td:first-child { border-inline-start: 3px solid var(--amber); }

/* جدول الهوية والربط */
.link-table { table-layout: fixed; }
.link-table td { vertical-align: middle; }
.link-table .form-select-sm { font-size: 12.5px; }
.stat.sel { outline: 2px solid var(--green-800); outline-offset: -2px; }
a.stat { text-decoration: none; color: inherit; transition: transform .12s; }
a.stat:hover { transform: translateY(-1px); }
/* حقل إلزامي بلا مصدر */
.form-select.is-missing, .form-control.is-missing {
  border-color: var(--crimson); background: #FDF2F1;
  box-shadow: 0 0 0 3px rgba(168,45,38,.12);
}
/* اختيار صف الترويسة */
.head-pick td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-pick tr.is-header { background: #EEF4F0; font-weight: 600; }
.head-pick tr:hover { background: #F6F8F6; }

/* ---------------------------------------------- جداول الطباعة الدفعية */
.print-sheet { margin-bottom: 26px; }
.print-head { text-align: center; margin-bottom: 10px; }
.print-head .print-school { font-size: 13px; color: var(--muted, #6b7280); }
.print-head .print-title { font-size: 18px; font-weight: 700; margin-top: 2px; }
.print-head .print-meta { font-size: 12.5px; color: var(--muted, #6b7280); }
@media print {
  .page-break { break-before: page; page-break-before: always; }
  .print-sheet { margin-bottom: 0; }
  .timetable-grid { font-size: 11px; }
}

/* ---------------------------------------------- اللوحة الأسبوعية العامة */
.master-wrap { overflow-x: auto; max-height: 74vh; overflow-y: auto; }
.master-grid { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; }
.master-grid th, .master-grid td {
  border: 1px solid var(--line, #e5e7eb); padding: 3px 5px; text-align: center; white-space: nowrap;
}
.master-grid thead th { position: sticky; background: var(--panel, #fff); z-index: 3; }
.master-grid thead tr:first-child th { top: 0; }
.master-grid thead tr:nth-child(2) th { top: 27px; }
.master-grid .dayhead { background: var(--brand-soft, #eef2f7); font-weight: 700; }
.master-grid .perhead { font-weight: 500; color: var(--muted, #6b7280); min-width: 34px; }
.master-grid .dayend { border-left-width: 2px; border-left-color: var(--brand, #1f4e5f); }
.master-grid .stick  { position: sticky; right: 0;     background: var(--panel, #fff); z-index: 4; text-align: right; min-width: 190px; }
.master-grid .stick2 { position: sticky; right: 190px; background: var(--panel, #fff); z-index: 4; min-width: 52px; }
.master-grid thead .stick, .master-grid thead .stick2 { z-index: 5; }
.master-grid td.busy { background: var(--brand-soft, #eef2f7); font-weight: 600; }
.master-grid td.free { background: transparent; }
.master-grid tfoot td { position: sticky; bottom: 0; background: var(--panel, #fff); font-weight: 600; z-index: 3; }
.master-grid tfoot td.thin { background: #fde8e8; color: #b42318; }
@media print {
  .master-wrap { overflow: visible; max-height: none; }
  .master-grid { font-size: 8.5px; }
  .master-grid .stick, .master-grid .stick2, .master-grid tfoot td { position: static; }
}

/* ---------------------------------------------- لوحة بيانات الدخول المؤقتة */
.cred-panel { border: 1px solid var(--brass, #b08d57); background: var(--brass-soft, #fdf8f0); margin-bottom: 14px; }
.cred-panel .cred-pw { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; letter-spacing: .5px; }
@media print { .cred-panel { display: none !important; } }

/* ---------------------------------------------- اختيار الحصص في طلب الانصراف */
.slot-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.slot-opt { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--panel, #fff); }
.slot-opt:has(input:checked) { border-color: var(--brand, #1f4e5f); background: var(--brand-soft, #eef2f7); }
.slot-opt input { margin-bottom: 4px; }
.slot-opt .p { font-weight: 700; font-size: 13px; }
.slot-opt .c { font-size: 12.5px; }
.slot-opt .s { font-size: 12px; color: var(--muted, #6b7280); }

/* ---------------------------------------------- اختيار عدة طلبة في حادثة */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; background: var(--brand-soft, #eef2f7);
  border: 1px solid var(--line, #e5e7eb); font-size: 12.5px; }
.chip-x { border: 0; background: transparent; cursor: pointer; font-size: 15px;
  line-height: 1; color: var(--muted, #6b7280); padding: 0; }
.chip-x:hover { color: var(--crimson, #b42318); }

/* ---------------------------------------------- شريط الفعل الرئيسي */
.action-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; border-radius: 12px;
  background: var(--brass-soft, #fdf8f0); border: 1px solid var(--brass, #b08d57); }
.action-bar .action-title { font-weight: 700; font-size: 15px; }
.action-bar .action-sub { font-size: 12.5px; color: var(--muted, #6b7280); margin-top: 2px; }
.btn-lg-da { padding: 9px 20px; font-size: 14.5px; }

/* ---------------------------------------------- مدى العرض الزمني */
.range-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px; }
.range-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.range-tab { padding: 6px 13px; border-radius: 999px; font-size: 13px; text-decoration: none;
  color: var(--ink, #1f2937); background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb); transition: all .12s ease; }
.range-tab:hover { border-color: var(--brand, #1f4e5f); }
.range-tab.on { background: var(--brand, #1f4e5f); border-color: var(--brand, #1f4e5f); color: #fff; font-weight: 600; }
.range-custom { display: flex; align-items: center; gap: 5px; }
.range-custom .sep { color: var(--muted, #6b7280); }
.range-custom input { width: 148px; }

.delta { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; }
.delta.up   { background: #fef3c7; color: #92400e; }
.delta.down { background: #dcfce7; color: #166534; }
.delta.ok   { background: var(--brand-soft, #eef2f7); color: var(--brand, #1f4e5f); }

/* ---------------------------------------------- بطاقات حصص الاحتياط */
.cover-day { margin-bottom: 16px; }
.cover-day-head { display: flex; align-items: center; gap: 9px; padding: 7px 2px 9px;
  border-bottom: 2px solid var(--line, #e5e7eb); margin-bottom: 9px; }
.cover-day.is-today .cover-day-head { border-bottom-color: var(--brass, #b08d57); }
.cover-day-head .d-name { font-weight: 700; font-size: 14.5px; }
.cover-day-head .d-date { font-size: 12.5px; color: var(--muted, #6b7280); }
.cover-day-head .d-count { margin-inline-start: auto; font-size: 12.5px; color: var(--muted, #6b7280); }

.cover-row { display: grid; grid-template-columns: 62px 1fr 1fr auto; gap: 12px; align-items: center;
  padding: 11px 13px; margin-bottom: 7px; border-radius: 10px;
  background: var(--panel, #fff); border: 1px solid var(--line, #e5e7eb);
  border-inline-start: 4px solid var(--brass, #b08d57); }
.cover-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.c-period { text-align: center; }
.c-period .p-num { display: block; font-size: 21px; font-weight: 700; line-height: 1.05; color: var(--brand, #1f4e5f); }
.c-period .p-lbl { font-size: 10.5px; color: var(--muted, #6b7280); }
.c-main .c-class { font-weight: 600; font-size: 14px; }
.c-main .c-room { font-size: 11.5px; color: var(--muted, #6b7280); margin-inline-start: 7px; }
.c-main .c-subject { font-size: 12.5px; color: var(--muted, #6b7280); }
.c-for .f-label { font-size: 10.5px; color: var(--muted, #6b7280); }
.c-for .f-name { font-weight: 600; font-size: 13px; }
.c-for .f-spec { font-size: 11.5px; color: var(--muted, #6b7280); }
.c-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
@media (max-width: 720px) {
  .cover-row { grid-template-columns: 52px 1fr; }
  .c-for, .c-meta { grid-column: 2; align-items: flex-start; }
  .c-meta { flex-direction: row; flex-wrap: wrap; }
}

/* ---------------------------------------------- أشرطة بسيطة */
.bar-row { display: grid; grid-template-columns: 62px 1fr 30px; gap: 8px; align-items: center; margin-bottom: 6px; }
.bar-lbl { font-size: 12px; color: var(--muted, #6b7280); }
.bar { height: 8px; border-radius: 999px; background: var(--line, #e5e7eb); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--brass, #b08d57); border-radius: 999px; }
.bar-val { font-size: 12px; text-align: end; }
@media print { .range-bar { display: none !important; } }

/* ---------------------------------------------- قوائم الاختيار الطويلة */
/* الارتفاع بالنسبة للشاشة لا برقم ثابت: القائمة الثابتة عند 340px تدفع
   تذييل النافذة خارج الشاشة على الشاشات القصيرة فيختفي زر التنفيذ. */
.pick-list { overflow-y: auto; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; }

/* النافذة تُقسَّم رأسياً: الترويسة والتذييل ثابتان والجسم وحده يتمرّر.
   لكن معظم نوافذنا تضع <form> بين `.modal-content` و`.modal-body` ليشمل
   النموذجُ الترويسةَ والتذييل. وهذا يقطع سلسلة التمرير التي يبنيها
   بوتستراب: `.modal-body` لم يعد ابناً مباشراً لـ`.modal-content`، فلا
   يرث الارتفاع المحدود ولا يصير هو العنصر المتمرّر — فتمتدّ النافذة خارج
   الشاشة ويتعذّر الوصول إلى أسفلها.
   الحل: تمرير خصائص العمود المرن عبر النموذج أيضاً، فتعود السلسلة متصلة
   مهما كان بين المحتوى والجسم من غلاف. */
.modal-dialog-scrollable { height: auto; }
.modal-dialog-scrollable .modal-content {
  max-height: calc(100dvh - 3.5rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer { flex: 0 0 auto; }
.modal-dialog-scrollable .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* المتصفح يضع شريط التمرير على الجانب الذي يبدأ منه النص: في صفحة
     عربية يقع على اليسار، بعيداً عن اليد ومخالفاً لتوقّع القارئ.
     ولا توجد خاصية مباشرة لنقله، فتُقلب جهة الحاوية وحدها إلى `ltr`
     ليقع الشريط يميناً، ثم تُعاد الأبناء إلى `rtl` فيبقى المحتوى عربياً
     كما هو. الحاوية لا تحمل نصاً بذاتها، فالقلب لا يظهر أثره. */
  direction: ltr;
}
/* العناصر السطرية (مثل <label>) تُصفّ من يسار السطر داخل حاوية `ltr`
   ولو كان اتجاه نصّها `rtl` — فيبدو العنوان يساراً والحقل يميناً. ولا
   يكفي إعادة اتجاه الأبناء: يلزم غلافٌ كتليّ يستعيد الاتجاه للسياق كلّه.
   لذلك يُلفّ محتوى الجسم في `.mb-rtl`. ويبقى إرجاع الأبناء احتياطاً
   للنوافذ التي لم تُلفّ بعد. */
.modal-dialog-scrollable .modal-body > * { direction: rtl; }
.modal-body > .mb-rtl { direction: rtl; text-align: right; }
/* القائمة داخل الجسم تأخذ ما تبقّى من ارتفاعه لا ارتفاعاً خاصاً بها */
.modal-dialog-scrollable .modal-body .pick-list { flex: 1 1 auto; min-height: 120px; }
.modal-footer.sticky-footer { position: sticky; bottom: 0; z-index: 2; flex-shrink: 0;
  background: var(--panel, #fff); border-top: 1px solid var(--line, #e5e7eb); }
@media (max-height: 640px) {
  .modal-dialog-scrollable .modal-content { max-height: calc(100dvh - 1rem); }
}
.row-break td { background: var(--brass-soft, #fdf8f0); }

/* ---------------------------------------------- مقارنة الملف بالنظام */
.recon .recon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 10px; }
.recon-col { padding: 11px 13px; border-radius: 10px; background: var(--bg-soft, #f8fafc); border: 1px solid var(--line, #e5e7eb); }
.recon-title { font-weight: 700; font-size: 13px; margin-bottom: 7px; }
.recon-line { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 2px 0; }
.recon-line b { margin-inline-start: auto; font-size: 14px; }
.recon-line .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.recon-line .dot.ok { background: #16a34a; }
.recon-line .dot.new { background: var(--brass, #b08d57); }
.recon-line .dot.skip { background: #9ca3af; }
.bulk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------- مرشّحات استعراض الجدول */
.filter-card { margin-bottom: 14px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 8px; }
.filter-actions { display: flex; flex-direction: column; justify-content: flex-end; }
.seg { display: flex; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; overflow: hidden; }
.seg-opt { flex: 1; text-align: center; padding: 7px 4px; font-size: 13px; cursor: pointer; background: var(--panel, #fff); }
.seg-opt input { display: none; }
.seg-opt.on { background: var(--brand, #1f4e5f); color: #fff; font-weight: 600; }
.sheet { margin-bottom: 14px; }
.only-print { display: none; }
@media print {
  .only-print { display: block; text-align: center; margin-bottom: 12px; }
  .sheet { break-inside: avoid; page-break-inside: avoid; }
  .sheet.page-break { break-before: page; page-break-before: always; }
}

/* ---------------------------------------------- مرشّحات الجدول */
.tt-filters { padding: 12px 14px; margin-bottom: 14px; border-radius: 12px;
  background: var(--panel, #fff); border: 1px solid var(--line, #e5e7eb); }
.tt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.tt-row:last-of-type { margin-bottom: 0; }
.tt-spacer { flex: 1 1 auto; }

.tt-seg { display: inline-flex; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; overflow: hidden; }
.tt-seg label { padding: 6px 14px; font-size: 13px; cursor: pointer; background: var(--panel, #fff); margin: 0; }
.tt-seg label input { display: none; }
.tt-seg label.on { background: var(--brand, #1f4e5f); color: #fff; font-weight: 600; }

.tt-days { display: inline-flex; gap: 4px; transition: opacity .15s ease; }
.tt-days.is-off { opacity: .45; }
.tt-day { padding: 6px 11px; font-size: 12.5px; border-radius: 7px; cursor: pointer; margin: 0;
  border: 1px solid var(--line, #e5e7eb); background: var(--panel, #fff); }
.tt-day input { display: none; }
.tt-day.on { background: var(--brass-soft, #fdf8f0); border-color: var(--brass, #b08d57); font-weight: 600; }

.tt-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.tt-inline select { width: auto; min-width: 110px; }

/* قائمة اختيار متعدد بخانات — بديل select multiple الذي يحتاج Ctrl ولا يُفهم */
.tt-pick { position: relative; }
details.tt-pick > summary { list-style: none; }
details.tt-pick > summary::-webkit-details-marker { display: none; }
details.tt-pick[open] > .tt-pick-menu { display: block; }
details.tt-pick[open] > summary { border-color: var(--brand, #1f4e5f); }
.tt-pick-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 13px;
  border-radius: 8px; cursor: pointer; background: var(--panel, #fff); border: 1px solid var(--line, #e5e7eb); }

.tt-pick-btn .pk-count { padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
  background: var(--brand-soft, #eef2f7); color: var(--brand, #1f4e5f); font-weight: 600; }
.tt-pick-menu { display: none; position: absolute; z-index: 30; top: calc(100% + 5px); inset-inline-start: 0;
  width: 270px; border-radius: 10px; background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb); box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden; }

.pk-search { padding: 8px; border-bottom: 1px solid var(--line, #e5e7eb); }
.pk-actions { display: flex; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line, #e5e7eb); }
.pk-actions button { flex: 1; padding: 4px; font-size: 12px; cursor: pointer; border-radius: 6px;
  background: var(--bg-soft, #f8fafc); border: 1px solid var(--line, #e5e7eb); }
.pk-items { max-height: 260px; overflow-y: auto; padding: 4px; }
.pk-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px;
  font-size: 13px; cursor: pointer; margin: 0; }
.pk-item:hover { background: var(--bg-soft, #f8fafc); }
.pk-item input { width: 15px; height: 15px; flex: 0 0 auto; }
.pk-empty { padding: 12px; text-align: center; font-size: 12.5px; color: var(--muted, #6b7280); }

.tt-summary { display: flex; align-items: center; gap: 10px; padding-top: 9px; margin-top: 4px;
  border-top: 1px solid var(--line, #e5e7eb); font-size: 12.5px; color: var(--muted, #6b7280); }
.tt-busy { display: none; align-items: center; gap: 5px; color: var(--brand, #1f4e5f); }
.tt-busy.on { display: inline-flex; }
.spin { animation: ttspin .8s linear infinite; display: inline-block; }
@keyframes ttspin { to { transform: rotate(360deg); } }

/* ---------------------------------------------- خطوات الاستيراد بالترتيب */
.import-steps { list-style: none; margin: 0; padding: 0; }
.import-step { display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 7px;
  border-radius: 10px; background: var(--panel, #fff); border: 1px solid var(--line, #e5e7eb); }
.import-step .step-num { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; background: var(--brand, #1f4e5f); color: #fff; }
.import-step .step-body { flex: 1 1 auto; min-width: 0; }
.import-step .step-name { font-weight: 600; font-size: 13.5px; }
.import-step .step-hint { font-size: 12px; color: var(--muted, #6b7280); }
.import-step .step-actions { display: flex; gap: 5px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .import-step { flex-wrap: wrap; }
  .import-step .step-actions { width: 100%; }
}

/* ---------------------------------------------- أعمدة الإجراءات في الجداول */
/* النموذج عنصر كتلي، فحين يُوضع داخل صفّ أزرار يصير عنصراً مرناً بمقاييسه
   الخاصة فينزاح زرّه عن محاذاة بقية الأزرار. و`display:contents` يجعل زرّه
   عنصراً مباشراً في الصف. ويُحجز مكان الزر الغائب كي تتطابق الصفوف كلها. */
.row-actions-cell { width: 1%; white-space: nowrap; vertical-align: middle; }
.row-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-start; }
.row-actions form, .row-actions .as-item { display: contents; }
.row-actions .btn-sm-da { display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 30px; padding: 0 8px; }
.row-actions .btn-placeholder { display: inline-block; min-width: 32px; height: 30px; }
.tt-pick.has-sel .tt-pick-btn { border-color: var(--brass, #b08d57); background: var(--brass-soft, #fdf8f0); }
.tt-pick.has-sel .pk-count { background: var(--brass, #b08d57); color: #fff; }

/* ---------------------------------------------- أحدث نسخة احتياطية */
.last-backup { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--brass-soft, #fdf8f0); border: 1px solid var(--brass, #b08d57); }
.last-backup .lb-label { font-size: 11.5px; color: var(--muted, #6b7280); }
.last-backup .lb-name { font-weight: 600; font-size: 13px; }
.last-backup .lb-meta { font-size: 12px; color: var(--muted, #6b7280); }

/* ---------------------------------------------- آخر عملية استيراد */
.last-import { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-soft, #f8fafc); border: 1px solid var(--line, #e5e7eb); }
.last-import .li-label { font-size: 11.5px; color: var(--muted, #6b7280); }
.last-import .li-name { font-weight: 600; font-size: 13.5px; }
.last-import .li-meta { font-size: 12px; color: var(--muted, #6b7280); }

/* ---------------------------------------------- اختيار يوم الانصراف */
.day-pick { display: flex; flex-wrap: wrap; gap: 7px; align-items: stretch; }
.day-opt { display: flex; flex-direction: column; gap: 1px; min-width: 96px; padding: 9px 13px;
  border-radius: 10px; text-decoration: none; cursor: pointer; text-align: center;
  color: var(--ink, #1f2937); background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb); transition: border-color .12s ease; }
.day-opt:hover { border-color: var(--brand, #1f4e5f); }
.day-opt.on { background: var(--brand, #1f4e5f); border-color: var(--brand, #1f4e5f); color: #fff; }
.day-opt .d-t { font-weight: 700; font-size: 13.5px; }
.day-opt .d-n { font-size: 11.5px; opacity: .85; }
.day-opt .d-d { font-size: 11.5px; opacity: .75; }
.day-opt.day-more { border-style: dashed; }
.day-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.day-hidden.is-shown { position: static; width: auto; height: auto; opacity: 1;
  pointer-events: auto; margin-top: 6px; }

/* ---------------------------------------------- ملخّص طلب الانصراف */
.ed-side { position: sticky; top: 14px; }
.ed-sum .s-row { display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px dashed var(--line, #e5e7eb); font-size: 13px; }
.ed-sum .s-row:last-child { border-bottom: 0; }
.ed-sum .s-row span { color: var(--muted, #6b7280); }

/* ---------------------------------------------- مجموعات أدوات معنونة */
.tool-groups { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.tool-group { flex: 1 1 320px; padding: 9px 12px; border-radius: 10px;
  background: var(--panel, #fff); border: 1px solid var(--line, #e5e7eb); }
.tool-group .tg-label { display: block; font-size: 11.5px; font-weight: 600;
  color: var(--muted, #6b7280); margin-bottom: 7px; }
.tool-group .tg-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tool-group .tg-body .form-select { width: auto; min-width: 130px; }

/* ---------------------------------------------- تنظيف البيانات */
.purge-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 7px; }
.purge-item { display: flex; align-items: center; gap: 9px; padding: 10px 12px; margin: 0;
  border-radius: 9px; cursor: pointer; background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb); font-size: 13px; }
.purge-item:has(input:checked) { border-color: #b42318; background: #fef2f2; }
.purge-item.is-empty { opacity: .5; cursor: not-allowed; }
.purge-item .p-name { flex: 1 1 auto; }
.purge-item .p-count { padding: 1px 9px; border-radius: 999px; font-size: 11.5px;
  background: var(--bg-soft, #f1f5f9); font-weight: 600; }

/* ---------------------------------------------- مجموعات الاحتياط */
.cg-members { max-height: 300px; overflow-y: auto; border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px; padding: 4px; }
.cg-form { position: sticky; top: 14px; }

/* ---------------------------------------------- مستويات وصول مدير النظام */
.access-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.access-opt { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; margin: 0;
  border-radius: 10px; cursor: pointer; background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb); }
.access-opt.on, .access-opt:has(input:checked) {
  border-color: var(--brand, #1f4e5f); background: var(--brand-soft, #eef2f7); }
.access-opt input { margin-bottom: 3px; }
.access-opt .a-t { font-weight: 700; font-size: 13.5px; }
.access-opt .a-d { font-size: 12px; color: var(--muted, #6b7280); }

/* ---------------------------------------------- موقف الطالب من اللائحة */
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }
.reg-item { padding: 11px 13px; border-radius: 10px; background: var(--bg-soft, #f8fafc);
  border: 1px solid var(--line, #e5e7eb); }
.reg-item.is-due { background: #fffbeb; border-color: var(--brass, #b08d57); }
.reg-item .r-head { display: flex; align-items: baseline; justify-content: space-between; }
.reg-item .r-label { font-size: 12.5px; color: var(--muted, #6b7280); }
.reg-item .r-count { font-size: 21px; font-weight: 700; }
.reg-item .r-action { font-size: 12.5px; margin-top: 3px; }
.reg-item .r-none { font-size: 12.5px; color: var(--muted, #6b7280); }
.reg-item .r-next { font-size: 11.5px; color: var(--muted, #6b7280); margin-top: 6px;
  padding-top: 6px; border-top: 1px dashed var(--line, #e5e7eb); }

/* ---------------------------------------------- قواعد تقييم البند */
.rb-level { padding: 10px 12px; margin-bottom: 10px; border-radius: 9px;
  background: var(--panel, #fff); border: 1px solid var(--line, #e5e7eb); }
.rb-level.is-custom { border-color: var(--brass, #b08d57); background: var(--brass-soft, #fdf8f0); }
.rb-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.rb-head .rb-name { font-weight: 700; font-size: 13.5px; }
.rb-head .rb-reset { margin-inline-start: auto; }

/* ---------------------------------------------- جهة شريط التمرير */
/* القوائم الداخلية المتمرّرة تتبع القاعدة نفسها: الشريط يميناً حيث تقع
   اليد في الواجهة العربية، والمحتوى يبقى من اليمين. */
.pick-list, .pk-items, .cg-members { direction: ltr; }
.pick-list > *, .pk-items > *, .cg-members > * { direction: rtl; }

/* ---------------------------------------------- اختيار التوصيات الجاهزة */
.rec-box { margin-top: 6px; padding: 7px; border-radius: 9px;
  background: var(--panel, #fff); border: 1px solid var(--line, #e5e7eb); }
.rec-items { max-height: 190px; overflow-y: auto; direction: ltr; }
.rec-items > * { direction: rtl; }
.rec-item { display: block; width: 100%; text-align: right; padding: 6px 9px; margin-bottom: 3px;
  font-size: 12.5px; border-radius: 7px; cursor: pointer;
  background: var(--bg-soft, #f8fafc); border: 1px solid transparent; }
.rec-item:hover { border-color: var(--brand, #1f4e5f); background: var(--brand-soft, #eef2f7); }

/* ---------------------------------------------- اختيار أعضاء المجموعة */
.gm-members { max-height: 320px; }
.gm-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px;
  color: var(--muted, #6b7280); cursor: pointer; }

/* ---------------------------------------------- اختيار أعضاء المجموعة */
.gm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.gm-chip { padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--brand-soft, #eef2f7); color: var(--brand, #1f4e5f); }
.gm-box { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; overflow: hidden;
  background: var(--panel, #fff); }
.gm-searchbar { display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border-bottom: 1px solid var(--line, #e5e7eb); background: var(--bg-soft, #f8fafc); }
.gm-searchbar i { color: var(--muted, #6b7280); font-size: 13px; }
.gm-searchbar input { flex: 1; border: 0; background: transparent; outline: none; font-size: 13px; }
.gm-clear { border: 0; background: transparent; cursor: pointer; font-size: 17px; line-height: 1;
  color: var(--muted, #6b7280); padding: 0 2px; }
.gm-members { max-height: 260px; overflow-y: auto; padding: 3px; direction: ltr; }
.gm-members > * { direction: rtl; }
.gm-sep { display: flex; align-items: center; gap: 8px; padding: 6px 9px 3px;
  font-size: 11px; font-weight: 700; color: var(--muted, #6b7280); }
.gm-reveal { margin-inline-start: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 11px; color: var(--brand, #1f4e5f); text-decoration: underline; }
.gm-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin: 0 0 2px;
  border-radius: 7px; cursor: pointer; font-size: 13px; border: 1px solid transparent; }
.gm-row:hover { background: var(--bg-soft, #f8fafc); }
.gm-row.is-on { background: var(--brand-soft, #eef2f7); border-color: var(--brand, #1f4e5f); }
.gm-row.is-hidden { display: none; }
.gm-row input { width: 15px; height: 15px; flex: 0 0 auto; }
.gm-row .gm-name { flex: 1 1 auto; }
.gm-row .gm-spec { font-size: 11.5px; color: var(--muted, #6b7280); }
.gm-row .gm-from { font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: #fef3c7; color: #92400e; }

/* ---------------------------------------------- نقل المعلمين بين المجموعات */
.mv-step { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-inline-end: 5px;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  background: var(--brand, #1f4e5f); color: #fff; }
.mv-picked { display: flex; flex-wrap: wrap; gap: 5px; min-height: 30px; padding: 5px;
  border-radius: 8px; background: var(--bg-soft, #f8fafc); border: 1px dashed var(--line, #e5e7eb); }
/* الجسم المركَّز لا يُحاط بإطار: التركيز هنا لأجل التمرير لا لإبراز عنصر */
.modal-body:focus, .modal-body:focus-visible { outline: none; }

/* ---------------------------------------------- تحديد سريع بالمادة */
.subj-quick { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 7px; }
.subj-btn { padding: 3px 10px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: var(--bg-soft, #f8fafc); border: 1px solid var(--line, #e5e7eb); }
.subj-btn:hover { border-color: var(--brand, #1f4e5f); }
.subj-btn.is-used { background: var(--brand-soft, #eef2f7); border-color: var(--brand, #1f4e5f); }

/* ---------------------------------------------- صور الزيارة */
.vp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.vp-input { display: none; }
/* الصندوق بحجم ما سيُعرض لا أكبر: الفراغ الواسع يوحي بأن الصورة كبيرة */
.vp-drop { display: grid; place-items: center; gap: 4px; height: 84px; cursor: pointer;
  border-radius: 10px; border: 1.5px dashed var(--line, #e5e7eb);
  background: var(--bg-soft, #f8fafc); position: relative; overflow: hidden; margin: 0; }
.vp-drop:hover { border-color: var(--brand, #1f4e5f); }
.vp-drop i { font-size: 17px; color: var(--muted, #6b7280); }
.vp-drop .vp-label { font-size: 12.5px; color: var(--muted, #6b7280); }
.vp-preview { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-slot.has-img .vp-preview { display: block; }
.vp-slot.has-img .vp-drop { border-style: solid; border-color: var(--brand, #1f4e5f); }
/* شبكة عرض الصور في الاستمارة */
.vp-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.vp-card { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; overflow: hidden; }
.vp-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.vp-card .vp-cap { padding: 7px 9px; font-size: 12.5px; }

/* ---------------------------------------------- ما يُنتظر من المعلم */
.todo-row { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px dashed var(--line, #e5e7eb); }
.todo-row:last-child { border-bottom: 0; }
.todo-date { flex: 0 0 auto; font-size: 11.5px; color: var(--muted, #6b7280); padding-top: 2px; }
.todo-body { flex: 1 1 auto; font-size: 13px; }

/* ---------------------------------------------- ترتيب المعلمين */
.rank-row { display: grid; grid-template-columns: 24px 1fr 90px 34px; gap: 8px;
  align-items: center; padding: 5px 0; }
.rank-no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; font-weight: 700; background: var(--brand-soft, #eef2f7); color: var(--brand, #1f4e5f); }
.rank-name { font-size: 13px; }
.rank-n { text-align: end; font-size: 12.5px; font-weight: 600; }

/* ---------------------------------------------- الزائر = المستخدم الحالي */
.visitor-me { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 10px; background: var(--brand-soft, #eef2f7);
  border: 1px solid var(--brand, #1f4e5f); }
.visitor-me i { font-size: 18px; color: var(--brand, #1f4e5f); }
.visitor-me .vm-name { font-weight: 700; font-size: 13.5px; }
.visitor-me .vm-role { font-size: 12px; color: var(--muted, #6b7280); }
.visitor-me .badge-da { margin-inline-start: auto; }

/* ---------------------------------------------- ترتيب المعلمين (موسّع) */
.rank2 { display: grid; grid-template-columns: 26px 1fr 190px 96px; gap: 12px;
  align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line, #e5e7eb); }
.rank2:last-child { border-bottom: 0; }
.rank-who { min-width: 0; }
.rank-nm { font-size: 13.5px; font-weight: 600; }
.rank-sub { font-size: 11.5px; color: var(--muted, #6b7280); }
.rank-bar { display: flex; align-items: center; gap: 7px; }
.rank-bar .bar { flex: 1 1 auto; height: 8px; border-radius: 999px;
  background: var(--line, #e5e7eb); overflow: hidden; }
.rank-cnt { font-size: 11.5px; color: var(--muted, #6b7280); white-space: nowrap; }
.rank-score { text-align: center; }
.score-pill { display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; }
.score-pill.good { background: #dcfce7; color: #166534; }
.score-pill.mid  { background: #fef3c7; color: #92400e; }
.score-pill.low  { background: #fee2e2; color: #b42318; }
.rank-seg { display: inline-flex; }
@media (max-width: 800px) {
  .rank2 { grid-template-columns: 26px 1fr 80px; }
  .rank-bar { display: none; }
}
.term-split { display: flex; gap: 4px; justify-content: center; margin-top: 2px; }
.term-split span { font-size: 10.5px; padding: 0 5px; border-radius: 999px;
  background: var(--bg-soft, #f1f5f9); color: var(--muted, #6b7280); }

/* ---------------------------------------------- قرار الطلب ومقترحو التغطية */
.decide-card { border-color: var(--brass, #b08d57); }
.decide-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 9px; margin-bottom: 10px; }
.decide-facts > div { padding: 8px 10px; border-radius: 9px; background: var(--bg-soft, #f8fafc); }
.decide-facts span { display: block; font-size: 11.5px; color: var(--muted, #6b7280); }
.decide-facts b { font-size: 13.5px; }
.decide-reason { padding: 9px 11px; border-radius: 9px; font-size: 13px;
  background: var(--brass-soft, #fdf8f0); margin-bottom: 10px; }
.decide-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.decide-actions .form-control { flex: 1 1 220px; }
.sug-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.sug-btn { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; cursor: pointer;
  background: var(--bg-soft, #f8fafc); border: 1px solid var(--line, #e5e7eb); }
.sug-btn:hover { border-color: var(--brand, #1f4e5f); background: var(--brand-soft, #eef2f7); }
.sug-load { display: inline-block; margin-inline-start: 4px; padding: 0 5px; border-radius: 999px;
  background: var(--brand, #1f4e5f); color: #fff; font-size: 10px; }
tr.is-picked { background: var(--brand-soft, #eef2f7); }

/* الاختصار مطويّ داخل الصندوق: خارجه كان يُقرأ قائمةَ أعضاء لا أداةَ تحديد */
.subj-quick-wrap { border-bottom: 1px solid var(--line, #e5e7eb); }
.subj-quick-wrap > summary { padding: 6px 10px; font-size: 12px; cursor: pointer;
  color: var(--brand, #1f4e5f); background: var(--bg-soft, #f8fafc); }
.subj-quick-wrap .subj-quick { padding: 7px 10px; }

/* عنوان المادة داخل قائمة الأعضاء: تمييز لا خيار يُختار */
.gm-sep.gm-subj { background: var(--bg-soft, #f1f5f9); border-radius: 6px;
  margin: 6px 2px 3px; padding: 5px 9px; font-weight: 700;
  color: var(--brand, #1f4e5f); font-size: 11.5px; }

/* نصاب المعلم بجانب اسمه في منتقي الأعضاء */
.load-badge { flex: 0 0 auto; min-width: 30px; text-align: center; padding: 1px 7px;
  border-radius: 999px; font-size: 11px; font-weight: 700; }
.load-badge.light { background: #dcfce7; color: #166534; }
.load-badge.mid   { background: #fef3c7; color: #92400e; }
.load-badge.heavy { background: #fee2e2; color: #b42318; }
.load-badge .lb-cov { font-weight: 400; opacity: .75; font-size: 10px; }
/* نص للبحث لا للعرض */
.gm-hidden-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.gm-row { position: relative; }

/* الصف قيد التحويل إلى تعيين يدوي */
tr.is-editing > td { background: var(--brass-soft, #fdf8f0); }
tr.is-editing > td:first-child { box-shadow: inset 3px 0 0 var(--brass, #b08d57); }

/* رابط إعادة الضبط: أقل بروزاً من الأزرار لأنه ليس فعلاً رئيسياً */
.btn-reset-link { align-self: end; padding: 8px 4px; font-size: 12.5px;
  color: var(--muted, #6b7280); text-decoration: underline; }
.btn-reset-link:hover { color: var(--brand, #1f4e5f); }

/* ---------------------------------------------- سجل الحصة */
.hist-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.hist-facts > div { padding: 8px 10px; border-radius: 9px; background: var(--bg-soft, #f8fafc); }
.hist-facts span { display: block; font-size: 11.5px; color: var(--muted, #6b7280); }
.timeline { border-inline-start: 2px solid var(--line, #e5e7eb); padding-inline-start: 14px; }
.tl-item { position: relative; padding-bottom: 12px; font-size: 13px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; inset-inline-start: -21px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--brand, #1f4e5f); }
.tl-item.done .tl-dot { background: #166534; }
.tl-item.pending .tl-dot { background: #b42318; }
.period-link { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.period-link i { font-size: 11px; opacity: .45; }
.period-link:hover i { opacity: 1; color: var(--brand, #1f4e5f); }

/* ---------------------------------------------- نصيب كل معلم من الاحتياط */
.share-row { display: grid; grid-template-columns: 1fr 130px 34px; gap: 9px;
  align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line, #f1f5f9); }
.share-row:last-child { border-bottom: 0; }
.share-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-bar { height: 9px; border-radius: 999px; background: var(--line, #e5e7eb); overflow: hidden;
  display: flex; }
.share-bar > span { display: block; height: 100%; border-radius: 999px;
  background: var(--brass, #b08d57); }
.share-num { text-align: end; font-size: 12.5px; font-weight: 700; }

/* البطاقة رابط: تُظهر تفصيل رقمها */
a.stat { text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
a.stat:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(20,32,27,.10); }
a.stat .label i { font-size: 10px; opacity: .4; margin-inline-start: 3px; }
a.stat:hover .label i { opacity: 1; }
a.stat.is-open { outline: 2px solid var(--brand, #1f4e5f); outline-offset: 1px; }

/* ---------------------------------------------- أيام فيها غياب */
.day-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chip { display: grid; place-items: center; min-width: 46px; padding: 6px 4px;
  border-radius: 9px; background: var(--bg-soft, #f8fafc);
  border: 1px solid var(--line, #e5e7eb); color: inherit; text-decoration: none; line-height: 1.15; }
.day-chip:hover { border-color: var(--brand, #1f4e5f); background: var(--brand-soft, #eef2f7); }
.day-chip.on { background: var(--brand, #1f4e5f); color: #fff; border-color: var(--brand, #1f4e5f); }
.day-chip.has-gap { border-color: #b42318; }
.day-chip.has-gap.on { border-color: #fff; }
.day-chip .dc-day { font-size: 14px; font-weight: 700; }
.day-chip .dc-n { font-size: 10px; opacity: .7; }


/* ---------------------------------------------- تفصيل حصة الشريط */
/* لوحة واحدة أسفل الشريط بدل نوافذ منبثقة: تلك تتداخل داخل شريط
   يتمرّر أفقياً وتُقصّ عند حافته. */
a.period { text-decoration: none; color: inherit; }
.period.is-clickable:hover { border-color: var(--brand, #1f4e5f); }
.period.is-open { outline: 2px solid var(--brand, #1f4e5f); outline-offset: 1px; }
.pdetail { margin-top: 12px; padding: 11px; border-radius: 10px;
  background: var(--bg-soft, #f8fafc); border: 1px solid var(--line, #e5e7eb); }
.pd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

/* سطر ملخّص الاحتياط */
.sum-line { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.sum-line b { font-size: 16px; }

/* ---------------------------------------------- أعمدة الغياب اليومية */
.bar-days { display: flex; align-items: flex-end; gap: 5px; height: 130px; direction: rtl; }
.bd-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 2px; }
.bd-n { font-size: 10.5px; font-weight: 700; color: var(--muted, #6b7280); min-height: 13px; }
.bd-bar { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0;
  background: var(--brand, #1f4e5f); }
.bd-col:hover .bd-bar { background: var(--brass, #b08d57); }
.bd-d { font-size: 10px; color: var(--muted, #6b7280); }

/* بطاقة «بياناتي» */
.me-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.me-grid > div { padding: 8px 10px; border-radius: 9px; background: var(--bg-soft, #f8fafc); }
.me-grid span { display: block; font-size: 11.5px; color: var(--muted, #6b7280); }
.me-grid b { font-size: 13.5px; }

/* ---------------------------------------------- جدول الصلاحيات */
.perm-table { min-width: max-content; }
.perm-table th, .perm-table td { white-space: nowrap; }
/* العمود الأول ثابت عند التمرير الأفقي، وإلا لم يُعرف صفُّ أيّ وحدة */
.perm-table thead th:first-child,
.perm-table tbody td:first-child {
  position: sticky; inset-inline-start: 0; z-index: 2;
  background: var(--panel, #fff);
  box-shadow: 1px 0 0 var(--line, #e5e7eb);
}
.perm-table thead th:first-child { z-index: 3; background: var(--bg-soft, #f8fafc); }
.perm-wrap { max-width: 100%; }

/* مسار طلب الانصراف */
.trail { display: flex; flex-wrap: wrap; gap: 7px; }
.trail-item { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px;
  border-radius: 999px; font-size: 12.5px; background: var(--bg-soft, #f8fafc);
  border: 1px solid var(--line, #e5e7eb); }
.trail-item.done { background: #dcfce7; border-color: #86efac; color: #166534; }
.trail-item i { font-size: 12px; }

/* ---------------------------------------------- تبويب أيام الجدول */
.day-tab { padding: 5px 13px; border-radius: 999px; font-size: 12.5px; text-decoration: none;
  color: inherit; background: var(--bg-soft, #f8fafc); border: 1px solid var(--line, #e5e7eb); }
.day-tab:hover { border-color: var(--brand, #1f4e5f); }
.day-tab.on { background: var(--brand, #1f4e5f); color: #fff; border-color: var(--brand, #1f4e5f); }
.day-tab.is-today:not(.on) { border-color: var(--brass, #b08d57); }
tr.is-today-row > th { box-shadow: inset 3px 0 0 var(--brass, #b08d57); }
tr.is-free > td { opacity: .55; }

/* ================================================================== الهاتف */
/* الجداول العريضة على شاشة ضيّقة: كانت الكلمات تُقطَع حرفاً حرفاً عمودياً
   حتى يصير الاسم عموداً من الحروف. العلاج تمرير أفقي وحدٌّ أدنى للعرض،
   لا ضغط الأعمدة حتى تنهار. */
@media (max-width: 767px) {
  .table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* الحدّ الأدنى هو المفتاح: بدونه ينكمش الجدول بدل أن يُمرَّر، فتُقطَّع
     الكلمات حرفاً حرفاً عمودياً. */
  .table-wrap > table, .table-scroll > table { min-width: 620px; }
  .table-da th, .table-da td { white-space: nowrap; }
  /* عمود يحتمل النص الطويل: يلتفّ بالكلمات لا بالحروف */
  .table-da td.wrap, .table-da th.wrap { white-space: normal; word-break: normal;
    overflow-wrap: anywhere; min-width: 160px; }

  /* شبكة بنود الزيارة: خلاياها نصّ طويل وأزرار تقدير — تُعرض بطاقاتٍ
     رأسية بدل جدول يُقطّع الكلمات. */
  .rubric-table, .rubric-table thead { display: none; }
  .rubric-cards .rc-item { border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
    padding: 10px; margin-bottom: 9px; background: var(--panel, #fff); }
  .rubric-cards .rc-head { font-size: 12px; color: var(--muted, #6b7280); margin-bottom: 3px; }
  .rubric-cards .rc-text { font-size: 13.5px; margin-bottom: 8px; }
  .rubric-cards .rc-opts { display: flex; flex-wrap: wrap; gap: 5px; }
}

/* الأزرار داخل الجداول لا تنكمش على الهاتف */
@media (max-width: 767px) {
  .btn-sm-da { padding: 5px 9px; font-size: 12px; }
  .toolbar { gap: 7px; }
  .toolbar > div { min-width: 140px; flex: 1 1 140px; }
}

/* جدول المستخدمين على الهاتف: `table-layout: fixed` مع أعمدة ثابتة يجبر
   عمود الاسم على الانكماش حتى تُقطَّع الحروف عمودياً. فيُترك التخطيط
   تلقائياً ويُمرَّر الجدول أفقياً — الاسم كاملاً أهمّ من رؤية كل الأعمدة. */
@media (max-width: 767px) {
  .users-table { table-layout: auto; min-width: 780px; }
  .users-table .col-user { min-width: 200px; white-space: normal; overflow-wrap: anywhere; }
  .users-table th, .users-table td { white-space: nowrap; }
}

/* =====================================================================
   الهاتف — ثلاثةُ إصلاحات
   ===================================================================== */

/* ١) البطاقات: عمودان لا عمودٌ واحد.
   الحدّ الأدنى ١٧٨ بكسل، وعرض المحتوى على هاتفٍ بعرض ٣٩٠ يبلغ ٣٦٢ —
   فلا يسع عمودين ويسقط كلٌّ في سطر. فثماني بطاقاتٍ تصير شاشتين قبل أن
   يبدأ المحتوى. و١٤٤ بكسل تسع عمودين مع الفاصل. */
@media (max-width: 575px) {
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 10px; }
  .stat .value { font-size: 24px; }
  .stat .label { font-size: 11.5px; }
  .stat .hint { font-size: 10.5px; }
}

/* ٢) حقول الإدخال: ١٦ بكسل على الأقل.
   نظام iOS يُكبّر الصفحة تلقائياً عند التركيز في حقلٍ خطُّه دون ١٦
   بكسل، ولا يعيدها. فكلُّ ضغطةٍ على مربّع بحثٍ تقفز بالشاشة وتُزيح
   ما حولها. والتكبير هنا يمنع ذلك التكبير. */
@media (max-width: 767px) {
  .form-control, .form-select, input[type="text"], input[type="search"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="password"], input[type="email"], input[type="tel"], textarea {
    font-size: 16px;
  }
  .toolbar .form-control, .toolbar .form-select { min-width: 0; }
}

/* ٣) أهدافُ اللمس: ٤٤ بكسل ارتفاعاً.
   أزرارُ السطور حشوها خمسة بكسلات، فارتفاعها نحو ٢٦ — ودونَ ما توصي
   به إرشاداتُ اللمس. فتُضغط جاراتُها بدلاً منها في الجداول المزدحمة. */
@media (max-width: 767px) {
  .btn, .btn-da, .btn-ghost, .btn-brass {
    min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-sm-da { min-height: 38px; padding: 7px 12px; font-size: 13px; }
  .table-da td .btn-sm-da { min-height: 36px; }
  .form-check-input { width: 20px; height: 20px; }
  .pagination .page-link { min-width: 42px; min-height: 42px; }
}