/* منصة إشراف إتحاف — the association's identity (olive, gold, cream), the same tokens as the exams platform. */
:root{
  --bg:#F1F1EB; --surface:#FFFFFF; --surface-2:#F7F6F1; --sunk:#E9E8E0;
  --ink:#23241C; --muted:#67685A; --line:#D9D7CB;
  --olive:#555942; --olive-ink:#FFFFFF; --olive-soft:#E4E5D9; --olive-text:#4A4E38;
  --gold:#9E7019; --gold-soft:#F2E6CB; --beige:#BAB095;
  --good:#2D6F45; --good-soft:#DCEDE1; --bad:#AC3628; --bad-soft:#F5DEDA; --warn:#8A6412; --warn-soft:#F6EBD2;
  --shadow:0 1px 2px rgba(40,42,30,.06),0 6px 18px rgba(40,42,30,.06);
  --f-display:"Amiri","Traditional Arabic","Times New Roman",serif;
  --f-ui:"Tajawal","Segoe UI","Noto Sans Arabic",system-ui,sans-serif;
  --r:14px; --r-sm:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#13140E; --surface:#1C1E16; --surface-2:#22241B; --sunk:#2A2C22;
  --ink:#ECEBE1; --muted:#A5A491; --line:#383A2F;
  --olive:#A3AA7B; --olive-ink:#14150F; --olive-soft:#2A2D21; --olive-text:#C4C9A3;
  --gold:#D9A847; --gold-soft:#3A311E; --beige:#6E6853;
  --good:#6EC38D; --good-soft:#1E3325; --bad:#F07E6D; --bad-soft:#3C231F; --warn:#E0B456; --warn-soft:#3A311E;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25); color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.6;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--gold)}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- top bar and side menu ---------- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;display:flex;align-items:center;gap:10px}
.top .menu{border:1px solid var(--line);background:var(--surface);border-radius:12px;width:42px;height:42px;font-size:1.25rem;cursor:pointer;flex:none}
.top .brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1;text-decoration:none;color:inherit}
.top .brand img{height:34px;width:auto;flex:none}
.top .brand .t{min-width:0}
.top .brand b{display:block;font-family:var(--f-display);font-size:1.15rem;line-height:1.2;color:var(--olive-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .brand small{display:block;font-size:.72rem;color:var(--gold);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .acts{display:flex;align-items:center;gap:6px;flex:none}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:12px;min-width:42px;height:42px;padding:0 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:.85rem;color:var(--ink)}
.iconbtn .when{font-size:.7rem;color:var(--muted);font-weight:500}
.iconbtn.spin span.i{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cxbar{padding:6px 12px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:.85rem}
.cxbar select{border:1px solid var(--line);border-radius:10px;padding:4px 8px;background:var(--surface)}

.drawer{position:fixed;inset:0;z-index:40;display:flex}
.drawer .shade{position:absolute;inset:0;background:rgba(20,21,15,.45)}
.drawer nav{position:relative;margin-inline-start:0;width:min(84vw,320px);height:100%;background:var(--surface);box-shadow:var(--shadow);overflow:auto;
  padding:calc(16px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:4px}
.drawer .who{padding:8px 10px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.drawer .who b{display:block;font-size:1.05rem}
.drawer .who span{font-size:.8rem;color:var(--muted)}
.drawer a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700}
.drawer a:hover,.drawer a.on{background:var(--olive-soft);color:var(--olive-text)}
.drawer a .ic{width:26px;text-align:center}
.drawer .sep{height:1px;background:var(--line);margin:8px 4px}
.drawer .out{margin-top:auto}

/* ---------- page ---------- */
main{max-width:980px;margin:0 auto;padding:16px 12px calc(40px + env(safe-area-inset-bottom,0px))}
.h1{font-family:var(--f-display);font-size:1.6rem;line-height:1.3;color:var(--olive-text);margin:4px 0 2px}
.sub{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;margin-bottom:14px}
.card h2{font-size:1.05rem;margin:0 0 10px;font-weight:800;display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.card h2 small{font-weight:500;color:var(--muted);font-size:.8rem}
.card h3{font-size:.95rem;margin:14px 0 8px;font-weight:800;color:var(--olive-text)}
.eyebrow{font-size:.75rem;font-weight:800;color:var(--gold);margin:0 0 4px}
.hint{font-size:.82rem;color:var(--muted);margin:4px 0 0}
.empty{color:var(--muted);text-align:center;padding:14px 6px;font-size:.9rem}
.err{color:var(--bad);background:var(--bad-soft);border-radius:10px;padding:8px 10px;font-size:.88rem;margin:8px 0 0}
.ok{color:var(--good);background:var(--good-soft);border-radius:10px;padding:8px 10px;font-size:.88rem;margin:8px 0 0}
.note{background:var(--gold-soft);border-radius:10px;padding:8px 10px;font-size:.88rem;margin:8px 0}

.grid{display:grid;gap:10px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:700px){.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.md2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.spacer{flex:1}

/* ---------- buttons and fields ---------- */
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:9px 14px;min-height:42px;font-weight:800;font-size:.92rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;line-height:1.3}
.btn.primary{background:var(--olive);border-color:var(--olive);color:var(--olive-ink)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.btn.ghost{background:transparent}
.btn.sm{min-height:34px;padding:5px 10px;font-size:.82rem;border-radius:10px}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:default}
.f{display:grid;gap:4px;margin-bottom:10px}
.f>span{font-size:.82rem;font-weight:800;color:var(--muted)}
.f input,.f select,.f textarea,.inp{width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:10px 12px;min-height:44px;font-size:1rem}
.f textarea{min-height:84px;resize:vertical;line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus,.inp:focus{outline:2px solid color-mix(in srgb,var(--olive) 55%,transparent);outline-offset:1px;border-color:var(--olive)}
.f .h{font-size:.78rem;color:var(--muted)}
.check{display:flex;gap:8px;align-items:flex-start;padding:8px 2px;cursor:pointer;font-weight:600}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--olive);flex:none}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-weight:700;margin-bottom:10px;cursor:pointer}
.switch input{width:22px;height:22px;accent-color:var(--olive)}

/* ---------- chips and tags ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:800;background:var(--olive-soft);color:var(--olive-text);white-space:nowrap}
.chip.gold{background:var(--gold-soft);color:var(--gold)}
.chip.good{background:var(--good-soft);color:var(--good)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.gray{background:var(--sunk);color:var(--muted)}

/* ---------- home ---------- */
.quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:700px){.quick{grid-template-columns:repeat(4,minmax(0,1fr))}}
.quick a{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);text-decoration:none;color:var(--ink);font-weight:800;font-size:.92rem;min-height:72px}
.quick a .ic{font-size:1.3rem}
.quick a.main{background:var(--olive);color:var(--olive-ink);border-color:var(--olive)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:700px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface-2)}
.tile b{display:block;font-size:1.6rem;line-height:1.2;color:var(--olive-text)}
.tile span{font-size:.8rem;color:var(--muted);font-weight:700}
.tile.alert b{color:var(--bad)}

