/*
 * Table format series A-D (Docs/DESIGN_SYSTEM.md, "Bracket page V2" > "Table series").
 *   .tsr-*  bracket page: tabs, Preview buttons, preview modal pieces (the modal itself reuses .tdm from bracket-page-v2.css)
 *   .tse-*  EventDetails > Configuration tab: the series editor
 * Theme tokens only (theme-v2.css); no literal colours.
 */

/* ---- bracket page ------------------------------------------------------------------------------ */

.box-Tournament-bracket.tsr-on { position: relative; }

/* Only the active pane is visible. The others stay laid out (not display:none), so the bracket viewers inside them are
   rendered at their real width and need no re-render when a tab is opened. */
.box-Tournament-bracket.tsr-on .tsr-pane:not(.is-active) {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.tsr-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
    margin: var(--spacing-md) 0;
    overflow-x: auto;
}
.tsr-tabs .sc-tab { white-space: nowrap; }

.tsr-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-md);
}

.tsr-modal-body { max-height: 60vh; overflow: auto; }
.tsr-table .tsr-state { width: 1.75rem; text-align: center; color: var(--color-success); }
.tsr-waiting { color: var(--color-text-muted); font-style: italic; }
.tsr-bye { color: var(--color-text-muted); font-size: var(--font-size-sm); letter-spacing: .04em; }

.tsr-note {
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.tsr-note--warn {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--tint-warning-bg);
    color: var(--tint-warning-fg);
}

/* ---- series editor (Configuration tab) --------------------------------------------------------- */

.tse-rows { display: flex; flex-direction: column; gap: var(--spacing-md); margin: var(--spacing-md) 0; }

.tse-row {
    padding: var(--card-padding);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}
.tse-row-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.tse-key {
    flex: 0 0 auto;
    min-width: 2rem;
    padding: 0 var(--spacing-sm);
    border-radius: var(--radius-pill);
    background: var(--tint-primary-bg);
    color: var(--tint-primary-fg);
    font-weight: 600;
    text-align: center;
}
.tse-name { flex: 1 1 auto; min-width: 0; }
.tse-fields { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.tse-field { display: flex; flex-direction: column; gap: var(--spacing-xs); min-width: 12rem; }
.tse-field > label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

.tse-places { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.tse-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
}
.tse-chip.is-on { border-color: var(--color-primary); background: var(--tint-primary-bg); color: var(--tint-primary-fg); }
.tse-chip.is-taken { opacity: 0.5; cursor: not-allowed; }

.tse-summary { margin-top: var(--spacing-xs); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.tse-summary.is-bad { color: var(--tint-danger-fg); }
.tse-summary.is-ok { color: var(--tint-success-fg); }

.tse-errors {
    margin: var(--spacing-sm) 0 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--tint-danger-bg);
    color: var(--tint-danger-fg);
    font-size: var(--font-size-sm);
}
.tse-errors ul { margin: 0; padding-left: var(--spacing-lg); }

.tse-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-md); }

@media (max-width: 640px) {
    .tse-field { min-width: 100%; }
}