/* ============================================================
   ELECTRONIC SCORECARDS
   ============================================================ */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
    margin-top: auto;
}

.scorecard-main {
    width: min(1160px, calc(100% - 28px));
    margin: 0 auto;
    padding: 32px 0 56px;
    color: #173e63;
}

.scorecard-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    gap: 24px;
    align-items: center;
    margin-bottom: 22px;
    padding: clamp(23px, 4vw, 38px);
    border: 1px solid #bcd7e9;
    border-radius: 19px;
    background:
        radial-gradient(circle at 92% 10%, rgba(25, 139, 200, .19), transparent 34%),
        linear-gradient(135deg, #eef8ff, #ffffff 65%);
    box-shadow: 0 12px 28px rgba(5, 62, 113, .07);
}

.scorecard-eyebrow {
    margin: 0 0 7px;
    color: #0873b9;
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.scorecard-intro h2,
.scorecard-section-heading h2,
.active-mat-heading h2,
.match-summary h2 {
    margin: 0;
    color: #06396f;
    line-height: 1.08;
}

.scorecard-intro h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -.035em;
}

.scorecard-intro > div:first-child > p:last-child {
    max-width: 730px;
    margin: 14px 0 0;
    color: #4d6d87;
    line-height: 1.65;
}

.scorecard-local-note {
    padding: 18px;
    border-left: 5px solid #1b87bd;
    border-radius: 11px;
    background: rgba(237, 248, 254, .95);
}

.scorecard-local-note strong,
.scorecard-local-note span {
    display: block;
}

.scorecard-local-note strong {
    margin-bottom: 4px;
    color: #07527f;
}

.scorecard-local-note span {
    color: #4b6c83;
    font-size: .9rem;
    line-height: 1.45;
}

.scorecard-setup,
.scorecard-toolbar,
.match-summary,
.active-mat-card,
.scorecard-message {
    border: 1px solid #bfd6e6;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 9px 24px rgba(5, 62, 113, .065);
}

.scorecard-setup {
    padding: clamp(22px, 4vw, 34px);
}

.scorecard-section-heading {
    padding-bottom: 18px;
    border-bottom: 1px solid #dce9f2;
}

.scorecard-section-heading h2 {
    font-size: clamp(1.55rem, 3vw, 2.1rem);
}

.scorecard-section-heading > div > p:last-child {
    margin: 8px 0 0;
    color: #60758a;
}

.scorecard-setup-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 22px;
}

.scorecard-setup-form label,
.fender-form label {
    min-width: 0;
}

.scorecard-setup-form label > span,
.fender-form label > span {
    display: block;
    margin-bottom: 6px;
    color: #174b78;
    font-size: .86rem;
    font-weight: 850;
}

.scorecard-setup-form input,
.scorecard-setup-form select,
.fender-form input,
.fender-form select {
    width: 100%;
    min-height: 47px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #adc8da;
    border-radius: 9px;
    background: #fbfdff;
    color: #173e63;
    font: inherit;
}

.scorecard-setup-form input:focus,
.scorecard-setup-form select:focus,
.fender-form input:focus,
.fender-form select:focus,
.mat-identities input:focus,
.side-score input:focus {
    border-color: #0b72b8;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(11, 114, 184, .13);
}

