/* ==========================================================================
   Referee Platform — Design System v2
   Dark, professional theme with a top navbar (moved off the left sidebar).
   Same class names as before (.x-card, .btn, .badge-*, .table-clean, etc.)
   so most views didn't need to change — only this file + the layout shell.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Surfaces */
    --bg: #0e1116;
    --surface: #161a21;
    --surface-2: #1e232c;
    --surface-3: #262c37;
    --border: #2a3038;
    --border-strong: #3a424e;

    /* Text */
    --text-primary: #eef1f5;
    --text-secondary: #a7b0bd;
    --text-muted: #6d7684;

    /* Brand / primary action — orange/red, the app's main accent color */
    --pitch-100: rgba(234, 88, 12, 0.25);
    --pitch-400: #fb923c;
    --pitch-500: #ea580c;
    --pitch-600: #c2410c;
    --pitch-700: #9a3412;

    /* Reserved specifically for "start/success" actions like Start Test,
       Resume, Retake — kept green and separate from the orange brand color
       above, which is used for general primary actions (Save, Log In, etc). */
    --start-500: #34a06f;
    --start-600: #2b8459;

    /* Referee card colors — used honestly for status meaning, tuned for dark surfaces */
    --card-yellow: #f2c94c;
    --card-yellow-bg: rgba(242, 201, 76, 0.14);
    --card-yellow-ink: #f2c94c;
    --card-red: #ff6b6f;
    --card-red-bg: rgba(255, 107, 111, 0.14);
    --card-red-ink: #ff8a8d;
    --card-green-bg: rgba(52, 160, 111, 0.16);
    --card-green-ink: #4ade80;

    /* legacy aliases some views/inline styles reference */
    --ink-900: var(--text-primary);
    --ink-700: var(--text-secondary);
    --ink-500: var(--text-secondary);
    --ink-300: var(--text-muted);
    --ink-100: var(--surface-2);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-pop: 0 20px 48px rgba(0, 0, 0, 0.5);

    --font-display: 'Rajdhani', 'Inter', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    font-family: var(--font-body);
    color: var(--text-primary);
}

h1, h2, h3, .font-display {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}

a { color: inherit; }

/* ---------------- Top navbar (replaces the old left sidebar) ---------------- */

.app-navbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.navbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem;
    min-height: 64px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem 1.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    white-space: nowrap;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--pitch-500), var(--pitch-700));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 0 var(--card-red), inset 0 0 0 1px rgba(255,255,255,0.08);
}

.navbar-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
    overflow: visible;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

.user-chip {
    text-align: right;
    line-height: 1.15;
}
.user-chip .name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.user-chip .meta { font-size: 0.72rem; color: var(--text-muted); }

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary);
    overflow: hidden;
    flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- User menu (avatar + name dropdown, replaces static logout button) ---------------- */

.user-menu { position: relative; }

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
}
.user-menu-trigger:hover { background: var(--surface-2); }

.user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: 0.4rem;
    z-index: 60;
}
.user-menu-panel a, .user-menu-panel button {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.user-menu-panel a:hover, .user-menu-panel button:hover { background: var(--surface-3); color: var(--text-primary); }
.user-menu-panel .divider-line { border: none; border-top: 1px solid var(--border); margin: 0.3rem 0.2rem; }

/* Profile page avatar with upload overlay button */

.avatar-lg {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

.avatar-upload {
    position: relative;
    display: inline-block;
}
.avatar-upload-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--pitch-500);
    color: #fff;
    border: 2px solid var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
}
.avatar-upload-btn:hover { background: var(--pitch-600); }
.avatar-upload input[type="file"] { display: none; }

/* ---------------- Nav links (used inside navbar-links, horizontal pills) ---------------- */

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    background: none;
    border-width: 0 0 2px 0;
    border-style: solid;
    border-color: transparent;
    font-family: inherit;
    cursor: pointer;
}

.nav-link:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}

.nav-link.active {
    color: #fff;
    border-bottom-color: var(--pitch-500);
    background: var(--surface-2);
}

/* ---------------- Nav dropdown (for grouping e.g. Tests + Import Questions) ---------------- */

.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.nav-dropdown-caret {
    font-size: 0.6rem;
    transition: transform 0.15s ease;
    color: var(--text-muted);
}
.nav-dropdown[data-open="true"] .nav-dropdown-caret,
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: 0.4rem;
    z-index: 50;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--surface-3); color: var(--text-primary); }
