/* ================================================================
   DL SAFETY - ADMIN PANEL CSS
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --p:#1A2B6D; --pl:#243580; --pd:#10193f;
  --r:#C8102E; --rl:#fff0f2; --rd:#a00d24;
  --g:#16a34a; --gl:#f0fdf4;
  --o:#f59e0b; --ol:#fffbeb;
  --b:#0ea5e9; --bl:#f0f9ff;
  --bg:#f1f5f9; --card:#fff; --bdr:#e2e8f0;
  --tx:#1e293b; --mt:#64748b;
  --sw:256px; --hh:58px;
  --sh:0 1px 3px rgba(0,0,0,.07);
  --shm:0 4px 20px rgba(0,0,0,.1);
  --rd2:10px; --tr:.2s ease;
}
html{font-size:14px;overflow-x:hidden !important;width:100% !important;} body{font-family:'Be Vietnam Pro',sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;overflow-x:hidden !important;width:100% !important;position:relative !important;}
a{text-decoration:none;color:inherit;} ul{list-style:none;} img{max-width:100%;display:block;} button,input,select,textarea{font-family:inherit;}

/* ── LOGIN ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pd) 0%,#1e3a8a 100%);padding:24px;}
.login-box{background:#fff;border-radius:20px;padding:44px 40px;max-width:420px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.28);text-align:center;}
.login-logo img{height:72px;margin:0 auto 10px;}
.login-brand{font-size:1.2rem;font-weight:800;color:var(--p);}
.login-brand em{color:var(--r);font-style:normal;}
.login-tagline{font-size:.78rem;color:var(--mt);margin-bottom:26px;}
.login-hdg{font-size:1rem;font-weight:700;margin-bottom:20px;color:var(--tx);}
.l-group{text-align:left;margin-bottom:14px;}
.l-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--mt);margin-bottom:5px;display:block;}
.l-input{width:100%;padding:11px 14px;border:1.5px solid var(--bdr);border-radius:8px;font-size:.9rem;transition:border-color var(--tr);background:#fff;}
.l-input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(26,43,109,.1);}
.l-input.err{border-color:var(--r);}
.l-err{color:var(--r);font-size:.76rem;margin-top:4px;display:none;}
.l-err.show{display:block;}
.btn-login{width:100%;background:var(--p);color:#fff;border:none;padding:13px;border-radius:8px;font-size:.94rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--tr);margin-top:8px;}
.btn-login:hover{background:var(--pl);transform:translateY(-1px);}
.login-foot{margin-top:18px;font-size:.77rem;color:var(--mt);}
.login-foot a{color:var(--p);font-weight:600;}

/* ── LAYOUT ── */
.adm-layout{display:flex;min-height:100vh;}

