/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ──
   "Command deck": neutral graphite with a red authority accent. Deliberately
   unlike every other XS script — trucking is amber/teal industrial, the
   drugs ops console is graphite/cyan — because staff tooling should never be
   mistakable for player tooling at a glance.

   The base was previously blue-tinted slate (#07090f / #111827 / #1a2236).
   It's now neutral, so red reads as the only chromatic signal on screen
   instead of competing with a blue cast.

   ── On red being both accent and danger ──
   Hue alone can't separate them here, so they're separated by WEIGHT:
   accents are thin bars, subtle tints and outlines; destructive actions get
   solid fills and full-strength borders. A filled red button always means
   "this destroys something"; a red hairline never does. */
:root {
    --bg-base:      #0b0c0e;
    --bg-card:      #121316;
    --bg-panel:     #17181c;
    --bg-elevated:  #1e2025;
    --bg-input:     #0e0f12;
    --border:       rgba(255,255,255,0.07);
    --border-light: rgba(255,255,255,0.12);

    /* Brand / chrome. Used for nav state, focus rings, headings. */
    --accent:       #f5a524;
    --accent-dim:   rgba(245,165,36,0.14);
    --accent-glow:  rgba(245,165,36,0.35);

    /* Semantic status colours — kept distinct from the accent so "online"
       and "warning" still mean what they always meant. */
    --amber:        #f5a524;
    --amber-dim:    rgba(245,165,36,0.15);
    --red:          #ff5a5f;
    --red-dim:      rgba(255,90,95,0.16);
    --green:        #30d158;
    --green-dim:    rgba(48,209,88,0.15);
    --blue:         #4c9aff;
    --blue-dim:     rgba(76,154,255,0.15);

    --text-primary: #f2f3f5;
    --text-secondary: #9aa0a8;
    --text-muted:   #5c626b;

    --font-display: 'Saira', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    --sidebar-w:    220px;
    --topbar-h:     52px;
    --radius:       8px;
    --radius-sm:    5px;
}

/* Display face for anything that names a thing: headings, titles, the logo,
   nav labels. Body copy and long text stay on Inter for readability. */
.section-title, .panel-title, #topbar-title, .logo-text,
.self-section-title, .profile-name, .card-title, .stat-value, .modal-title {
    font-family: var(--font-display);
    letter-spacing: 0.2px;
}

/* Numbers, ids, coordinates, plates, timestamps — anything that benefits
   from fixed advance width. */
.text-mono, .profile-cid, .stat-number, .sa-state,
.leaderboard-meta, td.text-sm, .badge {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ── Icons ──
   Inline SVGs need an explicit box: with no width/height they fall back to
   the 300x150 replaced-element default and swallow whatever contains them.
   flex-shrink:0 stops them being squashed when a label wraps beside them. */
.ca-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -2px;
}

/* Buttons put the icon and its label on a shared baseline with one gap rule,
   rather than each button template managing its own spacing. */
.btn { display: inline-flex; align-items: center; gap: 6px; }
.btn .ca-icon { width: 14px; height: 14px; }
.btn-xs .ca-icon, .btn-sm .ca-icon { width: 13px; height: 13px; }

.nav-icon { display: inline-flex; align-items: center; justify-content: center; }
.nav-icon .ca-icon { width: 16px; height: 16px; }

/* Activity rows use a slightly larger icon as a leading visual anchor. */
.activity-icon .ca-icon { width: 16px; height: 16px; }

/* ── Command-deck chrome ──
   Layered above the base rules so these override the originals regardless of
   where those sit in the file. */

/* Sidebar sits above the wrapper's gradient/scanline pseudo-elements. */
#admin-sidebar, #admin-main { position: relative; z-index: 1; }

/* Active nav gets a solid accent bar on its leading edge — the "you are here"
   marker is structural, not just a background tint. */
#admin-nav .nav-item {
    position: relative;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: background .12s, color .12s;
}
#admin-nav .nav-item::before {
    content: '';
    position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 2px; border-radius: 0 2px 2px 0;
    background: transparent;
    transition: background .12s;
}
#admin-nav .nav-item.active::before { background: var(--accent); }
#admin-nav .nav-item.active {
    background: var(--accent-dim);
    color: var(--text-primary);
}
#admin-nav .nav-item.active .ca-icon { color: var(--accent); }

/* Uppercase mono section labels — the "systems console" cue. */
.self-section-title, .section-sub, .profile-section-title {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-size: 10px;
    color: var(--text-muted);
}