.nav-dropdown-menu a.active { color: #fff; background: var(--surface-3); }

/* ---------------- Page shell ---------------- */

.app-main { padding: 2rem 1.5rem 4rem; }
.app-container { max-width: 1280px; margin: 0 auto; }

/* ---------------- Cards ---------------- */

.x-card, .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
}

.card-flush { padding: 0; }

/* ---------------- Buttons ---------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.6rem 1.15rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--pitch-500);
    color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 4px 14px rgba(52, 160, 111, 0.25);
}
.btn-primary:hover { background: var(--pitch-600); }

/* Reserved for "start/go" actions — Start Test, Resume, Retake — kept green
   and distinct from the orange btn-primary used for general actions. */
.btn-success {
    background: var(--start-500);
    color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 4px 14px rgba(52, 160, 111, 0.25);
}
.btn-success:hover { background: var(--start-600); }

.btn-dark {
    background: var(--surface-3);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.btn-dark:hover { background: #303844; }

.btn-outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.btn-outline:hover { background: var(--surface-2); }

.btn-danger {
    background: var(--card-red);
    color: #1a0505;
}
.btn-danger:hover { filter: brightness(1.08); }

.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.78rem; }
.btn-block { width: 100%; }

/* ---------------- Badges (referee cards, honestly reused) ---------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.badge::before {
    content: '';
    width: 7px;
    height: 9px;
    border-radius: 1px;
    display: inline-block;
}

.badge-green { background: var(--card-green-bg); color: var(--card-green-ink); border-color: rgba(74,222,128,0.2); }
.badge-green::before { background: var(--start-500); }

.badge-yellow { background: var(--card-yellow-bg); color: var(--card-yellow-ink); border-color: rgba(242,201,76,0.25); }
.badge-yellow::before { background: var(--card-yellow); }

.badge-red { background: var(--card-red-bg); color: var(--card-red-ink); border-color: rgba(255,107,111,0.25); }
.badge-red::before { background: var(--card-red); }

.badge-gray { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
.badge-gray::before { background: var(--text-muted); }

/* ---------------- Tables ---------------- */

.table-clean {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: separate;
    border-spacing: 0;
}
.table-clean thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border-strong);
}
.table-clean tbody td {
    padding: 0.9rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.table-clean tbody tr td:first-child { color: var(--text-primary); }
.table-clean tbody tr:last-child td { border-bottom: none; }
.table-clean tbody tr:hover { background: var(--surface-2); }

/* ---------------- Forms ---------------- */

/* Applies to EVERY <label> in the app, not just ones with class="field-label" —
   so a label typed by hand elsewhere (e.g. class="text-sm font-medium") still
   renders identically instead of looking different from the rest of the app. */
label {
    display: block;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0.35rem;
}

.field-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="file"], select, textarea {
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    padding: 0.55rem 0.8rem !important;
    font-size: 0.875rem !important;
    font-family: var(--font-body) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--pitch-500) !important;
    box-shadow: 0 0 0 3px var(--pitch-100);
}
input[type="file"] { background: transparent !important; border-style: dashed !important; padding: 0.8rem !important; }
input[type="checkbox"] { accent-color: var(--pitch-500); width: auto !important; }

/* ---------------- Alerts ---------------- */

.alert {
    border-radius: var(--radius-md);
    padding: 0.9rem 1.15rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
}
.alert-success { background: var(--card-green-bg); color: var(--card-green-ink); border-color: rgba(74,222,128,0.2); }
.alert-info { background: rgba(96,165,250,0.12); color: #93c5fd; border-color: rgba(96,165,250,0.2); }
.alert-error { background: var(--card-red-bg); color: var(--card-red-ink); border-color: rgba(255,107,111,0.2); }
.alert-warning { background: var(--card-yellow-bg); color: var(--card-yellow-ink); border-color: rgba(242,201,76,0.2); }

.link-danger { color: var(--card-red-ink); font-weight: 600; }
.link-danger:hover { text-decoration: underline; }

/* ---------------- Auth screen ---------------- */

.auth-shell {
    background: radial-gradient(circle at top left, #2b1a10, var(--bg) 60%);
}
.auth-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    border: 1px solid var(--border);
}
.auth-mark {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--pitch-500), var(--pitch-700));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}

