/* ============================================================
   MATCH DASHBOARD
   Mobile first
   ============================================================ */


/* ============================================================
   PAGE
   ============================================================ */

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

    padding-bottom: var(--space-6);
}


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

.match-heading {
    display: grid;
    gap: var(--space-1);
}

.match-heading-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.match-heading .page-eyebrow {
    margin: 0;
}

.match-scheduled-at {
    color: var(--color-text-muted);

    font-size: 0.82rem;
}

.match-status {
    display: inline-flex;
    align-items: center;

    min-height: 2rem;

    padding-inline: 0.55rem;

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

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

    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.04em;

    text-transform: uppercase;
}


/* ============================================================
   SCOREBOARD
   ============================================================ */

.scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

.match-team {
    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);
}

.match-team a {
    color: inherit;

    text-decoration: none;
}

.match-team a:hover h2,
.match-team a:focus-visible h2 {
    color: var(--color-primary);
}

.match-team h2 {
    margin: 0 0 var(--space-2);

    color: var(--color-text);

    font-size: 1.25rem;
    font-weight: 850;
}

.match-team p {
    margin: var(--space-1) 0;

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

    font-size: 0.85rem;
}

.team-value {
    display: block;

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

    color: var(--color-text);

    font-size: 1.15rem;
    font-weight: 900;
}

.petty-cash {
    font-weight: 750;
}

.match-score {
    display: grid;
    place-items: center;

    min-height: 5rem;

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

.match-score strong {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);

    color: var(--color-text);

    font-size: clamp(2rem, 12vw, 3.25rem);
    font-weight: 900;
    line-height: 1;
}

.match-score strong span {
    color: var(--color-text-muted);

    font-weight: 500;
}


/* ============================================================
   SECTION TITLES
   ============================================================ */

.workflow,
.match-actions,
.post-match {
    min-width: 0;
}

.workflow > h2,
.match-actions > h2,
.post-match > h2 {
    position: relative;

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

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

    font-size: 1.25rem;
}

.workflow > h2::after,
.match-actions > h2::after,
.post-match > h2::after {
    content: "";

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

    width: 2.75rem;
    height: 3px;

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


/* ============================================================
   WORKFLOW
   ============================================================ */

.workflow {
    padding: var(--space-4);

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

    background: var(--color-surface);

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

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

    margin: 0;
    padding: 0;

    list-style: none;
}

.workflow-list li > div {
    display: grid;
    gap: 0.15rem;
}

.workflow-list li small {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}

.workflow-list li.current small,
.workflow-list li.complete small {
    color: inherit;
}

.workflow-list li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);

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

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

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

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

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

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

.workflow-list li span {
    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

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

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

    font-size: 0.78rem;
    font-weight: 850;
}

