/* ============================================================
   PUBLIC CUP PAGE
   ============================================================ */

.public-cup-selector {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:20px 0 24px;
}

.public-cup-selector a {
    padding:10px 16px;
    border:1px solid #c7d8e7;
    border-radius:999px;
    background:#ffffff;
    color:#0b4f8a;
    font-weight:800;
    text-decoration:none;
}

.public-cup-selector a.active {
    background:#0b65b1;
    border-color:#0b65b1;
    color:#ffffff;
}


.cup-public-intro,
.cup-public-empty {
    margin-bottom:22px;
    padding:20px;
    border:1px solid #d6e1ea;
    border-radius:16px;
    background:#ffffff;
}

.cup-public-intro h2,
.cup-public-empty h3 {
    margin:0 0 6px;
}

.cup-public-intro p,
.cup-public-empty p {
    margin:0;
    color:#607386;
}


.cup-rounds {
    display:grid;
    gap:22px;
}

.cup-round-card {
    overflow:hidden;
    border:1px solid #d4e0e9;
    border-radius:16px;
    background:#ffffff;
    box-shadow:
        0 8px 22px
        rgba(23, 54, 84, .06);
}


.cup-round-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 20px;
    background:#f4f8fb;
    border-bottom:1px solid #dbe5ec;
}

.cup-round-label {
    margin:0 0 3px;
    color:#0b65b1;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.12em;
}

.cup-round-header h3 {
    margin:0;
    color:#073d70;
}

.cup-round-header time {
    color:#50677c;
    font-weight:800;
    white-space:nowrap;
}


.cup-public-round-note {
    margin:16px 20px 0;
    padding:13px 15px;
    border-left:4px solid #d99b1d;
    border-radius:8px;
    background:#fff8e9;
    color:#594513;
}

.cup-public-round-note strong {
    display:block;
    margin-bottom:3px;
}

.cup-public-round-note p {
    margin:0;
    line-height:1.45;
}


.cup-match-list {
    padding:10px 20px 18px;
}

.cup-public-match {                                             
    display:grid;
    grid-template-columns:
        54px
        minmax(0, 1fr)
        auto;
    align-items:center;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid #e3eaf0;
}

.cup-public-match:last-child {
    border-bottom:0;
}

.cup-public-match-number {
    color:#688198;
    font-weight:900;
}


.cup-public-pairing {
    display:grid;
    grid-template-columns:
        minmax(0, 1fr)
        24px
        minmax(0, 1fr);
    align-items:center;
    gap:8px;
}

.cup-public-team {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-width:0;
}

.cup-public-team-name {
    font-weight:800;
}

.cup-public-team-name.is-placeholder {
    color:#8a98a5;
    font-style:italic;
    font-weight:700;
}



.cup-public-team.is-winner
.cup-public-team-name {
    color:#17643a;
}

.cup-public-team.is-winner
.cup-public-team-name::after {
    content:" ✓";
}

.cup-public-score {
    min-width:28px;
    font-size:1.05rem;
    text-align:center;
}

.cup-public-v {
    color:#75899b;
    font-weight:700;
    text-align:center;
}

/*moves the cup matches "v" in cups.php */
.cup-public-match-state {
    display:flex;
    align-items:center;
    width: 290px;
    min-width: 290px;
    justify-content:flex-end;
    gap:8px;
}

.cup-state {
    padding:5px 8px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:800;
    white-space:nowrap;
}

.cup-state.completed {
    background:#e5f5eb;
    color:#17643a;
}

.cup-state.scheduled {
    background:#e7f2fb;
    color:#075b9e;
}

.cup-state.waiting {
    background:#eef1f4;
    color:#687987;
}

button.cup-state.update {
    border:1px solid transparent;
    font:inherit;
    font-size:.75rem;
    font-weight:800;
    cursor:pointer;
}

button.cup-state.update:hover,
button.cup-state.update:focus-visible {
    box-shadow:0 0 0 3px rgba(11, 101, 177, .18);
    outline:0;
}

.cup-state.abandoned {
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
    padding:7px 11px;
    border-color:#e6ae42 !important;
    background:#fff0c7;
    color:#7a4800;
}

.cup-state.abandoned small {
    color:inherit;
    font-size:.66rem;
    font-weight:700;
}


.cup-form-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:48px;
    min-height:32px;
    padding:5px 9px;
    border-radius:8px;
    font:inherit;
    font-size:.78rem;
    font-weight:900;
}

button.cup-form-button {
    border:0;
    cursor:pointer;
}

.cup-form-button.active {
    background:#198754;
    color:#ffffff;
}

.cup-form-button.disabled {
    background:#e4e8eb;
    color:#8a969f;
}


/* ============================================================
   MATCH CARD MODAL
   ============================================================ */

.match-card-modal[hidden] {
    display:none;
}

