/* ============================================
   KOTT Admin Dashboard — Design System
   True black + frosted glass + cyan accent
   ============================================ */

/* --- Design Tokens --- */
:root {
    /* Backgrounds */
    --bg-primary: #000000;
    --bg-panel: rgba(8, 12, 18, 0.65);
    --bg-panel-solid: #060a10;
    --bg-elevated: rgba(12, 18, 26, 0.7);
    --bg-hover: rgba(0, 224, 255, 0.04);
    --bg-input: rgba(0, 0, 0, 0.5);

    /* Text */
    --text-primary: #e8eaed;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --text-muted: #7a8493; /* 2026-05-06 — bumped from #3b4252 (1.94:1 → 5.58:1 vs #000) for WCAG AA at body text. */

    /* Accent — Cyan */
    --accent: #00e0ff;
    --accent-hover: #33e8ff;
    --accent-dim: rgba(0, 224, 255, 0.12);
    --accent-glow: rgba(0, 224, 255, 0.25);
    --link: #00e0ff;
    --link-hover: #33e8ff;

    /* Semantic */
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;

    /* Borders — hairline, transparent white */
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-accent: rgba(0, 224, 255, 0.15);
    --border-accent-strong: rgba(0, 224, 255, 0.35);

    /* Tier colors */
    --tier-iron: #5c6370;
    --tier-bronze: #cd7f32;
    --tier-silver: #c0c8d4;
    --tier-gold: #ffd166;
    --tier-platinum: #7ee8fa;
    --tier-diamond: #b9f2ff;
    --tier-champion: #00e0ff;

    /* Fonts */
    --font-display: 'Rajdhani', 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* --- Fallback for no backdrop-filter --- */
@supports not (backdrop-filter: blur(1px)) {
    :root { --bg-panel: var(--bg-panel-solid); --bg-elevated: #0a0e14; }
}

/* --- Reset & Base --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); font-size: 14px; line-height: 1.5; }
a { color: var(--link); text-decoration: none; transition: color 0.12s ease; }
a:hover { color: var(--link-hover); }

/* --- Layout --- */
.admin-shell { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: rgba(4, 6, 10, 0.8); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; position: fixed; top: 0; bottom: 0; overflow-y: auto; z-index: 100; }
.sidebar-brand { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--accent); margin-bottom: 20px; padding: 8px 12px; letter-spacing: 1px; }
.sidebar a, .sidebar a:visited { color: var(--text-tertiary); text-decoration: none; padding: 8px 12px; border-radius: 4px; display: block; font-family: var(--font-display); font-size: 13px; font-weight: 600; transition: all 0.12s ease; text-transform: uppercase; letter-spacing: 0.5px; }
.sidebar a:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar a.active { background: var(--accent-dim); color: var(--accent); }
.sidebar-spacer { flex: 1; }
.sidebar-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.4); padding: 16px 20px 4px; }
.sidebar-logout { margin-top: auto; color: var(--text-tertiary) !important; border-top: 1px solid var(--border); padding-top: 12px !important; font-size: 12px !important; }
.content { flex: 1; padding: 28px 32px; margin-left: 220px; max-width: 1100px; }

/* --- Typography --- */
h1 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; letter-spacing: 0.5px; }
h2 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-secondary); margin: 24px 0 12px; text-transform: uppercase; letter-spacing: 0.5px; }
h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }

/* --- Status Badges — thin border + tinted bg --- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 4px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid; }
.badge-online { background: rgba(52, 211, 153, 0.08); color: var(--success); border-color: rgba(52, 211, 153, 0.2); }
.badge-offline { background: rgba(248, 113, 113, 0.08); color: var(--danger); border-color: rgba(248, 113, 113, 0.2); }
.badge-provisioning { background: rgba(251, 191, 36, 0.08); color: var(--warning); border-color: rgba(251, 191, 36, 0.2); }
.badge-failed { background: rgba(248, 113, 113, 0.1); color: var(--danger); border-color: rgba(248, 113, 113, 0.2); animation: pulse-badge 2s infinite; }
.badge-unknown { background: rgba(107, 114, 128, 0.08); color: var(--text-secondary); border-color: rgba(107, 114, 128, 0.15); }
.badge-ranked { background: var(--accent-dim); color: var(--accent); border-color: var(--border-accent); }
.badge-unranked { background: rgba(107, 114, 128, 0.08); color: var(--text-tertiary); border-color: rgba(107, 114, 128, 0.15); }
.badge-matchmaking { background: rgba(168, 85, 247, 0.08); color: #c084fc; border-color: rgba(168, 85, 247, 0.2); }
/* Per-role badges on template cards. */
.badge-role-koth { background: rgba(0, 224, 255, 0.08); color: #00e0ff; border-color: rgba(0, 224, 255, 0.2); }
.badge-role-matchmaking { background: rgba(168, 85, 247, 0.08); color: #c084fc; border-color: rgba(168, 85, 247, 0.2); }
.badge-role-timeattack { background: rgba(138, 111, 255, 0.08); color: #b49cff; border-color: rgba(138, 111, 255, 0.2); }
.badge-admin { background: rgba(248, 113, 113, 0.08); color: var(--danger); border-color: rgba(248, 113, 113, 0.2); }
.badge-read { background: rgba(107, 114, 128, 0.08); color: var(--text-secondary); border-color: rgba(107, 114, 128, 0.15); }
/* Wave 2.4 F23 — AuditLog operation pills grouped into 4 visual-scan categories. */
.badge-category-mutation   { background: rgba(0, 224, 255, 0.08);   color: var(--accent);          border-color: rgba(0, 224, 255, 0.2); }
.badge-category-read       { background: rgba(107, 114, 128, 0.08); color: var(--text-secondary);  border-color: rgba(107, 114, 128, 0.15); }
.badge-category-governance { background: rgba(251, 191, 36, 0.08);  color: var(--warning);         border-color: rgba(251, 191, 36, 0.2); }
.badge-category-system     { background: rgba(168, 85, 247, 0.08);  color: #c084fc;                border-color: rgba(168, 85, 247, 0.2); }
@keyframes pulse-badge { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* --- Spinner --- */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Empty State --- */
.empty-state { background: var(--bg-panel); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); border: 1px solid var(--border); border-radius: 8px; padding: 40px 28px; text-align: center; }
.empty-state h3 { color: var(--text-secondary); font-family: var(--font-display); font-size: 15px; margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }

/* --- Key Group Header --- */
.key-group-header { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 0 6px; margin-top: 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.key-group-header .count { font-size: 11px; color: var(--text-muted); font-weight: 400; }

/* --- Relative Time Styles --- */
.time-muted { color: var(--text-muted); font-size: 12px; }
.time-active { color: var(--success); font-size: 12px; }
.time-never { color: var(--text-muted); font-size: 12px; font-style: italic; }

/* --- Phase 7 API Key rotation UI --- */
.key-countdown { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-secondary); }
.key-countdown.key-countdown-urgent { color: var(--danger); font-weight: 600; }
.key-stale-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(255, 179, 71, 0.12); color: var(--warning); border: 1px solid rgba(255, 179, 71, 0.35); margin-right: 4px; }
.key-deprecated-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(255, 107, 107, 0.10); color: var(--danger); border: 1px solid rgba(255, 107, 107, 0.35); }
.key-warn { color: var(--danger); font-weight: 600; }

/* --- Stats Bar --- */
.stats-bar { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.stat { background: var(--bg-panel); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); padding: 12px 18px; border-radius: 8px; font-size: 13px; border: 1px solid var(--border); }
.stat strong { color: var(--text-primary); }

/* --- Cards Grid --- */
.instance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.instance-card { background: var(--bg-panel); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); border-radius: 8px; padding: 16px; border: 1px solid var(--border); transition: border-color 0.15s ease, transform 0.1s ease; cursor: pointer; }
.instance-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.card-header strong { font-family: var(--font-display); font-size: 14px; color: var(--text-primary); }
.card-body { font-size: 12px; color: var(--text-secondary); line-height: 1.7; }
.card-footer { display: flex; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* --- Tables — Hairline borders, panel-tone sticky header.
   Wave 2.4 F21 — was background: #000000 (true black) which clashed
   visually against the panel cards (rgba(8,12,18,0.65)). The panel-solid
   token matches the surrounding chrome so headers no longer pop as a
   foreign black bar. */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead { position: sticky; top: 0; z-index: 10; }
th { text-align: left; padding: 10px 14px; background: var(--bg-panel-solid); color: var(--text-tertiary); font-family: var(--font-display); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-hover); }
td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
tr { transition: background 0.1s ease; }
tr:hover { background: var(--bg-hover); }
tr.revoked { opacity: 0.4; }

/* --- Buttons --- */
.btn { font-family: var(--font-display); font-weight: 600; font-size: 13px; background: transparent; color: var(--text-secondary); border: 1px solid var(--border); padding: 7px 16px; border-radius: 4px; cursor: pointer; transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #000; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--danger); border-color: rgba(248, 113, 113, 0.2); }
.btn.danger:hover { background: rgba(248, 113, 113, 0.08); border-color: var(--danger); }
.btn.success { color: var(--success); border-color: rgba(52, 211, 153, 0.2); }
.btn.success:hover { background: rgba(52, 211, 153, 0.08); border-color: var(--success); }
/* Wave 2.4 F26 — `.btn.warning` for impact-medium actions (Restart / Drain).
   Sits between `.btn.danger` (irreversible / Force-*) and the default neutral
   button so the Quick-controls group reads at a glance. */
.btn.warning { color: var(--warning); border-color: rgba(251, 191, 36, 0.25); }
.btn.warning:hover { background: rgba(251, 191, 36, 0.08); border-color: var(--warning); }
.btn.secondary { background: transparent; border-color: var(--border); }
.btn.secondary:hover { border-color: var(--border-hover); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* --- Forms --- */
.form-panel { background: var(--bg-panel); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); padding: 20px; border-radius: 8px; margin: 16px 0; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border); }
.form-panel.warning { background: rgba(251, 191, 36, 0.04); border-color: rgba(251, 191, 36, 0.15); }
.form-panel h3 { margin-bottom: 4px; }
.form-panel label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.form-panel .help-text { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.form-panel input, .form-panel select, .form-panel textarea { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 8px 12px; border-radius: 6px; font-size: 13px; font-family: var(--font-body); transition: border-color 0.12s ease; }
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus { outline: none; border-color: var(--border-accent-strong); box-shadow: 0 0 0 1px var(--border-accent); }
.form-panel input[readonly] { color: var(--text-tertiary); cursor: default; }
.form-actions { display: flex; gap: 8px; margin-top: 4px; }
.form-panel-actions { display: flex; gap: 8px; }

/* ============================================
   Car Lists page (/car-lists) — picker grid + per-row chips.
   ============================================ */
.carlist-search { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.carlist-search input { flex: 1; max-width: 320px; }
.carlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); column-gap: 12px; row-gap: 1px; max-height: 520px; overflow-y: auto; padding: 4px 6px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; }
.carlist-car { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; padding: 2px 6px; margin: 0; background: transparent; border: 1px solid transparent; border-radius: 2px; cursor: pointer; font-size: 11.5px; line-height: 1.25; font-family: var(--font-mono); color: var(--text-secondary); transition: background 0.08s ease, color 0.08s ease; user-select: none; min-height: 22px; }
.carlist-car:hover { background: var(--bg-hover); color: var(--text-primary); }
.carlist-car.selected { background: var(--accent-dim); border-color: var(--border-accent-strong); color: var(--accent); }
.carlist-car input[type="checkbox"] { width: 12px; height: 12px; accent-color: var(--accent); margin: 0; flex-shrink: 0; }
.carlist-car-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carlist-selected-summary { margin-top: 8px; padding: 8px 12px; background: rgba(0, 224, 255, 0.05); border: 1px solid rgba(0, 224, 255, 0.15); border-radius: 4px; font-size: 11px; color: var(--text-secondary); line-height: 1.5; word-wrap: break-word; }

/* Car/item picker grid */
.checkbox-label { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--text-secondary); transition: all 0.12s ease; user-select: none; }
.checkbox-label:hover { border-color: var(--border-accent-strong); color: var(--text-primary); }
.checkbox-label:has(input:checked) { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.checkbox-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); margin: 0; }

