/* ═══════════════════════════════════════════════════════════
   Modern Group — Admin Panel CSS
═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:#0F0F1A;color:#E8E6F0;min-height:100vh;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:#1A1A2E}
::-webkit-scrollbar-thumb{background:#C8121A;border-radius:2px}

:root{
  --red:#C8121A;--red-dk:#A50E14;--red-alpha:rgba(200,18,26,.12);
  --gold:#C8962A;--gold-alpha:rgba(200,150,42,.12);
  --bg:#0F0F1A;--bg2:#161626;--bg3:#1E1E32;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.12);
  --text:#E8E6F0;--muted:#8B89A0;--muted2:#5A5870;
  --r:7px;--ease:cubic-bezier(.4,0,.2,1);
  --sidebar-w:240px;
}

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

/* ─── SIDEBAR ──────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;
  overflow-y:auto;z-index:200;
  transition:transform .3s var(--ease);
}
.sidebar-logo{padding:1.25rem 1.25rem 1rem;border-bottom:1px solid var(--border);}
.sidebar-logo .logo-text{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.3px;}
.sidebar-logo .logo-sub{font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:.15rem;}
.sidebar-section{padding:.5rem 0;}
.sidebar-label{font-size:.55rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted2);padding:.85rem 1.25rem .35rem;font-weight:700;}
.sidebar-link{
  display:flex;align-items:center;gap:.65rem;
  padding:.65rem 1.25rem;font-size:.82rem;font-weight:600;
  color:var(--muted);border-left:2px solid transparent;
  transition:all .18s;
}
.sidebar-link:hover{color:#fff;background:rgba(255,255,255,.04);border-left-color:rgba(200,18,26,.4);}
.sidebar-link.active{color:#fff;background:var(--red-alpha);border-left-color:var(--red);}
.sidebar-link .icon{font-size:.95rem;width:18px;text-align:center;flex-shrink:0;}
.sidebar-footer{margin-top:auto;padding:1rem 1.25rem;border-top:1px solid var(--border);}
.sidebar-footer a{font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:.5rem;}
.sidebar-footer a:hover{color:var(--red)}

/* ─── MAIN CONTENT ─────────────────────────────────────── */
.admin-main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;}

/* ─── TOP BAR ──────────────────────────────────────────── */
.topbar{height:58px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.75rem;position:sticky;top:0;z-index:100;}
.topbar-title{font-size:.9rem;font-weight:700;color:#fff;}
.topbar-right{display:flex;align-items:center;gap:1rem;}
.topbar-user{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--muted);}
.topbar-avatar{width:30px;height:30px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;}
.ham-btn{display:none;background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.2rem;}

