:root{
  --bg:#f4f1ea; --card:#fffdf8; --ink:#1f2a27; --muted:#6b756f; --line:#e2ddd1;
  --brand:#0f5c4d; --brand-2:#137563; --gold:#b38b3c;
  --ok:#1f8a4c; --ok-bg:#e3f4e9; --warn:#b7791f; --warn-bg:#fdf1dc;
  --bad:#c0392b; --bad-bg:#fbe5e2; --idle:#8a918d; --idle-bg:#eeede8;
  --r:14px; --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px}
a{color:var(--brand)}
h1{font-size:1.45rem;margin:.2rem 0 1rem}
h2{font-size:1.15rem;margin:1.4rem 0 .7rem}
small,.muted{color:var(--muted)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--brand);color:#fff;padding-top:max(10px,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:10px}
.brand strong{display:block;font-size:1rem}
.brand small{display:block;color:#cfe5df;font-size:.78rem;line-height:1.2}
.logo{color:var(--gold);font-size:1.3rem}
.navtoggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem}
.sidenav{position:fixed;top:58px;bottom:0;right:0;width:210px;background:var(--card);border-left:1px solid var(--line);padding:12px 8px;overflow:auto}
.sidenav a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink);margin-bottom:2px}
.sidenav a.on{background:var(--brand);color:#fff}
.sidenav a:hover:not(.on){background:#efebe1}
.wrap{max-width:1100px;margin:0 auto;padding:18px 16px 60px}
.wrap.with-nav{margin-right:210px;max-width:none;padding-right:24px;padding-left:24px}
.area-sup .wrap,.area-public .wrap{max-width:560px}
@media (max-width:820px){
  .navtoggle{display:block}
  .sidenav{transform:translateX(100%);transition:transform .2s;z-index:30;width:240px;box-shadow:-8px 0 20px rgba(0,0,0,.1)}
  body.nav-open .sidenav{transform:none}
  .wrap.with-nav{margin-right:0;padding:16px}
}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.stat b{display:block;font-size:1.7rem;line-height:1.1}
.stat span{color:var(--muted);font-size:.85rem}
.stat.ok b{color:var(--ok)} .stat.waiting b{color:var(--warn)} .stat.missed b{color:var(--bad)}
.room{border-radius:var(--r);padding:14px;border:1px solid var(--line);background:var(--card);border-top:5px solid var(--idle)}
.room.st-ok{border-top-color:var(--ok)} .room.st-waiting{border-top-color:var(--warn)} .room.st-missed{border-top-color:var(--bad);background:#fffaf9}
.room h3{margin:0 0 4px;font-size:1.05rem}
.room .meta{font-size:.85rem;color:var(--muted)}
.room .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:600;background:var(--idle-bg);color:var(--idle);white-space:nowrap}
.st-ok.badge,.badge.st-ok{background:var(--ok-bg);color:var(--ok)}
.badge.st-waiting{background:var(--warn-bg);color:var(--warn)}
.badge.st-missed{background:var(--bad-bg);color:var(--bad)}
.badge.st-upcoming{background:#e7eef6;color:#3b5f86}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r);overflow:hidden}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle;font-size:.93rem}
th{background:#efebe1;font-weight:600;font-size:.85rem;color:#4a544f}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px}
.tablewrap table{border-radius:0}
form.inline{display:inline}
label{display:block;font-size:.88rem;color:#46504b;margin:8px 0 4px}
input[type=text],input[type=password],input[type=tel],input[type=number],input[type=time],input[type=date],input[type=email],select{width:100%;padding:10px 12px;border:1px solid #d5cfc2;border-radius:10px;background:#fff;font:inherit;color:inherit}
input:focus,select:focus{outline:2px solid var(--brand-2);outline-offset:1px;border-color:transparent}
.fields{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:end}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:10px;border:1px solid transparent;background:var(--brand);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--brand-2)}
.btn.sec{background:#fff;color:var(--brand);border-color:#cfd8d4}
.btn.sec:hover{background:#f2f6f4}
.btn.danger{background:#fff;color:var(--bad);border-color:#efc9c4}
.btn.sm{padding:6px 10px;font-size:.85rem;border-radius:8px}
.btn.big{width:100%;padding:18px;font-size:1.2rem;border-radius:16px}
.btn:disabled{opacity:.55;cursor:default}
.flash{padding:12px 14px;border-radius:12px;margin-bottom:14px;background:var(--ok-bg);color:#145a33;border:1px solid #bfe3cc}
.flash.err{background:var(--bad-bg);color:#8d2a1f;border-color:#f0c3bd}
.flash.info{background:#e7eef6;color:#2f4f73;border-color:#c9d8ea}
.note{font-size:.88rem;color:var(--muted);background:#f8f5ee;border:1px dashed var(--line);border-radius:12px;padding:10px 12px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs a{padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.tabs a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.center{text-align:center}
.hero{text-align:center;padding:26px 10px}
.hero .logo{font-size:2.4rem}
/* صفحة المراقب */
.alertbox{border-radius:18px;padding:18px;margin-bottom:14px;background:var(--warn-bg);border:2px solid #f0c77f;animation:pulse 1.6s infinite}
.alertbox h2{margin:0 0 4px}
.alertbox .count{font-size:2.2rem;font-weight:700;font-variant-numeric:tabular-nums}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(183,121,31,.35)}50%{box-shadow:0 0 0 10px rgba(183,121,31,0)}}
.slotlist{list-style:none;padding:0;margin:0}
.slotlist li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line)}
.slotlist li.now{background:#f1f7f4;border-radius:10px;padding:12px 10px;border-bottom-color:transparent}
.slotlist .t{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem}
.result{border-radius:18px;padding:22px;text-align:center;margin-bottom:14px}
.result.ok{background:var(--ok-bg);color:#145a33}
.result.bad{background:var(--bad-bg);color:#8d2a1f}
.result .icon{font-size:2.6rem;line-height:1}
.photo-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:50}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px}
.pct{font-weight:700}
.pct.good{color:var(--ok)} .pct.mid{color:var(--warn)} .pct.low{color:var(--bad)}
.hide{display:none!important}
.spinner{display:inline-block;width:18px;height:18px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.matrix select{min-width:130px;padding:7px 8px}
.matrix td:first-child{white-space:nowrap}