.scorecard-setup-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.scorecard-primary-button,
.scorecard-secondary-button,
.scorecard-toolbar button,
.match-summary button,
.end-controls button,
.mat-danger-zone button {
    min-height: 44px;
    padding: 9px 15px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.scorecard-primary-button {
    background: linear-gradient(135deg, #07529a, #0c76c4);
    color: #ffffff;
}

.scorecard-secondary-button {
    border: 1px solid #afc8da;
    background: #edf5fa;
    color: #174b78;
}

.scorecard-message {
    margin-bottom: 18px;
    padding: 15px 18px;
}

.scorecard-message.warning {
    border-color: #e7cb7d;
    border-left: 6px solid #dc9b0c;
    background: #fff9e7;
    color: #6f5009;
}

.scorecard-message.error {
    border-color: #e1aaa0;
    border-left: 6px solid #b94732;
    background: #fff5f2;
    color: #812f21;
}

.scorecard-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px 18px;
}

.scorecard-toolbar > div:first-child span,
.scorecard-toolbar > div:first-child strong {
    display: block;
}

.scorecard-toolbar > div:first-child span {
    color: #60758a;
    font-size: .86rem;
}

.scorecard-toolbar > div:first-child strong {
    margin-top: 3px;
    color: #06396f;
}

.scorecard-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.scorecard-save-state {
    margin-right: 4px;
    color: #27834e;
    font-size: .79rem;
    font-weight: 800;
}

.scorecard-save-state.not-saved {
    color: #a14d24;
}

.scorecard-toolbar button,
.match-summary button {
    border: 1px solid #afc8da;
    background: #edf5fa;
    color: #174b78;
}

.scorecard-toolbar #new-match {
    background: #0a477e;
    color: #ffffff;
}

.mat-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin: 16px 0;
}

.mat-tab {
    min-width: 0;
    padding: 12px;
    border: 1px solid #b8d0e1;
    border-radius: 11px;
    background: #ffffff;
    color: #174b78;
    text-align: left;
    cursor: pointer;
}

.mat-tab span,
.mat-tab strong,
.mat-tab small {
    display: block;
}

.mat-tab span {
    color: #678096;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mat-tab strong {
    margin-top: 2px;
    font-size: 1rem;
}

.mat-tab small {
    margin-top: 5px;
    color: #60758a;
    line-height: 1.3;
}

.mat-tab.active {
    border-color: #0b64b5;
    background: #0b64b5;
    color: #ffffff;
    box-shadow: 0 5px 12px rgba(7, 71, 130, .18);
}

.mat-tab.active span,
.mat-tab.active small {
    color: rgba(255,255,255,.86);
}

.mat-tab.complete:not(.active) {
    border-color: #a9d8bb;
    background: #effbf3;
}

.match-summary {
    margin-bottom: 16px;
    padding: 18px;
}

.match-summary-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.match-summary h2 {
    font-size: 1.35rem;
}

#match-summary-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-top: 17px;
}

#match-summary-body[hidden] {
    display: none;
}

#match-summary-body > section {
    padding: 14px;
    border-radius: 10px;
    background: #f2f7fb;
}

#match-summary-body h3 {
    margin: 0 0 9px;
    color: #0a477e;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.summary-mat-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #d9e6ee;
    font-size: .85rem;
}

.summary-mat-row strong:last-child {
    text-align: right;
}

.summary-half-total {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 0;
    color: #315a79;
}

#match-summary-body .summary-overall {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0a477e;
    color: #ffffff;
}

.summary-overall strong {
    font-size: 1.35rem;
}

.active-mat-card {
    overflow: hidden;
}

.active-mat-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #073d74, #0b69b6);
    color: #ffffff;
}

.active-mat-heading .scorecard-eyebrow {
    color: #8ed6ff;
}

.active-mat-heading h2 {
    color: #ffffff;
    font-size: 1.8rem;
}

.active-end-status {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    font-size: .84rem;
    font-weight: 900;
}

.mat-identities {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    padding: 20px 24px 16px;
}

.mat-identities label > span {
    display: block;
    margin-bottom: 6px;
    color: #0a477e;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.mat-identities input {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #aec9db;
    border-radius: 9px;
    background: #fbfdff;
    color: #0b3d68;
    font: inherit;
    font-weight: 800;
}

.mat-versus {
    display: grid;
    place-items: center;
    height: 46px;
    color: #6f879a;
    font-weight: 900;
}

.burn-counters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 24px 18px;
}

.burn-counter {
    padding: 10px 12px;
    border-radius: 9px;
    background: #eef5fa;
}

.burn-counter strong,
.burn-counter span {
    display: block;
}

