/* =====================================================================
   نظام اختبارات القدرات — التصميم
   هوية: كحلي أزهري عميق + ذهبي + أخضر ملاعب، خط Cairo/Changa، RTL كامل
   ===================================================================== */
:root {
  --navy-900: #0a1a33;
  --navy-800: #0f2547;
  --navy-700: #16325f;
  --navy-600: #1e4178;
  --gold: #e8b96a;
  --gold-deep: #c9922f;
  --green: #1a936f;
  --green-soft: #d9f2e9;
  --red: #c0392b;
  --red-soft: #fdecea;
  --amber: #b7791f;
  --amber-soft: #fdf3d7;
  --ink: #1b2532;
  --muted: #64748b;
  --line: #dfe6f0;
  --bg: #f2f5fb;
  --card: #ffffff;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(15, 37, 71, .08);
  --shadow-lg: 0 18px 50px rgba(10, 20, 40, .25);
  --font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Changa', 'Cairo', sans-serif;
  --font-print: 'Rubik', 'Cairo', Tahoma, Arial, sans-serif;
  --dur: 600ms;
  --ease: cubic-bezier(.4, .1, .2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
[hidden] { display: none !important; }

/* ============================ شاشة الدخول ============================ */
.login-screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(110% 90% at 75% 8%, var(--navy-600) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  transition: background var(--dur) var(--ease);
  overflow: hidden;
}
.login-screen.lamp-on {
  background:
    radial-gradient(120% 100% at 72% 15%, #fff6e0 0%, #ffe9c2 38%, #ecd3a4 72%, #d9bd8c 100%);
}
.stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 22%, #fff9, transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 65%, #fff7, transparent 60%),
    radial-gradient(2px 2px at 48% 14%, #fff8, transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 42%, #fff6, transparent 60%),
    radial-gradient(2px 2px at 84% 26%, #fff9, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 70%, #fff6, transparent 60%),
    radial-gradient(2px 2px at 22% 84%, #fff5, transparent 60%);
  animation: twinkle 4s ease-in-out infinite alternate;
  transition: opacity var(--dur);
}
.login-screen.lamp-on .stars { opacity: 0; }
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }

.scene {
  position: relative; width: min(980px, 100%);
  display: flex; align-items: center; justify-content: center; gap: 2.5rem;
  padding: 1.25rem;
}
.lamp-wrap { position: relative; flex: 0 0 auto; width: 190px; user-select: none; }
.lamp-svg { width: 100%; height: auto; display: block; }
#lampBulb { transition: fill 400ms var(--ease); }
.lamp-on #lampBulb { fill: #ffd98a; filter: drop-shadow(0 0 16px rgba(255, 205, 110, .95)); }
#lampGlow { transition: opacity var(--dur) var(--ease); }
.lamp-on #lampGlow { opacity: 1; }
#lampShade { transition: fill 400ms var(--ease); }
.lamp-on #lampShade { fill: #caa15c; }
.lamp-on .lamp-base-shadow { fill: #caa15c44; }

.cord {
  position: absolute; top: 128px; right: 58px; width: 48px; min-height: 44px;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; touch-action: manipulation; outline-offset: 4px;
  transition: transform 160ms var(--ease);
}
.cord:focus-visible { outline: 2px solid var(--gold); }
.cord-line { width: 3px; height: 78px; border-radius: 2px; background: linear-gradient(#c9b183, #8f7a52); transition: height 160ms var(--ease); }
.cord-knob { width: 17px; height: 24px; border-radius: 9px; margin-top: -2px; background: linear-gradient(145deg, var(--gold), var(--gold-deep)); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.cord.pulling .cord-line { height: 102px; }
.cord.pulling { transform: translateY(5px); }
.cord.rebound { animation: rebound 420ms var(--ease); }
@keyframes rebound {
  0% { transform: translateY(5px); } 45% { transform: translateY(-6px); }
  75% { transform: translateY(2px); } 100% { transform: translateY(0); }
}
.hint { margin-top: .7rem; text-align: center; font-size: .85rem; color: #94a3c4; transition: opacity var(--dur); }
.lamp-on .hint { opacity: 0; }

.login-card {
  width: min(430px, 100%);
  background: rgba(255, 251, 240, .09);
  border: 1px solid rgba(255, 230, 180, .25);
  border-radius: 22px; padding: 2rem 1.8rem;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .12);
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity var(--dur) var(--ease) 150ms, transform var(--dur) var(--ease) 150ms, background var(--dur);
  color: #dfe7f5;
}
.lamp-on .login-card { opacity: 1; transform: none; pointer-events: auto; background: rgba(255, 252, 244, .72); color: #2c2313; }
.login-card > * { opacity: 0; transform: translateY(10px); transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
.lamp-on .login-card > * { opacity: 1; transform: none; }
.lamp-on .login-card > *:nth-child(1) { transition-delay: 240ms; }
.lamp-on .login-card > *:nth-child(2) { transition-delay: 340ms; }
.lamp-on .login-card > *:nth-child(3) { transition-delay: 440ms; }
.lamp-on .login-card > *:nth-child(4) { transition-delay: 520ms; }
.login-brand { text-align: center; margin-bottom: 1.2rem; }
.login-logo { font-size: 2.4rem; }
.login-brand h1 { font-family: var(--font-display); font-size: 1.45rem; margin: .3rem 0 .1rem; }
.login-brand p { font-size: .82rem; opacity: .85; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .88rem; margin-bottom: .35rem; font-weight: 600; }
.field .control { position: relative; }
.field input {
  width: 100%; padding: .78rem .95rem; border-radius: 12px; font-size: 1rem;
  border: 1px solid rgba(120, 95, 50, .35); background: rgba(255, 255, 255, .85); color: #22201a;
}
.field input:focus { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.toggle-pass {
  position: absolute; inset-inline-start: 6px; top: 50%; transform: translateY(-50%);
  min-width: 40px; min-height: 40px; border: 0; background: transparent; cursor: pointer; font-size: 1.05rem; color: #6b5a35;
}
.btn-login {
  width: 100%; padding: .9rem; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 1.08rem; font-weight: 700; color: #2a1f0c;
  background: linear-gradient(145deg, #f4cf8a, var(--gold-deep));
  box-shadow: 0 6px 20px rgba(160, 115, 45, .45);
  transition: transform 140ms, opacity 140ms;
}
.btn-login:hover:not(:disabled) { transform: translateY(-1px); }
.btn-login:disabled { opacity: .65; cursor: wait; }
.spinner { display: none; width: 18px; height: 18px; border: 3px solid rgba(60, 40, 10, .3); border-top-color: #3a2a10; border-radius: 50%; vertical-align: middle; margin-inline-start: .5rem; animation: spin .8s linear infinite; }
.btn-login.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.msg { min-height: 1.4rem; margin-top: .7rem; text-align: center; font-size: .9rem; }
.msg.error { color: #c0392b; font-weight: 600; }
.login-mode { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; font-size: .8rem; }
.link-btn { background: none; border: 0; color: inherit; cursor: pointer; text-decoration: underline; font-size: .8rem; opacity: .85; }
.mode-chip { padding: .15rem .6rem; border-radius: 99px; background: rgba(0,0,0,.15); font-size: .72rem; }
.conn-settings { margin-top: .8rem; padding: .9rem; border-radius: 12px; background: rgba(255,255,255,.5); display: grid; gap: .5rem; font-size: .85rem; }
.conn-settings input[type="url"] { padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--line); font-size: .8rem; }
.row-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.demo-creds { font-size: .72rem; opacity: .8; }
.demo-creds code { background: rgba(0,0,0,.08); padding: 0 .3rem; border-radius: 4px; direction: ltr; display: inline-block; }

/* ============================ هيكل التطبيق ============================ */
.app { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: 58px 1fr; grid-template-areas: 'sidebar topbar' 'sidebar content'; }
.topbar {
  grid-area: topbar; display: flex; align-items: center; gap: .8rem; padding: 0 1rem;
  background: linear-gradient(90deg, var(--navy-800), var(--navy-700));
  color: #eef2fb; position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow);
}
.topbar-brand { display: flex; flex-direction: column; line-height: 1.15; }
.topbar-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.topbar-year { font-size: .7rem; color: var(--gold); }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .55rem; }
.user-chip { font-size: .78rem; background: rgba(255,255,255,.12); padding: .25rem .7rem; border-radius: 99px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { background: rgba(255,255,255,.1); color: inherit; border: 0; border-radius: 10px; min-width: 38px; min-height: 38px; cursor: pointer; font-size: 1rem; }
.icon-btn:hover { background: rgba(255,255,255,.22); }
.menu-toggle { display: none; }
.conn-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.conn-dot.off { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.conn-dot.demo { background: var(--gold); box-shadow: 0 0 6px var(--gold); }

.sidebar {
  grid-area: sidebar; background: var(--navy-900); color: #c6d2ea; padding: .9rem .6rem;
  display: flex; flex-direction: column; gap: .15rem; overflow-y: auto;
  background-image:
    radial-gradient(circle at 85% 5%, rgba(232,185,106,.08) 0, transparent 40%),
    radial-gradient(circle at 10% 95%, rgba(26,147,111,.1) 0, transparent 45%);
}
.side-brand { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem 1rem; }
.side-brand .logo { font-size: 1.7rem; }
.side-brand b { font-family: var(--font-display); color: #fff; font-size: .95rem; line-height: 1.25; }
.nav-item {
  display: flex; align-items: center; gap: .7rem; padding: .68rem .8rem; border-radius: 11px;
  color: inherit; text-decoration: none; font-size: .93rem; font-weight: 600; cursor: pointer;
  border: 0; background: transparent; width: 100%; text-align: right;
  transition: background 140ms;
}
.nav-item:hover { background: rgba(255,255,255,.07); }
.nav-item.active { background: linear-gradient(90deg, rgba(232,185,106,.18), transparent); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.nav-item .ico { width: 1.4rem; text-align: center; }
.nav-sep { margin: .5rem .8rem; border: 0; border-top: 1px solid rgba(255,255,255,.08); }
/* تذييل القائمة الجانبية — حقوق وحدة التكنولوجيا (وسط، ذهبي، أنيق) */
.side-credit { margin-top: auto; padding: .9rem .6rem calc(.6rem + env(safe-area-inset-bottom)); text-align: center; line-height: 1.75; }
.side-credit .sc-rights { font-size: .72rem; font-weight: 800; letter-spacing: .5px; color: var(--gold); }
.side-credit .sc-unit {
  font-size: .74rem; font-weight: 900; margin-top: .15rem;
  background: linear-gradient(90deg, #f4cf8a, #fff2d8, var(--gold), #f4cf8a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold);
}
.side-credit .sc-name { font-size: .7rem; font-weight: 700; color: #cdd8ee; margin-top: .2rem; }

.content { grid-area: content; padding: 1.2rem; max-width: 1250px; width: 100%; min-width: 0; }

/* ============================ مكونات عامة ============================ */
.page-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h2 { font-family: var(--font-display); font-size: 1.35rem; color: var(--navy-800); }
.page-head .spacer { flex: 1; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; }
.btn {
  display: inline-flex; align-items: center; gap: .45rem; border: 0; cursor: pointer;
  background: var(--navy-700); color: #fff; padding: .55rem 1.05rem; border-radius: 10px;
  font-weight: 700; font-size: .9rem; transition: transform 120ms, box-shadow 120ms, opacity 120ms;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,37,71,.25); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.gold { background: linear-gradient(145deg, #f4cf8a, var(--gold-deep)); color: #2a1f0c; }
.btn.green { background: var(--green); }
.btn.red { background: var(--red); }
.btn.ghost { background: transparent; color: var(--navy-700); border: 1.5px solid var(--navy-700); }
.btn.sm { padding: .35rem .7rem; font-size: .8rem; border-radius: 8px; }
/* v1.2.1: تفاعل ضغط فوري لكل الأزرار + Focus واضح + حالة تحميل موحّدة (Spinner بـ currentColor للوضعين) */
button:active:not(:disabled), .btn:active:not(:disabled) { transform: scale(.98); }
.btn:focus-visible, button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.btn.is-loading { cursor: wait; opacity: 1; }
.btn-spin { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -0.15em; margin-inline-end: .35rem; opacity: .9; }
.chip { display: inline-block; padding: .18rem .65rem; border-radius: 99px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.chip.ok { background: var(--green-soft); color: var(--green); }
.chip.bad { background: var(--red-soft); color: var(--red); }
.chip.warn { background: var(--amber-soft); color: var(--amber); }
.chip.info { background: #e3ecfb; color: var(--navy-600); }
.chip.muted { background: #eef1f6; color: var(--muted); }

.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
table.data th { background: var(--navy-800); color: #fff; padding: .6rem .7rem; font-size: .8rem; white-space: nowrap; position: sticky; top: 0; }
table.data td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:nth-child(even) td { background: #f8fafd; }
table.data tr:hover td { background: #eff4fc; }
table.data tr.row-flash td { animation: rowFlash 1.6s ease-out; }
@keyframes rowFlash { 0% { background: #ffe9b8; } 100% { background: transparent; } }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.form-grid label, .fld label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .25rem; }
.form-grid input, .form-grid select, .form-grid textarea, .fld input, .fld select, .fld textarea {
  width: 100%; padding: .55rem .7rem; border-radius: 10px; border: 1.5px solid var(--line); background: #fff;
}
.form-grid input:focus, .form-grid select:focus, .fld input:focus, .fld select:focus { outline: 2px solid var(--navy-600); outline-offset: 0; border-color: var(--navy-600); }
/* v1.2.1: صفحة الإعدادات فقط (#admSettings) — Labels والحقول والزر متوسطة، المجموعة متمركزة
   بعرض مناسب على الشاشات الكبيرة، ومناسبة للموبايل. لا يمس باقي النظام أو جداول المستخدمين. */
#admSettings .form-grid { max-width: 640px; margin-inline: auto; }
#admSettings .form-grid label { text-align: center; }
#admSettings .form-grid input, #admSettings .form-grid select, #admSettings .form-grid textarea { text-align: center; }
#admSettings #setSave { display: block; margin: 1rem auto 0; }

.search-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.search-bar input[type="search"], .search-bar input[type="text"] {
  flex: 1; min-width: 220px; padding: .7rem 1rem; border-radius: 12px; border: 1.5px solid var(--line); font-size: 1.02rem;
}
.empty-state { text-align: center; color: var(--muted); padding: 2.2rem 1rem; }
.empty-state .big { font-size: 2.2rem; }

.toast-stack { position: fixed; bottom: 1rem; inset-inline-start: 1rem; z-index: 90; display: grid; gap: .5rem; max-width: 90vw; }
.toast { background: var(--navy-800); color: #fff; padding: .7rem 1.1rem; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: .9rem; animation: toastIn 240ms var(--ease); max-width: 420px; }
.toast.ok { background: var(--green); }
.toast.err { background: var(--red); }
/* تنبيه إداري: العملية نجحت لكن خطوة غير حرجة تعثّرت — ليس فشلًا ولا نجاحًا صامتًا */
.toast.warn { background: var(--amber); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }

.modal-backdrop { position: fixed; inset: 0; background: rgba(10, 20, 40, .55); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(3px); }
.modal { background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 1.2rem; animation: toastIn 200ms var(--ease); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.modal-head h3 { font-family: var(--font-display); color: var(--navy-800); }
.modal-head .icon-btn { background: #eef1f6; color: var(--ink); }

/* الماسح */
.scanner-modal { width: min(480px, 100%); }
.scanner-viewport { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 4/3; }
.scanner-viewport video { width: 100%; height: 100%; object-fit: cover; }
.scanner-frame { position: absolute; inset: 12%; border: 3px solid var(--gold); border-radius: 16px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.scanner-frame::after { content: ''; position: absolute; inset-inline: 6%; top: 50%; height: 2px; background: rgba(232,185,106,.9); animation: scanline 1.6s ease-in-out infinite alternate; }
@keyframes scanline { from { transform: translateY(-46px); } to { transform: translateY(46px); } }
.scanner-msg { text-align: center; font-size: .85rem; color: var(--muted); margin: .6rem 0; min-height: 1.2rem; }
.scanner-manual { display: flex; gap: .5rem; }
.scanner-manual input { flex: 1; padding: .55rem .8rem; border-radius: 10px; border: 1.5px solid var(--line); }

/* ============================ الداشبورد ============================ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kpi {
  border-radius: var(--radius); padding: .9rem 1rem; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-800)); box-shadow: var(--shadow);
  text-align: center; /* توسيط الرقم والنص داخل الإطار */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
}
.kpi .n, .kpi .t { position: relative; z-index: 1; } /* فوق الدائرة الزخرفية */
.kpi.green { background: linear-gradient(135deg, #1a936f, #11614a); }
.kpi.red { background: linear-gradient(135deg, #d35445, #a23327); }
.kpi.gold { background: linear-gradient(135deg, #dfae5c, #b07d20); color: #241a05; }
.kpi.slate { background: linear-gradient(135deg, #5a6b84, #3c4a60); }
.kpi::after { content: ''; position: absolute; inset-inline-end: -18px; top: -18px; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.1); }
.kpi .n { font-size: 1.7rem; font-weight: 900; font-family: var(--font-display); line-height: 1.1; }
.kpi .t { font-size: .78rem; opacity: .92; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.card h3.sec { font-family: var(--font-display); font-size: 1rem; color: var(--navy-800); margin-bottom: .7rem; display: flex; align-items: center; justify-content: center; gap: .4rem; text-align: center; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .82rem; }
.bar-track { height: 12px; background: #edf1f7; border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--navy-600), var(--navy-800)); transition: width 600ms var(--ease); }
.bar-fill.red { background: linear-gradient(90deg, #e07b6d, var(--red)); }
.bar-fill.green { background: linear-gradient(90deg, #43c59e, var(--green)); }
.bar-fill.gold { background: linear-gradient(90deg, #f4cf8a, var(--gold-deep)); }
.mini-list { display: grid; gap: .45rem; font-size: .83rem; }
.mini-list .row { display: flex; justify-content: space-between; gap: .6rem; border-bottom: 1px dashed var(--line); padding-bottom: .35rem; }
.mini-list .who { color: var(--muted); font-size: .75rem; }
.last-update { font-size: .74rem; color: var(--muted); }

/* ============================ التشكيل ============================ */
.committee-card { margin-bottom: .9rem; }
.committee-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.committee-head h4 { font-family: var(--font-display); color: var(--navy-800); font-size: 1.02rem; flex: 1; min-width: 200px; }
.committee-meta { font-size: .74rem; color: var(--muted); display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .15rem; }
.member-table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .85rem; }
.member-table th { background: #eef2f9; color: var(--navy-800); padding: .4rem .6rem; font-size: .76rem; }
.member-table td { padding: .35rem .6rem; border-bottom: 1px solid var(--line); }
.member-editor { display: grid; grid-template-columns: 2fr 1.3fr 1fr auto; gap: .4rem; margin-top: .4rem; align-items: center; }
.member-editor select, .member-editor input { padding: .45rem .55rem; border-radius: 8px; border: 1.5px solid var(--line); font-size: .84rem; width: 100%; }
.order-btns { display: inline-flex; gap: .25rem; }
.order-btns button { border: 0; background: #eef1f6; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; }

/* ============================ الرصد ============================ */
.entry-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .9rem; }
.entry-toolbar select { padding: .6rem .8rem; border-radius: 10px; border: 1.5px solid var(--line); font-weight: 600; min-width: 230px; }
.btn-scan { background: linear-gradient(135deg, var(--green), #11614a); font-size: 1rem; padding: .65rem 1.2rem; }
.decision-btns { display: inline-flex; gap: .35rem; }
.decision-btns button {
  border: 1.5px solid var(--line); background: #fff; border-radius: 8px; padding: .3rem .7rem; cursor: pointer; font-weight: 700; font-size: .8rem;
}
.decision-btns button.fit.on { background: var(--green); border-color: var(--green); color: #fff; }
.decision-btns button.unfit.on { background: var(--red); border-color: var(--red); color: #fff; }
.raw-input { width: 92px; padding: .4rem .5rem; border-radius: 8px; border: 1.5px solid var(--line); text-align: center; font-weight: 700; }
.std-score { font-weight: 900; color: var(--navy-700); min-width: 2.2rem; display: inline-block; text-align: center; }
.save-state { font-size: .72rem; min-width: 60px; display: inline-block; }
.save-state.saving { color: var(--amber); }
.save-state.saved { color: var(--green); }
.save-state.error { color: var(--red); }

/* ============================ التقارير ============================ */
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.report-card { cursor: pointer; border: 2px solid transparent; transition: border-color 140ms, transform 140ms; text-align: center; }
.report-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.report-card .ico { font-size: 1.7rem; display: block; }
.report-card h4 { font-size: .95rem; margin: .35rem 0 .2rem; color: var(--navy-800); }
.report-card p { font-size: .76rem; color: var(--muted); }

/* ============================ إشعارات جودة ============================ */
.alert { border-radius: 12px; padding: .7rem 1rem; font-size: .85rem; margin-bottom: .8rem; }
.alert.warn { background: var(--amber-soft); color: #7a5613; border: 1px solid #ecd9a5; }
.alert.info { background: #e8f0fd; color: var(--navy-700); border: 1px solid #c9daf5; }
.alert.err { background: var(--red-soft); color: var(--red); border: 1px solid #f3c1ba; }

/* ============================ استجابة ============================ */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'topbar' 'content'; }
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: 260px; z-index: 40;
    transform: translateX(100%); visibility: hidden;
    transition: transform 240ms var(--ease), visibility 0s linear 240ms; box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: none; visibility: visible; transition-delay: 0s; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .scene { flex-direction: column; gap: .5rem; }
  .lamp-wrap { width: 140px; }
  .cord { right: 42px; top: 96px; }
  .content { padding: .8rem; }
  .member-editor { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .topbar { gap: .45rem; padding-inline: .55rem; }
  .topbar-brand { min-width: 0; flex: 1; }
  .topbar-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .84rem; }
  .topbar-year, .topbar .env-badge, .topbar #btnSync, .topbar .conn-dot,
  .topbar .user-chip, .topbar #btnSound, .topbar #btnChangePass { display: none; }
  .topbar-actions { flex: none; gap: .3rem; margin-inline-start: 0; }
  .topbar .mode-btns { gap: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  /* القاعدة العامة تجعل مدة الدوران 1ms أي دورانًا محمومًا — أسوأ من السكون.
     Spinner الأزرار يبقى ظاهرًا كمؤشر ثابت بلا حركة. */
  .btn-spin { animation: none !important; }
}

/* ============================ الطباعة A4 RTL ============================ */
.print-area { display: none; }
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { display: block !important; position: absolute; inset: 0; background: #fff; }
  .no-print { display: none !important; }
  /* الجزء 6: الوضع الليلي لا يطبع — ورق أبيض ونص أسود مهما كانت الثيمة،
     وإخفاء عناصر النظام (توست/شريط مزامنة/زر أعلى/سكلتون) من الورق */
  html, body, :root[data-theme="dark"] body { background: #fff !important; }
  .print-area, .print-area * { color-scheme: light; box-shadow: none !important; text-shadow: none !important; }
  .toast, #syncBanner, .btn-top, .skeleton, .modal-backdrop, #genericModal { display: none !important; visibility: hidden !important; }
  @page { size: A4 portrait; margin: 10mm 8mm 13mm; }
  @page landscape { size: A4 landscape; margin: 9mm 8mm 12mm; }
}
.print-page { direction: rtl; page-break-after: always; font-family: var(--font-print); color: #000; padding: 0 1mm; position: relative; }
.print-page:last-child { page-break-after: auto; }
.print-page.landscape { page: landscape; }

/* ===== Header (الشكل المعتمد): كتلة بأقصى يمين الصفحة (RTL) بعرض المحتوى، أسطرها
   الثلاثة متوسطة فيما بينها. خط Rubik صغير مضغوط. لا توسيط على عرض الصفحة، لا Grid
   ثلاثي، لا شعار يدفع للوسط، لا مسافات يدوية ولا  . (margin-left:auto يدفعها لليمين) ===== */
.print-header { width: max-content; max-width: 60%; margin: 0 0 2mm auto; text-align: center;
  font-family: var(--font-print); line-height: 1.35; }
.print-header__university { font-size: 10pt; font-weight: 700; }
.print-header__college { font-size: 10pt; font-weight: 700; }
.print-header__year-line { font-size: 8.5pt; font-weight: 600; margin-top: .3mm; }
/* عبارة العام في كتلة واحدة لا تنكسر، والعام ملاصق ومعزول اتجاهيًا وملوّن بالأحمر */
.print-year-wrap { white-space: nowrap; }
.print-year-token { unicode-bidi: isolate; }
.print-year { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.print-year, .print-year-suffix { color: #b00; }

/* ===== صندوق عنوان التقرير (الجزء 6): أعرض وأقصر — سطران أو ثلاثة في A4،
   min-height لا height صلبًا فلا يُقص النص، ويتوسع تلقائيًا في Landscape ===== */
.print-title-box { width: min(94%, 194mm); margin: 2mm auto 3.5mm; padding: 2mm 6mm; min-height: 12mm;
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.45;
  border: 2px solid #000; border-radius: 7px; font-weight: 900; font-size: 12pt; break-inside: avoid; page-break-inside: avoid; }
.print-page.landscape .print-title-box { width: min(94%, 275mm); }
.print-title-box .yr { color: #b00; }
/* عنوان التشكيل متوسط: العنوان الأساسي يلتف طبيعيًا، و«الرياضة للبنين بالقاهرة» كتلة
   لا تنكسر (nowrap) فلا ينفصل «للبنين» عن «بالقاهرة»، ثم سطر العام أسفله بمسافة بسيطة. */
.formation-print-title { text-align: center; font-family: "Rubik", "Cairo", Tahoma, Arial, sans-serif; }
.formation-print-title__main { font-size: 12pt; font-weight: 900; line-height: 1.35; }
.formation-title-location { white-space: nowrap; }
.formation-print-title__year { margin-top: 1.6mm; font-size: 10.5pt; font-weight: 800; }

/* ===== الجداول (الجزء 6): thead/tbody صريحان — الرأس يتكرر مع كل صفحة ===== */
.print-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.print-table thead { display: table-header-group; }
.print-table tbody { display: table-row-group; }
.print-table th { background: #ffe08a; border: 1.2px solid #000; padding: 1.6mm 1.2mm; font-weight: 900; font-size: 10.5pt; }
.print-table td { border: 1px solid #000; padding: 1.35mm 1.2mm; text-align: center; }
.print-table td.name { text-align: right; padding-inline-start: 2mm; }
.print-table tr { break-inside: avoid; page-break-inside: avoid; }
.print-table tr.dup td { background: #ffd9d9; }
.print-table td[dir="ltr"] { unicode-bidi: isolate; }
/* v1.2.1: كشف الرصد الإلكتروني — أعمدة منضبطة بعروض colgroup ثابتة (لا توزيع تلقائي عشوائي):
   table-layout: fixed + خط طباعة عربي، النصوص متوسطة والاسم يمينًا، التفاف آمن للنصوص الطويلة
   دون تقسيم الرقم القومي (14 رقمًا) أو الكود بصورة قبيحة (nowrap لهما). */
.print-table[data-sheet="direct"] { table-layout: fixed; width: 100%; font-family: "Rubik", "Cairo", Tahoma, Arial, sans-serif; }
.print-table[data-sheet="direct"] th { font-size: 8.6pt; padding: 1.3mm .8mm; overflow-wrap: anywhere; word-break: normal; }
.print-table[data-sheet="direct"] td { overflow-wrap: anywhere; word-break: normal; }
.print-table[data-sheet="direct"] td.nid, .print-table[data-sheet="direct"] td.code-c { overflow-wrap: normal; white-space: nowrap; }
.print-preview-note { border: 1.4px dashed #b45309; background: #fff7ed; color: #7c2d12; font-weight: 800; font-size: 9pt; padding: 1.4mm 2mm; margin: 0 0 2mm; border-radius: 2mm; text-align: center; }
.unset-banner { background: #fef3c7; border: 2px solid #d97706; color: #78350f; font-weight: 800; padding: .7rem 1rem; border-radius: 12px; margin: 0 0 .8rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* ===== التوقيعات (نهاية كل صفحة) + سطر الصفحة (كل صفحة) — مضغوطة بلا فراغ ضخم،
   الصفة فوق الاسم، عمودان متساويان، ولا تنقسم بين صفحتين ===== */
.print-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 30mm; margin-top: 8px; align-items: start;
  break-inside: avoid; page-break-inside: avoid; }
.print-signature { text-align: center; }
.print-signature .ps-title, .print-signature .ps-name { display: block; width: 100%; text-align: center; font-weight: 900; font-size: 10.5pt; }
.print-signature .ps-name { margin-top: 5mm; }
.print-pageline { display: flex; justify-content: space-between; align-items: center; gap: 6mm;
  margin-top: 3mm; padding-top: 1.5mm; border-top: .8px solid #999; font-size: 8.6pt; font-weight: 700; color: #333; }
.print-pageline .pl-note { text-align: right; }
.print-pageline .pl-caption { text-align: center; flex: 1; }
.print-pageline .pl-page { text-align: left; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.print-qr { width: 15mm; height: 15mm; }
.formation-committee { border: 1.3px solid #000; border-radius: 5px; margin-bottom: 4mm; overflow: hidden; break-inside: avoid; page-break-inside: avoid; }
.formation-committee .fc-title { background: #bcd2ee; text-align: center; font-weight: 900; padding: 1.6mm; font-size: 11pt; border-bottom: 1.3px solid #000; }
.upper-board-box { border: 2px solid #000; border-radius: 10px; padding: 3mm; margin-bottom: 4mm; }
.ub-row { text-align: center; margin-bottom: 2mm; }
.ub-role { background: #bcd2ee; border: 1.2px solid #000; display: inline-block; padding: .8mm 6mm; font-weight: 900; font-size: 10.5pt; border-radius: 3px; }
.ub-name { color: #b00; font-weight: 900; font-size: 11pt; margin-top: 1mm; }

/* =====================================================================
   إضافات: الوضع الليلي + الرصد الإلكتروني + نوافذ التأكيد + فورم الدخول
   ===================================================================== */

/* ------------ الوضع الليلي ------------ */
[data-theme="dark"] {
  --ink: #e6ecf7;
  --muted: #94a3bd;
  --line: #2a3a55;
  --bg: #0c1626;
  --card: #14233b;
  --green-soft: #123328;
  --red-soft: #3a1a16;
  --amber-soft: #33270e;
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .table-wrap,
[data-theme="dark"] table.data { background: var(--card); }
[data-theme="dark"] table.data td { border-color: var(--line); }
[data-theme="dark"] table.data tr:nth-child(even) td { background: #182a46; }
[data-theme="dark"] table.data tr:hover td { background: #1e3354; }
[data-theme="dark"] .form-grid input, [data-theme="dark"] .form-grid select, [data-theme="dark"] .form-grid textarea,
[data-theme="dark"] .fld input, [data-theme="dark"] .fld select, [data-theme="dark"] .fld textarea,
[data-theme="dark"] .search-bar input, [data-theme="dark"] .entry-toolbar select,
[data-theme="dark"] .raw-input, [data-theme="dark"] .member-editor select, [data-theme="dark"] .member-editor input,
[data-theme="dark"] .scanner-manual input, [data-theme="dark"] textarea {
  background: #0f1c31; color: var(--ink); border-color: var(--line);
}
[data-theme="dark"] .modal { background: var(--card); color: var(--ink); }
[data-theme="dark"] .modal-head .icon-btn { background: #22344f; color: var(--ink); }
[data-theme="dark"] .member-table th { background: #1d3050; color: #dfe8f7; }
[data-theme="dark"] .member-table td { border-color: var(--line); }
[data-theme="dark"] .page-head h2, [data-theme="dark"] .card h3.sec, [data-theme="dark"] .report-card h4 { color: #cfe0f8; }
/* أسماء اللجان وعناوين البطاقات في الوضع الليلي (كانت navy-800 غير ظاهرة) */
[data-theme="dark"] .committee-head h4, [data-theme="dark"] .committee-card h4,
[data-theme="dark"] .committee-card h3, [data-theme="dark"] .committee-card b { color: #e6ecf7; }
[data-theme="dark"] .committee-meta { color: #9fb0cc; }
[data-theme="dark"] .btn.ghost { color: #9db8e0; border-color: #9db8e0; }
[data-theme="dark"] .decision-btns button { background: #0f1c31; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .order-btns button { background: #22344f; color: var(--ink); }
[data-theme="dark"] .bar-track { background: #0f1c31; }
[data-theme="dark"] .chip.info { background: #1d3557; color: #9cc0f0; }
[data-theme="dark"] .chip.muted { background: #22344f; color: #94a3bd; }
[data-theme="dark"] .alert.info { background: #14263f; color: #a9c6ef; border-color: #26405f; }
[data-theme="dark"] .alert.warn { background: #33270e; color: #e8c884; border-color: #4d3d18; }
[data-theme="dark"] .alert.err { background: #3a1a16; color: #f2a297; border-color: #57271f; }
[data-theme="dark"] .std-score { color: #9cc0f0; }
[data-theme="dark"] .empty-state { color: #7d90ad; }
[data-theme="dark"] .conn-settings { background: rgba(20, 35, 59, .7); }
/* الطباعة تبقى فاتحة دائمًا */
.print-area, .print-area * { color-scheme: light; }

/* ------------ أزرار التوب بار الإضافية ------------ */
.topbar .mode-btns { display: inline-flex; gap: .35rem; }

/* ------------ نافذة تأكيد فاخرة ------------ */
.modal-backdrop { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
/* v1.2.1: margin-inline auto — النافذة (420px) داخل صندوق أعرض (560px) كانت تلتصق ببداية
   السطر (يمين RTL) فيبدو المحتوى غير متوسط رغم text-align — الآن الكتلة نفسها في المنتصف. */
.confirm-modal { text-align: center; width: min(420px, 100%); margin-inline: auto; }
.confirm-modal .cm-ico { display: block; text-align: center; }
.confirm-modal h3, .confirm-modal p { text-align: center; }
.confirm-modal .row-btns .btn { text-align: center; justify-content: center; }
.confirm-modal .cm-ico { font-size: 3rem; line-height: 1; margin-bottom: .5rem; animation: popIn 300ms var(--ease); }
.confirm-modal h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--navy-800); margin-bottom: .4rem; }
[data-theme="dark"] .confirm-modal h3 { color: #cfe0f8; }
.confirm-modal p { font-size: .9rem; color: var(--muted); margin-bottom: 1.1rem; }
.confirm-modal .row-btns { justify-content: center; gap: .7rem; flex-wrap: wrap; }
.confirm-modal .row-btns .btn { min-width: 120px; }
.logout-modal .cm-ico { font-size: 2.6rem; }
@keyframes popIn { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ===== v1.2.1: نافذة تغيير كلمة المرور ===== */
/* رأس متوسط: الأيقونة والعنوان في المنتصف، وزر الإغلاق مطلق فلا يزيح التوسيط */
.modal-head-center { display: block; text-align: center; position: relative; margin-bottom: 1rem; }
.modal-head-center .cp-title { font-family: var(--font-display); color: var(--navy-800); font-size: 1.25rem; margin: 0; }
[data-theme="dark"] .modal-head-center .cp-title { color: #cfe0f8; }
.modal-head-center .cp-x { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); }
.cp-msg { border-radius: 10px; padding: .55rem .7rem; font-size: .86rem; font-weight: 700; text-align: center; margin-bottom: .8rem; }
.cp-msg.err { background: var(--red-soft); color: var(--red); }
.cp-msg.ok { background: var(--green-soft); color: var(--green); }
/* حقل كلمة المرور: Label فوق الحقل، أيقونة بادئة، زر عين في النهاية — RTL صحيح بلا تغطية للنص */
.pw-field { margin-bottom: .7rem; }
.pw-field > label { display: block; font-size: .86rem; font-weight: 700; margin-bottom: .3rem; color: var(--ink); }
.pw-control { position: relative; display: block; }
.pw-control .pw-ico {
  position: absolute; inset-inline-start: .7rem; top: 50%; transform: translateY(-50%);
  font-size: 1.02rem; opacity: .8; pointer-events: none; line-height: 1;
}
.pw-input {
  width: 100%; padding: .6rem 2.9rem .6rem 2.9rem; border-radius: 10px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-size: 1rem;
}
[data-theme="dark"] .pw-input { background: #16233b; border-color: #334566; color: var(--ink); }
.pw-input:focus { outline: 2px solid var(--navy-600); border-color: var(--navy-600); }
/* لا رمز عين مزدوج من ميزة المتصفح الأصلية (Edge/IE) بجانب زرّنا */
.pw-input::-ms-reveal, .pw-input::-ms-clear { display: none; }
.pw-eye {
  position: absolute; inset-inline-end: .3rem; top: 50%; transform: translateY(-50%);
  min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; color: var(--muted); border-radius: 8px; padding: 0;
}
.pw-eye:hover { color: var(--navy-700); background: rgba(120,130,150,.12); }
.pw-eye:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
[data-theme="dark"] .pw-eye { color: #cbd5e1; }
[data-theme="dark"] .pw-eye:hover { color: #fff; background: rgba(200,210,230,.14); }
.cp-actions { justify-content: center; }

/* ===== §7: تفاعل موحّد لكل الأزرار (إضافي لما في v1.2.1) ===== */
[role="button"]:active:not([aria-disabled="true"]):not(:disabled) { transform: scale(.98); }
[role="button"]:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.icon-btn { transition: transform 120ms var(--ease), background 140ms, filter 120ms; }
.icon-btn:hover:not(:disabled) { filter: brightness(1.06); }
.icon-btn:active:not(:disabled) { transform: scale(.94); }
button:disabled, .btn:disabled, .icon-btn:disabled, [aria-disabled="true"] { cursor: not-allowed; }
button[aria-busy="true"], .btn[aria-busy="true"] { cursor: wait; }
/* لمس الموبايل: إبراز الضغط ولو غاب Hover */
@media (hover: none) {
  .btn:active:not(:disabled), button:active:not(:disabled) { filter: brightness(.96); }
}
.modal.shake { animation: shakeX 500ms var(--ease); }
@keyframes shakeX {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); }
}

/* ------------ فورم الدخول: أيقونات + عين أقصى اليسار + الحقوق ------------ */
.field .control.with-ico input { padding-inline-start: 2.6rem; }
.field .ico-start {
  position: absolute; inset-inline-start: .8rem; top: 50%; transform: translateY(-50%);
  font-size: 1.05rem; opacity: .75; pointer-events: none;
}
.field .control.with-eye input { padding-left: 3rem; }
.toggle-pass { inset-inline-start: auto !important; left: 6px !important; right: auto !important; }
.login-footer {
  margin-top: 1.1rem; padding-top: .8rem; text-align: center; font-size: .72rem; line-height: 1.9;
  border-top: 1px dashed rgba(120, 95, 50, .35);
}
.login-footer .lf-rights { font-weight: 700; letter-spacing: .3px; opacity: .85; }
.login-footer .lf-unit {
  display: inline-block; font-weight: 900; font-size: .78rem;
  background: linear-gradient(90deg, var(--gold-deep), #8a6a33, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.login-screen:not(.lamp-on) .login-footer .lf-unit {
  background: linear-gradient(90deg, #f4cf8a, #fff2d8, #f4cf8a);
  -webkit-background-clip: text; background-clip: text;
}
.login-footer .lf-name { font-weight: 700; font-size: .74rem; opacity: .9; }
.login-footer .lf-sep { opacity: .45; margin: 0 .3rem; }

/* ------------ الرصد الإلكتروني (نمط الشيت القديم) ------------ */
.direct-toolbar { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.direct-toolbar .fld { min-width: 220px; }
.direct-code-input {
  font-size: 1.35rem; font-weight: 900; text-align: center; letter-spacing: 1px;
  width: 180px; padding: .55rem; border-radius: 12px; border: 2.5px solid var(--navy-600);
}
.direct-code-input:focus { outline: 3px solid var(--gold); border-color: var(--gold-deep); }
/* Outbox الرصد الدائمة: WAITING/SAVING/SAVED/FAILED/NEEDS_CONFIRMATION/CANCELLED */
.direct-queue { display: flex; flex-wrap: nowrap; gap: .4rem; margin: .5rem 0; padding-bottom: .2rem;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.q-op { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .6rem; border-radius: 99px;
  flex: 0 0 auto; font-size: .8rem; font-weight: 800; border: 1.5px solid transparent; white-space: nowrap; }
.q-op .q-code { font-size: .86rem; }
.q-op .q-ico { display: inline-flex; align-items: center; }
.q-op .q-ico .btn-spin { width: .85em; height: .85em; }
.q-op .q-state { font-weight: 600; font-size: .72rem; opacity: .85; }
.q-op .q-msg { font-weight: 600; font-size: .72rem; }
.q-op .q-act { padding: .12rem .5rem; font-size: .72rem; border-radius: 8px; }
.q-op.q-wait { background: #eef1f6; color: #475569; border-color: #cbd5e1; }
.q-op.q-saving { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
.q-op.q-saved { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.q-op.q-failed { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.q-op.q-confirm { background: #fef3c7; color: #92400e; border-color: #fbbf24; }
.q-op.q-cancelled { background: #f1f5f9; color: #64748b; border-color: #94a3b8; text-decoration: line-through; }
[data-theme="dark"] .q-op.q-wait { background: #1e293b; color: #cbd5e1; border-color: #334155; }
[data-theme="dark"] .q-op.q-saving { background: #0c4a6e; color: #bae6fd; border-color: #0369a1; }
[data-theme="dark"] .q-op.q-confirm { background: #78350f; color: #fde68a; border-color: #b45309; }
[data-theme="dark"] .q-op.q-cancelled { background: #1e293b; color: #94a3b8; border-color: #475569; }
.outbox-state { margin: .25rem 0; padding: .42rem .65rem; border-radius: 9px; font-size: .75rem; font-weight: 750;
  background: rgba(22, 163, 74, .10); color: var(--green); text-align: center; }
.outbox-state:empty { display: none; }
.outbox-state.offline, .outbox-state.err { background: var(--red-soft); color: var(--red); }
.outbox-state.standby { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .outbox-state.standby { background: #78350f; color: #fde68a; }
.queue-metrics { font-size: .72rem; color: var(--muted); font-weight: 700; margin: .2rem 0 .3rem;
  padding: .25rem .5rem; border-radius: 8px; background: rgba(148,163,184,.12); direction: rtl; }
/* v1.2.1: شريط أدوات الطابور (إعادة محاولة الكل/مسح المكتملة) + زر حذف عملية فاشلة */
.q-toolbar { display: inline-flex; flex: 0 0 auto; gap: .35rem; align-items: center; margin-inline-end: .3rem; }
.q-op .q-del { min-width: 26px; min-height: 26px; font-size: .72rem; border-radius: 6px;
  background: rgba(190,40,40,.12); color: var(--red); }
table.sheet { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 900px; background: #fff; }
[data-theme="dark"] table.sheet { background: var(--card); }
table.sheet th {
  background: #ffd54d; color: #1b2532; border: 1.5px solid #b7962f; padding: .55rem .5rem;
  font-weight: 900; font-size: .82rem; white-space: nowrap;
}
[data-theme="dark"] table.sheet th { background: #8a6d13; color: #fff8e0; border-color: #5e4a0c; }
table.sheet td { border: 1px solid #cfd6e4; padding: .42rem .5rem; text-align: center; }
[data-theme="dark"] table.sheet td { border-color: #33456600; border: 1px solid #334566; }
table.sheet td.st-name { text-align: right; font-weight: 700; }
table.sheet td.code-cell { color: #1d4ed8; font-weight: 900; text-decoration: underline; }
[data-theme="dark"] table.sheet td.code-cell { color: #7fb0ff; }
table.sheet .mark-pass { background: #fff176; color: #1d4ed8; font-weight: 900; font-size: 1.05rem; }
[data-theme="dark"] table.sheet .mark-pass { background: #6d5e10; color: #cfe3ff; }
table.sheet .mark-fail { color: #e11d2e; font-weight: 900; font-size: 1.1rem; }
table.sheet td.note-pass { font-weight: 900; color: #14532d; background: #dbeafe66; }
table.sheet td.note-fail { font-weight: 900; color: #e11d2e; }
table.sheet tr.direct-row--just-saved td {
  background: #dcfce7 !important; box-shadow: inset 0 2px #16a34a, inset 0 -2px #16a34a;
  animation: directSavedRowPulse .65s ease-out;
}
table.sheet tr.direct-row--just-saved td:first-child { box-shadow: inset -2px 0 #16a34a, inset 0 2px #16a34a, inset 0 -2px #16a34a; }
table.sheet tr.direct-row--just-saved td:last-child { box-shadow: inset 2px 0 #16a34a, inset 0 2px #16a34a, inset 0 -2px #16a34a; }
table.sheet tr.direct-row--current td {
  background: #fff7d6 !important; box-shadow: inset 0 2px #d97706, inset 0 -2px #d97706;
  animation: directCurrentRowPulse .55s ease-out;
}
table.sheet tr.direct-row--current td:first-child { box-shadow: inset -2px 0 #d97706, inset 0 2px #d97706, inset 0 -2px #d97706; }
table.sheet tr.direct-row--current td:last-child { box-shadow: inset 2px 0 #d97706, inset 0 2px #d97706, inset 0 -2px #d97706; }
[data-theme="dark"] table.sheet tr.direct-row--just-saved td { background: #123f2b !important; color: #dcfce7; }
[data-theme="dark"] table.sheet tr.direct-row--current td { background: #4a3410 !important; color: #fef3c7; }
@keyframes directSavedRowPulse { from { filter: brightness(1.18); } to { filter: brightness(1); } }
@keyframes directCurrentRowPulse { from { filter: brightness(1.12); } to { filter: brightness(1); } }
table.sheet td.ts { font-size: .68rem; color: #7c3aed; direction: rtl; }
[data-theme="dark"] table.sheet td.ts { color: #c4b5fd; }
.direct-stats { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.direct-stats .chip { font-size: .8rem; }
.direct-follow-bar { display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap; margin: .25rem 0; }
.direct-follow-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 800; color: var(--muted); cursor: pointer; }
.direct-follow-toggle input { accent-color: var(--green); }
.direct-follow-notice { display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap;
  margin: .3rem 0; padding: .4rem .65rem; border: 1px solid #f59e0b; border-radius: 9px;
  background: #fffbeb; color: #92400e; font-size: .76rem; font-weight: 800; text-align: center; }
.direct-follow-notice[hidden] { display: none; }
[data-theme="dark"] .direct-follow-notice { background: #4a2c0a; color: #fde68a; border-color: #b45309; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  table.sheet tr.direct-row--just-saved td, table.sheet tr.direct-row--current td { animation: none !important; }
}

/* =====================================================================
   v1.1 — Splash + شارة البيئة + تثبيت الرصد الإلكتروني + معالج الاستيراد
   ===================================================================== */

/* ------------ شاشة البدء ------------ */
.splash-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(110% 90% at 75% 8%, var(--navy-600) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  color: #eef2fb;
}
.splash-inner { text-align: center; }
.splash-logo { font-size: 3.4rem; animation: splashPulse 1.6s ease-in-out infinite; }
@keyframes splashPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.splash-title { font-family: var(--font-display); font-size: 1.5rem; margin-top: .6rem; }
.splash-sub { font-size: .8rem; color: var(--gold); margin-top: .2rem; }
.splash-spinner {
  width: 34px; height: 34px; margin: 1.1rem auto .6rem;
  border: 4px solid rgba(255,255,255,.18); border-top-color: var(--gold);
  border-radius: 50%; animation: spin .9s linear infinite;
}
.splash-msg { font-size: .8rem; color: #94a3c4; min-height: 1.2rem; }

/* ------------ شارة البيئة ------------ */
.env-badge {
  font-size: .68rem; font-weight: 900; padding: .2rem .6rem; border-radius: 99px;
  letter-spacing: .3px; white-space: nowrap;
}
.env-badge.production { background: #14532d; color: #a7f3d0; border: 1px solid #16a34a55; }
.env-badge.demo { background: #713f12; color: #fde68a; border: 1px solid #f59e0b55; }
.sync-meta { font-size: .68rem; color: #9fb0cc; white-space: nowrap; }

/* ------------ صفحة الرصد الإلكتروني: تثبيت علوي كامل ------------ */
:root { --direct-sticky-h: 0px; }
.direct-page { display: flex; flex-direction: column; height: calc(100dvh - 58px - 1.2rem); min-height: 420px; min-width: 0; }
.direct-sticky {
  position: sticky; top: 0; z-index: 15;
  background: var(--bg); padding-bottom: .55rem;
  box-shadow: 0 8px 14px -12px rgba(15, 37, 71, .35);
}
[data-theme="dark"] .direct-sticky { background: var(--bg); }
.direct-scroll {
  flex: 1; overflow: auto; border-radius: var(--radius); box-shadow: var(--shadow);
  background: #fff; scrollbar-gutter: stable; overscroll-behavior: contain;
  min-height: 160px;
}
.direct-scroll::after { content: ""; display: block; height: min(24vh, 220px); pointer-events: none; }
[data-theme="dark"] .direct-scroll { background: var(--card); }
.direct-scroll table.sheet { min-width: 1150px; }
.direct-scroll thead th { position: sticky; top: 0; z-index: 5; }
.direct-filters { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }
.direct-filters select, .direct-filters input {
  padding: .4rem .55rem; border-radius: 9px; border: 1.5px solid var(--line); font-size: .8rem; background: #fff;
}
[data-theme="dark"] .direct-filters select, [data-theme="dark"] .direct-filters input { background: #0f1c31; color: var(--ink); border-color: var(--line); }
.direct-filters .grow { flex: 1; min-width: 170px; }
.scanner-ready {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700;
  color: var(--green); white-space: nowrap;
}
.scanner-ready .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: twinkle 1.4s ease-in-out infinite alternate; }
.lock-chip { font-size: .68rem; padding: .1rem .5rem; border-radius: 99px; font-weight: 800; white-space: nowrap; }
.lock-chip.OPEN { background: var(--green-soft); color: var(--green); }
.lock-chip.LOCKED_MANUAL, .lock-chip.LOCKED_AUTO { background: #e5e7eb; color: #374151; }
[data-theme="dark"] .lock-chip.LOCKED_MANUAL, [data-theme="dark"] .lock-chip.LOCKED_AUTO { background: #334155; color: #cbd5e1; }
.lock-chip.REOPENED { background: var(--amber-soft); color: var(--amber); }
.supersede-details { text-align: right; font-size: .82rem; margin: .6rem 0; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; display: grid; gap: .25rem; }
.supersede-details b { color: var(--navy-700); }
[data-theme="dark"] .supersede-details b { color: #9cc0f0; }

@media (max-width: 900px) {
  .direct-scroll::after { height: min(14vh, 120px); }
  .direct-page { height: calc(100dvh - 58px - .8rem); }
  .direct-sticky .kpi-grid { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .direct-sticky .kpi { padding: .5rem .6rem; }
  .direct-sticky .kpi .n { font-size: 1.15rem; }
  .direct-sticky .kpi .t { font-size: .62rem; }
  .direct-page { padding-bottom: env(safe-area-inset-bottom); }
}

/* ------------ معالج الاستيراد ------------ */
.wizard-steps { display: flex; gap: .3rem; margin-bottom: .8rem; flex-wrap: wrap; }
.wizard-steps .step {
  font-size: .68rem; font-weight: 800; padding: .25rem .6rem; border-radius: 99px;
  background: #eef1f6; color: var(--muted);
}
[data-theme="dark"] .wizard-steps .step { background: #22344f; }
.wizard-steps .step.on { background: var(--navy-700); color: #fff; }
.dropzone {
  border: 2.5px dashed var(--line); border-radius: 14px; padding: 1.6rem 1rem; text-align: center;
  color: var(--muted); cursor: pointer; transition: border-color 140ms, background 140ms;
}
.dropzone:hover, .dropzone.drag { border-color: var(--gold-deep); background: var(--amber-soft); color: var(--amber); }
/* صف تنزيل نموذج الاستيراد أسفل منطقة الملف مباشرة — يلتف على الموبايل بلا تجاوز. */
.wiz-template-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem .7rem; margin-top: .7rem;
}
.wiz-template-row small { color: var(--muted); font-size: .74rem; line-height: 1.6; flex: 1 1 220px; }
/* ============ إعداد وطباعة الاستمارات (PHASE 4A2) ============ */
.pf-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .6rem;
}
.pf-selection { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .85rem; }
.pf-age-note { font-size: .75rem; color: var(--muted); margin: 0 0 .6rem; }
.pf-table { min-width: 1100px; }
.pf-table .pf-name { font-weight: 700; white-space: nowrap; }
.pf-table td, .pf-table th { vertical-align: middle; }
.pf-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.pf-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; }
/* المكرر لا يُميَّز باللون وحده — معه أيقونة ونص في عمود «نوع التسجيل». */
.pf-table tr.dup td { background: var(--red-soft); }
.pf-warn { font-size: .68rem; color: var(--muted); line-height: 1.5; margin-top: .2rem; max-width: 210px; }
.pf-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .7rem; margin-top: .8rem;
}
.pf-pager-info { font-size: .8rem; color: var(--muted); font-weight: 700; }
[data-theme="dark"] .pf-table tr.dup td { background: #3a1c1c; }
[data-theme="dark"] .pf-warn, [data-theme="dark"] .pf-age-note { color: #9fb3d1; }
@media (max-width: 600px) {
  .pf-toolbar { flex-direction: column; align-items: stretch; }
  .pf-toolbar .row-btns .btn { flex: 1 1 auto; }
  .pf-pager { justify-content: space-between; }
  .pf-pager .btn { flex: 1 1 40%; }
}

/* ============================ معاينة بطاقة اختبارات القدرات (PHASE 4B1 + 4B2.1)
   نافذة كبيرة + ورقة A4 **أفقية** كاملة ككتلة واحدة بلا أشرطة تمرير في وضع
   الملاءمة. المقياس يُحسب في JS ويُضبط حجم الحاوية على الأبعاد بعد التحجيم.
   لا قواعد @media print هنا — الطباعة غير مفعّلة في هذه المرحلة. */
.modal.pform-modal {
  width: min(96vw, 1600px); max-width: 96vw;
  height: min(94vh, 1050px); max-height: 94vh;
  padding: .7rem .9rem; overflow: hidden;
  display: flex; flex-direction: column; gap: .5rem;
}
.pform-modal .pform-head-bar { margin-bottom: 0; }
.pform-modal .pform-head-bar h3 { display: flex; align-items: center; gap: .45rem; }
.pform-doc-ico { font-size: 1rem; opacity: .75; } /* أيقونة عرض فقط — بلا معالج */
.pform-preview { display: flex; flex-direction: column; gap: .45rem; flex: 1; min-height: 0; }
.pform-bar {
  display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between;
  gap: .5rem; padding-bottom: .45rem; border-bottom: 1.5px solid var(--line); flex: 0 0 auto;
}
.pform-sides, .pform-nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pform-zoom { display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: .5rem; }
.pform-counter { font-size: .82rem; font-weight: 700; color: var(--muted); min-width: 5rem; text-align: center; }
.pform-warn-bar { flex: 0 0 auto; }
.pform-warn-bar:empty { display: none; }
.pform-note { font-size: .72rem; color: var(--muted); margin: 0; text-align: center; flex: 0 0 auto; }
/* مسرح المعاينة: الورقة في المنتصف بخلفية رمادية فاتحة وبلا تمرير في وضع الملاءمة. */
.pform-stage {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #e9ecf1; border-radius: 8px; padding: 8px;
}
.pform-stage.is-zoomed { overflow: auto; align-items: flex-start; justify-content: flex-start; }
/* الحاوية بأبعاد الورقة **بعد** التحجيم — فلا أشرطة تمرير وهمية. */
.pform-fitbox { position: relative; flex: 0 0 auto; margin: auto; }
/* موضع فيزيائي صريح (left/top) وتحجيم من الزاوية نفسها — يعمل في RTL بلا انزياح،
   فتطابق أبعاد الورقة بعد التحجيم أبعاد الحاوية تمامًا. */
.pform-sheet {
  position: absolute; top: 0; left: 0; transform-origin: top left;
  width: 297mm; height: 210mm; overflow: hidden; background: #fff;
}
.pform-template-svg {
  display: block; width: 100%; height: 100%;
  max-width: none; max-height: none; background: #fff;
}
.pform-template-svg [data-role="dynamic-data-layer"] { font-family: var(--font-print); }
.pform-template-loading,
.pform-template-error {
  width: 100%; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; color: #243247; background: #fff; text-align: center;
}
.pform-template-error p { margin: 0; font-weight: 700; }

/* ---------------- الورقة: A4 أفقي أبيض وأسود مطابق للنموذج المرجعي ----------------
   الشبكة `direction: ltr` وترتيب الأعمدة فيزيائي صريح، وكل عمود `rtl` داخليًا —
   فلا ينعكس ترتيب الأعمدة تلقائيًا مع اتجاه الصفحة. القياسات بالمليمتر لا بتوزيع
   مرن يتغيّر بطول النص. */
/* Legacy PHASE 4B1 HTML renderer styles: runtime-disabled by the 4B3 SVG
   mount path and retained temporarily to avoid a broad unrelated deletion. */
.pform {
  width: 297mm; height: 210mm; box-sizing: border-box; padding: 4mm;
  background: #fff; color: #000; font-family: var(--font-print);
  font-size: 8.2pt; line-height: 1.35; overflow: hidden;
  direction: ltr; display: grid; gap: 0;
  border: 1.2pt solid #000;
}
.pform-front { grid-template-columns: 14.5% 36% 49.5%; }
.pform-back { grid-template-columns: 63.7% 36.3%; }
.pf-col { direction: rtl; min-width: 0; display: flex; flex-direction: column; }
.pf-dotline { display: block; flex: 1; border-bottom: .9pt dotted #000; height: 3.6mm; min-width: 8mm; }

/* ===================== الوجه — العمود الأيسر (الهوية) ===================== */
.pf-identity { padding-inline-end: 2.5mm; align-items: center; }
.pf-photo { width: 100%; height: 30mm; border: 1.1pt solid #000; background: #d5d5d5; }
.pf-cap { font-size: 7.6pt; font-weight: 700; text-align: center; margin-top: .8mm; }
.pf-qrbox { width: 100%; border: 1.1pt solid #000; border-radius: 2mm; padding: 1.4mm 1mm; margin-top: 2mm; text-align: center; }
.pf-qr svg { display: block; margin: 0 auto; max-width: 100%; }
.pf-codeval { font-size: 9pt; font-weight: 800; unicode-bidi: isolate; }
.pf-sign { width: 100%; margin-top: auto; padding-bottom: 2mm; }
.pf-sign-line { min-width: 0; margin-top: 1.5mm; }

/* ===================== الوجه — العمود الأوسط (بيانات الطالب) ===================== */
.pf-student { padding: 0 3mm; }
.pf-org { text-align: center; font-weight: 800; }
.pf-univ { font-size: 17pt; letter-spacing: .2px; }
.pf-college { font-size: 10.4pt; }
.pf-rule { position: relative; width: 26mm; height: 0; border-top: 1.2pt solid #000; margin: 1.4mm auto 2mm; }
.pf-rule i { position: absolute; left: 50%; top: -1.1mm; width: 2.2mm; height: 2.2mm; background: #000; transform: translateX(-50%) rotate(45deg); }
.pf-titlebox {
  border: 1.1pt solid #000; border-radius: 2.5mm; text-align: center; font-weight: 800;
  font-size: 9.4pt; padding: 1.6mm 2mm; margin: 0 auto 2.4mm; width: 84%;
}
.pf-kv { display: flex; align-items: baseline; gap: 1.6mm; margin-bottom: 1.4mm; justify-content: flex-end; }
.pf-kv > span:first-child { font-weight: 700; }
.pf-chip { border: 1.1pt solid #000; padding: .6mm 6mm; font-size: 10.4pt; unicode-bidi: isolate; }
.pf-day { color: #333; }
.pf-kv-dots { justify-content: flex-start; }
.pf-kv-date { justify-content: flex-start; margin-top: 1.4mm; }
.pf-student-table { width: 100%; border-collapse: collapse; margin-top: .6mm; }
.pf-student-table caption {
  caption-side: top; background: #d9d9d9; border: 1pt solid #000; border-bottom: 0;
  font-weight: 800; padding: 1.1mm; text-align: center; font-size: 9.2pt;
}
.pf-student-table th, .pf-student-table td { border: .9pt solid #000; padding: .7mm 1.5mm; height: 6.1mm; }
.pf-student-table th { width: 46%; text-align: right; font-weight: 700; background: #f4f4f4; font-size: 8pt; }
.pf-student-table td.pform-from-system { font-weight: 700; text-align: center; }
.pf-student-table td.pform-ltr { direction: ltr; unicode-bidi: isolate; }
.pf-age { display: flex; align-items: baseline; gap: 1.6mm; font-weight: 700; margin-top: 1.8mm; justify-content: center; }
.pf-agepart { border-bottom: .9pt solid #000; min-width: 12mm; text-align: center; }
.pf-instructions { border: 1.1pt solid #000; margin-top: auto; margin-bottom: 1mm; }
.pf-instructions b { display: block; background: #d9d9d9; border-bottom: 1pt solid #000; padding: 1.1mm; text-align: center; font-size: 9.2pt; }
.pf-instructions p { margin: 0; padding: 1.6mm 2mm; font-size: 8.2pt; line-height: 1.65; }

/* ===================== الوجه — العمود الأيمن (اللجان) ===================== */
/* صفوف بارتفاعات ثابتة تطابق مواضع خطوط الفصل في المرجع. */
/* الخط الفاصل الرأسي للوجه: حافة عمود اللجان اليسرى (فيزيائية لا منطقية). */
.pf-committees {
  border-left: 1.5pt solid #000; padding-inline-start: 3mm; padding-inline-end: 1mm;
  display: grid; grid-template-rows: 1fr 1fr 1fr 0.72fr;
}
.pf-sec { padding: 1.6mm 0; display: flex; flex-direction: column; }
.pf-committees .pf-sec { border-bottom: 1.2pt solid #000; }
.pf-committees .pf-sec:last-child { border-bottom: 0; }
.pf-sec-title { font-weight: 800; font-size: 9pt; text-align: center; margin-bottom: 1.4mm; }
.pf-sec-sub { font-weight: 700; margin: 1mm 0 .8mm; }
.pf-sec-plain { font-weight: 700; margin-bottom: 1.4mm; }
.pf-line-kv { display: flex; align-items: baseline; gap: 1.4mm; margin-bottom: 1mm; }
.pf-dateslot { direction: ltr; unicode-bidi: isolate; }
.pform-dots { letter-spacing: .8px; }
.pf-verdict { border: 1.1pt solid #000; height: 8mm; width: 52%; margin: .6mm 0 1.6mm auto; }
.pf-members { margin-top: auto; }
.pf-members-cap { text-align: center; font-weight: 700; margin-bottom: .4mm; }
.pf-members-head { display: flex; justify-content: space-between; font-weight: 700; padding: 0 6mm 0 12mm; }
.pf-member { display: flex; align-items: flex-end; gap: 1.6mm; margin-top: 1.4mm; }
.pf-member-no { width: 4mm; font-weight: 700; }
.pf-approve { display: flex; flex-direction: column; align-items: center; gap: 1mm; margin-top: auto; }
.pf-approve .pf-dotline { width: 62%; flex: none; min-width: 0; }

/* ===================== الظهر ===================== */
.pf-back-main { padding-inline-end: 3mm; }
/* الخط الفاصل الرأسي للظهر: نفس أسلوب الوجه، عند 63.7% كما في المرجع. */
.pf-back-side { border-left: 1.5pt solid #000; padding-inline-start: 3mm; padding-inline-end: 1mm; }
.pf-back-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 3mm; }
.pf-back-head .pf-org { flex: 1; }
.pf-term { border: 1.1pt solid #000; padding: 1mm 2mm; font-weight: 700; white-space: nowrap; font-size: 8pt; }
.pf-term-ghost { border-color: transparent; visibility: hidden; }
.pf-day2 { display: flex; justify-content: space-between; align-items: baseline; gap: 3mm; margin-top: 1mm; font-size: 8.6pt; }
.pf-sub { font-weight: 800; margin: 1.6mm 0 1mm; }
.pf-fitness, .pf-skill { width: 100%; border-collapse: collapse; }
.pf-fitness th, .pf-fitness td, .pf-skill th, .pf-skill td {
  border: .9pt solid #000; padding: .7mm; text-align: center; font-size: 7.8pt;
}
.pf-fitness th, .pf-skill th { background: #ececec; font-weight: 700; }
.pf-fitness td { height: 12.6mm; }
.pf-c-ord { width: 8%; }
.pf-c-name { width: 20%; }
.pf-ord { font-weight: 700; }
.pf-tname { font-weight: 700; }
.pf-skill td { height: 11mm; }
.pf-total { display: flex; align-items: baseline; gap: 2mm; font-weight: 700; margin: 2mm 0; }
.pf-total .pf-dotline { max-width: 90mm; }
.pf-strip {
  margin-top: auto; border: 1.1pt solid #000; display: flex; align-items: center;
  justify-content: space-between; gap: 3mm; padding: 1.2mm 2mm;
}
.pf-strip-data { display: flex; gap: 5mm; flex-wrap: wrap; }
.pf-strip-data div { display: flex; align-items: baseline; gap: 1.2mm; }
.pf-strip-lbl { font-size: 8pt; font-weight: 700; }
.pf-strip-codes { display: flex; align-items: center; gap: 3mm; }
.pf-strip-bar { text-align: center; }
.pf-strip-bar svg { display: block; margin: 0 auto; }
.pf-sec-champs { border-bottom: 1.2pt solid #000; }
.pf-sec-champs .pf-dotline { margin-top: 1.8mm; }
.pf-back-side .pf-sec { border-bottom: 1.2pt solid #000; }
.pf-back-side .pf-sec:last-of-type { border-bottom: 0; }
.pf-secret { font-size: 7.6pt; margin: auto 0 0; padding-top: 1.5mm; }

/* ===================== ختم التكرار — Overlay بلا عمود إضافي ===================== */
.pform-dup {
  border: 2.2pt solid #000; padding: 1.4mm 2mm; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 2.5mm;
  margin: 0 auto 2mm; width: 92%;
}
.pform-dup-x { font-size: 18pt; font-weight: 900; line-height: 1; }
.pform-dup-word { font-size: 12pt; font-weight: 900; letter-spacing: 1px; }
.pform-dup-codes, .pform-dup-note { font-size: 7.6pt; font-weight: 700; }
.pform-dup-compact { width: auto; margin: 0; padding: 1mm 2mm; gap: 1.6mm; }
.pform-dup-compact .pform-dup-x { font-size: 12pt; }
.pform-dup-compact .pform-dup-word { font-size: 9.4pt; }

/* الورقة أبيض وأسود دائمًا — الوضع الليلي لا يغيّرها. */
[data-theme="dark"] .pform, [data-theme="dark"] .pform * { color: #000; }
[data-theme="dark"] .pform { background: #fff; }
[data-theme="dark"] .pform-stage { background: #cfd5de; }
@media (max-width: 900px) {
  .modal.pform-modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .pform-stage { padding: 4px; }
  .pform-bar { justify-content: center; }
}

.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; align-items: center; font-size: .82rem; }
.map-grid select { padding: .4rem .5rem; border-radius: 8px; border: 1.5px solid var(--line); width: 100%; }
.preview-stats { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }

/* =====================================================================
   v1.1.1 — قائمة جانبية ثابتة (Desktop) + Skeleton + زر أعلى الصفحة
   ===================================================================== */

/* ------------ القائمة الجانبية الثابتة على الكمبيوتر ------------
   grid يحجز عمود 250px، والقائمة نفسها fixed فلا تتحرك مع المحتوى الطويل
   ولا تختفي عناصرها عند النزول — روابطها تتمرر داخليًا عند صغر الشاشة. */
@media (min-width: 901px) {
  .sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0; /* RTL: يمين الشاشة */
    width: 250px;
    height: 100dvh;        /* لا ارتفاع ثابت بالبكسل — يحترم الزوم وكل الدقات */
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 30;
  }
}

/* ------------ هيكل التحميل (Skeleton) بدل الشاشة البيضاء ------------ */
.sk-wait { padding: 1rem .4rem; }
.sk-line {
  height: 14px; border-radius: 8px; margin-bottom: .7rem;
  background: linear-gradient(90deg, var(--line) 25%, #eef2f8 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: skShimmer 1.3s ease-in-out infinite;
}
[data-theme="dark"] .sk-line { background: linear-gradient(90deg, #22344f 25%, #2c4062 50%, #22344f 75%); background-size: 200% 100%; }
@keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }
.sk-note { font-size: .82rem; color: var(--muted); text-align: center; padding: .4rem; }

/* ------------ زر العودة إلى أعلى الصفحة ------------ */
.btn-top {
  position: fixed;
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  inset-inline-end: calc(250px + 1.1rem); /* لا يغطي القائمة الجانبية على Desktop */
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer; z-index: 45;
  background: linear-gradient(145deg, var(--navy-600), var(--navy-800));
  color: var(--gold); font-size: 1.35rem; font-weight: 900;
  box-shadow: var(--shadow-lg);
  animation: toastIn 220ms var(--ease);
  transition: transform 140ms, box-shadow 140ms;
}
.btn-top:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(10, 20, 40, .4); }
.btn-top:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 900px) {
  .btn-top { inset-inline-end: 1rem; bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}
@media print { .btn-top { display: none !important; } }

/* ============================================================
   أرشفة استمارات اختبارات القدرات (v1.3.0)
   ============================================================ */
.forms-search-sticky {
  position: sticky; top: 4.4rem; z-index: 18; margin-bottom: .8rem;
  border: 1px solid color-mix(in srgb, var(--navy-600) 18%, transparent);
}
.forms-search-row { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto auto; align-items: center; gap: .65rem; }
.forms-search-row label { font-weight: 800; color: var(--navy-800); }
.forms-search-row input {
  width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: .72rem .8rem;
  font: inherit; direction: ltr; text-align: center; background: var(--card); color: var(--ink);
}
.forms-result { min-width: 0; }
.forms-student-card {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1rem; margin-bottom: .8rem;
}
.forms-student-card > div { min-width: 0; border-inline-start: 3px solid #d7e2f2; padding-inline-start: .55rem; }
.forms-student-card small { display: block; color: var(--muted); font-size: .72rem; margin-bottom: .18rem; }
.forms-student-card b { display: block; overflow-wrap: anywhere; }
.forms-status { color: var(--navy-700); }
.forms-status.COMPLETE { color: var(--green); }
.forms-status.NEEDS_REVIEW, .forms-status.FRONT_ONLY, .forms-status.BACK_ONLY { color: #9a6700; }
.forms-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.forms-side { min-width: 0; text-align: center; }
.forms-side-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.forms-side-head h3 { color: var(--navy-800); font-size: 1rem; }
.forms-empty-thumb, .forms-thumb {
  width: 100%; min-height: 220px; border: 1px dashed #b7c5da; border-radius: 13px;
  background: #f8fafc; color: var(--muted); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .45rem; overflow: hidden;
}
.forms-empty-thumb span { font-size: 2.2rem; }
.forms-thumb { position: relative; padding: 0; cursor: zoom-in; }
.forms-thumb img { width: 100%; height: 260px; object-fit: contain; background: #eef2f7; }
.forms-thumb-meta {
  position: absolute; inset-inline: .4rem; bottom: .4rem; padding: .28rem .5rem; border-radius: 8px;
  background: rgba(15, 30, 52, .84); color: #fff; font-size: .72rem;
}
.forms-thumb-missing { padding: 1rem; }
/* صورة محفوظة بلا صلاحية forms.viewFull: الحالة تظهر ولا تصل أي بايتات صورة */
.forms-thumb-restricted { position: relative; border-style: solid; border-color: #c9d5e6; }
.forms-thumb-restricted b { padding: 0 .9rem; font-size: .82rem; line-height: 1.6; }
.forms-candidates { display: grid; gap: .5rem; margin-top: .7rem; }
.forms-candidates .btn { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: start; }
.forms-candidates small { color: var(--muted); font-size: .74rem; }
.forms-operator { color: var(--muted); font-size: .78rem; line-height: 1.7; margin: .55rem 0; }
.forms-side-actions, .forms-dialog-actions, .forms-capture-actions, .forms-editor-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; margin-top: .7rem;
}
.forms-file-label { position: relative; overflow: hidden; cursor: pointer; }
.forms-file-label input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.forms-admin-actions { text-align: center; margin-top: .8rem; }
.forms-progress {
  display: grid; grid-template-columns: minmax(140px, auto) minmax(160px, 1fr); gap: .7rem; align-items: center;
  background: #edf4ff; border: 1px solid #c9daf5; padding: .55rem .8rem; border-radius: 11px; margin-bottom: .8rem;
}
.forms-progress progress { width: 100%; accent-color: var(--navy-600); }
.forms-dialog-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(8, 19, 36, .72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.forms-dialog {
  width: min(920px, 100%); max-height: 94vh; overflow: auto; background: var(--card); color: var(--ink);
  border-radius: 18px; box-shadow: var(--shadow-lg); padding: 1rem;
}
.forms-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; margin-bottom: .75rem; }
.forms-dialog-head h3 { color: var(--navy-800); margin: 0; }
.forms-dialog-head p { color: var(--muted); margin: .25rem 0 0; font-size: .8rem; }
.forms-camera-dialog { width: min(720px, 100%); text-align: center; }
.forms-camera-video { width: 100%; max-height: 68vh; object-fit: contain; background: #050b14; border-radius: 13px; }
.forms-camera-hint { color: var(--muted); }
.forms-crop-dialog { width: min(960px, 100%); }
.forms-crop-stage {
  position: relative; display: grid; place-items: center; width: 100%; overflow: auto; border-radius: 13px;
  background: #101827; padding: .5rem; touch-action: none;
}
.forms-crop-stage canvas { display: block; max-width: 100%; height: auto; }
#formsCornerLayer { position: absolute; inset: .5rem; margin: auto; pointer-events: none; max-width: calc(100% - 1rem); }
#formsCornerLayer svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#formsCornerLayer polygon { fill: rgba(43, 129, 210, .18); stroke: #55c2ff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.forms-corner {
  position: absolute; width: 26px; height: 26px; margin: -13px; border: 3px solid #fff; border-radius: 50%;
  background: #1677bd; box-shadow: 0 0 0 3px rgba(22,119,189,.45); pointer-events: auto; touch-action: none; cursor: move;
}
.forms-adjustments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .8rem; }
.forms-adjustments label { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: center; font-size: .8rem; }
.forms-quality-hints { margin-top: .65rem; padding: .55rem .7rem; border-radius: 10px; background: var(--amber-soft); color: #7a5613; font-size: .78rem; }
.forms-final-preview { display: grid; place-items: center; max-height: 68vh; overflow: auto; background: #e8edf4; border-radius: 13px; padding: .5rem; }
.forms-final-preview canvas { max-width: 100%; height: auto; }
.forms-preview-meta { text-align: center; color: var(--muted); margin-top: .5rem; }
/* حالة الحفظ داخل النافذة نفسها. الارتفاع محجوز دائمًا (لا hidden) فلا يقفز
   موضع أزرار النافذة عند ظهور الرسالة أو اختفائها. */
.forms-dialog-status {
  min-height: 1.75rem; margin-top: .6rem; padding: .3rem .7rem; border-radius: 10px;
  font-size: .84rem; font-weight: 700; text-align: center; line-height: 1.55;
  display: flex; align-items: center; justify-content: center;
}
.forms-dialog-status.is-info { background: #edf4ff; color: var(--navy-600); }
.forms-dialog-status.is-err { background: var(--red-soft); color: var(--red); }
.forms-full-image { display: block; max-width: 100%; max-height: 78vh; margin: auto; object-fit: contain; }
.forms-full-loading { min-height: 220px; display: grid; place-items: center; color: var(--muted); }
.forms-history-list { display: grid; gap: .6rem; }
.forms-history-list article { border: 1px solid var(--line); border-radius: 12px; padding: .7rem; }
.forms-history-list article > .chip { float: left; }
.forms-history-list p { color: var(--muted); font-size: .78rem; margin: .35rem 0; }

[data-theme="dark"] .forms-search-sticky { background: var(--card); }
[data-theme="dark"] .forms-search-row label, [data-theme="dark"] .forms-side-head h3,
[data-theme="dark"] .forms-dialog-head h3 { color: #cfe0f8; }
[data-theme="dark"] .forms-empty-thumb, [data-theme="dark"] .forms-thumb { background: #101b2e; border-color: #3d506d; }
[data-theme="dark"] .forms-thumb-restricted { border-color: #45597a; }
[data-theme="dark"] .forms-thumb img { background: #0c1524; }
[data-theme="dark"] .forms-progress { background: #14263f; border-color: #26405f; }
[data-theme="dark"] .forms-dialog-status.is-info { background: #14263f; color: #cfe0f8; }
[data-theme="dark"] .forms-final-preview { background: #0a1321; }
[data-theme="dark"] .forms-quality-hints { background: #33270e; color: #e8c884; }
[data-theme="dark"] .forms-student-card > div { border-color: #334b6b; }

@media (max-width: 900px) {
  .forms-search-sticky { top: 3.8rem; }
  .forms-student-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .forms-search-sticky { top: 3.4rem; padding: .75rem; }
  .forms-search-row { grid-template-columns: 1fr 1fr; }
  .forms-search-row label, .forms-search-row input { grid-column: 1 / -1; }
  .forms-sides { grid-template-columns: 1fr; }
  .forms-student-card { grid-template-columns: 1fr; }
  .forms-empty-thumb, .forms-thumb { min-height: 180px; }
  .forms-thumb img { height: 210px; }
  .forms-dialog-backdrop { padding: .35rem; align-items: flex-end; }
  .forms-dialog { max-height: 96vh; border-radius: 16px 16px 0 0; padding: .8rem; }
  .forms-adjustments { grid-template-columns: 1fr; }
  .forms-progress { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .forms-dialog, .forms-corner { animation: none !important; transition: none !important; }
}

/* ============================ PHASE 4C1: إخراج استمارات SVG للطباعة ============================ */
.pf-print-setup-modal { width: min(94vw, 680px); }
.pf-print-setup { display: grid; gap: .8rem; }
.pf-print-counts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem;
}
.pf-print-counts p {
  margin: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card-2); text-align: center;
}
.pf-print-options {
  display: grid; gap: .45rem; margin: 0; padding: .75rem;
  border: 1px solid var(--line); border-radius: 10px;
}
.pf-print-options legend { padding-inline: .4rem; font-weight: 800; }
.pf-print-options label { display: flex; align-items: center; gap: .45rem; font-weight: 700; }
.pf-print-help { margin: 0; }
.pf-print-help p { margin: .25rem 0; }
.pf-print-progress {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--blue-soft);
}
.pf-print-progress[hidden] { display: none; }
.pf-print-actions { justify-content: flex-end; }

/*
 * غير ظاهر في واجهة الشاشة. أثناء التجهيز يُنقل خارج الشاشة مع إبقاء SVG في
 * شجرة العرض حتى تعمل قياسات النص؛ وفي print media يصبح أصل المستند المطبوع.
 */
.print-root { display: none; direction: ltr; background: #fff; }
.print-root.is-preparing {
  display: block;
  position: fixed;
  top: 0;
  left: -400mm;
  width: 297mm;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}
.print-root .print-sheet {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 297mm;
  height: 210mm;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.print-root .print-sheet > svg {
  display: block;
  width: 297mm;
  height: 210mm;
  max-width: none;
  max-height: none;
  transform: none !important;
}

/* صفحة مسمّاة كي لا تتغير طباعة التقارير القديمة ذات إعدادات portrait/landscape الأخرى. */
@page printFormA4 {
  size: A4 landscape;
  margin: 0;
}

@media print {
  html:has(body.is-printing-forms) {
    width: 297mm;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  body.is-printing-forms {
    width: 297mm;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  body.is-printing-forms > *:not(#printRoot) {
    display: none !important;
    visibility: hidden !important;
  }

  body.is-printing-forms #printRoot,
  body.is-printing-forms #printRoot * {
    visibility: visible !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.is-printing-forms #printRoot {
    display: block !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 297mm !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body.is-printing-forms #printRoot .print-sheet {
    page: printFormA4;
    display: block !important;
    position: relative !important;
    width: 297mm !important;
    height: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
    transform: none !important;
  }

  body.is-printing-forms #printRoot .print-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  body.is-printing-forms #printRoot .print-sheet > svg {
    display: block !important;
    width: 297mm !important;
    height: 210mm !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 600px) {
  .pf-print-counts { grid-template-columns: 1fr; }
  .pf-print-progress { align-items: flex-start; flex-direction: column; }
}