/* ---------------- Misc ---------------- */

.stat-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 1.1rem 1.2rem;
}
.stat-tile .value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--text-primary); }
.stat-tile .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }

.divider { border-color: var(--border); }

.forum-image {
    max-width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-top: 0.75rem;
}

.pill-muted {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

/* ---------------- Searchable select (e.g. Referee picker) ---------------- */

.search-select { position: relative; }

.search-select-trigger {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-primary);
    padding: 0.55rem 0.8rem;
    font-size: 0.875rem;
    cursor: pointer;
}
.search-select-trigger:hover { border-color: var(--pitch-500); }
.search-select-trigger .placeholder { color: var(--text-muted); }
.search-select-trigger .caret { font-size: 0.65rem; color: var(--text-muted); }

.search-select-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: 0.5rem;
    z-index: 60;
}

.search-select-panel input[type="text"] {
    margin-bottom: 0.4rem;
}

.search-select-list {
    max-height: 190px;
    overflow-y: auto;
}

.search-select-option {
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.search-select-option:hover,
.search-select-option.highlighted { background: var(--surface-3); color: var(--text-primary); }

.search-select-empty {
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---------------- Modal ---------------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 9, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 70;
}

.modal-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.75rem;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border);
}
.modal-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text-primary); }
.modal-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }
.modal-close {
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--surface-2); color: var(--text-primary); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-grid .col-span-2 { grid-column: span 2 / span 2; }
@media (max-width: 560px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .col-span-2 { grid-column: span 1 / span 1; }
}

/* ---------------- Mobile hamburger menu ---------------- */

.hamburger {
    display: none;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 0.45rem 0.6rem;
    cursor: pointer;
}

.mobile-menu {
    border-top: 1px solid var(--border);
    padding: 0.75rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.mobile-menu .nav-link {
    width: 100%;
    justify-content: flex-start;
    border-bottom: none;
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mobile-menu .nav-link.active { border-left-color: var(--pitch-500); background: var(--surface-2); }
.mobile-menu .nav-dropdown-menu { position: static; box-shadow: none; margin: 0.25rem 0 0.25rem 1rem; border-color: var(--border); }
.mobile-menu-user {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 900px) {
    .navbar-links.desktop-only,
    .navbar-user .user-chip,
    .navbar-user.desktop-only { display: none; }
    .hamburger { display: inline-flex; align-items: center; justify-content: center; }
}

/* ==========================================================================
   Full responsiveness pass — desktop, laptop, tablet, mobile.
   Rather than editing every view's markup, these rules retarget the
   Tailwind utility classes already used throughout the app (grid-cols-N,
   tables, etc.) at narrower widths, so pages built with plain (non-prefixed)
   Tailwind grid classes still collapse sensibly instead of overflowing.
   ========================================================================== */

/* Any table.table-clean scrolls horizontally instead of squeezing/breaking
   the page layout on narrow screens — no markup changes needed per view. */
@media (max-width: 900px) {
    .table-clean { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .table-clean thead th, .table-clean tbody td { white-space: nowrap; }
}

/* Collapse any hard-coded (non-responsive) Tailwind grid to a single column
   below tablet width — covers stat tiles, form grids, dashboard cards, etc.
   wherever a view used e.g. class="grid grid-cols-3" without a breakpoint.
   NOTE: the test-taking question-number navigator intentionally uses its own
   .question-nav class (not grid-cols-N) precisely so it's excluded from this
   collapse — a 25-question navigator needs to stay multi-column everywhere. */
.question-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.35rem, 1fr));
    gap: 0.5rem;
}
.question-nav button {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-secondary);
    cursor: pointer;
}
.question-nav button.q-current { background: var(--pitch-500); border-color: var(--pitch-500); color: #fff; }
.question-nav button.q-answered { background: var(--card-green-bg); border-color: rgba(74,222,128,0.3); color: var(--card-green-ink); }
.question-nav button.q-unanswered { background: var(--surface-2); color: var(--text-muted); }

@media (max-width: 720px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5 {
        grid-template-columns: 1fr !important;
    }
}
/* Tablet/laptop: allow two columns rather than jumping straight to one,
   for anything explicitly declared as 3 or 4 columns. */
@media (min-width: 721px) and (max-width: 1024px) {
    .grid-cols-3, .grid-cols-4, .grid-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .navbar-inner { padding: 0.5rem 1rem; }
    .app-main { padding: 1.25rem 1rem 3rem; }
    .mobile-menu { padding: 0.75rem 1rem 1.1rem; }
    .x-card, .card { padding: 1.1rem; }
    .modal-panel { padding: 1.25rem; }
    .stat-tile { padding: 0.9rem 1rem; }
    .stat-tile .value { font-size: 1.35rem; }
}

/* Buttons and form actions that sit side-by-side on desktop stack on phones
   so tap targets stay full-width and readable. */
@media (max-width: 480px) {
    .flex.justify-between:not(.navbar-inner) { flex-wrap: wrap; gap: 0.75rem; }
}

/* ---------------- Question review table (has long free-text questions) ----------------
   The generic .table-clean mobile rule forces single-line rows with horizontal
   scroll, which is wrong here — a question can be a full sentence. Below
   640px this table instead stacks into one readable card per question, each
   field labeled, with the question text wrapping across as many lines as
   it needs instead of overlapping the answer columns. */
@media (max-width: 640px) {
    .review-table {
        display: block !important;
        overflow-x: visible !important;
        white-space: normal !important;
    }
    .review-table thead { display: none; }
    .review-table tbody, .review-table tr { display: block; width: 100%; }
    .review-table tr {
        margin-bottom: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 0.75rem 0.9rem;
        background: var(--surface-2);
    }
    .review-table td {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.35rem 0 !important;
        border: none !important;
        white-space: normal !important;
    }
    .review-table td::before {
        content: attr(data-label);
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        flex-shrink: 0;
        padding-top: 0.1rem;
    }
    .review-table td[data-label="Question"] {
        flex-direction: column;
        align-items: flex-start;
    }
    .review-table td[data-label="Question"]::before {
        margin-bottom: 0.3rem;
    }
}

/* ---------------- Login page (split screen) ---------------- */

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-visual { display: none; }
}