.burn-counter strong {
    color: #174b78;
    font-size: .84rem;
}

.burn-counter span {
    margin-top: 2px;
    color: #60758a;
    font-size: .76rem;
}

.burn-counter.at-limit {
    background: #fff3d9;
}

.burn-counter.at-limit strong,
.burn-counter.at-limit span {
    color: #80560c;
}

.burn-counter.over-limit {
    background: #ffe9e3;
}

.burn-counter.over-limit strong,
.burn-counter.over-limit span {
    color: #8b3422;
}

.score-table-wrap {
    overflow-x: auto;
    padding: 0 24px 22px;
}

.score-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #bad1e1;
    border-radius: 11px;
    table-layout: fixed;
}

.score-table th,
.score-table td {
    padding: 9px 7px;
    border-right: 1px solid #d6e3ec;
    border-bottom: 1px solid #d6e3ec;
    text-align: center;
}

.score-table tr > *:last-child {
    border-right: 0;
}

.score-table tbody tr:last-child > *,
.score-table tfoot tr:last-child > * {
    border-bottom: 0;
}

.score-table thead th {
    background: #0a477e;
    color: #ffffff;
    font-size: .78rem;
    letter-spacing: .03em;
}

.score-table thead tr:nth-child(2) th {
    background: #0b64a5;
    font-size: .72rem;
}

.score-table thead th:first-child,
.score-table tbody th,
.score-table tfoot th {
    width: 58px;
}

.score-table tbody th {
    background: #f0f6fa;
    color: #54728a;
}

.score-table tbody td {
    height: 30px;
    background: #ffffff;
    color: #0b3d68;
    font-size: 1rem;
    font-weight: 850;
}

.score-table tbody tr.is-current th,
.score-table tbody tr.is-current td {
    background: #fffbea;
}

.score-table tbody tr.is-current th {
    box-shadow: inset 5px 0 0 #e2a115;
    color: #765300;
}

.score-table tbody tr.is-future td,
.score-table tbody tr.is-future th {
    color: #a5b3be;
    background: #fbfcfd;
}

.score-table tbody tr.is-played th,
.score-table tbody tr.is-played td {
    background: #edf3f7;
}

.score-table tbody tr.has-burn th {
    box-shadow: inset 5px 0 0 #bf6552;
}

.score-table tbody tr.has-fender th,
.score-table tbody tr.has-penalty th {
    box-shadow: inset 5px 0 0 #e29c11;
}

.score-table tbody tr.is-tie-end th,
.score-table tbody tr.is-tie-end td {
    background: #f3edff;
}

.score-table .running-total {
    background: #f4f9fc;
    color: #06396f;
}

.end-marker {
    margin-left: 2px;
    color: #b64b33;
    font-size: .9em;
    font-weight: 950;
}

.has-fender .end-marker {
    color: #b76f00;
}

.score-table tfoot th,
.score-table tfoot td {
    padding-top: 11px;
    padding-bottom: 11px;
    background: #073f73;
    color: #ffffff;
    font-weight: 900;
}

.end-controls {
    margin: 0 24px 22px;
    padding: 20px;
    border: 1px solid #c3d8e7;
    border-radius: 12px;
    background: #f7fbfe;
}

.end-controls-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.end-controls-heading h3 {
    margin: 0;
    color: #073f73;
    font-size: 1.35rem;
}

.end-controls .undo-button {
    border: 1px solid #b5ccdc;
    background: #ffffff;
    color: #174b78;
}

.end-controls button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.normal-score-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 17px;
}

.normal-score-controls[hidden],
.special-actions[hidden] {
    display: none;
}

.side-score {
    padding: 14px;
    border: 1px solid #bdd3e2;
    border-radius: 10px;
    background: #ffffff;
}

.side-score > span {
    display: block;
    margin-bottom: 7px;
    color: #174b78;
    font-size: .84rem;
    font-weight: 900;
}

.side-score > div {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
}

