/* Admin = eappointment staff portal look: navy #0b2a4a, orange #f47a2a, cool grey surfaces, large radii, Tajawal for Arabic. */
@font-face { font-family: "Tajawal"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Tajawal-Regular.ttf") format("truetype"); }
@font-face { font-family: "Tajawal"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Tajawal-Medium.ttf") format("truetype"); }
@font-face { font-family: "Tajawal"; font-weight: 700 900; font-display: swap; src: url("/assets/fonts/Tajawal-Bold.ttf") format("truetype"); }
:root {
  --pmu: #0b2a4a; --pmu-dark: #16395f; --pmu-light: #eef2f6; --accent: #f47a2a; --accent-light: #fff7ed;
  --brand: var(--pmu); --brand-ink: #fff; --bg: #f4f6f8; --card: #fff; --ink: #1f2d3d; --muted: #536274;
  --line: #e5e7eb; --line-2: #d7dee7; --ok: #1f8a4c; --err: #b42318; --info: #175cd3;
  --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(11,42,74,.06), 0 10px 30px rgba(11,42,74,.07); --focus: 0 0 0 3px rgba(244,122,42,.45);
  font-family: Manrope, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[lang="ar"] body { font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.5; }
a { color: var(--pmu); }
:focus-visible { outline: none; box-shadow: var(--focus); }
.staff-shell { min-height: 100vh; display: grid; grid-template-columns: 210px 1fr; }
.staff-sidebar { background: radial-gradient(600px 300px at 90% -10%, rgba(244,122,42,.28), transparent 60%), linear-gradient(180deg, var(--pmu) 0%, var(--pmu-dark) 100%);
  box-shadow: 8px 0 16px rgba(11,42,74,.08); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; }
.staff-brand { background: #fff; display: flex; align-items: center; justify-content: center; padding: .9rem .75rem; border-bottom: 1px solid var(--line); }
.staff-brand img { width: 100%; max-width: 170px; height: auto; display: block; }
.side-title { padding: .9rem 1rem .2rem; font-weight: 800; font-size: .95rem; }
.side-title small { display: block; color: #ffb27d; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html[lang="ar"] .side-title small { letter-spacing: 0; }
.staff-nav { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .6rem; }
.staff-nav a { display: block; border-radius: 999px; padding: .7rem 1rem; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.85); text-decoration: none; }
.staff-nav a:hover { background: rgba(255,255,255,.12); }
.staff-nav a.active, .staff-nav a.active:hover { background: var(--accent-light); color: var(--pmu); box-shadow: inset 0 0 0 1px rgba(244,122,42,.35); font-weight: 700; }
.staff-main { display: flex; flex-direction: column; min-width: 0; }
.staff-topbar { display: flex; align-items: center; gap: .75rem; padding: .55rem 1.5rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.2) blur(8px); position: sticky; top: 0; z-index: 20; }
.staff-topbar .top-title { color: var(--pmu); font-weight: 800; }
.staff-topbar .spacer { flex: 1; }
.staff-topbar .lang { font-weight: 700; text-decoration: none; }
.avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--pmu); color: #fff; display: grid; place-items: center; font-weight: 700; border: 2px solid var(--accent); }
.menu-toggle { display: none; background: none !important; color: var(--pmu) !important; font-size: 1.4rem; padding: .2rem .4rem !important; }
.staff-content { padding: 1.5rem 1.75rem 3rem; flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .staff-shell { grid-template-columns: 1fr; }
  .staff-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: 230px; transform: translateX(-105%); transition: transform .2s; }
  [dir=rtl] .staff-sidebar { transform: translateX(105%); }
  body.menu-open .staff-sidebar { transform: none; }
  .menu-toggle { display: inline-block; }
  .staff-content { padding: 1rem; }
}
.auth-split { background: #fff; min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.auth-brand { background: radial-gradient(1200px 400px at 85% -10%, rgba(244,122,42,.28), transparent 60%), linear-gradient(135deg, var(--pmu) 0%, var(--pmu-dark) 100%);
  color: #fff; display: grid; place-items: center; text-align: center; padding: 2rem; }
.auth-brand img { width: 110px; height: 110px; object-fit: contain; display: block; margin: 0 auto 1rem; border-radius: 50%; background: #fff; filter: drop-shadow(0 14px 28px rgba(0,0,0,.22)); }
.auth-brand strong { font-size: 1.6rem; font-weight: 800; display: block; }
.auth-brand .auth-kicker { display: block; margin-top: .5rem; color: #ffb27d; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: 2rem 3rem; max-width: 30rem; margin: 0 auto; width: 100%; }
.auth-form .card { border: 0; box-shadow: none; padding: 0; }
.auth-form h1 { color: var(--pmu); font-size: 1.25rem; }
.auth-lang { align-self: flex-end; font-weight: 700; text-decoration: none; margin-bottom: 1rem; }
@media (max-width: 760px) { .auth-split { grid-template-columns: 1fr; } .auth-brand { padding: 1.5rem; } .auth-brand img { width: 72px; height: 72px; } .auth-form { padding: 1.5rem; } }
h1 { font-size: 1.55rem; font-weight: 800; color: var(--pmu); margin: 0 0 1.25rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
h2 { font-size: 1rem; font-weight: 800; color: var(--pmu); margin: 0 0 .75rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem 1.4rem; margin-block-end: 1.25rem; overflow-x: auto; }
.narrow { max-width: 440px; margin-inline: auto; }
label { display: block; margin-block-end: .9rem; font-weight: 600; font-size: .92rem; }
input, select, textarea { display: block; width: 100%; margin-block-start: .3rem; padding: .7rem .9rem; font: inherit; color: inherit;
  border: 1.5px solid var(--line-2); border-radius: var(--radius); background: #fff; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: #b8c4d2; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
input[type=checkbox], input[type=radio] { display: inline-block; width: auto; margin: 0; accent-color: var(--accent); }
input.code { font-size: 1.5rem; letter-spacing: .4em; text-align: center; }
button { font: inherit; font-weight: 700; padding: .6rem 1.1rem; border: 1px solid var(--pmu); border-radius: var(--radius); background: var(--pmu); color: #fff; cursor: pointer; transition: filter .15s, box-shadow .15s; }
button:not(:disabled):hover { filter: brightness(1.06); }
button.accent { background: var(--accent); border-color: var(--accent); }
button.ghost, .small-btn { background: #fff; color: var(--pmu); border-color: var(--pmu); padding: .35rem .8rem; font-size: .85rem; }
button.danger, .btn.danger { background: #b42318; border-color: #b42318; color: #fff; }
button.small { padding: .3rem .7rem; font-size: .8rem; background: var(--pmu-light); color: var(--pmu); border-color: transparent; }
button.link { background: none; border: 0; padding: 0; color: var(--pmu); text-decoration: underline; }
form.inline { display: inline; }
.row { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-block-start: 1rem; }
.muted { color: var(--muted); font-size: .9rem; }
.flash { padding: .7rem 1rem; border-radius: 8px; margin-block-end: 1rem; border: 1px solid; }
.flash.ok { color: var(--ok); background: #ecfdf3; }
.flash.error { color: var(--err); background: #fef3f2; }
.flash.info { color: var(--info); background: #eff8ff; }
code.secret { display: inline-block; margin-inline-start: .4rem; padding: .15rem .5rem; background: #fff; border: 1px dashed var(--ok); font-size: 1.05rem; user-select: all; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: start; padding: .55rem .5rem; border-block-end: 1px solid var(--line); vertical-align: top; }
th { background: var(--pmu-light); color: var(--pmu); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border: 0; }
html[lang=ar] th { letter-spacing: 0; }
tbody tr:hover td, table tr:hover td { background: #fafbfc; }
tr.off td { color: var(--muted); }
td.actions { white-space: nowrap; }
td.actions form + form { margin-inline-start: .3rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-block-end: 1.25rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1rem 1.2rem; border-inline-start: 4px solid var(--accent); }
.stat strong { display: block; font-size: 1.8rem; color: var(--brand); }
.stat span { color: var(--muted); }
.roadmap { margin: 0; padding-inline-start: 1.25rem; }
.roadmap li { padding: .45rem 0; border-block-end: 1px solid var(--line); }
.roadmap li span { display: inline-block; min-width: 60%; }
.roadmap li em { font-style: normal; font-size: .8rem; padding: .1rem .5rem; border-radius: 99px; margin-inline-start: .5rem; background: #eef2f6; color: var(--muted); }
.roadmap li.status_done em { background: #ecfdf3; color: var(--ok); }
.roadmap li.status_next em { background: #eff8ff; color: var(--info); }

/* ---- shared form/table bits for phase 2+ pages ---- */
.grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;align-items:end;margin:.6rem 0}
.grid4 label{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem}
.grid4 .wide{grid-column:1/-1}
label.check{flex-direction:row!important;align-items:center;gap:.4rem}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem}
.tabs a{padding:.3rem .7rem;border:1px solid #cfd8e3;border-radius:999px;text-decoration:none}
.tabs a.on{background:var(--pmu);color:#fff;border-color:var(--brand)}
tr.sel td{background:#eef5ff}
.warn{color:#b45309}
.muted{color:#64748b;font-size:.9rem}
.actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:flex-start}
a.btn,button.btn{display:inline-block;padding:.45rem .9rem;border-radius:var(--radius);background:var(--pmu);color:#fff;text-decoration:none;border:1px solid var(--pmu);cursor:pointer;font:inherit;font-weight:700}
a.btn.sec,button.btn.sec{background:#fff;color:var(--pmu)}
button.sec,a.sec{background:#e2e8f0;color:#0f172a}
button.danger{background:#b91c1c;color:#fff}
details>summary{cursor:pointer;color:var(--brand);margin:.3rem 0}
.badge{display:inline-block;padding:.2rem .7rem;border-radius:999px;font-size:.75rem;font-weight:500;background:var(--pmu-light);color:var(--pmu)}
.badge.ok{background:#e4f6ea;color:#1f8a4c}.badge.bad{background:#fee2e2;color:#991b1b}.badge.mid{background:#fff4e5;color:#b45309}
#toast{position:fixed;bottom:1rem;inset-inline-start:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:.5rem 1rem;border-radius:8px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:99}
#toast.show{opacity:.95}#toast.bad{background:#b91c1c}

/* ---- map editor ---- */
body.wide main{max-width:none;padding:0}
#editor{display:flex;flex-direction:column;height:calc(100vh - 56px)}
.ed-toolbar{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;padding:.4rem .6rem;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.ed-toolbar button{padding:.3rem .6rem;border:1px solid #cbd5e1;background:#fff;border-radius:6px;cursor:pointer;font:inherit;font-size:.85rem}
.ed-toolbar button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.ed-toolbar select{font-size:.85rem;padding:.2rem}
.ed-toolbar .sep{width:1px;height:22px;background:#cbd5e1;margin:0 .2rem}
.ed-body{flex:1;display:flex;min-height:0}
.ed-plan{flex:1;position:relative;background:#e5e7eb;overflow:hidden;touch-action:none}
.plan-svg{width:100%;height:100%;display:block;user-select:none}
.ed-hint{position:absolute;top:.5rem;inset-inline-start:.5rem;background:rgba(15,23,42,.8);color:#fff;padding:.3rem .6rem;border-radius:6px;font-size:.85rem;pointer-events:none;z-index:2}
.ed-hint:empty{display:none}
.ed-panel{width:360px;max-width:45vw;overflow:auto;border-inline-start:1px solid #e2e8f0;padding:.7rem;background:#fff;font-size:.9rem}
.ed-panel h3{margin:.2rem 0 .5rem;font-size:1rem}
.ed-panel h4{margin:.9rem 0 .3rem;font-size:.9rem;color:#334155}
.ed-panel label{display:flex;flex-direction:column;gap:.15rem;margin:.35rem 0;font-size:.82rem}
.ed-panel label.check{flex-direction:row}
.ed-panel input:not([type=checkbox]),.ed-panel select,.ed-panel textarea{width:100%;box-sizing:border-box;padding:.3rem;font:inherit}
.ed-panel .row{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;margin:.35rem 0}
.ed-panel .row>*{flex:0 0 auto}
.ed-panel video,.ed-panel img.prev{width:100%;border-radius:6px;background:#000}
.ed-panel .item{display:flex;gap:.4rem;align-items:center;padding:.3rem;border:1px solid #e2e8f0;border-radius:6px;margin:.25rem 0;cursor:pointer}
.ed-panel .item img{width:56px;height:40px;object-fit:cover;border-radius:4px;background:#ddd}
.ed-panel .item.on{border-color:var(--brand);background:#eef5ff}
.ed-panel .box{border:1px solid #e2e8f0;border-radius:8px;padding:.5rem;margin:.4rem 0}
/* svg */
.layer-edges line{stroke-linecap:round}
.n-label{font-family:system-ui,sans-serif;paint-order:stroke;stroke:#fff;stroke-width:3px;fill:#0f172a;pointer-events:none}
.sel-ring{fill:none;stroke:#f59e0b;pointer-events:none}
.layer-media .m-icon{cursor:move}
.layer-media .m-rot{cursor:grab;fill:#fff;stroke:#7c3aed}
.layer-nodes circle{cursor:pointer}
@media (max-width:800px){.ed-body{flex-direction:column}.ed-panel{width:auto;max-width:none;height:45vh;border-inline-start:0;border-top:1px solid #e2e8f0}}
.drop{border:2px dashed #94a3b8;border-radius:10px;padding:1.4rem;text-align:center;color:#475569}
.drop.over{background:#eef5ff;border-color:var(--brand)}
#queue .item{display:flex;gap:.6rem;align-items:center;margin:.3rem 0}
.row{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.4rem 0}
.sy-video{width:38%;min-width:260px;display:flex;flex-direction:column;background:#0f172a;padding:.4rem;gap:.3rem}
.sy-video video{width:100%;max-height:60vh;background:#000;border-radius:6px}
.sy-tl{position:relative;height:34px;background:#1e293b;border-radius:6px;cursor:pointer}
.sy-tl .kf{position:absolute;top:4px;width:4px;height:26px;margin-inline-start:-2px;background:#fff;border-radius:2px}
.sy-tl .kf.node{background:#facc15}
.sy-tl .kf.on{outline:2px solid #f59e0b}
.sy-tl .spin{position:absolute;top:0;height:5px;background:#f97316;border-radius:2px}
.sy-tl .seg{position:absolute;top:28px;height:6px;background:#7c3aed}
.sy-tl .cur{position:absolute;top:0;width:2px;height:34px;background:#ef4444}
.sy-video .row{color:#fff}
@media (max-width:1000px){.sy-video{width:auto}}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 1.25rem}
.rt-body{display:flex;gap:1rem;flex-wrap:wrap}
.rt-cam{flex:1 1 300px;max-width:420px;background:#0f172a;border-radius:var(--radius-lg);padding:.5rem;color:#fff}
.rt-cam video{width:100%;border-radius:10px;background:#000;display:block}
.rt-out{font-size:.85rem;padding:.5rem}.rt-out b{color:#ffb27d}
#rtPlan{flex:2 1 420px;min-height:60vh;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--line)}