/* ============================================================================
   لوحة إدارة منصة حضور برو

   ملف قائم بذاته لا يستورد شيئًا: اللوحة تُخدَم من أصل منفصل (admin.hudoorpro.com)
   فلا تصلها ملفات نطاق المدارس، وCSP تمنع أي مصدر خارجي. القيم مكرّرة من نظام
   التصميم عمدًا — التكرار هنا ثمن العزل، لا سهو.

   والخطوط من النظام لا من CDN: خطّ خارجي يعني `font-src` مفتوحًا وطلبًا يخرج
   من صفحة تدير المنصة كلها.
   ============================================================================ */

:root {
  --blue-50:#eff5fb; --blue-100:#dbe8f6; --blue-200:#b9d2ec; --blue-400:#5a90c7;
  --blue-600:#14518e; --blue-700:#114478; --blue-800:#0e3760; --blue-900:#0a2845;
  --green-50:#ecf7f1; --green-200:#a8dcc2; --green-600:#228c57; --green-800:#145736;
  --amber-50:#faf3e6; --amber-100:#f4e4c8; --amber-200:#e8cb95; --amber-600:#9a6a32; --amber-800:#5e3e1c;
  --red-50:#fcefec; --red-200:#efb1a5; --red-500:#b93424; --red-700:#822117;
  --bg:#e6edf4; --surface:#f7fafc; --surface-2:#eef4f8;
  --ink:#10263f; --muted:#66778a; --line:#c8d6e3;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px;
  --shadow-1:0 1px 3px rgba(16,38,63,.07);
  --shadow-3:0 8px 28px rgba(16,38,63,.13);
  --focus:0 0 0 3px rgba(20,81,142,.25);
  --font: "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-base); line-height:1.6;
}
.hidden { display:none !important; }
code { font-family:ui-monospace, "SF Mono", Menlo, monospace; }

/* ── عناصر عامة ── */
.btn {
  border:0; border-radius:var(--r-sm); font:inherit; font-weight:700;
  padding:9px var(--sp-4); cursor:pointer; transition:background-color 150ms ease;
}
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-primary { background:var(--blue-600); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--blue-700); }
.btn-danger { background:var(--red-500); color:#fff; }
.btn-danger:hover:not(:disabled) { background:var(--red-700); }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover:not(:disabled) { background:var(--surface-2); }
.btn-sm { padding:5px var(--sp-3); font-size:var(--fs-sm); }

input, select, textarea {
  width:100%; padding:9px var(--sp-3); border:1px solid var(--line);
  border-radius:var(--r-sm); background:#fff; color:var(--ink); font:inherit;
  font-size:var(--fs-base);
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue-400); box-shadow:var(--focus); }
label { display:block; font-size:var(--fs-sm); font-weight:700; margin-bottom:var(--sp-2); }
.hint { font-size:var(--fs-xs); color:var(--muted); margin:var(--sp-1) 0 0; }

.msg { border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); margin-bottom:var(--sp-4); }
.msg strong { display:block; margin-bottom:var(--sp-1); }
.msg.error { background:var(--red-50); border:1px solid var(--red-200); color:var(--red-700); }
.msg.info  { background:var(--blue-50); border:1px solid var(--blue-200); color:var(--blue-800); }
.msg.warn  { background:var(--amber-50); border:1px solid var(--amber-200); color:var(--amber-800); }
.msg.ok    { background:var(--green-50); border:1px solid var(--green-200); color:var(--green-800); }

/* ── شاشة الدخول ── */
.auth-wrap { min-height:100vh; display:flex; justify-content:center; padding:var(--sp-6); }
.auth-card {
  margin:auto; width:100%; max-width:460px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-3);
  padding:var(--sp-8);
}
.auth-head { text-align:center; margin-bottom:var(--sp-6); }
.auth-badge {
  display:inline-block; background:var(--blue-900); color:#fff; font-size:var(--fs-xs);
  font-weight:700; padding:3px var(--sp-3); border-radius:var(--r-full);
}
.auth-head h1 { font-size:var(--fs-xl); margin:var(--sp-3) 0 var(--sp-1); color:var(--blue-700); }
.auth-head p { margin:0; color:var(--muted); font-size:var(--fs-sm); }
.auth-form label { margin-top:var(--sp-4); }
.auth-form .btn { width:100%; margin-top:var(--sp-5); }
.copy-row { display:flex; gap:var(--sp-2); align-items:center; }
.copy-row code {
  flex:1 1 auto; min-width:0;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:9px var(--sp-3); font-size:var(--fs-sm);
  word-break:break-all; direction:ltr; text-align:left;
}
/* يبطل `.auth-form .btn{width:100%}` داخل صفّ النسخ: الزرّ العريض كان يبتلع
   الصفّ فينكمش المفتاح إلى عرض حرف واحد ويُعرض عموديًا */
.copy-row .btn { flex:0 0 auto; width:auto; margin-top:0; }
.backup-list {
  list-style:none; margin:0 0 var(--sp-5); padding:var(--sp-4);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2);
  direction:ltr; font-family:ui-monospace, Menlo, monospace; font-size:var(--fs-sm);
}

