/* Fix ronde hoeken tabel in responsive container */
#indoorAdmin .table-responsive {
    border-radius: 8px;
    overflow: hidden;
}

#indoorAdmin table {
    border-radius: 8px;
    overflow: hidden;
}


/* ---------------- Basis Tabelstructuur ---------------- */

#indoorAdmin th:last-child, 
#indoorAdmin td:last-child {
    width: 60px;
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem;
}

/* Fade-in effect op het hele indoorAdmin deel */
#indoorAdmin .fade-in {
    animation: fadeIn 0.6s ease-out;
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Titelbalk stijl */
#indoorAdmin .table-header-indoor th {
    background-color: #6f42c1 !important; /* Mooie paars */
    color: white !important;
}

/* Hover effect op tabelrijen */
#indoorAdmin table tbody tr:hover {
    background-color: #5a189a;
    transition: background-color 0.3s;
}

/* ---------------- Text Styling ---------------- */

/* Text-muted kleur beter zichtbaar maken op donkere achtergrond */
#indoorAdmin .text-muted {
    color: #6e6e6e !important;
    transition: color 0.3s ease-in-out;
}

/* Text-muted kleur bij hover */
#indoorAdmin table tbody tr:hover .text-muted {
    color: #d0d0d0 !important;
}

/* ---------------- Buttons & Icon Styling ---------------- */

/* Algemene animatie voor alle knoppen */
#indoorAdmin .btn {
    transition: all 0.2s ease-in-out;
}

/* Hover effect op knoppen */
#indoorAdmin .btn:hover {
    transform: translateY(-2px);
}

/* Kleine actieknoppen (bewerken/verwijderen) */
#indoorAdmin .btn-sm {
    padding: 2px 6px;
    font-size: 0.875rem;
}

/* Actieknop iconen */
#indoorAdmin .action-button i {
    font-size: 1.2rem;
}

/* Hover effect op actieknoppen */
#indoorAdmin td a img,
#indoorAdmin td a .bi {
    transition: transform 0.2s ease, filter 0.2s ease;
}

#indoorAdmin td a img:hover,
#indoorAdmin td a .bi:hover {
    transform: scale(1.15);
    filter: brightness(1.4);
    cursor: pointer;
}

/* Hover boost op Nieuw knop */
#indoorAdmin th:last-child a.btn-success:hover {
    transform: scale(1.2);
    filter: brightness(1.5);
    cursor: pointer;
}

/* ---------------- Keyframes ---------------- */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}