/* ============================================================
   SEASON DASHBOARD
   Mobile first
   ============================================================ */

.season-dashboard {
    display: grid;
    gap: var(--space-5);
}


/* ============================================================
   SEASON HEADER
   ============================================================ */

.season-dashboard > header {
    position: relative;

    display: grid;
    gap: var(--space-3);

    padding: var(--space-5) var(--space-4);

    overflow: hidden;

    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: var(--radius-lg);

    background:
            linear-gradient(
                    135deg,
                    var(--color-header) 0%,
                    var(--color-header-secondary) 100%
            );

    color: var(--color-white);

    box-shadow: var(--shadow-md);
}

.season-dashboard > header::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 5px;
    height: 100%;

    background: var(--color-primary);
}

.season-dashboard > header .page-eyebrow {
    margin: 0;

    color: #b9bdc2;
}

.season-dashboard > header h1 {
    color: var(--color-white);
}

.season-dashboard > header dl {
    display: grid;
    gap: var(--space-2);

    margin: var(--space-2) 0 0;
}

.season-dashboard > header dl > div {
    min-width: 0;

    padding: var(--space-3);

    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: var(--radius-md);

    background: rgb(255 255 255 / 0.06);
}

.season-dashboard > header dt {
    margin-bottom: var(--space-1);

    color: #b9bdc2;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.season-dashboard > header dd {
    margin: 0;

    color: var(--color-white);

    font-weight: 700;
}

.season-dashboard > header dd p {
    margin: var(--space-1) 0 0;

    color: #d2d5d8;

    font-size: 0.82rem;
    font-weight: 500;
}


/* ============================================================
   MAIN SECTIONS
   ============================================================ */

.season-dashboard > section {
    min-width: 0;

    padding: var(--space-4);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    box-shadow: var(--shadow-sm);
}

.season-dashboard > section > h2 {
    position: relative;

    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);

    border-bottom: 1px solid var(--color-border);
}

.season-dashboard > section > h2::after {
    content: "";

    position: absolute;
    bottom: -1px;
    left: 0;

    width: 3rem;
    height: 3px;

    background: var(--color-primary);
}

.season-dashboard section h3 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);

    font-size: 1rem;
}

.season-dashboard section h2 + h3 {
    margin-top: 0;
}

.season-dashboard section p {
    color: var(--color-text-muted);
}

.season-dashboard section strong {
    color: var(--color-text);
}


/* ============================================================
   REGISTRATION / TEAM
   ============================================================ */

.season-dashboard article {
    padding: var(--space-4);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface-secondary);
}

.season-dashboard article h3 {
    margin-top: 0;
}

.season-dashboard article p:last-child {
    margin-bottom: 0;
}

.season-dashboard article a {
    font-weight: 750;
}


/* ============================================================
   COMMISSIONER AREA
   ============================================================ */

.season-dashboard > section section {
    margin-block: var(--space-4);
    padding: var(--space-4);

    border: 1px solid #d8bd86;
    border-radius: var(--radius-md);

    background: var(--color-warning-soft);
}

.season-dashboard > section section h3 {
    margin-top: 0;

    color: #79510d;
}

.season-dashboard > section section p {
    color: #6f541f;
}


/* ============================================================
   LISTS
   ============================================================ */

.season-dashboard ul {
    display: grid;
    gap: var(--space-2);

    margin: var(--space-3) 0;
    padding: 0;

    list-style: none;
}

.season-dashboard li {
    min-width: 0;
}

.season-dashboard li > a {
    display: flex;
    align-items: center;

    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-3);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    background: var(--color-surface-secondary);
    color: var(--color-text);

    font-weight: 700;
    text-decoration: none;
}

.season-dashboard li > a:hover,
.season-dashboard li > a:focus-visible {
    border-color: var(--color-border-strong);

    background: var(--color-surface-strong);
    color: var(--color-primary);

    text-decoration: none;
}


/* ============================================================
   TABLES
   ============================================================ */

.season-dashboard .table-wrapper {
    width: 100%;
    margin-block: var(--space-3);

    overflow-x: auto;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    -webkit-overflow-scrolling: touch;
}

.season-dashboard table {
    width: 100%;
    min-width: 42rem;

    border-collapse: collapse;

    font-size: 0.82rem;
}

.season-dashboard th,
.season-dashboard td {
    padding: 0.7rem 0.75rem;

    border-bottom: 1px solid var(--color-border);

    text-align: left;
    white-space: nowrap;
}

.season-dashboard thead th {
    background: var(--color-header);
    color: #f1f2f3;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.season-dashboard tbody tr:last-child th,
.season-dashboard tbody tr:last-child td {
    border-bottom: 0;
}

.season-dashboard tbody tr:nth-child(even) {
    background: var(--color-surface-secondary);
}

.season-dashboard tbody a {
    font-weight: 750;
    text-decoration: none;
}

.season-dashboard tbody a:hover,
.season-dashboard tbody a:focus-visible {
    text-decoration: underline;
}


/* ============================================================
   FORMS
   ============================================================ */

.season-dashboard form {
    display: grid;
    gap: var(--space-3);

    max-width: 36rem;

    margin-top: var(--space-4);
}

.season-dashboard form p {
    display: grid;
    gap: var(--space-2);

    margin: 0;
}

.season-dashboard form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: var(--touch-target);

    padding: 0.7rem var(--space-4);

    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);

    background: var(--color-primary);
    color: var(--color-white);

    font-weight: 800;

    cursor: pointer;
}