/* ── SIDEBAR ── */
.adm-sidebar{width:var(--sw);background:var(--p);position:fixed;top:0;bottom:0;left:0;z-index:200;display:flex;flex-direction:column;overflow-y:auto;transition:transform var(--tr);}
.adm-sidebar::-webkit-scrollbar{width:3px;} .adm-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px;}
.sb-head{padding:16px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;}
.sb-logo img{height:36px;filter:brightness(0) invert(1);}
.sb-logo img[src=""]{display:none;}
.sb-brand{color:#fff;font-weight:800;font-size:.88rem;line-height:1.2;}
.sb-brand em{color:var(--r);font-style:normal;}
.sb-sub{color:rgba(255,255,255,.4);font-size:.65rem;text-transform:uppercase;letter-spacing:.07em;}
.sb-close{display:none;margin-left:auto;background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:1rem;padding:4px;}
.sb-user{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;}
.sb-av{width:34px;height:34px;border-radius:50%;background:var(--r);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem;flex-shrink:0;}
.sb-uname{color:#fff;font-weight:600;font-size:.82rem;}
.sb-urole{color:rgba(255,255,255,.4);font-size:.69rem;}
.sb-nav{flex:1;padding:10px 0;}
.sb-sec{padding:8px 16px 3px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.28);}
.sb-link{display:flex;align-items:center;gap:9px;padding:10px 16px;color:rgba(255,255,255,.6);font-size:.83rem;font-weight:500;cursor:pointer;border-left:3px solid transparent;transition:all var(--tr);}
.sb-link i{width:16px;text-align:center;font-size:.88rem;}
.sb-link .cnt{margin-left:auto;background:var(--r);color:#fff;font-size:.67rem;padding:2px 7px;border-radius:50px;font-weight:700;}
.sb-link:hover{background:rgba(255,255,255,.07);color:#fff;}
.sb-link.on{background:rgba(255,255,255,.1);color:#fff;border-left-color:var(--r);font-weight:700;}
.sb-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);}
.btn-out{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.5);font-size:.8rem;cursor:pointer;padding:7px 0;background:none;border:none;width:100%;transition:color var(--tr);}
.btn-out:hover{color:#fff;}

/* ── MAIN ── */
.adm-main{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;min-width:0;}
.adm-topbar{height:var(--hh);background:var(--card);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 22px;gap:14px;position:sticky;top:0;z-index:100;box-shadow:var(--sh);}
.tb-tog{display:none;background:none;border:none;font-size:1.05rem;cursor:pointer;color:var(--mt);padding:5px;border-radius:6px;}
.tb-tog:hover{background:var(--bg);}
.tb-bc{font-size:.8rem;color:var(--mt);} .tb-bc .cur{color:var(--p);font-weight:600;}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.tb-time{font-size:.75rem;color:var(--mt);}
.btn-site{display:flex;align-items:center;gap:6px;background:var(--p);color:#fff;padding:7px 15px;border-radius:8px;font-size:.79rem;font-weight:600;transition:background var(--tr);}
.btn-site:hover{background:var(--pl);}

/* ── PAGE ── */
.adm-page{flex:1;padding:22px;}
.a-sec{display:none;} .a-sec.on{display:block;}
.a-hd{margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.a-title{font-size:1.2rem;font-weight:800;color:var(--p);}
.a-title small{font-size:.76rem;font-weight:400;color:var(--mt);display:block;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:8px;font-size:.83rem;font-weight:600;border:none;cursor:pointer;transition:all var(--tr);}
.btn-p{background:var(--p);color:#fff;} .btn-p:hover{background:var(--pl);}
.btn-r{background:var(--r);color:#fff;} .btn-r:hover{background:var(--rd);}
.btn-g{background:var(--g);color:#fff;} .btn-g:hover{background:#15803d;}
.btn-ot{background:transparent;color:var(--p);border:1.5px solid var(--p);} .btn-ot:hover{background:var(--p);color:#fff;}
.btn-gh{background:var(--bg);color:var(--tx);} .btn-gh:hover{background:var(--bdr);}
.btn-sm{padding:6px 12px;font-size:.77rem;}
.btn-ic{width:33px;height:33px;padding:0;border-radius:8px;display:inline-grid;place-items:center;}

/* ── STATS ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.st-card{background:var(--card);border-radius:var(--rd2);padding:18px;box-shadow:var(--sh);display:flex;align-items:center;gap:14px;border-left:4px solid transparent;}
.st-card.blue{border-left-color:var(--b);} .st-card.green{border-left-color:var(--g);} .st-card.red{border-left-color:var(--r);} .st-card.orange{border-left-color:var(--o);}
.st-ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:1.15rem;flex-shrink:0;}
.st-card.blue .st-ico{background:var(--bl);color:var(--b);} .st-card.green .st-ico{background:var(--gl);color:var(--g);}
.st-card.red .st-ico{background:var(--rl);color:var(--r);} .st-card.orange .st-ico{background:var(--ol);color:var(--o);}
.st-num{font-size:1.45rem;font-weight:800;line-height:1;} .st-lbl{font-size:.76rem;color:var(--mt);margin-top:2px;}

/* ── CARDS ── */
.card{background:var(--card);border-radius:var(--rd2);box-shadow:var(--sh);overflow:hidden;}
.card-hd{padding:14px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.card-t{font-weight:700;font-size:.93rem;color:var(--p);display:flex;align-items:center;gap:7px;}
.card-t i{color:var(--r);}
.card-bd{padding:18px;}

/* ── FORM ── */
.frow{display:grid;gap:14px;margin-bottom:14px;}
.frow.c2{grid-template-columns:1fr 1fr;} .frow.c3{grid-template-columns:1fr 1fr 1fr;}
.fg{display:flex;flex-direction:column;gap:4px;}
.flbl{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mt);}
.finp,.fsel,.ftxt{width:100%;padding:9px 11px;border:1.5px solid var(--bdr);border-radius:7px;font-size:.87rem;transition:border-color var(--tr);background:#fff;color:var(--tx);}
.finp:focus,.fsel:focus,.ftxt:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(26,43,109,.08);}
.ftxt{resize:vertical;min-height:75px;}
.fhint{font-size:.73rem;color:var(--mt);}

/* ── IMAGE UPLOAD ── */
.img-drop{border:2px dashed var(--bdr);border-radius:10px;padding:26px;text-align:center;cursor:pointer;transition:all var(--tr);position:relative;}
.img-drop:hover,.img-drop.over{border-color:var(--p);background:rgba(26,43,109,.03);}
.img-drop input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.drop-ico{font-size:2rem;color:var(--mt);margin-bottom:7px;}
.drop-txt{font-size:.84rem;font-weight:600;color:var(--p);}
.drop-hint{font-size:.73rem;color:var(--mt);margin-top:3px;}
.compress-info{font-size:.78rem;color:var(--g);font-weight:600;margin-top:6px;display:none;}
.compress-info.show{display:block;}
.img-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:9px;margin-top:12px;}
.prev-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1.5px solid var(--bdr);}
.prev-item img{width:100%;height:100%;object-fit:cover;}
.prev-item .del-img{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(200,16,46,.9);color:#fff;border:none;cursor:pointer;font-size:.65rem;display:grid;place-items:center;}
.prev-item .main-lbl{position:absolute;bottom:0;left:0;right:0;background:rgba(26,43,109,.8);color:#fff;font-size:.62rem;text-align:center;padding:2px;font-weight:700;}

/* ── TABLE ── */
.tbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:13px;}
.tsearch{flex:1;min-width:190px;max-width:280px;position:relative;}
.tsearch input{width:100%;padding:8px 34px 8px 11px;border:1.5px solid var(--bdr);border-radius:8px;font-size:.83rem;}
.tsearch input:focus{outline:none;border-color:var(--p);}
.tsearch i{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--mt);font-size:.83rem;}
.tsel select{padding:8px 11px;border:1.5px solid var(--bdr);border-radius:8px;font-size:.83rem;background:#fff;cursor:pointer;}
.tsel select:focus{outline:none;border-color:var(--p);}
.dtable{width:100%;border-collapse:collapse;}
.dtable th{background:#f8fafc;padding:9px 12px;font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mt);border-bottom:2px solid var(--bdr);text-align:left;white-space:nowrap;}
.dtable td{padding:11px 12px;border-bottom:1px solid var(--bdr);font-size:.83rem;vertical-align:middle;}
.dtable tr:hover td{background:#fafafa;} .dtable tr:last-child td{border:none;}
.timg{width:50px;height:50px;border-radius:8px;object-fit:cover;border:1px solid var(--bdr);}
.timg-ph{width:50px;height:50px;border-radius:8px;background:var(--bg);display:grid;place-items:center;color:var(--mt);font-size:1.1rem;border:1px solid var(--bdr);}
.pname{font-weight:600;max-width:190px;}
.pname small{color:var(--mt);font-weight:400;font-size:.74rem;display:block;}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:50px;font-size:.71rem;font-weight:700;}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;}
.bg-g{background:var(--gl);color:var(--g);} .bg-r{background:var(--rl);color:var(--r);} .bg-o{background:var(--ol);color:var(--o);}
.pag{display:flex;align-items:center;justify-content:space-between;padding:13px 0 0;flex-wrap:wrap;gap:8px;}
.pag-info{font-size:.78rem;color:var(--mt);}
.pag-btns{display:flex;gap:5px;}
.pb{width:30px;height:30px;border-radius:6px;border:1.5px solid var(--bdr);background:#fff;cursor:pointer;font-size:.8rem;display:grid;place-items:center;transition:all var(--tr);}
.pb:hover{border-color:var(--p);color:var(--p);} .pb.on{background:var(--p);border-color:var(--p);color:#fff;} .pb:disabled{opacity:.35;cursor:not-allowed;}

/* ── MODAL ── */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center;padding:18px;}
.modal.open{display:flex;}
.modal-box{background:#fff;border-radius:16px;max-width:680px;width:100%;max-height:90vh;overflow-y:auto;}
.modal-hd{padding:16px 20px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1;}
.modal-t{font-weight:800;font-size:.98rem;color:var(--p);}
.modal-x{width:28px;height:28px;border-radius:50%;border:none;background:var(--bg);cursor:pointer;font-size:.88rem;display:grid;place-items:center;transition:.2s;}
.modal-x:hover{background:var(--r);color:#fff;}
.modal-bd{padding:20px;}
.modal-ft{padding:14px 20px;border-top:1px solid var(--bdr);display:flex;justify-content:flex-end;gap:9px;}

/* ── CONFIRM ── */
.cfm{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;align-items:center;justify-content:center;}
.cfm.open{display:flex;}
.cfm-box{background:#fff;border-radius:16px;padding:30px;max-width:360px;width:90%;text-align:center;}
.cfm-ico{font-size:2.4rem;margin-bottom:10px;}
.cfm-t{font-size:.98rem;font-weight:800;margin-bottom:7px;}
.cfm-m{font-size:.84rem;color:var(--mt);margin-bottom:22px;}
.cfm-acts{display:flex;gap:9px;justify-content:center;}

/* ── TOAST ── */
.adm-toast{position:fixed;top:68px;right:20px;z-index:5000;padding:12px 19px;border-radius:10px;font-size:.83rem;font-weight:600;opacity:0;transform:translateX(16px);transition:.3s;display:flex;align-items:center;gap:9px;max-width:320px;pointer-events:none;font-family:'Be Vietnam Pro',sans-serif;}
.adm-toast.show{opacity:1;transform:none;}
.adm-toast.ok{background:#16a34a;color:#fff;} .adm-toast.ko{background:var(--r);color:#fff;} .adm-toast.wa{background:var(--o);color:#fff;}

/* ── GALLERY ── */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.gal-item{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;border:1.5px solid var(--bdr);cursor:pointer;}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.gal-item:hover img{transform:scale(1.08);}
.gal-item .del-gal{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(200,16,46,.9);color:#fff;border:none;cursor:pointer;font-size:.7rem;display:grid;place-items:center;opacity:0;transition:opacity .2s;}
.gal-item:hover .del-gal{opacity:1;}
.gal-item .copy-url{position:absolute;bottom:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(26,43,109,.85);color:#fff;border:none;cursor:pointer;font-size:.7rem;display:grid;place-items:center;opacity:0;transition:opacity .2s;}
.gal-item:hover .copy-url{opacity:1;}

/* ── EMPTY ── */
.empty{text-align:center;padding:44px;color:var(--mt);}
.empty i{font-size:2.8rem;opacity:.25;margin-bottom:10px;display:block;}

/* ── SQL BOX ── */
.sql-box{background:#1e293b;color:#e2e8f0;padding:18px;border-radius:10px;overflow-x:auto;font-size:.77rem;line-height:1.75;font-family:'Courier New',monospace;white-space:pre;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .adm-sidebar{transform:translateX(-100%);} .adm-sidebar.open{transform:translateX(0);box-shadow:var(--shm);}
  .sb-close{display:block;} .adm-main{margin-left:0;} .tb-tog{display:block;}
  .stats-row{grid-template-columns:1fr 1fr;} .frow.c2,.frow.c3{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .adm-page{padding:14px;} .stats-row{grid-template-columns:1fr 1fr;}
  .dtable th,.dtable td{padding:7px 9px;} .dtable{font-size:.77rem;}
}