/* Steam Monitor Admin - Dark Theme v2 */
:root {
  --bg-page: #0a0e12;
  --bg-primary: #1a242c;
  --bg-secondary: #1e2c38;
  --bg-tertiary: #2a475e;
  --bg-card: #232f3c;
  --bg-hover: #355066;
  --text-primary: #e1e8ed;
  --text-secondary: #aeb9c2;
  --text-muted: #7a8692;
  --text-bright: #ffffff;
  --accent: #5aa9d6;
  --accent-hover: #76c1ea;
  --accent-green: #b2d430;
  --accent-red: #e05050;
  --accent-orange: #e8a030;
  --accent-yellow: #c4a82e;
  --border-color: #2e4254;
  --border-radius: 6px;
  --border-radius-lg: 10px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC",sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
}
#app { display:flex; min-height:100vh; }

/* Sidebar */
#sidebar { width:220px; background:var(--bg-primary); border-right:1px solid var(--border-color); display:flex; flex-direction:column; flex-shrink:0; }
.sidebar-header { padding:20px 16px; font-size:18px; font-weight:500; color:var(--text-bright); display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border-color); }
.sidebar-header .mdi { font-size:22px; color:var(--accent); }
.nav-list { list-style:none; padding:8px 0; }
.nav-item { padding:12px 16px; display:flex; align-items:center; gap:10px; cursor:pointer; color:var(--text-secondary); border-left:3px solid transparent; transition:all 0.15s; font-size:14px; }
.nav-item:hover { color:var(--text-bright); background:rgba(255,255,255,0.04); }
.nav-item.active { color:var(--accent); border-left-color:var(--accent); background:rgba(90,169,214,0.08); }
.nav-item .mdi { font-size:18px; }

/* Content */
#content { flex:1; padding:28px; overflow-y:auto; min-width:0; }
.page-title { font-size:22px; font-weight:500; color:var(--text-bright); margin-bottom:22px; }

/* Stats cards */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--bg-card); border-radius:var(--border-radius-lg); padding:20px; border:1px solid var(--border-color); }
.stat-value { font-size:30px; font-weight:500; color:var(--accent); }
.stat-label { font-size:13px; color:var(--text-muted); margin-top:4px; }

/* Cards */
.card { background:var(--bg-card); border-radius:var(--border-radius-lg); padding:20px; border:1px solid var(--border-color); margin-bottom:20px; }
.card-title { font-size:15px; font-weight:500; color:var(--text-bright); margin-bottom:16px; }

/* Charts */
.chart-box { width:100%; height:320px; }
.chart-box-lg { width:100%; height:450px; }
.charts-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--border-radius); border:1px solid var(--border-color); background:var(--bg-tertiary); color:var(--text-primary); cursor:pointer; font-size:13px; transition:all 0.15s; }
.btn:hover { background:var(--bg-hover); color:var(--text-bright); border-color:var(--accent); }
.btn-primary { background:var(--accent); color:#0e1419; border-color:var(--accent); font-weight:500; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-danger { color:var(--accent-red); border-color:var(--accent-red); }
.btn-danger:hover { background:rgba(224,80,80,0.12); }
.btn-sm { padding:5px 12px; font-size:12px; }

/* Forms */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:5px; }
.form-input { width:100%; padding:9px 12px; border-radius:var(--border-radius); border:1px solid var(--border-color); background:var(--bg-primary); color:var(--text-primary); font-size:13px; outline:none; transition:border-color 0.15s; }
.form-input:focus { border-color:var(--accent); }
select.form-input { cursor:pointer; }

/* Table */
.table { width:100%; border-collapse:collapse; }
.table th,.table td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--border-color); font-size:13px; }
.table th { color:var(--text-secondary); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; }
.table td { color:var(--text-primary); }
.table tr:hover td { background:rgba(255,255,255,0.03); }

/* Toggle */
.toggle { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.toggle input { display:none; }
.toggle .slider { position:absolute; inset:0; background:var(--bg-tertiary); border-radius:12px; cursor:pointer; transition:background 0.15s; }
.toggle .slider::after { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--text-bright); border-radius:50%; transition:transform 0.15s; }
.toggle input:checked+.slider { background:var(--accent); }
.toggle input:checked+.slider::after { transform:translateX(18px); }