/* ---------- lists ---------- */
.list{display:grid;gap:8px}
.item{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface-2);text-decoration:none;color:var(--ink)}
.item .main{flex:1;min-width:0}
.item .main b{display:block;font-size:.95rem;overflow-wrap:anywhere}
.item .main span{display:block;font-size:.8rem;color:var(--muted)}
.item .side{text-align:end;flex:none;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.item.over{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:var(--bad-soft)}
.score{font-weight:800;font-size:1.05rem;color:var(--olive-text)}
.score.low{color:var(--bad)} .score.mid{color:var(--warn)} .score.high{color:var(--good)}

/* ---------- visit form: the evaluation items ---------- */
.dom{margin:14px 0 6px;display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-weight:800;color:var(--olive-text);border-bottom:2px solid var(--gold-soft);padding-bottom:4px}
.dom small{color:var(--muted);font-weight:600}
.crit{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface-2);margin-bottom:8px}
.crit .name{font-weight:800;font-size:.93rem;display:flex;justify-content:space-between;gap:8px}
.crit .name small{color:var(--muted);font-weight:700;flex:none}
.crit .hintx{font-size:.78rem;color:var(--muted);margin:2px 0 8px}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.seg button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 2px;font-size:.78rem;font-weight:800;cursor:pointer;min-height:40px;line-height:1.25}
.seg button.on.y{background:var(--good);border-color:var(--good);color:#fff}
.seg button.on.p{background:var(--warn);border-color:var(--warn);color:#fff}
.seg button.on.n{background:var(--bad);border-color:var(--bad);color:#fff}
.seg button.on.x{background:var(--sunk);border-color:var(--beige);color:var(--muted)}
.sticky-score{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--olive);color:var(--olive-ink);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow);margin:12px 0}
.sticky-score b{font-size:1.4rem}
.dirs{display:grid;gap:6px}
.dir{display:flex;gap:6px;align-items:flex-start}
.dir textarea{flex:1;min-height:44px}

/* ---------- surprise exam ---------- */
.studpick{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:4px 8px;background:var(--surface-2)}
.stud{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface-2);margin-bottom:8px}
.stud .top2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.stud .top2 b{font-size:.95rem}
.counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.counter{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:4px;text-align:center}
.counter span{display:block;font-size:.72rem;color:var(--muted);font-weight:800}
.counter .ctl{display:flex;align-items:center;justify-content:space-between;gap:2px}
.counter button{border:0;background:var(--sunk);border-radius:8px;width:30px;height:30px;font-weight:800;cursor:pointer}
.counter b{font-size:1.05rem;min-width:22px}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:start;vertical-align:top}
.tbl th{font-size:.76rem;color:var(--muted);font-weight:800;background:var(--surface-2)}
.tbl.wide{min-width:540px}
.tbl.wide td:first-child{min-width:130px}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.heat{font-weight:800;text-align:center!important;border-radius:6px}
.bar{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;background:var(--olive)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;-webkit-overflow-scrolling:touch}
.tabs a{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:6px 14px;text-decoration:none;color:var(--ink);font-weight:800;font-size:.85rem;background:var(--surface)}
.tabs a.on{background:var(--olive);color:var(--olive-ink);border-color:var(--olive)}