.match-card-modal {
    position:fixed;
    z-index:50000;
    inset:0;
}

.match-card-modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0, 20, 40, .72);
}

.match-card-modal-window {
    position:absolute;
    top:4vh;
    right:50%;
    width:min(760px, 94vw);
    height:92vh;
    transform:translateX(50%);
    overflow:hidden;
    border-radius:14px;
    background:#ffffff;
    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .35);
}

.match-card-modal-close {
    position:absolute;
    z-index:2;
    top:8px;
    right:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:#0a3f70;
    color:#ffffff;
    font-size:1.4rem;
    cursor:pointer;
}

.match-card-frame {
    width:100%;
    height:100%;
    border:0;
}

body.match-card-modal-open {
    overflow:hidden;
}


/* ============================================================
   FIXTURE UPDATE MODAL
   ============================================================ */

.fixture-update-modal[hidden] {
    display:none;
}

.fixture-update-modal {
    position:fixed;
    z-index:51000;
    inset:0;
}

.fixture-update-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0, 20, 40, .68);
}

.fixture-update-window {
    position:absolute;
    top:50%;
    left:50%;
    width:min(480px, calc(100vw - 32px));
    padding:28px;
    transform:translate(-50%, -50%);
    border:1px solid #d8e4ed;
    border-top:6px solid #e2a11d;
    border-radius:16px;
    background:#ffffff;
    color:#17364f;
    box-shadow:0 20px 60px rgba(0, 0, 0, .32);
}

.fixture-update-close {
    position:absolute;
    top:10px;
    right:10px;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:#0a3f70;
    color:#ffffff;
    font-size:1.4rem;
    cursor:pointer;
}

.fixture-update-label {
    margin:0 42px 4px 0;
    color:#9a6100;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.12em;
}

.fixture-update-window h2 {
    margin:0 42px 12px 0;
    color:#07366c;
}

.fixture-update-window > p:not(.fixture-update-label) {
    margin:0;
}

.fixture-update-date {
    margin-top:16px !important;
    padding:11px 13px;
    border-radius:10px;
    background:#fff4d8;
    color:#744800;
    font-weight:800;
}

body.fixture-update-modal-open {
    overflow:hidden;
}


/* ============================================================
   CHS QUALIFYING ENTRANTS
   ============================================================ */

.chs-public-intro {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:22px;
    padding:20px;
    border:1px solid #d4e0e9;
    border-radius:16px;
    background:#ffffff;
}

.chs-public-intro h2 {
    margin:0 0 8px;
    color:#073d70;
}

.chs-public-intro p {
    max-width:760px;
    margin:5px 0;
    line-height:1.45;
    color:#566c7e;
}

.chs-public-label {
    margin:0 0 4px !important;
    color:#0b65b1 !important;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.12em;
}


.chs-public-progress {
    flex:0 0 auto;
    min-width:104px;
    padding:12px 16px;
    border-radius:12px;
    background:#eef3f6;
    text-align:center;
}

.chs-public-progress strong {
    display:block;
    color:#0b4f8a;
    font-size:1.45rem;
}

.chs-public-progress span {
    display:block;
    margin-top:2px;
    color:#637687;
    font-size:.78rem;
    font-weight:800;
}

.chs-public-progress.is-ready {
    background:#e4f5eb;
}

.chs-public-progress.is-ready strong,
.chs-public-progress.is-ready span {
    color:#17643a;
}


/*Cup Info Box, for the message box on CHS public page*/
.cup-info-box {
    margin: 18px 0 22px;
    padding: 14px 16px;

    border: 1px solid #b9d6eb;
    border-radius: 10px;

    background: #eef7fd;
    color: #234b67;

    line-height: 1.5;
}

.cup-info-box strong {
    display: block;
    margin-bottom: 6px;

    color: #07366c;
    font-size: 1rem;
}

.cup-info-box p {
    margin: 0;
}


.chs-entrant-card {
    overflow:hidden;
    border:1px solid #d4e0e9;
    border-radius:16px;
    background:#ffffff;
    box-shadow:
        0 8px 22px
        rgba(23, 54, 84, .06);
}

.chs-entrant-heading {
    padding:18px 20px;
    border-bottom:1px solid #dbe5ec;
    background:#f4f8fb;
}

.chs-entrant-heading h3 {
    margin:0;
    color:#073d70;
}


.chs-entrant-grid {
    display:grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    column-gap:28px;
    padding:12px 20px 18px;
}

.chs-entrant-slot {
    display:grid;
    grid-template-columns:
        38px minmax(0, 1fr);
    align-items:center;
    gap:10px;
    min-height:58px;
    border-bottom:1px solid #e3eaf0;
}

.chs-entrant-number {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#eef3f7;
    color:#0b5c9d;
    font-weight:900;
}


