/* Layout: شريط هوية علوي، تنقّل لاصق أفقي، ثم عمود محتوى واحد بعرض 1120px تتبدّل فيه الأقسام حسب الدور. */
:root{
  /* الأساس من شعار الوزارة (تدرّج فيروزي ← أخضر) مُغمَّقاً ليحمل نصاً أبيض، واللمسات من ألوان شعار المدرسة */
  --bg:#f4f8f6; --surface:#ffffff; --soft:#e2f0ec; --ink:#1c2a2e; --muted:#525a62; --line:#d2dfda;
  --brand:#0f6f78; --brand2:#1b7a4a; --brand-ink:#ffffff; --leaf:#3ead73; --leaf-ink:#1b7a4a; --navy:#27367e;
  --ok:#1b7a4a; --ok-bg:#e1f2e2; --warn:#8a5a00; --warn-bg:#fbefd2; --bad:#a3282f; --bad-bg:#f9e1e2;
  --r1:#77bc5c; --r2:#25b6bb; --r3:#27367e; --r4:#3a8bd0; --r5:#cfd736; --r6:#b3b3b8;
  --display:"Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0e1819; --surface:#152224; --soft:#1a2f2e; --ink:#e6efed; --muted:#a3b3b4; --line:#2a3c3c;
  --brand:#35a7ad; --brand2:#3ead73; --brand-ink:#04262a; --leaf:#3ead73; --leaf-ink:#77bc5c; --navy:#a3b0f0;
  --ok:#77bc5c; --ok-bg:#1d3216; --warn:#f0c264; --warn-bg:#3a2c0c; --bad:#f09aa0; --bad-bg:#3d1a1d; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0e1819; --surface:#152224; --soft:#1a2f2e; --ink:#e6efed; --muted:#a3b3b4; --line:#2a3c3c;
  --brand:#35a7ad; --brand2:#3ead73; --brand-ink:#04262a; --leaf:#3ead73; --leaf-ink:#77bc5c; --navy:#a3b0f0;
  --ok:#77bc5c; --ok-bg:#1d3216; --warn:#f0c264; --warn-bg:#3a2c0c; --bad:#f09aa0; --bad-bg:#3d1a1d; color-scheme:dark }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.8}
h1,h2,h3{font-family:var(--display);line-height:1.4;margin:0;text-wrap:balance}
h1{font-size:clamp(1.7rem,4.5vw,2.5rem);font-weight:700}
h2{font-size:1.35rem;font-weight:700}
h3{font-size:1.05rem;font-weight:500}
p{margin:0}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:16px}
.num{font-variant-numeric:tabular-nums}

.demo{background:var(--navy);color:var(--bg);font-size:.85rem;padding-block:6px;text-align:center}
.demo .wrap{line-height:1.6}
.masthead{background:var(--surface);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:14px}
.slots{display:flex;gap:8px}
.slot{width:64px;height:64px;border:1.5px dashed var(--muted);border-radius:6px;display:grid;place-items:center;text-align:center;font-size:.68rem;line-height:1.35;color:var(--muted);padding:4px}
.ident{flex:1 1 180px;min-width:0}
.ident small{display:block;color:var(--muted);font-size:.82rem}
.ident strong{font-family:var(--display);font-size:1.25rem;font-weight:700;display:block;line-height:1.5}
.account{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-inline-start:auto}
@media (max-width:520px){.slot{width:52px;height:52px;font-size:.6rem}.ident strong{font-size:1.1rem}}
.who{font-size:.85rem;line-height:1.5;text-align:start}
.who b{display:block}
.who span{color:var(--muted)}

.navbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.navbar .wrap{overflow-x:auto;scrollbar-width:thin}
.navbar ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;width:max-content}
.navbar a{display:flex;align-items:center;gap:6px;padding:11px 13px;color:var(--brand-ink);text-decoration:none;font-size:.93rem;font-weight:500;white-space:nowrap;border-bottom:3px solid transparent}
.navbar a:hover{background:color-mix(in srgb,var(--brand-ink) 14%,transparent)}
.navbar a[aria-current="page"]{border-bottom-color:var(--brand-ink);font-weight:700}
.lock{font-size:.66rem;border:1px solid currentColor;border-radius:3px;padding:0 5px;line-height:1.6;opacity:.85}