/* ── اللوحة ── */
.topbar {
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  background:var(--blue-900); color:#fff; padding:var(--sp-3) var(--sp-6);
}
.topbar-brand strong { display:block; font-size:var(--fs-md); }
.topbar-brand span { font-size:var(--fs-xs); opacity:.75; }
.tabs { display:flex; gap:var(--sp-1); flex:1; }
.tab {
  background:transparent; border:0; color:rgba(255,255,255,.75); font:inherit;
  font-weight:700; font-size:var(--fs-sm); padding:7px var(--sp-4);
  border-radius:var(--r-full); cursor:pointer;
}
.tab:hover { background:rgba(255,255,255,.1); color:#fff; }
.tab.active { background:rgba(255,255,255,.16); color:#fff; }
.topbar-end { display:flex; align-items:center; gap:var(--sp-3); }
.admin-name { font-size:var(--fs-sm); opacity:.85; }
.topbar .btn-ghost { color:#fff; border-color:rgba(255,255,255,.3); }
.topbar .btn-ghost:hover { background:rgba(255,255,255,.12); }

.content { padding:var(--sp-6); max-width:1400px; margin:0 auto; }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-5); }
.stat {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-4); box-shadow:var(--shadow-1);
}
.stat-label { font-size:var(--fs-xs); color:var(--muted); }
.stat-value { font-size:var(--fs-xl); font-weight:800; color:var(--blue-700); }

.toolbar { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.toolbar input, .toolbar select { width:auto; min-width:170px; flex:0 1 auto; }

.panel {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-5); margin-bottom:var(--sp-5); box-shadow:var(--shadow-1);
}
.panel h2 { margin:0 0 var(--sp-4); font-size:var(--fs-lg); }
.inline-form { display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:flex-end; }
.inline-form > div { flex:1 1 170px; }
.inline-form label { margin-bottom:var(--sp-2); }

.table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-1); }
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
th, td { padding:10px var(--sp-4); text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
th { background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); font-weight:700; }
tbody tr:last-child td { border-bottom:0; }
tbody tr.clickable { cursor:pointer; }
tbody tr.clickable:hover { background:var(--blue-50); }
.empty { padding:var(--sp-8); text-align:center; color:var(--muted); }

.pill { display:inline-block; padding:2px var(--sp-3); border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:700; }
.pill-active    { background:var(--green-50); color:var(--green-800); }
.pill-pending   { background:var(--amber-50); color:var(--amber-800); }
.pill-suspended { background:var(--red-50); color:var(--red-700); }
.pill-archived  { background:var(--surface-2); color:var(--muted); }
.pill-trial     { background:var(--blue-50); color:var(--blue-800); }
.pill-expired   { background:var(--red-50); color:var(--red-700); }
.pill-critical  { background:var(--red-50); color:var(--red-700); }
.pill-high      { background:var(--amber-50); color:var(--amber-800); }
.pill-medium    { background:var(--blue-50); color:var(--blue-800); }
.pill-low       { background:var(--surface-2); color:var(--muted); }

/* ── لوحة جانبية ونوافذ ── */
.drawer { position:fixed; inset:0; background:rgba(10,40,69,.45); display:flex; z-index:50; }
.drawer-panel {
  margin-inline-start:auto; width:min(760px,100%); background:var(--bg);
  height:100%; overflow-y:auto; box-shadow:var(--shadow-3);
}
.drawer-head {
  position:sticky; top:0; background:var(--blue-900); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
}
.drawer-head h2 { margin:0; font-size:var(--fs-lg); }
.drawer-head .btn-ghost { color:#fff; border-color:rgba(255,255,255,.3); font-size:var(--fs-lg); line-height:1; padding:2px 12px; }
.drawer-body { padding:var(--sp-5); }
.drawer-body h3 { font-size:var(--fs-md); margin:var(--sp-5) 0 var(--sp-3); }
.drawer-body h3:first-child { margin-top:0; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); }
.kv dt { color:var(--muted); }
.kv dd { margin:0; font-weight:700; }
.actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin:var(--sp-4) 0; }

.modal-panel {
  margin:auto; width:min(480px,100%); background:var(--surface);
  border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--shadow-3);
}
.modal-panel h3 { margin:0 0 var(--sp-2); font-size:var(--fs-lg); }
.modal-panel textarea { margin-top:var(--sp-3); }
.modal-actions { display:flex; gap:var(--sp-3); justify-content:flex-start; margin-top:var(--sp-4); }

.toast {
  position:fixed; inset-inline-start:50%; transform:translateX(50%); bottom:var(--sp-6);
  background:var(--blue-900); color:#fff; padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-sm); box-shadow:var(--shadow-3); font-size:var(--fs-sm);
  z-index:100; max-width:90vw;
}
.toast.err { background:var(--red-700); }

@media (max-width:640px) {
  .content { padding:var(--sp-4); }
  .topbar { gap:var(--sp-3); }
  .backup-list { grid-template-columns:1fr; }
}

/* اسم المدرسة زرّ لا نصّ: الصفّ القابل للنقر وحده لا يصله مستخدم لوحة
   المفاتيح ولا يعلنه قارئ الشاشة فعلًا قابلًا للتنفيذ. */
.link-btn {
  background:none; border:0; padding:0; font:inherit; font-weight:700;
  color:var(--blue-600); cursor:pointer; text-align:right;
}
.link-btn:hover { text-decoration:underline; }
.link-btn:focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }

/* ── لوحة القيادة ── */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:var(--sp-5); }
.dash-grid .panel { margin-bottom:0; }
.stat.stat-alert .stat-value { color:var(--red-500); }
.stat.stat-good  .stat-value { color:var(--green-600); }