/* ─── PAGE CONTENT ─────────────────────────────────────── */
.page-content{padding:1.75rem;flex:1;}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.75rem;}
.page-header h1{font-size:1.3rem;font-weight:800;color:#fff;}
.page-header p{font-size:.8rem;color:var(--muted);margin-top:.2rem;}

/* ─── STAT CARDS ───────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1rem;margin-bottom:1.75rem;}
.stat-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;position:relative;overflow:hidden;transition:border-color .2s,transform .2s;}
.stat-card:hover{border-color:var(--border2);transform:translateY(-2px);}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),var(--gold));}
.stat-num{font-size:2rem;font-weight:900;color:#fff;line-height:1;}
.stat-lbl{font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:.3rem;}
.stat-icon{position:absolute;right:1rem;top:1rem;font-size:1.5rem;opacity:.2;}

/* ─── TABLE ────────────────────────────────────────────── */
.card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:1.5rem;}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);}
.card-head h2{font-size:.9rem;font-weight:700;color:#fff;}
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead th{font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding:.75rem 1.25rem;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
tbody td{font-size:.82rem;color:var(--text);padding:.85rem 1.25rem;border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.02)}
.td-muted{color:var(--muted);font-size:.78rem;}

/* ─── BADGES ───────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;font-size:.6rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:.22rem .6rem;border-radius:3px;}
.badge-green{background:rgba(34,197,94,.12);color:#4ade80;}
.badge-yellow{background:rgba(234,179,8,.12);color:#fbbf24;}
.badge-red{background:var(--red-alpha);color:#f87171;}
.badge-blue{background:rgba(59,130,246,.12);color:#60a5fa;}

/* ─── ACTIONS ──────────────────────────────────────────── */
.actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1rem;font-family:'Outfit',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.8px;text-transform:uppercase;border-radius:5px;border:none;cursor:pointer;transition:all .18s;white-space:nowrap;}
.btn-primary{background:var(--red);color:#fff;}
.btn-primary:hover{background:var(--red-dk);transform:translateY(-1px);}
.btn-secondary{background:transparent;color:var(--muted);border:1px solid var(--border2);}
.btn-secondary:hover{color:#fff;border-color:rgba(255,255,255,.25);}
.btn-danger{background:transparent;color:#f87171;border:1px solid rgba(248,113,113,.3);}
.btn-danger:hover{background:rgba(248,113,113,.1);}
.btn-success{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(74,222,128,.2);}
.btn-success:hover{background:rgba(34,197,94,.25);}
.btn-sm{padding:.35rem .75rem;font-size:.65rem;}

/* ─── FORM ─────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.25rem;}
.form-group{display:flex;flex-direction:column;gap:.4rem;}
.form-group.full{grid-column:1/-1;}
label{font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700;}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=url],select,textarea{
  background:var(--bg2);border:1.5px solid var(--border2);border-radius:5px;
  padding:.7rem .9rem;color:var(--text);font-family:'Outfit',sans-serif;font-size:.85rem;
  outline:none;transition:border-color .2s,background .2s;width:100%;resize:vertical;
  -webkit-appearance:none;appearance:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--red);background:#0c0c1a;}
select option{background:#1E1E32;color:var(--text);}
textarea{min-height:120px;}
.form-hint{font-size:.72rem;color:var(--muted);margin-top:.2rem;}

/* ─── ALERTS ───────────────────────────────────────────── */
.alert{padding:.85rem 1.1rem;border-radius:var(--r);font-size:.82rem;font-weight:600;margin-bottom:1.25rem;}
.alert-success{background:rgba(34,197,94,.1);border:1px solid rgba(74,222,128,.25);color:#4ade80;}
.alert-error{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.25);color:#f87171;}
.alert-info{background:rgba(59,130,246,.1);border:1px solid rgba(96,165,250,.25);color:#60a5fa;}

/* ─── LOGIN PAGE ───────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:2rem;}
.login-box{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:2.5rem;width:100%;max-width:400px;}
.login-logo{text-align:center;margin-bottom:2rem;}
.login-logo .brand{font-size:1.4rem;font-weight:900;color:#fff;}
.login-logo .sub{font-size:.65rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-top:.3rem;}

/* ─── PAGINATION ───────────────────────────────────────── */
.pagination{display:flex;gap:.4rem;justify-content:center;padding:1.25rem;flex-wrap:wrap;}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:5px;font-size:.78rem;font-weight:700;border:1px solid var(--border2);color:var(--muted);transition:all .18s;}
.pagination a:hover{background:rgba(255,255,255,.06);color:#fff;}
.pagination .current{background:var(--red);color:#fff;border-color:var(--red);}

/* ─── TOGGLE ───────────────────────────────────────────── */
.toggle{position:relative;display:inline-block;width:38px;height:22px;cursor:pointer;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--border2);border-radius:22px;transition:.3s;}
.toggle-slider::before{content:'';position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s;}
.toggle input:checked+.toggle-slider{background:var(--red);}
.toggle input:checked+.toggle-slider::before{transform:translateX(16px);}

/* ─── RESPONSIVE ───────────────────────────────────────── */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .admin-main{margin-left:0}
  .ham-btn{display:block}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:500px){
  .stats-grid{grid-template-columns:1fr}
  .page-content{padding:1rem}
}