*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#F7F8FA;color:#111827;min-height:100vh}
button,input,select,textarea{font-family:inherit;outline:none;border:none}
button{cursor:pointer}a{text-decoration:none;color:inherit}
:root{
  --pri:#2563EB;--pri-h:#1D4ED8;--pri-l:#EFF6FF;--pri-b:#BFDBFE;
  --suc:#059669;--suc-l:#ECFDF5;--war:#D97706;--war-l:#FFFBEB;
  --dan:#DC2626;--dan-l:#FEF2F2;--dan-b:#FECACA;
  --pur:#7C3AED;--pur-l:#F5F3FF;--tea:#0D9488;--tea-l:#F0FDFA;
  --ora:#EA580C;--ora-l:#FFF7ED;--pin:#DB2777;--pin-l:#FDF2F8;
  --t1:#111827;--t2:#374151;--t3:#6B7280;--t4:#9CA3AF;
  --bd:#E5E7EB;--bd2:#D1D5DB;--bg:#F7F8FA;--bg2:#F3F4F6;--bg3:#E5E7EB;--wh:#FFFFFF;
  --r:10px;--rl:14px;--rxl:20px;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shm:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.04);
  --shl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.05);
}
.screen{display:none}.screen.active{display:block}
/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#EFF6FF,#F7F8FA 50%,#F0FDFA);padding:24px}
.login-card{background:var(--wh);border-radius:var(--rxl);box-shadow:var(--shl);width:100%;max-width:420px;padding:40px;border:1px solid var(--bd)}
.l-brand{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.l-logo{width:42px;height:42px;border-radius:10px;background:var(--pri);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0;overflow:hidden}
.l-logo img{width:100%;height:100%;object-fit:cover}
.l-name{font-size:16px;font-weight:700;display:block}
.l-sub{font-size:11px;color:var(--t3)}
/* APP */
.app{display:flex;height:100vh;overflow:hidden}
/* SIDEBAR */
.sb{width:224px;min-width:224px;background:var(--wh);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
.sb-brand{padding:16px 14px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:11px;flex-shrink:0}
.sb-logo{width:36px;height:36px;border-radius:9px;background:var(--pri);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;flex-shrink:0;overflow:hidden}
.sb-logo img{width:100%;height:100%;object-fit:cover}
.sb-title{font-size:13.5px;font-weight:700;line-height:1.3}
.sb-sub{font-size:10.5px;color:var(--t4)}
.ng{padding:10px 10px 4px}
.ng-lbl{font-size:10px;font-weight:700;color:var(--t4);letter-spacing:.8px;text-transform:uppercase;padding:0 8px;margin-bottom:4px;display:block}
.nl{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;color:var(--t3);font-size:13.5px;font-weight:500;cursor:pointer;transition:all .12s;margin-bottom:1px;user-select:none}
.nl:hover{background:var(--bg2);color:var(--t2)}
.nl.active{background:var(--pri-l);color:var(--pri);font-weight:600}
.nl svg{width:16px;height:16px;flex-shrink:0}
.nb{margin-left:auto;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.nb-blue{background:var(--pri-l);color:var(--pri)}.nb-teal{background:var(--tea-l);color:var(--tea)}
.nb-pur{background:var(--pur-l);color:var(--pur)}.nb-ora{background:var(--ora-l);color:var(--ora)}
.nb-red{background:var(--dan-l);color:var(--dan)}.nb-grn{background:var(--suc-l);color:var(--suc)}
.sb-bot{margin-top:auto;padding:12px 10px;border-top:1px solid var(--bd);flex-shrink:0}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;cursor:pointer;transition:background .12s}
.sb-user:hover{background:var(--bg2)}
.sb-av{width:30px;height:30px;border-radius:8px;background:var(--pri);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* TOPBAR */
.topbar{background:var(--wh);border-bottom:1px solid var(--bd);padding:0 22px;height:56px;display:flex;align-items:center;gap:14px;flex-shrink:0}
.tp-search{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--bd);border-radius:9px;padding:0 13px;height:36px;transition:border-color .15s}
.tp-search:focus-within{border-color:var(--pri);background:var(--wh)}
.tp-search svg{color:var(--t4);width:14px;height:14px;flex-shrink:0}
.tp-search input{background:none;flex:1;font-size:13px;color:var(--t1)}
.tp-search input::placeholder{color:var(--t4)}
.tp-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.tp-sess{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t3)}
.sdot{width:7px;height:7px;border-radius:50%;background:#22C55E;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* CONTENT */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.content{flex:1;overflow-y:auto;padding:24px}
.page{display:none}.page.active{display:block}
/* PAGE HEADER */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.ph-l h1{font-size:20px;font-weight:700;letter-spacing:-.3px}
.ph-l p{font-size:13px;color:var(--t3);margin-top:3px}
.ph-r{display:flex;gap:9px;flex-wrap:wrap}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;padding:0 16px;height:36px;border-radius:8px;font-size:13px;font-weight:600;transition:all .13s;white-space:nowrap}
.btn-pri{background:var(--pri);color:#fff}.btn-pri:hover{background:var(--pri-h)}
.btn-sec{background:var(--wh);color:var(--t2);border:1px solid var(--bd)}.btn-sec:hover{background:var(--bg2)}
.btn-suc{background:var(--suc);color:#fff}.btn-suc:hover{background:#047857}
.btn-dan{background:var(--dan);color:#fff}.btn-dan:hover{background:#B91C1C}
.btn-out{background:transparent;color:var(--pri);border:1.5px solid var(--pri-b)}.btn-out:hover{background:var(--pri-l)}
.btn-war{background:var(--war);color:#fff}.btn-war:hover{background:#B45309}
.btn-sm{height:30px;padding:0 11px;font-size:12px;border-radius:7px}
.btn-xs{height:26px;padding:0 9px;font-size:11.5px;border-radius:6px}
/* STATS */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-bottom:22px}
.sc{background:var(--wh);border:1px solid var(--bd);border-radius:var(--rl);padding:16px;position:relative;overflow:hidden}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--rl) var(--rl) 0 0}
.sc-num{font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1;margin-bottom:4px}
.sc-lbl{font-size:12px;color:var(--t3);font-weight:500}
.sc-ico{font-size:20px;margin-bottom:10px;display:block}
/* CARDS */
.card{background:var(--wh);border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden}
.ch{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;border-bottom:1px solid var(--bd)}
.ct{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.cl{font-size:12.5px;color:var(--pri);cursor:pointer}.cl:hover{text-decoration:underline}
.cb{padding:15px 17px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:15px}
.mb{margin-bottom:15px}
/* TABLE */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{background:var(--bg);color:var(--t3);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:9px 14px;text-align:left;white-space:nowrap}
tbody td{padding:10px 14px;border-top:1px solid var(--bd);font-size:13px;vertical-align:middle}
tbody tr:hover{background:#FAFBFF}
.td-emp{display:flex;align-items:center;gap:10px}
.eav{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
/* CHIPS */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.cp-blu{background:var(--pri-l);color:var(--pri)}.cp-grn{background:var(--suc-l);color:var(--suc)}
.cp-red{background:var(--dan-l);color:var(--dan)}.cp-ora{background:var(--ora-l);color:var(--ora)}
.cp-pur{background:var(--pur-l);color:var(--pur)}.cp-tea{background:var(--tea-l);color:var(--tea)}
.cp-gry{background:var(--bg2);color:var(--t3)}.cp-war{background:var(--war-l);color:var(--war)}
.cp-ind{background:#EEF2FF;color:#4F46E5}.cp-pin{background:var(--pin-l);color:var(--pin)}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--bg2);padding:2px 7px;border-radius:5px;border:1px solid var(--bd)}
/* FORMS */
.fg{margin-bottom:14px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.fl{display:block;font-size:11.5px;font-weight:600;color:var(--t2);margin-bottom:6px;letter-spacing:.1px}
.fl .rq{color:var(--dan);margin-left:2px}
.fc{width:100%;height:38px;padding:0 12px;border-radius:var(--r);border:1.5px solid var(--bd);font-size:13.5px;color:var(--t1);background:var(--wh);transition:border-color .15s}
.fc:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.fc::placeholder{color:var(--t4)}
.fc.err{border-color:var(--dan);background:var(--dan-l)}
textarea.fc{height:auto;padding:10px 12px;resize:vertical}
.fe{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--dan);margin-top:4px;font-weight:500}
.fe svg{width:13px;height:13px;flex-shrink:0}
.fh{font-size:11.5px;color:var(--t3);margin-top:4px}
.sl{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;padding-bottom:9px;border-bottom:1px solid var(--bd);margin-bottom:14px}
/* ALERT BANNER */
.ab{background:var(--dan-l);border:1px solid var(--dan-b);border-radius:var(--r);padding:12px 14px;margin-bottom:16px;display:none;font-size:13px;color:var(--dan);animation:shk .4s ease;align-items:flex-start;gap:9px}
.ab.show{display:flex}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
/* MODAL */
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(3px);padding:20px}
.ov.open{display:flex}
.modal{background:var(--wh);border-radius:var(--rxl);width:100%;max-width:600px;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shl);animation:mIn .2s ease;border:1px solid var(--bd)}
.modal-lg{max-width:760px}.modal-xl{max-width:900px}
@keyframes mIn{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.mh{padding:18px 22px 14px;border-bottom:1px solid var(--bd);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
.mt{font-size:15px;font-weight:700}.ms{font-size:12.5px;color:var(--t3);margin-top:3px}
.mc{width:28px;height:28px;border-radius:7px;background:var(--bg2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);font-size:13px;transition:all .13s;flex-shrink:0}
.mc:hover{background:var(--bg3);color:var(--t1)}
.mb2{padding:18px 22px;overflow-y:auto;flex:1}
.mf{padding:13px 22px;border-top:1px solid var(--bd);background:var(--bg);display:flex;justify-content:flex-end;gap:9px;border-radius:0 0 var(--rxl) var(--rxl);flex-shrink:0}
/* TOGGLE */
.tr{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--bd)}
.tr:last-child{border-bottom:none}
.ti strong{font-size:13.5px;font-weight:600;display:block}.ti span{font-size:12px;color:var(--t3)}
.tg{width:40px;height:23px;background:var(--bg3);border-radius:12px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.tg.on{background:var(--pri)}.tg::after{content:'';position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}.tg.on::after{left:20px}
/* OTP */
.otp-digs{display:flex;gap:10px;justify-content:center;margin:20px 0}
.otp-inp{width:50px;height:56px;border-radius:var(--r);border:2px solid var(--bd);text-align:center;font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--pri);transition:border-color .15s}
.otp-inp:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
/* ASSIGN TABLE */
.at-wrap{border:1px solid var(--bd);border-radius:var(--rl);overflow:hidden}
.at{width:100%;border-collapse:collapse}
.at thead th{background:var(--bg);font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;padding:9px 10px;text-align:left;border-bottom:1px solid var(--bd)}
.at thead th:first-child{width:40px;text-align:center}
.at tbody tr{border-top:1px solid #F3F4F6;cursor:pointer;transition:background .1s}
.at tbody tr:hover{background:#FAFBFF}.at tbody tr.sel{background:var(--pri-l)}
.at tbody td{padding:8px 10px;vertical-align:middle;font-size:13px}
.at tbody td:first-child{text-align:center}
.a-sel-sel{padding:5px 8px;border-radius:7px;border:1.5px solid var(--bd);font-size:12.5px;background:#fff;font-family:inherit;width:140px}
.a-sel-sel:focus{border-color:var(--pri);outline:none}
.a-inp{padding:5px 9px;border-radius:7px;border:1.5px solid var(--bd);font-size:12.5px;background:#fff;font-family:inherit;width:110px}
.a-inp:focus{border-color:var(--pri);outline:none}.a-inp::placeholder{color:var(--t4)}
.a-qty{width:55px;padding:5px 8px;border-radius:7px;border:1.5px solid var(--bd);font-size:12.5px;text-align:center;font-family:inherit}
.rchk{width:16px;height:16px;accent-color:var(--pri);cursor:pointer}
.sel-pill{background:var(--pri);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px}
/* UPLOAD */
.uz{border:2px dashed var(--bd);border-radius:var(--rl);padding:20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg)}
.uz:hover{border-color:var(--pri);background:var(--pri-l)}
.fp{background:var(--bg2);border:1px solid var(--bd);border-radius:8px;padding:9px 13px;display:flex;align-items:center;gap:9px;margin-top:8px}
.frm{color:var(--dan);font-size:11.5px;font-weight:600;cursor:pointer;margin-left:auto}
/* CUSTOM DATE PICKER */
.dp-w{position:relative;display:inline-block;width:100%}
.dp-i{width:100%;height:38px;padding:0 36px 0 12px;border-radius:var(--r);border:1.5px solid var(--bd);font-size:13.5px;color:var(--t1);background:var(--wh);cursor:pointer;transition:border-color .15s;font-family:inherit}
.dp-i:focus,.dp-i.open{border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.08);outline:none}
.dp-ico{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--t4)}
.dp-p{position:fixed;z-index:9000;background:var(--wh);border:1px solid var(--bd);border-radius:var(--rl);box-shadow:var(--shl);width:280px;padding:14px;display:none}
.dp-p.open{display:block;animation:dpIn .12s ease}
@keyframes dpIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dp-nb{width:30px;height:30px;border-radius:8px;background:var(--bg2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:background .12s}
.dp-nb:hover{background:var(--pri-l);color:var(--pri)}
.dp-my{font-size:13.5px;font-weight:700;cursor:pointer;padding:3px 8px;border-radius:6px}.dp-my:hover{background:var(--bg2)}
.dp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-wd{text-align:center;font-size:10.5px;font-weight:700;color:var(--t4);padding:4px 0 6px}
.dp-d{text-align:center;padding:6px 2px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--t2);transition:all .1s;line-height:1}
.dp-d:hover:not(.dp-e):not(.dp-s){background:var(--pri-l);color:var(--pri)}
.dp-e{cursor:default;color:transparent}.dp-t:not(.dp-s){color:var(--pri);font-weight:700}
.dp-s{background:var(--pri);color:#fff!important;font-weight:700}
/* FILTER */
.fb{display:flex;gap:8px;margin-bottom:15px;flex-wrap:wrap;align-items:center}
.fs{padding:7px 11px;border-radius:8px;border:1.5px solid var(--bd);font-size:13px;color:var(--t1);background:var(--wh);font-family:inherit}
.fi{padding:7px 12px;border-radius:8px;border:1.5px solid var(--bd);font-size:13px;color:var(--t1);background:var(--wh);font-family:inherit}
.fi:focus,.fs:focus{border-color:var(--pri);outline:none}.fi::placeholder{color:var(--t4)}
/* ACTIVITY LOG */
.al-item{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--bd)}
.al-item:last-child{border-bottom:none}
.al-dot-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0}
.al-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.al-line{width:2px;flex:1;background:var(--bd);min-height:10px}
.al-body{flex:1;min-width:0}
.al-text{font-size:13.5px;font-weight:500;color:var(--t1)}
.al-meta{font-size:12px;color:var(--t3);margin-top:3px}
.al-type{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;margin-right:6px;text-transform:uppercase;letter-spacing:.5px}
/* RETURNED ITEMS */
.ret-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:20px}
/* SOFTWARE ASSIGN */
.sw-row{display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--bg);border-radius:9px;border:1px solid var(--bd);margin-bottom:9px}
.sw-name{font-size:13.5px;font-weight:600}
.sw-meta{font-size:12px;color:var(--t3);margin-top:2px}
/* LOGO PREVIEW */
.lp{width:80px;height:80px;border-radius:14px;background:var(--bg2);border:2px dashed var(--bd);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:border-color .15s}
.lp:hover{border-color:var(--pri)}.lp img{width:100%;height:100%;object-fit:cover}
/* SETTINGS */
.sg{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.hosting-card{background:linear-gradient(135deg,#EFF6FF,#F0FDFA);border:1px solid var(--pri-b);border-radius:var(--rl);padding:15px;margin-top:12px}
.hrow{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed rgba(37,99,235,.1);font-size:12.5px}
.hrow:last-child{border-bottom:none}
/* TOAST */
.toast{position:fixed;bottom:22px;right:22px;background:#111827;color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;font-weight:500;z-index:9999;display:none;align-items:center;gap:9px;box-shadow:var(--shl)}
.toast.show{display:flex;animation:tIn .25s ease}
@keyframes tIn{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
/* DB STATUS — inline in settings only, no overlay */
/* MISC */
.empty{text-align:center;padding:32px 20px;color:var(--t3);font-size:13px}
.sec-note{background:var(--war-l);border:1px solid #FDE68A;border-radius:var(--r);padding:11px 14px;font-size:13px;color:var(--war);display:flex;align-items:flex-start;gap:9px}
.info-note{background:var(--pri-l);border:1px solid var(--pri-b);border-radius:var(--r);padding:11px 14px;font-size:13px;color:var(--pri);display:flex;align-items:flex-start;gap:9px}
.danger-note{background:var(--dan-l);border:1px solid var(--dan-b);border-radius:var(--r);padding:11px 14px;font-size:13px;color:var(--dan);display:flex;align-items:flex-start;gap:9px}
@media(max-width:1300px){.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.sg,.g2,.g3{grid-template-columns:1fr}}

/* ── RESPONSIVE / MOBILE ─────────────────────────────────────────────── */

/* Sidebar overlay backdrop (mobile) */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:98;backdrop-filter:blur(2px)}
.sb-overlay.open{display:block}

/* Hamburger button — hidden on desktop */
.mob-menu-btn{display:none;width:36px;height:36px;border-radius:8px;background:var(--bg2);border:1px solid var(--bd);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--t2)}

/* ── Tablet (≤1024px) ──────────────────────────────────────────────── */
@media(max-width:1024px){
  .sb{width:200px;min-width:200px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .tp-r .btn-sec:not(.btn-pri){font-size:0;padding:0 10px}
  .tp-r .btn-sec:not(.btn-pri) svg{display:block}
}

/* ── Mobile (≤768px) ───────────────────────────────────────────────── */
@media(max-width:768px){
  /* Sidebar slides in/out */
  .sb{position:fixed;top:0;left:-224px;bottom:0;z-index:99;width:224px;min-width:224px;box-shadow:var(--shl);transition:left .25s ease}
  .sb.open{left:0}

  /* Show hamburger */
  .mob-menu-btn{display:flex}

  /* Main fills full width */
  .main{width:100%;min-width:0}

  /* Topbar */
  .topbar{padding:0 12px;gap:8px;height:50px}
  .tp-search{max-width:none;flex:1}
  /* Hide secondary action buttons on mobile, keep only primary */
  .tp-r .btn-sec{display:none}
  .tp-r{gap:6px}

  /* Content padding */
  .content{padding:14px 12px}

  /* Stats — 2 columns */
  .stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
  .sc-num{font-size:22px}

  /* Grids → single column */
  .g2,.g3,.sg,.fr,.fr3{grid-template-columns:1fr !important}

  /* Page header stacks */
  .ph{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}
  .ph-r{width:100%;display:flex;flex-wrap:wrap;gap:8px}
  .ph-r .btn{flex:1;justify-content:center;min-width:120px}

  /* Filter bar wraps */
  .fb{gap:6px}
  .fb .fs,.fb .fi{width:100% !important;min-width:0}

  /* Cards */
  .card{border-radius:10px}

  /* Tables — horizontal scroll with min-width */
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tw table{min-width:560px}

  /* Modals — bottom sheet style */
  .ov{padding:0 !important;align-items:flex-end}
  .modal{max-width:100vw !important;width:100vw !important;border-radius:18px 18px 0 0 !important;max-height:92vh}
  .mf{border-radius:0 !important}

  /* Assign table */
  .at-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .at{min-width:560px}

  /* Settings grid */
  .sg{grid-template-columns:1fr}

  /* Returned stat row */
  .ret-stat-row{grid-template-columns:1fr}

  /* Login card */
  .login-card{padding:28px 22px;border-radius:16px}
}

/* ── Small mobile (≤480px) ─────────────────────────────────────────── */
@media(max-width:480px){
  .stats{grid-template-columns:1fr 1fr;gap:8px}
  .sc{padding:12px}
  .sc-num{font-size:20px}
  .sc-ico{font-size:17px;margin-bottom:7px}
  .sc-lbl{font-size:11px}

  .topbar{height:48px}
  .tp-search input{font-size:12px}

  .content{padding:12px 10px}

  .btn{height:34px;padding:0 12px;font-size:12.5px}
  .btn-sm{height:28px;padding:0 10px;font-size:11.5px}

  thead th{font-size:10px;padding:7px 10px}
  tbody td{padding:8px 10px;font-size:12px}

  .modal{max-height:95vh}
  .mh{padding:14px 16px 12px}
  .mb2{padding:14px 16px}
  .mf{padding:11px 16px}

  .otp-digs{gap:7px}
  .otp-inp{width:42px;height:48px;font-size:20px}

  .ph-l h1{font-size:17px}
  .page-title p,.ph-l p{font-size:12px}

  .chip{font-size:10.5px;padding:2px 7px}
  .fc{height:36px;font-size:13px}
}

/* ── Role-based access control ───────────────────────────── */
/* Viewer: hide all destructive/write buttons inside table cells and page headers */
body.role-viewer td .btn-dan,
body.role-viewer td .btn-sec,
body.role-viewer [data-write] { display:none !important; }

/* Manager: hide only admin nav group (users, settings pages) */
body.role-manager .ng-admin,
body.role-viewer  .ng-admin { display:none !important; }

/* Role badge colors — applied via JS on completeLogin */
#sb-role { transition:color .2s; }