/* Topbar reads as a status strip rather than a page header. */
#admin-topbar {
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-panel), var(--bg-base));
}
#topbar-title { text-transform: uppercase; letter-spacing: 1.4px; font-size: 12px; }
#topbar-right { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

/* Live status LED next to the server name, mirroring the drugs ops console. */
#sidebar-server-name::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    margin-right: 6px;
    vertical-align: middle;
}

/* Logo mark picks up the accent so the brand and the system colour agree. */
.logo-mark { color: var(--accent); }
.logo-text span { color: var(--accent); }

/* Destructive = FILLED. This is the whole basis for telling danger apart from
   the accent, since they share a hue — see the token block for the reasoning. */
.btn-danger {
    background: var(--red);
    border-color: var(--red);
    color: #14090a;
    font-weight: 600;
}
.btn-danger:hover { filter: brightness(1.1); }

/* Accent buttons stay outline-weight so they never read as destructive. */
.btn-primary {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-primary:hover { background: var(--accent-glow); color: var(--text-primary); }

/* Focus is visible and accent-coloured — this panel gets driven quickly. */
.input:focus, .select:focus, .btn:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* ── Self action cards (extended) ── */
.self-section { margin-bottom: 4px; }

/* Toggle cards carry their state as a corner pill so ON/OFF is readable
   without relying on the active border alone. */
.sa-state {
    position: absolute; top: 8px; right: 8px;
    font-size: 9px; font-weight: 700; letter-spacing: .6px;
    padding: 2px 6px; border-radius: 3px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}
.self-action-card.active .sa-state {
    background: var(--accent-dim);
    color: var(--accent);
}

/* Destructive actions are tinted at rest, not just on hover — these delete
   things and shouldn't look identical to Heal. */
/* These cards are <button>s, so they inherit the UA's default black button
   text. The old emoji icons ignored `color` entirely, which hid it — the SVGs
   stroke with currentColor and rendered black-on-black. Set it explicitly. */
.self-action-card .sa-icon { color: var(--text-secondary); }
.self-action-card.active .sa-icon { color: var(--accent); }

.self-action-card.danger .sa-icon { color: var(--red); }
.self-action-card.danger:hover {
    border-color: var(--red);
    background: var(--red-dim);
}

/* ── Base ── */
html, body {
    width: 100%; height: 100%;
    background: transparent;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    user-select: none;
}

.hidden { display: none !important; }

/* ── Overlay ── */
#admin-overlay {
    position: fixed; inset: 0;
    display: flex;
    justify-content: flex-end;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    cursor: default;
}

/* Click-outside zone */
#admin-overlay::before {
    content: '';
    flex: 1;
    cursor: pointer;
}

/* ── Admin Wrapper (the actual panel) ── */
#admin-wrapper {
    position: relative;
    width: 80vw;
    max-width: 1360px;
    display: flex;
    height: 100vh;
    background: var(--bg-base);
    box-shadow: -8px 0 60px rgba(0,0,0,0.8);
    animation: slideInRight 0.22s cubic-bezier(0.16,1,0.3,1);
    /* A single lit edge where the drawer meets the game. Reads as a panel
       that has been slid open rather than a page that happens to be there. */
    border-left: 1px solid var(--accent);
}

/* Faint scanlines, matching the treatment in `XS-CriminalTablet` and XS-Trucking so
   the suite shares a texture even where the palettes differ. Non-interactive
   and very low contrast — it should register as screen grain, not stripes. */
#admin-wrapper::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.13) 2px 4px);
    pointer-events: none;
    z-index: 50;
}

/* Accent wash bleeding in from the leading edge, so the eye starts at the
   sidebar rather than in the middle of the content area. */
#admin-wrapper::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(60% 50% at 0% 0%, var(--accent-dim), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

@keyframes slideInRight {
    from { transform: translateX(6%); opacity: 0; }
    to   { transform: translateX(0);  opacity: 1; }
}

/* ── Sidebar ── */
#admin-sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--border);
}

.logo-mark {
    font-size: 22px;
    color: var(--accent);
    line-height: 1;
}

.logo-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.logo-text span { color: var(--accent); }

/* Admin badge in sidebar */
#sidebar-admin-badge {
    margin: 12px 12px 4px;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
}

#sidebar-admin-badge .badge-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

#sidebar-admin-badge .badge-role {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
}

/* Nav */
#admin-nav {
    list-style: none;
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
}

#admin-nav::-webkit-scrollbar { width: 3px; }
#admin-nav::-webkit-scrollbar-track { background: transparent; }
#admin-nav::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    position: relative;
    transition: all 0.15s;
    border-radius: 0;
}