.season-dashboard form button:hover,
.season-dashboard form button:focus-visible {
    border-color: var(--color-primary-hover);

    background: var(--color-primary-hover);
}

.season-dashboard button:disabled {
    min-height: var(--touch-target);

    padding: 0.7rem var(--space-4);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    background: var(--color-surface-strong);
    color: var(--color-text-soft);

    font-weight: 750;

    cursor: not-allowed;
}


/* ============================================================
   ROUNDS
   ============================================================ */

.season-round {
    margin-top: var(--space-3);
}

.season-round + .season-round {
    margin-top: var(--space-4);
}

.season-round > header {
    display: grid;
    gap: var(--space-1);

    margin-bottom: var(--space-3);
}

.season-round > header h3 {
    margin: 0;
}

.season-round > header p {
    margin: 0;

    font-size: 0.8rem;
}


/* ============================================================
   MATCH CARDS
   ============================================================ */

.season-dashboard > section > ul > li > article {
    display: grid;
    gap: var(--space-2);
}

.season-dashboard > section > ul > li > article > p:first-child {
    margin: 0;

    color: var(--color-primary);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.season-dashboard > section > ul > li > article h3 {
    margin: 0;
}

.season-dashboard > section > ul > li > article h3 a {
    color: var(--color-text);

    text-decoration: none;
}

.season-dashboard > section > ul > li > article h3 a:hover,
.season-dashboard > section > ul > li > article h3 a:focus-visible {
    color: var(--color-primary);
}

.season-dashboard > section > ul > li > article p:last-child {
    margin: 0;
}

/* ============================================================
   RECENT RESULTS
   ============================================================ */

.recent-results-list {
    display: grid;
    gap: var(--space-2);

    margin: 0;
    padding: 0;

    list-style: none;
}

.recent-result-card {
    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface);
}

.recent-result-round {
    margin: 0;

    padding:
            var(--space-2)
            var(--space-3);

    border-bottom: 1px solid var(--color-border);

    background: var(--color-surface-secondary);
    color: var(--color-text-muted);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.recent-result-main,
.recent-result-main:visited {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;
    gap: var(--space-2);

    min-height: 72px;

    padding: var(--space-3);

    color: var(--color-text);

    text-decoration: none;
}

.recent-result-main:hover,
.recent-result-main:focus-visible {
    background: var(--color-surface-secondary);
    color: var(--color-text);

    text-decoration: none;
}

.recent-result-main .recent-result-team {
    min-width: 0;

    color: var(--color-text);

    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.2;

    overflow-wrap: anywhere;
}

.recent-result-main .recent-result-team-home {
    text-align: right;
}

.recent-result-main .recent-result-team-away {
    text-align: left;
}

.recent-result-main .recent-result-score {
    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    min-width: 5rem;

    color: var(--color-primary);

    font-family: var(--font-family-heading);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;

    text-align: center;
    white-space: nowrap;
}

.recent-result-main .recent-result-score > span {
    color: var(--color-primary);
}

.recent-result-main .recent-result-score .recent-result-score-separator {
    padding-inline: 0.3rem;

    color: var(--color-text-soft);
}


/* ============================================================
   TABLET AND UP
   ============================================================ */

@media (min-width: 600px) {
    .season-dashboard {
        gap: var(--space-6);
    }

    .season-dashboard > header {
        padding: var(--space-5);
    }

    .season-dashboard > header dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .season-dashboard > section {
        padding: var(--space-5);
    }

    .season-dashboard form button {
        width: auto;
        justify-self: start;
    }

    .season-dashboard button:disabled {
        width: auto;
    }
    .recent-result-main {
        gap: var(--space-4);

        padding:
                var(--space-4)
                var(--space-5);
    }

    .recent-result-main .recent-result-team {
        font-size: 0.95rem;
    }

    .recent-result-main .recent-result-score {
        min-width: 5.75rem;

        font-size: 1.75rem;
    }
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 900px) {
    .season-dashboard > header dl {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .season-dashboard table {
        min-width: 0;
        font-size: 0.9rem;
    }

    .season-dashboard th,
    .season-dashboard td {
        padding: 0.8rem 1rem;
    }
}

/* ============================================================
   REGISTRATION PROGRESS
   ============================================================ */

.season-dashboard .registration-progress {
    margin-block: var(--space-4);
    padding: 0;

    border: 0;

    background: transparent;
}

.season-dashboard .registration-progress > h3 {
    margin: 0 0 var(--space-3);

    color: var(--color-text);
}

.registration-status-list {
    display: grid;
    gap: var(--space-2);
}

.season-dashboard .registration-status-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap:
            var(--space-1)
            var(--space-3);

    padding: var(--space-3);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface-secondary);
}

