:root {
  --brand: #14532D;
  --brand-dark: #0C3A20;
  --accent: #3F8F5B;

  /* درجات مشتقة تلقائياً من لون الهوية */
  --brand-soft: color-mix(in srgb, var(--brand) 8%, #fff);
  --brand-softer: color-mix(in srgb, var(--brand) 4%, #fff);
  --brand-ring: color-mix(in srgb, var(--brand) 25%, transparent);

  --bg: #f4f6f5;
  --card: #ffffff;
  --text: #1a2620;
  --muted: #64748b;
  --border: #e5eae7;
  --border-strong: #d3dcd6;

  --success: #16803c;
  --success-bg: #ecfdf3;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --error: #b3261e;
  --error-bg: #fef2f2;
  --info: #1d4ed8;
  --info-bg: #eff6ff;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(18, 38, 26, .04), 0 8px 24px -12px rgba(18, 38, 26, .10);
  --shadow-md: 0 2px 4px rgba(18, 38, 26, .05), 0 16px 36px -14px rgba(18, 38, 26, .16);
  --shadow-lg: 0 4px 8px rgba(18, 38, 26, .06), 0 28px 56px -18px rgba(18, 38, 26, .22);

  --sidebar-w: 264px;
}
/* ── نمط الألوان لكامل الواجهة ── */
[data-theme="navy"]   { --brand: #1B2A4A; --brand-dark: #111C33; --accent: #C9A227; }
[data-theme="purple"] { --brand: #6D28D9; --brand-dark: #4C1D95; --accent: #0891B2; }
[data-theme="bw"]     { --brand: #111111; --brand-dark: #000000; --accent: #444444; }

/* قاعدة عامة: أي عنصر hidden يختفي مهما كان display الخاص به */
[hidden] { display: none !important; }

/* ── أيقونات SVG ── */
.ic {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.15em;
}
.ic-lg { width: 22px; height: 22px; }
.ic-xl { width: 28px; height: 28px; }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Cairo", "Tahoma", "Segoe UI", "Arial", sans-serif;
  background: linear-gradient(165deg, #f6f8f4, #eef2ec) fixed;
  color: var(--text);
  direction: rtl;
}
/* ═══════════════ App Shell ═══════════════ */
.shell { display: flex; min-height: 100vh; }

/* ── الشريط الجانبي ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--card);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  flex-shrink: 0;
}
.sb-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.sb-logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0; color: #fff;
  box-shadow: var(--shadow-sm);
}
.sb-brand-name { font-weight: 800; font-size: 14.5px; line-height: 1.35; color: var(--brand); }
.sb-brand-sub  { font-size: 11px; color: var(--muted); margin-top: 1px; }

.sb-nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.sb-group-label {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .06em; padding: 0 10px; margin: 14px 0 6px;
}
.sb-group-label:first-child { margin-top: 0; }
.sb-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 13.5px; color: var(--muted);
  padding: 10px 12px; border-radius: 10px; margin-bottom: 2px;
  transition: background .15s, color .15s;
  text-align: right;
}
.sb-item .sb-ic { width: 22px; display: inline-flex; justify-content: center; }
.sb-item .sb-ic .ic { width: 18px; height: 18px; }
.sb-item:hover { background: var(--brand-softer); color: var(--text); }
.sb-item.active { background: var(--brand); color: #fff; box-shadow: 0 10px 22px -10px var(--brand-ring); }
.sb-item .badge-count {
  margin-inline-start: auto; background: var(--error); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 7px;
}
.sb-item.active .badge-count { background: rgba(255,255,255,.25); }

.sb-user {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.sb-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 11px; color: var(--muted); }
.sb-logout {
  border: 1px solid var(--border); background: none; border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; font-size: 14px; color: var(--muted);
  transition: .15s;
}
.sb-logout:hover { background: var(--error-bg); color: var(--error); border-color: #f4c7c3; }

/* شعار الجامعة داخل مربع الشعار */
.sb-logo .org-logo { height: 34px; width: 34px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; }
.sb-logo #defaultLogo { font-size: 22px; }
/* الفاصل القديم لم يعد مستخدماً بصرياً لكن JS يستدعي show() عليه */
.vt-sep { display: none !important; }

/* ── المحتوى ── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.tb-title h1 { margin: 0; font-size: 18px; font-weight: 800; }
.tb-title p  { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.tb-spacer { flex: 1; }
.tb-date {
  display: flex; align-items: center; gap: 8px;
  background: var(--brand-softer); border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--text);
}
.tb-org {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--brand);
  border-inline-start: 1px solid var(--border); padding-inline-start: 16px;
}
.tb-org small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }

.content { padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 18px; max-width: 1280px; width: 100%; margin: 0 auto; }

@media (max-width: 1024px) {
  .sidebar { width: 68px; }
  .sb-brand-text, .sb-group-label, .sb-item .lbl, .sb-user-info { display: none; }
  .sb-brand { justify-content: center; padding: 16px 8px; }
  .sb-item { justify-content: center; padding: 12px 0; }
  .sb-user { justify-content: center; flex-direction: column; gap: 8px; padding: 12px 8px; }
  .topbar { padding: 12px 16px; }
  .content { padding: 16px; }
}

.container { display: flex; flex-direction: column; gap: 18px; }
.container[hidden] { display: none !important; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.card h2 { margin: 0 0 16px; font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.step {
  background: var(--brand-soft); color: var(--brand); width: 28px; height: 28px;
  border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}

/* الرفع */
.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius-md);
  padding: 40px 20px; text-align: center; background: var(--brand-softer); transition: .15s;
}
.dropzone.drag { border-color: var(--accent); background: var(--brand-soft); }
.dz-ic {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--brand-soft); display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.dz-text { font-size: 15px; margin: 0 0 6px; }
.dz-hint { color: var(--muted); font-size: 12px; margin: 0; }
.file-name { margin: 10px 0 0; font-weight: bold; color: var(--brand); }
.link { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

/* الإحصاءات — بطاقات KPI بأيقونة داخل مربع ملون (مواصفات §5.2) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat, .dash-sum-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 46px 1fr; column-gap: 14px;
  align-items: center; text-align: right;
}
.stat, .dash-sum-card { position: relative; }
.stat::before, .dash-sum-card::before {
  content: ""; grid-row: 1 / span 2;
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft);
}
/* طبقة الأيقونة: mask ملوّن فوق المربع الباهت (يتبع متغيرات الثيم) */
.stat::after, .dash-sum-card::after {
  content: ""; position: absolute;
  inset-inline-start: 18px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  -webkit-mask: var(--kpi-ic) center / 22px 22px no-repeat;
  mask: var(--kpi-ic) center / 22px 22px no-repeat;
  background-color: var(--brand);
  --kpi-ic: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20v-8M11 20V6M17 20v-4M3 20h18"/></svg>');
}
/* ترتيب بطاقات لوحة الرئيسية ثابت في renderDashboard: الشعب، في الجدول، موزَّعة، الطلاب */
.dash-sum-card:nth-child(1)::before { background: var(--info-bg); }
.dash-sum-card:nth-child(2)::before { background: var(--warn-bg); }
.dash-sum-card:nth-child(3)::before { background: var(--success-bg); }
.dash-sum-card:nth-child(4)::before { background: var(--brand-soft); }
.dash-sum-card:nth-child(1)::after { --kpi-ic: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2Z"/><path d="M4 19a2 2 0 0 0 2 2h13"/></svg>'); background-color: var(--info); }
.dash-sum-card:nth-child(2)::after { --kpi-ic: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="16" rx="2.5"/><path d="M8 3v4M16 3v4M3.5 10.5h17M8.5 15.5l2.3 2.3 4.7-5"/></svg>'); background-color: var(--warn); }
.dash-sum-card:nth-child(3)::after { --kpi-ic: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 20v-8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8M4 20h16M9 10V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V10"/></svg>'); background-color: var(--success); }
.dash-sum-card:nth-child(4)::after { --kpi-ic: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c1.2-3.2 3.6-4.8 6.5-4.8s5.3 1.6 6.5 4.8M16 4.6a3.5 3.5 0 0 1 0 6.8M21.5 20c-.7-2-1.8-3.4-3.3-4.2"/></svg>'); }
/* ترتيب بطاقات كشوف الطلاب ثابت في renderStats: الشعب، الطلاب، ثم حسب الحالة */
.stat:nth-child(1)::before { background: var(--info-bg); }
.stat:nth-child(2)::before { background: var(--brand-soft); }
.stat.reg::before   { background: var(--success-bg); }
.stat.other::before { background: var(--warn-bg); }
.stat:nth-child(1)::after { --kpi-ic: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2Z"/><path d="M4 19a2 2 0 0 0 2 2h13"/></svg>'); background-color: var(--info); }
.stat:nth-child(2)::after { --kpi-ic: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c1.2-3.2 3.6-4.8 6.5-4.8s5.3 1.6 6.5 4.8M16 4.6a3.5 3.5 0 0 1 0 6.8M21.5 20c-.7-2-1.8-3.4-3.3-4.2"/></svg>'); }
.stat.reg::after   { --kpi-ic: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12.5 2.7 2.7 5.8-6"/></svg>'); background-color: var(--success); }
.stat.other::after { --kpi-ic: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 4 2.5 17.7a2 2 0 0 0 1.7 3h15.6a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0Z"/><path d="M12 9.5v4M12 17h.01"/></svg>'); background-color: var(--warn); }
.stat .num, .dash-sum-num { font-size: 24px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.15; grid-column: 2; }
.stat .lbl, .dash-sum-lbl { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 3px; grid-column: 2; }
.stat.reg .num { color: var(--success); }
.stat.other .num { color: var(--warn); }
.dash-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* حلقة الجاهزية — البطاقة الخامسة في ملخص لوحة الرئيسية */
.dash-ready { display: flex; align-items: center; gap: 12px; }
.dash-ready::before, .dash-ready::after { content: none; }
.ready-ring { transform: rotate(-90deg); flex: none; }
.rr-track { fill: none; stroke: var(--brand-soft); stroke-width: 7; }
.rr-fill  { fill: none; stroke: var(--brand);      stroke-width: 7; stroke-linecap: round; }

/* شارة حالة نشط/معطَّل في جداول المستخدمين والمراقبين */
.status-pill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 12px; }
.status-pill.on  { background: var(--success-bg); color: var(--success); }
.status-pill.off { background: var(--error-bg);   color: var(--error); }

/* الثيمات */
.theme-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.theme-options { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-chip {
  border: 2px solid var(--border); border-radius: 20px; padding: 6px 14px;
  cursor: pointer; font-size: 13px; background: #fff; display: inline-flex; align-items: center; gap: 6px;
}
.theme-chip .dot { width: 12px; height: 12px; border-radius: 50%; }
.theme-chip.active { border-color: var(--brand); background: var(--brand-soft); font-weight: bold; }

.preview-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.section-combo { display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
.section-combo #sectionFilter { width: 100%; box-sizing: border-box; }
select { min-width: 260px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-btn { border: none; background: #fff; padding: 7px 14px; cursor: pointer; font: inherit; }
.seg-btn.active { background: var(--brand); color: #fff; }
.preview-frame { width: 100%; height: 560px; border: 1px solid var(--border); border-radius: 8px; background: #e9ecef; }

/* الأزرار */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: 10px; padding: 9px 18px;
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  text-decoration: none; text-align: center; transition: .15s;
}
.btn.primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--brand-dark); }
.btn.primary:disabled { opacity: .55; cursor: default; }
.btn.success { background: var(--success); color: #fff; }
.btn.danger { background: var(--card); color: var(--error); border-color: #f4c7c3; }
.btn.danger:hover { background: var(--error-bg); }
/* أزرار بلا صنف لوني (ثانوية) → مظهر ghost */
.btn:not(.primary):not(.success):not(.danger):not(.s-add-btn):not(.search-pdf-btn) { background: var(--card); color: var(--text); border-color: var(--border-strong); }
.btn:not(.primary):not(.success):not(.danger):not(.s-add-btn):not(.search-pdf-btn):hover { background: var(--brand-softer); border-color: var(--brand); color: var(--brand); }

/* حقول الإدخال (عام) */
input[type="text"], input[type="number"], input[type="password"], input[type="time"], select, .search-input {
  padding: 9px 13px; border: 1px solid var(--border-strong); border-radius: 10px;
  font: inherit; font-size: 13px; background: var(--card); transition: border-color .15s, box-shadow .15s;
}
input[type="time"] { direction: ltr; }
.s-time-wrap { position: relative; display: inline-flex; align-items: center; direction: ltr; }
.s-time-wrap input[type="time"] { padding-inline-end: 30px; }
.s-time-wrap input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0; width: 20px; position: absolute; inset-inline-end: 0; margin: 0; }
.s-time-wrap .s-time-ic { position: absolute; inset-inline-end: 9px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
input:focus, select:focus, .search-input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
.backup-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 10px 0 6px; }
.backup-import { display: inline-flex; }
p.muted.small { font-size: 12px; margin-top: 4px; }

/* توليد الكشوف — خيارا الحضور والجلوس */
.generate-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.generate-option { background: var(--brand-softer); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; }
.go-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.go-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.go-head-text { flex: 1; min-width: 0; }
.go-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 2px; }
.generate-option .msg.warn { margin: 0 0 12px; }
.generate-option .btn.primary { width: 100%; margin-top: auto; }

/* التقدّم */
.progress-wrap { margin-top: 16px; }
.progress-bar { height: 10px; background: #edf0ee; border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.progress-text { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

.muted { color: var(--muted); font-size: 13px; }
.msg { border-radius: 10px; padding: 10px 14px; margin-top: 12px; font-size: 13px; border: 1px solid; }
.msg.error { background: var(--error-bg); color: var(--error); border-color: #f4c7c3; }
.msg.success-msg { background: var(--success-bg); color: var(--success); border-color: #bfe8c6; }
.msg.warn, .msg.draft-notice { background: var(--warn-bg); color: var(--warn); border-color: #fde68a; line-height: 1.7; }
.msg.warn { white-space: pre-line; }
.msg.draft-notice { display: flex; align-items: center; gap: 8px; }

/* القاعات */
.room-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.room-form input[type="text"] { flex: 1; min-width: 180px; }
.room-form input[type="number"] { width: 140px; }

table.rooms-table, table.alloc-table, table.dash-table, table.audit-table,
table.att-table, table.stat-tbl, table.rmap-table, table.search-table,
table.cv-table, table.invig-grid-table, table.tt-editor {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.rooms-table th, table.alloc-table th, table.dash-table th, table.audit-table th,
table.att-table th, table.stat-tbl th, table.rmap-table th, table.search-table th,
table.cv-table th, table.invig-grid-table th, table.tt-editor th {
  background: var(--brand-softer); color: var(--muted);
  font-size: 11.5px; font-weight: 700; padding: 10px 12px;
  border-bottom: 1px solid var(--border); text-align: center;
}
table.rooms-table td, table.alloc-table td, table.dash-table td, table.audit-table td,
table.att-table td, table.stat-tbl td, table.rmap-table td, table.search-table td,
table.cv-table td, table.invig-grid-table td, table.tt-editor td {
  padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle;
}
table.rooms-table tbody tr:hover td, table.alloc-table tbody tr:hover td,
table.dash-table tbody tr:hover td, table.audit-table tbody tr:hover td,
table.search-table tbody tr:hover td { background: var(--brand-softer); }

table.rooms-table tfoot td { font-weight: bold; background: var(--brand-softer); }
table.alloc-table td.sname { text-align: right; padding-right: 10px; }
.alloc-table-wrap { max-height: 320px; overflow-y: auto; margin-bottom: 14px; }

/* بحث الطلاب */
.search-input-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-start; }
.search-input-wrap { flex: 1; position: relative; }
.search-input { width: 100%; box-sizing: border-box; }
.search-suggestions {
  position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 100;
  background: #fff; border: 1.5px solid var(--brand); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); list-style: none; margin: 0; padding: 4px 0;
  max-height: 240px; overflow-y: auto;
}
.search-suggestions li {
  padding: 9px 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px;
}
.search-suggestions li:hover, .search-suggestions li.active { background: color-mix(in srgb, var(--brand) 10%, #fff); }
.sugg-name { font-weight: bold; }
.sugg-id { color: var(--muted); font-size: 12px; direction: ltr; }
.search-empty { text-align: center; padding: 24px 0; }
.search-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.search-card-hd { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--brand); color: #fff; flex-wrap: wrap; }
.search-pdf-btn { margin-right: auto; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.search-pdf-btn:hover { background: rgba(255,255,255,.3); }
.search-pdf-btn:disabled { opacity: .6; cursor: default; }
.search-student-name { font-size: 15px; font-weight: bold; }
.search-student-id { font-size: 13px; opacity: .85; direction: ltr; }
.search-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.search-table th { background: var(--brand-softer); padding: 7px 10px; text-align: center; border-bottom: 1.5px solid var(--border); }
.search-table td { padding: 7px 10px; text-align: center; border-bottom: 1px solid var(--border); }
.search-table tbody tr:last-child td { border-bottom: none; }
.search-table tbody tr:nth-child(even) td { background: var(--brand-softer); }
.search-table td.sname { text-align: right; }
.search-seat { font-weight: bold; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 6px; }

/* توزيع الجلوس */
.session-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.session-item {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: border-color .15s, background .15s;
  background: #fff;
}
.session-item:hover { border-color: var(--brand); background: var(--brand-softer); }
.session-item.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, #fff); }
.session-item.allocated { border-color: var(--success); }
.session-item-hd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 5px; font-size: 14px;
}
.session-day { font-weight: bold; color: var(--text); }
.session-label { color: var(--muted); font-size: 13px; }
.session-count { margin-right: auto; font-weight: bold; color: var(--brand); font-size: 13px; }
.session-seqs { font-weight: normal; color: var(--muted); font-size: 12px; }
.session-allocated-badge {
  background: var(--success); color: #fff;
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
}
.session-new-badge {
  background: #f59e0b; color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: bold;
}
.session-item.has-new { border-right: 3px solid #f59e0b; }
.session-item-courses { font-size: 13px; color: var(--muted); line-height: 1.5; }

.alloc-step { margin-bottom: 20px; }
.alloc-step-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: bold; }
.alloc-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: bold; flex-shrink: 0; }
.alloc-step-confirm { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; }

.alloc-rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0 10px; }
.alloc-room-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 12px; text-align: center; background: var(--brand-softer); }
.alloc-room-card.shortfall { border-color: var(--error); background: var(--error-bg); }
.room-card-name { font-size: 13px; font-weight: bold; color: var(--brand); margin-bottom: 4px; }
.room-card-count { font-size: 30px; font-weight: bold; color: var(--text); line-height: 1.1; }
.room-card-cap { font-size: 12px; color: var(--muted); margin-top: 2px; }
.alloc-total { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.alloc-total.error   { color: var(--error); font-weight: bold; }
.alloc-total.success { color: var(--success); font-weight: bold; }
.alloc-total.partial { color: #92400e; font-weight: bold; background: var(--warn-bg); padding: 6px 10px; border-radius: 6px; border: 1px solid #fcd34d; }

.alloc-details { margin-top: 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.alloc-details summary { padding: 10px 14px; cursor: pointer; font-size: 14px; background: var(--brand-softer); user-select: none; list-style: none; display: flex; align-items: center; gap: 6px; }
.alloc-details summary::before { content: '▶'; font-size: 10px; color: var(--muted); transition: transform .15s; }
.alloc-details[open] summary::before { transform: rotate(90deg); }
.alloc-details summary:hover { background: var(--brand-soft); }
.alloc-details .alloc-table-wrap { max-height: 340px; overflow-y: auto; }

/* جدول الاختبارات */
.session-time-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.session-time-row .s-label-input { flex: 1; min-width: 160px; }
.session-time-row .session-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.session-time-row .s-sep { font-size: 13px; color: var(--muted); }
.session-time-row .s-del-btn { padding: 6px 10px; font-size: 13px; background: #b3261e; color: #fff; border: none; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.session-time-row .s-del-btn:hover { background: #8c1b16; }
.s-add-btn { margin-top: 8px; padding: 7px 18px; font-size: 13px; background: transparent; border: 2px dashed var(--brand); color: var(--brand); border-radius: 8px; cursor: pointer; font: inherit; }
.s-add-btn:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }

.tt-editor-wrap { overflow-x: auto; margin-bottom: 14px; }
table.tt-editor { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
table.tt-editor th, table.tt-editor td { border: 1px solid var(--border); padding: 8px; text-align: center; vertical-align: top; }
table.tt-editor thead th { background: var(--brand-softer); }
table.tt-editor th .th-time { font-size: 11px; color: var(--muted); direction: ltr; }
.tt-weekday { font-weight: bold; white-space: nowrap; }
.tt-date { white-space: nowrap; }
.tt-slot { min-width: 180px; }
.course-chip { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--brand-soft); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; margin-bottom: 4px; text-align: right; }
.course-chip small { color: var(--muted); direction: ltr; }
.link-badge { display: inline-block; font-size: 10px; color: var(--success); white-space: nowrap; }
.link-badge.unlinked { color: #b8860b; }
.cap-badge { margin-top: 6px; font-size: 11px; font-weight: bold; padding: 3px 6px; border-radius: 6px; }
.cap-badge.ok { background: var(--success-bg); color: var(--success); }
.cap-badge.warn { background: var(--error-bg); color: var(--error); }
.chip-x { border: none; background: none; color: var(--error); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.course-search { width: 100%; padding: 5px 7px; border: 1px dashed var(--border); border-radius: 6px; font: inherit; font-size: 12px; min-width: 0; }
.course-search:focus { border-style: solid; border-color: var(--brand); outline: none; }
.slot-conflict { margin-top: 4px; font-size: 11px; font-weight: bold; padding: 3px 6px; border-radius: 6px; background: var(--error-bg); color: var(--error); }
.day-overload { font-size: 11px; font-weight: bold; padding: 3px 6px; border-radius: 6px; background: #fff3cd; color: #856404; display: block; margin-top: 4px; }
.tt-conflicts-panel { margin-top: 14px; border: 1px solid #f5c6c4; border-radius: 8px; overflow: hidden; }
.tt-conflicts-panel .conflict-header { background: var(--error-bg); color: var(--error); font-weight: bold; padding: 8px 14px; font-size: 13px; }
.conflict-item { padding: 8px 14px; border-top: 1px solid #f5c6c4; font-size: 13px; }
.conflict-item strong { color: var(--error); }
.conflict-item details { margin-top: 4px; }
.conflict-item summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.conflict-item ul { margin: 4px 0 0 16px; font-size: 12px; color: var(--text); direction: ltr; text-align: left; }
.room-actions-label { font-size: 13px; font-weight: bold; color: var(--brand); margin: 14px 0 6px; }
.room-actions-label + .room-actions { margin-top: 0; }
.room-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.room-actions--icons { gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.room-actions--icons .btn { flex: 0 0 auto; width: 78px; height: 58px; padding: 6px 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; }
.room-actions--icons .btn .ra-icon { font-size: 21px; line-height: 1; }
.room-actions--icons .btn .ra-label { font-size: 10px; font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; }
.tt-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
table.tt-editor td.empty { color: var(--muted); font-style: italic; padding: 18px; }
table.cv-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
table.cv-table th { padding: 8px 10px; text-align: center; border: 1px solid var(--brand-dark); }
table.cv-table td { padding: 7px 10px; border: 1px solid var(--border); text-align: center; vertical-align: middle; }
table.cv-table td.cv-name { text-align: right; font-weight: bold; }
.cv-code { font-size: 11px; color: var(--muted); font-weight: normal; }

/* التقويم الهجري المنبثق */
.cal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
.cal-popup { background: #fff; border-radius: 12px; padding: 16px; width: 320px; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-weight: bold; font-size: 15px; }
.cal-nav { border: none; background: var(--brand); color: #fff; width: 30px; height: 30px; border-radius: 6px; font-size: 18px; cursor: pointer; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; direction: rtl; }
.cal-wd { text-align: center; font-size: 11px; color: var(--muted); padding: 4px 0; }
.cal-day { border: 1px solid var(--border); background: #fff; border-radius: 6px; padding: 7px 0; cursor: pointer; font: inherit; font-size: 13px; }
.cal-day:hover { background: var(--brand-soft); }
.cal-day.selected { background: var(--brand); color: #fff; border-color: var(--brand); }
.cal-close { display: block; margin: 12px auto 0; }

/* الإعدادات الإدارية */
.unlock-form { display: flex; gap: 10px; max-width: 340px; }
.unlock-form input { flex: 1; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.settings-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: bold; color: var(--muted); }
.settings-grid input[type="text"], .settings-grid input[type="password"] { font-weight: normal; color: var(--text); }
.logo-preview { max-height: 70px; max-width: 160px; object-fit: contain; margin-top: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 4px; background: #fff; }
#settingsForm hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

.app-footer { text-align: center; color: var(--muted); font-size: 12px; padding: 20px; }
.app-version { opacity: .75; }
.app-version:not(:empty)::before { content: " — "; }
.login-version { text-align: center; color: var(--muted); font-size: 11px; margin: 14px 0 0; }

/* الجدول للقراءة فقط لغير المخوَّل بتحريره. يُخفى بالـCSS لا بـJS — نفس نمط
   data-role — لأن مبدّل "عرض بالمقرر" يُظهر أزرار الحفظ مجدداً، و!important
   يغلب أي إظهار لاحق فلا يعود ممكناً حفظ الجدول بالخطأ. */
html[data-tt-edit="readonly"] #saveTimetableBtn,
html[data-tt-edit="readonly"] #addDayBtn { display: none !important; }
/* تعطيل سطح التحرير كله بقاعدة واحدة بدل تعداد كل حقل: أوقات الجلسات وشبكة
   الأيام. بدونها يظل المنسّق يعدّل ويحذف جلسات ثم يُفاجأ برفض الحفظ بعد
   عشرين دقيقة. أزرار الطباعة و"عرض بالمقرر" تبقى فعّالة لأنها خارج هذين. */
html[data-tt-edit="readonly"] #sessionTimes,
html[data-tt-edit="readonly"] #ttEditorWrap { pointer-events: none; opacity: .65; }
.tt-readonly-note {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-inline-start: 3px solid var(--brand);
  color: var(--text); font-size: 13px; padding: 10px 12px; border-radius: 6px; margin: 0 0 12px;
}

/* ── لوحة التقرير الإحصائي ── */
#statsPanel { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.stats-report-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--brand); color: #fff; font-weight: bold; font-size: 14px; }
.stat-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.stat-mini-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; text-align: center; background: #fff; }
.stat-mini-card .val { display: block; font-size: 22px; font-weight: bold; color: var(--brand); }
.stat-mini-card .lbl { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.stat-conflict { margin: 0 14px 10px; padding: 8px 12px; border-radius: 6px; font-size: 13px; border: 1px solid; }
.stat-conflict.ok   { background: var(--success-bg); border-color: #86efac; color: #166534; }
.stat-conflict.warn { background: var(--warn-bg); border-color: #fcd34d; color: #92400e; }
.stat-section-lbl { margin: 10px 14px 6px; font-weight: bold; font-size: 13px; color: var(--brand); border-right: 4px solid var(--accent); padding-right: 8px; }
.stat-tbl-wrap { padding: 0 14px 14px; overflow-x: auto; }
.stat-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.stat-tbl thead th { padding: 7px 8px; text-align: center; }
.stat-tbl tbody td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: center; }
.inline-bar { display: flex; align-items: center; gap: 5px; min-width: 90px; }
.inline-fill { height: 8px; background: var(--accent); border-radius: 3px; flex-shrink: 0; }
.inline-bar span { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* ── خريطة القاعات اليومية ── */
#roomMapPanel { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.rmap-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--brand); color: #fff; font-weight: bold; font-size: 14px; }
.rmap-meta { font-size: 12px; font-weight: normal; opacity: .85; }
.rmap-day-tabs { display: flex; gap: 6px; padding: 10px 14px 0; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--brand-softer); }
.rmap-day-tab { padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px 8px 0 0; border-bottom: none; font-size: 13px; cursor: pointer; background: #fff; color: var(--muted); transition: background .15s; }
.rmap-day-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.rmap-content { padding: 14px; overflow-x: auto; }
.rmap-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rmap-table th { padding: 8px 10px; text-align: center; white-space: nowrap; }
.rmap-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rmap-table td:first-child { text-align: right; font-weight: bold; color: var(--text); }
.rmap-table td.rmap-cap { text-align: center; color: var(--muted); font-size: 12px; }
.rmap-cell-used { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.rmap-bar-wrap { width: 80px; height: 7px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.rmap-bar-fill { height: 100%; border-radius: 4px; transition: width .2s; }
.rmap-bar-fill.low  { background: #4ade80; }
.rmap-bar-fill.mid  { background: #fb923c; }
.rmap-bar-fill.high { background: #f87171; }
.rmap-count { font-size: 11px; color: var(--muted); white-space: nowrap; }
.rmap-courses { font-size: 10px; color: var(--accent); text-align: center; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmap-cell-free { color: #d1d5db; font-size: 11px; text-align: center; display: block; }
.rmap-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* ── سجل العمليات ── */
.audit-actions { display: flex; gap: 10px; margin-bottom: 12px; }
.audit-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit-table thead th { padding: 8px 10px; text-align: center; }
.audit-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.audit-table tbody tr:last-child td { border-bottom: none; }
.audit-dt { font-size: 11px; color: var(--muted); white-space: nowrap; }
.audit-details { text-align: right !important; font-size: 12px; color: var(--muted); }
.audit-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; white-space: nowrap; }
.audit-upload_xml          { background: var(--info-bg); color: #1e40af; }
.audit-allocation_applied  { background: var(--success-bg); color: #166534; }
.audit-allocation_cleared  { background: var(--error-bg); color: #991b1b; }
.audit-timetable_saved     { background: var(--warn-bg); color: #854d0e; }
.audit-settings_changed    { background: #f3e8ff; color: #6b21a8; }
.audit-backup_restored     { background: #ffedd5; color: #9a3412; }
.audit-user_login          { background: var(--info-bg); color: #075985; }

/* ── لوحة تسجيل الحضور ── */
#attendancePanel { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.att-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--brand); color: #fff; font-weight: bold; font-size: 14px; }
.att-session { border-bottom: 2px solid var(--border); }
.att-session:last-child { border-bottom: none; }
.att-session-hd { background: var(--brand-softer); padding: 8px 14px; font-weight: bold; font-size: 13px; color: var(--brand-dark); border-bottom: 1px solid var(--border); }
.att-time { font-weight: normal; font-size: 12px; color: var(--muted); margin-right: 6px; }
.att-section { border-bottom: 1px solid var(--border); }
.att-section:last-child { border-bottom: none; }
.att-section-hd { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; cursor: pointer; background: var(--brand-softer); user-select: none; }
.att-section-hd:hover { background: #f0f0f0; }
.att-course-name { font-size: 13px; font-weight: bold; }
.att-seq { background: var(--brand); color: #fff; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: normal; margin-right: 4px; }
.att-hd-right { display: flex; align-items: center; gap: 8px; }
.att-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; }
.att-badge.ok { background: var(--success-bg); color: #166534; }
.att-badge.pending { background: #f3f4f6; color: #6b7280; }
.att-chevron { font-size: 10px; color: var(--muted); }
.att-body { padding: 0 0 10px; }
.att-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.att-table thead th { padding: 7px 8px; text-align: center; font-size: 12px; }
.att-table tbody td { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: center; vertical-align: middle; }
.att-table tbody tr:hover td { background: #f0f4ff; }
.att-ltr { direction: ltr; }
.att-sname { text-align: right !important; }
.att-chk-cell { width: 44px; }
.att-chk { width: 16px; height: 16px; cursor: pointer; accent-color: #c00; }
.att-save-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px 4px; }
.att-save-msg { font-size: 13px; }
.att-save-msg.att-ok { color: #166534; }
.att-save-msg.att-err { color: #c00; }
.att-hint { font-size: 12px; color: var(--muted); padding: 6px 14px 2px; font-style: italic; }
.att-all-present-btn { background: var(--success-bg) !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }
.att-all-present-btn:hover { background: #bbf7d0 !important; }
.att-badge.unsaved { background: var(--warn-bg); color: #854d0e; }

/* ── نافذة تسجيل الدخول ── */
#loginOverlay {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  display: flex; align-items: center; justify-content: center;
}
.login-box {
  background: var(--card); border-radius: var(--radius-lg); padding: 40px 36px;
  width: 360px; text-align: center; box-shadow: var(--shadow-lg);
}
.login-icon { font-size: 48px; margin-bottom: 8px; }
.login-box h2 { margin: 0 0 24px; font-size: 19px; font-weight: 800; color: var(--brand); }
.login-title-oneline { white-space: nowrap; }
.login-branding { display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; }
.login-logo { height: 72px; width: auto; object-fit: contain; margin-bottom: 8px; }
.login-univ-name { font-size: 17px; font-weight: 800; color: var(--brand); line-height: 1.3; }
.login-college-name { font-size: 13px; color: var(--muted); margin-top: 2px; }
.login-field { margin-bottom: 12px; }
.login-field input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border-strong);
  border-radius: 10px; font: inherit; font-size: 14px; text-align: left; transition: .15s;
}
.login-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.login-btn { width: 100%; padding: 11px; font-size: 15px; margin-top: 4px; }
.login-error { color: var(--error); font-size: 13px; margin-top: 10px; }

/* ── لوحة الرئيسية (Dashboard) ── */
.dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-header h2 { margin: 0; }

/* قائمة المراحل — شبكة بطاقات حالة */
.dash-checklist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dash-check-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--card); position: relative;
}
.dash-check-done    { background: var(--success-bg); border-color: #b7e4c3; }
.dash-check-partial { background: var(--warn-bg); border-color: #fde68a; }
.dash-check-pending { background: var(--error-bg); border-color: #fecaca; }
.dash-check-icon    { font-size: 20px; }
.dash-check-label   { font-size: 12.5px; font-weight: 700; }
.dash-check-detail  { font-size: 11.5px; color: var(--muted); }
.dash-check-badge   { position: absolute; top: 12px; left: 12px; font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 9px; background: rgba(0,0,0,.06); }
@media (max-width: 1100px) { .dash-checklist { grid-template-columns: repeat(2, 1fr); } }

/* بطاقات الجلسات */
.dash-sessions  { display: flex; flex-direction: column; gap: 10px; }
.dash-day-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.dash-session-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.dash-session-card.pct-done         { border-color: #b7e4c3; background: var(--success-bg); }
.dash-session-card.pct-partial      { border-color: #fde68a; background: var(--warn-bg); }
.dash-session-card.pct-none         { border-color: var(--border); }
.dash-session-card.pct-invig-partial{ border-color: #fb923c; background: #fff7ed; }
.dash-session-card.pct-invig-none   { border-color: #f5a3a3; background: var(--error-bg); }
.dash-session-card.dsc-clickable    { cursor: pointer; }
.dash-session-card.dsc-clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dsc-head   { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.dsc-day    { font-weight: 700; font-size: 14px; color: var(--brand); }
.dsc-hijri  { font-size: 11px; color: var(--muted); }
.dsc-session{ font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.dsc-time   { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.dsc-stats  { font-size: 12px; color: var(--text); margin-bottom: 8px; }
.dsc-pct-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dsc-pct-bar  { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.dsc-pct-fill { height: 100%; background: var(--brand); border-radius: 4px; min-width: 2px; transition: width .4s; }
.dsc-pct-num  { font-size: 12px; font-weight: 600; color: var(--brand); min-width: 32px; }
.dsc-invig      { font-size: 12px; color: var(--muted); }
.dsc-invig-warn { color: #b45309; font-weight: 600; }
.dsc-click-hint { font-size: 11px; color: #ef4444; margin-top: 6px; font-weight: 600; }

.dash-day-row    { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dash-day-row.dash-day-warn { border-color: #fb923c; }
.dash-day-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; user-select: none;
  background: var(--bg);
}
.dash-day-header:hover { background: rgba(0,0,0,.03); }
.dash-day-chevron { display: inline-block; transition: transform .15s; opacity: .6; }
.dash-day-row.expanded .dash-day-chevron  { transform: rotate(90deg); }
.dash-day-row.collapsed .dash-day-chevron { transform: rotate(0deg); }
.dash-day-icon    { font-size: 15px; }
.dash-day-weekday { font-weight: 700; font-size: 14px; color: var(--brand); }
.dash-day-hijri   { font-size: 12px; color: var(--muted); }
.dash-day-summary { margin-inline-start: auto; font-size: 12px; color: var(--muted); }
.dash-day-body    { padding: 12px 14px; border-top: 1px solid var(--border); }

/* جدول الأقسام */
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th { padding: 8px 10px; font-size: 12px; text-align: center; }
.dash-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.tc { text-align: center; }
.dash-pct-row { display: flex; align-items: center; gap: 8px; }
.dash-mini-bar  { flex: 1; height: 7px; background: #e5e7eb; border-radius: 4px; overflow: hidden; min-width: 60px; }
.dash-mini-fill { height: 100%; background: var(--brand); border-radius: 4px; }
.table-wrap { overflow-x: auto; }

/* hidden fix لعناصر flex جديدة */

/* ── نموذج إدارة المستخدمين ── */
.user-form-wrap { margin-top: 16px; background: var(--brand-softer); border-radius: var(--radius-md); padding: 16px; }
.user-form-wrap h3 { margin: 0 0 12px; font-size: 15px; }
#usersTable .actions-cell { display: flex; gap: 6px; }

/* ── إخفاء عناصر إدارة القاعات والتوزيع عن دور المشرف ── */
html[data-role="supervisor"] #roomForm         { display: none !important; }
html[data-role="supervisor"] #roomsTable       { display: none !important; }
html[data-role="supervisor"] #printLabelsBtn   { display: none !important; }
html[data-role="supervisor"] #bulkCardsBtn     { display: none !important; }
html[data-role="supervisor"] #roomMapBtn       { display: none !important; }
html[data-role="supervisor"] #statsBtn         { display: none !important; }
html[data-role="supervisor"] #clearAllocBtn    { display: none !important; }
html[data-role="supervisor"] #roomMapPanel     { display: none !important; }
html[data-role="supervisor"] #statsPanel       { display: none !important; }
html[data-role="supervisor"] #sessionPicker    { display: none !important; }
html[data-role="supervisor"] #allocResult      { display: none !important; }
html[data-role="supervisor"] #allocError       { display: none !important; }
html[data-role="supervisor"] #noDataMsg        { display: none !important; }
html[data-role="supervisor"] #allocSection     { display: none !important; }

/* ── الإعدادات: أقسام المدير مخفية عن المنسق (المنسق يرى المراقبين فقط) ── */
html[data-role="coordinator"] #settingsForm     { display: none !important; }
.invig-form-wrap { margin-top: 16px; padding: 14px 16px; background: var(--brand-softer); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* ── إخفاء بطاقات لوحة المنسق/المدير عن المشرف ── */
html[data-role="supervisor"] #dashStatusCard    { display: none !important; }
html[data-role="supervisor"] #dashChecklistCard { display: none !important; }
html[data-role="supervisor"] #dashSessionsCard  { display: none !important; }
html[data-role="supervisor"] #dashDeptCard      { display: none !important; }

/* ── #dashSupervision مرئي للمشرف فقط ── */
html:not([data-role="supervisor"]) #dashSupervision { display: none !important; }

/* ── جدول المشرف: بطاقات الأيام ── */
.sv-no-data { color: var(--muted); font-size: 11pt; padding: 16px 0; }

.sv-day {
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 16px; overflow: hidden;
}
.sv-day-today { border-color: var(--brand); }

.sv-day-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--brand);
  color: #fff;
}
.sv-day-today .sv-day-head { background: var(--brand-dark); }

.sv-day-info { display: flex; align-items: center; gap: 10px; flex: 1; }
.sv-day-name { font-size: 14pt; font-weight: bold; }
.sv-day-hijri { font-size: 12pt; opacity: .88; }
.sv-today-badge {
  font-size: 9pt; background: #fff; color: var(--brand);
  border-radius: 12px; padding: 2px 10px; font-weight: bold;
}
.sv-day-stats { font-size: 10pt; opacity: .85; }

.sv-dl-btn { flex-shrink: 0; }

.sv-sess-lines { padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; }
.sv-sess-line {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 10.5pt; padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.sv-sess-line:last-child { border-bottom: none; }
.sv-sess-name { font-weight: bold; color: var(--brand); flex-shrink: 0; }
.sv-sess-time { font-size: 9.5pt; color: var(--muted); flex-shrink: 0; }
.sv-sess-rooms { color: var(--muted); }

/* ── شبكة توزيع المراقبين — البطاقة ظاهرة للمشرف، محتوى التحرير مخفي فقط ── */
html[data-role="supervisor"] #invigGridBody { display: none !important; }
html:not([data-role="supervisor"]) #invigRoomReportBtnSupervisor { display: none; }

.invig-grid-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.invig-ratio-label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.invig-ratio-label input { border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font-family: inherit; }

/* قائمة اختيار اليوم */
.invig-day-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.invig-day-label { font-weight: bold; font-size: 13px; white-space: nowrap; }
.invig-day-select {
  flex: 1; max-width: 320px;
  cursor: pointer; direction: rtl;
}

/* بلوكات الجلسات المكدَّسة */
.invig-sess-block { margin-bottom: 20px; }
.invig-sess-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--brand); color: #fff;
  padding: 8px 14px; border-radius: 8px 8px 0 0;
  font-weight: bold;
}
.invig-sess-name { font-size: 15px; }
.invig-sess-time-badge {
  background: rgba(255,255,255,0.2); border-radius: 12px;
  padding: 2px 10px; font-size: 12px; direction: ltr;
}
.invig-sess-block .invig-grid-table { border-radius: 0 0 8px 8px; overflow: hidden; }

.invig-grid-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.invig-grid-table th, .invig-grid-table td {
  border: 1px solid var(--border); padding: 6px 10px; text-align: right;
}
.invig-grid-table thead th { font-weight: 600; }

.invig-row-ok   td { background: #f0faf0; }
.invig-row-warn td { background: var(--warn-bg); }
.invig-row-short td { background: #fff3f3; }
.invig-row-empty td { background: var(--brand-softer); color: #aaa; }
.invig-ratio-warn { font-size: 11px; color: #92400e; margin-right: 6px; white-space: nowrap; }

.invig-chips-cell { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

.invig-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand); color: #fff;
  border-radius: 14px; padding: 3px 10px; font-size: 11.5px;
}
.invig-chip-del {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px; opacity: .8;
}
.invig-chip-del:hover { opacity: 1; }

.invig-add-sel {
  font-size: 11.5px; border: 1px dashed var(--border); border-radius: 14px;
  padding: 3px 8px; background: #fff; cursor: pointer; font-family: inherit;
  color: var(--brand);
}

/* استبدال طارئ */
.invig-chip-sub { background: #e67e22; }
.invig-chip-absent {
  background: #e8e8e8; color: var(--muted);
  text-decoration: line-through; opacity: 0.85;
}
.invig-role-tag { font-size: 10px; font-weight: bold; opacity: 0.85; text-decoration: none !important; }
.invig-role-tag.sub { color: #fff8f0; }
.invig-role-tag.absent { color: var(--muted); text-decoration: none; }
.invig-sub-badge { font-size: 12px; }
.invig-sub-btn {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 2px 6px; cursor: pointer; font-size: 12px; margin-inline-start: 4px;
  color: var(--brand-dark); opacity: .75;
}
.invig-sub-btn:hover { opacity: 1; background: var(--brand); color: #fff; border-color: var(--brand); }
.invig-no-avail { font-size: 11.5px; color: var(--muted); font-style: italic; }

/* أقسام قابلة للطي في الإعدادات */
.collapsible-h2 { cursor: pointer; user-select: none; }
.collapsible-h2::after { content: ' ▾'; opacity: 0.45; font-size: 0.8em; }
.collapsible-h2.collapsed::after { content: ' ▸'; }

/* زر الاعتماد المباشر في قائمة الجلسات */
.session-apply-btn {
  font-size: 0.82em;
  padding: 3px 10px;
  border-radius: 12px;
  flex-shrink: 0;
}

/* محرر توفّر المراقب */
.invig-avail-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin: 8px 0; }
.invig-avail-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.invig-avail-item input { width: auto; }

/* مركز الطباعة */
.pc-field { margin: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pc-field > label:first-child { font-weight: 600; font-size: 13px; min-width: 70px; }
.pc-check, .pc-radio { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.pc-check input, .pc-radio input { width: auto; }

/* Tab Guidance Cards */
.tab-guidance {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--info-bg);
  border: 1px solid var(--brand);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.tab-guidance-msg { font-size: 15px; font-weight: 600; color: var(--brand-dark); flex: 1 1 auto; }
.tab-guidance-btn { flex: 0 0 auto; }

/* ── فحص جودة البيانات ── */
.val-head { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.val-ok { color: #166534; font-weight: 600; margin: 6px 0 0; text-align: center; }
.val-group { margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.val-group summary { cursor: pointer; font-weight: 600; color: #92400e; }
.val-list { margin: 8px 0 0; padding-inline-start: 20px; font-size: 13px; }
.val-list li { margin: 2px 0; }
.val-more { color: var(--muted); font-style: italic; }

/* ── أرشيف الدورات ── */
.arch-create { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.arch-create input { flex: 1 1 260px; }

/* ── تقرير استخدام القاعات ── */
.ru-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.ru-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; text-align: center; }
.ru-card .v { font-size: 20px; font-weight: 700; color: var(--brand); display: block; }
.ru-card .l { font-size: 12px; color: var(--muted); }
.ru-note { font-size: 13px; margin: 4px 0; }
.ru-note.warn { color: #92400e; }
.ru-note.ok { color: #166534; }
.ru-bar { position: relative; background: #eee; border-radius: 4px; height: 16px; overflow: hidden; min-width: 80px; }
.ru-bar > i { display: block; height: 100%; background: var(--brand); }
.ru-bar > span { position: absolute; inset: 0; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.alloc-excluded-note { font-size: 13px; color: #1e40af; background: var(--info-bg); border: 1px solid #bfdbfe; border-radius: 8px; padding: 8px 12px; margin: 8px 0 0; }

/* أرقام جدولية موحّدة في كل الجداول */
.dash-table td, .rooms-table td, .alloc-table td, .audit-table td,
.search-table td, .rmap-table td { font-variant-numeric: tabular-nums; }

/* ── وضع العرض (DEMO) ────────────────────────────────────────────
   التعطيل هنا بصري فقط — المنع الحقيقي في الخادم (حارس يرفض كل ما ليس GET).
   يُستثنى ما داخل نافذة الدخول: هي الإدخال الوحيد المسموح في نسخة العرض. */
html[data-demo="1"] input:not(#loginOverlay input),
html[data-demo="1"] select,
html[data-demo="1"] textarea,
html[data-demo="1"] .dropzone {
  pointer-events: none;
  opacity: .62;
}
html[data-demo="1"] input:not(#loginOverlay input) { cursor: not-allowed; }

/* بيانات الدخول: مخفية دائماً إلا في وضع العرض */
.login-demo-hint { display: none; }
html[data-demo="1"] .login-demo-hint {
  display: block;
  margin: 10px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}
html[data-demo="1"] .login-demo-hint b {
  color: var(--brand);
  font-family: monospace;
  font-size: 14px;
  letter-spacing: .5px;
}

/* شريط دائم يعرّف الزائر بما يراه */
html[data-demo="1"] body::before {
  content: 'نسخة عرض — البيانات مزيفة، وكل تعديل معطَّل';
  display: block;
  background: var(--brand-dark, #14532d);
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 6px 12px;
  position: sticky;
  top: 0;
  z-index: 60;
}

/* النافذة المنبثقة التي تشرح ماذا كان الزرّ سيُنتج */
#demoNote {
  position: fixed;
  inset-inline-end: 18px;
  bottom: 18px;
  max-width: 380px;
  background: var(--card, #fff);
  color: var(--text, #111);
  border: 1px solid var(--border, #ddd);
  border-inline-start: 4px solid var(--brand, #14532d);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  padding: 14px 16px;
  padding-inline-start: 36px; /* مكان زرّ الإغلاق كي لا يركب العنوان */
  z-index: 100;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
#demoNote[data-open] { opacity: 1; transform: translateY(0); pointer-events: auto; }
#demoNote strong { display: block; color: var(--brand, #14532d); margin-bottom: 4px; }
#demoNote p { margin: 0; font-size: 14px; line-height: 1.6; }
#demoNote .demo-note-x {
  position: absolute; inset-inline-start: 8px; top: 6px;
  background: none; border: 0; font-size: 20px; line-height: 1;
  color: var(--muted, #666); cursor: pointer; padding: 2px 6px;
}