.nav-item:hover { color: var(--text-primary); background: var(--bg-elevated); }

.nav-item.active {
    color: var(--accent);
    background: var(--accent-dim);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}

.nav-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.nav-label { flex: 1; }

.nav-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
    min-width: 18px;
    text-align: center;
}

.nav-badge.danger { background: var(--red-dim); color: var(--red); }
.nav-badge:empty { display: none; }

.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 12px;
}

#sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#sidebar-server-name {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.5px;
}

#btn-close-admin {
    width: 100%;
    padding: 7px;
    background: var(--red-dim);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: var(--radius-sm);
    color: var(--red);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.3px;
}

#btn-close-admin:hover { background: var(--red); color: #fff; }

/* ── Main Area ── */
#admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    overflow: hidden;
}

/* Top bar */
#admin-topbar {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

#topbar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

#topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

#topbar-player-count {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--green);
    font-weight: 600;
}

#topbar-player-count::before {
    content: '●';
    font-size: 8px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Content */
#admin-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.panel {
    display: none;
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 20px;
}

.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

.panel.active { display: block; }

/* ── Common Components ── */

/* Section header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* Stat cards */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s;
}

.stat-card:hover { border-color: var(--border-light); }

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-value.accent { color: var(--accent); }
.stat-value.green  { color: var(--green); }
.stat-value.amber  { color: var(--amber); }
.stat-value.red    { color: var(--red); }

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}

.card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #4f51d9; }

.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-light); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-elevated); }

.btn-danger { background: var(--red-dim); color: var(--red); border-color: rgba(239,68,68,0.2); }
.btn-danger:hover { background: var(--red); color: #fff; }

.btn-sm { padding: 4px 10px; font-size: 11px; }

/* Inputs */
.input, .select {
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12.5px;
    padding: 7px 10px;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    font-family: inherit;
}

.input:focus, .select:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text-muted); }
.select option { background: var(--bg-panel); }

.form-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.form-row label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 80px;
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Search bar */
.search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

/* Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table td {
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tr:hover td {
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
}

.data-table .td-name { color: var(--text-primary); font-weight: 600; }

/* Badges / pills */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.badge-green   { background: var(--green-dim);  color: var(--green); }
.badge-red     { background: var(--red-dim);    color: var(--red); }
.badge-amber   { background: var(--amber-dim);  color: var(--amber); }
.badge-muted   { background: var(--bg-elevated); color: var(--text-muted); }

/* Status dot */
.status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.status-dot.online  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.offline { background: var(--text-muted); }
.status-dot.warn    { background: var(--amber); }

/* Ping indicator */
.ping-good   { color: var(--green); }

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    color: var(--text-muted);
    gap: 8px;
}

.empty-icon { font-size: 32px; opacity: 0.4; }

/* ── Dashboard ── */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Quick actions */
.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ── Player List ── */
.player-list-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Player Profile Panel */
#player-profile-panel {
    width: 320px;
    min-width: 320px;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#player-profile-panel::-webkit-scrollbar { width: 3px; }
#player-profile-panel::-webkit-scrollbar-thumb { background: var(--border-light); }

#player-profile-inner { padding: 16px; }

/* ── Vehicle Spawner ── */
.spawner-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    height: calc(100vh - var(--topbar-h) - 40px);
}
.category-btn.active { background: var(--accent-dim); color: var(--accent); font-weight: 700; }

/* ── Inventory Viewer ── */
.inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    padding: 12px;
}
.inv-slot.empty { opacity: 0.3; cursor: default; }
.inv-slot.empty:hover { border-color: var(--border); background: var(--bg-elevated); }

/* ── Bans ── */
.ban-row { cursor: pointer; }

/* ── Permissions ── */
.perm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Toggle switch */
.toggle {
    position: relative;
    width: 32px; height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle input { display: none; }

.toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }

.toggle input:checked ~ .toggle-thumb {
    left: 17px;
    background: #fff;
}

/* ── Audit Log ── */
.audit-table .td-action { font-weight: 700; color: var(--text-primary); }

/* ── Announcement overlay ── */
#announcement-overlay {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
}

#announcement-box {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 16px 24px;
    min-width: 320px;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

#announcement-icon { font-size: 24px; margin-bottom: 6px; }
#announcement-from { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
#announcement-msg  { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* ── Modal ── */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    width: 420px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.modal::-webkit-scrollbar { width: 3px; }
.modal::-webkit-scrollbar-thumb { background: var(--border-light); }