.registration-status-card__header {
    display: contents;
}

.registration-status-card__icon {
    grid-row: 1 / span 3;

    align-self: start;

    color: var(--color-primary);

    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.2;
}

.registration-status-card__header strong {
    grid-column: 2;

    color: var(--color-text);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.season-dashboard .registration-status-card__coach {
    grid-column: 2;

    margin: 0;

    color: var(--color-text);

    font-weight: 750;
}

.registration-status-card__team {
    grid-column: 2;

    color: var(--color-primary);

    font-weight: 800;
    text-decoration: none;
}

.registration-status-card__team:hover,
.registration-status-card__team:focus-visible {
    text-decoration: underline;
}

.season-dashboard .registration-status-card__roster {
    grid-column: 2;

    margin: 0;

    color: var(--color-text-muted);

    font-size: 0.8rem;
}


/* ============================================================
   REGISTRATION PROGRESS — TABLET AND UP
   ============================================================ */

@media (min-width: 600px) {
    .registration-status-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================
   COACH SPACE
   Mobile first
   ============================================================ */

.season-dashboard .season-my-space {
    border-color: var(--color-border-strong);
}

.season-my-space-status {
    margin-top: 0;

    font-weight: 750;
}

.season-dashboard .season-my-team {
    display: grid;
    gap: var(--space-4);

    margin-top: var(--space-3);

    padding: var(--space-4);

    border-color: var(--color-border-strong);

    background: var(--color-surface-secondary);
}

.season-my-team__content {
    min-width: 0;
}

.season-my-team__content .page-eyebrow {
    margin: 0 0 var(--space-1);

    color: var(--color-primary);
}

.season-dashboard .season-my-team__content h3 {
    margin: 0;

    font-size: 1.25rem;
}

.season-my-team__content p:last-child {
    margin: var(--space-1) 0 0;

    color: var(--color-text-muted);
}

.season-my-team__actions {
    display: grid;
    gap: var(--space-2);
}

.season-primary-action,
.season-primary-action:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: var(--touch-target);

    padding: 0.7rem var(--space-4);

    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);

    background: var(--color-primary);
    color: var(--color-white);

    font-weight: 800;
    text-decoration: none;
}

.season-primary-action:hover,
.season-primary-action:focus-visible {
    border-color: var(--color-primary-hover);

    background: var(--color-primary-hover);
    color: var(--color-white);

    text-decoration: none;
}

.season-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(--touch-target);

    color: var(--color-text-muted);

    font-size: 0.85rem;
    font-weight: 700;
}

.season-empty-action {
    display: grid;
    gap: var(--space-3);

    margin-top: var(--space-3);
}

.season-empty-action h3,
.season-empty-action p {
    margin: 0;
}


/* ============================================================
   LIVE MATCHES
   ============================================================ */

.season-match-list {
    margin-bottom: 0;
}

.season-dashboard .season-match-card {
    display: grid;
    gap: var(--space-3);

    padding: var(--space-4);

    border-color: var(--color-border-strong);

    background: var(--color-surface-secondary);
}

.season-match-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.season-dashboard .season-match-round {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.season-match-status {
    flex-shrink: 0;

    padding: 0.25rem 0.5rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    background: var(--color-surface);

    color: var(--color-text-muted);

    font-size: 0.7rem;
    font-weight: 800;
}

.season-dashboard .season-match-card h3 {
    margin: 0;

    font-size: 1rem;
}

.season-match-card h3 a,
.season-match-card h3 a:visited {
    color: var(--color-text);

    text-decoration: none;
}

.season-match-card h3 a:hover,
.season-match-card h3 a:focus-visible {
    color: var(--color-primary);
}

.season-match-action,
.season-match-action:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: var(--touch-target);

    padding: var(--space-2) var(--space-3);

    border-radius: var(--radius-sm);

    background: var(--color-primary);
    color: var(--color-white);

    font-weight: 800;
    text-decoration: none;
}

.season-match-action:hover,
.season-match-action:focus-visible {
    background: var(--color-primary-hover);
    color: var(--color-white);

    text-decoration: none;
}


/* ============================================================
   COMMISSIONER AREA
   ============================================================ */

.season-dashboard .season-commissioner {
    margin-top: var(--space-3);
}

.season-dashboard .season-commissioner > h2 {
    color: var(--color-text-muted);
}


/* ============================================================
   TABLET AND UP
   ============================================================ */

@media (min-width: 600px) {
    .season-dashboard .season-my-team {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: center;
    }

    .season-my-team__actions {
        justify-items: end;
    }

    .season-primary-action {
        width: auto;
    }

    .season-match-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 900px) {
    .season-dashboard .season-my-team {
        padding: var(--space-5);
    }

    .season-dashboard .season-match-card {
        height: 100%;
    }
}