.goalsvoor {
    color: green;
    font-style: oblique;
    font-size: large;
}

.goalstegen {
    color: red;
    font-style: oblique;
    font-size: large;
}

/* Achtergrond op body voor consistentie op alle pagina's */
@media (min-width: 992px) {
  body {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Blijft op zijn plaats bij scrollen */
    background-image: url('voetbalveld_achtergrond.png');
    min-height: 100vh; /* Vult altijd minimaal het volledige scherm */
  }
}

.blockcontent {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Compacte tabel kolommen */
.table-auto {
    width: auto !important;
}

/* Responsive styling voor statistiek bulk invoeren tabel */
/* Desktop/laptop styling */
.goals-input {
    width: 70px;
    max-width: 70px;
}

.table-goals-col {
    width: 10%;
}

.table-speler-col {
    width: 35%;
}

/* Mobile styling */
@media (max-width: 768px) {
    .goals-input {
        width: 50px;
        max-width: 50px;
    }
    
    .table-goals-col {
        width: 7%;
    }
    
    .table-speler-col {
        width: 45%;
    }
}

/* Responsive styling voor speler toevoegen pagina */
/* Desktop/laptop styling */
.speler-naam-col {
    width: 40%;
}

.speler-positie-col {
    width: 30%;
}

.form-container {
    max-width: 100%;
}

/* Mobile styling */
@media (max-width: 768px) {
    .speler-naam-col {
        width: 55%;
    }
    
    .speler-positie-col {
        width: 22.5%;
    }
    
    /* Smaller text on mobile for table readability */
    .table {
        font-size: 0.85rem;
    }
    
    /* Make table even more compact on very small screens */
    @media (max-width: 480px) {
        .speler-naam-col {
            width: 60%;
        }
        
        .speler-positie-col {
            width: 20%;
        }
        
        .table {
            font-size: 0.8rem;
        }
        
        .table th,
        .table td {
            padding: 0.5rem 0.25rem;
        }
    }
    
    /* Ensure form fields stack nicely on mobile */
    .form-container p {
        margin-bottom: 1rem;
    }
    
    .form-container label {
        font-weight: 600;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .form-container input,
    .form-container select,
    .form-container textarea {
        width: 100%;
        max-width: 100%;
    }
}

/* Responsive styling voor training afmeldingen tabel */
/* Desktop/laptop styling - ruimere tabel voor grote schermen */
@media (min-width: 768px) {
    .training-afmeldingen-table {
        font-size: 1.1rem;
    }
    
    .training-afmeldingen-table th,
    .training-afmeldingen-table td {
        padding: 0.875rem;
    }
    
    .training-afmeldingen-table .training-speler-col {
        width: 18%;
    }

    .training-afmeldingen-table .training-status-col {
        width: 8%;
        text-align: center;
    }

    .training-afmeldingen-table .training-reden-col {
        width: 28%;
    }

    .training-afmeldingen-table .training-datum-col {
        width: 15%;
    }

    .training-afmeldingen-table .training-notitie-col {
        width: 25%;
    }

    .training-afmeldingen-table .training-acties-col {
        width: 6%;
    }
    
    /* Grotere knoppen voor laptop */
    .training-afmeldingen-table .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
    }
}

/* Standaard desktop styling - ook groter font */
.training-afmeldingen-table {
    font-size: 1.05rem;
}

/* Responsive styling voor planning tabel */
@media (min-width: 768px) {
    /* Planning tabel groter maken voor laptops */
    .table-sm {
        font-size: 1.15rem;
    }
    
    .table-sm th,
    .table-sm td {
        padding: 0.75rem;
    }
    
    /* H2 titel ook groter */
    h2.text-center {
        font-size: 2rem;
    }
}

/* Alle schermen - basis styling */
.table-sm {
    font-size: 1.05rem;
}

h2.text-center {
    font-size: 1.75rem;
}

/* Planning tabel kolom breedtes */
.planning-datum-col { min-width: 70px; }
.planning-wedstrijd-col { min-width: 120px; }
.planning-verz-col { min-width: 50px; }
.planning-aanv-col { min-width: 50px; }
.planning-begeleid-col { min-width: 80px; }
.planning-coaches-col { min-width: 80px; }
.planning-vervoer-col { min-width: 80px; }
.planning-wassen-col { min-width: 70px; }
.planning-grens-col { min-width: 60px; }
.planning-scheids-col { min-width: 60px; }

/* Compacte button styling voor planning */
.planning-btn-compact {
    font-size: 0.7rem;
    padding: 2px 6px;
}
.training-afmeldingen-table .training-speler-col {
    width: 20%;
}

.training-afmeldingen-table .training-status-col {
    width: 8%;
    text-align: center;
}

.training-afmeldingen-table .training-reden-col {
    width: 25%;
}

.training-afmeldingen-table .training-datum-col {
    width: 15%;
}

.training-afmeldingen-table .training-notitie-col {
    width: 22%;
}

.training-afmeldingen-table .training-acties-col {
    width: 10%;
}

/* Status iconen styling */
.training-afmeldingen-table .text-success,
.training-afmeldingen-table .text-danger {
    font-size: 1.2em;
    font-weight: bold;
}

/* Mobile styling */
@media (max-width: 768px) {
    .training-afmeldingen-table .training-speler-col {
        width: 25%;
    }
    
    .training-afmeldingen-table .training-status-col {
        width: 10%;
    }
    
    .training-afmeldingen-table .training-reden-col {
        width: 30%;
    }
    
    .training-afmeldingen-table .training-datum-col {
        width: 15%;
    }
    
    .training-afmeldingen-table .training-notitie-col {
        width: 15%;
    }
    
    .training-afmeldingen-table .training-acties-col {
        width: 5%;
    }
    
    /* Smaller font on mobile */
    .training-afmeldingen-table {
        font-size: 0.9rem;
    }
    
    /* Very small screens */
    @media (max-width: 480px) {
        .training-afmeldingen-table {
            font-size: 0.85rem;
        }
        
        .training-afmeldingen-table th,
        .training-afmeldingen-table td {
            padding: 0.5rem 0.25rem;
        }
        
        .training-afmeldingen-table .training-speler-col {
            width: 30%;
        }
        
        .training-afmeldingen-table .training-reden-col {
            width: 35%;
        }
        
        .training-afmeldingen-table .training-notitie-col {
            width: 10%;
        }
    }
}

/* Mobile modal optimalisatie */
@media (max-width: 991px) {
    /* Forceer het verbergen van modal titles op tablets en phones */
    .modal-title {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Zeer compacte close button */
    .modal-header .btn-close {
        padding: 0.2rem !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
    }
    
    /* Voorkom zoom op iOS */
    .modal-body textarea,
    .modal-body input {
        font-size: 16px !important;
        padding: 0.25rem !important;
    }
    
    /* Zeer compacte knoppen */
    .modal-footer .btn {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.8rem !important;
        min-height: 32px !important;
        flex: 1 !important;
        margin: 0 0.1rem !important;
    }
    
    /* Compacte modal styling voor mobiel */
    .modal-content {
        border-radius: 4px !important;
    }
    
    .modal-header {
        padding: 0.5rem !important;
    }
    
    .modal-footer {
        padding: 0.5rem !important;
    }
    
    .modal-body {
        padding: 0.5rem !important;
    }
    
    .modal-body .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
        font-weight: 600 !important;
    }
    
    .modal-body .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    .modal-body textarea {
        min-height: 80px !important;
    }
}

/* Speler overzicht statistieken uitlijning */
.speler-statistiek-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.speler-statistiek-label {
    flex: 1;
}

.speler-statistiek-badge {
    flex-shrink: 0;
    margin-left: 1rem;
}