:root {
  --bg:#f0ede8; --surf:#fff; --bd:rgba(0,0,0,.08); --bd2:rgba(0,0,0,.14);
  --p:#1a56a0; --plt:#e8f0fb; --pdk:#0c3878;
  --ok:#166534; --ok-bg:#dcfce7;
  --wn:#92400e; --wn-bg:#fef3c7;
  --er:#991b1b; --er-bg:#fee2e2;
  --pu:#4c1d95; --pu-bg:#ede9fe;
  --co:#7c2d12; --co-bg:#ffedd5;
  --mu:#6b7280; --tx:#111827;
  --r:10px; --rl:14px; --sw:210px;
  --ff:'IBM Plex Sans Arabic',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ff);background:var(--bg);color:var(--tx);font-size:14px;line-height:1.55;direction:rtl}

/* ── AUTH ── */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.auth-wrap{width:100%;max-width:390px;padding:1rem}
.auth-card{background:var(--surf);border:0.5px solid var(--bd2);border-radius:var(--rl);padding:2.5rem 2rem}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:1.5rem}
.brand-icon{width:44px;height:44px;background:var(--p);color:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.brand-name{font-size:20px;font-weight:600}
.brand-sub{font-size:12px;color:var(--mu);margin-top:2px}
.auth-hint{font-size:12px;color:var(--mu);margin-top:1.2rem;text-align:center}
.auth-hint code{background:var(--bg);padding:2px 7px;border-radius:5px}
.inp-wrap{display:flex;align-items:center;gap:8px;border:0.5px solid var(--bd2);border-radius:var(--r);padding:0 10px;background:var(--surf);transition:border-color .15s}
.inp-wrap:focus-within{border-color:var(--p)}
.inp-wrap i{color:var(--mu);font-size:17px;flex-shrink:0}
.inp-wrap input{flex:1;border:none;background:none;font-family:var(--ff);font-size:13px;color:var(--tx);padding:9px 0;outline:none}
.btn-login{width:100%;background:var(--p);color:#fff;border:none;border-radius:var(--r);padding:11px;font-family:var(--ff);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;transition:background .15s}
.btn-login:hover{background:#1447a0}

/* ── LAYOUT ── */
.layout{display:flex;height:100vh;overflow:hidden}

/* ── SIDEBAR ── */
.sidebar{width:var(--sw);background:var(--surf);border-left:0.5px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0}
.sb-logo{display:flex;align-items:center;gap:10px;padding:1rem;border-bottom:0.5px solid var(--bd);flex-shrink:0}
.sb-icon{width:34px;height:34px;background:var(--p);color:#fff;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.sb-name{font-size:15px;font-weight:600}
.sb-sub{font-size:11px;color:var(--mu)}
.sb-nav{padding:.75rem .7rem;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.nb{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);color:var(--mu);font-size:13px;text-decoration:none;transition:all .15s;position:relative}
.nb:hover{background:var(--bg);color:var(--tx)}
.nb.active{background:var(--plt);color:var(--pdk);font-weight:500}
.nb i{font-size:17px;flex-shrink:0}
.nbadge{background:var(--er-bg);color:var(--er);font-size:11px;font-style:normal;padding:1px 7px;border-radius:20px;margin-right:auto}
.nb-sep{font-size:10px;color:var(--mu);padding:10px 10px 3px;letter-spacing:.5px}
.sb-foot{padding:.75rem;border-top:0.5px solid var(--bd);flex-shrink:0}
.sb-user{display:flex;align-items:center;gap:8px}
.sb-uinfo{flex:1;min-width:0}
.sb-uname{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-urole{font-size:11px;color:var(--mu)}

/* ── AVATAR ── */
.av{width:32px;height:32px;border-radius:50%;background:var(--plt);color:var(--pdk);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;flex-shrink:0}
.av.sm{width:26px;height:26px;font-size:11px}
.av.lg{width:40px;height:40px;font-size:16px}

/* ── MAIN ── */
.main{flex:1;overflow-y:auto;padding:1.5rem}
.pg{display:none;animation:fi .18s ease}
.pg.active{display:block}
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── PAGE HEADER ── */
.pg-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:10px}
.pg-hdr h1{font-size:20px;font-weight:600}
.pg-date{font-size:13px;color:var(--mu)}
.pg-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--r);font-family:var(--ff);font-size:13px;cursor:pointer;border:0.5px solid var(--bd2);background:var(--surf);color:var(--tx);transition:all .15s;font-weight:400;text-decoration:none}
.btn:hover{background:var(--bg)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--p);color:#fff;border-color:transparent}
.btn-primary:hover{background:#1447a0}
.btn-ghost{background:var(--surf)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.ico-btn{border:none;background:none;cursor:pointer;color:var(--mu);display:flex;align-items:center;padding:5px;border-radius:7px;font-size:18px}
.ico-btn:hover{background:var(--bg);color:var(--tx)}
.txt-btn{background:none;border:none;color:var(--pdk);font-family:var(--ff);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.txt-btn:hover{text-decoration:underline}

/* ── ALERT ── */
.alert{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:var(--r);font-size:13px;margin-bottom:1rem}
.alert-danger{background:var(--er-bg);border:0.5px solid #fca5a5;color:var(--er)}
.alert-late{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:var(--r);font-size:13px;margin-bottom:1.25rem;background:var(--er-bg);border:0.5px solid #fca5a5;color:var(--er)}
.al-link{background:none;border:none;color:var(--er);font-family:var(--ff);font-size:13px;cursor:pointer;text-decoration:underline;font-weight:500}

/* ── CARD ── */
.card{background:var(--surf);border:0.5px solid var(--bd);border-radius:var(--rl);margin-bottom:1rem;overflow:hidden}
.card-hdr{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:0.5px solid var(--bd)}
.card-hdr h3{font-size:14px;font-weight:500}
.card-body{padding:14px}

/* ── METRICS ── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.25rem}
.metric{background:var(--surf);border:0.5px solid var(--bd);border-radius:var(--rl);padding:16px}
.mv{font-size:28px;font-weight:600;line-height:1.1}
.ml{font-size:12px;color:var(--mu);margin-top:3px}
.ms{font-size:11px;margin-top:4px}

/* ── TWO COL ── */
.two-col{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem}

/* ── DIST ── */
.dist-wrap{padding:14px;display:flex;flex-direction:column;gap:9px}
.dr{display:flex;align-items:center;gap:10px;font-size:12px}
.dl{width:90px;color:var(--mu);flex-shrink:0}
.db{flex:1;height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.df{height:100%;border-radius:3px;transition:width .4s}
.dc{width:22px;text-align:left;font-weight:500}

/* ── RECENT ── */
.recent-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:0.5px solid var(--bd);font-size:13px}
.recent-row:last-child{border-bottom:none}

/* ── BADGE ── */
.bdg{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;white-space:nowrap}
.b-open{background:var(--plt);color:var(--pdk)}
.b-solving{background:var(--wn-bg);color:var(--wn)}
.b-done{background:var(--ok-bg);color:var(--ok)}
.b-unsolved{background:#f3f4f6;color:#374151}
.b-rehab{background:var(--pu-bg);color:var(--pu)}
.b-deport{background:var(--co-bg);color:var(--co)}
.b-late{background:var(--er-bg);color:var(--er)}

/* ── TABLE ── */
.fbar{display:flex;gap:8px;padding:10px 14px;border-bottom:0.5px solid var(--bd);flex-wrap:wrap;align-items:center}
.sbox{display:flex;align-items:center;gap:7px;background:var(--bg);border:0.5px solid var(--bd2);border-radius:var(--r);padding:6px 10px;flex:1;min-width:150px}
.sbox i{color:var(--mu);font-size:16px}
.sbox input{border:none;background:none;font-family:var(--ff);font-size:13px;color:var(--tx);width:100%;outline:none}
.fbar select{font-family:var(--ff);font-size:12px;padding:6px 8px;border:0.5px solid var(--bd2);border-radius:var(--r);background:var(--surf);color:var(--tx)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:8px 12px;font-size:11px;font-weight:500;color:var(--mu);border-bottom:0.5px solid var(--bd);text-align:right;white-space:nowrap}
td{padding:10px 12px;border-bottom:0.5px solid var(--bd);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg)}
.td-n{font-size:11px;color:var(--mu)}
.td-nm{display:flex;align-items:center;gap:8px}
.clr-late{color:var(--er);font-weight:500}
.empty{text-align:center;padding:3rem;color:var(--mu)}
.empty i{font-size:36px;display:block;margin-bottom:8px;opacity:.4}

/* ── FORM ── */
.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:12px;color:var(--mu)}
.f input,.f select,.f textarea{font-family:var(--ff);font-size:13px;padding:8px 10px;border:0.5px solid var(--bd2);border-radius:var(--r);background:var(--surf);color:var(--tx);transition:border-color .15s}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--p)}
.f textarea{resize:vertical}
.req{color:var(--er)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.full{grid-column:1/-1}
.ff{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:0.5px solid var(--bd);margin-top:4px}
.fstep{display:none}
.fstep.active{display:block}

/* ── STEPPER ── */
.stepper{display:flex;align-items:center;padding:13px 16px;border-bottom:0.5px solid var(--bd)}
.stp{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mu)}
.stp.active{color:var(--pdk);font-weight:500}
.stp.done{color:var(--ok)}
.stp-n{width:22px;height:22px;border-radius:50%;border:0.5px solid var(--bd2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0;background:var(--bg)}
.stp.active .stp-n{background:var(--plt);border-color:var(--p);color:var(--pdk)}
.stp.done .stp-n{background:var(--ok-bg);border-color:#86efac;color:var(--ok)}
.stp-ln{flex:1;height:1px;background:var(--bd);min-width:16px}

/* ── CHAR COUNTER ── */
.char-lbl{font-size:11px;color:var(--mu);font-weight:400;margin-right:8px}
.char-track{height:4px;background:var(--bg);border-radius:2px;overflow:hidden;margin-top:5px}
.char-fill{height:100%;border-radius:2px;background:var(--p);transition:width .2s,background .2s}
.clr-danger{color:var(--er)}

/* ── ASSIGNED BOX ── */
.asgn-box{display:flex;align-items:center;gap:9px;background:var(--bg);border:0.5px solid var(--bd);border-radius:var(--r);padding:9px 11px}
.asgn-box small{font-size:11px;color:var(--mu)}
.muted{color:var(--mu)}
.ms-auto{margin-right:auto}

/* ── DETAIL ── */
.detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:1rem;align-items:start}
.ig{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;font-size:13px}
.ig label{font-size:11px;color:var(--mu);display:block;margin-bottom:2px}
.ae{border-right:2px solid var(--p);padding:8px 12px;margin:0 14px 10px}
.ae:last-child{margin-bottom:0}
.ae-txt{font-size:13px;line-height:1.6}
.ae-meta{font-size:11px;color:var(--mu);margin-top:3px}
.af{padding:12px 14px;border-top:0.5px solid var(--bd)}
.no-act{text-align:center;padding:1.5rem;color:var(--mu);font-size:13px}

/* ── STAFF ── */
.staff-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:1rem}
.sc{background:var(--surf);border:0.5px solid var(--bd);border-radius:var(--rl);padding:14px}
.sc-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.sc-st{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st{background:var(--bg);border-radius:8px;padding:8px;text-align:center}
.stv{font-size:18px;font-weight:600}
.stl{font-size:10px;color:var(--mu);margin-top:1px}

/* ── SETTINGS ── */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.sg-full{grid-column:1/-1}
.tags{display:flex;flex-wrap:wrap;gap:7px;padding:12px 14px;min-height:46px}
.tag{display:flex;align-items:center;gap:6px;background:var(--bg);border:0.5px solid var(--bd2);border-radius:20px;padding:4px 12px;font-size:12px}
.tag.arc{opacity:.5;text-decoration:line-through}
.tag button{border:none;background:none;cursor:pointer;color:var(--mu);display:flex;align-items:center;padding:0;font-size:15px}
.tag button:hover{color:var(--er)}
.tag-add{display:flex;gap:8px;padding:0 14px 12px}
.tag-add input{flex:1;font-family:var(--ff);font-size:13px;padding:7px 10px;border:0.5px solid var(--bd2);border-radius:var(--r);background:var(--surf);color:var(--tx)}
.slider-row{display:flex;align-items:center;gap:10px}
.slider-row input[type=range]{flex:1;accent-color:var(--p)}
.mt{margin-top:12px}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:0.5px solid var(--bd)}
.user-row:last-child{border-bottom:none}
.ur-info{flex:1}
.ur-name{font-size:13px;font-weight:500}
.ur-role{font-size:11px;color:var(--mu)}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{background:var(--surf);border-radius:var(--rl);width:380px;max-width:95vw}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:0.5px solid var(--bd)}
.modal-hdr h3{font-size:15px;font-weight:500}
.modal-body{padding:16px}
.modal-ftr{display:flex;gap:8px;justify-content:flex-end;padding:12px 15px;border-top:0.5px solid var(--bd)}

/* ── TOAST ── */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(12px);background:#111827;color:#fff;padding:9px 20px;border-radius:var(--r);font-size:13px;z-index:200;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── MISC ── */
.clr-ok{color:var(--ok)}.clr-wn{color:var(--wn)}.clr-er{color:var(--er)}

/* ── RESPONSIVE ── */
@media(max-width:900px){.two-col,.detail-grid,.settings-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .sidebar{width:52px}
  .sb-logo .sb-name,.sb-logo .sb-sub,.nb span,.nb-sep,.sb-uinfo{display:none}
  .main{padding:1rem}
  .fg{grid-template-columns:1fr}
}
@media print{
  .sidebar,.pg-hdr .pg-actions,.detail-grid>div:last-child,.fbar,#af,.modal-bg{display:none!important}
  .main{padding:0}
  .pg.active{display:block!important}
}