/*
    Scoring page styles.
    Brand colours come from site.css :root variables — never hardcode colours here.
*/

/* ============ Format picker ============ */
.cc-format-card {
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    background: var(--cc-white);
    border: 1px solid var(--cc-grey);
    border-top: 4px solid var(--cc-yellow);
    border-radius: .75rem;
    padding: 1.25rem;
    transition: box-shadow .15s ease, transform .15s ease;
    cursor: pointer;
}

    .cc-format-card h3 {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: .5rem;
    }

    .cc-format-card p {
        color: #555;
        font-size: .9rem;
        margin-bottom: 0;
    }

    .cc-format-card .cc-arrow {
        color: var(--cc-yellow-active);
    }

    .cc-format-card:hover {
        box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .12);
        transform: translateY(-2px);
    }

/* ============ Session view — keep content compact on wide screens ============ */
#session-view {
    max-width: 860px;
    margin: 0 auto;
}

/* ============ Match rows ============ */
.cc-match {
    position: relative;
    border-bottom: 1px solid var(--cc-yellow-light);
    padding-top: 1.4rem; /* room for the court label */
    padding-bottom: .5rem;
}

    .cc-match:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

.cc-court-label {
    position: absolute;
    top: .25rem;
    left: .25rem;
    font-size: .8rem;
}

.cc-side {
    font-weight: 500;
}

@media (min-width: 768px) {
    .cc-side {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 767.98px) {
    .cc-match {
        border-bottom: 1px solid var(--cc-grey);
        padding-bottom: .75rem;
        margin-bottom: .75rem;
    }

    .cc-side {
        font-size: .85rem;
        line-height: 1.2;
        overflow-wrap: break-word;
        min-width: 0; /* allow flex items to shrink below content width */
    }

    .cc-score-box {
        min-width: 2.2rem;
        font-size: 1.05rem;
        padding: .3rem .4rem;
    }
}

/* ============ Score boxes (tap to edit) ============ */
.cc-score {
    white-space: nowrap;
    cursor: pointer;
}

    .cc-score.readonly {
        cursor: default;
        opacity: .7;
    }

.cc-score-box {
    display: inline-block;
    min-width: 2.6rem;
    padding: .35rem .5rem;
    background: var(--cc-black);
    color: var(--cc-white);
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
    border-radius: .35rem;
}

.cc-score .cc-score-box + .cc-score-box {
    margin-left: .35rem;
}

/* ============ Standings ============ */
.cc-standings thead th {
    background: var(--cc-black);
    color: var(--cc-white);
}

.cc-standings tbody tr:first-child {
    background: var(--cc-yellow-light);
    font-weight: 600;
}

/* ============ Bottom score sheet ============ */
.cc-score-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: var(--cc-white);
    border-top: 3px solid var(--cc-yellow);
    box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, .2);
}

.cc-score-sheet-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
}

/* Sheet score numbers slightly larger for emphasis while editing */
#sheet-score-a,
#sheet-score-b {
    font-size: 1.5rem;
    min-width: 3rem;
}

/* Reset action */
#sheet-reset {
    color: var(--cc-yellow-active);
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .03em;
}

    #sheet-reset:hover {
        color: var(--cc-black);
    }

/* ============ Score slider ============ */
#score-slider {
    accent-color: var(--cc-yellow);
    height: 2rem; /* bigger touch target */
}

    #score-slider::-webkit-slider-runnable-track {
        height: .4rem;
        border-radius: .25rem;
        background: linear-gradient(to right, var(--cc-yellow) 0%, var(--cc-yellow-light) 100%);
    }

    #score-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        margin-top: -0.55rem;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--cc-yellow);
        border: 3px solid var(--cc-black);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
        cursor: grab;
    }

        #score-slider::-webkit-slider-thumb:active {
            cursor: grabbing;
            background: var(--cc-yellow-active);
        }

    #score-slider::-moz-range-track {
        height: .4rem;
        border-radius: .25rem;
        background: linear-gradient(to right, var(--cc-yellow) 0%, var(--cc-yellow-light) 100%);
    }

    #score-slider::-moz-range-thumb {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--cc-yellow);
        border: 3px solid var(--cc-black);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
        cursor: grab;
    }

/* ============ Confirm modal ============ */
.cc-modal {
    border: 0;
    border-top: 4px solid var(--cc-yellow);
    border-radius: .75rem;
}

    .cc-modal .modal-header {
        border-bottom: 1px solid var(--cc-yellow-light);
    }

    .cc-modal .modal-title {
        font-weight: 700;
    }

    .cc-modal .modal-body {
        text-align: center;
        font-size: 1.05rem;
        padding: 1.25rem 1rem;
    }

.cc-modal-actions {
    border-top: 1px solid var(--cc-yellow-light);
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: 1rem;
}

    .cc-modal-actions .btn {
        width: 100%;
        margin: 0; /* override bootstrap's footer margins */
        padding: .75rem 1rem; /* ~48px tall — comfortable tap target */
        font-weight: 600;
    }

@media (max-width: 575.98px) {
    /* keep the small dialog centred with breathing room on phones */
    #reset-modal .modal-dialog {
        margin: 1rem auto;
        max-width: 92%;
    }
}

/* ============ Leaderboard bar ============ */
.cc-leaderboard {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040; /* below the score sheet (1050) */
    background: var(--cc-white);
    border-top: 3px solid var(--cc-yellow);
    box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, .15);
}

.cc-leaderboard-toggle {
    display: block;
    width: 100%;
    padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
    background: transparent;
    border: 0;
    color: var(--cc-yellow-active);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
}

    .cc-leaderboard-toggle:hover {
        color: var(--cc-black);
    }

.cc-leaderboard-panel {
    max-height: 55vh;
    overflow-y: auto;
    padding: 0 1rem calc(.5rem + env(safe-area-inset-bottom));
    max-width: 860px;
    margin: 0 auto;
}

/* keep page content clear of the fixed bar */
#session-view {
    padding-bottom: 4.5rem;
}