/* --- Code / Copy --- */
code { background: var(--bg-elevated); padding: 2px 8px; border-radius: 4px; font-size: 12px; font-family: var(--font-mono); color: var(--text-primary); }
.copy-group { display: inline-flex; align-items: center; gap: 6px; }
.copy-value { padding: 4px 10px; }
.copy-btn { font-size: 11px !important; padding: 3px 8px !important; }

/* --- Code Editor --- */
.code-editor { background: var(--bg-input); color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; border: 1px solid var(--border); border-radius: 8px; padding: 14px; width: 100%; resize: vertical; tab-size: 2; transition: border-color 0.12s ease; }
.code-editor:focus { outline: none; border-color: var(--border-accent-strong); box-shadow: 0 0 0 1px var(--border-accent); }

/* --- Breadcrumb --- */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--text-tertiary); }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb-sep { color: var(--text-muted); }
.breadcrumb span:last-child { color: var(--text-primary); }

/* --- Search --- */
.search-input { width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 8px 14px; border-radius: 6px; font-size: 13px; font-family: var(--font-body); margin-bottom: 14px; transition: border-color 0.12s ease; }
.search-input:focus { outline: none; border-color: var(--border-accent-strong); box-shadow: 0 0 0 1px var(--border-accent); }
.search-input::placeholder { color: var(--text-muted); }

/* --- Modal / Confirm Dialog — Glass treatment --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal { background: var(--bg-panel); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--border); border-radius: 8px; padding: 28px; max-width: 420px; width: 90%; }
.modal h3 { margin-bottom: 8px; }
.modal-message { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; line-height: 1.6; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* --- Toast — Glass treatment with colored left border --- */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--bg-panel); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--border); padding: 12px 18px; border-radius: 8px; font-size: 13px; min-width: 260px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); animation: toast-in 0.2s ease; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-info { border-left: 3px solid var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.toast-dismiss { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; transition: color 0.12s ease; }
.toast-dismiss:hover { color: var(--text-primary); }

/* --- Progress Bar --- */
.progress-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.progress-bar { background: var(--border); border-radius: 4px; height: 8px; overflow: hidden; width: 100%; }
.progress-fill { background: var(--accent); height: 100%; border-radius: 4px; transition: width 0.3s ease; display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.progress-text { font-size: 10px; color: #000; padding-right: 6px; white-space: nowrap; font-weight: 600; }
.progress-indeterminate { width: 40% !important; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 50%, var(--accent) 100%); background-size: 200% 100%; animation: progress-stripe 1.5s linear infinite; }
@keyframes progress-stripe { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

table input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; width: 15px; height: 15px; }

/* --- Login --- */
.login-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg-primary); }
.login-box { background: var(--bg-panel); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--border); border-radius: 8px; padding: 40px 36px; width: 100%; max-width: 380px; }
.login-brand { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--accent); margin-bottom: 28px; text-align: center; letter-spacing: 1px; }
.login-field { margin-bottom: 16px; }
.login-input { width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 10px 14px; border-radius: 6px; font-size: 14px; font-family: var(--font-body); transition: border-color 0.12s ease; }
.login-input:focus { outline: none; border-color: var(--border-accent-strong); box-shadow: 0 0 0 1px var(--border-accent); }
.login-input::placeholder { color: var(--text-muted); }
.login-btn { width: 100%; justify-content: center; padding: 10px 16px !important; font-size: 14px !important; }
.login-error { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.2); color: var(--danger); padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; text-align: center; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .admin-shell { flex-direction: column; }
    .sidebar { width: 100%; position: static; flex-direction: row; overflow-x: auto; gap: 0; padding: 8px; border-right: none; border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
    .sidebar-brand { display: none; }
    .sidebar a { white-space: nowrap; padding: 6px 12px; font-size: 12px; }
    .content { margin-left: 0; padding: 16px; }
    .instance-grid { grid-template-columns: 1fr; }
    .stats-bar { flex-direction: column; }
    .modal { margin: 10vh 16px; }
}

