/* ============ YAZI Admin — design tokens (match the app brand) ============ */
:root{
  --violet:#6C3FD6; --violet-deep:#5227B0; --violet-soft:#EFE8FD; --violet-ghost:#F7F4FE;
  --ink:#221A38; --ink-2:#4C4368; --muted:#7F76A0; --faint:#A9A1C4;
  --ground:#F6F4FB; --surface:#FFFFFF; --surface-2:#F1EDFA;
  --line:#E7E2F5; --line-soft:#F0ECFA;
  --amber:#B45309; --amber-wash:#FDF3E0;
  --mint:#0E9F6E; --mint-deep:#047857; --mint-wash:#DEF7EC;
  --coral:#E11D48; --coral-wash:#FDE8ED;
  --sky:#0E7DC2; --sky-wash:#E1F1FB;
  --side:#1B1430; --side-2:#241A44; --side-ink:#CFC7EA; --side-faint:#8D82B8;
  --shadow-card:0 1px 2px rgba(34,26,56,.05), 0 10px 30px -18px rgba(82,39,176,.35);
  --shadow-float:0 4px 10px rgba(34,26,56,.08), 0 24px 60px -24px rgba(82,39,176,.5);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --f-latin:ui-rounded,"SF Pro Rounded",-apple-system,"Segoe UI Variable Display","Segoe UI",Roboto,system-ui,sans-serif;
  --f-ar:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--f-latin);font-size:14.5px;line-height:1.45}
.hidden{display:none!important}
[lang="ar"],.ar{font-family:var(--f-ar)}
::selection{background:var(--violet-soft)}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink)}

/* ============ login ============ */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(55% 45% at 18% 0%, rgba(108,63,214,.18), transparent 60%),
    radial-gradient(45% 40% at 90% 100%, rgba(225,29,72,.10), transparent 60%),
    var(--ground)}
.login-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-float);padding:34px 30px;text-align:center;
  animation:pop .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.login-logo{font-size:44px;margin-bottom:6px}
.login-card h1{margin:0;font-size:26px;letter-spacing:.3px}
.login-card h1 span{color:var(--violet)}
.login-sub{color:var(--muted);margin:6px 0 22px}
.login-card label{display:block;text-align:left;font-weight:600;color:var(--ink-2);font-size:13px;margin-bottom:14px}
.login-card input{width:100%;margin-top:5px}
.login-err{background:var(--coral-wash);color:var(--coral);border-radius:var(--r-sm);
  padding:9px 12px;font-weight:600;margin-bottom:14px;animation:shake .35s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ============ shell ============ */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100dvh}
