/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    /* Colors */
    --color-primary: #531882;
    --color-primary-hover: #3d1160;
    --color-primary-light: #f3e8fb;
    --color-danger: #c0392b;
    --color-danger-hover: #a93226;
    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-error-bg: #f8d7da;
    --color-error-text: #721c24;
    --color-muted: #666;
    --color-muted-bg: #999;
    --color-link: #0066cc;
    --color-border: #ccc;
    --color-bg-subtle: #f5f5f5;
    --color-bg-form: #f8f9fa;
    --color-bg-form-border: #dee2e6;
    --color-bg-hover: #f0f0f0;
    --color-test-bg: #fffde7;
    --color-test-badge: #ffc107;
    --color-deleted-bg: #fdecea;

    /* Round status colors */
    --color-finished: #607d8b;
    --color-finished-light: #eceff1;
    --color-in-progress: #e67e22;
    --color-in-progress-light: #fef5e7;
    --color-pairable: #2980b9;
    --color-pairable-light: #ebf5fb;
    --color-published: #1e9e57;
    --color-published-light: #e6f6ee;
    --color-future: #95a5a6;
    --color-future-light: #f2f3f4;

    /* Surfaces */
    --surface: #f6f5f3;          /* warm off-white page background */
    --surface-raised: #ffffff;   /* cards, table headers, sticky bars */
    --text: #1d1d1f;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Radii */
    --radius-sm: 3px;
    --radius: 4px;

    /* Typography (font phase will swap these families; tokens stay) */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: var(--font-family);
    --font-body: var(--font-family);
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --line-height: 1.45;

    /* Layout */
    --content-max: 1440px;       /* content fills the laptop, capped here */
    --pad-inline: clamp(16px, 4vw, 40px);
    --header-h: 88px;            /* approx sticky header height (scroll offset math) */
    --measure: 640px;           /* narrow column for form-only pages */
}

/* ── Base ──────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    line-height: var(--line-height);
    background: var(--surface);
    color: var(--text);
}

h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.2;
}

h1 { font-size: 1.6rem; margin: 0 0 var(--space-md); }
h2 { font-size: 1.2rem; margin: var(--space-lg) 0 var(--space-sm); }
h3 { font-size: 1.02rem; margin: var(--space-md) 0 var(--space-sm); }

/* ── App shell ─────────────────────────────────────────────── */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.app-main {
    display: block;
}

.page {
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--space-lg) var(--pad-inline) var(--space-xl);
}

.page--narrow {
    max-width: var(--measure);
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
    max-width: var(--content-max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--pad-inline);
    font-size: 0.9em;
}

.nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.nav-brand {
    font-weight: bold;
    color: var(--color-primary);
    text-decoration: none;
}

.nav-brand:hover {
    text-decoration: underline;
}

.nav-sep {
    color: var(--color-border);
    user-select: none;
}

.nav-left a {
    text-decoration: none;
    color: var(--color-link);
}

.nav-left a:hover {
    text-decoration: underline;
}

.nav-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.nav-tab {
    text-decoration: none;
    color: var(--color-muted);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    font-size: 0.9em;
}

.nav-tab:hover {
    background-color: var(--color-bg-subtle);
    color: var(--color-primary);
}

.nav-tab.active {
    background-color: var(--color-primary);
    color: white;
}

.nav-tab-sep {
    display: inline-block;
    width: 1px;
    height: 1em;
    background-color: var(--color-border);
    margin: 0 var(--space-xs);
    vertical-align: middle;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    white-space: nowrap;
}

.nav-right a {
    text-decoration: none;
    color: var(--color-link);
}

.nav-right a:hover {
    text-decoration: underline;
}

.nav-logout-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.nav-link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-link);
    cursor: pointer;
    font-size: inherit;
}

.nav-link-btn:hover {
    text-decoration: underline;
    background: none;
}

.nav-logo {
    height: 28px;
    width: auto;
    vertical-align: middle;
}

/* ── Messages ─────────────────────────────────────────────── */
.messages {
    list-style: none;
    padding: 0;
}

.messages li {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: var(--radius);
}

.messages .success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.messages .error {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
}

/* ── Forms ─────────────────────────────────────────────────── */
form p {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-sizing: border-box;
}

textarea {
    resize: vertical;
}

.errorlist {
    color: var(--color-error-text);
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

/* ── Buttons ──────────────────────────────────────────────── */
button,
input[type="submit"] {
    background-color: var(--color-primary);
    color: white;
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
}

button:hover,
input[type="submit"]:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 6px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
}

.btn-secondary:hover {
    background-color: var(--color-primary-light);
}

.btn-secondary:disabled {
    background-color: #fff;
    color: var(--color-border);
    border-color: var(--color-border);
    cursor: default;
}

.btn-secondary:disabled:hover {
    background-color: #fff;
}

.btn-cancel {
    background-color: #fff;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    padding: 6px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
}

.btn-cancel:hover {
    background-color: var(--color-bg-subtle);
}

.btn-publish-needed {
    background-color: var(--color-danger);
}

