/* Algemene instellingen voor de hele pagina */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f7f8f5;
    color: #171717;
}

/* Het bovenste gedeelte met ons logo */
header {
    padding: 40px 20px;
    text-align: center;
}

/* De afmetingen van het logo */
header img {
    width: 300px;
    max-width: 100%;
    height: auto;
}

/* De belangrijkste inhoud */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

/* De grote kop */
h1 {
    font-size: 36px;
    margin-bottom: 16px;
}

/* De tekst onder de kop */
p {
    font-size: 18px;
    line-height: 1.6;
}


/* Het gedeelte met links naar de ranglijsten */
.rankings {
    margin-top: 50px;
}

/* Zet de links naast elkaar en laat ze op kleine schermen doorlopen */
.ranking-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

/* Geef iedere link de vorm van een kaart */
.ranking-links a {
    display: inline-block;
    min-width: 120px;
    padding: 18px 24px;
    background-color: white;
    color: #171717;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #dddddd;
    border-radius: 12px;
}

/* Verander de kaart wanneer je er met de muis overheen gaat */
.ranking-links a:hover {
    border-color: #9bdc28;
    background-color: #f0f9df;
}

/* Laat brede tabellen op kleine schermen horizontaal scrollen */
.table-container {
    margin-top: 30px;
}

/* Algemene tabelopmaak */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}

th,
td {
    padding: 12px;
    border-bottom: 1px solid #dddddd;
    text-align: left;
    white-space: nowrap;
}

th {
    background-color: #f0f9df;
}

tbody tr:hover {
    background-color: #f7f8f5;
}


/* Hardcourt: blauw */
.ranking-links a.hard-link {
    background-color: #e4f1fb;
    border-color: #80b8e3;
    color: #185b8f;
}

/* Clay: terracotta */
.ranking-links a.clay-link {
    background-color: #fbe9dc;
    border-color: #d9a17c;
    color: #91491f;
}

/* Grass: groen */
.ranking-links a.grass-link {
    background-color: #e8f3df;
    border-color: #9bc784;
    color: #386b28;
}

/* Iets duidelijkere kleuren wanneer je over een kaart beweegt */
.ranking-links a.hard-link:hover {
    background-color: #cde5f7;
}

.ranking-links a.clay-link:hover {
    background-color: #f5d5be;
}

.ranking-links a.grass-link:hover {
    background-color: #d5eac5;
}


/* Hard-pagina: logo op 60% van de huidige breedte */
.hard-page header img {
    width: 180px;
}

/* Hard-pagina: blauwe kolomkoppen */
.hard-page th {
    background-color: #e4f1fb;
    border-bottom: 1px solid #80b8e3;
}

/* Hard-pagina: geef de Age-kolom meer ruimte */
.hard-page th:nth-child(3),
.hard-page td:nth-child(3) {
    min-width: 100px;
}

/* Houd de kolomkoppen zichtbaar tijdens het scrollen */
.hard-page thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #e4f1fb;
}


/* Clay-pagina: kleiner logo */
.clay-page header img {
    width: 180px;
}

/* Clay-pagina: bredere Age-kolom */
.clay-page th:nth-child(3),
.clay-page td:nth-child(3) {
    min-width: 100px;
}

/* Clay-pagina: terracottakleurige tabelkop die blijft staan */
.clay-page thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fbe9dc;
    border-bottom: 1px solid #d9a17c;
}


/* Grass-pagina: kleiner logo */
.grass-page header img {
    width: 180px;
}

/* Grass-pagina: bredere Age-kolom */
.grass-page th:nth-child(3),
.clgrassay-page td:nth-child(3) {
    min-width: 100px;
}

/* Grass-pagina: graskleurige tabelkop die blijft staan */
.grass-page thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #e8f3df;
    border-bottom: 1px solid #9bc784;
}


/* Prediction-pagina: kleiner logo */
.prediction-page header img {
    width: 180px;
}

/* Formulier netjes onder elkaar */
#prediction-form {
    max-width: 480px;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

/* Labels boven de keuzemenu's */
#prediction-form label {
    font-weight: bold;
    margin-top: 8px;
}

/* Keuzemenu's en knop */
#prediction-form select,
#prediction-form button {
    padding: 12px;
    font: inherit;
    border: 1px solid #dddddd;
    border-radius: 8px;
}

/* Opvallende donkerblauwe berekenknop */
#prediction-form button[type="submit"] {
    margin-top: 12px;
    padding: 16px 28px;
    background-color: #0047ab;
    color: white;
    border: 2px solid #0047ab;
    border-radius: 999px;
    font-weight: bold;
    cursor: pointer;
}

