/* ================================================================
   TeamChampionshipDrawTab.css  —  "Option C" bold sectioned panels
   Group draw + ties. Each stage is a bordered panel with a filled
   accent header (green group, amber knockout), an icon tile, a
   "Stage N" kicker and right-aligned Small actions, joined by a
   connector chevron. Tokens: Sora / DM Sans / DM Mono + indigo /
   green / amber (matched to the rest of the Team pages).
================================================================ */

.dr-page {
    font-family: 'DM Sans', sans-serif;
}

/* ── Tab header ───────────────────────────────────────────────── */
.dr-tabhead {
    margin-bottom: 14px;
}

.dr-tabhead-title {
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dr-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.dr-stat-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

    .dr-stat-pill.accent {
        color: var(--mud-palette-primary);
        background: rgba(99,102,241,0.08);
        border-color: rgba(99,102,241,0.25);
    }

.dr-none {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    padding: 0.75rem 0;
}

/* ── Stage panel ──────────────────────────────────────────────── */
.dr-stage {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

/* ── Filled accent header (group) ─────────────────────────────── */
.dr-shead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
}

.dr-stage--group .dr-shead {
    background: linear-gradient(90deg, rgba(29,158,117,0.15), rgba(29,158,117,0.03));
    border-bottom: 1px solid rgba(29,158,117,0.25);
}

.dr-sico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.dr-stage--group .dr-sico {
    background: rgba(29,158,117,0.18);
}

.app-dark .dr-stage--group .dr-sico {
    color: #34D399;
}

.app-light .dr-stage--group .dr-sico {
    color: #0F6E56;
}

.dr-stitles {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dr-skicker {
    font-family: 'DM Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.3;
}

.app-dark .dr-stage--group .dr-skicker {
    color: #34D399;
}

.app-light .dr-stage--group .dr-skicker {
    color: #0F6E56;
}

.dr-sname {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
}

.dr-sactions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.dr-sbody {
    padding: 16px;
}

/* ── Connector between stages ─────────────────────────────────── */
.dr-stage-arrow {
    display: grid;
    place-items: center;
    height: 24px;
    margin: 2px 0;
    color: var(--mud-palette-text-disabled);
}

/* ── Setup form ───────────────────────────────────────────────── */
.dr-setup-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dr-hint {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.6rem;
}

/* ── Groups ───────────────────────────────────────────────────── */
.dr-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.dr-group {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    padding: 0.75rem 0.9rem;
}

.dr-group-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dr-group-name {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dr-group-meta {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.dr-group-edit {
    margin-left: auto;
    flex-shrink: 0;
}

.dr-group-warn {
    font-size: 0.76rem;
    color: #854F0B;
    background: rgba(239,159,39,0.10);
    border: 1px solid rgba(239,159,39,0.25);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.5rem;
}

.dr-team-chips {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dr-team-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.84rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
}

.dr-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dr-seed {
    margin-left: auto;
    font-family: 'DM Mono', monospace;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* ================================================================
   Knockout stage: the bracket's own .tb-head becomes the filled
   amber section header, matching the group header exactly.
================================================================ */
.dr-stage--knockout {
    padding: 16px;
}

    .dr-stage--knockout .tb-wrap {
        margin-top: 0;
    }

    .dr-stage--knockout .tb-head {
        align-items: center;
        margin: -16px -16px 16px;
        padding: 13px 16px;
        background: linear-gradient(90deg, rgba(239,159,39,0.15), rgba(239,159,39,0.03));
        border-bottom: 1px solid rgba(239,159,39,0.25);
    }

    .dr-stage--knockout .tb-head-ico {
        background: rgba(239,159,39,0.18);
    }

.app-dark .dr-stage--knockout .tb-head-ico,
.app-dark .dr-stage--knockout .tb-head-kicker {
    color: #F59E0B;
}

.app-light .dr-stage--knockout .tb-head-ico,
.app-light .dr-stage--knockout .tb-head-kicker {
    color: #B45309;
}