/* Admins page */
.inline-form { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.inline-form input { flex: 1; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.data-table th, .data-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.data-table th { color: var(--text-secondary); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.data-table code { background: var(--bg-elevated); padding: 2px 6px; border-radius: 3px; font-size: 0.85rem; }
.form-error { color: var(--danger); font-size: 0.85rem; margin-bottom: 8px; }
.text-muted { color: var(--text-secondary); }

/* Matchmaking page */
.match-winner { color: var(--success); font-weight: 600; }
.badge-match-pending { background: rgba(107, 114, 128, 0.08); color: var(--text-secondary); border-color: rgba(107, 114, 128, 0.15); }
.badge-match-assigned { background: var(--accent-dim); color: var(--accent); border-color: var(--border-accent); }
.badge-match-connecting { background: rgba(251, 191, 36, 0.08); color: var(--warning); border-color: rgba(251, 191, 36, 0.2); }
.badge-match-racing { background: rgba(52, 211, 153, 0.08); color: var(--success); border-color: rgba(52, 211, 153, 0.2); }
.refresh-stat { margin-left: auto; }

/* --- Utility Classes --- */
.mt-sm { margin-top: 4px; }
.mt-md { margin-top: 12px; }
.mt-lg { margin-top: 16px; }
.mb-sm { margin-bottom: 6px; }
.mb-md { margin-bottom: 12px; }
.mb-lg { margin-bottom: 16px; }
.ml-sm { margin-left: 4px; }
.ml-auto { margin-left: auto; }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-tertiary { color: var(--text-tertiary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-mono { font-family: var(--font-mono, 'JetBrains Mono', 'Consolas', monospace); }
.color-warning { color: var(--warning); }
.color-success { color: var(--success); }
/* Wave 2.4 F15 — utility classes for the inline-style sweep so common
   '<div style="display:flex; gap:Npx; ...">' shapes go through CSS, not
   spread-by-copy across razor pages. */
.flex-row { display: flex; align-items: center; gap: 8px; }
.flex-row-md { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flex-row-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.flex-col-1 { flex: 1; min-width: 220px; }
.inline-flex-row { display: inline-flex; align-items: center; gap: 6px; }

/* Wave 2.4 F1 — hero h1 modifier for landing pages that need a bigger
   typographic hook than the default 20px. */
.h1-hero {
    font-size: 44px;
    letter-spacing: -1px;
    line-height: 1.1;
}
@media (max-width: 640px) {
    .h1-hero { font-size: 32px; }
}

/* Wave 2.4 F36 — Tenants/Index local refinements (reuses .attention-row
   from AttentionStrip; just trims a couple of layout knobs). */
.tenants-distribution-banner { margin-bottom: 16px; align-items: flex-start; }
.tenants-distribution-banner .attention-text { font-size: 13px; line-height: 1.5; }
.tenants-action-row { margin-bottom: 16px; }
.tenants-row-count { margin-bottom: 12px; }

/* Wave 2.4 F15 — Maintenance.razor section heading spacing. */
.maintenance-section-h3 { margin-top: 1.5rem; }

/* Wave 2.4 F15 — Announcements page page-specific layout knobs. */
.announcements-create-panel { margin-bottom: 1.5rem; }
.announcements-pinned-row { gap: 8px; }

/* Wave 2.2 → Wave 2 cleanup — back-link banner shown when Announcements
   is opened from an alert via ?fromAlert=N. */
.announcements-from-alert {
    margin-bottom: 1rem;
    border-left: 3px solid var(--accent);
}

/* Wave 2.2 → Wave 2 cleanup — visually marks a row navigated to via
   /admins?highlight= or /bans?id= so the operator can see what they
   landed on. Subtle outline + faint cyan tint. */
.row-highlighted {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: rgba(0, 224, 255, 0.06);
}
.announcements-pinned-label { margin: 0; }

/* Wave 2.4 F15 — AuditLog correlation-chain banner + per-row chain button. */
.audit-correlation-banner { margin-bottom: 12px; border-left: 3px solid var(--accent); }
.audit-correlation-btn { background: none; border: none; padding: 0; cursor: pointer; color: var(--accent); }
.audit-correlation-btn:hover { color: var(--accent-hover); }

/* Wave 2.4 F15 — AlertDetailDrawer audit list + actions row. */
.alert-drawer-empty { font-size: 13px; }
.alert-drawer-audit-list { font-size: 13px; }
.alert-drawer-ack-input { width: 120px; }
.alert-drawer-actions { gap: 8px; }
.alert-drawer-status { color: var(--success); margin-top: 6px; font-size: 13px; }

/* Wave 2.4 F15 — TenantDetailKeyRotation staged-rotation card. */
.staged-rotation-panel { border-left: 4px solid var(--success); background: rgba(52, 211, 153, 0.06); padding: 12px 16px; }
.staged-rotation-list { margin: 0 0 12px 1em; }

/* Wave 2.4 F15 — TenantDetailBundle layout knobs. */
.bundle-handoff-chip-row { margin-top: 12px; }
.bundle-private-channel-banner { border-left: 4px solid var(--warning); background: rgba(251, 191, 36, 0.06); padding: 12px 16px; margin-bottom: 16px; }
.bundle-dm-textarea { font-family: var(--font-mono); font-size: 13px; }
.bundle-dm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bundle-dm-copied-ack { display: none; color: var(--success); font-size: 13px; }
.bundle-dm-issued { margin-left: auto; }
.bundle-section-divider { margin: 20px 0; border: 0; border-top: 1px solid rgba(255,255,255,0.08); }

/* --- Form Input (standalone, outside .form-panel) --- */
.form-input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 8px 12px; border-radius: 6px; font-size: 13px; font-family: var(--font-body); transition: border-color 0.12s ease; width: 100%; }
.form-input:focus { outline: none; border-color: var(--border-accent-strong); box-shadow: 0 0 0 1px var(--border-accent); }
.form-input:disabled { opacity: 0.5; cursor: not-allowed; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 13px; color: var(--text-secondary); }
.form-group .help-text { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.form-hint { font-size: 11px; color: var(--text-muted); font-weight: normal; }

/* --- Form Row --- */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

/* --- Weather warning --- */
.weather-warning { background: var(--warning-dim, rgba(251, 191, 36, 0.08)); color: var(--warning); padding: 8px 12px; border-radius: 4px; font-size: 0.85rem; margin-top: 6px; }

/* --- Tab navigation --- */
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-btn { padding: 10px 20px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-family: var(--font-display); font-size: 0.95rem; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================
   Phase 0 — Admin IA shared components
   (StateBadge, DependencyPanel, PreviewConfirmModal,
    DriftIndicator, ObjectAuditTab, ReadinessChecklist)
   The plural Breadcrumbs primitive was unified with the singular
   Breadcrumb (see line 205) in Phase 3.4 of the admin migration
   completion plan (2026-05-04).
   ============================================ */

/* --- StateBadge (Task 0.10) --- */
.state-badge { display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: .72rem; font-weight: 600; letter-spacing: .04em; border: 1px solid transparent; }
.state-badge.state-draft      { background: #3a3a1a; color: #ffd166; border-color: #ffd16655; }
.state-badge.state-active     { background: #0d3a2a; color: #8aff8a; border-color: #8aff8a55; }
.state-badge.state-archived   { background: #2a2a2a; color: #9a9a9a; border-color: #9a9a9a55; }
.state-badge.state-deprecated { background: #3a1a1a; color: #ff9a9a; border-color: #ff9a9a55; }
.state-badge.state-scheduled  { background: #1a2a3a; color: #9ac8ff; border-color: #9ac8ff55; }
.state-badge.state-unknown    { background: #222; color: #666; border-color: #66666655; }

/* --- DependencyPanel (Task 0.11) --- */
.dep-panel { padding: 12px 16px; border-radius: 8px; margin: 12px 0; font-size: .9rem; }
.dep-panel.dep-warn  { background: #2a2010; color: #ffd166; border: 1px solid #ffd16655; }
.dep-panel.dep-block { background: #2a1010; color: #ff9a9a; border: 1px solid #ff9a9a88; }
.dep-title { font-weight: 600; margin-bottom: 6px; }
.dep-list { margin: 0; padding-left: 18px; }
.dep-list li { margin: 2px 0; }
.dep-kind { display: inline-block; min-width: 80px; color: #888; font-size: .75rem; text-transform: uppercase; }

/* --- SeasonPoolAwarenessBanner (Phase 5 Task 5.20) ---
   Subtle cyan callout on /car-lists/{id} when this list is the live
   source for an active season's Time Attack pool. Hidden when no
   active season references the list. */
.season-pool-banner {
    padding: 10px 14px;
    margin: 12px 0;
    border-radius: 8px;
    background: rgba(0, 224, 255, 0.08);
    color: #9deeff;
    border: 1px solid rgba(0, 224, 255, 0.35);
    font-size: .9rem;
    line-height: 1.5;
}

/* --- PreviewConfirmModal (Task 0.12) --- */
.modal.preview-confirm { min-width: 520px; max-width: 760px; max-height: 80vh; overflow: auto; }
.preview-pane { background: #111; border: 1px solid #333; border-radius: 6px; padding: 12px;
    margin: 12px 0; font-family: monospace; font-size: .85rem; max-height: 40vh; overflow: auto; }
.ack-row { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: .9rem; }
.btn.danger:disabled { background: #444; color: #888; cursor: not-allowed; }

/* --- DriftIndicator (Task 0.13) --- */
.drift-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
    border-radius: 10px; font-size: .72rem; font-weight: 600; }
.drift-dot { width: 6px; height: 6px; border-radius: 50%; }
.drift-chip.drift-insync  { background: #0d3a2a; color: #8aff8a; }
.drift-chip.drift-insync .drift-dot  { background: #8aff8a; }
.drift-chip.drift-drifted { background: #3a2a10; color: #ffd166; }
.drift-chip.drift-drifted .drift-dot { background: #ffd166; }
.drift-chip.drift-unknown { background: #222; color: #888; }
.drift-chip.drift-unknown .drift-dot { background: #666; }

/* --- ObjectAuditTab (Task 0.14) --- */
.audit-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.audit-table th, .audit-table td { padding: 6px 10px; border-bottom: 1px solid #222; text-align: left; }
.audit-table th { color: #888; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.audit-table .mono { font-family: monospace; }
.audit-table .dim { color: #666; }
.audit-detail { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Breadcrumbs (Task 0.15) ---
   Plural <Breadcrumbs> component was unified into the singular
   <Breadcrumb> (.breadcrumb rules above, line 205) in Phase 3.4 of
   the admin primitive migration completion plan (2026-05-04). The
   .breadcrumbs / .crumb-sep / .crumb-current rules that lived here
   went with it. */

/* --- ReadinessChecklist (Task 0.16) --- */
.readiness-list { list-style: none; padding: 0; margin: 12px 0; }
.readiness-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid #1a1a1a; }
.readiness-row.sat .readiness-mark   { color: #8aff8a; }
.readiness-row.unsat .readiness-mark { color: #ff6b6b; }
.readiness-row.unsat.opt .readiness-mark { color: #888; }
.readiness-mark { font-weight: 700; font-family: monospace; width: 16px; }
.readiness-opt-tag { font-size: .7rem; color: #888; padding: 1px 6px; border: 1px solid #444; border-radius: 8px; }
.readiness-hint { flex-basis: 100%; margin-left: 24px; color: #888; font-size: .82rem; }

/* --- Status badges (FirstTimeSetup / PluginArtifacts / ProtocolVersions / Tenants) --- */
/* Wave 2.4 F27 — codify the status-badge / check-ok / check-fail color tokens that
   FirstTimeSetup + ReadinessChecklist rely on. Previously these classes inherited
   no explicit color rules so the ✓/✗ glyphs read as plain text. */
.status-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.4px; border: 1px solid transparent; }
.status-badge.status-success { background: rgba(138, 255, 138, 0.08); color: var(--success); border-color: rgba(138, 255, 138, 0.25); }
.status-badge.status-danger  { background: rgba(255, 107, 107, 0.08); color: var(--danger);  border-color: rgba(255, 107, 107, 0.28); }
.status-badge.status-warning { background: rgba(255, 179, 71, 0.08);  color: var(--warning); border-color: rgba(255, 179, 71, 0.28); }
.status-badge.status-muted   { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); border-color: rgba(255, 255, 255, 0.08); }

/* Inline check glyph utilities — for "this control is OK / failed" badges in narrative pages.
   Use <span class="check-ok">✓</span> / <span class="check-fail">✗</span> instead of literal X. */
.check-ok   { color: var(--success); font-weight: 700; }
.check-fail { color: var(--danger);  font-weight: 700; }

/* --- Phase 6 Task 6.18-6.19 — Alerts drawer --- */
.drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
    z-index: 90;
}
.drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 92vw);
    background: #141414; border-left: 1px solid #2a2a2a;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
    padding: 20px; overflow-y: auto; z-index: 100;
    animation: drawer-slide 0.22s ease-out;
}
.drawer.slide-in { animation: drawer-slide 0.22s ease-out; }
@keyframes drawer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #2a2a2a; padding-bottom: 10px; margin-bottom: 14px;
}
.drawer-section { margin-bottom: 20px; }
.drawer-section h4 { margin: 0 0 8px; color: #00e0ff; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; }
.audit-list { list-style: none; padding: 0; margin: 0; }
.audit-list li { padding: 4px 0; border-bottom: 1px dashed #222; }
.audit-time { color: var(--text-muted); font-family: monospace; font-size: 12px; }

/* --- Phase 6 Task 6.21 — Bans form grid + table helpers --- */
.form-grid-2col {
    display: grid; gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
    .form-grid-2col { grid-template-columns: 1fr; }
}
.form-grid-2col .form-group.full-width { grid-column: 1 / -1; }
.kv-grid {
    display: grid; grid-template-columns: minmax(110px, auto) 1fr;
    gap: 4px 14px; margin: 8px 0 0;
}
.kv-grid dt { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.kv-grid dd { margin: 0; font-size: 13px; }

/* Phase 7 Task 7.10 — Admins page presence dot (green = seen in last 5m). */
.presence-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}
.presence-online { background: #00e08a; box-shadow: 0 0 6px rgba(0, 224, 138, 0.55); }
.presence-offline { background: rgba(255, 255, 255, 0.18); }
.preview-row { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; }
.preview-row:last-child { border-bottom: none; }
.preview-label { color: var(--text-muted); min-width: 110px; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }

/* Phase 7 Task 7.15 — audit target chip (deep-links to related admin page). */
.target-chip {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 224, 255, 0.08);
    border: 1px solid rgba(0, 224, 255, 0.25);
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-mono, monospace);
}
a.target-chip:hover { background: rgba(0, 224, 255, 0.14); }

/* Phase 7 Task 7.27 — Legal page markdown preview pane.
   Not a real markdown renderer (no Markdig); keeps whitespace + wraps so
   admins can eyeball the draft against the active version without a round-trip. */
.md-preview {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.9rem;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================
   Phase 6-8 Admin IA — LiveOps + shared components
   ============================================ */

/* --- Page header (title row with optional actions) --- */
.page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-header-row h1 { margin: 0; }
.page-intro { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; max-width: 760px; line-height: 1.6; }

/* --- LiveOps page shell --- */
.live-ops-shell { display: flex; flex-direction: column; gap: 20px; }
.live-ops-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; letter-spacing: 0.5px; }
.live-ops-bottom-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 1100px) { .live-ops-bottom-row { grid-template-columns: 1fr; } }

/* --- AttentionStrip (Phase 6 Task 6.11) ---
   Horizontal row of attention-needed callouts above LiveOps. "All clear"
   when nothing needs attention; otherwise stacks rows with severity
   coloring. Each row is a link with an action label on the right. */
.attention-strip {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.attention-clear {
    padding: 12px 16px;
    color: var(--success);
    font-size: 13px;
    text-align: center;
}
.attention-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.015);
    transition: background 0.12s ease, border-color 0.12s ease;
}
.attention-row:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.attention-row.attention-critical { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.22); }
.attention-row.attention-critical:hover { background: rgba(248, 113, 113, 0.14); }
.attention-row.attention-warning { background: rgba(251, 191, 36, 0.06); border-color: rgba(251, 191, 36, 0.2); }
.attention-row.attention-warning:hover { background: rgba(251, 191, 36, 0.11); }
.attention-row.attention-info { background: rgba(0, 224, 255, 0.06); border-color: rgba(0, 224, 255, 0.2); }
.attention-row.attention-info:hover { background: rgba(0, 224, 255, 0.11); }
.attention-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    font-family: var(--font-display);
    flex-shrink: 0;
}
.attention-critical .attention-icon { background: rgba(248, 113, 113, 0.2); color: var(--danger); }
.attention-warning .attention-icon { background: rgba(251, 191, 36, 0.2); color: var(--warning); }
.attention-info .attention-icon { background: rgba(0, 224, 255, 0.2); color: var(--accent); }
.attention-text { flex: 1; font-size: 13px; color: var(--text-primary); }
.attention-action {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: inherit;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.attention-row:hover .attention-action { background: rgba(255, 255, 255, 0.1); }

/* --- LiveMatchesGrid (Phase 6 Task 6.12) --- */
.live-grid {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
}
.live-grid-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.live-grid-header h3 { margin: 0; font-family: var(--font-display); font-size: 14px; color: var(--text-primary); letter-spacing: 0.5px; }
.live-grid-count { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.live-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.live-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.live-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live-card-server { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-card-server strong { font-family: var(--font-display); font-size: 13px; color: var(--text-primary); }
.live-card-elapsed { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
.live-round-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--border-accent);
}
.live-card-racers {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}
.live-racer { display: flex; flex-direction: column; gap: 2px; }
.live-racer.right { text-align: right; align-items: flex-end; }
.live-racer-role {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.live-racer-role.king { color: var(--warning); }
.live-racer-role.challenger { color: var(--accent); }
.live-racer-name { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.live-vs { font-family: var(--font-display); font-size: 11px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }
.live-card-gap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.live-gap-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); font-family: var(--font-display); }
.live-gap-value { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); font-weight: 600; min-width: 40px; }
.live-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); }

/* Tiny button variant shared by Phase 6 action rows. */
.btn-xs, .btn.btn-xs {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
}
.btn-xs:hover, .btn.btn-xs:hover { border-color: var(--border-hover); color: var(--text-primary); }
.btn-xs.secondary { background: transparent; border-color: var(--border); }
.btn-xs.danger { color: var(--danger); border-color: rgba(248, 113, 113, 0.25); }
.btn-xs.danger:hover { background: rgba(248, 113, 113, 0.08); border-color: var(--danger); }
.btn-xs.warning { color: var(--warning); border-color: rgba(251, 191, 36, 0.3); }
.btn-xs.warning:hover { background: rgba(251, 191, 36, 0.08); border-color: var(--warning); }
.btn.small.warning { color: var(--warning); border-color: rgba(251, 191, 36, 0.3); }
.btn.small.warning:hover { background: rgba(251, 191, 36, 0.08); border-color: var(--warning); }

/* --- GapSparkline --- */
.gap-sparkline { display: inline-block; vertical-align: middle; }
.gap-spark-zero { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2,2; }
.gap-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.gap-sparkline-empty { color: var(--text-muted); font-size: 12px; }

/* --- QueuePanel (Phase 6 Task 6.13) --- */
.queue-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.queue-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.queue-panel-header h3 { margin: 0; font-family: var(--font-display); font-size: 14px; color: var(--text-primary); letter-spacing: 0.5px; }
.queue-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.queue-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.queue-card.frozen { border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.03); }
.queue-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.queue-card-header strong { font-family: var(--font-display); font-size: 13px; color: var(--text-primary); }
.queue-card-actions { display: flex; gap: 6px; }
.data-table.compact th, .data-table.compact td { padding: 5px 8px; font-size: 12px; }
.queue-force-match {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.queue-force-match h4 { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.queue-force-match .form-row { grid-template-columns: 1fr 1fr auto; align-items: center; }

/* --- FleetStatsRow (Phase 6 Task 6.16) --- */
.fleet-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}
.fs-tile {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 82px;
}
.fs-tile-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.fs-tile-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}
.fs-online .fs-tile-value { color: var(--success); }
.fs-draining .fs-tile-value { color: var(--warning); }
.fs-offline .fs-tile-value { color: var(--text-tertiary); }
.fs-failed .fs-tile-value { color: var(--danger); }
.fs-online { border-color: rgba(52, 211, 153, 0.18); }
.fs-failed { border-color: rgba(248, 113, 113, 0.18); }

/* --- ActiveAdminsWidget (Phase 6 Task 6.15) --- */
.active-admins-widget {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 52px;
}
.active-admins-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-right: 4px;
}
.active-admins-empty { color: var(--text-muted); font-size: 12px; font-style: italic; }
.active-admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-primary);
}
.active-admin-chip .chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--success); box-shadow: 0 0 4px rgba(52, 211, 153, 0.5);
    flex-shrink: 0;
}
.active-admin-chip .chip-muted { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }

/* --- RecentReactiveOpsCard (Phase 6 Task 6.17) --- */
.recent-ops-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}
.recent-ops-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.recent-ops-header h4 { margin: 0; font-family: var(--font-display); font-size: 13px; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; }
.recent-ops-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.recent-ops-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 12px;
}
.recent-ops-list li:last-child { border-bottom: none; }
.recent-ops-op { flex-shrink: 0; }
.recent-ops-by { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-ops-time { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; flex-shrink: 0; }
.recent-ops-link { font-family: var(--font-mono); font-size: 11px; color: var(--accent); padding: 2px 6px; border: 1px solid var(--border-accent); border-radius: 4px; flex-shrink: 0; }
.recent-ops-link:hover { background: var(--accent-dim); }
.badge-default { background: rgba(107, 114, 128, 0.08); color: var(--text-secondary); border-color: rgba(107, 114, 128, 0.15); }
.badge-warning { background: rgba(251, 191, 36, 0.08); color: var(--warning); border-color: rgba(251, 191, 36, 0.2); }
.badge-info { background: var(--accent-dim); color: var(--accent); border-color: var(--border-accent); }
.badge-danger { background: rgba(248, 113, 113, 0.08); color: var(--danger); border-color: rgba(248, 113, 113, 0.2); }

/* ============================================
   Phase 2 — Servers list + filters
   ============================================ */
.servers-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.region-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.template-version { display: inline-block; margin-left: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.tenant-pill {
    display: inline-block;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    background: rgba(0, 224, 255, 0.06);
    border: 1px solid rgba(0, 224, 255, 0.18);
    border-radius: 10px;
    text-decoration: none;
}
.tenant-pill:hover { background: rgba(0, 224, 255, 0.12); }
.info-banner {
    margin: 12px 0 18px;
    padding: 10px 14px;
    background: rgba(0, 224, 255, 0.04);
    border: 1px solid rgba(0, 224, 255, 0.16);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}
.info-banner code { font-family: var(--font-mono); font-size: 12px; color: var(--accent); background: rgba(0, 0, 0, 0.25); padding: 1px 5px; border-radius: 3px; }
.sidebar-tenant-switcher { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px; border-top: 1px solid var(--border); }
.sidebar-tenant-switcher label { font-family: var(--font-display); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-tertiary); }
.sidebar-tenant-switcher select {
    appearance: none;
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
}
.sidebar-tenant-switcher select:hover { border-color: var(--accent); color: var(--accent); }
.hash-short { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); background: var(--bg-elevated); padding: 1px 6px; border-radius: 3px; }

/* Admin table — canonical structure for all admin list pages. */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; }
.admin-table thead { position: sticky; top: 0; z-index: 2; }
.admin-table th { text-align: left; padding: 9px 12px; background: var(--bg-panel-solid); color: var(--text-tertiary); font-family: var(--font-display); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-hover); }
.admin-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:hover { background: var(--bg-hover); }
.admin-table .col-actions { text-align: right; white-space: nowrap; }
.admin-table .col-actions .btn,
.admin-table .col-actions .btn-xs { margin-left: 4px; }
.admin-table .col-select { width: 36px; text-align: center; }
@media (max-width: 800px) {
    .admin-table .col-hide-sm { display: none; }
}

/* --- Loading skeleton + error state (shared list-page states) --- */
.loading-skeleton {
    color: var(--text-muted);
    padding: 24px 12px;
    text-align: center;
    font-size: 13px;
    background: var(--bg-panel);
    border: 1px dashed var(--border);
    border-radius: 6px;
    animation: loading-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes loading-skeleton-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.error-state {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: var(--danger);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    margin: 8px 0 16px;
}

/* ============================================
   Phase 6 — Alerts drawer filter-row shorthand
   (List.razor uses inline styles; we scope a fallback here.)
   ============================================ */
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.filter-row .form-group { margin-bottom: 0; }
.pub-loading { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
.pub-loading .spinner { margin: 0 auto 8px; }

/* ============================================
   Phase 6 — TabStrip (Templates sub-routes, Server detail tabs)
   Minor override for keyboard focus visibility.
   ============================================ */
.tab-btn:focus { outline: 2px solid var(--border-accent-strong); outline-offset: -2px; }

/* ============================================
   Phase 3 — Seasons panels
   ============================================ */
.active-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) { .active-panel-grid { grid-template-columns: 1fr; } }

/* Key-value definition list used across season panels + overview tabs. */
.kv-list {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 4px 14px;
    margin: 4px 0 12px;
}
.kv-list dt { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.kv-list dd { margin: 0; font-size: 13px; color: var(--text-primary); }

/* Generic note box (inside a form-panel). */
.note {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    border: 1px solid transparent;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
    margin: 8px 0;
}
.note strong { color: var(--text-primary); display: block; margin-bottom: 4px; }
.note.info { background: var(--accent-dim); border-color: var(--border-accent); color: var(--text-primary); }
.note.info strong { color: var(--accent); }
.note.warning { background: rgba(251, 191, 36, 0.06); border-color: rgba(251, 191, 36, 0.22); }
.note.warning strong { color: var(--warning); }
.note ul { margin: 4px 0 0 18px; padding: 0; }
.note li { margin: 2px 0; }

/* Track-pool chip editor. */
.track-pool-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; min-height: 32px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    border-radius: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-primary);
}
.chip code { background: transparent; padding: 0; color: inherit; font-size: 12px; }
.chip.chip-draining { opacity: 0.65; border-style: dashed; }

/* Wave 3.1 Item 13 — BanForm chip strip (recent reporters + live-match
   players). The button-shaped chips reuse the existing .chip rule above; the
   strip just stacks two horizontally-scrolling rows above the SteamId input. */
.ban-chip-strip { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ban-chip-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.ban-chip-label { white-space: nowrap; }
.chip-sid-suffix { color: var(--text-muted); font-size: 11px; font-family: var(--font-mono); }
.chip.chip-live { border-color: rgba(0, 224, 255, 0.4); background: rgba(0, 224, 255, 0.06); }
.chip:hover { background: rgba(0, 224, 255, 0.1); cursor: pointer; }

/* Wave 3.1 Item 16 — ProvisionWizard batch-error rollup. Compact list under
   a .form-panel.error so the existing red border carries through. */
.provision-batch-error { margin-top: 12px; }
.provision-batch-error-list { margin: 6px 0; padding-left: 18px; }
.provision-batch-err-count { color: var(--text-muted); font-family: var(--font-mono); margin-right: 6px; }

/* Wave 3.1 Item 4 — LiveOps SSE state chip. Sits beside the page title and
   reflects the SSE bridge state (connected / silent / fallback). The
   warn variant uses the same amber the existing alert pills use so the
   admin's color expectation stays consistent. */
.live-ops-header-row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.live-ops-sse-chip { font-size: 12px; padding: 2px 10px; border-radius: 12px; font-family: var(--font-mono); }
.live-ops-sse-chip-ok { background: rgba(74, 222, 128, 0.12); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.4); }
.live-ops-sse-chip-warn { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.4); }

/* Wave 3.1 Item 5 — alert drawer ack row places FormField + button side by
   side instead of FormField's default vertical stack. */
.ack-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }

/* Wave 3.1 Item 9 — Disputes Reject preview kv-grid spacing. */
.dispute-reject-context { margin-bottom: 0.5rem; }

/* Wave 3.1 Item 24 — IncidentEditor inline component description help-text. */
.incident-component-help { display: block; margin-top: 4px; color: var(--text-muted); font-size: 12px; }

/* Wave 3.1 Item 21 — SeasonFailedPanel inline audit log details. */
.season-failed-audit { margin-top: 12px; }
.season-failed-audit summary { cursor: pointer; color: var(--text-muted); font-size: 13px; }
.season-failed-audit-list { margin: 6px 0 0 0; padding-left: 18px; font-size: 12px; }
.season-failed-audit-list li { margin: 2px 0; font-family: var(--font-mono); color: var(--text-muted); }
.chip-badge {
    font-family: var(--font-display);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.15);
    color: var(--warning);
}
.chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.chip-x:hover { background: rgba(248, 113, 113, 0.15); color: var(--danger); }
.chip-layout { color: var(--text-muted); font-size: 11px; }

/* Track-pool picker — search-filtered, track-grouped list (Phase 3 hot-fix). */
.track-picker-list {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-elevated);
    max-height: 360px;
    overflow-y: auto;
}
.track-picker-group {
    border-bottom: 1px solid var(--border);
}
.track-picker-group:last-child { border-bottom: none; }
.track-picker-track-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
}
.track-picker-track-row code {
    background: transparent;
    padding: 0;
    color: inherit;
}
.track-picker-layouts {
    list-style: none;
    margin: 0;
    padding: 0;
}
.track-picker-layout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px 6px 24px;
    font-size: 12px;
    color: var(--text-primary);
}
.track-picker-layout-row + .track-picker-layout-row {
    border-top: 1px solid var(--border-subtle, var(--border));
}

/* Activation checklist (SeasonActivatingPanel). */
.activation-checklist {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.activation-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 13px;
}
.activation-checklist li.ok { background: rgba(52, 211, 153, 0.05); }
.activation-checklist li.err { background: rgba(248, 113, 113, 0.06); }
.activation-checklist li.queued { opacity: 0.65; }
.activation-checklist .mark { width: 18px; text-align: center; font-weight: 700; flex-shrink: 0; }
.activation-checklist li.ok .mark { color: var(--success); }
.activation-checklist li.err .mark { color: var(--danger); }
.activation-checklist .err-text { color: var(--danger); font-size: 12px; }

/* ============================================
   Phase 4 — Tracks list + layout detail
   ============================================ */
.layout-sep { color: var(--text-muted); margin: 0 4px; font-weight: 400; }
.tab-body { padding-top: 12px; }
.edit-section {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.edit-section:last-child { border-bottom: none; padding-bottom: 0; }
.edit-section h3 { margin-bottom: 8px; }
.empty-state-inline {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-style: italic;
}
.host-content-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.host-content-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(255,255,255,0.02); border-radius: 4px; font-size: 13px; }
.host-content-name { color: var(--text-primary); font-weight: 500; }
.host-content-assumed { color: var(--text-muted); font-size: 11px; font-style: italic; }
.dim { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-size: 12px; }

/* PromotionAckPanel. */
.ack-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ack-list li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.ack-list li:last-child { border-bottom: none; }
.ack-symbol { text-align: center; font-weight: 700; }
.ack-name { color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; }
.ack-detail { color: var(--text-muted); font-size: 11.5px; }

/* DiffModal fallback (if the page uses raw modal-backdrop/modal-header/modal-close classes). */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-backdrop > .modal { max-width: 720px; width: 92%; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); gap: 8px; }
.modal-header h3 { margin: 0; }
.modal-body { max-height: 60vh; overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.modal-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 22px; line-height: 1; padding: 0 4px; transition: color 0.12s ease; }
.modal-close:hover { color: var(--text-primary); }

/* Lap filter bar (Tracks > Laps tab). */
.lap-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.lap-filter-group { display: flex; flex-direction: column; gap: 2px; }
.lap-filter-group label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }

/* ============================================
   Phase 2 — Server detail tabs
   ============================================ */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}
.config-diff {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    max-height: 50vh;
    overflow: auto;
    white-space: pre;
    color: var(--text-primary);
}
.rollback-preview, .deploy-preview {
    list-style: none;
    padding: 8px 10px;
    margin: 6px 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12.5px;
}
.rollback-preview li, .deploy-preview li { padding: 2px 0; color: var(--text-secondary); }

/* RegenerateConfigsDropdown. */
.regen-menu {
    list-style: none;
    padding: 6px 0;
    margin: 0;
    background: var(--bg-panel-solid);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    min-width: 220px;
}
.regen-menu li { padding: 6px 14px; cursor: pointer; font-size: 12.5px; color: var(--text-secondary); transition: background 0.1s ease; }
.regen-menu li:hover { background: var(--bg-hover); color: var(--text-primary); }
.regen-menu-divider { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; padding: 8px 14px 2px !important; pointer-events: none !important; border-top: 1px solid var(--border); margin-top: 4px; }
.regen-menu-divider:first-child { margin-top: 0; border-top: none; padding-top: 2px !important; }
.regen-menu-divider:hover { background: transparent !important; color: var(--text-muted) !important; }

/* Wave 6 Task 6.8 — transparent click-outside backdrop. Sits BELOW the menu
   (z-index 99 vs 1000) so clicks on the menu itself aren't intercepted;
   clicks elsewhere on the page hit the backdrop and close the dropdown. */
.regen-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
    cursor: default;
}
.regen-menu { z-index: 1000; }

.change-track-flow { background: rgba(0, 224, 255, 0.03); border: 1px solid var(--border-accent); border-radius: 6px; padding: 10px 12px; font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; }

/* ============================================
   Phase 8 — LiveOps (extra) — responsive sizing
   ============================================ */
@media (max-width: 640px) {
    .fleet-stats-row { grid-template-columns: repeat(2, 1fr); }
    .live-card-racers { grid-template-columns: 1fr; }
    .live-vs { text-align: center; }
    .live-racer.right { text-align: left; align-items: flex-start; }
}

/* ============================================
   Phase 2 — Server detail overview tab (extra)
   ============================================ */
.overview-card-connection,
.overview-card-template,
.overview-card-readiness,
.overview-card-controls { min-height: 100%; }
.host-line { color: var(--text-secondary); font-size: 12px; margin-top: 6px; }
.hash-line { color: var(--text-tertiary); font-size: 12px; margin-top: 4px; }
.region-tag { color: var(--text-muted); font-size: 11px; }
.live-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.live-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); }
.modal-summary { font-size: 13px; color: var(--text-secondary); margin: 0; }

