/* ── 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:       #e5484d;
    --accent-dim:   rgba(229,72,77,0.14);
    --accent-glow:  rgba(229,72,77,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; }
.note-dot .ca-icon { width: 12px; height: 12px; vertical-align: -1px; }

/* ── 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 { position: relative; }
.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:hover .sa-icon { color: var(--text-primary); }
.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);
}

.self-action-card .sa-icon .ca-icon { width: 20px; height: 20px; }

/* ── 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;
}

.section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.section-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* 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); }

.stat-change {
    font-size: 11px;
    color: var(--text-muted);
}

/* 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;
}

.card-body { padding: 16px; }

/* 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-success { background: var(--green-dim); color: var(--green); border-color: rgba(16,185,129,0.2); }
.btn-success:hover { background: var(--green); color: #fff; }

.btn-amber { background: var(--amber-dim); color: var(--amber); border-color: rgba(245,158,11,0.2); }
.btn-amber:hover { background: var(--amber); color: #000; }

.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-xs { padding: 3px 8px; font-size: 10.5px; }
.btn-icon { padding: 5px 8px; }

/* 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;
}

.search-wrap {
    position: relative;
    flex: 1;
}

.search-icon {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.search-input {
    padding-left: 30px !important;
}

/* 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-accent  { background: var(--accent-dim); color: var(--accent); }
.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); }
.ping-medium { color: var(--amber); }
.ping-bad    { color: var(--red); }

/* 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; }
.empty-text { font-size: 13px; }

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

.dash-grid-wide { grid-column: 1 / -1; }

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.activity-item:last-child { border-bottom: none; }

.activity-icon {
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.activity-body { flex: 1; }
.activity-action { color: var(--text-primary); font-weight: 600; }
.activity-detail { color: var(--text-muted); font-size: 11px; margin-top: 1px; }
.activity-time { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }

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

.quick-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    transition: all 0.15s;
    font-family: inherit;
}

.quick-btn:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.quick-btn .qb-icon { font-size: 15px; }

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

.player-actions-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* 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; }

.profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.profile-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent-dim);
    border: 2px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.profile-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.profile-cid  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.profile-section { margin-bottom: 14px; }

.profile-section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.profile-row:last-child { border-bottom: none; }
.profile-row-label { color: var(--text-muted); }
.profile-row-value { color: var(--text-primary); font-weight: 600; text-align: right; }

.profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
}

/* ── Vehicle Spawner ── */
.spawner-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    height: calc(100vh - var(--topbar-h) - 40px);
}

.spawner-categories {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-y: auto;
    padding: 8px;
}

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

.category-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.category-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.category-btn.active { background: var(--accent-dim); color: var(--accent); font-weight: 700; }

.spawner-vehicles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

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

.vehicle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.vehicle-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.vehicle-card:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.vehicle-card .veh-icon { font-size: 22px; }
.vehicle-card .veh-name {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Inventory Viewer ── */
.inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    padding: 12px;
}

.inv-slot {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 70px;
    position: relative;
}

.inv-slot:hover { border-color: var(--accent); background: var(--accent-dim); }
.inv-slot.empty { opacity: 0.3; cursor: default; }
.inv-slot.empty:hover { border-color: var(--border); background: var(--bg-elevated); }

.inv-item-icon { font-size: 20px; }
.inv-item-name { font-size: 9.5px; color: var(--text-secondary); text-align: center; line-height: 1.2; font-weight: 600; }
.inv-item-count {
    position: absolute;
    bottom: 4px; right: 5px;
    font-size: 9px;
    color: var(--accent);
    font-weight: 700;
}

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

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

.perm-role-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.perm-role-header {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}

.perm-role-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.perm-role-label { font-weight: 700; font-size: 13px; }

.perm-list { padding: 8px 0; }

.perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.perm-row:last-child { border-bottom: none; }
.perm-name { color: var(--text-secondary); }

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

.toggle input { display: none; }

.toggle-track {
    position: absolute; inset: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 9px;
    transition: all 0.2s;
}

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

.toggle-thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 10px; height: 10px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.2s;
}

.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-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 4px;
}

.self-action-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 12px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-family: inherit;
    text-align: left;
}

