html,
body {
    font-family: Arial;
    color: #333;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

p {
    font-family: Arial;
    color: #333;
}

h2 {
    font-weight: normal;
    font-size: 1.5rem;
    padding: 0;
    margin: 0;
}

h3 {
    font-size: 1.15rem; }

tr:nth-child(odd) {
    background: #f6f6f6; }

tr:nth-child(even) {
    background: #fff; }

div, input {
    box-sizing: border-box; }

.actions {
    display: flex;
    justify-content: center;
    padding: 0px 15px 15px;
    background: #f6f6f6;
    border-bottom: 1px dashed #ccc; }

.actions-footer {
    display: flex;
    justify-content: space-evenly;
    padding: 15px; }

.add-players {
    display: flex;
    position: absolute;
    right: 10px;
    font-size: 1rem;
    color: #3e64ff; }
@media only screen and (min-width: 768px) {
    .add-players {
        right: 30px; } }
.add-players a {
    color: #3e64ff;
    margin-left: 5px; }

.add-fullscreen {
    display: flex;
    position: absolute;
    left: 10px;
    font-size: 1rem;
    color: #3e64ff; }
@media only screen and (min-width: 768px) {
    .add-fullscreen {
        left: 30px; } }
.add-fullscreen a {
    color: #3e64ff;
    margin-right: 5px; }


.button {
    border: 0px;
    border-radius: 5px;
    padding: 7px;
    background-color: #fff;
    border-top: 3px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #333;
    cursor: pointer;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center; }
.button:hover {
    background: #eee; }
.button--primary {
    background: #3e64ff;
    color: #fff;
    border: 0;
    padding: 12px; }
.button--primary:hover {
    background: #0b3bff; }
.button--score {
    width: 30%; }
.button--nat {
    border-top-color: #f0134d;
}
.button--verzaakt {
    border-top-color: #f1bc31;
}
.button--pit {
    border-top-color: #94aa2a;
}
.button--roem {
    border-top-color: #64c4ed;
}
.button--input {
    background: #02924f;
    color: #fff;
    border: 0;
    padding: 12px; }
.button--input:hover {
    background: #027942;
}

.actions-footer .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    margin: 0;
    padding: 7px;
    font: inherit;
    line-height: 1.2;
    vertical-align: middle;
}

.actions-footer a.button,
.actions-footer a.button:hover,
.actions-footer a.button:focus {
    text-decoration: none;
}

@media (max-width: 768px) {
    .actions-footer {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .actions-footer .button {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
}

.description {
    padding: 15px 10px;
    background: #f6f6f6;
    border-top: 1px dashed #ccc;
    margin-top: 15px; }
@media only screen and (min-width: 768px) {
    .description {
        padding: 15px 30px; } }

.input-score {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #bbb; }

.footer {
    padding: 30px;
    background: #ccc; }

.overview {
    background: #f6f6f6;
    display: flex;
    justify-content: space-between;
    padding: 2px;
    width: 100%; }
@media only screen and (min-width: 768px) {
    .overview {
        padding: 2px; } }
.overview__col {
    width: 48%;
    padding: 2px;
}
.overview__header {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 5px;
    font-weight: normal;
    font-size: 1.5rem;
}
.overview__total {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 5px;
    justify-content: center;
    display: flex; }

.player {
    display: flex;
    font-size: 1rem;
    justify-content: center;
    padding: 5px 0; }
.player__name {
    font-weight: bold; }

.players-icon {
    color: #3e64ff; }

.round {
    display: flex; }
.round__display {
    font-weight: bold;
    margin-left: 7.5px; }

.round-wrapper {
    align-items: center;
    display: flex;
    padding: 15px 0;
    background: #fff;
    color: #333;
    font-size: 1.1rem;
    flex-direction: column;
    border-bottom: 1px dashed #ccc;
    justify-content: center;
    position: relative;
}

.round-wrapper,
#player-wrapper,
.overview,
.actions {
    flex-shrink: 0;
}

.score__actions {
    margin: 5px 0 10px;
    display: flex;
    justify-content: space-between; }

.score-table-wrapper {
    display: flex;
    justify-content: center;
    padding: 0 10px;
}
@media only screen and (min-width: 768px) {
    .score-table-wrapper {
        padding: 0 30px;
    }
}

.score-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    border-bottom: 1px solid #ccc; }
.score-table td {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    padding: 7.5px;
}
.score-table td.tussenstand {
    font-weight: bold;
    border-top: 1px solid #333; }
.score-table__intro {
    font-weight: bold;
}

.score_scroll_wrapper {
    border: none;
    box-shadow: none;
    outline: none;
    background: transparent;
    padding: 0;
    margin: 0;
    flex: 1 1 auto;
    min-height: 0; /* Belangrijk voor scrolling binnen een flex-container */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}


.score-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.score-list__header {
    text-align: center;
    font-weight: bold;
    position: static;
    top: 0;
    z-index: 10;
    margin-top: 0;
    padding: 10px 0;
    background: white;
}

/* Eerste regel */
.score-table thead tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 40px;
    background: white;
}

/* Tweede regel */
.score-table thead tr:nth-child(2) th {
    position: sticky;
    top: 40px; /* Gelijk aan de hoogte van de eerste regel */
    z-index: 3;
    background: white;
}


.scorelijstinput {
    border: none;
    box-shadow: none;
    outline: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    text-align: right;
}

.table-header {
    text-align: center;
    padding: 7.5px;
    font-size: 1.25rem;
    font-weight: bold; }

.page-wrapper {
    max-width: 1024px;
    margin: auto;
    height: 100vh;
    height: 100dvh; /* Betere berekening op tablets en mobiele apparaten */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.uitlegtabel td {
    border: 1px solid #ccc;
    padding: 5px;
    border-collapse: collapse; }

.fa,
.far,
.fas {
    font-size: 1.1rem !important;
    margin-left: 10px !important; }

.swal2-title {
    font-size: 1.25rem !important;
    color: #333 !important; }

.swal2-confirm {
    background: #94aa2a !important; }

.spelers13 {
    font-size: 1.2rem;
}
.spelers24 {
    font-size: 1.2rem;
}
.column-right {
    text-align: right;
}

.scorelijstinput-table-wrapper {
    display: flex;
    justify-content: center;
    padding: 10px;
}
@media only screen and (min-width: 768px) {
    .scorelijstinput-table-wrapper {
        padding: 0 30px;
    }
}

.scorelijstinput-table {
    width: 100%;
    border: 1px solid #ccc;
}
.scorelijstinput-table td, th {
    padding: 3.5px;
}

.verloren-tekst {
    position: fixed;
    top: 40%;
    left: 0;
    width: 100%;
    z-index: 10001;
    pointer-events: none;
    text-align: center;
    font-size: clamp(32px, 7vw, 72px);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 3px 12px #334155;
    animation: verlorenVoorbij 3s ease-in-out forwards;
}

@keyframes verlorenVoorbij {
    0%   { transform: translateX(-100%); opacity: 0; }
    20%  { transform: translateX(0); opacity: 1; }
    75%  { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

#loadingModal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
}
.loading-box {
    color: #173c30;
    background: #fffaf0;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}

.loading-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 4px solid #d5e3db;
    border-top-color: #1c6b51;
    border-radius: 50%;
    animation: loading-rotate 1s linear infinite;
}

@keyframes loading-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Dialog buttons follow the Klaverjasgroep palette. */
.swal2-popup .swal2-styled.swal2-confirm { background: #145c45 !important; color: #fff !important; }
.swal2-popup .swal2-styled.swal2-cancel { background: #e5efd9 !important; color: #173c30 !important; }
.swal2-popup .swal2-styled:focus-visible { outline: 3px solid #d16b27; outline-offset: 3px; }