.btn-publish-needed:hover {
    background-color: var(--color-danger-hover);
}

.btn-publish-current {
    background-color: var(--color-muted-bg);
    cursor: default;
}

.btn-publish-current:hover {
    background-color: var(--color-muted-bg);
}

/* Save buttons reflect unsaved-changes state: grey when clean, red when the
   form/grid has edits that haven't been saved yet. */
.btn-save {
    background-color: var(--color-muted-bg);
}

.btn-save:hover {
    background-color: var(--color-muted);
}

.btn-save.is-dirty {
    background-color: var(--color-danger);
}

.btn-save.is-dirty:hover {
    background-color: var(--color-danger-hover);
}

/* ── Tables ────────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
}

th,
td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

td {
    font-variant-numeric: tabular-nums;
}

th {
    background-color: var(--surface-raised);
    font-weight: 600;
}

tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

tbody tr:hover {
    background-color: var(--color-primary-light);
}

/* Right-align numeric columns (scores, wins, spread, ratings, table #). */
.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

td a:hover {
    background-color: var(--color-bg-hover);
    border-radius: var(--radius-sm);
}

/* Bounded scroll region: long tables scroll internally so page-level controls
   stay on screen. Header row sticks to the top of the scroll box (no dependency
   on the sticky-header height). */
.table-scroll {
    max-height: calc(100vh - var(--header-h) - 96px);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--surface-raised);
}

.table-scroll table {
    margin-bottom: 0;
}

.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    /* border-collapse drops borders on sticky cells; use an inset shadow. */
    box-shadow: inset 0 -1px 0 var(--color-border);
}

.table-narrow {
    max-width: 680px;
}

/* ── Layout utilities ─────────────────────────────────────── */
/* Title row with right-aligned page actions (replaces stacked controls). */
.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.page-head h1 {
    margin: 0;
}

.page-head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Primary content + a contextual side panel. */
.split-main-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--space-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .split-main-side {
        grid-template-columns: 1fr;
    }
}

.card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-md);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
}

/* Sticky action bar above a bounded grid (Tabulator edit pages). */
.table-toolbar {
    position: sticky;
    top: var(--header-h);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    background: var(--surface);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
}

/* Keep the toolbar controls in scale with the 13px table rows below them. */
.table-toolbar button {
    font-size: 0.8rem;
    padding: 4px 10px;
}

/* Inline simulate buttons in the pairings tables, sized to match the rows. */
.btn-sim {
    font-size: 0.8rem;
    padding: 4px 10px;
}

.table-toolbar #save-status {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.form-narrow {
    max-width: 480px;
}

/* Pairings: table + fixed-pairings editor side by side on pairable rounds. */
.pairings-main {
    max-width: 860px;
}

.pairings-body--split {
    display: grid;
    grid-template-columns: minmax(0, 860px) 300px;
    gap: var(--space-lg);
    align-items: start;
}

/* The side panel comes first in the DOM but sits in column 2, so both items
   need an explicit row 1 — otherwise grid's sparse auto-placement drops the
   main table to row 2 (below the panel). */
.pairings-body--split .pairings-main {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
}

.pairings-body--split .pairings-side {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.pairings-side h3 {
    margin-top: 0;
}

/* Keep the two player selects on one line ([name] vs [name]); the selects
   shrink to share the panel width (the dropdown still shows full names) and the
   Add button wraps to its own full-width line below. */
.pairings-side .fixed-pairing-add select {
    flex: 1 1 0;
    min-width: 0;
}

.pairings-side .fixed-pairing-add button {
    flex: 1 1 100%;
}

/* Narrow screens: stack into a single column. Clearing the explicit row/column
   placement lets the items flow in DOM order, floating the side panel on top of
   the main table. */
@media (max-width: 980px) {
    .pairings-body--split {
        grid-template-columns: 1fr;
    }
    .pairings-body--split .pairings-main,
    .pairings-body--split .pairings-side {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Standings: table beside a compact round selector. */
.standings-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    align-items: flex-start;
}

.standings-rounds {
    flex: 0 0 180px;
}

.standings-rounds h3 {
    margin-top: 0;
}

.standings-main {
    flex: 1 1 0;
    min-width: 0;
}

.round-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
}

/* Narrow screens: stack into a single column with the rounds panel on top of
   the standings table (it comes first in the DOM). */
@media (max-width: 768px) {
    .standings-rounds {
        flex: 1 1 100%;
    }
}

/* Settings formset: size the table to its content instead of stretching the
   full container width (which leaves large gaps between the few columns). */
#settings-formset table {
    width: auto;
}

#settings-formset th,
#settings-formset td {
    padding-right: var(--space-lg);
}

/* Round-number inputs hold a single value; keep them narrow so the columns
   (and the controls row above) stay tight instead of spreading. */
#settings-formset input[type="text"],
#settings-formset input[type="number"],
.settings-controls input[type="text"],
.settings-controls input[type="number"] {
    width: 5em;
}

/* Tournament detail: divisions beside a metadata card. */
.tournament-divisions h2 {
    margin-top: 0;
}

.card dl {
    margin: 0;
}

