/* Shared admin UI — verbatim port of the approved it_assets_admin_v2 demo styling.
   Fonts/icons are loaded locally (assets/fonts/cairo.css, assets/icons/tabler-icons.min.css) — no CDN. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --pr:#1B3A6B;--pr2:#2A5298;--ac:#B8860B;--acl:#FEF8E0;
  --bg:#EEF2F8;--sf:#fff;--s2:#EEF3FF;--s3:#F7F9FD;
  --tx:#18243E;--t2:#4F6080;--t3:#8FA0BC;
  --bd:#DDE4F0;--bd2:#C5D0E4;
  --red:#B71C1C;--rbg:#FDEEEC;--rbr:#FFCDD2;
  --grn:#1B5E20;--gbg:#E8F5E9;--gbr:#C8E6C9;
  --orn:#BF360C;--obg:#FBE9E7;--obr:#FFCCBC;
  --bl:#0D47A1;--bbg:#E3F2FD;--bbr:#BBDEFB;
  --pur:#4A148C;--pbg:#F3E5F5;--pbr:#E1BEE7;
  --gray:#455A64;--grbg:#ECEFF1;--grbr:#CFD8DC;
}
html,body{height:100%;font-family:"Cairo",sans-serif;font-size:13px;color:var(--tx);background:var(--bg);overflow:hidden}
.app{display:flex;height:100vh;overflow:hidden}
.sb{width:220px;min-width:220px;background:var(--pr);display:flex;flex-direction:column;overflow-y:auto}
.sb::-webkit-scrollbar{width:3px}.sb::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px}
.sb-logo{padding:16px 14px 12px;border-bottom:1px solid rgba(255,255,255,0.08)}
.sb-logo-n{font-size:13px;font-weight:700;color:#fff;line-height:1.3}
.sb-logo-s{font-size:10px;color:rgba(255,255,255,0.4);margin-top:2px}
.sb-logo-b{display:inline-flex;align-items:center;gap:4px;background:var(--ac);color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:8px;margin-top:5px}
.sb-sec{font-size:9px;font-weight:700;color:rgba(255,255,255,0.3);padding:10px 14px 3px;letter-spacing:1px;text-transform:uppercase}
.sb-a{display:flex;align-items:center;gap:8px;padding:8px 14px;color:rgba(255,255,255,0.62);font-size:11.5px;cursor:pointer;transition:all .12s;border-right:3px solid transparent;text-decoration:none}
.sb-a:hover{background:rgba(255,255,255,0.07);color:#fff}
.sb-a.on{background:rgba(255,255,255,0.12);color:#fff;border-right-color:var(--ac)}
.sb-a i{font-size:16px;width:18px;text-align:center;flex-shrink:0}
.sb-cnt{margin-right:auto;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center}
.sb-foot{padding:10px 14px;border-top:1px solid rgba(255,255,255,0.08);margin-top:auto}
.sb-u{display:flex;align-items:center;gap:8px}
.sb-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.sb-av img{width:100%;height:100%;object-fit:cover}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.tb{height:54px;background:var(--sf);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 18px;gap:10px;flex-shrink:0}
.tb-t{font-size:15px;font-weight:700;flex:1}
.tb-bc{font-size:10px;color:var(--t3)}
.sb-toggle{display:none}
.sb-overlay{display:none}
/* The admin shell (fixed 220px sidebar + flex main) was built desktop-only —
   the demo it was pixel-ported from never targeted a phone. Now that the
   admin panel is PWA-installable too (people open it on a phone), collapse
   the sidebar into an off-canvas drawer below ~860px instead of squeezing it
   next to the content. RTL-aware: the sidebar is the flex row's first child,
   so it renders visually on the right — sliding it off with translateX(100%)
   pushes it off the right edge, matching that. */
