@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root {
  --bg: rgba(0, 0, 0, 0.6);
  --sidebar: rgba(0, 0, 0, 0.5); /* sidebar slightly more transparent */
  /* Panel/card base color with transparency */
  --card: rgba(26, 17, 19, 0.8);
  --accent: #ff4f4f;
  --text: #f5f5f5;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }

.hidden { display: none; }

#panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  max-width: 90vw;
  height: 550px;
  max-height: 90vh;
  display: flex;
  background: var(--card);
  color: var(--text);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  animation: fadeIn .3s ease forwards;
  overflow: hidden;
}

@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -60%) scale(.95);} to { opacity: 1; transform: translate(-50%, -50%) scale(1);} }

header {
  background: var(--accent);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

header h1 { font-size: 1.4rem; }

header button {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
}

section { padding: 20px; }

h2 { margin-bottom: 10px; font-size: 1.2rem; }

table { width: 100%; border-collapse: collapse; }

thead { background: rgba(255,255,255,0.05); }

th, td {
  padding: 8px 10px;
  text-align: left;
}

tr:nth-child(even) { background: rgba(255,255,255,0.03); }

tr:hover { background: rgba(79,156,255,0.1); }

/* === Sidebar === */
#sidebar {
  width: 40px;
  height: 100vh;
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
}
#sidebar ul {
  position: relative; list-style: none; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; padding-top: 15px; }
#sidebar li { color: var(--text); cursor: pointer; font-size: 1.2rem; transition: color .2s; display:flex; flex-direction:column; align-items:center; }
#sidebar li.active, #sidebar li:hover { color: var(--accent); }
#sidebar li .label{font-size:0.55rem;margin-top:2px;pointer-events:none;}
#sidebar li.bottom{margin-top:auto;}
#sidebar #closeBtn { margin-bottom: 15px; font-size: 1.2rem; }

/* Top-right close button */
#panelCloseBtn{
  background:var(--accent);
  color:#fff;
  border:none;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  border-radius:4px;

  position:absolute;
  top:8px;
  right:8px;
  background:transparent;
  border:none;
  color:var(--text);
  font-size:1.2rem;
  cursor:pointer;
  z-index:60;
}
#panelCloseBtn:hover{background:#ff6666;}

/* === Main content === */
#content { flex: 1; overflow-y: auto; padding: 25px 30px; }
.page.hidden { display: none; }

/* Grid & cards (general) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 20px; }
.card { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 15px 20px; }
.card h2 { margin-bottom: 10px; font-size: 1.1rem; }

#notif{
  position:absolute;
  top:10px;
  left:50%;
  transform:translate(-50%,-40px) scale(.9);
  background:transparent;
  color:var(--text);
  padding:6px 14px;
  border-radius:6px;
  font-size:.95rem;
  font-weight:500;
  opacity:0;
  pointer-events:none;
  z-index:50;
}

#notif.show{
  animation:notifPop 2.5s cubic-bezier(.25,.8,.25,1) forwards;
}

@keyframes notifPop{
  0%{opacity:0;transform:translate(-50%,-40px) scale(.9);} 
  12%{opacity:1;transform:translate(-50%,0) scale(1);} 
  80%{opacity:1;transform:translate(-50%,0) scale(1);} 
  100%{opacity:0;transform:translate(-50%,-20px) scale(1);} 
}


/* === Players list card === */
.player-card{background:rgba(0,0,0,0.2);padding:15px 20px;border-radius:8px;transition:none;}
.player-card h2{margin-bottom:8px;font-size:1rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text);}
.list-toolbar{display:flex;justify-content:flex-start;align-items:center;margin-bottom:10px;gap:12px;}