.card dl dt:first-child {
    margin-top: 0;
}

/* ── Definition Lists ─────────────────────────────────────── */
dl {
    margin-bottom: 20px;
}

dt {
    font-weight: bold;
    margin-top: 10px;
}

dd {
    margin-left: 0;
    margin-bottom: 5px;
}

/* ── Division Components ──────────────────────────────────── */
.division-test {
    background-color: var(--color-test-bg);
}

.division-deleted {
    background-color: var(--color-deleted-bg);
}

.settings-controls {
    display: flex;
    gap: var(--space-lg);
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.division-toolbar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: 12px;
}

.division-inline-form {
    background-color: var(--color-bg-form);
    border: 1px solid var(--color-bg-form-border);
    border-radius: var(--radius);
    padding: 12px var(--space-md);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.division-inline-form form {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
}

.division-inline-form input[type="text"] {
    width: 220px;
    padding: 6px 10px;
}

.test-badge {
    display: inline-block;
    background-color: var(--color-test-badge);
    color: #333;
    font-size: 0.75em;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

/* ── Round Tabs ───────────────────────────────────────────── */
.round-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 0;
}

/* Each round-tab status class sets --tab-color and --tab-bg; the base
   .round-tab rules then plug those into resting / active states. */
.round-tab {
    --tab-color: var(--color-future);
    --tab-bg: var(--color-future-light);

    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    background-color: var(--tab-bg);
    color: var(--tab-color);
}

.round-tab-finished     { --tab-color: var(--color-finished);    --tab-bg: var(--color-finished-light); }
.round-tab-in_progress  { --tab-color: var(--color-in-progress); --tab-bg: var(--color-in-progress-light); }
.round-tab-pairable     { --tab-color: var(--color-pairable);    --tab-bg: var(--color-pairable-light); }
.round-tab-published    { --tab-color: var(--color-published);   --tab-bg: var(--color-published-light); }
.round-tab-future       { --tab-color: var(--color-future);      --tab-bg: var(--color-future-light); }
.round-tab-error_no_pairings { --tab-color: #b3261e; --tab-bg: #fdecea; }

.round-tab:hover {
    filter: brightness(0.95);
}

.round-tab.active {
    background-color: var(--tab-color);
    color: white;
    border-color: var(--color-border);
    border-bottom: 2px solid var(--tab-color);
    position: relative;
    z-index: 1;
    box-shadow: inset 0 3px 0 0 currentColor;
    padding-top: calc(var(--space-xs) + 2px);
}

#round-tab-content {
    border: 1px solid var(--color-border);
    border-top: none;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.round-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.round-header h2 {
    margin: 0;
}

.btn-publish-round {
    font-size: 0.85rem;
    padding: var(--space-xs) var(--space-md);
}

.round-status-badge {
    display: inline-block;
    font-size: 0.6em;
    font-weight: bold;
    padding: 2px var(--space-sm);
    border-radius: var(--radius);
    vertical-align: middle;
    text-transform: uppercase;
}

.badge-finished { background-color: var(--color-finished-light); color: var(--color-finished); }
.badge-in-progress { background-color: var(--color-in-progress-light); color: var(--color-in-progress); }
.badge-pairable { background-color: var(--color-pairable-light); color: var(--color-pairable); }
.badge-published { background-color: var(--color-published-light); color: var(--color-published); }
.badge-future { background-color: var(--color-future-light); color: var(--color-future); }
.badge-error { background-color: #fdecea; color: #b3261e; }

/* ── Inline fixed pairings (pairings tab) ──────────────────── */
.fixed-pairings-section {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.fixed-pairings-section h3 {
    margin-top: 0;
}

.fixed-pairings-list {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
}

.fixed-pairings-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 2px 0;
}

.fixed-pairing-remove {
    line-height: 1;
    padding: 0 var(--space-sm);
}

.fixed-pairings-empty {
    color: var(--color-future);
    margin: 0 0 var(--space-md);
}

.fixed-pairing-add {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ── Utilities ────────────────────────────────────────────── */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-xl { margin-top: var(--space-xl); }
.ml-md { margin-left: var(--space-md); }
.hidden { display: none; }
.inline { display: inline; }
.input-narrow { width: 5em; }

.inline-panel {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
}

.toolbar {
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.empty-state {
    color: var(--color-muted);
    font-style: italic;
    margin: var(--space-md) 0;
}

/* "Someone else is editing this" warning shown on the edit grids. */
.presence-banner {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-in-progress-light);
    color: var(--color-in-progress);
    border: 1px solid var(--color-in-progress);
    border-radius: var(--radius);
    font-weight: 600;
}

/* Stronger styling once the data has actually gone stale (someone saved). */
.presence-banner.is-stale {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border-color: var(--color-danger);
}

/* Two edit grids side by side on a wide window, stacked when narrow. The
   minmax(0, ...) tracks + min-width:0 columns let each Tabulator table shrink
   to its share of the width (it scrolls internally) rather than overflowing. */
.editgrid-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.editgrid-columns > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .editgrid-columns {
        grid-template-columns: 1fr;
    }
}