/* Responsive scroll wrapper for wide admin tables (AuditLog, Alerts, Bans). */
.table-responsive { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
.table-responsive > table { min-width: 640px; }

/* .warn class (ProvisionWizard + similar). */
p.warn, .warn { color: var(--warning); }

/* "View public site" escape-hatch under the sidebar brand. Subdued so the
   admin nav stays the visual anchor; an admin who needs to hop to the
   public site can find it without it shouting. */
.sidebar-view-site {
    display: block !important;
    padding: 0 12px 14px !important;
    font-family: var(--font-display);
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-radius: 0 !important;
    text-decoration: none;
    transition: color 0.12s ease;
}
.sidebar-view-site:hover {
    background: transparent !important;
    color: var(--accent) !important;
}

/* "Signed in as <name>" identity row above Logout. Tertiary text — present
   for orientation, not nav. Sits in the sidebar-spacer flow. */
.sidebar-identity {
    color: var(--text-tertiary);
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px 0;
    border-top: 1px solid var(--border);
}
/* When identity is present, suppress the logout's own divider — the identity
   row already provides one and we don't want a stacked double-border. */
.sidebar-identity + .sidebar-logout {
    border-top: none !important;
    padding-top: 6px !important;
}

/* ============================================
   Phase A — Admin shared primitives (1.1–1.7)
   ============================================ */

/* AdminDataTable */
.admin-data-table table { width: 100%; border-collapse: collapse; }
.admin-data-table th { padding: 8px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); border-bottom: 1px solid var(--border); }
.admin-data-table td { padding: 10px 12px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.admin-data-table tbody tr:hover { background: var(--bg-hover); cursor: pointer; }
.admin-data-table tbody tr.selected { background: rgba(0, 224, 255, 0.05); }
.admin-data-table .sort-button { background: none; border: none; color: inherit; cursor: pointer; font-size: inherit; font-family: inherit; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; padding: 0; }
.admin-data-table .sort-button:hover { color: var(--text-primary); }
.admin-data-table .pagination { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 13px; color: var(--text-secondary); }

/* AdminFilterBar */
.admin-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 0; margin-bottom: 16px; }
.admin-filter-bar .filter-field { display: flex; flex-direction: column; gap: 4px; }
.admin-filter-bar .filter-field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); }
.admin-filter-bar .filter-field input,
.admin-filter-bar .filter-field select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.admin-filter-bar .clear-filters { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; align-self: flex-end; }
.admin-filter-bar .clear-filters:hover { color: var(--text-primary); border-color: var(--text-secondary); }