@media (max-width:860px){
  .sb-toggle{display:inline-flex}
  .app{overflow:visible}
  .sb{position:fixed;top:0;bottom:0;right:0;z-index:60;transform:translateX(100%);transition:transform .22s ease;box-shadow:-6px 0 24px rgba(0,0,0,.25)}
  .sb.open{transform:translateX(0)}
  .sb-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .22s ease}
  .sb-overlay.open{opacity:1;pointer-events:auto}
  .main{width:100%}
  .tb{padding:0 12px}
}
.pa{flex:1;overflow-y:auto;padding:16px 18px}
.pa::-webkit-scrollbar{width:5px}.pa::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:3px}
.pg{display:none}.pg.on{display:block}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:16px}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.ct{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;color:var(--tx)}
.ct i{color:var(--pr);font-size:16px}
.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:7px;border:1px solid var(--bd);background:var(--sf);color:var(--tx);font-family:"Cairo",sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all .12s;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--s2)}
.bpr{background:var(--pr);color:#fff;border-color:var(--pr)}.bpr:hover{background:var(--pr2)}
.bgrn{background:var(--grn);color:#fff;border-color:var(--grn)}
.bred{background:var(--red);color:#fff;border-color:var(--red)}
.bac{background:var(--ac);color:#fff;border-color:var(--ac)}
.bsm{padding:4px 9px;font-size:10px}
.bxs{padding:2px 7px;font-size:10px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:10px;font-weight:700;color:var(--t2)}
.fg label .req{color:var(--red)}
.inp{padding:7px 10px;border:1px solid var(--bd);border-radius:7px;font-family:"Cairo",sans-serif;font-size:11px;color:var(--tx);background:var(--sf);width:100%;transition:border-color .12s}
.inp:focus{outline:none;border-color:var(--pr)}
select.inp{cursor:pointer}
textarea.inp{resize:vertical;min-height:60px}
.pill{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:20px;font-size:9px;font-weight:700;white-space:nowrap}
.pok{background:var(--gbg);color:#1B5E20}
.pwn{background:var(--obg);color:#BF360C}
.prd{background:var(--rbg);color:#B71C1C}
.pbl{background:var(--bbg);color:#0D47A1}
.pgr{background:var(--s2);color:var(--t2)}
.pac{background:var(--acl);color:#7A5000}
.ppr{background:var(--pbg);color:#4A148C}
.pgray{background:var(--grbg);color:var(--gray)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.gcol{display:flex;flex-direction:column;gap:12px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.mb12{margin-bottom:12px}
.mb16{margin-bottom:16px}
.krow{display:grid;gap:10px;margin-bottom:14px}
.kpi{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;right:0;width:3px;height:100%}
.kc1::before{background:var(--pr)}.kc2::before{background:var(--bl)}.kc3::before{background:var(--grn)}.kc4::before{background:var(--orn)}.kc5::before{background:var(--red)}.kc6::before{background:var(--pur)}
.kl{font-size:9px;color:var(--t2);font-weight:700;margin-bottom:3px}
.kv{font-size:22px;font-weight:900;line-height:1}
.ks{font-size:9px;color:var(--t2);margin-top:2px}
.tbl{width:100%;border-collapse:collapse;font-size:11px}
.tbl th{text-align:right;padding:7px 8px;color:var(--t2);font-weight:700;font-size:9px;border-bottom:2px solid var(--bd);background:var(--s3);white-space:nowrap}
.tbl td{padding:8px;border-bottom:1px solid var(--bd);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--s3);cursor:pointer}
.tn{font-weight:600;font-size:11px}
.ts{font-size:9px;color:var(--t2);margin-top:1px}
.al{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:7px;margin-bottom:8px;font-size:11px}
.al i{font-size:15px;flex-shrink:0;margin-top:1px}
.alin{background:var(--bbg);border:1px solid var(--bbr);color:#0D47A1}.alin i{color:var(--bl)}
.alwn{background:var(--obg);border:1px solid var(--obr);color:#BF360C}.alwn i{color:var(--orn)}
.alrd{background:var(--rbg);border:1px solid var(--rbr);color:#B71C1C}.alrd i{color:var(--red)}
.alok{background:var(--gbg);border:1px solid var(--gbr);color:#1B5E20}.alok i{color:var(--grn)}
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:500;align-items:center;justify-content:center;padding:16px}
.mo.open{display:flex}
.mo-b{background:var(--sf);border-radius:14px;padding:20px;width:560px;max-width:98vw;max-height:90vh;overflow-y:auto}
.mo-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mo-t{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px}
.mo-x{width:26px;height:26px;border-radius:6px;border:1px solid var(--bd);background:var(--sf);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:14px}
.fm{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.fm-full{grid-column:1/-1}
.fm-act{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--bd);flex-wrap:wrap}
.tbar{display:flex;border-bottom:1px solid var(--bd);margin-bottom:14px;flex-wrap:wrap}
.ttab{padding:7px 12px;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent}
.ttab.on{color:var(--pr);border-bottom-color:var(--pr)}
.tcon{display:none}.tcon.on{display:block}
.tl{display:flex;flex-direction:column;gap:0}
.tli{display:flex;gap:9px;padding:7px 0;border-bottom:1px solid var(--bd);font-size:11px}
.tli:last-child{border-bottom:none}
.tld{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.tlt{font-size:11px;font-weight:600}
.tls{font-size:10px;color:var(--t2);margin-top:1px}
.tldt{font-size:9px;color:var(--t3);margin-top:1px}
.pw{margin-bottom:8px}
.pt{display:flex;justify-content:space-between;font-size:10px;margin-bottom:2px}
.pb{height:5px;background:var(--bd);border-radius:3px;overflow:hidden}
.pf{height:100%;border-radius:3px}
.tkt{background:var(--sf);border:1px solid var(--bd);border-radius:9px;padding:12px;margin-bottom:8px;cursor:pointer;transition:border-color .12s}
.tkt:hover{border-color:var(--pr)}
.tkt-h{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.srd{color:var(--red);font-weight:700}
.swn{color:var(--orn);font-weight:700}
.sok{color:var(--grn);font-weight:700}
.toast{position:fixed;bottom:18px;left:18px;background:var(--pr);color:#fff;padding:9px 16px;border-radius:9px;font-size:11px;font-weight:700;z-index:9999;display:none;align-items:center;gap:6px;box-shadow:0 6px 20px rgba(27,58,107,0.3)}
.toast.show{display:flex}
.inv-item{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:var(--s3);border-radius:7px;margin-bottom:5px;font-size:10px}
.act-item{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--bd);font-size:10px;align-items:flex-start}
.act-item:last-child{border-bottom:none}
.act-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.scanner{background:#111;border-radius:8px;height:90px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-bottom:8px;cursor:pointer}
.scan-line{position:absolute;width:100%;height:2px;background:#00ff00;animation:scan 2s infinite;box-shadow:0 0 8px #00ff00}
@keyframes scan{0%{top:10%}50%{top:85%}100%{top:10%}}
.scan-corner{position:absolute;width:16px;height:16px;border-color:#00ff00;border-style:solid}
.sc-tl{top:6px;right:6px;border-width:2px 0 0 2px}
.sc-br{bottom:6px;left:6px;border-width:0 2px 2px 0}
.qr-box{width:70px;height:70px;background:var(--s3);border:1px solid var(--bd);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:2px}

/* LTR override (English mode) — dir flips via <html dir> on the layout root, this only fixes a few asymmetric rules */
html[dir="ltr"] .sb-a.on{border-right-color:transparent;border-left:3px solid var(--ac)}
html[dir="ltr"] .sb-cnt{margin-right:0;margin-left:auto}
html[dir="ltr"] .kpi::before{right:auto;left:0}
html[dir="ltr"] .toast{left:auto;right:18px}