.list-toolbar input{flex:none;width:200px;user-select:text;pointer-events:auto;}
.actions{display:flex;gap:8px;margin-left:auto;}
.action-btn{background:var(--accent);color:#fff;border:none;padding:6px 10px;border-radius:4px;font-size:0.75rem;cursor:pointer;transition:background .2s;}
.action-btn:hover{background:#ff6666;}
.player-card:hover{transform:none;box-shadow:none;background:rgba(0,0,0,0.2);} 
.player-card:hover::after{opacity:0!important;} 
.player-card table{width:100%;border-collapse:collapse;font-size:0.9rem;}
.player-card thead{background:rgba(255,255,255,0.08);} 
.player-card th{padding:8px;color:var(--text);font-weight:500;text-align:left;}
.player-card tbody tr{border-bottom:1px solid rgba(255,255,255,0.06);} 
.player-card tbody tr:nth-child(even){background:rgba(255,255,255,0.03);} 
.player-card tbody tr:hover{background:rgba(255,79,79,0.15);} 
.player-card tbody tr{cursor:pointer; user-select:none;}
.player-card tbody tr.selected{background:rgba(255,79,79,0.35);} 
.player-card td:last-child{position:relative;padding-right:30px;}
.sel-icon{position:absolute;right:28px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:0.8rem;opacity:0;visibility:hidden;display:inline-block;width:14px;text-align:right;transition:opacity .15s;}
.close-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:rgba(255,79,79,0.85);color:#fff;border:none;font-size:0.7rem;padding:2px 6px;border-radius:3px;cursor:pointer;} .close-btn:hover{background:#ff5f5f;} 
.player-card tbody tr.selected .sel-icon{opacity:1;visibility:visible;}

.page h1{display:flex;align-items:center;
  position:relative;
  margin-top:0;
  margin-bottom:18px;
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.4px;
  color:var(--text);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.page h1::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:60%;
  height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(255,79,79,0) 100%);
  border-radius:2px;
}

#playersCount{display:inline;} /* keep number tight */
/* Inline button inside heading */
.btn-inline{margin-left:auto;padding:6px 8px;font-size:0.75rem;display:inline-flex;align-items:center;gap:4px;align-self:flex-end;}
/* Remove checkbox square for staff service button */
.staffServiceBtn::before{display:none!important;}
/* Compact sizing specifically */
.staffServiceBtn{padding:2px 8px!important;}

.stats-grid{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px;}
/* Darker background for all cards */
.card, .stat-card, .player-card, .admin-card, .announce-card{background:rgba(0,0,0,0.45)!important;}
.stat-card p{font-size:1.8rem;margin:6px 0 0;}
#content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--accent) rgba(255,255,255,0.05);} 

/* Scrollbar styles */
#content::-webkit-scrollbar{width:8px;height:8px;}
#content::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:4px;}
#content::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px;}
#content::-webkit-scrollbar-thumb:hover{background:#ff6b6b;}

/* Announce card styling */
.announce-card{order:99;flex:1 1 300px;max-width:320px;text-align:center;background:rgba(255,79,79,0.15);} 
.announce-card h2{font-size:1.1rem;margin-bottom:8px;}
.announce-card p{font-size:0.95rem;}

/* Header in players page */
#playersHeader{
  display:flex;
  align-items:center;
  margin-bottom:10px;
}
#playerSearch,#reportSearch{padding:6px 10px;border-radius:4px;border:none;font-size:0.9rem;background:rgba(255,255,255,0.1);color:var(--text);width:160px;transition:background .2s;}
#playerSearch::placeholder,#reportSearch::placeholder{color:rgba(245,245,245,0.6);} 
#playerSearch:focus,#reportSearch:focus{outline:none;background:rgba(255,255,255,0.15);} 