.chs-entrant-team strong,
.chs-entrant-team span {
    display:block;
}

.chs-entrant-team strong {
    color:#0b345b;
}

.chs-entrant-team span {
    margin-top:2px;
    font-size:.78rem;
}


.chs-entrant-slot.is-qualified
.chs-entrant-team span {
    color:#187447;
    font-weight:800;
}


.chs-entrant-slot.is-waiting
.chs-entrant-team strong {
    color:#8b99a5;
    font-style:italic;
    font-weight:700;
}

.chs-entrant-slot.is-waiting
.chs-entrant-team span {
    color:#9ba6ae;
}


/*For the exceptional Dates when selected in cups.php*/
.cup-state.rearranged {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 7px 10px;

    background: #fff0c7;
    color: #875500;

    border: 1px solid #e8c56b;
    border-radius: 999px;

    font-size: .78rem;
    font-weight: 800;
    line-height: 1.1;

    white-space: nowrap;
}

.cup-state.rearranged time {
    color: inherit;
    font: inherit;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:700px) {

    .public-cup-selector {
        display:grid;
        grid-template-columns:1fr;
    }

    .public-cup-selector a {
        text-align:center;
    }

    .cup-round-header {
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .cup-match-list {
        padding:
            8px
            14px
            14px;
    }

    .cup-public-match {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            86px;
        gap:8px;
    }

    .cup-public-pairing {
        grid-template-columns:1fr;
        gap:3px;
    }

    .cup-public-v {
        display:none;
    }

    .cup-public-team {
        min-height:28px;
    }

    .cup-public-match-state {
        width: auto;
        min-width: 0;
        align-items:stretch;
        flex-direction:column;
    }
    
    .cup-state,
    .cup-form-button {
        box-sizing:border-box;
        width:100%;
    }
    
 /*   .cup-public-match-state {
    width:86px;
    }*/
    
    .cup-state,
    .cup-form-button {
        box-sizing:border-box;
        width:100%;
    }

    .cup-state {
        text-align:center;
    }

    .cup-form-button {
        width:100%;
    }

    .cup-public-round-note {
        margin:
            14px
            14px
            0;
    }

    .match-card-modal-window {
        top:2vh;
        width:96vw;
        height:96vh;
    }
    
        .chs-public-intro {
        align-items:stretch;
        flex-direction:column;
    }
    
    .chs-public-progress {
        width:100%;
        box-sizing:border-box;
    }
    
    .chs-entrant-grid {
        grid-template-columns:1fr;
        padding:
            8px
            14px
            14px;
    }

}

@media (max-width: 520px) {

    .cup-state.rearranged {
        flex-direction: column;
        gap: 2px;

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

}


@media (max-width: 700px) {

    /*
       Give every match the same wider status column.
    */

    .cup-public-match-state {
        width: 132px;
        min-width: 132px;

        align-items: stretch;
    }


    /*
       Make pills and Form buttons fill that column.
    */

    .cup-public-match-state .cup-state,
    .cup-public-match-state .cup-form-button {
        width: 100%;
        max-width: none;

        box-sizing: border-box;
        text-align: center;
        
        position: relative;
            right: 10px;
    }

    @media (max-width: 700px) {

        .cup-public-match-state {
            position: relative;
            right: 8px;
        }
    
    }

    /*
       Keep Awaiting winner on one line.
    */

    .cup-state.waiting {
        padding-inline: 7px;

        font-size: .74rem;
        white-space: nowrap;
    }


    /*
       Present rearranged dates as a tidy two-line notice,
       rather than a tall oval.
    */

    .cup-state.rearranged {
        flex-direction: column;
        gap: 2px;

        padding: 8px 6px;

        border-radius: 18px;

        white-space: normal;
    }


    .cup-state.rearranged time {
        display: block;

        font-size: .72rem;
        white-space: nowrap;
    }

}

@media (max-width: 370px) {

    .cup-public-match-state {
        width: 122px;
        min-width: 122px;
        
        position: relative;
            right: 10px;
    }

    .cup-state.waiting,
    .cup-state.rearranged,
    .cup-state.rearranged time {
        font-size: .69rem;
    }

}

/* ============================================================
   FINAL MOBILE CUP COLUMN ALIGNMENT
   ============================================================ */

@media (max-width: 700px) {

    .cup-public-match {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            132px;

        gap: 8px;
    }


    .cup-public-match-state {
        position: static;

        right: auto;

        width: 132px;
        min-width: 0;
    }


    .cup-public-match-state .cup-state,
    .cup-public-match-state .cup-form-button {
        position: static;

        right: auto;

        width: 100%;
        max-width: none;
    }

}


@media (max-width: 370px) {

    .cup-public-match {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            122px;
    }


    .cup-public-match-state {
        width: 122px;
    }

}