/* لوحة تحكم شاطر — واجهة إدارية هادية، مش واجهة الأطفال */
:root{
  --board:#1F4D3D; --ink:#22303A; --muted:#6B7A83; --line:#E3E8EB;
  --bg:#F5F7F8; --card:#fff; --sun:#FFC53D; --green:#2E9E5B;
  --coral:#F26B5B; --sky:#3DA5D9;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px;
}
a{color:var(--sky);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== الشريط العلوي ===== */
.topbar{
  background:var(--board);color:#fff;display:flex;align-items:center;gap:20px;
  padding:12px 20px;flex-wrap:wrap;position:sticky;top:0;z-index:20;
}
.topbar .brand{color:#fff;font-weight:900;font-size:17px;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.admin-brand-mark{width:34px;height:34px;border-radius:10px;background:#FFFDF5;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.16)}
.admin-brand-mark img{width:30px;height:30px;display:block}
.topbar .links{display:flex;gap:16px;flex:1;flex-wrap:wrap}
.topbar .links a{color:#CFE5DA;font-size:14px;font-weight:700}
.topbar .links a:hover{color:#fff}
.topbar .who{font-size:13px;color:#9FC4B3}
.topbar .who a{color:#FFC53D}

.page{max-width:1080px;margin:0 auto;padding:24px 18px 60px}
h1{font-size:22px;margin:0 0 20px}
h2{font-size:17px;margin:28px 0 12px}

/* ===== البطاقات والإحصائيات ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:26px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.stat b{display:block;font-size:30px;line-height:1.1;color:var(--board)}
.stat span{color:var(--muted);font-size:13px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:22px}
.panel h2{margin-top:0}

/* ===== الجداول ===== */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 10px;text-align:right;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-size:12.5px;font-weight:700;background:#FAFBFC}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFBFC}
td.num,th.num{text-align:center;font-variant-numeric:tabular-nums}
code,.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;direction:ltr;display:inline-block}

/* ===== الشارات ===== */
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700}
.badge.green{background:#DFF3E6;color:#14572F}
.badge.gray{background:#EEF1F3;color:#5A6A72}
.badge.red{background:#FDE3E0;color:#8E2B22}
.badge.amber{background:#FFF3D6;color:#7A5A12}
.badge.blue{background:#E1F1FA;color:#15556F}

/* ===== الأزرار والنماذج ===== */
.btn{
  font-family:inherit;font-weight:700;font-size:14px;border:0;border-radius:10px;
  padding:9px 18px;cursor:pointer;background:var(--board);color:#fff;
}
.btn:hover{opacity:.9}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.warn{background:var(--coral)}
.btn.ghost{background:#fff;color:var(--board);border:1px solid var(--line)}
.btn:disabled{opacity:.45;cursor:default}

form.inline{display:inline}
.formrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:6px}
.formrow label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px;font-weight:700}
.formrow input,.formrow select{
  font-family:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;background:#fff;min-width:130px;
}
.formrow input:focus,.formrow select:focus{outline:2px solid var(--sky);outline-offset:1px}

/* ===== التنبيهات ===== */
.alert{border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:16px}
.alert.ok{background:#DFF3E6;color:#14572F}
.alert.err{background:#FDE3E0;color:#8E2B22}
.alert.info{background:#E1F1FA;color:#15556F}
.alert.warn{background:#FFF3D6;color:#7A5A12}
tr.bad td{background:#FEF3F1}
.muted{color:var(--muted);font-size:13px;line-height:1.9}
.stat b{font-size:26px}
.empty{color:var(--muted);font-size:14px;padding:14px 0}

/* ===== صندوق الدخول ===== */
body.centered{display:grid;place-items:center;min-height:100vh;background:var(--board)}
.loginbox{background:#fff;border-radius:18px;padding:32px 28px;width:min(380px,92vw);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.admin-login-brand{display:block;width:min(270px,92%);margin:-14px auto 10px}
.admin-login-brand img{display:block;width:100%;height:auto}
.loginbox h1{text-align:center;margin:0 0 2px;font-size:21px}
.loginbox .sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 22px}
.loginbox label{display:block;font-size:13px;font-weight:700;margin:0 0 5px}
.loginbox input{width:100%;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:15px}
.loginbox input:focus{outline:2px solid var(--sky);outline-offset:1px}
.loginbox .btn{width:100%;padding:12px}

/* ===== تفصيل الإجابات ===== */
.qrow{border-bottom:1px solid var(--line);padding:12px 0}
.qrow:last-child{border-bottom:0}
.qrow .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.qrow .n{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:700;background:#EEF1F3;color:#5A6A72;flex:0 0 auto}
.qrow .n.ok{background:var(--green);color:#fff}
.qrow .n.no{background:var(--coral);color:#fff}
.qrow .detail{font-size:13px;color:var(--muted);padding-right:36px}
.qrow .detail b{color:var(--ink)}

@media (max-width:640px){
  .topbar{gap:10px}
  .topbar .links{gap:12px;order:3;width:100%}
  table{font-size:13px}
  th,td{padding:9px 6px}
}


/* حماية من الفيض الأفقي — جداول اللوحة عريضة على الموبايل */
html{overflow-x:hidden}
.panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{min-width:520px}
/* ⛔⛔ **كانت `.page,.panel,td,th{overflow-wrap:anywhere}` — وde
   بيقطّع الكلمة في أي مكان.** النتيجة على شاشة ١٢٨٠ كاملة:
   «نشط» بقت «نش/ط» · كود الدخول `NCJAWU` بقى سطرين · الموبايل
   أربع أسطر · وزرار «رقم سري جديد» تلات أسطر.
   القطع العشوائي **علاج لمشكلة نادرة** (نصّ طويل بلا مسافات)،
   واتفرض على كل خلية. دلوقتي بقى **مقصورًا على الخلايا اللي فعلًا
   ممكن تشيل نصًّا طويلًا** (`td.wrap`)، والباقي بيكسر عند المسافات. */
.page,.panel{overflow-wrap:normal}
td.wrap,th.wrap{overflow-wrap:anywhere}
/* ⛔ الأشياء اللي **ما ينفعش** تتقطّع: زرار · وسم حالة · كود · رقم */
.btn,.badge,td code,td.num,td.acts{white-space:nowrap}
td.acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:184px}
/* عمود «السنين المفتوحة» بيكبر لكن بحدّ — مش بياكل الجدول */
td.years{min-width:24ch;max-width:40ch;line-height:1.75}
@media (max-width:640px){
  .page{padding:16px 12px 48px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ===== محرّر الأسئلة ===== */
/* ⛔ **`.qsrc` و`.qtagged` كانوا في الماركب بلا أي CSS** — فسطر
   المصدر بيطلع نصًّا سايبًا ملزوقًا جنب الزراير، والمالك بيسأل
   «هو مكتوب تحت السؤال؟». مكتوب — بس مش **مقروء**.
   السطر بقى مستقلًّا بعرض كامل، والغياب أحمر مش رمادي: «بلا مصدر»
   لازم تبان من نظرة، لأنها اللي بتتصلّح. */
.qsrc{
  display:block; width:100%; margin-top:6px; padding:5px 9px;
  border-inline-start:3px solid var(--line); border-radius:0 8px 8px 0;
  background:#F7F9FA; color:var(--muted);
  font-size:12.5px; line-height:1.65; overflow-wrap:anywhere;
}
.qsrc.none{
  background:var(--bad-bg, #FDEDEC); color:#8E2B22;
  border-inline-start-color:var(--coral); font-weight:600;
}
/* «منقول بالحرف» — بيدخل في ضمان أسئلة الوزارة في السحب، فيتميّز */
.qsrc.auth{
  background:#FBF4E4; color:#7A5A11; border-inline-start-color:#D9A93C;
}
.qtagged{
  display:inline-block; margin-inline-start:8px; padding:1px 8px;
  border-radius:99px; background:#173E4A; color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
.crumb{margin:-6px 0 14px;font-size:13.5px}
.meta{margin:0;font-size:13.5px;color:var(--muted)}
.meta code{background:#EEF1F3;padding:1px 6px;border-radius:6px}
.note{background:#FFF6DE;border:1px solid #EBD79E;border-radius:10px;
      padding:9px 12px;font-size:13px;margin:10px 0 0}

details.panel > summary{cursor:pointer;font-size:15px;padding:2px 0;list-style:none}
details.panel > summary::-webkit-details-marker{display:none}
details.panel > summary::before{content:'▸ ';color:var(--muted)}
details.panel[open] > summary::before{content:'▾ '}

.stack{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.stack label{display:flex;flex-direction:column;gap:4px;font-size:13.5px;font-weight:700}
.stack .row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.stack .row > label{flex:0 0 auto}
.stack .row > label.grow{flex:1 1 320px}
.stack input,.stack select,.stack textarea{
  font:inherit;font-weight:400;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:#fff;width:100%;box-sizing:border-box;
}
.stack textarea{resize:vertical;line-height:1.7}
.stack .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.55}
.stack .hint{font-weight:400;font-size:12px;color:var(--muted)}
.stack input:focus,.stack select:focus,.stack textarea:focus{outline:2px solid var(--sky);outline-offset:1px}

/* صفّ السؤال في القائمة */
.qhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.qhead .tag{flex:0 0 auto;min-width:26px;height:26px;border-radius:8px;display:grid;
            place-items:center;font-size:12.5px;font-weight:700;background:#EEF1F3;color:#5A6A72}
.qhead .qtype{font-size:12.5px;color:var(--muted);white-space:nowrap}
.qhead .qtext{flex:1 1 240px;min-width:0;font-size:14px;overflow-wrap:anywhere}
.qhead .qmeta{font-size:12px;color:var(--muted);white-space:nowrap}
.qhead .qacts{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.qrow.open{background:#F7FBFD;border-radius:12px;padding:12px;margin:8px 0}
.qform{border-top:1px dashed var(--line);padding-top:12px;margin-top:10px}
.btn.danger{background:var(--coral);border-color:var(--coral);color:#fff}

.schema{border-top:1px solid var(--line);padding:10px 0}
.schema h3{margin:0 0 6px;font-size:14px}
.schema code{background:#EEF1F3;padding:1px 6px;border-radius:6px;font-size:12.5px}
.schema pre{background:#F7F9FA;border:1px solid var(--line);border-radius:9px;
            padding:10px 12px;overflow-x:auto;font-size:12.5px;margin:0}

@media (max-width:640px){
  .stack .row > label{flex:1 1 100%}
  .qhead .qmeta{flex:1 1 100%}
}

/* ── لوحة المدرّس ─────────────────────────────────────────────────
   ⛔ **بتشارك `admin.css` عن قصد** — ملفّ تاني معناه إن أي تعديل في
   الشارات أو الجداول يتعمل في مكان ويُنسى في التاني. */
.stat.warn b{color:var(--coral)}
.muted{color:var(--muted)}
.tchip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;
  font-size:12px;font-weight:700;color:#fff;background:var(--board)}
.tchip form{display:inline;margin:0}
.tchip button{background:none;border:0;color:#fff;opacity:.75;cursor:pointer;font-size:13px;padding:0 2px}
.tchip button:hover{opacity:1}
.grp{margin:0 0 8px;font-size:15px;font-weight:900;color:var(--board)}
.selbar{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);
  padding:10px 0;margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.trow-sel{width:18px;height:18px}
.bar{height:8px;border-radius:99px;background:#EEF1F3;overflow:hidden;min-width:90px}
.bar i{display:block;height:100%;background:var(--board)}

/* 2026-09 management system: one shared visual language for both roles. */
@font-face{font-family:ManagementCairo;src:url('/assets/ads/ask-shater-student-v1/Cairo-7.woff2') format('woff2');font-display:swap}
body.management{--board:#173f33;--bg:#f4f6f3;--line:#dfe6df;--muted:#62756a;--sky:#17684f;font-family:ManagementCairo,Cairo,sans-serif;line-height:1.7}
.management .topbar{position:fixed;inset:0 0 0 auto;width:260px;height:100dvh;display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:18px;padding:26px 18px 18px;background:#153d31;overflow-y:auto;overscroll-behavior:contain;z-index:60;box-shadow:-6px 0 28px #193e3010}
.management .topbar .brand{padding:0 5px 20px;border-bottom:1px solid #ffffff20;flex:none;font-size:19px;gap:12px}
.management .admin-brand-mark{width:43px;height:43px;flex:none;background:#fffdf5;border-radius:13px;box-shadow:none}
.management .admin-brand-mark img{width:37px;height:37px}
.management .topbar .links{display:flex;flex-direction:column;flex-wrap:nowrap;gap:5px;flex:1;order:initial;width:auto}
.management .topbar .links a{display:flex;align-items:center;gap:11px;padding:10px 13px;min-height:44px;border-radius:10px;color:#d8e6df;font-size:13px;line-height:1.6;transition:background .15s;position:relative}
.management .topbar .links a:hover{background:#ffffff0d;text-decoration:none;color:white}
.management .topbar .links a[aria-current]{background:#f8f5e7;color:#173f33;font-weight:900;box-shadow:inset -4px 0 #ffc53d}
.nav-group{font-size:10px;letter-spacing:.2px;font-weight:700;color:#a2c1b4;margin:18px 12px 5px}
.nav-group:first-child{margin-top:0}.nav-icon{font:20px/1 Arial;width:22px;text-align:center;flex:none;opacity:.85}
.nav-badge{margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;padding:0 6px;border-radius:7px;color:#173f33;background:#ffc53d;font:700 12px/1 Arial}
.management .topbar .who{border-top:1px solid #ffffff20;padding:16px 5px 0;color:#d8e6df;font-size:12px;line-height:2}
.workspace-bar{margin-inline-start:260px;background:#ffffffed;border-bottom:1px solid var(--line);min-height:86px;padding:17px 36px;display:flex;align-items:center;gap:18px}
.workspace-bar>div{display:flex;flex-direction:column}.workspace-label{color:var(--muted);font-size:11px}.workspace-bar strong{font-size:15px}.workspace-site{margin-inline-start:auto;font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:9px;padding:8px 12px;white-space:nowrap}
.management .page{margin:0;margin-inline-start:260px;max-width:none;padding:32px clamp(18px,3vw,48px) 70px;min-width:0}
.management h1{font-size:28px;letter-spacing:-.6px;line-height:1.5;margin-bottom:25px;color:#173f33}.management h2{font-size:18px;color:#213f32}
.management .panel{padding:24px;border-radius:17px;border:1px solid var(--line);box-shadow:0 4px 18px #193e3005;margin-bottom:24px}
.management .stats{gap:16px;margin-bottom:28px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.management .stat{padding:24px 22px;min-height:117px;border-radius:16px;border:1px solid var(--line);box-shadow:0 3px 12px #193e3004;position:relative}
.management .stat:before{content:'';width:26px;height:4px;background:#ffc53d;border-radius:4px;position:absolute;top:0;right:22px}
.management .stat b{font:800 32px/1.4 ManagementCairo,Cairo,sans-serif;font-variant-numeric:tabular-nums;color:#173f33}.management .stat span{font-size:12px;display:block;margin-top:5px}.management .stat.warn:before{background:#dc8633}.management .stat.warn b{color:#9c5b16}
.management .table-scroll{overflow-x:auto;max-width:100%;border:1px solid #e4e9e3;border-radius:11px;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.management table{font-size:13px;min-width:560px}.management th{font-size:11px;background:#f4f7f2;color:#586e60;white-space:nowrap;padding:14px 16px}.management td{padding:15px 16px;line-height:1.8}.management tbody tr:hover{background:#f8fbf6}.management td a:not(.btn){font-weight:700;text-decoration:underline;text-underline-offset:4px}
.management .badge{font-size:11px;padding:4px 10px;line-height:1.6}.management .btn{min-height:42px;border-radius:10px;padding:10px 18px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:1.6}.management .btn.sm{min-height:36px;padding:7px 12px;font-size:12px}.management .btn.ghost{background:#f9fbf7;border-color:#dce5d9}
.management .formrow{gap:14px;margin-bottom:15px}.management .formrow>div{min-width:0}.management .formrow input,.management .formrow select,.management .stack input,.management .stack select,.management .stack textarea{min-height:44px;max-width:100%;border-color:#cedace;background:#fcfdfb;font-size:14px}.management .formrow label,.management .stack label{color:#40594a;font-size:12px}.management input[type=checkbox],.management input[type=radio]{accent-color:#17684f}
.management :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #dc9f23;outline-offset:3px}.management .table-scroll:focus-visible{outline:2px solid #17684f}
.management .empty{padding:32px 15px;text-align:center;border:1px dashed #d1ddce;border-radius:12px;background:#fafcf8;color:#546c5c}
.management .alert{padding:15px 18px;border-radius:12px;line-height:1.9}.management .muted{font-size:12px}.management .qrow{padding:18px 0}
.overview-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(110deg,#f0f5e9,#fffdf4);border:1px solid #dae4d3;padding:23px 26px;border-radius:17px;margin-bottom:25px}.overview-intro p{margin:3px 0;font-size:13px;color:#536b58}.overview-intro h2{margin:0 0 6px;font-size:20px}.overview-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.skip-link{position:fixed;top:-100px;right:20px;z-index:100;background:white;color:#173f33;padding:10px;border-radius:8px}.skip-link:focus{top:10px}
.menu-toggle,.nav-close,.nav-backdrop{display:none}.management .menu-toggle{display:none}
body.centered{background:radial-gradient(ellipse at 20% 15%,#305e45,transparent 65%),#133a2e;font-family:ManagementCairo,Cairo,sans-serif;padding:28px 0}.loginbox{border:1px solid #e3e9df;border-radius:22px;padding:34px;box-shadow:0 24px 65px #08241655}.loginbox input{min-height:46px;background:#fafcf8;font-family:inherit}.loginbox .btn{min-height:47px}.loginbox .sub{line-height:1.8}
@media(min-width:1500px){.management .page{max-width:1600px}}
@media(max-width:1000px){
 .management .topbar{position:relative;width:auto;height:auto;inset:auto;padding:18px;box-shadow:none}.management-ready .topbar{position:fixed;inset:0 0 0 auto;width:min(290px,88vw);height:100dvh;visibility:hidden;transform:translateX(105%)}
 .management-ready.nav-open .topbar{visibility:visible;transform:translateX(0)}.management.nav-open{overflow:hidden}.management .page{margin:0;padding:24px 18px 50px}.workspace-bar{margin:0;padding:14px 18px;min-height:78px}
 .management-ready .menu-toggle{display:inline-flex;min-height:42px;padding:8px 12px}.management-ready .nav-close{display:block;align-self:flex-end;background:none;border:1px solid #ffffff40;color:white;padding:7px 14px;font:inherit;font-size:12px;border-radius:8px}
 .nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;width:100%;height:100%;border:0;background:#0c251a80;z-index:50}.overview-intro{align-items:flex-start;flex-direction:column}.management .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){.management h1{font-size:23px}.management .panel{padding:16px;border-radius:13px}.management .stat{padding:19px 16px;min-height:105px}.management .stat b{font-size:27px}.management .stats{gap:10px}.workspace-site{font-size:10px;padding:6px 8px}.workspace-bar{gap:10px}.workspace-bar strong{font-size:12px}.workspace-label{font-size:10px}.management .formrow>div{flex:1 1 100%}.management .formrow input,.management .formrow select{width:100%}.overview-intro{padding:19px}.overview-actions{flex-wrap:wrap}.management .stack .row>label.grow{flex-basis:100%}}
@media print{.management .topbar,.workspace-bar,.skip-link,.nav-backdrop{display:none!important}.management .page{margin:0;padding:0;max-width:none}.management .panel,.management .table-scroll{overflow:visible;box-shadow:none}body.management{background:white}}
@media(min-width:1001px){.management[data-role=admin] .page>.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.management [hidden]{display:none!important}
@media(max-width:600px){.management .table-scroll:before{content:'↔ مرّر الجدول لعرض باقي الأعمدة';display:block;position:sticky;right:0;padding:8px 12px;font-size:10px;color:#62756a;background:#f8faf6;white-space:nowrap}}
