/* FragMath Dark Theme — based on docs/requirements/ui-style.md */

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

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
    font-weight: 400;
    background: #0c0d10;
    color: #e0e0e4;
    line-height: 1.5;
    min-height: 100vh;
}

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #fff;
    outline: none;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

a {
    color: #5b8def;
    text-decoration: none;
    transition: color 0.12s;
}

a:hover {
    color: #7da5f3;
}

/* ── Layout ─────────────────────────────────────────────────── */
.page-container {
    max-width: 120ch;
    margin: 0 auto;
    padding: 0 2ch;
}

.content-area {
    padding: 2.5ch 0;
}

/* ── Navigation ─────────────────────────────────────────────── */
.nav-bar {
    background: #13141a;
    border-bottom: 1px solid #1e1f28;
    padding: 0 2ch;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-inner {
    max-width: 120ch;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 3ch;
    height: 6ch;
}

.nav-logo {
    height: 28px;
    opacity: 0.9;
}

.nav-links {
    display: flex;
    gap: 2ch;
    flex: 1;
}

.nav-links a {
    color: #888;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5ch 0;
    transition: color 0.12s;
}

.nav-links a:hover,
.nav-links a.active {
    color: #e0e0e4;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.5ch;
}

.nav-admin-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ef5b5b;
    padding: 0.25ch 0.75ch;
    border: 1px solid rgba(239, 91, 91, 0.3);
    border-radius: 3px;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid #1e1f28;
    padding: 2ch;
    margin-top: 5ch;
}

.footer-inner {
    max-width: 120ch;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #555;
}

.tz-selector {
    display: flex;
    align-items: center;
    gap: 0.75ch;
}

.tz-select {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    background: #13141a;
    color: #888;
    border: 1px solid #1e1f28;
    padding: 0.25ch 0.5ch;
    border-radius: 3px;
    max-width: 34ch;
}

.tz-select:focus {
    outline: none;
    border-color: #333;
    color: #e0e0e4;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    padding: 0.75ch 1.75ch;
    border: 1px solid #1e1f28;
    border-radius: 4px;
    background: #1a1b22;
    color: #e0e0e4;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.btn:not(:disabled):hover {
    background: #2a2c35;
    color: #fff;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: #5b8def;
    border-color: #5b8def;
    color: #fff;
}

.btn-primary:not(:disabled):hover {
    background: #4a7ce0;
}

/* ── Toggle Buttons ─────────────────────────────────────────── */
.toggle-group {
    display: inline-flex;
    background: #1a1b20;
    border-radius: 6px;
    padding: 0.25ch;
    width: fit-content;
}

.toggle-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 0.75ch 1.75ch;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #666;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.toggle-btn.active {
    background: #2a2c35;
    color: #fff;
    font-weight: 600;
}

