{% extends 'admin/base.html' %}

{% block page_body %}
<div class="admin-shell">
  <aside class="sidebar">
    <a class="sb-brand" href="/admin/">
      <img src="/static/kittyrec_icon.png" alt="KittyRec">
      <span class="sb-brand-name">KittyRec</span>
      <span class="sb-brand-tag">ADMIN</span>
    </a>
    <nav class="sb-nav">
      <a href="/admin/" class="sb-link {% if request.path == '/admin/' or request.path == '/admin' %}active{% endif %}">Dashboard</a>
      <div class="sb-label">Players</div>
      <a href="/admin/players" class="sb-link {% if request.path.startswith('/admin/players') %}active{% endif %}">Players</a>
      <a href="/admin/bans" class="sb-link {% if request.path.startswith('/admin/bans') %}active{% endif %}">Bans</a>
      <a href="/admin/gifts" class="sb-link {% if request.path.startswith('/admin/gifts') %}active{% endif %}">Gift Log</a>
      <a href="/admin/chat" class="sb-link {% if request.path.startswith('/admin/chat') %}active{% endif %}">Chat Mod</a>
      <a href="/admin/leaderboard" class="sb-link {% if request.path.startswith('/admin/leaderboard') %}active{% endif %}">Leaderboard</a>
      <div class="sb-label">Live</div>
      <a href="/admin/sessions" class="sb-link {% if request.path.startswith('/admin/sessions') %}active{% endif %}">Sessions</a>
      <a href="/admin/live/rooms" class="sb-link {% if request.path.startswith('/admin/live/rooms') %}active{% endif %}">Rooms</a>
      <a href="/admin/live/events" class="sb-link {% if request.path.startswith('/admin/live/events') %}active{% endif %}">Events</a>
      <div class="sb-label">Management</div>
      <a href="/admin/live/store" class="sb-link {% if request.path.startswith('/admin/live/store') %}active{% endif %}">Store</a>
      <a href="/admin/live/weekly" class="sb-link {% if request.path.startswith('/admin/live/weekly') %}active{% endif %}">Challenges</a>
      <a href="/admin/analytics" class="sb-link {% if request.path.startswith('/admin/analytics') %}active{% endif %}">Analytics</a>
      <a href="/admin/live/discord" class="sb-link {% if request.path.startswith('/admin/live/discord') %}active{% endif %}">Discord</a>
      <a href="/admin/live/console" class="sb-link {% if request.path.startswith('/admin/live/console') %}active{% endif %}">Console</a>
      <div class="sb-label">Content</div>
      <a href="/admin/live/avatar_items" class="sb-link {% if request.path.startswith('/admin/live/avatar_items') %}active{% endif %}">Avatar Items</a>
      <a href="/admin/live/swatches" class="sb-link {% if request.path.startswith('/admin/live/swatches') %}active{% endif %}">Swatches</a>
      <a href="/admin/live/ugc_items" class="sb-link {% if request.path.startswith('/admin/live/ugc_items') %}active{% endif %}">UGC Avatar</a>
      <a href="/admin/live/textures" class="sb-link {% if request.path.startswith('/admin/live/textures') %}active{% endif %}">Game Assets</a>
      <a href="/admin/live/music" class="sb-link {% if request.path.startswith('/admin/live/music') %}active{% endif %}">Music</a>
      <a href="/admin/live/cdn" class="sb-link {% if request.path.startswith('/admin/live/cdn') %}active{% endif %}">CDN</a>
      <a href="/admin/live/downloads" class="sb-link {% if request.path.startswith('/admin/live/downloads') %}active{% endif %}">Downloads</a>
      <a href="/admin/videos" class="sb-link {% if request.path.startswith('/admin/videos') %}active{% endif %}">Videos</a>
      <a href="/admin/kittyrec/mod" class="sb-link {% if request.path.startswith('/admin/kittyrec/mod') %}active{% endif %}">KittyRec Mod</a>
      <div class="sb-label">Data</div>
      <a href="/admin/admin_players/" class="sb-link {% if request.path.startswith('/admin/admin_players') %}active{% endif %}">Player DB</a>
      <a href="/admin/admin_gifts/" class="sb-link {% if request.path.startswith('/admin/admin_gifts') %}active{% endif %}">Gifts DB</a>
      <a href="/admin/admin_bans/" class="sb-link {% if request.path.startswith('/admin/admin_bans') %}active{% endif %}">Ban Log DB</a>
      <a href="/admin/live/dll_archive" class="sb-link {% if request.path.startswith('/admin/live/dll_archive') %}active{% endif %}">DLL Archive</a>
      <div class="sb-label">Tracking</div>
      <a href="/admin/admin_todos/" class="sb-link {% if request.path.startswith('/admin/admin_todos') %}active{% endif %}">Todos</a>
      <a href="/admin/admin_issues/" class="sb-link {% if request.path.startswith('/admin/admin_issues') %}active{% endif %}">Issues</a>
    </nav>
    <div class="sb-footer">
      <div class="sb-online">
        <span class="sb-online-dot"></span>
        <span id="sb-online-count">—</span> online
      </div>
      <a href="/admin/logout" class="sb-signout">Sign out</a>
    </div>
  </aside>
  <div class="admin-main">
    <div class="admin-topbar">
      <button class="topbar-cmd" onclick="KR.openPalette()" type="button" style="margin-left:auto">
        Search or jump… <kbd>⌘K</kbd>
      </button>
    </div>
    <div class="admin-content">
      {% block body %}{% endblock %}
    </div>
  </div>