/* Modal */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);z-index:100;}
.modal.hidden{display:none;}
.modal-content{background:#1a1113;padding:20px 24px;border-radius:6px;width:340px;max-width:90vw;box-shadow:0 4px 18px rgba(0,0,0,0.4);display:flex;flex-direction:column;gap:12px;}
.modal-content h3{margin:0;font-size:1.15rem;color:var(--text);}
.modal-content label{font-size:0.85rem;color:var(--text);margin-bottom:4px;}
.modal-content p{color:var(--text); font-size:0.9rem;}
.modal-content select,.modal-content input,.modal-content textarea{width:100%;resize:none;border:none;border-radius:4px;padding:8px;font-size:0.9rem;background:rgba(255,255,255,0.08);color:var(--text);margin-bottom:8px;} 
.modal-content select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;background-image:url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');background-repeat:no-repeat;background-position:right 10px center;background-size:12px;}
.modal-content select:focus,.modal-content input:focus,.modal-content textarea:focus{outline:none;background:rgba(255,255,255,0.12);} 
/* Cancel buttons inside modal actions */
.modal-content .modal-actions button:first-child{
  background:#6c6c6c!important;
  color:#fff;
}

.modal-content select option{background:#1a1113;color:var(--text);} 
.modal-content select option:hover{background:rgba(255,255,255,0.15);} 
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;}
.modal-actions button{padding:6px 12px;border:none;border-radius:4px;font-size:0.8rem;cursor:pointer;color:#fff;background:var(--accent);} 
.modal-actions button#kickCancel,.modal-actions button#clearCancel,.modal-actions button#banCancel,.modal-actions button#dmCancel{background:rgba(255,255,255,0.25);} 
.modal-actions button:hover{opacity:.9;}

/* Ensure hidden always overrides flex display */
.hidden{display:none!important;}

/* Admin page buttons align left */
#admin .actions{margin-left:0!important;}

/* Admin cards container */
.admin-cards{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;margin-bottom:20px;}

/* Admin card grid styles */
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:10px;}

.admin-card{padding:14px 18px;border-radius:6px;background:rgba(0,0,0,0.45)!important;max-width:320px;width:100%;transition:none;}
.admin-card:hover{background:rgba(0,0,0,0.6)!important;transform:none!important;box-shadow:none!important;}
.admin-card::after{display:none!important;}

.admin-title{margin-bottom:10px;font-size:1.1rem;}

/* Toggle buttons */
.toggle-btn{background:rgba(255,255,255,0.18);position:relative;padding:8px 24px 8px 36px;font-size:0.8rem;}
.toggle-btn::before{content:'\f0c8';font-family:'Font Awesome 5 Free';font-weight:900;position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:0.8rem;}
.toggle-btn.active{background:var(--accent);}
.toggle-btn.active::before{content:'\f14a';}
/* No icons for admin buttons */
.admin-btn::before{display:none;}
/* Admin button colors */
.admin-btn{background:var(--accent);color:#fff;transition:transform .15s ease,opacity .15s ease;}
.admin-btn:hover{transform:scale(1.04);opacity:.9;}
.admin-btn.active{background:var(--accent);}
.admin-btn[data-act="superjump"].active,
.admin-btn[data-act="god"].active,
.admin-btn[data-act="esp"].active,
.admin-btn[data-act="invisible"].active{background:#2ecc71;}
#admin .actions{margin-left:0!important;}
.hidden{display:none!important;}

/* === Enhanced Sidebar & Card Styles (added) === */
/* Sidebar */
#sidebar {
  width: 60px; /* wider so label is clearer */
  background: var(--sidebar);
  backdrop-filter: blur(6px);
  transition: width .25s;
}

#sidebar:hover {
  width: 72px; /* subtle expand on hover */
}

#sidebar li {
  position: relative;
  width: 100%;
  padding: 10px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text);
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}

#sidebar li i {
  font-size: 1.2rem;
}

#sidebar li .label {
  margin-top: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: .35px;
  opacity: .85;
}

/* Active / hover state */
#sidebar li.active,
#sidebar li:hover {
  color: var(--accent);
  background: rgba(255,255,255,0.06);
  transform: translateX(3px);
}

#sidebar li.active::before,
#sidebar li:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}

/* Close button at bottom */
#sidebar li.bottom{margin-top:auto;margin-bottom:25px;}
#sidebar #closeBtn { margin-bottom: 20px; font-size: 1.3rem; transition: color .25s; }

#sidebar #closeBtn:hover { color: #ff5f5f; }

/* Sidebar final override for transparency */
#sidebar{background:var(--sidebar)!important;}

/* Cards enhancements */
.card {
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.card:hover:not(.player-card) {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.card::after {
  pointer-events:none;
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,79,79,0.25) 0%, rgba(255,79,79,0) 60%);
  opacity: 0;
  transition: opacity .25s;
}

.card:hover:not(.player-card)::after {
  opacity: 1;
}