.toggle-btn.active.pref-love { background: #22c55e; color: #fff; }
.toggle-btn.active.pref-like { background: #4ade80; color: #111; }
.toggle-btn.active.pref-ok   { background: #2a2c35; color: #fff; }
.toggle-btn.active.pref-meh  { background: #fca5a5; color: #111; }
.toggle-btn.active.pref-hate { background: #ef4444; color: #fff; }

/* ── Data Tables ────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    font-variant-numeric: tabular-nums;
}

.data-table th {
    font-size: 10px;
    font-weight: 500;
    color: #777;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    padding: 0.75ch 0.5ch;
    white-space: nowrap;
}

.data-table td {
    padding: 0.75ch 0.5ch;
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
    white-space: nowrap;
}

.data-table tbody tr {
    transition: outline 0.12s;
}

.data-table tbody tr:hover td {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: -2px;
}

.data-table .highlight-row td {
    background: rgba(91, 141, 239, 0.12);
    font-weight: 700;
}

.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: #e0e0e4; }
.emoji { font-family: 'Noto Color Emoji'; }

.data-table .text-right {
    text-align: right;
}

.data-table .text-center {
    text-align: center;
}

/* ── Match Team Table (compact) ────────────────────────────── */
.match-team-table { table-layout: fixed; }
.match-team-table th { padding: 4px 0.5ch; }
.match-team-table td { padding: 5px 0.5ch; overflow: hidden; text-overflow: ellipsis; }
.match-team-table .ctf-col { padding-left: 0.25ch; padding-right: 0.25ch; }
.match-team-table .totals-row td { font-size: 10px; font-weight: 500; color: #777; letter-spacing: 0.5px; text-transform: uppercase; }
.match-team-table .totals-row td.positive { color: #4ade80 !important; }
.match-team-table .totals-row td.negative { color: #fca5a5 !important; }

/* ── Team Colors ────────────────────────────────────────────── */
.team-red { color: #ef5b5b; }
.team-blue { color: #5b8def; }
.data-table th.team-red { color: #ef5b5b; }
.data-table th.team-blue { color: #5b8def; }

.team-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.8;
}

.team-dot-red { background: #ef5b5b; }
.team-dot-blue { background: #5b8def; }

.standin-badge { font-size: 9px; color: #888; margin-left: 0.5ch; text-transform: uppercase; letter-spacing: 0.5px; }
.standin-badge.dim { opacity: 0.6; }

/* ── Player Badges ─────────────────────────────────────────── */
.player-badges { white-space: nowrap; font-weight: 900; }
.player-badges > span { margin-right: 0.25ch; font-family: 'Noto Color Emoji'; }
.role-icon { font-size: 10px; cursor: default; }
.badge-match-mvp { color: #fbbf24; }
.badge-mvp { color: #fbbf24; }
.badge-lvp { color: #888; }
.badge-off-mvp { color: #ef5b5b; }
.badge-def-mvp { color: #5b8def; }
.badge-sup-mvp { color: #4ade80; }
.badge-lamer { color: #a0a0a8; }
.badge-godlike { color: #ef4444; }
.badge-unstoppable { color: #f59e0b; }
.badge-dominating { color: #a78bfa; }
.badge-standoff-breaker { color: #8b5cf6; }
.badge-green-save { filter: hue-rotate(100deg) saturate(1.5); }
.badge-unlucky { color: #06b6d4; }

/* ── Awards Legend ────────────────────────────────────────── */
.awards-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1ch;
    font-size: 10px;
    color: #666;
}
.role-offense { color: #ef5b5b; }
.role-defense { color: #5b8def; }
.role-mid { color: #e0c050; }
.role-hybrid { color: #a0a0a8; }

/* ── Column Dividers ───────────────────────────────────────── */
.col-divider { border-left: 1px solid #2a2c35; }

/* ── Semantic Colors ────────────────────────────────────────── */
.best-in-team { text-decoration: underline; text-underline-offset: 2px; color: #f0c040; font-weight: 600; }
.positive-strong { color: #22c55e; }
.positive { color: #4ade80; }
.positive-muted { color: #86efac; }
.neutral { color: #a0a0a8; }
.negative { color: #fca5a5; }
.negative-strong { color: #ef4444; }
.warning { color: #f87171; }
.accent { color: #5b8def; }
.muted { color: #888; }
.dim { color: #666; }

.text-strong { color: #fff; font-weight: 600; }
.text-secondary { color: #c0c0c4; }

/* ── Stat Labels ────────────────────────────────────────────── */
.stat-label {
    font-size: 9px;
    color: #555;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
}

/* ── Detail Panels ──────────────────────────────────────────── */
.panel {
    background: #13141a;
    border-radius: 8px;
    border: 1px solid #1e1f28;
    padding: 2ch;
}

.panel-raised {
    background: #1a1b22;
}

/* ── Status Badges ──────────────────────────────────────────── */
.status-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25ch 1ch;
    border-radius: 3px;
}

.status-ended {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.status-imported {
    color: #888;
    background: rgba(136, 136, 136, 0.1);
}

.status-killed {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.status-active {
    color: #5b8def;
    background: rgba(91, 141, 239, 0.1);
}

.status-live {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ── Tier Badge ─────────────────────────────────────────────── */
.tier-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 0.25ch 0.75ch;
    border-radius: 3px;
    display: inline-block;
}

.tier-0 { color: #888; background: rgba(136, 136, 136, 0.15); }
.tier-1 { color: #86efac; background: rgba(134, 239, 172, 0.1); }
.tier-2 { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.tier-3 { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.tier-4 { color: #5b8def; background: rgba(91, 141, 239, 0.1); }
.tier-5 { color: #a78bfa; background: rgba(167, 139, 250, 0.1); }
.tier-6 { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.tier-7 { color: #ef5b5b; background: rgba(239, 91, 91, 0.1); }
.tier-8 { color: #ef4444; background: rgba(239, 68, 68, 0.15); }
.tier-9 { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* ── Filters ────────────────────────────────────────────────── */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1ch;
    margin-bottom: 2ch;
    align-items: center;
}

.filter-select,
.filter-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 0.75ch 1.25ch;
    background: #1a1b22;
    color: #e0e0e4;
    border: 1px solid #1e1f28;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.12s;
}

.filter-select:focus,
.filter-input:focus {
    border-color: #5b8def;
}

.filter-select option {
    background: #1a1b22;
    color: #e0e0e4;
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 2ch;
}

.form-label {
    display: block;
    font-size: 9px;
    color: #555;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.5ch;
}

.form-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 1ch 1.5ch;
    background: #1a1b22;
    color: #e0e0e4;
    border: 1px solid #1e1f28;
    border-radius: 4px;
    outline: none;
    width: 100%;
    transition: border-color 0.12s;
}

.form-input:focus {
    border-color: #5b8def;
}

.form-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Z-Score Divider Column ─────────────────────────────────── */
th.zscore-divider-col,
td.zscore-divider-col {
    width: 1px;
    padding: 0 0.5ch;
    background: transparent;
    position: relative;
}

th.zscore-divider-col::after,
td.zscore-divider-col::after {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 50%;
    width: 1px;
    background: #1e1f28;
}

/* ── Match Team Tables ─────────────────────────────────────── */
.match-team-table {
    table-layout: fixed;
}

/* ── Heatmap Colors ─────────────────────────────────────────── */
.heatmap-cell {
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    padding: 0.5ch 0.75ch;
    border-radius: 3px;
}

/* ── Match Header ───────────────────────────────────────────── */
.match-header {
    display: flex;
    flex-wrap: wrap;
    gap: 3ch;
    align-items: baseline;
    margin-bottom: 2.5ch;
}

.match-score {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -1px;
}

.match-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2ch;
    font-size: 11px;
    color: #888;
}

/* ── Section Spacing ────────────────────────────────────────── */
.section {
    margin-bottom: 3ch;
}

.section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 1.25ch;
    padding-bottom: 0.75ch;
    border-bottom: 1px solid #1e1f28;
}

/* ── Player Link ────────────────────────────────────────────── */
.player-link {
    color: #7eb8f0;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(126, 184, 240, 0.35);
    transition: color 0.12s, text-decoration-color 0.12s;
}

.player-link:hover {
    color: #a8d4ff;
    text-decoration-color: rgba(168, 212, 255, 0.7);
}

/* ── Chart Container ────────────────────────────────────────── */
.chart-container {
    position: relative;
    height: 300px;
    background: #13141a;
    border: 1px solid #1e1f28;
    border-radius: 8px;
    padding: 1.5ch;
}

/* ── Kill Matrix ────────────────────────────────────────────── */
.kill-matrix {
    font-size: 10px;
}

.kill-matrix th,
.kill-matrix td {
    padding: 0.5ch 0.75ch;
    text-align: center;
}

.kill-matrix td.self {
    background: rgba(255, 255, 255, 0.03);
}

/* ── Insight Tags ───────────────────────────────────────────── */
.insight-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25ch 1ch;
    border-radius: 3px;
    margin: 0.25ch;
}

.insight-carry { color: #22c55e; background: rgba(34, 197, 94, 0.12); }
.insight-upset { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.insight-godlike { color: #ef4444; background: rgba(239, 68, 68, 0.15); }
.insight-hot { color: #ef5b5b; background: rgba(239, 91, 91, 0.1); }
.insight-cold { color: #5b8def; background: rgba(91, 141, 239, 0.1); }
.insight-ot { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.insight-adv { color: #888; background: rgba(136, 136, 136, 0.12); }

/* ── Loading / Empty ────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 5ch 2.5ch;
    color: #555;
    font-size: 12px;
}

.error-state {
    text-align: center;
    padding: 2.5ch;
    color: #ef4444;
    font-size: 12px;
}

/* ── Clickable Rows ─────────────────────────────────────────── */
tr.clickable {
    cursor: pointer;
    outline: none;
}

tr.clickable:hover td {
    background: #1a1b22;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-container {
        padding: 0 0.75ch;
    }

    .nav-inner {
        gap: 1.5ch;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .match-header {
        flex-direction: column;
        gap: 1ch;
    }

    .data-table {
        font-size: 10px;
    }
}

/* ── Auth Button ────────────────────────────────────────────── */
.login-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    padding: 0.5ch 1.5ch;
    background: #5b65f6;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s;
}

.login-btn:hover {
    background: #4a54e5;
    color: #fff;
}

/* ── Win/Loss Indicator ─────────────────────────────────────── */
.win-indicator { color: #4ade80; }
.loss-indicator { color: #fca5a5; }

/* ── Coming Soon ────────────────────────────────────────────── */
.coming-soon {
    font-size: 10px;
    color: #555;
    font-style: italic;
}

/* ── Compact Toggle (for use inside tables) ────────────────── */
.toggle-group-compact .toggle-btn {
    padding: 0.5ch 1ch;
    font-size: 10px;
}

/* ── Position Preference Slider ────────────────────────────── */
.position-slider-container {
    display: flex;
    align-items: center;
    gap: 1.5ch;
    margin-top: 0.5ch;
}
.position-slider-label {
    font-size: 11px;
    font-weight: 600;
    min-width: 7ch;
}
.position-slider-label:first-child { text-align: right; }
.position-slider-track {
    flex: 1;
    position: relative;
    padding: 8px 0;
}
/* Tick marks: 5 evenly spaced dots behind the slider */
.position-slider-ticks {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 7px;
    right: 7px;
    transform: translateY(-50%);
    pointer-events: none;
}
.position-slider-ticks span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #555;
}
.position-slider {
    width: 100%;
    appearance: none;
    height: 4px;
    background: #2a2c35;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.position-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e0e0e4;
    border: 2px solid #0c0d10;
    cursor: pointer;
    transition: background 0.12s;
    margin-top: -5px;
}
.position-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e0e0e4;
    border: 2px solid #0c0d10;
    cursor: pointer;
}
.position-slider:hover::-webkit-slider-thumb { background: #fff; }
.position-slider:hover::-moz-range-thumb { background: #fff; }
.position-slider-caption {
    font-size: 10px;
    color: #888;
    margin-top: 0.25ch;
    text-align: center;
}

/* ── Import Analysis ───────────────────────────────────────── */
.import-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5ch 0.75ch;
    font-size: 11px;
    border-radius: 3px;
    margin-bottom: 1px;
}

.import-player-row:hover {
    background: #1a1b22;
}

.import-swapped {
    background: rgba(245, 158, 11, 0.08);
}

.import-swap-arrow {
    font-size: 10px;
    font-weight: 700;
    margin-left: 0.5ch;
}

/* ── Position Columns ──────────────────────────────────────── */
.pos-offense { color: #67e8f9; font-weight: 600; }
.pos-defense { color: #fbbf24; font-weight: 600; }

.pos-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 0.25ch 0.75ch;
    border-radius: 3px;
}

.pos-diff-row td { background: rgba(245, 158, 11, 0.06); }

.team-separator-row td {
    padding-top: 1.25ch;
    padding-bottom: 0.5ch;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: transparent !important;
}
.team-separator-row:first-child td { padding-top: 0.25ch; }

.role-mismatch {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    font-weight: 600;
}

/* ── Ready Page ────────────────────────────────────────────── */
.ready-page {
    max-width: 72ch;
    margin: 0 auto;
    padding: 2.5ch 2ch;
}

.ready-page h1 {
    font-size: 1.25rem;
    margin-bottom: 0.5ch;
}

.ready-page .match-info {
    font-size: 11px;
    color: #888;
    margin-bottom: 2.5ch;
}

.countdown {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #f59e0b;
}

.countdown.urgent {
    color: #ef4444;
}

/* ── Ping Progress ─────────────────────────────────────────── */
.ping-progress {
    display: flex;
    flex-direction: column;
    gap: 1.25ch;
    margin-bottom: 2.5ch;
}

.ping-region {
    display: flex;
    align-items: center;
    gap: 1.25ch;
    font-size: 11px;
    padding: 1ch 1.5ch;
    background: #13141a;
    border: 1px solid #1e1f28;
    border-radius: 6px;
}

.ping-region-name {
    min-width: 17ch;
    color: #e0e0e4;
    font-weight: 500;
}

.ping-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ping-status-dot.waiting { background: #555; }
.ping-status-dot.measuring { background: #f59e0b; animation: pulse 1s infinite; }
.ping-status-dot.done { background: #4ade80; }
.ping-status-dot.error { background: #ef4444; }
.ping-status-dot.timeout { background: #f59e0b; }

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

.ping-bar-container {
    flex: 1;
    height: 4px;
    background: #1e1f28;
    border-radius: 2px;
    overflow: hidden;
}

.ping-bar {
    height: 100%;
    background: #5b8def;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.ping-value {
    min-width: 6ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #e0e0e4;
    font-weight: 600;
}

.ping-samples {
    min-width: 4ch;
    text-align: right;
    font-size: 10px;
    color: #555;
}

/* ── Ready Actions ─────────────────────────────────────────── */
.ready-actions {
    display: flex;
    gap: 1.5ch;
    margin-top: 2.5ch;
}

.ready-actions .btn {
    flex: 1;
    padding: 1.25ch 2.5ch;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.btn-danger {
    background: #2a1a1a;
    border-color: #3a2020;
    color: #ef5b5b;
}

.btn-danger:not(:disabled):hover {
    background: #3a2020;
    color: #ff6b6b;
}

/* ── Mobile Warning ────────────────────────────────────────── */
.mobile-warning {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    padding: 2ch;
    margin-bottom: 2.5ch;
    font-size: 11px;
    color: #f59e0b;
    line-height: 1.6;
}

.mobile-warning strong {
    display: block;
    font-size: 12px;
    margin-bottom: 0.75ch;
    color: #fbbf24;
}

/* ── Ping Results (comparison table) ───────────────────────── */
.ping-results {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2ch;
}

.ping-results th {
    font-size: 10px;
    font-weight: 500;
    color: #777;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    padding: 0.75ch 1ch;
}

.ping-results td {
    padding: 0.75ch 1ch;
    border-radius: 3px;
}

.ping-results .text-right {
    text-align: right;
}

/* ── Ping Source Badge ─────────────────────────────────────── */
.ping-source {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25ch 0.75ch;
    border-radius: 3px;
    display: inline-block;
}

.ping-source-import { color: #888; background: rgba(136, 136, 136, 0.1); }
.ping-source-manual { color: #5b8def; background: rgba(91, 141, 239, 0.1); }
.ping-source-ready_test { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.ping-source-profile_test { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.ping-source-live_match { color: #a78bfa; background: rgba(167, 139, 250, 0.1); }

/* ── Player List (ready page) ──────────────────────────────── */
.ready-player-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75ch;
    margin-bottom: 2ch;
}

.ready-player-chip {
    font-size: 11px;
    padding: 0.5ch 1.25ch;
    background: #1a1b22;
    border: 1px solid #1e1f28;
    border-radius: 4px;
    color: #e0e0e4;
}

.ready-player-chip.self {
    border-color: #5b8def;
    color: #5b8def;
}

.ready-player-chip.ready {
    border-color: #4ade80;
    color: #4ade80;
}

.ready-player-chip.waiting {
    border-color: #555;
    color: #888;
}

.ready-indicator {
    margin-right: 0.5ch;
}

.ready-status-summary {
    margin-top: 2ch;
    text-align: center;
}

.ready-count {
    font-size: 13px;
    font-weight: 600;
    color: #a0a0a8;
}

/* ── Tooltips ──────────────────────────────────────────────── */
[data-tooltip] {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted #555;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.5ch);
    left: 50%;
    transform: translateX(-50%);
    white-space: normal;
    width: max-content;
    max-width: 32ch;
    padding: 0.75ch 1ch;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    color: #e0e0e4;
    background: #1a1b22;
    border: 1px solid #2a2c35;
    border-radius: 4px;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    opacity: 1;
}

th[data-tooltip]::after { left: 0; transform: none; }
th.text-right[data-tooltip]::after { left: auto; right: 0; transform: none; }

/* th/td cells: skip dotted underline (would disrupt table header/row styling) */
th[data-tooltip],
td[data-tooltip] { border-bottom: none; }

/* Scrollable table wrapper */
.table-scroll { overflow-x: auto; }
.table-scroll:has([data-tooltip]:hover),
.table-scroll:has([data-tooltip]:focus) { overflow-x: clip; }

/* Inside scroll wrappers: show tooltip below header, not above (avoids overflow clipping) */
.table-scroll [data-tooltip] { border-bottom: none; }
.table-scroll [data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 0.25ch);
    left: 0;
    right: auto;
    transform: none;
    max-width: 25ch;
    display: none;   /* prevent hidden tooltips from expanding scroll width */
    opacity: 1;
}
.table-scroll [data-tooltip]:hover::after,
.table-scroll [data-tooltip]:focus::after {
    display: block;
}
/* Right-anchor tooltips near the table's right edge so they extend left, not right */
.table-scroll th:nth-last-child(-n+4)[data-tooltip]::after {
    left: auto;
    right: 0;
}

/* ── Admin ─────────────────────────────────────────────────── */
.nav-admin-link {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ef5b5b;
    padding: 0.25ch 0.75ch;
    border: 1px solid rgba(239, 91, 91, 0.3);
    border-radius: 3px;
    text-decoration: none;
    transition: color 0.12s, border-color 0.12s;
}

.nav-admin-link:hover {
    color: #ff7b7b;
    border-color: rgba(255, 123, 123, 0.4);
}

.form-row { display: flex; gap: 2ch; align-items: end; flex-wrap: wrap; margin-bottom: 1.5ch; }
.form-field { display: flex; flex-direction: column; gap: 0.5ch; }
.form-field .form-input { min-width: 36ch; }

.status-available { color: #4ade80; }
.status-running { color: #5b8def; }
.status-provisioning { color: #f87171; }
.status-terminating { color: #fca5a5; }

/* ── Admin Layout ─────────────────────────────────────────── */

/* Break out of 120ch constraint when admin layout is present */
.page-container:has(.admin-layout) {
    max-width: none;
    padding: 0;
}

.page-container:has(.admin-layout) .content-area {
    padding: 0;
}

.admin-layout {
    display: flex;
    min-height: calc(100vh - 6ch);
}

.admin-sidebar {
    width: 22ch;
    min-width: 22ch;
    background: #0c0d10;
    border-right: 1px solid #1e1f28;
    padding: 2ch 0;
    position: sticky;
    top: 6ch;
    height: calc(100vh - 6ch);
    overflow-y: auto;
}

.admin-sidebar-header {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ef5b5b;
    padding: 0.75ch 2ch;
    margin-bottom: 1ch;
    border-bottom: 1px solid #1e1f28;
}

.admin-sidebar-link {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #888;
    text-decoration: none;
    padding: 0.75ch 2ch;
    border-left: 2px solid transparent;
    transition: color 0.12s, border-color 0.12s;
}

.admin-sidebar-link:hover {
    color: #e0e0e4;
}

.admin-sidebar-link.active {
    color: #ef5b5b;
    border-left-color: #ef5b5b;
}

.admin-content {
    flex: 1;
    padding: 2.5ch 3ch;
    min-width: 0;
}

.btn-toggle-yes {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.btn-toggle-yes:hover {
    background: rgba(74, 222, 128, 0.25);
    color: #86efac;
}

.btn-toggle-no {
    background: rgba(136, 136, 136, 0.1);
    border-color: rgba(136, 136, 136, 0.2);
    color: #666;
}

.btn-toggle-no:hover {
    background: rgba(136, 136, 136, 0.2);
    color: #888;
}

/* Tier-colored select dropdowns — two-class specificity to beat .form-input background */
select.tier-select option { background: #1a1b22; color: #e0e0e4; }
.tier-select.tier-0 { color: #888; background: rgba(136, 136, 136, 0.15); }
.tier-select.tier-1 { color: #86efac; background: rgba(134, 239, 172, 0.1); }
.tier-select.tier-2 { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.tier-select.tier-3 { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.tier-select.tier-4 { color: #5b8def; background: rgba(91, 141, 239, 0.1); }
.tier-select.tier-5 { color: #a78bfa; background: rgba(167, 139, 250, 0.1); }
.tier-select.tier-6 { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.tier-select.tier-7 { color: #ef5b5b; background: rgba(239, 91, 91, 0.1); }
.tier-select.tier-8 { color: #ef4444; background: rgba(239, 68, 68, 0.15); }
.tier-select.tier-9 { color: #fff; background: rgba(255, 255, 255, 0.12); }

.group-header-row td {
    background: #1a1b22;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.modal-box {
    background: #13141a;
    border: 1px solid #1e1f28;
    border-radius: 8px;
    width: 60ch;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5ch 2ch;
    border-bottom: 1px solid #1e1f28;
}

.modal-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #e0e0e4;
}

.modal-close {
    background: none;
    border: none;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    padding: 0 0.5ch;
    line-height: 1;
}

.modal-close:hover { color: #e0e0e4; }

.modal-body { padding: 2ch; }

/* ── Reconnect Modal Override ─────────────────────────────── */
#components-reconnect-modal {
    position: fixed;
    bottom: 1.5ch;
    right: 1.5ch;
    z-index: 9999;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.5ch 1.25ch;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

#components-reconnect-modal.components-reconnect-show {
    opacity: 1;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

#components-reconnect-modal.components-reconnect-show #reconnect-text::after {
    content: 'reconnecting\2026';
}

#components-reconnect-modal.components-reconnect-failed {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

#components-reconnect-modal.components-reconnect-failed #reconnect-text::after {
    content: 'disconnected \2014 click to retry';
}

#components-reconnect-modal.components-reconnect-rejected {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

#components-reconnect-modal.components-reconnect-rejected #reconnect-text::after {
    content: 'session expired \2014 click to reload';
}

#components-reconnect-modal.components-reconnect-hide {
    opacity: 0;
}