/* Tabs */
.tab-bar { display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; }
.tab-btn { padding:8px 18px; border-radius:var(--border-radius); border:1px solid var(--border-color); background:transparent; color:var(--text-secondary); cursor:pointer; font-size:13px; transition:all 0.15s; }
.tab-btn:hover { color:var(--text-bright); border-color:var(--accent); }
.tab-btn.active { background:var(--bg-tertiary); color:var(--text-bright); border-color:var(--accent); font-weight:500; }

/* Modal */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:100; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:var(--bg-card); border-radius:var(--border-radius-lg); padding:28px; min-width:380px; max-width:520px; border:1px solid var(--border-color); }
.modal-title { font-size:18px; font-weight:500; color:var(--text-bright); margin-bottom:18px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

/* Badge */
.badge { display:inline-block; padding:3px 10px; border-radius:10px; font-size:11px; font-weight:500; }
.badge-playing { background:rgba(178,212,48,0.18); color:var(--accent-green); }
.badge-online { background:rgba(90,169,214,0.18); color:var(--accent); }
.badge-offline { background:rgba(174,185,194,0.12); color:var(--text-secondary); }

/* Flex */
.flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.gap-8 { gap:8px; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.mb-12 { margin-bottom:12px; }
.mb-16 { margin-bottom:16px; }
.mb-20 { margin-bottom:20px; }
.mt-8 { margin-top:8px; }
.w-full { width:100%; }

/* Loading */
.page-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; height:300px; color:var(--text-secondary); gap:12px; }
.page-loading .mdi { font-size:32px; }

/* Gantt */
.gantt-container { width:100%; height:520px; }

/* Groups */
.groups-layout { display:grid; grid-template-columns:220px 1fr; gap:20px; }
.group-list-item { padding:11px 16px; cursor:pointer; border-radius:var(--border-radius); color:var(--text-secondary); font-size:13px; transition:all 0.15s; }
.group-list-item:hover { color:var(--text-bright); background:rgba(255,255,255,0.04); }
.group-list-item.active { color:var(--accent); background:rgba(90,169,214,0.08); font-weight:500; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:var(--bg-tertiary); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--bg-hover); }

/* Empty state */
.empty-state { text-align:center; padding:48px 20px; color:var(--text-muted); }
.empty-state .mdi { font-size:48px; margin-bottom:12px; display:block; opacity:0.5; }

/* Toast */
.toast { position:fixed; bottom:28px; right:28px; padding:14px 24px; border-radius:var(--border-radius-lg); background:var(--bg-tertiary); color:var(--text-bright); font-size:13px; z-index:200; animation:toast-in 0.3s; border:1px solid var(--border-color); }
.toast-success { border-color:var(--accent-green); }
.toast-error { border-color:var(--accent-red); }
@keyframes toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Player cards */
.dash-pcard { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--border-radius-lg); border:1px solid var(--border-color); background:var(--bg-card); min-width:180px; cursor:pointer; transition:all 0.15s; }
.dash-pcard:hover { border-color:var(--accent) !important; }
.dash-pav { width:32px; height:32px; border-radius:6px; background:var(--bg-tertiary); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dash-pav img { width:100%; height:100%; object-fit:cover; }
.player-card-mini { cursor:pointer; display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-primary); border-radius:var(--border-radius-lg); border:1px solid var(--border-color); min-width:200px; transition:border-color 0.15s; }
.player-card-mini:hover { border-color:var(--accent) !important; }
.player-avatar { width:36px; height:36px; border-radius:6px; background:var(--bg-tertiary); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.player-avatar img { width:100%; height:100%; object-fit:cover; }

/* Rank image */
.rank-img-wrapper { overflow-y:auto; max-height:560px; border-radius:var(--border-radius-lg); }

/* Test */
.test-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.test-stat { padding:12px; border-radius:var(--border-radius); background:var(--bg-primary); border:1px solid var(--border-color); text-align:center; }
.test-stat-val { font-size:18px; font-weight:600; }
.test-stat-lbl { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Monospace */
.monospace { font-family:'SF Mono','Fira Code',monospace; font-size:12px; }

/* Mobile */
@media (max-width:768px) {
  #content { padding:16px; }
  .charts-row { grid-template-columns:1fr; }
  .groups-layout { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}