/* ---------- sign-in ---------- */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.gate .box{width:100%;max-width:400px;display:grid;gap:16px}
.logos{display:flex;align-items:center;justify-content:center;gap:18px}
.logos img{display:block;width:auto;object-fit:contain}
.logos .jam{height:88px;max-width:110px}
.logos .ith{height:90px;max-width:66px}
.logos .sep{width:1px;height:60px;background:var(--beige)}
@media (prefers-color-scheme: dark){.logos img,.top .brand img{background:#fff;border-radius:12px;padding:4px 6px}}
.gate h1{font-family:var(--f-display);font-size:1.8rem;line-height:1.2;margin:0;text-align:center;color:var(--olive-text)}
.gate p.tag{margin:2px 0 0;text-align:center;color:var(--gold);font-weight:800;font-size:.85rem}
.gate .rule{width:96px;height:3px;border-radius:2px;background:#C9A13B;margin:0 auto}
.pin{letter-spacing:.3em;direction:ltr;text-align:center;font-weight:800}

/* ---------- toast and dialog ---------- */
.toast{position:fixed;inset-inline:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;margin:0 auto;max-width:460px;background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 14px;font-weight:700;box-shadow:var(--shadow);text-align:center}
dialog{border:0;border-radius:16px;padding:0;max-width:min(520px,94vw);width:100%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(20,21,15,.5)}
dialog .in{padding:16px}
dialog h3{margin:0 0 10px;font-size:1.1rem}

/* ---------- the guide ---------- */
.guide h3{font-family:var(--f-display);font-size:1.25rem;color:var(--olive-text);margin:18px 0 6px}
.guide ol,.guide ul{padding-inline-start:22px;margin:6px 0}
.guide li{margin:3px 0}

/* ---------- printing (A4) ---------- */
#print{display:none}
@media print{
  @page{size:A4;margin:12mm 12mm 14mm}
  body{background:#fff!important;color:#000!important;font-size:12pt}
  body.printing>*:not(#print){display:none!important}
  body.printing #print{display:block}
}
.pdoc{font-family:var(--f-ui);color:#111;line-height:1.5}
.pdoc .phead{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:2.5px solid #9E7019;padding-bottom:8px;margin-bottom:10px}
.pdoc .phead img{height:56px;width:auto;max-width:130px;object-fit:contain}
.pdoc .phead .mid{text-align:center;flex:1}
.pdoc .phead .mid b{display:block;font-family:var(--f-display);font-size:18pt;color:#4A4E38;line-height:1.2}
.pdoc .phead .mid span{font-size:10pt;color:#9E7019;font-weight:800}
.pdoc h2{font-family:var(--f-display);font-size:16pt;text-align:center;margin:4px 0 10px;color:#4A4E38}
.pdoc table{width:100%;border-collapse:collapse;font-size:9.5pt;margin:4px 0 8px;page-break-inside:auto}
.pdoc td,.pdoc th{border:1px solid #BAB095;padding:3px 6px;text-align:start;vertical-align:top}
.pdoc th{background:#F2E6CB;font-weight:800}
.pdoc tr{page-break-inside:avoid}
.pdoc .meta td:nth-child(odd){background:#F7F6F1;font-weight:800;width:16%}
.pdoc .sec{font-weight:800;color:#4A4E38;background:#E4E5D9;padding:3px 8px;border-radius:4px;margin:8px 0 3px;font-size:10.5pt}
.pdoc .box{border:1px solid #BAB095;border-radius:4px;padding:4px 8px;min-height:30px;white-space:pre-wrap;font-size:10pt}
.pdoc .big{font-size:15pt;font-weight:800;color:#4A4E38}
.pdoc .sign{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;font-size:10pt;page-break-inside:avoid}
.pdoc .sign div{border-top:1px dotted #777;padding-top:4px;text-align:center}
.pdoc .foot{margin-top:14px;font-size:8.5pt;color:#666;text-align:center}
.lv-y{color:#2D6F45;font-weight:800}.lv-p{color:#8A6412;font-weight:800}.lv-n{color:#AC3628;font-weight:800}.lv-x{color:#888}