/* =====================================================
   MANIABG — Bans Page Fullscreen UI
   ===================================================== */

/* GLOBAL */
body{
  background: radial-gradient(circle at center,#0e141f 0%,#0a1019 100%);
  color:#d8e1ec;
  font-family:'Roboto',sans-serif;
  margin:0; padding:0; overflow-x:hidden; min-height:100vh;
}

/* LAYOUT */
.ban-section{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:40px 0;}
.ban-container{width:95%;max-width:1600px;display:grid;grid-template-columns:320px 1fr;gap:30px;}
.ban-card{background:rgba(18,26,40,.9);backdrop-filter:blur(12px);border:1px solid rgba(102,192,244,.25);border-radius:16px;box-shadow:0 0 25px rgba(0,0,0,.4);overflow:hidden;transition:box-shadow .3s;}
.ban-card:hover{box-shadow:0 0 30px rgba(102,192,244,.3);}
.ban-card-header{background:linear-gradient(90deg,#223347,#3b6b9a);color:#fff;padding:16px 18px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(255,255,255,.1);}
.ban-card-body{padding:18px;}

/* STATS */
.stat{display:flex;justify-content:space-between;align-items:center;background:rgba(32,44,61,.85);border:1px solid rgba(255,255,255,.05);border-radius:10px;margin-bottom:10px;padding:12px 14px;}
.stat .k{font-size:12px;color:#9fb6d5;text-transform:uppercase;}
.stat .v{font-weight:800;color:#fff;}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:800;}
.badge-active{color:#4ade80;background:rgba(16,185,129,.15);}
.badge-perm{color:#facc15;background:rgba(234,179,8,.15);}
.badge-exp{color:#f87171;background:rgba(239,68,68,.15);}

/* Neutral badge for totals */
.badge-total{
  color:#e6eef7;
  background:rgba(102,192,244,.12);
  border-color:rgba(102,192,244,.35);
  font-weight:700;
}

/* FILTERS */
.filters{display:flex;flex-direction:column;gap:12px;margin-top:15px;}
.filters input[type="text"],.filters select{width:100%;background:rgba(42,71,94,.8);color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:10px 12px;outline:none;font-size:14px;}
.filters input:focus,.filters select:focus{border-color:#66c0f4;}
.filters .btn, .btn{background:#66c0f4;color:#0e1117;border:none;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;transition:background .3s;}
.filters .btn:hover, .btn:hover{background:#4a9ccc;}
.btn-secondary{background:rgba(42,71,94,.9);color:#d8e1ec;}

/* TABLE */
.table-wrap{width:100%;background:rgba(24,33,46,.9);border:1px solid rgba(255,255,255,.05);border-radius:14px;box-sizing:border-box;overflow-x:hidden;}
.csgo-table{width:100%;border-collapse:collapse;table-layout:auto;min-width:0;}
.csgo-table thead th{background:rgba(35,52,73,.95);color:#ffcc00;font-size:12px;text-transform:uppercase;padding:12px 10px;letter-spacing:.4px;text-align:left;}
.csgo-table tbody td{padding:12px 10px;border-top:1px solid rgba(255,255,255,.05);color:#d8e1ec;font-size:13px;vertical-align:middle;}
.csgo-table tbody tr:hover{background:rgba(102,192,244,.08);transition:.2s;}

/* USER/ADMIN CELL */
.u{display:flex;align-items:center;gap:10px;min-width:0;}
.u img{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.15);object-fit:cover;box-shadow:0 0 6px rgba(0,0,0,.3);}
.u span{display:inline-block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:13.5px;}
.admin-name{font-weight:700;font-size:13.5px;}
.admin-role{opacity:.7;font-size:12px;color:#c0c9d6;}

/* CODE FIELD */
.csgo-table code{background:rgba(0,0,0,.35);padding:3px 8px;border-radius:6px;color:#b8e0ff;font-family:monospace;font-size:12.5px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* BUTTONS IN ROW */
.actions .btn{padding:6px 12px;border-radius:8px;font-size:13px;margin-right:6px;}

/* PAGINATION */
.pagination{display:flex;justify-content:center;gap:8px;margin:22px 0 5px;flex-wrap:wrap;}
.pagination a{padding:10px 14px;border-radius:10px;text-decoration:none;background:rgba(42,71,94,.9);color:#fff;font-weight:600;border:1px solid rgba(255,255,255,.1);transition:.2s;}
.pagination a:hover{background:#4a9ccc;}
.pagination a.active{background:#66c

/* Mobile labels by column (no PHP changes needed) */
@media (max-width: 900px){
  /* Bans: #, Потребител, Steam, Причина, Изтичане, Статус, Админ */
  .table-bans td:nth-child(1){--label:"#"}
  .table-bans td:nth-child(2){--label:"Потребител"}
  .table-bans td:nth-child(3){--label:"Steam"}
  .table-bans td:nth-child(4){--label:"Причина"}
  .table-bans td:nth-child(5){--label:"Изтичане"}
  .table-bans td:nth-child(6){--label:"Статус"}
  .table-bans td:nth-child(7){--label:"Админ"}
  .table-bans td::before{content:var(--label)}

  /* Gags: #, Потребител, Steam, Тип GAG, Причина, Времетраене, Остава, Статус, Админ */
  .table-gags td:nth-child(1){--label:"#"}
  .table-gags td:nth-child(2){--label:"Потребител"}
  .table-gags td:nth-child(3){--label:"Steam"}
  .table-gags td:nth-child(4){--label:"Тип GAG"}
  .table-gags td:nth-child(5){--label:"Причина"}
  .table-gags td:nth-child(6){--label:"Времетраене"}
  .table-gags td:nth-child(7){--label:"Остава"}
  .table-gags td:nth-child(8){--label:"Статус"}
  .table-gags td:nth-child(9){--label:"Админ"}
  .table-gags td::before{content:var(--label)}
}