</div>
{% endblock %}

{% block head_meta %}
{{ super() }}
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/static/kittyrec_icon.png">
<link rel="apple-touch-icon" href="/static/kittyrec_icon.png">
<link rel="stylesheet" href="/static/admin/admin.css">
<style>
:root {
  --kr-bg: #0b0b14;
  --kr-bg2: #12121f;
  --kr-bg3: #1a1a2e;
  --kr-surface: #12121f;
  --kr-surface2: #1a1a2e;
  --kr-purple: #7c3aed;
  --kr-purple-l: #a855f7;
  --kr-purple-d: #5b21b6;
  --kr-accent: #ec4899;
  --kr-text: #e2e8f0;
  --kr-text-muted: #94a3b8;
  --kr-border: #2a2a4a;
  --kr-success: #10b981;
  --kr-danger: #ef4444;
  --kr-warning: #f59e0b;
  --kr-info: #06b6d4;
  --bg: #0b0b14; --bg2: #12121f; --bg3: #1a1a2e; --bg4: #222240;
  --border: #2a2a4a;
  --purple: #7c3aed; --purple-l: #a855f7;
  --teal: #06b6d4; --pink: #ec4899; --green: #10b981; --yellow: #f59e0b; --red: #ef4444;
  --text: #e2e8f0; --text2: #94a3b8; --text3: #64748b;
  --radius: 10px;
  --shadow: 0 4px 24px rgba(0,0,0,0.6);
}