/* AdminDrawer */
.admin-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
.admin-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    background: var(--bg-panel-solid); border-left: 1px solid var(--border);
    z-index: 201; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 200ms ease-out;
    overflow-y: auto; box-shadow: -4px 0 16px rgba(0,0,0,0.3);
}
.admin-drawer.open { transform: translateX(0); }
.admin-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.admin-drawer-header h2 { margin: 0; font-size: 16px; font-family: var(--font-display); }
.admin-drawer-header .close { background: transparent; border: none; color: var(--text-secondary); font-size: 24px; cursor: pointer; }
.admin-drawer-content { padding: 20px; flex: 1; }

/* AdminTabs */
.admin-tabs-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.admin-tabs-bar button {
    padding: 8px 14px; background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    border-bottom: 2px solid transparent;
    font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
}
.admin-tabs-bar button.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tabs-bar button:hover { color: var(--text-primary); }
.admin-tabs-bar .dirty-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); margin-left: 6px; vertical-align: middle; }

/* FormField */
.form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.form-field label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); }
.form-field .required-asterisk { color: var(--danger); margin-left: 2px; }
.form-field input,
.form-field select,
.form-field textarea {
    background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
    padding: 8px 12px; border-radius: 6px; font-family: var(--font-body);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--border-accent-strong); box-shadow: 0 0 0 1px var(--border-accent); }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--danger); }
