/*
  Rules that exist because of how this app is used: one thumb, outdoors or in a
  cold hall, screen awake for an hour, while watching a netball match rather than
  the phone. Several of these are not stylistic and must not be "tidied away".
*/

:root {
    /* Tokens from the Figma file. */
    --bg: #0B1220;
    --surface: #16203A;
    --surface-raised: #1E2B4D;
    --line: #2C3A5E;
    --text-primary: #FFFFFF;
    --text-secondary: #8FA1C7;
    --success: #22C55E;
    --danger: #EF4444;
    --warning: #F59E0B;
    --brand: #E4002B;
    --opposition: #94A3B8;

    --radius-button: 14px;
    --radius-card: 20px;

    color-scheme: dark;
}

html, body {
    height: 100%;
    margin: 0;
    /* Without these, Android Chrome's pull-to-refresh reloads the app mid-match. */
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--bg);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    /* Removes the 300ms double-tap-zoom delay on every control. */
    touch-action: manipulation;
}

.app-root {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Tabular figures on anything that changes in place. Without this the clock's
   digits shift width every second and the eye reads it as a glitch. */
.tabular, .clock, .score, .count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* 48px is the floor for anything tapped during play; shooting gets 56. */
.tap-target { min-height: 48px; min-width: 48px; }
.tap-target-large { min-height: 56px; }

.muted { color: var(--text-secondary); }

.home { padding: 24px; }
.home h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.5px; }

/* BNC-008 — pre-match setup, replacing the old placeholder link on Home. */
.setup-field { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.setup-field label { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.setup-field input, .setup-field select {
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    background: var(--surface);
    color: var(--text-primary);
    padding: 0 12px;
    font-size: 16px;
}
.setup-error { color: var(--danger); font-weight: 700; margin: 8px 0 0; }

.setup-squad { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.setup-section-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.setup-squad-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: var(--radius-button);
    background: var(--surface);
}
.setup-add-player { display: flex; gap: 8px; margin-top: 4px; }
.setup-add-player input { flex: 1 1 auto; }
.setup-add-player button {
    border: none;
    border-radius: var(--radius-button);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-weight: 700;
    padding: 0 16px;
}

/*
  BNC-005 — the live capture screen. Extends the tokens/floors above; nothing
  above is restyled.
*/
.capture-screen {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    height: 100%;
    overflow: hidden;
}

/* Header */
.score-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line);
}
.score-line { display: flex; align-items: baseline; gap: 8px; font-size: 36px; font-weight: 800; }
.score-bolton { color: var(--text-primary); }
.score-sep { color: var(--text-secondary); font-weight: 400; }
.score-opposition { color: var(--opposition); }
.score-opposition-label { font-size: 13px; align-self: center; }
.header-status-line { display: flex; align-items: center; gap: 12px; }
.quarter-chip {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-raised);
    font-size: 13px;
    font-weight: 700;
}
.header-status-line .clock { font-size: 18px; font-weight: 700; }
.persistence-dot {
    width: 10px; height: 10px; border-radius: 50%;
    margin-left: auto;
}
.persistence-healthy { background: var(--success); }
.persistence-indicator {
    margin-left: auto;
    padding: 0 12px;
    border-radius: var(--radius-button);
    border: none;
    font-weight: 700;
}
.persistence-retrying { background: var(--warning); color: var(--bg); }
.persistence-blocked { background: var(--danger); color: var(--text-primary); }

/* BNC-012 — silent when the wake lock is held; only visible in the exceptional state. */
.screen-awake-warning {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--warning);
    color: var(--bg);
    font-size: 12px;
    font-weight: 700;
}

/* Shooting — the largest thing on the screen */
.shooting-section { display: flex; flex-direction: column; gap: 8px; }
.shooting-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shooting-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border-radius: var(--radius-card);
}
.shooting-card-label { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-align: center; }
.shot-goal, .shot-miss {
    border: none;
    border-radius: var(--radius-button);
    font-weight: 800;
    font-size: 16px;
    color: var(--text-primary);
}
.shot-goal { background: var(--success); }
.shot-miss { background: var(--danger); }