main{padding-block:28px 56px;display:flex;flex-direction:column;gap:24px}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px}
.head p{color:var(--muted);max-width:65ch}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid>*{min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px}
.card p{color:var(--muted);font-size:.93rem}
.plain{border-top:1px solid var(--line);padding-block:14px;display:flex;flex-direction:column;gap:4px}
.meta{font-size:.82rem;color:var(--muted)}
.sel{user-select:all;direction:ltr;unicode-bidi:plaintext;font-size:.85rem}

.btn{font:inherit;font-size:.92rem;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;padding:7px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;line-height:1.6}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.small{padding:3px 10px;font-size:.82rem}
.btn.danger{color:var(--bad)}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.pill{display:inline-block;font-size:.78rem;font-weight:600;border-radius:99px;padding:1px 10px;line-height:1.7;background:var(--soft);color:var(--ink);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.bad{background:var(--bad-bg);color:var(--bad)}

.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--r1) 0 16.6%,var(--r2) 0 33.3%,var(--r3) 0 50%,var(--r4) 0 66.6%,var(--r5) 0 83.3%,var(--r6) 0)}
.hero{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:clamp(18px,4vw,34px);display:grid;gap:22px;grid-template-columns:1.5fr 1fr;align-items:center}
.hero>*{min-width:0}
.eyebrow{color:var(--leaf-ink);font-weight:600;font-size:.88rem}
.lead{color:var(--muted);max-width:55ch;margin-block:8px 16px}
.facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.facts div{background:var(--bg);padding:12px 14px}
.facts dt{font-size:.8rem;color:var(--muted)} .facts dd{margin:0;font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--brand)}
@media (max-width:720px){.hero{grid-template-columns:1fr}}

.avatar{width:52px;height:52px;border-radius:50%;background:var(--soft);color:var(--brand);display:grid;place-items:center;font-family:var(--display);font-size:1.4rem;font-weight:700;flex:none}
.person{flex-direction:row;align-items:flex-start;gap:12px}
.person>div{min-width:0;display:flex;flex-direction:column;gap:4px;flex:1}
details summary{cursor:pointer;color:var(--brand);font-size:.88rem;font-weight:600}

.tablebox{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:9px 12px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:.8rem;white-space:nowrap;background:var(--bg)}
tr:last-child td{border-bottom:0}
td.c,th.c{text-align:center}

form.panel,.panel{background:var(--soft);border-radius:8px;padding:16px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:end}
.panel h3,.panel .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field label{font-size:.82rem;font-weight:600}
input[type=text],input[type=date],input[type=email],input[type=password],input[type=number],select,textarea{font:inherit;font-size:.93rem;width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
textarea{min-height:92px;resize:vertical;line-height:1.7}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand)}

.locked{border:1.5px dashed var(--line);border-radius:10px;padding:28px 20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.locked p{color:var(--muted);max-width:60ch}
.bar{height:8px;background:var(--soft);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--leaf);border-radius:99px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kv div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.kv dt{font-size:.8rem;color:var(--muted)} .kv dd{margin:0;font-size:1.25rem;font-weight:700}
dl{margin:0}
.folders{display:flex;flex-direction:column;gap:6px}
.folder{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.folder summary{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--ink);font-size:.95rem;font-weight:500;list-style:none}
.folder summary::-webkit-details-marker{display:none}
.folder[open] summary{border-bottom:1px solid var(--line)}
.fnum{min-width:32px;height:26px;padding-inline:6px;border-radius:6px;background:var(--soft);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none}
.fname{flex:1;min-width:0}
.fbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.filerow{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;padding-block:7px;border-bottom:1px solid var(--line)}
.filerow b{flex:1 1 220px;min-width:0;overflow-wrap:anywhere;font-weight:500;font-size:.92rem}
.assign{display:flex;flex-direction:column;gap:10px}
.assign .cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 16px}
fieldset{border:1px solid var(--line);border-radius:8px;margin:0;padding:8px 12px 12px;min-width:0;background:var(--surface)}
legend{font-weight:600;font-size:.85rem;padding-inline:6px}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;line-height:1.6;cursor:pointer}
.chk input{flex:none;margin-top:3px}
.up{position:relative;cursor:pointer}
.up:focus-within{outline:3px solid var(--brand);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0}