/* Iets donkerder wanneer je eroverheen beweegt */
#prediction-form button[type="submit"]:hover {
    background-color: #003580;
    border-color: #003580;
}

/* Ruimte voor het resultaat */
#prediction-result {
    margin-top: 24px;
    font-weight: bold;
}


/* Ruimte tussen de ranglijsten en de prediction-knop */
.prediction-link {
    margin-top: 24px;
}

/* Prediction-knop in de stijl van Tennis AIQ */
.prediction-link a {
    display: inline-block;
    padding: 18px 28px;
    background-color: #171717;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 12px;
}

/* Subtiel effect wanneer je over de knop beweegt */
.prediction-link a:hover {
    background-color: #333333;
}


/* Homepage: logo iets kleiner en minder ruimte eronder */
body:not(.hard-page):not(.clay-page):not(.grass-page):not(.prediction-page) header {
    padding-bottom: 10px;
}

body:not(.hard-page):not(.clay-page):not(.grass-page):not(.prediction-page) header img {
    width: 270px;
}

/* Homepage: meer afstand boven de prediction-knop */
.prediction-link {
    margin-top: 60px;
}

/* Zorg dat de langere knoptekst ook op een telefoon past */
.prediction-link a {
    max-width: 100%;
    box-sizing: border-box;
}


/* Groepen met Competition- en Surface-knoppen */
.prediction-options {
    border: 0;
    padding: 0;
    margin: 8px 0;
    min-width: 0;
}

.prediction-options legend {
    font-weight: bold;
    text-align: left;
    padding: 0;
    margin-bottom: 12px;
}

/* Drie knoppen naast elkaar */
.option-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* De aanklikbare knop */
.option-button {
    position: relative;
    cursor: pointer;
}

.option-button input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.option-button span {
    display: flex;
    min-height: 48px;
    padding: 10px 6px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    border: 2px solid #dddddd;
    border-radius: 10px;
    background-color: white;
    font-weight: bold;
    text-align: center;
}

.option-button small {
    font-size: 11px;
    font-weight: normal;
}

/* Geselecteerde Competition-knop */
.option-button input:checked + span {
    border-color: #171717;
    box-shadow: inset 0 0 0 1px #171717;
}

/* Ondergrondkleuren, passend bij de homepage */
.surface-hard span {
    background-color: #e4f1fb;
    border-color: #80b8e3;
    color: #185b8f;
}

.surface-clay span {
    background-color: #fbe9dc;
    border-color: #d9a17c;
    color: #91491f;
}

.surface-grass span {
    background-color: #e8f3df;
    border-color: #9bc784;
    color: #386b28;
}

/* Geselecteerde ondergrond extra duidelijk maken */
.surface-hard input:checked + span {
    border-color: #185b8f;
    box-shadow: inset 0 0 0 1px #185b8f;
}

.surface-clay input:checked + span {
    border-color: #91491f;
    box-shadow: inset 0 0 0 1px #91491f;
}

.surface-grass input:checked + span {
    border-color: #386b28;
    box-shadow: inset 0 0 0 1px #386b28;
}

/* Zichtbare focus bij toetsenbordbediening */
.option-button input:focus-visible + span {
    outline: 3px solid #171717;
    outline-offset: 3px;
}


/* Zoekveld en suggesties voor spelers */
.player-search {
    position: relative;
    width: 100%;
}

.player-search > input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.player-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #dddddd;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    text-align: left;
}

.player-suggestions[hidden] {
    display: none;
}

.player-suggestion {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid #eeeeee;
    border-radius: 0;
    background-color: white;
    color: #171717;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.player-suggestion:last-child {
    border-bottom: 0;
}

.player-suggestion:hover,
.player-suggestion:focus-visible,
.player-suggestion.is-active {
    background-color: #f2f2f2;
}

.player-no-results {
    padding: 12px 14px;
    color: #666666;
}


/* Groter en prettiger leesbaar spelerszoekveld */
.player-search > input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 54px;
    padding: 14px 16px;
    border: 1px solid #dddddd;
    border-radius: 10px;
    background-color: white;
    color: #171717;
    font-family: inherit;
    font-size: 18px;
}

/* Grotere namen in de suggestielijst */
.player-suggestion {
    padding: 14px 16px;
    font-size: 18px;
}


/* Kopjes dichter bij hun bijbehorende knoppen */
.prediction-options legend {
    margin-bottom: 0px;
}

/* Spelerlabels dichter bij hun zoekvelden */
#prediction-form > label {
    margin-bottom: -8px;
}