.form-field .help-text { font-size: 12px; color: var(--text-tertiary); }
.form-field .form-error { font-size: 12px; color: var(--danger); }

/* AdminConfirm extras */
.ack-checkbox { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 13px; }
.inline-confirm { background: var(--bg-elevated); border: 1px solid var(--border); padding: 14px; border-radius: 6px; margin: 12px 0; }
.inline-confirm.danger { border-left: 3px solid var(--danger); }
.inline-actions { display: flex; gap: 10px; margin-top: 10px; }

/* EmptyState (primitive — supplements the existing .empty-state page-level style) */
.empty-state .empty-icon { font-size: 36px; opacity: 0.5; margin-bottom: 12px; }

/* LoadingState / skeleton */
.loading-state { padding: 8px 0; }
.skeleton-row {
    height: 32px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    border-radius: 4px; margin-bottom: 6px;
    animation: skeleton-shimmer 1.4s infinite linear;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.spinner-inline { color: var(--text-tertiary); font-size: 13px; padding: 12px 0; }

/* BulkActionBar */
.bulk-action-bar { display: flex; align-items: center; gap: 12px; background: var(--bg-elevated); border: 1px solid var(--border); padding: 10px 16px; border-radius: 6px; margin: 12px 0; }
.bulk-action-bar .selected-count { font-weight: 600; color: var(--accent); }
.btn-link { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; text-decoration: underline; font-size: 13px; }

/* ============================================
   Wave 3 IA reorg (2026-05-05)
   - Sidebar notification badges
   - Mobile hamburger toggle (CSS-only :checked hack)
   - Cmd-K AdminSearchPalette overlay
   - /infra + /distribution discovery card grid
   ============================================ */

/* Sidebar badge — small cyan pill rendered next to the NavLink label
   when a count > 0 (Disputes / Alerts / Feedback / Erasures). */
.sidebar-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--accent);
    color: #000;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
}