.overlay{position:fixed;inset:0;background:rgba(6,20,22,.62);z-index:20;display:grid;place-items:center;padding:16px;overflow-y:auto}
.modal{background:var(--surface);color:var(--ink);border-radius:10px;padding:22px;width:min(760px,100%);display:flex;flex-direction:column;gap:14px;max-height:100%;overflow-y:auto}
.personas{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.persona{font:inherit;text-align:start;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:2px;line-height:1.6}
.persona:hover{border-color:var(--brand)}
.persona b{font-family:var(--display)} .persona span{font-size:.82rem;color:var(--muted)}
.toast{position:fixed;inset-inline:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));margin-inline:auto;width:fit-content;max-width:calc(100% - 32px);background:var(--ink);color:var(--bg);padding:9px 18px;border-radius:8px;font-size:.92rem;z-index:30}
footer::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--r1) 0 16.6%,var(--r2) 0 33.3%,var(--r3) 0 50%,var(--r4) 0 66.6%,var(--r5) 0 83.3%,var(--r6) 0);margin-bottom:18px}
footer{padding-block:0 18px;color:var(--muted);font-size:.85rem}
@media (prefers-reduced-motion:no-preference){.btn,.persona,.navbar a{transition:background .15s,border-color .15s}}
/* ---- إضافات النسخة الفعلية ---- */
.logos{display:flex;gap:10px;align-items:center}
.logos img{height:64px;width:auto;max-width:120px;object-fit:contain;border-radius:6px;background:#ffffff;padding:3px}
@media (max-width:520px){.logos img{height:50px}}
.toast.err{background:var(--bad);color:var(--surface)}
.modal form{display:grid;gap:12px}
.icon-btn{min-width:38px;justify-content:center}
.filerow a{color:var(--brand);text-decoration:none;font-weight:500}
.filerow a:hover{text-decoration:underline}
.prose{max-width:65ch;white-space:pre-line}
.empty{color:var(--muted);border:1.5px dashed var(--line);border-radius:8px;padding:18px}
.logoedit{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.logoedit img{height:56px;background:#ffffff;border:1px solid var(--line);border-radius:6px;padding:3px}
button[disabled]{opacity:.55;cursor:default}

.facts div:last-child:nth-child(odd){grid-column:1/-1}
img.avatar.ph{width:76px;height:76px;object-fit:cover;display:block;padding:0}
.person{flex-wrap:wrap;align-content:flex-start}
.person>div{flex:1 1 120px}
.person>.avatar{flex:0 0 auto}
.person>.cardtools{flex:1 0 100%;flex-direction:row;flex-wrap:wrap;gap:8px}
/* ---- بطاقات المعلمين والإداريين: صورة موحّدة المقاس أعلى البطاقة ---- */
h3{font-family:var(--body);font-weight:600}
.person{flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-content:normal;gap:10px}
.person>div{flex:0 0 auto}
.person>.avatar,img.avatar.ph{width:100%;height:auto;aspect-ratio:4/5;border-radius:8px;flex:0 0 auto}
img.avatar.ph{object-fit:cover;object-position:50% 18%}
.person>.avatar{font-size:3.2rem}
.person>.cardtools{flex:0 0 auto}
@media (max-width:560px){
  .person{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .person>.avatar,img.avatar.ph{width:96px;flex:0 0 96px}
  .person>div{flex:1 1 150px}
  .person>.cardtools{flex:1 0 100%}
}
/* ---- بديل الصورة: هيئة رجل بشماغ بدرجات لون الخلفية ---- */
:root{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250'%3E%3Cdefs%3E%3Cpattern id='k' width='11' height='11' patternUnits='userSpaceOnUse' patternTransform='rotate%2845%29'%3E%3Cpath d='M0 0h5.5v5.5H0z' fill='%234e969b' fill-opacity='.2'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='%23c9e1de' d='M8 250c0-46 40-68 92-68s92 22 92 68z'/%3E%3Cpath fill='%23afd1d0' d='M100 30c-36 0-52 28-52 62 0 40-8 78-22 118 24-12 48-18 74-18s50 6 74 18c-14-40-22-78-22-118 0-34-16-62-52-62z'/%3E%3Cpath fill='url%28%23k%29' d='M100 30c-36 0-52 28-52 62 0 40-8 78-22 118 24-12 48-18 74-18s50 6 74 18c-14-40-22-78-22-118 0-34-16-62-52-62z'/%3E%3Cpath fill='%23c9e1de' d='M80 150l20 48 20-48c-12 12-28 12-40 0z'/%3E%3Cpath fill='%238ebcbe' d='M70 106c0-20 12-32 30-32s30 12 30 32v10c0 24-14 40-30 40s-30-16-30-40z'/%3E%3Cpath fill='none' stroke='%234e969b' stroke-width='8' stroke-linecap='round' d='M57 64c18-18 68-18 86 0M54 77c20-19 72-19 92 0'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250'%3E%3Cdefs%3E%3Cpattern id='k' width='11' height='11' patternUnits='userSpaceOnUse' patternTransform='rotate%2845%29'%3E%3Cpath d='M0 0h5.5v5.5H0z' fill='%232d8387' fill-opacity='.2'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='%231d3d3d' d='M8 250c0-46 40-68 92-68s92 22 92 68z'/%3E%3Cpath fill='%23204c4c' d='M100 30c-36 0-52 28-52 62 0 40-8 78-22 118 24-12 48-18 74-18s50 6 74 18c-14-40-22-78-22-118 0-34-16-62-52-62z'/%3E%3Cpath fill='url%28%23k%29' d='M100 30c-36 0-52 28-52 62 0 40-8 78-22 118 24-12 48-18 74-18s50 6 74 18c-14-40-22-78-22-118 0-34-16-62-52-62z'/%3E%3Cpath fill='%231d3d3d' d='M80 150l20 48 20-48c-12 12-28 12-40 0z'/%3E%3Cpath fill='%23255f61' d='M70 106c0-20 12-32 30-32s30 12 30 32v10c0 24-14 40-30 40s-30-16-30-40z'/%3E%3Cpath fill='none' stroke='%232d8387' stroke-width='8' stroke-linecap='round' d='M57 64c18-18 68-18 86 0M54 77c20-19 72-19 92 0'/%3E%3C/svg%3E")} }
:root[data-theme="dark"]{--ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250'%3E%3Cdefs%3E%3Cpattern id='k' width='11' height='11' patternUnits='userSpaceOnUse' patternTransform='rotate%2845%29'%3E%3Cpath d='M0 0h5.5v5.5H0z' fill='%232d8387' fill-opacity='.2'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='%231d3d3d' d='M8 250c0-46 40-68 92-68s92 22 92 68z'/%3E%3Cpath fill='%23204c4c' d='M100 30c-36 0-52 28-52 62 0 40-8 78-22 118 24-12 48-18 74-18s50 6 74 18c-14-40-22-78-22-118 0-34-16-62-52-62z'/%3E%3Cpath fill='url%28%23k%29' d='M100 30c-36 0-52 28-52 62 0 40-8 78-22 118 24-12 48-18 74-18s50 6 74 18c-14-40-22-78-22-118 0-34-16-62-52-62z'/%3E%3Cpath fill='%231d3d3d' d='M80 150l20 48 20-48c-12 12-28 12-40 0z'/%3E%3Cpath fill='%23255f61' d='M70 106c0-20 12-32 30-32s30 12 30 32v10c0 24-14 40-30 40s-30-16-30-40z'/%3E%3Cpath fill='none' stroke='%232d8387' stroke-width='8' stroke-linecap='round' d='M57 64c18-18 68-18 86 0M54 77c20-19 72-19 92 0'/%3E%3C/svg%3E")}
.person>.avatar:not(.ph){background:var(--soft) var(--ph) center bottom/contain no-repeat;font-size:0;color:transparent}