/* Transient strips — rebound after a Miss, position after an Error */
.transient-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: var(--surface);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
}
.strip-option {
    flex: 1 1 auto;
    border: none;
    border-radius: var(--radius-button);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-weight: 700;
}
.strip-skip { border: 1px solid var(--line); border-radius: var(--radius-button); background: transparent; }

/* Opposition */
.opposition-goal-button {
    width: 100%;
    border: none;
    border-radius: var(--radius-button);
    background: var(--opposition);
    color: var(--bg);
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Flow — centre pass and turnover */
.flow-section { display: flex; flex-direction: column; gap: 6px; }
.flow-row { display: flex; align-items: center; gap: 8px; }
.flow-row span { flex: 1 1 auto; font-size: 14px; }
.flow-row button {
    border: none;
    border-radius: var(--radius-button);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-weight: 700;
    padding: 0 16px;
}

/* Errors — one button */
.error-section { display: flex; flex-direction: column; gap: 8px; }
.error-button {
    width: 100%;
    border: none;
    border-radius: var(--radius-button);
    background: var(--warning);
    color: var(--bg);
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Last event — a button, BNC-007: tapping it opens the corrections sheet. */
.last-event-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 0;
}
.saving-marker { margin-left: auto; font-style: italic; }

/*
  BNC-007 — corrections. A full-screen sheet over the capture controls, not a
  permanent panel; position: fixed so it covers everything on the screen except
  #blazor-error-ui, which must stay above it.
*/
.corrections-sheet, .event-correction-sheet {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: var(--bg);
    overflow-y: auto;
}
.corrections-header, .correction-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
}
.corrections-done-button, .correction-back-button {
    border: none;
    border-radius: var(--radius-button);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-weight: 700;
    padding: 0 16px;
}
.corrections-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.correction-event-row {
    width: 100%;
    text-align: left;
    border: none;
    border-left: 4px solid transparent;
    border-radius: var(--radius-button);
    background: var(--surface);
    color: var(--text-primary);
    padding: 10px 12px;
}
.correction-event-row.amended { border-left-color: var(--warning); }
.correction-event-row.voided { border-left-color: var(--danger); color: var(--text-secondary); text-decoration: line-through; }
.correction-boundary-row { padding: 10px 12px; font-size: 13px; }

.correction-voided-note { padding: 4px 0; }

.correction-section { display: flex; flex-direction: column; gap: 6px; }
.correction-section-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.correction-options { display: flex; flex-wrap: wrap; gap: 8px; }
.correction-option-button {
    flex: 1 1 auto;
    border: none;
    border-radius: var(--radius-button);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-weight: 700;
}

.correction-delete-button {
    width: 100%;
    border: none;
    border-radius: var(--radius-button);
    background: var(--danger);
    color: var(--text-primary);
    font-weight: 800;
}
.correction-delete-button.armed { background: color-mix(in srgb, var(--danger) 70%, black); }
.correction-reason-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    background: var(--surface);
    color: var(--text-primary);
    padding: 0 12px;
    min-height: 48px;
}

/* Quarter advance */
.end-quarter-button, .start-quarter-button {
    width: 100%;
    border: none;
    border-radius: var(--radius-button);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-weight: 800;
}
.end-quarter-button.armed { background: var(--danger); }
.start-quarter-button { background: var(--brand); }

.full-time-note { text-align: center; color: var(--text-secondary); padding: 24px 0; }

/* BNC-009 — the scoreboard check at every break. */
.reconciliation-prompt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border-radius: var(--radius-card);
}
.reconciliation-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.reconciliation-inputs { display: flex; gap: 8px; }
.reconciliation-inputs label {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}
.reconciliation-inputs input {
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    background: var(--surface-raised);
    color: var(--text-primary);
    padding: 0 12px;
    font-size: 16px;
}
.reconciliation-actions { display: flex; align-items: center; gap: 12px; }
.reconciliation-actions button {
    border: none;
    border-radius: var(--radius-button);
    background: var(--brand);
    color: var(--text-primary);
    font-weight: 700;
    padding: 0 20px;
}
.reconciliation-saved { color: var(--success); font-weight: 700; }