.side-score input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #adc8da;
    border-radius: 8px;
    color: #073f73;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 900;
    text-align: center;
}

.side-score button {
    background: #0b64b5;
    color: #ffffff;
}

.away-score-control button {
    background: #0a477e;
}

.special-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.special-actions button {
    border: 1px solid #bad0df;
    background: #ffffff;
    color: #174b78;
}

.special-actions button:nth-child(2) {
    border-color: #ddb5aa;
    color: #8a3e2c;
}

.special-actions button:nth-child(3) {
    border-color: #e3c274;
    color: #745006;
    background: #fffaf0;
}

.special-entry-panel {
    margin-top: 14px;
    padding: 17px;
    border: 1px solid #d3b45e;
    border-radius: 10px;
    background: #fff9e7;
}

.special-entry-panel h4,
.special-entry-panel p {
    margin: 0;
}

.special-entry-panel h4 {
    color: #624600;
    font-size: 1.05rem;
}

.special-entry-panel > p {
    margin-top: 5px;
    color: #755d22;
    line-height: 1.5;
}

.special-lock-note {
    margin-top: 10px !important;
    font-weight: 850;
}

.special-side-buttons,
.special-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.special-side-buttons button,
.special-panel-actions button.confirm {
    background: #9b4e2e;
    color: #ffffff;
}

.special-entry-panel .panel-cancel,
.special-panel-actions button:not(.confirm) {
    margin-top: 10px;
    border: 1px solid #cdbf96;
    background: #ffffff;
    color: #6c5b2f;
}

.special-panel-actions button:not(.confirm) {
    margin-top: 0;
}

.fender-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.fender-form fieldset {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #d4c18b;
    border-radius: 8px;
}

.fender-form legend {
    padding: 0 5px;
    color: #624600;
    font-size: .82rem;
    font-weight: 850;
}

.fender-form fieldset label {
    display: block;
    color: #624600;
    font-size: .86rem;
}

.fender-form fieldset label + label {
    margin-top: 7px;
}

.fender-form input[type="radio"] {
    width: auto;
    min-height: 0;
    accent-color: #9b4e2e;
}

.card-complete-panel {
    margin-top: 17px;
    padding: 18px;
    border-radius: 10px;
    background: #eaf7ef;
    color: #23633f;
}

.card-complete-panel strong {
    font-size: 1.05rem;
}

.card-complete-panel p {
    margin: 5px 0 0;
    line-height: 1.45;
}

.card-complete-panel button {
    margin-top: 12px;
    background: #6943a5;
    color: #ffffff;
}

.scorecard-action-message {
    min-height: 21px;
    margin: 13px 0 0;
    font-size: .86rem;
    font-weight: 800;
}

.scorecard-action-message.success {
    color: #267647;
}

.scorecard-action-message.warning {
    color: #8a5700;
}

.scorecard-action-message.error {
    color: #a13e2b;
}

.mat-history {
    margin: 0 24px 20px;
    border: 1px solid #c6dae8;
    border-radius: 10px;
    background: #ffffff;
}

.mat-history summary {
    padding: 13px 15px;
    color: #174b78;
    font-weight: 850;
    cursor: pointer;
}

.mat-history-content,
#mat-history-content {
    padding: 0 15px 15px;
}

.card-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 13px;
}

.card-legend span {
    padding: 6px 9px;
    border-radius: 7px;
    background: #eef5fa;
    color: #526f85;
    font-size: .8rem;
}

.card-legend b {
    color: #9c452f;
}

#mat-history-content ol {
    margin: 0;
    padding-left: 21px;
    color: #506d83;
    line-height: 1.55;
}

#mat-history-content li + li {
    margin-top: 6px;
}

#mat-history-content > p {
    margin: 0;
    color: #60758a;
}

.mat-danger-zone {
    display: flex;
    justify-content: flex-end;
    padding: 0 24px 22px;
}