body {
  background: var(--kr-bg) !important;
  color: var(--kr-text) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

.navbar {
  background: linear-gradient(135deg, #1a0d2e 0%, #2d1450 50%, #1a0d2e 100%) !important;
  border-bottom: 2px solid var(--kr-purple-d) !important;
  box-shadow: 0 2px 20px rgba(155,89,182,0.15) !important;
  padding: 0 1rem !important;
  min-height: 56px !important;
}

.navbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  margin-right: 1.5rem !important;
  text-decoration: none !important;
}

.navbar-brand img {
  height: 34px;
  width: 34px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(155,89,182,0.4);
}

.navbar-brand span {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #fff !important;
  letter-spacing: -0.3px;
}

.navbar-brand .brand-sub {
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  color: var(--kr-purple-l) !important;
  display: block;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.navbar .nav-item > .nav-link {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 16px 12px !important;
  transition: color 0.15s, background 0.15s !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
}

.navbar .nav-item > .nav-link:hover,
.navbar .nav-item.show > .nav-link {
  color: #fff !important;
  background: rgba(155,89,182,0.15) !important;
  border-bottom-color: var(--kr-purple-l) !important;
}

.navbar .nav-item.active > .nav-link {
  color: #fff !important;
  border-bottom-color: var(--kr-accent) !important;
}

.navbar .dropdown-menu {
  background: var(--kr-bg3) !important;
  border: 1px solid var(--kr-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
  margin-top: 0 !important;
  padding: 6px 0 !important;
  min-width: 200px !important;
}

.navbar .dropdown-item {
  color: var(--kr-text) !important;
  font-size: 0.83rem !important;
  padding: 8px 16px !important;
  transition: background 0.12s !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: rgba(155,89,182,0.2) !important;
  color: #fff !important;
}

.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
  background: var(--kr-purple-d) !important;
  color: #fff !important;
}

.navbar .dropdown-header {
  color: var(--kr-purple-l) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  padding: 8px 16px 4px !important;
}

.navbar .dropdown-divider {
  border-color: var(--kr-border) !important;
}

.container-fluid, .container {
  max-width: 100% !important;
}

.card {
  background: var(--kr-surface) !important;
  border: 1px solid var(--kr-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

.card-header {
  background: rgba(155,89,182,0.1) !important;
  border-bottom: 1px solid var(--kr-border) !important;
  color: var(--kr-text) !important;
  font-weight: 600 !important;
}

.card-body {
  color: var(--kr-text) !important;
}

.table {
  color: var(--kr-text) !important;
}

.table thead th {
  background: var(--kr-surface2) !important;
  color: var(--kr-purple-l) !important;
  border-bottom: 2px solid var(--kr-border) !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
}

.thead-light th, .thead-light td {
  background: var(--kr-surface2) !important;
  color: var(--kr-purple-l) !important;
}

.table td, .table th {
  border-color: var(--kr-border) !important;
  vertical-align: middle !important;
}

.table-hover tbody tr:hover {
  background: rgba(155,89,182,0.08) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(155,89,182,0.04) !important;
}

.form-control, .form-control:focus {
  background: var(--kr-bg) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.form-control:focus {
  border-color: var(--kr-purple) !important;
  box-shadow: 0 0 0 0.2rem rgba(155,89,182,0.25) !important;
}

.form-control::placeholder {
  color: var(--kr-text-muted) !important;
}

select.form-control {
  background: var(--kr-bg) !important;
  color: var(--kr-text) !important;
}

select.form-control option {
  background: var(--kr-bg) !important;
  color: var(--kr-text) !important;
}

.btn-primary {
  background: var(--kr-purple) !important;
  border-color: var(--kr-purple) !important;
}

.btn-primary:hover {
  background: var(--kr-purple-d) !important;
  border-color: var(--kr-purple-d) !important;
}

.btn-outline-primary {
  color: var(--kr-purple-l) !important;
  border-color: var(--kr-purple) !important;
}

.btn-outline-primary:hover {
  background: var(--kr-purple) !important;
  color: #fff !important;
}

.badge-purple {
  background: var(--kr-purple);
  color: #fff;
}

.alert {
  border-radius: 8px !important;
}

.modal-content {
  background: var(--kr-surface) !important;
  border: 1px solid var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.modal-header {
  border-bottom-color: var(--kr-border) !important;
}

.modal-footer {
  border-top-color: var(--kr-border) !important;
}

.close {
  color: var(--kr-text) !important;
}

.text-muted {
  color: var(--kr-text-muted) !important;
}

.pagination .page-link {
  background: var(--kr-surface) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-purple-l) !important;
}

.pagination .page-item.active .page-link {
  background: var(--kr-purple) !important;
  border-color: var(--kr-purple) !important;
  color: #fff !important;
}

.pagination .page-link:hover {
  background: var(--kr-surface2) !important;
}

.list-group-item {
  background: var(--kr-surface) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.list-group-item-action:hover {
  background: var(--kr-surface2) !important;
  color: #fff !important;
}

.breadcrumb {
  background: var(--kr-surface) !important;
  border-radius: 8px !important;
}

.breadcrumb-item a {
  color: var(--kr-purple-l) !important;
}

.breadcrumb-item.active {
  color: var(--kr-text-muted) !important;
}

a {
  color: var(--kr-purple-l);
}

a:hover {
  color: #fff;
}

.admin-header {
  background: var(--kr-surface);
  border-bottom: 1px solid var(--kr-border);
  padding: 12px 24px;
  margin: -15px -15px 20px -15px;
  border-radius: 0;
}

.admin-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.nav-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(46,204,113,0.15);
  border: 1px solid rgba(46,204,113,0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.78rem;
  color: var(--kr-success);
  font-weight: 600;
}

.nav-online-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kr-success);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.kr-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.btn-logout {
  background: rgba(231,76,60,0.15) !important;
  border: 1px solid rgba(231,76,60,0.3) !important;
  color: #e74c3c !important;
  font-size: 0.8rem !important;
  padding: 5px 14px !important;
  border-radius: 6px !important;
  transition: all 0.15s !important;
}

.btn-logout:hover {
  background: rgba(231,76,60,0.3) !important;
  color: #fff !important;
}

#admin-alert .alert {
  border-radius: 8px;
  margin-bottom: 0;
}

.fa, .fas, .far, .fab, .glyphicon {
  margin-right: 2px;
}

input[type="checkbox"] {
  accent-color: var(--kr-purple);
}

.xseditable-container .editable-input {
  background: var(--kr-bg) !important;
  color: var(--kr-text) !important;
}

.dropdown-menu {
  background: var(--kr-bg3) !important;
  border: 1px solid var(--kr-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

.dropdown-item {
  color: var(--kr-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(155,89,182,0.2) !important;
  color: #fff !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--kr-purple-d) !important;
  color: #fff !important;
}

.dropdown-header {
  color: var(--kr-purple-l) !important;
}

.dropdown-divider {
  border-color: var(--kr-border) !important;
}

.popover {
  background: var(--kr-surface) !important;
  border-color: var(--kr-border) !important;
}

.popover-header {
  background: var(--kr-surface2) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.popover-body {
  color: var(--kr-text) !important;
}

.popover .arrow::after {
  border-bottom-color: var(--kr-surface) !important;
  border-top-color: var(--kr-surface) !important;
}

.tooltip-inner {
  background: var(--kr-surface2) !important;
  color: var(--kr-text) !important;
}

.input-group-text {
  background: var(--kr-surface2) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.btn-outline-secondary {
  color: var(--kr-text-muted) !important;
  border-color: var(--kr-border) !important;
}

.btn-outline-secondary:hover {
  background: var(--kr-surface2) !important;
  color: #fff !important;
}

.btn-secondary {
  background: var(--kr-surface2) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.btn-secondary:hover {
  background: var(--kr-bg3) !important;
}

.btn-light, .btn-outline-light {
  color: var(--kr-text) !important;
}

.page-item.disabled .page-link {
  background: var(--kr-bg) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text-muted) !important;
}

.custom-select,
.custom-control-label::before {
  background: var(--kr-bg) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--kr-purple) !important;
  border-color: var(--kr-purple) !important;
}

.jumbotron, .bg-light {
  background: var(--kr-surface) !important;
}

.bg-white, .bg-body {
  background: var(--kr-bg) !important;
}

.border, .border-top, .border-bottom, .border-left, .border-right {
  border-color: var(--kr-border) !important;
}

.thead-dark th {
  background: var(--kr-surface2) !important;
  color: var(--kr-purple-l) !important;
  border-color: var(--kr-border) !important;
}

.nav-tabs {
  border-bottom-color: var(--kr-border) !important;
}

.nav-tabs .nav-link {
  color: var(--kr-text-muted) !important;
  border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.nav-tabs .nav-link.active {
  background: var(--kr-surface) !important;
  border-color: var(--kr-border) var(--kr-border) var(--kr-surface) !important;
  color: var(--kr-text) !important;
}

.editable-container .form-control,
.editable-container .editable-input,
.editable-container .editable-buttons .btn {
  background: var(--kr-bg) !important;
  color: var(--kr-text) !important;
  border-color: var(--kr-border) !important;
}

.editable-container .popover,
.editable-container .popover-body {
  background: var(--kr-surface) !important;
  color: var(--kr-text) !important;
}

.flash-messages .alert,
#admin-alert .alert {
  background: var(--kr-surface) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.alert-success { background: rgba(46,204,113,0.15) !important; border-color: rgba(46,204,113,0.3) !important; color: var(--kr-success) !important; }
.alert-danger { background: rgba(231,76,60,0.15) !important; border-color: rgba(231,76,60,0.3) !important; color: var(--kr-danger) !important; }
.alert-warning { background: rgba(243,156,18,0.15) !important; border-color: rgba(243,156,18,0.3) !important; color: var(--kr-warning) !important; }
.alert-info { background: rgba(52,152,219,0.15) !important; border-color: rgba(52,152,219,0.3) !important; color: var(--kr-info) !important; }

.filters .form-control,
.filters .btn,
.filters select {
  background: var(--kr-bg) !important;
  color: var(--kr-text) !important;
  border-color: var(--kr-border) !important;
}

.filters .btn-default {
  background: var(--kr-surface2) !important;
  color: var(--kr-text) !important;
  border-color: var(--kr-border) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--kr-bg) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.select2-container--default .select2-results__option {
  background: var(--kr-bg3) !important;
  color: var(--kr-text) !important;
}

.select2-container--default .select2-results__option--highlighted {
  background: var(--kr-purple) !important;
  color: #fff !important;
}

.select2-dropdown {
  background: var(--kr-bg3) !important;
  border-color: var(--kr-border) !important;
}

.select2-search__field {
  background: var(--kr-bg) !important;
  color: var(--kr-text) !important;
}

.well {
  background: var(--kr-surface) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

#fa_filter_form_wrapper, .filters-wrapper {
  background: var(--kr-surface) !important;
}

label {
  color: var(--kr-text) !important;
}

.help-block, .form-text {
  color: var(--kr-text-muted) !important;
}

code {
  color: var(--kr-accent) !important;
  background: rgba(224,86,160,0.1) !important;
  padding: 1px 5px;
  border-radius: 3px;
}

pre {
  background: var(--kr-bg) !important;
  color: var(--kr-text) !important;
  border: 1px solid var(--kr-border) !important;
  border-radius: 6px;
}

.table-responsive {
  background: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--kr-text) !important;
}

p {
  color: var(--kr-text);
}

.btn-default {
  background: var(--kr-surface2) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.btn-default:hover {
  background: var(--kr-bg3) !important;
  color: #fff !important;
}

.model-list .btn-toolbar {
  background: transparent !important;
}

.nav-pills .nav-link {
  color: var(--kr-text-muted) !important;
}

.nav-pills .nav-link.active {
  background: var(--kr-purple) !important;
  color: #fff !important;
}

.fa-filter-form,
.fa-filter-form .form-group,
.model-list .panel,
.panel {
  background: var(--kr-surface) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.panel-heading, .panel-default > .panel-heading {
  background: var(--kr-surface2) !important;
  border-color: var(--kr-border) !important;
  color: var(--kr-text) !important;
}

.panel-body {
  background: var(--kr-surface) !important;
}

/* ── Suppress Flask-Admin defaults ── */
.navbar { display: none !important; }
.container, .container-fluid { padding: 0 !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; }

/* ── KR Component Library ── */
.card { padding: 1.5rem !important; }
.section-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 1rem !important; }
.section-head h2 { font-size: .95rem !important; font-weight: 700 !important; margin: 0 !important; }

.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table-wrap thead th { text-align: left !important; font-size: .67rem !important; font-weight: 700 !important; letter-spacing: .8px !important; text-transform: uppercase !important; color: var(--text3) !important; padding: .55rem 1rem !important; border-bottom: 1px solid var(--border) !important; background: none !important; }
.table-wrap tbody tr { border-bottom: 1px solid var(--bg3) !important; transition: background .1s; }
.table-wrap tbody tr:last-child { border-bottom: none !important; }
.table-wrap tbody tr:hover { background: var(--bg3) !important; }
.table-wrap td { padding: .65rem 1rem !important; vertical-align: middle !important; border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 1px solid var(--bg3) !important; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.stat-card { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 1.2rem 1.4rem !important; position: relative; overflow: hidden; box-shadow: none !important; }
.stat-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--acc, var(--purple)) 0%, transparent 60%); opacity: .07; pointer-events: none; }
.stat-card .label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text3); margin-bottom: .35rem; }
.stat-card .value { font-size: 2rem; font-weight: 800; line-height: 1; }
.stat-card.green  { --acc: var(--green); }  .stat-card.green .value  { color: var(--green); }
.stat-card.purple { --acc: var(--purple); } .stat-card.purple .value { color: var(--purple-l); }
.stat-card.teal   { --acc: var(--teal); }   .stat-card.teal .value   { color: var(--teal); }
.stat-card.yellow { --acc: var(--yellow); } .stat-card.yellow .value { color: var(--yellow); }
.stat-card.red    { --acc: var(--red); }    .stat-card.red .value    { color: var(--red); }

.grid-2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1rem; }

.btn-ghost { background: var(--bg4) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.btn-ghost:hover { background: var(--bg3) !important; border-color: var(--purple) !important; color: var(--text) !important; }
.btn-green { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.btn-red   { background: var(--red) !important;   border-color: var(--red) !important;   color: #fff !important; }

.flex { display: flex !important; }
.gap-1 { gap: .5rem !important; }
.items-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }
.ml-auto { margin-left: auto !important; }
</style>
<script>window.KR = window.KR || {};</script>
{% endblock %}

{% block brand %}
<a class="navbar-brand" href="/admin/">
  <img src="/static/kittyrec_icon.png" alt="KittyRec">
  <span>
    KittyRec
    <span class="brand-sub">Admin Panel</span>
  </span>
</a>
{% endblock %}

{% block access_control %}
<div class="kr-nav-right">
  <span class="nav-online-pill" id="nav-online-badge">
    <span class="dot"></span>
    <span id="nav-online-count">0</span> online
  </span>
  <a href="/admin/logout" class="btn btn-logout">Logout</a>
</div>
{% endblock %}

{% block tail %}
{{ super() }}
<script src="/static/admin/admin.js"></script>
<script>
(function() {
  function upd() {
    fetch('/admin/api/public_stats').then(r => r.json()).then(d => {
      const el = document.getElementById('sb-online-count');
      if (el) el.textContent = d.online || 0;
    }).catch(() => {});
  }
  upd(); setInterval(upd, 30000);
})();
(function () {
    var BAN_META = {
        'ban_1h':   { label: '1 hour',      confirm: 'Ban selected players for 1 hour?' },
        'ban_day':  { label: '1 day',        confirm: 'Ban selected players for 24 hours?' },
        'ban_week': { label: '1 week',       confirm: 'Ban selected players for 1 week?' },
        'permaban': { label: 'permanently',  confirm: 'Permanently ban selected players?' },
    };

    document.addEventListener('click', function (e) {
        var el = e.target.closest('[onclick]');
        if (!el) return;

        var onclick = el.getAttribute('onclick') || '';
        var action = null;
        for (var key in BAN_META) {
            if (onclick.indexOf("'" + key + "'") !== -1 || onclick.indexOf('"' + key + '"') !== -1) {
                action = key;
                break;
            }
        }
        if (!action) return;

        e.preventDefault();
        e.stopImmediatePropagation();

        var meta = BAN_META[action];
        var reason = prompt('Reason for banning ' + meta.label + ':');
        if (reason === null) return;
        if (!confirm(meta.confirm)) return;

        var form = document.getElementById('action-form') || document.getElementById('action_form');
        if (!form) return;

        var old = form.querySelector('input[name="ban_reason"]');
        if (old) old.parentNode.removeChild(old);

        var inp = document.createElement('input');
        inp.type = 'hidden';
        inp.name = 'ban_reason';
        inp.value = reason.trim() || 'Admin ban';
        form.appendChild(inp);

        var actionInp = form.querySelector('input[name="action"]');
        if (actionInp) actionInp.value = action;
        form.submit();
    }, true);
})();

(function () {
    function fetchOnline() {
        fetch('/admin/api/public_stats').then(function(r) { return r.json(); }).then(function(d) {
            var count = document.getElementById('nav-online-count');
            if (count) {
                count.textContent = d.online || 0;
            }
        }).catch(function() {});
    }
    fetchOnline();
    setInterval(fetchOnline, 30000);
})();
</script>
{% endblock %}