.side{background:linear-gradient(180deg,var(--side-2),var(--side) 40%);color:var(--side-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;padding:18px 12px 14px}
.side-brand{font-size:19px;padding:2px 10px 16px;color:#fff;letter-spacing:.4px}
.side-brand span{color:var(--side-faint);font-weight:500;margin-left:6px;font-size:14px}
.side-nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.side-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
  color:var(--side-ink);cursor:pointer;font-weight:600;font-size:14px;transition:background .15s,color .15s}
.side-nav a i{font-style:normal;width:20px;text-align:center;font-size:16px}
.side-nav a s{text-decoration:none;flex:1}
.side-nav a em{font-style:normal;background:rgba(255,255,255,.10);border-radius:99px;
  padding:1px 8px;font-size:11.5px;font-weight:700}
.side-nav a em.warn:not(:empty){background:var(--amber-wash);color:var(--amber)}
.side-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.side-nav a.active{background:var(--violet);color:#fff;box-shadow:0 6px 18px -6px rgba(108,63,214,.8)}
.side-sep{height:1px;background:rgba(255,255,255,.08);margin:10px 8px}
.side-foot{border-top:1px solid rgba(255,255,255,.08);padding-top:12px;margin-top:8px}
.me-chip{color:#fff;font-weight:700;font-size:13px;padding:0 10px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-chip small{display:block;color:var(--side-faint);font-weight:500;text-transform:capitalize}
.side-foot-row{display:flex;justify-content:space-between;padding:6px 10px 0}
.linklike{background:none;border:0;color:var(--side-faint);font-size:12.5px;padding:0}
.linklike:hover{color:#fff}
.linklike.danger:hover{color:#FB7185}

/* ============ main / topbar ============ */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 26px 14px;position:sticky;top:0;z-index:20;
  background:linear-gradient(var(--ground) 75%,transparent)}
.topbar h1{margin:0;font-size:22px}
.topbar-right{display:flex;gap:10px;align-items:center}
.view{padding:4px 26px 40px;animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ inputs & buttons ============ */
.input,select.input,textarea.input{background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:8px 12px;outline:none;transition:border .15s, box-shadow .15s}
.input:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.input.search{width:280px}
textarea.input{resize:vertical;min-height:70px}
.btn{border:0;border-radius:var(--r-sm);padding:8.5px 15px;font-weight:700;font-size:13.5px;
  transition:transform .12s, box-shadow .15s, background .15s;display:inline-flex;align-items:center;gap:6px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 6px 16px -6px rgba(108,63,214,.7)}
.btn-primary:hover{background:var(--violet-deep)}
.btn-ghost{background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn-danger{background:var(--coral-wash);color:var(--coral)}
.btn-danger:hover{background:#FBD5DD}
.btn-mint{background:var(--mint-wash);color:var(--mint-deep)}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn-block{width:100%;justify-content:center;padding:11px}

/* ============ cards & grids ============ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);padding:18px 20px}
.grid-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;box-shadow:var(--shadow-card);animation:fadeUp .3s ease backwards}
.stat b{display:block;font-size:24px;letter-spacing:.3px}
.stat span{color:var(--muted);font-size:12.5px;font-weight:600}
.stat.violet{background:linear-gradient(135deg,var(--violet),var(--violet-deep));border:0;color:#fff}
.stat.violet span{color:#D9CCFA}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1100px){.grid-2{grid-template-columns:1fr}}
.card h3{margin:0 0 12px;font-size:15px}
.card h3 small{color:var(--muted);font-weight:500;margin-left:8px}

/* ============ charts ============ */
.chart-rows{display:flex;flex-direction:column;gap:7px}
.crow{display:grid;grid-template-columns:130px 1fr 44px;gap:10px;align-items:center;font-size:13px}
.crow .lbl{color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.crow .track{background:var(--surface-2);border-radius:6px;height:14px;position:relative;overflow:hidden}
.crow .bar{position:absolute;inset:0 auto 0 0;background:var(--violet);border-radius:0 4px 4px 0;
  min-width:3px;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.crow:hover .bar{background:var(--violet-deep)}
.crow .val{font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* missing-data report */
.miss-list{display:flex;flex-direction:column;gap:8px}
.miss{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--violet-ghost)}
.miss b{font-variant-numeric:tabular-nums;min-width:38px;text-align:center;background:var(--surface);
  border-radius:8px;padding:2px 6px;border:1px solid var(--line)}
.miss span{flex:1;color:var(--ink-2);font-weight:600}
.miss button{white-space:nowrap}

/* quota */
.quota-bar{background:var(--surface-2);height:12px;border-radius:6px;overflow:hidden;margin:8px 0 6px}
.quota-bar div{height:100%;background:var(--mint);border-radius:0 4px 4px 0;transition:width .5s}
.quota-bar div.hot{background:var(--amber)} .quota-bar div.full{background:var(--coral)}
.mono{font-family:var(--f-mono);font-size:12px}

/* ============ toolbar + table ============ */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar .spacer{flex:1}
.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);overflow:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{position:sticky;top:0;background:var(--violet-ghost);color:var(--ink-2);text-align:left;
  font-size:12px;text-transform:uppercase;letter-spacing:.5px;padding:11px 12px;border-bottom:1px solid var(--line);
  cursor:pointer;user-select:none;white-space:nowrap;z-index:5}
.tbl th.sorted{color:var(--violet)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tbody tr{transition:background .12s;cursor:pointer}
.tbl tbody tr:hover{background:var(--violet-ghost)}
.tbl tbody tr.sel{background:var(--violet-soft)}
.tbl .name b{display:block}
.tbl .name small{color:var(--muted);font-family:var(--f-ar)}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 10px;
  font-size:12px;font-weight:700;white-space:nowrap}
.pill{border-radius:99px;padding:3px 10px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.pill.active{background:var(--mint-wash);color:var(--mint-deep)}
.pill.hold{background:var(--amber-wash);color:var(--amber)}
.pill.pending{background:var(--sky-wash);color:var(--sky)}
.rate{font-variant-numeric:tabular-nums;white-space:nowrap}
.rate small{color:var(--muted)}
.dot-ok{color:var(--mint)} .dot-no{color:var(--faint)}
.rowbtns{display:flex;gap:6px;opacity:0;transition:opacity .15s}
tr:hover .rowbtns{opacity:1}

/* pagination + bulk bar */
.tbl-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;color:var(--muted);font-size:13px}
.pager{display:flex;gap:4px}
.pager button{border:1px solid var(--line);background:var(--surface);border-radius:8px;min-width:30px;padding:4px 8px;font-weight:700;color:var(--ink-2)}
.pager button.cur{background:var(--violet);border-color:var(--violet);color:#fff}
.bulkbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  background:var(--ink);color:#fff;border-radius:16px;box-shadow:var(--shadow-float);
  display:flex;gap:8px;align-items:center;padding:10px 16px;animation:pop .25s}
.bulkbar b{margin-right:6px}

/* pending queue */
.queue{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px;box-shadow:var(--shadow-card)}
.qcard h4{margin:0 0 2px} .qcard .ar{color:var(--muted)}
.qcard .qmeta{color:var(--muted);font-size:12.5px;margin:8px 0 12px}
.qcard .qbtns{display:flex;gap:8px}

/* ============ drawer ============ */
.drawer-wrap{position:fixed;inset:0;z-index:80}
.drawer-scrim{position:absolute;inset:0;background:rgba(27,20,48,.45);backdrop-filter:blur(2px);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(620px,96vw);background:var(--ground);
  box-shadow:var(--shadow-float);animation:slideIn .28s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 0}
.drawer-head h2{margin:0;font-size:19px}
.drawer-tabs{display:flex;gap:4px;padding:14px 22px 0;border-bottom:1.5px solid var(--line);background:var(--ground);flex-wrap:wrap}
.drawer-tabs button{background:none;border:0;border-bottom:2.5px solid transparent;padding:8px 12px;
  font-weight:700;color:var(--muted);border-radius:8px 8px 0 0}
.drawer-tabs button.cur{color:var(--violet);border-bottom-color:var(--violet)}
.drawer-body{flex:1;overflow-y:auto;padding:18px 22px}
.drawer-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line);background:var(--surface)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f-grid .full{grid-column:1/-1}
.field{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field .req{color:var(--coral)}
.field input,.field select,.field textarea{width:100%;margin-top:5px;display:block}
.field [dir="rtl"]{font-family:var(--f-ar)}
.hint{color:var(--muted);font-weight:500;font-size:12px;margin-top:3px}
.switches{display:flex;flex-wrap:wrap;gap:10px}
.switch{display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);
  padding:9px 14px;border-radius:var(--r-sm);font-weight:700;color:var(--ink-2);cursor:pointer;user-select:none}
.switch input{accent-color:var(--violet);width:16px;height:16px}
.list-editor .le-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 34px;gap:8px;margin-bottom:8px}
.list-editor .le-row.two{grid-template-columns:1fr 1fr 34px}
.le-del{border:0;background:var(--coral-wash);color:var(--coral);border-radius:8px;font-weight:800}
#map{height:300px;border-radius:var(--r-md);border:1px solid var(--line);margin-top:10px}
.hours-row{display:grid;grid-template-columns:110px 1fr;gap:8px;margin-bottom:6px;align-items:center}
.hours-row span{font-weight:700;color:var(--ink-2);font-size:12.5px}

/* ============ dialog & toasts ============ */
.dialog-wrap{position:fixed;inset:0;z-index:100;background:rgba(27,20,48,.45);display:grid;place-items:center;animation:fade .15s}
.dialog{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-float);
  width:min(430px,92vw);padding:24px;animation:pop .25s}
.dialog h2{margin:0 0 8px;font-size:18px}
.dialog p{color:var(--ink-2);margin:0 0 18px}
.dialog .dbtns{display:flex;gap:10px;justify-content:flex-end}
.dialog .pw{background:var(--violet-ghost);border:1.5px dashed var(--violet);border-radius:var(--r-sm);
  padding:10px;text-align:center;font-family:var(--f-mono);font-size:15px;margin:10px 0;user-select:all}
.toasts{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--ink);color:#fff;border-radius:12px;padding:11px 16px;font-weight:600;
  box-shadow:var(--shadow-float);animation:pop .25s;max-width:340px}
.toast.err{background:var(--coral)}
.toast.ok{background:var(--mint-deep)}

/* audit */
.audit-act{font-family:var(--f-mono);font-size:12px;background:var(--surface-2);border-radius:6px;padding:2px 7px}

/* empty state */
.empty{padding:60px 20px;text-align:center;color:var(--muted)}
.empty i{font-style:normal;font-size:40px;display:block;margin-bottom:10px}

@media(max-width:900px){
  .shell{grid-template-columns:64px 1fr}
  .side-nav a s,.side-brand span,.side-nav a em,.me-chip,.side-foot-row{display:none}
  .side-brand{font-size:22px;text-align:center;padding-left:0}
  .input.search{width:150px}
}

/* v1.6 — icon / photo grids */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.icon-grid .qcard{padding:12px}
.icon-grid .qbtns{justify-content:center}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}