.login-visual {
    position: relative;
    background:
        radial-gradient(circle at 20% 20%, rgba(234, 88, 12, 0.16), transparent 45%),
        linear-gradient(160deg, #1a120a 0%, #120c07 60%, #0a0705 100%);
    overflow: hidden;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.login-visual::before {
    /* faint basketball court lines, purely decorative */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 60%, transparent 59%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.05) 61%, transparent 62%),
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: auto, 100% 3rem;
    pointer-events: none;
}
.tagline {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
}

.login-visual .brand-block { position: relative; z-index: 1; }
.login-visual .brand-block img { height: 64px; width: auto; display: block; margin-bottom: 0.75rem; }
.login-visual .tagline {
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.login-visual .features {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.login-visual .feature-title { font-weight: 700; color: #fff; font-size: 0.95rem; }
.login-visual .feature-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }

.login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--bg);
}

/* ---------------- Mobile menu divider ---------------- */
.mobile-menu hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.6rem 0;
}
.mobile-menu .mobile-user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.85rem;
}

/* ---------------- Dashboard: Forum topic rows ---------------- */

.topic-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.4rem;
    border-bottom: 1px solid var(--border);
}
.topic-row:last-child { border-bottom: none; }
.topic-row:hover { background: var(--surface-2); }

.topic-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--pitch-400);
    font-size: 0.95rem;
}

.topic-main { flex: 1; min-width: 0; }
.topic-title-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.topic-title { font-weight: 600; color: var(--text-primary); font-size: 0.9rem; }
.topic-category { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }

.badge-new {
    background: var(--pitch-500);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.topic-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 130px;
}

.topic-stats {
    display: flex;
    gap: 0.85rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 90px;
}
.stat-icon {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    opacity: 0.85;
}

.topic-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 90px;
    text-align: right;
}

@media (max-width: 860px) {
    .topic-row { flex-wrap: wrap; }
    .topic-author, .topic-stats, .topic-time { width: auto; }
}

/* ---------------- Dashboard: compact game control rows ---------------- */

.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.2rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.control-row:last-child { border-bottom: none; }
.control-row .teams { font-weight: 600; color: var(--text-primary); }
.control-row .meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }

/* ---------------- Dashboard: score ring (pure CSS conic-gradient) ---------------- */

.score-ring {
    --pct: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(var(--pitch-500) calc(var(--pct) * 1%), var(--surface-3) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.score-ring::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--surface);
}
.score-ring .score-value {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--text-primary);
}