.self-action-card:hover { border-color: var(--accent); background: var(--accent-dim); }
.self-action-card.active { border-color: var(--green); background: var(--green-dim); }
.self-action-card.active-red { border-color: var(--red); background: var(--red-dim); }

.self-action-card .sa-icon { font-size: 20px; }
.self-action-card .sa-label { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.self-action-card .sa-desc  { font-size: 10.5px; color: var(--text-muted); }

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

/* ── 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;
}

.chat-sender {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
}

.chat-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
    margin-top: -16px;
}

.chat-text {
    font-size: 12.5px;
    color: var(--text-primary);
    word-break: break-word;
}

/* ── Utility ── */
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-8    { gap: 8px; }
.gap-4    { gap: 4px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.text-muted { color: var(--text-muted); }
.text-sm    { font-size: 11px; }
.font-bold  { font-weight: 700; }
.w-full     { width: 100%; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ── 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); }
.report-status-claimed   { color: var(--blue, #60a5fa); }
.report-status-responded { color: var(--green); }
.report-status-closed    { color: var(--text-muted); }

/* ── 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;
}
.btn-amber:hover { opacity: 0.85; }

/* ── 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;
}
.hp-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

/* ── 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 {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 8px 14px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.threat-tab:hover  { color: var(--text-primary); }
.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); }
.threat-note-red    { border-left-color: var(--red);   background: var(--red-dim); }
.threat-note-amber  { border-left-color: var(--amber); background: var(--amber-dim); }
.threat-note-muted  { border-left-color: var(--border-light); }

.threat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}

/* 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;
}

.threat-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.threat-handled { opacity: 0.45; }

/* 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;
}
.linked-card.linked-banned { border-left-color: var(--red); }

.linked-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.linked-name {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
}
.linked-meta {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.modal-section-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.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; }
.inv-item-icon .ca-icon { width: 20px; height: 20px; }
.profile-avatar .ca-icon{ width: 20px; height: 20px; color: var(--accent); }
.ca-icon.qb-icon        { width: 16px; height: 16px; }
.td-icon                { text-align: center; }
.td-icon .ca-icon       { width: 15px; height: 15px; color: var(--text-secondary); }
.modal-close .ca-icon   { width: 14px; height: 14px; }
.self-action-card .sa-desc.pinned { color: var(--amber); font-size: 10px; }

/* ── 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);
}
.picker-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.picker-row:last-child { border-bottom: 0; }
.picker-row:hover { background: var(--bg-hover); }
.picker-row.is-selected {
    background: var(--accent-dim);
    box-shadow: inset 2px 0 0 var(--accent);
}
.picker-label { font-size: 13px; color: var(--text-primary); }
.picker-sub   { font-size: 11px; color: var(--text-muted); }
.picker-empty { padding: 14px 12px; font-size: 12px; color: var(--text-muted); text-align: center; }

/* 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;
}
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    background: var(--sw);
    cursor: pointer;
    padding: 0;
    transition: transform .12s, border-color .12s, box-shadow .12s;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.is-active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-base), 0 0 14px var(--sw);
}
.range {
    width: 100%;
    accent-color: var(--accent);
    background: transparent;
    cursor: pointer;
}

/* ── 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; }
.inv-slot-ok   { background: rgba(48,209,88,.16);  box-shadow: inset 0 0 0 1px var(--green); }
.inv-slot-fail { background: rgba(229,72,77,.16);  box-shadow: inset 0 0 0 1px var(--red); }

/* ══════════════════════════════════════════════════════════════════════════
   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%);
}
.dash-greet {
    font-family: var(--font-display), inherit;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.dash-server {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 3px;
}
.dash-hero-right { min-width: 220px; }
.dash-capacity-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-family: var(--font-mono), monospace;
}
.capacity-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-base);
    overflow: hidden;
    border: 1px solid var(--border);
}
.capacity-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ffffff));
    box-shadow: 0 0 12px var(--accent-glow);
    transition: width .5s cubic-bezier(.22,.61,.36,1);
}

/* Stat tiles that navigate should look like it. */
.stat-clickable { cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s; }
.stat-clickable:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 8px 22px -10px var(--accent-glow);
}

/* ── 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; }

.section-title {
    position: relative;
    padding-left: 11px;
}
.section-title::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 15px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

.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; }
}