/* Top bar — only visible on mobile. Contains the hamburger toggle and a
   search-palette trigger so the palette is reachable without a keyboard.
   Above 1024px the bar collapses (display:none) and the sidebar is the
   primary nav surface again. */
.kott-admin-topbar { display: none; }
.kott-sidebar-toggle-input { display: none; }
.kott-sidebar-backdrop { display: none; }
.kott-hamburger { display: none; }

@media (max-width: 1024px) {
    /* Reset the legacy 768px row layout — at the new breakpoint we go
       full off-canvas instead of collapsing into a horizontal scroll. */
    .admin-shell { flex-direction: column; }
    .kott-admin-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 90;
        background: rgba(4, 6, 10, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 10px 16px;
        border-bottom: 1px solid var(--border);
    }
    .kott-admin-topbar-brand {
        flex: 1;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 14px;
        color: var(--accent);
        letter-spacing: 0.6px;
    }
    .kott-hamburger {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 22px;
        cursor: pointer;
        padding: 4px 0;
    }
    .kott-hamburger span {
        display: block;
        height: 2px;
        background: var(--text-secondary);
        border-radius: 2px;
    }
    /* Sidebar slides in from the left when the toggle is checked. */
    .sidebar {
        position: fixed;
        top: 0; bottom: 0;
        left: -260px;
        width: 240px;
        transition: left 0.18s ease;
        z-index: 200;
        flex-direction: column;
        overflow-x: hidden;
        gap: 2px;
    }
    .kott-sidebar-toggle-input:checked ~ .sidebar { left: 0; }
    .kott-sidebar-toggle-input:checked ~ .kott-sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 150;
    }
    .content { margin-left: 0; padding: 16px; }
    /* Hide the top-of-sidebar brand since the topbar already shows it. */
    .sidebar > .sidebar-brand { display: none; }
}

/* Search-palette trigger button on the mobile top bar. */
.kott-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 224, 255, 0.06);
    border: 1px solid rgba(0, 224, 255, 0.22);
    color: var(--text-secondary);
    padding: 5px 9px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 12px;
}
.kott-search-trigger:hover { color: var(--accent); border-color: var(--accent); }
.kott-search-trigger kbd {
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 1px 5px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    color: var(--accent);
}
.kott-search-trigger-hint { display: none; }
@media (min-width: 480px) {
    .kott-search-trigger-hint { display: inline; }
}

/* AdminSearchPalette — centered modal overlay. Cyan accent matches the
   admin design tokens; backdrop dims the page underneath. */
