/* ======================================================
   BASE
   ====================================================== */
* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
  background:#f5f7fb;
  color:#111827;
}

a{ text-decoration:none; color:inherit; }

/* ======================================================
   LAYOUT
   ====================================================== */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  width:220px;
  height:100vh;
  background:#111827;
  padding:20px 16px;
  overflow-y:auto;
  z-index:1200;
}

.sidebar h3{
  margin:0 0 18px;
  color:#fff;
  font-size:18px;
  font-weight:600;
}

.sidebar a{
  display:flex;
  align-items:center;
  gap:8px;
  color:#c7c9d3;
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:6px;
  font-size:14px;
}

.sidebar a:hover,
.sidebar a.active{
  background:#1f2937;
  color:#fff;
}

.main{
  margin-left:220px;
  padding:20px;
  min-height:100vh;
}

.card{
  background:#fff;
  padding:20px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ======================================================
   STATS
   ====================================================== */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  margin-top:20px;
}

.stat{
  background:#f1f5f9;
  border-radius:12px;
  padding:20px;
  text-align:center;
}

.stat h3{ margin:0; font-size:28px; }

/* ======================================================
   TABLES
   ====================================================== */
table{ width:100%; border-collapse:collapse; }

th{
  text-align:left;
  font-size:14px;
  color:#374151;
  padding:10px;
}

td{
  padding:10px;
  border-bottom:1px solid #eee;
  vertical-align:middle;
  font-size:14px;
}

/* Sticky toolbar (filters) */
.table-toolbar{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  padding:10px 0;
  border-bottom:1px solid #eee;
  margin-bottom:12px;
}

/* Table wrapper (scroll only on small screens) */
.table-wrapper{ width:100%; }

@media (max-width:768px){
  .table-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table-wrapper table{
    min-width:720px; /* wide tables scroll on mobile */
    width:max-content;
  }
}

/* Desktop: table should be normal full width */
@media (min-width:769px){
  .table-wrapper{ overflow:visible; }
  .table-wrapper table{
    width:100%;
    min-width:0;
  }
}

/* ======================================================
   BADGES
   ====================================================== */
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

.badge.super{ background:#2563eb; color:#fff; }
.badge.reseller{ background:#7c3aed; color:#fff; }
.badge.user-add{ background:#16a34a; color:#fff; }
.badge.user-buy{ background:#dc2626; color:#fff; }
.badge.refund{ background:#f97316; color:#fff; }
.badge.gray{ background:#6b7280; color:#fff; }

.badge.active{ background:#16a34a; color:#fff; }
.badge.expired{ background:#dc2626; color:#fff; }

.badge.pending{ background:#fff3cd; color:#856404; }
.badge.approved{ background:#d4edda; color:#155724; }
.badge.rejected{ background:#f8d7da; color:#721c24; }

#pendingCount{
  background:#ff4757;
  color:#fff;
  padding:2px 6px;
  border-radius:10px;
  font-size:11px;
  margin-left:6px;
}

/* ======================================================
   LOGIN
   ====================================================== */
.login-body{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

.login-box{
  background:#fff;
  padding:30px;
  border-radius:12px;
  width:100%;
  max-width:360px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.login-box h2{ margin-top:0; text-align:center; }

.login-box input{
  width:100%;
  padding:10px;
  margin:10px 0;
}

.login-box button{
  width:100%;
  padding:10px;
  background:#4f46e5;
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
}

.login-box button:hover{ background:#4338ca; }

/* ======================================================
   MOBILE SIDEBAR
   ====================================================== */
.mobile-toggle{ display:none; }

@media (max-width:768px){
  .main{ margin-left:0 !important; padding:12px !important; }

  .sidebar{
    left:-260px;
    width:240px;
    transition:left .25s ease;
  }
  .sidebar.active{ left:0; }

  .mobile-toggle{
    display:block;
    position:fixed;
    top:12px;
    left:12px;
    z-index:2000;
    background:#111827;
    color:#fff;
    padding:10px 12px;
    border-radius:10px;
    font-size:18px;
    line-height:1;
    cursor:pointer;
  }
}