.modal-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-title { font-size: 13.5px; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; }
.modal-close:hover { color: var(--red); }

.modal-body { padding: 16px; flex: 1; }
.modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* ── Scrollbar global ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

/* ── Tooltip ── */
[data-tip] { position: relative; }
[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%; transform: translateX(-50%);
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 999;
    pointer-events: none;
}

/* ── Self Actions ── */
.self-section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin: 18px 0 8px;
}
.self-action-card.active { border-color: var(--green); background: var(--green-dim); }

/* ── Admin Chat ── */
.chat-msg {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

/* ── Utility ── */
.flex     { display: flex; }
.text-muted { color: var(--text-muted); }
.text-sm    { font-size: 11px; }

/* ── Resource Manager ── */
.res-state-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* ── Reports ── */
.report-status-open      { color: var(--amber); }

/* ── Notes tooltip dot in player list ── */
.note-dot {
    font-size: 11px;
    cursor: default;
    opacity: 0.7;
}

/* ── DM overlay ── */
#dm-overlay {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 9999;
    pointer-events: none;
}

#dm-box {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 18px;
    min-width: 260px;
    max-width: 340px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    animation: slideInRight 0.25s ease;
}

@keyframes slideInRight {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ── Announcement countdown ── */
#announcement-countdown {
    font-size: 28px;
    font-weight: 700;
    color: var(--amber);
    margin-top: 8px;
}

/* ── Favorites section ── */
#sa-favorites-wrap {
    margin-bottom: 16px;
}

/* ── btn-amber ── */
.btn-amber {
    background: var(--amber);
    color: #000;
    border: none;
}

/* ── Stats Panel ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

/* ── Entity Inspector ── */
.hp-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 4px;
}

/* ── Threat Detection ──
   The panel shows two kinds of thing that must not look alike: what the server
   proved, and what the client claimed. Severity carries the usual semantic
   colours, and anything advisory is marked in the row itself rather than left
   to the reader to remember which detections come from where. */

.threat-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
}
.threat-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Status notes. These use the hairline-accent weight deliberately: a config
   warning is information, not a destructive action, so it never gets a fill. */
.threat-note {
    border-left: 2px solid var(--border-light);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.threat-note strong { color: var(--text-primary); }

/* Advisory marker — client-reported, therefore spoofable. */
.threat-advisory {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Flash on a live-pushed row so a flag arriving while the panel is open is
   noticed rather than silently changing the row order. */
.threat-new { animation: threat-flash 2.5s ease-out; }
@keyframes threat-flash {
    0%   { background: var(--accent-dim); }
    100% { background: transparent; }
}

/* ── Linked accounts ── */
.linked-card {
    border: 1px solid var(--border);
    border-left: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    padding: 8px 12px;
    margin-bottom: 8px;
}

.mono { font-family: var(--font-mono); font-size: 11px; }

/* ── Theme options (Config.Theme) ──
   The accent, drawer width and backdrop dim are applied as inline custom
   properties at runtime — no rules needed here, because the whole design
   already reads --accent. These two need real rules because they toggle a
   pseudo-element and add a mirrored animation. */

#admin-wrapper.no-scanlines::after { display: none; }

@keyframes slideInLeft {
    from { transform: translateX(-40px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* ── Icon sizing in the contexts that used to hold emoji ──
   Emoji sized themselves off font-size; SVGs do not, so each of these slots
   needs a real dimension or it falls back to the 300x150 replaced-element
   default and swallows its container. */

.empty-icon .ca-icon    { width: 30px; height: 30px; }
.modal-close .ca-icon   { width: 14px; height: 14px; }

/* ── Searchable picker ──
   Used by Give Weapon. A scrolling list of clickable rows rather than a
   <select>: a server's weapon list can run to hundreds of entries, and a
   native dropdown gives you no search and no room for the spawn name. */
.picker-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
}

/* Spawn name under the readable vehicle name, when they differ. */
.veh-model { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono), monospace; }

/* ── Settings ── */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    align-items: start;
}

/* ── Item spawner ── */
.inv-item-sub { font-size: 9px; color: var(--text-muted); text-align: center; line-height: 1.2; }

/* Confirmation lands on the tile rather than in a dialog — spawning items is
   repetitive and a modal every time would be in the way. */
.inv-slot-ok,
.inv-slot-fail { transition: background .15s, box-shadow .15s; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD HERO + POLISH
   ══════════════════════════════════════════════════════════════════════════ */

.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 20px 22px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(120% 160% at 0% 0%, var(--accent-dim), transparent 60%),
        linear-gradient(180deg, var(--bg-elevated), var(--bg-panel));
    position: relative;
    overflow: hidden;
}
/* A lit edge along the top, brightest where the accent glow sits. */
.dash-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent 55%);
}