.admin-search-palette { display: none; }
.admin-search-palette.open {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 500;
}
.admin-search-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.admin-search-card {
    position: relative;
    margin: 12vh auto 0;
    width: 92%;
    max-width: 560px;
    background: rgba(8, 12, 18, 0.96);
    border: 1px solid rgba(0, 224, 255, 0.28);
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.admin-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.admin-search-icon { color: var(--accent); font-size: 18px; }
.admin-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 15px;
    padding: 4px 0;
}
.admin-search-input::placeholder { color: var(--text-muted); }
.admin-search-hint {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}
.admin-search-results {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 50vh;
    overflow-y: auto;
}
.admin-search-result {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
}
.admin-search-result.selected,
.admin-search-result:hover {
    background: rgba(0, 224, 255, 0.08);
}
.admin-search-group {
    font-family: var(--font-display);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    min-width: 92px;
}
.admin-search-label { flex: 1; color: var(--text-primary); font-weight: 500; }
.admin-search-path {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--accent);
    opacity: 0.85;
}
.admin-search-empty {
    padding: 16px;
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 13px;
    text-align: center;
}

/* /infra + /distribution discovery card grid. Same shape on both pages
   so an admin who's seen one knows what to expect on the other. */
.infra-tabs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.infra-tab-card {
    display: block;
    padding: 16px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.infra-tab-card:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.infra-tab-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.infra-tab-help {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Wave 6 Task 6.1 — /infra umbrella tab body. Tab summary lists +
   host-picker grid for the Host Content tab. */
.infra-summary {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.infra-summary li {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
}
.host-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.host-picker-card {
    display: block;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease;
}
.host-picker-card:hover { border-color: var(--accent); }
.host-picker-name { margin-bottom: 4px; font-size: 13px; }
.host-picker-ip { margin-bottom: 6px; font-size: 12px; color: var(--text-tertiary); }

/* Alerts page header — h1 left, last-refreshed timestamp + manual refresh
   button right. Stable class names so future polled-list pages can reuse the
   same row layout (the Live Ops dashboard's per-card refresh strip is a
   distinct convention; this is for full-page tables). */
.alerts-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.alerts-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.auto-refresh-tick {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2026-05-05 VITALS pass — TenantDetail strip.
   --------------------------------------------------------------------------
   1-line summary of tenant vitals (status / instances / license / bundle)
   that renders above the 8 stacked panels so an admin can triage during
   an incident without scrolling. Kept as inline markup (not a primitive)
   per task spec; chip palette mirrors public.css .status-pill semantics
   so colour treatment stays consistent across admin + operator surfaces.
   -------------------------------------------------------------------------- */
.tenant-vitals-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
    padding: 6px 0;
    align-items: center;
}
.tenant-vitals-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 14px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-muted);
    white-space: nowrap;
}
.tenant-vitals-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    opacity: 0.75;
}
.tenant-vitals-value {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tenant-vitals-chip.tenant-vitals-ok {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.40);
}
.tenant-vitals-chip.tenant-vitals-ok .tenant-vitals-value { color: #10b981; }
.tenant-vitals-chip.tenant-vitals-warn {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.40);
}
.tenant-vitals-chip.tenant-vitals-warn .tenant-vitals-value { color: #f59e0b; }
.tenant-vitals-chip.tenant-vitals-bad {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.50);
}
.tenant-vitals-chip.tenant-vitals-bad .tenant-vitals-value { color: #fca5a5; }

/* Expanded suspicious-activity banner — per-key detail rows. */
.suspicious-detail-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.suspicious-detail-row {
    padding: 8px 10px;
    background: rgba(255, 77, 77, 0.04);
    border: 1px solid rgba(255, 77, 77, 0.20);
    border-radius: 4px;
    font-size: 13px;
}
.suspicious-detail-row code {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
}
.suspicious-detail-row .status-pill {
    margin-left: 8px;
}

/* Provision wizard step rail (2026-05-05). Renders the 4-step
   horizontal indicator above the wizard panels. Linear / done /
   active / pending states for the three step categories. */
.provision-steprail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 12px 0 4px;
    padding: 0;
    counter-reset: provision-step;
}
.provision-stepitem {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid var(--border, #2a2a2a);
    background: var(--surface, #1a1a1a);
    color: var(--text-muted);
    font-size: 13px;
}
.provision-stepitem.active {
    border-color: var(--accent, #00e0ff);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--accent, #00e0ff);
}
.provision-stepitem.done {
    border-color: var(--accent, #00e0ff);
    color: var(--accent, #00e0ff);
    opacity: 0.85;
}
.provision-stepnum {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.provision-stepof {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

/* Preflight checklist rows on Step 3 of the provision wizard. */
.preflight-checklist {
    list-style: none;
    margin: 12px 0;
    padding: 0;
}
.preflight-row {
    display: grid;
    grid-template-columns: 24px 200px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border, #2a2a2a);
}
.preflight-row.ok { color: var(--text); }
.preflight-row.warn { color: #f5a623; }
.preflight-row.err { color: #e74c3c; }
.preflight-mark { font-size: 16px; }
.preflight-label { font-weight: 600; }
.preflight-detail {
    font-size: 13px;
    color: var(--text-muted);
}

/* Step 4 — per-instance live tracker rows. Mirrors the existing
   .activation-checklist styling but scoped to the provision wizard. */
.provision-instance-list {
    list-style: none;
    margin: 12px 0;
    padding: 0;
}
.provision-instance-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border, #2a2a2a);
}
.provision-instance-row.ok { color: var(--text-success, #2ecc71); }
.provision-instance-row.err { color: var(--text-danger, #e74c3c); }
.provision-instance-row.queued { color: var(--text-muted); }
.provision-instance-row .mark {
    width: 18px;
    text-align: center;
    font-weight: 600;
}
.provision-instance-row .err-text {
    color: var(--text-danger, #e74c3c);
    font-size: 13px;
}

/* Wave 3.2 Item 8 — RankTiers color picker row. The native color input is
   small + the hex text input handles paste flow. Keep them side-by-side with
   the live swatch. */
.rank-tier-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rank-tier-color-row > .form-field { margin: 0; }
.rank-tier-color-row > .form-field:first-child { flex: 0 0 56px; }
.rank-tier-color-row > .form-field:nth-child(2) { flex: 1; }
.rank-tier-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* Wave 3.2 Item 11 — Feature flag toggle. The bool checkbox+label combo is
   ~16px tap target by default, below the WCAG 2.5.5 minimum 44x44 floor for
   mobile touch. Bump the click area without bloating the visual chip. */
.flag-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    cursor: pointer;
}
.flag-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

/* Wave 3.2 Item 9 — PluginDefaults Save-all + dirty-dot. Marks dirty knob
   rows with an amber dot before the key code so the operator scans for
   pending edits at a glance. */
.plugin-defaults-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.dirty-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f59e0b;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Wave 3.2 Item 16 — chart-header row keeps the section title left and the
   Export-CSV button right via flex (replaces the old float:right /
   negative-margin hack on AnalyticsCharts win-rate). */
.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}
.chart-header > .chart-header-title {
    margin: 0;
}
.chart-header-csv {
    padding: 4px 10px;
    font-size: 11px;
}

/* Wave 3.2 Item 19+20 — ServiceHealth. Wrap the AdminDataTable in form-panel
   chrome for consistency with other admin list pages, then band even rows
   so a 30+ service list scans more easily. */
.service-health-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* Wave 6 admin keyboard navigation (2026-05-06) — `?` help overlay. Mirrors
   the AdminDrawer's z-index pattern (backdrop just below the panel, panel
   centred via fixed-position transform). */
.admin-keybinding-help-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1100;
}
.admin-keybinding-help {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 92vw);
    max-height: 80vh;
    overflow: auto;
    background: var(--bg-card, #121418);
    color: var(--text-primary, #e6eaf2);
    border: 1px solid var(--border-color, #222);
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    z-index: 1101;
    padding: 0;
}
.admin-keybinding-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color, #222);
}
.admin-keybinding-help-header h2 {
    margin: 0;
    font-size: 1.1rem;
}
.admin-keybinding-help-close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.admin-keybinding-help-body {
    padding: 16px 18px 20px;
}
.admin-keybinding-help-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 22px;
    margin: 0 0 12px;
}
.admin-keybinding-help-list dt {
    text-align: right;
}
.admin-keybinding-help-list dd {
    margin: 0;
}
.admin-keybinding-help-list kbd {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--border-color, #222);
    border-bottom-width: 2px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    line-height: 1;
}
.admin-keybinding-help-foot {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}