.workflow-list li.complete {
    border-color: var(--color-success);

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

.workflow-list li.complete span {
    border-color: var(--color-success);

    background: var(--color-success);
    color: #fff;
}

.workflow-list li.current {
    border-color: var(--color-accent);

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

.workflow-list li.current span {
    border-color: var(--color-accent);

    background: var(--color-accent);
    color: #fff;
}


/* ============================================================
   NEXT ACTION
   ============================================================ */

.match-actions {
    padding: var(--space-4);

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

    background: var(--color-surface);

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

.match-actions > p {
    max-width: 46rem;
}

.match-actions > p:not(.action-help) {
    color: var(--color-text);

    font-weight: 650;
}

.action-help {
    color: var(--color-text-muted);

    font-size: 0.85rem;
    line-height: 1.55;
}

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

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

    margin-top: var(--space-2);
    padding: 0.7rem var(--space-4);

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

    background: var(--color-primary);
    color: #fff;

    font-weight: 800;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
}

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

    background: var(--color-primary-hover);
    color: #fff;

    text-decoration: none;
}

.match-actions form {
    margin-top: var(--space-3);
}

.match-actions 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: #fff;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}

.match-actions button:hover,
.match-actions button:focus-visible {
    border-color: var(--color-primary-hover);

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

.match-actions button:disabled,
.action-button[aria-disabled="true"] {
    border-color: var(--color-border);

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

    cursor: not-allowed;

    opacity: 0.75;
}

/* ============================================================
   ACTION TEAM GRIDS
   ============================================================ */

.roster-ready-grid,
.fan-factor-grid,
.sheet-status-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);

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

.roster-ready-grid article,
.fan-factor-grid article,
.sheet-status-grid article {
    min-width: 0;

    padding: var(--space-4);

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

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

.roster-ready-grid article > strong,
.fan-factor-grid article > strong,
.sheet-status-grid article > strong {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--color-text);

    font-size: 1rem;
    font-weight: 850;
}

.roster-ready-grid article p,
.fan-factor-grid article p,
.sheet-status-grid article p {
    margin: var(--space-2) 0;

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


/* ============================================================
   FAN FACTOR FORMS
   ============================================================ */

.fan-factor-grid form {
    display: grid;
    gap: var(--space-2);

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

.fan-factor-grid label {
    color: var(--color-text);

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

.fan-factor-grid input {
    width: 100%;
    min-height: var(--touch-target);
}


/* ============================================================
   POST MATCH
   ============================================================ */

.post-match {
    padding: var(--space-4);

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

    background: var(--color-surface);

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

.post-match-grid {
    display: grid;
    gap: var(--space-3);
}

.post-match-grid article {
    min-width: 0;

    padding: var(--space-4);

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

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

.post-match-grid h3 {
    margin: 0 0 var(--space-2);

    font-size: 1rem;
}

.post-match-grid p {
    margin: var(--space-1) 0;

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

    font-size: 0.85rem;
}

/* ============================================================
   DICE CONSOLE
   ============================================================ */

.dice-console {
    padding: var(--space-4);

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

    background: var(--color-surface);

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

.dice-console-heading {
    display: grid;
    gap: var(--space-2);

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

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

.dice-console-heading .page-eyebrow {
    margin: 0 0 var(--space-1);
}

.dice-console-heading h2 {
    margin: 0;

    font-size: 1.25rem;
}

.dice-console-heading > p {
    margin: 0;

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

    font-size: 0.82rem;
}

.dice-console-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.dice-team {
    min-width: 0;

    padding: var(--space-4);

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

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

.dice-team h3 {
    margin: 0 0 var(--space-3);

    font-size: 1rem;
    font-weight: 850;
}

.dice-entry-list {
    display: grid;
    gap: var(--space-2);

    margin: 0;
    padding: 0;

    list-style: none;
}

.dice-entry {
    display: grid;
    gap: 0.25rem;

    padding: var(--space-3);

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

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

.dice-entry strong,
.dice-pending strong {
    color: var(--color-text);

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

.dice-roll {
    font-size: 1rem;
    font-weight: 900;
}

.dice-result {
    color: var(--color-text-muted);

    font-size: 0.8rem;
}

.dice-pending {
    display: grid;
    gap: 0.25rem;

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

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

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

.dice-pending span,
.dice-empty {
    color: var(--color-text-muted);

    font-size: 0.8rem;
}

.dice-empty {
    margin: 0;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 600px) {
    .dice-console {
        padding: var(--space-5);
    }

    .dice-console-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dice-console-heading {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .match-dashboard {
        padding-bottom: var(--space-7);
    }

    .workflow,
    .match-actions,
    .post-match {
        padding: var(--space-5);
    }

    .action-button,
    .match-actions button {
        width: auto;
    }

    .roster-ready-grid,
    .fan-factor-grid,
    .sheet-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


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

@media (min-width: 800px) {
    .scoreboard {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        align-items: stretch;
    }

    .match-team-away {
        text-align: right;
    }

    .match-score {
        min-width: 8rem;
    }

    .workflow-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .workflow-list li {
        grid-template-columns: 1fr;
        justify-items: center;
        align-content: start;
        gap: var(--space-2);

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

        text-align: center;
        overflow-wrap: anywhere;
    }

    .post-match-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}