/* Stat tiles that navigate should look like it. */
.stat-clickable { cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s; }

/* ── Panel presence ──
   The nav marks the active item with a bar; these give the same treatment to
   the content, so a panel reads as a place rather than a list on a background. */
.stat-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-panel));
}
.stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(90% 120% at 100% 0%, var(--accent-dim), transparent 55%);
    opacity: .5;
}
.stat-card > * { position: relative; z-index: 1; }

.card-header { border-bottom: 1px solid var(--border); }
.card-title  { letter-spacing: .01em; }

/* Buttons pick up a little depth on press rather than only on hover. */
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 0 0 0 var(--accent-glow); transition: box-shadow .18s, transform .12s; }
.btn-primary:hover { box-shadow: 0 4px 18px -6px var(--accent-glow); }

/* Table rows: a lit leading edge on hover instead of only a background shift. */
.data-table tbody tr { transition: background .12s, box-shadow .12s; }
.data-table tbody tr:hover { box-shadow: inset 2px 0 0 var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .capacity-fill, .stat-clickable, .btn, .btn-primary, .data-table tbody tr { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Airdrops components

   The rest of this stylesheet came from XS-AdminMenu so the two panels look
   like the same product. These are the pieces airdrops needs that XS-AdminMenu
   never had a use for — panel headers with a subtitle, inline alerts, labelled
   form fields, toasts and the loot-tier dot.

   Everything below uses the variables defined at the top of the file, so
   changing the accent there changes these too.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Panel headers ──────────────────────────────────────────────────────── */
.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--border);
}
.panel-subtitle {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-secondary);
    max-width: 68ch;
    line-height: 1.5;
}
.panel-actions { display: flex; gap: 8px; flex-shrink: 0; }
.panel-body { padding: 22px 26px 32px; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 7px;
    font-size: 12.5px;
    line-height: 1.55;
    border: 1px solid transparent;
}
.alert-info   { background: var(--blue-dim);  border-color: rgba(76,154,255,.25);  color: var(--text-secondary); }
.alert-warn   { background: var(--amber-dim); border-color: rgba(245,165,36,.28);  color: var(--text-secondary); }

/* ── Form fields ────────────────────────────────────────────────────────── */
.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.form-hint {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
}
.checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.checkbox input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
/* Wide tables scroll inside their own box rather than pushing the panel out. */
.data-table-wrap { overflow-x: auto; }

/* A disabled row still has to be readable — it is dimmed, not hidden, because
   the reason someone is looking at it is usually to turn it back on. */
.row-muted { opacity: .48; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.accent-border { border-left: 2px solid var(--accent); }

/* ── Empty states ───────────────────────────────────────────────────────── */
.empty-title    { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.empty-subtitle { margin-top: 5px; font-size: 12px; color: var(--text-muted); }

/* ── Text ───────────────────────────────────────────────────────────────── */
.text-secondary { color: var(--text-secondary); }
.text-warn      { color: var(--amber); }

/* ── Loot tier dot ──────────────────────────────────────────────────────── */
/* The tier colour is set inline from the database, so only shape lives here. */
.tier-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
}

/* ── Toasts ─────────────────────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    top: 18px;
    right: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    z-index: 3000;
    pointer-events: none;
}
.toast {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    min-width: 260px;
    max-width: 380px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-input);
    color: var(--text-secondary);
}
.toast.success .toast-icon { background: var(--green-dim); color: var(--green); }
.toast.error   .toast-icon { background: var(--red-dim);   color: var(--red); }
.toast.warning .toast-icon { background: var(--amber-dim); color: var(--amber); }
.toast-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.toast-body  { margin-top: 2px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

/* ── Settings rows ──────────────────────────────────────────────────────── */
/* Label and help on the left, the control on the right. Each row saves on its
   own, so there is no form to submit and no Save button to hunt for. */
.setting-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }

.setting-meta { flex: 1; min-width: 0; }
.setting-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.setting-meta .form-hint { margin-top: 4px; max-width: 62ch; }

.setting-control {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.setting-input { display: flex; align-items: center; gap: 6px; }
.setting-input .input { width: 96px; text-align: right; }
.setting-unit { font-size: 11.5px; color: var(--text-muted); }