.lineup-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
}

/*
  BNC-010 — the lineup editor and per-player review. A full top-level page
  (not a sheet over Capture, unlike BNC-007's corrections), so it needs its
  own scroll region within .app-root's flex column.
*/
.lineup-page {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}
.lineup-page h1 { margin: 0; font-size: 22px; }
.lineup-page h2 { margin: 0 0 8px; font-size: 16px; }

.lineup-quarter {
    padding: 12px;
    background: var(--surface);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lineup-position-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.lineup-position-row:last-child { border-bottom: none; padding-bottom: 0; }
.lineup-position-label { font-weight: 700; font-size: 13px; color: var(--text-secondary); }
.lineup-assignments { display: flex; flex-direction: column; gap: 4px; }
.lineup-assignment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--surface-raised);
    border-radius: var(--radius-button);
    font-size: 14px;
}
.lineup-remove {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
}
.lineup-add-row { display: flex; gap: 8px; }
.lineup-add-row select {
    flex: 1 1 auto;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    background: var(--surface-raised);
    color: var(--text-primary);
    padding: 0 12px;
}
.lineup-add-row button {
    min-height: 48px;
    border: none;
    border-radius: var(--radius-button);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-weight: 700;
    padding: 0 16px;
}

.lineup-save-button {
    width: 100%;
    border: none;
    border-radius: var(--radius-button);
    background: var(--brand);
    color: var(--text-primary);
    font-weight: 800;
}
.lineup-save-button:disabled { background: var(--surface-raised); color: var(--text-secondary); }

.review-section { display: flex; flex-direction: column; gap: 10px; }
.review-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.review-table th, .review-table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
}
.review-table th { color: var(--text-secondary); font-weight: 700; }
.review-unattributed { margin: 0; font-size: 13px; color: var(--text-secondary); }

.home-capture-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 24px;
    border: none;
    border-radius: var(--radius-button);
    background: var(--brand);
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
}

.home-settings-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
}

/* BNC-011 — settings. */
.settings-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}
.settings-page h1 { margin: 0 0 4px; font-size: 22px; }
.settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
}
.settings-back-link { color: var(--text-secondary); text-decoration: none; margin-top: 8px; }

/*
  The unhandled-error banner declared in the host's index.html.

  Blazor makes this visible by setting an inline `display: block` on the element,
  so the resting state must be `display: none` here and the visible design has to
  survive being forced to `block` — laying it out with flex would be silently
  overridden the moment it actually mattered.

  There was no rule at all until BNC-023, so the banner showed on every healthy
  page. That is worse than it sounds: a volunteer told their tracking has failed
  when it has not learns to ignore the banner, and it is then useless on the day
  it is telling the truth.
*/
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above every screen, including anything that positions itself later. */
    z-index: 1000;
    padding: 16px;
    /* Clears the home indicator, so the Reload control is never half off-screen. */
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    /* Falls back to flat --danger where color-mix is unsupported. The mix exists
       because white on --danger is only 3.8:1 — fine for a label, not for a
       message read at arm's length in a cold hall. Against --bg it clears 8:1. */
    background: var(--danger);
    background: color-mix(in srgb, var(--danger) 55%, var(--bg));
    border-top: 3px solid var(--danger);
    /* Lifts it off the app rather than reading as another row of the layout. */
    box-shadow: 0 -6px 20px rgb(0 0 0 / 45%);
}

/* The banner's only control, so it takes the same 48px floor as anything else
   tapped during play — and it is tapped in the one moment that already went
   wrong. */
#blazor-error-ui .reload {
    /* Block-level flex, not inline-flex: the anchor is a sibling of the message
       text, so inline puts the button inside the sentence and the message reads
       "...your recorded events [Reload] are saved". This drops it onto its own
       line without needing the host's markup changed. */
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    margin-top: 12px;
    padding: 0 24px;
    border-radius: var(--radius-button);
    background: var(--text-primary);
    color: var(--bg);
    font-weight: 700;
    text-decoration: none;
}