.mat-danger-zone button {
    border: 1px solid #ddb9b0;
    background: #fff5f2;
    color: #913c2a;
}

button:focus-visible,
.mat-tab:focus-visible {
    outline: 3px solid #e4a51b;
    outline-offset: 3px;
}

@media (max-width: 820px) {
    .scorecard-intro {
        grid-template-columns: 1fr;
    }

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

    .scorecard-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .scorecard-toolbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .scorecard-main {
        width: min(100% - 14px, 1160px);
        padding-top: 18px;
    }

    .scorecard-intro,
    .scorecard-setup,
    .active-mat-card,
    .match-summary,
    .scorecard-toolbar {
        border-radius: 13px;
    }

    .scorecard-setup-form,
    .normal-score-controls,
    .fender-form {
        grid-template-columns: 1fr;
    }

    .scorecard-setup-actions {
        grid-column: auto;
        flex-direction: column;
    }

    .scorecard-setup-actions button {
        width: 100%;
    }

    .scorecard-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .scorecard-save-state {
        grid-column: 1 / -1;
    }

    .scorecard-toolbar-actions button {
        width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }

    .mat-tab {
        padding: 10px;
    }

    .active-mat-heading,
    .mat-identities,
    .burn-counters,
    .score-table-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    .active-mat-heading {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .mat-identities {
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
        gap: 6px;
    }

    .mat-identities input {
        min-height: 43px;
        padding-left: 7px;
        padding-right: 7px;
        font-size: .82rem;
    }

    .burn-counters {
        gap: 6px;
    }

    .burn-counter {
        padding: 8px;
    }

    .burn-counter span {
        font-size: .68rem;
    }

    .score-table th,
    .score-table td {
        padding: 8px 4px;
    }

    .score-table thead th:first-child,
    .score-table tbody th,
    .score-table tfoot th {
        width: 42px;
    }

    .end-controls {
        margin: 0 12px 18px;
        padding: 14px;
    }

    .end-controls-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .end-controls .undo-button {
        width: 100%;
    }

    .special-actions {
        grid-template-columns: 1fr;
    }

    .special-actions button {
        width: 100%;
    }

    .special-side-buttons,
    .special-panel-actions {
        flex-direction: column;
    }

    .special-side-buttons button,
    .special-panel-actions button,
    .special-entry-panel .panel-cancel {
        width: 100%;
    }

    .mat-history {
        margin-left: 12px;
        margin-right: 12px;
    }

    .mat-danger-zone {
        padding-left: 12px;
        padding-right: 12px;
    }

    #match-summary-body {
        grid-template-columns: 1fr;
    }

    #match-summary-body .summary-overall {
        grid-column: auto;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    body {
        display: block;
        background: #ffffff !important;
    }

    .scorecard-site-header,
    .site-nav,
    .scorecard-intro,
    .scorecard-toolbar,
    .mat-tabs,
    .match-summary,
    .end-controls,
    .mat-danger-zone,
    .site-footer,
    .scorecard-message {
        display: none !important;
    }

    .scorecard-main {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .active-mat-card {
        border: 0;
        box-shadow: none;
    }

    .active-mat-heading {
        padding: 10px 12px;
        background: #073f73 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .active-mat-heading h2 {
        font-size: 18pt;
    }

    .mat-identities,
    .burn-counters,
    .score-table-wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .mat-identities input {
        border: 0;
        background: transparent;
        box-shadow: none;
        font-weight: 900;
    }

    .burn-counters {
        padding-bottom: 8px;
    }

    .score-table-wrap {
        overflow: visible;
        padding-bottom: 8px;
    }

    .score-table th,
    .score-table td {
        padding: 5px;
        font-size: 9pt;
    }

    .mat-history {
        margin: 6px 0 0;
        border: 0;
    }

    .mat-history summary {
        display: none;
    }

    #mat-history-content {
        display: block !important;
        padding: 0;
        font-size: 8pt;
    }

    .card-legend span {
        padding: 3px 5px;
    }
}