/**
CSS voor header, en navigatie

*/

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Sora';
    src: url('fonts/Sora-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('fonts/Sora-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('fonts/Sora-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('fonts/Sora-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('fonts/Sora-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('fonts/Sora-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('fonts/Sora-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Minion Pro';
    src: url('fonts/MinionPro-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
    font-size: 100%; /* Standaard browser font-size (meestal 16px) */
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Inter';
    color: #32324D;
}

/* Algemene styling voor alle textareas */
textarea {
    font-family: Arial;
    font-size: 1rem;
    padding: 8px;
    box-sizing: border-box;
}

.event {
	font-size: 1.2rem;
    width: 90%;
    margin: 0 auto;
    line-height: 1.6;
}

/* Zorgt ervoor dat h1 en h2 alleen binnen main worden opgemaakt, behalve als ze de klassen .header of .header-admin hebben */
main h1:not(.header):not(.header-admin),
main h2:not(.header):not(.header-admin) {
    color: #32324D;
    font-family: 'Sora';
}

/* Zorgt ervoor dat de main content in lijn is met de navigatie */
main {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 0;
}

main h1:not(.header):not(.header-admin) {
    font-size: 2em;
    text-align: center;
    margin-bottom: 10px;
}

main h2:not(.header):not(.header-admin) {
    font-size: 1.5em;
    margin-top: 20px;
}

ul {
    list-style: disc;
    margin-left: 20px;
}

a {
    color: #0077cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* Top bar styling - boven de header */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, var(--menubar-sticky-bg, rgba(227, 242, 253, 0.95)) 0%, var(--menubar-sticky-bg2, rgba(187, 222, 251, 0.95)) 100%);
    padding: 5px 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.top-bar-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.top-bar-logo {
    margin-right: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.top-bar-logo img {
    height: 120px;
    width: auto;
    display: block;
}

/* Left-side navigation links next to the logo */
.top-bar-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-right: auto;
}

.header {
    position: relative;
    width: 100%;
    max-height: 40vh; /* Max 40% van de viewport hoogte */
    overflow: hidden;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}


.header img {
    width: 100%;
    height: auto;
    max-height: 40vh;
    display: block;
    object-fit: cover;
}

/* alleen gebruikt in header-admin */
.navbar {
    position: sticky;
    top: var(--top-bar-height, 92px);
    z-index: 999;
    background: linear-gradient(135deg, var(--menubar-sticky-bg, rgba(227, 242, 253, 0.95)) 0%, var(--menubar-sticky-bg2, rgba(187, 222, 251, 0.95)) 100%);
    display: flex;
    justify-content: center;
    padding: 10px 0;
    font-size: 1.6rem;
    color: black;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

/* Zorgt ervoor dat de navbar breder is, maar niet té breed */
.navbar .menu-container {
    width: 80%;  /* Zorgt voor een dynamische breedte */
    max-width: 1200px; /* Voorkomt dat het te breed wordt op grote schermen */
    display: flex;
    justify-content: flex-start; /* Links uitlijnen in plaats van center */
}

/* Menu-items links uitlijnen */
.navbar .menu-items {
    display: flex;
    justify-content: flex-start; /* Links uitlijnen in plaats van center */
    flex-wrap: wrap;
}

.navbar a {
    color: var(--menubar-other-text, #1976d2);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    font-weight: 500;
}

.navbar a:hover {
    background: var(--menubar-other-bg, #e3f2fd);
    color: var(--menubar-other-text, #1976d2);
}

.navbar a.active {
    background: var(--menubar-active-bg, #1976d2);
    color: var(--menubar-active-text, white);
    font-weight: 600;
}

/* Two-level dropdown navigation menu styling (admin pages) */
.menu-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.menu-items > a,
.menu-items > .dropdown {
    position: relative;
}

.menu-items > a {
    color: var(--menubar-other-text, #1976d2);
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    border-radius: 8px;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    font-weight: 500;
}

.menu-items > a:hover {
    background: var(--menubar-other-bg, #e3f2fd);
    color: var(--menubar-other-text, #1976d2);
}

.menu-items > a.active {
    background: var(--menubar-active-bg, #1976d2);
    color: var(--menubar-active-text, white);
    font-weight: 600;
}

/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown > a {
    color: var(--menubar-other-text, #1976d2);
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    font-weight: 500;
}

.dropdown > a:after {
    content: '\25BC';
    font-size: 10px;
    margin-left: 5px;
}

.dropdown:hover > a {
    background: var(--menubar-other-bg, #e3f2fd);
    color: var(--menubar-other-text, #1976d2);
}

.dropdown > a.active {
    background: var(--menubar-active-bg, #1976d2);
    color: var(--menubar-active-text, white);
    font-weight: 600;
}

/* Dropdown content */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top: 100%;
    left: 0;
    border-radius: 4px;
}

.dropdown-content a {
    color: var(--menubar-other-text, #1976d2);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    font-weight: 500;
}

.dropdown-content a:hover {
    background: var(--menubar-other-bg, #e3f2fd);
    color: var(--menubar-other-text, #1976d2);
}

.dropdown-content a.active {
    background: var(--menubar-active-bg, #1976d2);
    color: var(--menubar-active-text, white);
    font-weight: 600;
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media (max-width: 768px) {
    .menu-items {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dropdown-content {
        position: static;
        box-shadow: none;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
}

@keyframes message-box-fade {
    0%   { opacity: 1; max-height: 200px; padding: 15px; margin: 20px auto 0; overflow: hidden; }
    75%  { opacity: 1; max-height: 200px; padding: 15px; margin: 20px auto 0; overflow: hidden; }
    90%  { opacity: 0; max-height: 200px; padding: 15px; margin: 20px auto 0; overflow: hidden; }
    100% { opacity: 0; max-height: 0;     padding: 0;    margin: 0;           overflow: hidden; }
}

.message-box {
    width: 100%;
    max-width: 370px; /* smalste parent waarin dit wordt gebruikt is login-formulier, deze heeft een max-width van 400 px */
    margin: 20px auto 0;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    overflow-wrap: anywhere;
    hyphens: auto;
    font-size: 1.2rem;
}

.message-box--autofade {
    animation: message-box-fade 6.5s ease forwards;
}

.message-box--success {
    background-color: #4dd9a8;
}

.message-box--error {
    background-color: #f19996;
    border: 1px solid #d20040;
}

/**
 styles voor instellingen
 */

.detailsSection {
    background-color: #f0f0f0; /* Iets lichtere achtergrond */
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 20px;
}

/* Extra styling specifiek voor tekst in detailsSection tekst */
.detailsSection details div .pstyled {
    background-color: #fff;
    border: 1px solid #ddd;
    border-left: 4px solid #69a3d8;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 8px 0;
    display: block;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.detailsSection details div .pstyled ul {
    list-style-type: disc;
    margin-left: 20px;
}


.config-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Zorgt ervoor dat label en input goed uitgelijnd zijn */
    gap: 10px;
    margin-bottom: 15px;
}


.config-item label {
    font-size: 16px; /* Consistente tekstgrootte */
    font-weight: 500;
    flex: 1; /* Laat labels even breed zijn */
    text-align: left;
}

.config-item input,
.config-item select {
    font-size: 16px; /* Zorgt dat input en tekst even groot zijn */
    padding: 5px;
    text-align: left; /* Cijfers netjes uitlijnen */
}

.config-item input {
    width: 100px; /* Standaard breedte voor inputs */
}

/* dit is voor het veld waar je een bestand kunt uploaden */
.config-item input[type="file"] {
    flex: 1; /* Zorgt ervoor dat het bestand kiezen veld de ruimte goed benut */
}

/* wordt ook gebruikt voor het veld waar je een bestand kunt uploaden */
.config-item button {
    flex-shrink: 0; /* Zorgt ervoor dat de knop niet verkleind wordt */
}

.config-item select {
    width: 115px; /* Standaard breedte voor inputs */
}

input[type="color"] {
    width: 115px; /* Kleinere breedte voor kleurkiezer */
    padding: 2px;
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em; /* Gebruik em voor relatieve grootte */
    height: 1.2em; /* Gebruik em voor relatieve grootte */
    background-color: transparent; /* Transparante achtergrond */
    color: inherit; /* Neem de tekstkleur over van de parent */
    border: 2px solid currentColor; /* Gebruik de tekstkleur voor de rand */
    border-radius: 50%; /* Maakt het een cirkel */
    font-size: inherit; /* Neem de font-size over van de parent */
    font-weight: bold;
    text-align: center;
    line-height: 1; /* Zorgt voor verticale centrering */
    box-sizing: border-box; /* Zorgt ervoor dat padding en border in de grootte worden meegenomen */
    margin-left: 0.3em; /* Ruimte tussen de tekst en het vraagteken */
    padding: 0; /* Geen padding */
}

.help-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background-color: transparent; /* Transparante achtergrond */
    padding: 0; /* Geen padding */
    border: none; /* Geen rand */
}

.tooltip-text {
    width: max-content; /* Pas de breedte automatisch aan */
    min-width: 200px; /* Minimale breedte */
    max-width: 700px; /* Maximale breedte — past altijd binnen de modal */
    background-color: rgba(51, 51, 51, 0.85);
    color: #fff;
    text-align: left;
    border-radius: 5px;
    padding: 5px 10px;
    position: absolute;
    z-index: 9999;
    top: 125%;
    right: 0; /* Lijn rechts uit op het vraagteken, zodat tooltip niet buiten beeld valt */
    left: auto;
    opacity: 0;
    /* Tekst moet kunnen afbreken */
    white-space: normal; /* Sta tekstterugloop toe */
    word-wrap: break-word; /* Zorg dat lange woorden breken */
    overflow-wrap: break-word; /* Extra fallback voor tekstbreuk */
    hyphens: auto;
    font-size: 20px;
}

.tooltip-text-hidden {
    visibility: hidden;
}

.tooltip-text-shown {
    visibility: visible;
    opacity: 1;
}

.help-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.detailsSection-text {
    display: flex;
    justify-content: space-between; /* Zorgt ervoor dat de tekst links en het vraagteken rechts staat */
    align-items: center; /* Zorgt ervoor dat alles op dezelfde lijn staat */
    width: 100%; /* Zorgt ervoor dat de hele breedte gebruikt wordt */
    font-size: 1em;
}

details {
    margin-bottom: 5px;
    margin-top: 5px;
}

summary {
    padding: 10px;
    background-color: #e9ecef;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: bold;
}

summary:hover {
    background-color: #d6d8db;
}

.collapsible {
    background-color: #007bff;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
}

.collapsible:after {
    content: ' ▼';
    float: right;
}

/* Verborgen modal standaard */
.modal {
    display: none; /* Verborgen standaard */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow-y: auto;
    padding: 5vh 0;
    box-sizing: border-box;
}

/* Centreert de modal-content horizontaal, werkt met display:block én display:flex */
.modal-content {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 900px;
    max-height: 90vh;
    overflow: auto;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    margin: 0 auto;
}

.modal-content input[type="text"],
.modal-content input[type="tel"],
.modal-content input[type="email"],
.modal-content input[type="url"],
.modal-content textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    font-size: 1rem; /* 1rem = 10px als je html 62.5% is */
    font-family: Arial; /* Zelfde font als andere inputs */
}

.modal-content label {
   line-height: 1.6; /* */
}


/* Stijl voor de pop-up met knoppen naast elkaar */
.modal-content.buttons-side-by-side .button-side-by-side {
    display: flex;
    gap: 10px; /* Ruimte tussen de knoppen */
    justify-content: flex-begin; /* Knoppen rechts uitlijnen */
}

/* Stijl voor de label en select naast elkaar */
.modal-content.buttons-side-by-side .form-row {
    display: flex;
    align-items: center;
    gap: 10px; /* Ruimte tussen label en select */
    margin-bottom: 10px; /* Ruimte onder de rij */
}

.modal-content.buttons-side-by-side .form-row label {
    margin-bottom: 0; /* Verwijder standaard marge onder labels */
}

table th, table td {
    padding: 5px 10px;
}

table input[type="text"],
table input[type="email"],
table select {
    font-size: 1.2rem; /* 19.2px - consistent met andere tekst op de pagina */
}

th[onclick] {
    cursor: pointer;
    user-select: none;
}

.sort-icon {
    margin-left: 5px;
    font-size: 14px;
    color: #bbb; /* Grijs zodat het niet te dominant is */
}

th:hover .sort-icon {
    color: black; /* Bij hover iets donkerder */
}

footer {
    background: #f8f8f8;
    padding: 20px;
    text-align: center;
    font-size: 1rem;
    color: #333;
}

.footer-logos {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.footer-logos img {
    max-height: 80px;
    width: auto;
}

.footer-extra-logo {
    display: flex;
    flex-direction: column;    /* Zet items onder elkaar */
    align-items: center;       /* Centreer logo én tekst */
    gap: 8px;                  /* Verticale afstand tussen logo en tekst */
    margin-bottom: 15px;
}

.footer-logo-tekst {
    font-size: 20px;
    color: #444;
    margin-top: 8px;
}

.footer-extra-logo img {
    max-height: 80px;
	 width: auto;
}

.footer-info {
    margin-top: 32px;
    font-family: 'Inter', -apple-system, "Segoe UI", system-ui, sans-serif;
}

.footer-info p {
    margin: 5px 0;
}

.footer-info a {
    text-decoration: none;
    color: #0073e6;
}

.footer-info a:hover {
    text-decoration: underline;
}
/* Cookie Consent Overlay */
.cookie-consent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease-in-out;
}

.cookie-consent-overlay.hidden {
    display: none;
}

.cookie-consent-box {
    background: white;
    padding: 30px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: slideUp 0.3s ease-in-out;
}

.cookie-consent-box h2 {
    color: #003366;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.cookie-consent-box p {
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 1rem;
}

.cookie-consent-box a {
    color: #0077cc;
    text-decoration: underline;
}

.cookie-consent-box a:hover {
    color: #005599;
}

.cookie-consent-button {
    background: #1976d2;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    font-weight: 500;
}

.cookie-consent-button:hover {
    background: #1565c0;
}

/* Cookie Policy Detail Modal */
.cookie-policy-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    animation: fadeIn 0.3s ease-in-out;
}

.cookie-policy-modal.hidden {
    display: none;
}

.cookie-policy-modal-box {
    background: white;
    border-radius: 12px;
    max-width: 680px;
    width: 92%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-in-out;
    overflow: hidden;
}

.cookie-policy-modal-content {
    padding: 30px 30px 10px;
    overflow-y: auto;
    flex: 1;
    color: #333;
    line-height: 1.6;
    font-size: 0.95rem;
}

.cookie-policy-modal-content h1 {
    color: #003366;
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 10px;
}

.cookie-policy-modal-content h2 {
    color: #003366;
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 6px;
}

.cookie-policy-modal-content h3 {
    color: #003366;
    font-size: 1rem;
    margin-top: 16px;
    margin-bottom: 4px;
}

.cookie-policy-modal-content p {
    margin: 6px 0;
}

.cookie-policy-modal-content a {
    color: #0077cc;
    text-decoration: underline;
}

.cookie-policy-modal-footer {
    padding: 16px 30px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.cookie-policy-close-btn {
    padding: 12px 24px;
    background: transparent;
    border: 2px solid #555;
    color: #555;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
}

.cookie-policy-close-btn:hover {
    background: #f0f0f0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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



/** voor het formulierke om gastorganiaties in te schrijven */
.inschrijving-container {
    margin: 0px auto; /* Centreert het formulier */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 900px;
}

.inschrijving-container h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.inschrijving-form {
    display: flex;
    flex-direction: column; /* Zorgt ervoor dat alles onder elkaar komt */
    align-items: stretch; /* Velden nemen de volledige breedte in */
    gap: 10px; /* Ruimte tussen de velden */
}

.inschrijving-form-heading {
    text-align: left; /* Links uitlijnen */
    margin-top: 20px; /* Ruimte boven de kop */
    margin-bottom: 10px; /* Ruimte onder de kop */
    padding-bottom: 10px; /* Extra ruimte tussen tekst en lijn */
    color: #333; /* Kleur van de tekst */
    border-bottom: 2px solid #ccc; /* Optioneel: een lijn onder de kop */
}

.inschrijving-form-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.inschrijving-form-group {
    margin-right: 10px; /* Ruimte tussen de velden */
}

.inschrijving-form-group:last-child {
    margin-right: 0; /* Geen marge aan de rechterkant van het laatste veld */
}

.inschrijving-form label {
    padding: 10px;
    padding-bottom: 5px; /* Minder ruimte onder label */
    text-align: left;
    display: block; /* FORCEREN dat labels boven inputs staan */
}

.radio-row {
  display: flex;
  gap: 20px; /* ruimte tussen opties */
}

.radio-row label {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* voor als het label van een input op dezelfde rij moet als de input, door één van de vorige css classes wordt dat onder elkaar gezet */
.inschrijving-label-input-row {
    display: flex;
    align-items: center;
    gap: 10px; /* Ruimte tussen label en input */
}

.inschrijving-form input,
.inschrijving-form textarea {
    width: 100%; /* Velden vullen de breedte */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: Arial; /* Zelfde font als andere inputs */
}

.inschrijving-container p {
    margin-bottom: 20px;
}

p.field-instruction {
    font-size: 0.9em;
    color: #666;
    font-style: italic;
    margin-top: 0;
    margin-bottom: 8px;
    padding-left: 20px;
    line-height: 1.3;
}


/* Stap indicator voor multi-step formulier */
.stap-indicator {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 30px;
    padding-bottom: 30px; /* reserve space for the absolutely-positioned labels */
    font-size: 0.9rem;
}

.stap-indicator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* Width is determined only by the circle (36px), not by the label */
    flex: 0 0 auto;
    width: 36px;
}

.stap-indicator-item .stap-nr {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ccc;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    z-index: 1;
}

.stap-indicator-item.actief .stap-nr {
    background-color: #64b4dc;
}

.stap-indicator-item.gedaan .stap-nr {
    background-color: #4DD9A8;
}

.stap-indicator-item .stap-label {
    /* Positioned absolutely so the label doesn't affect the item's flex width */
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #32324d;
    font-size: 0.8rem;
}

.stap-indicator-item.actief .stap-label {
    color: #64b4dc;
    font-weight: bold;
}

.stap-indicator-lijn {
    flex: 1;
    height: 3px;
    background-color: #ccc;
    min-width: 20px;
    max-width: 80px;
    /* Vertically centre the line on the 36px circles: (36 - 3) / 2 = 16.5px */
    margin-top: 16.5px;
    align-self: auto;
}

.stap-indicator-lijn.gedaan {
    background-color: #28a745;
}

.sector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.sector-grid label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
}

.sector-grid label > input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
}

.sector-grid label > span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.sector-grid label > .sector-info-btn {
    flex-shrink: 0;
    margin-left: auto;
    margin-top: 1px;
    background: none;
    border: 1px solid #adb5bd;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    cursor: pointer;
    font-size: 0.75em;
    line-height: 1;
    color: #57606a;
}

.sector-grid label:hover {
    background: #f0f4ff;
}

.org-tabel {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.94em;
    table-layout: fixed;
}

.org-tabel thead th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid #d0d7e3;
    background: #f4f6fb;
    font-weight: 600;
    color: #374151;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Column widths: naam gets more room, rest share the remainder */
.org-tabel th:nth-child(1),
.org-tabel td:nth-child(1) { width: 35%; }
.org-tabel th:nth-child(2),
.org-tabel td:nth-child(2) { width: 20%; }
.org-tabel th:nth-child(3),
.org-tabel td:nth-child(3) { width: 15%; }
.org-tabel th:nth-child(4),
.org-tabel td:nth-child(4) { width: 17%; }
.org-tabel th:nth-child(5),
.org-tabel td:nth-child(5) { width: 13%; }

.org-tabel tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.org-tabel tbody tr:last-child {
    border-bottom: none;
}

.org-tabel tbody tr:hover {
    background: #f0f4ff;
}

.org-tabel td {
    padding: 8px 12px;
    vertical-align: middle;
    color: #374151;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.org-tabel td:first-child {
    vertical-align: top;
}

.org-tabel-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
}

.org-tabel-label > input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
}

.org-tabel-label > span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.th-info-btn {
    flex-shrink: 0;
    margin-left: 4px;
    vertical-align: middle;
    background: none;
    border: 1px solid #adb5bd;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    cursor: pointer;
    font-size: 0.72em;
    line-height: 1;
    color: #57606a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.th-info-btn:hover {
    background: #e9ecef;
    border-color: #6c757d;
    color: #1f2328;
}

.org-tabel-info-btn {
    flex-shrink: 0;
    margin-left: auto;
    margin-top: 1px;
    background: none;
    border: 1px solid #adb5bd;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    cursor: pointer;
    font-size: 0.75em;
    line-height: 1;
    color: #57606a;
}

.org-tabel td a {
    color: #3b82d4;
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.org-tabel td a:hover {
    text-decoration: underline;
}

.login-formulier {
    font-size: 16px;
    color: #555;
    text-align: center;
    width: 400px;
}

.hidden {
    visibility: hidden;
}

#notification {
    position: fixed; /* Blijft op dezelfde plek, zelfs bij scrollen */
    top: 10px;
    right: 10px; /* Rechtsboven in plaats van linksboven */
    padding: 10px;
    border-radius: 5px;
    color: white;
    font-size: 30px; /* Iets kleinere tekst voor betere weergave */
    display: none;
    z-index: 1000;
    margin-top: 10px;
    transition: opacity 0.5s ease-in-out;
    
}

#notification.success {
    background-color: #28a745; /* Groen */
}

#notification.error {
    background-color: #f44336; /* Rood */
}

.translation-item {
    cursor: pointer;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-bottom: 2px solid #ccc;
    background-color: #fff;
    margin-bottom: 2px;
    transition: background-color 0.2s ease;
}

.translation-item:hover {
    background-color: #f8f9fa;
    border-color: #999;
}

.translation-item.tooltip {
  position: relative;
  cursor: pointer;
}

.translation-item .tooltiptext {
  visibility: hidden;
  width: max-content;
  max-width: 300px;
  background-color: #333;
  color: #fff;
  text-align: left;
  padding: 6px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* boven het element */
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 13px;
  line-height: 1.4;
}

.translation-item.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

input[type="checkbox"]:disabled {
    cursor: not-allowed;
    filter: grayscale(100%) brightness(1.2);
    position: relative;
}

input[type="checkbox"]:disabled::after {
    content: "✕";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 14px;
}

.disabled-link {
    color: grey;
    text-decoration: none;
    cursor: not-allowed;
}

#guestTable thead th,
#organisationsTable thead th,
#userTable thead th {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}

#organisationsTable .timeslot-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

#pagination button,
#pagination-top button,
#cv-pagination button,
#cv-pagination-top button {
    margin: 0 5px 8px 5px;;
    padding: 8px 12px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 1.2rem;
}

#pagination button:hover,
#pagination-top button:hover,
#cv-pagination button:hover,
#cv-pagination-top button:hover {
    background-color: #e0e0e0;
}

#pagination button.active,
#pagination-top button.active,
#cv-pagination button.active,
#cv-pagination-top button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    font-weight: bold;
}

.tooltip-btn {
    position: relative;
}

.tooltip-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 0; /* links uitlijnen */
    transform: none; /* geen horizontale verschuiving */
    background-color: #333;
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 1.2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 1000;
}

.tooltip-btn:hover::after {
    opacity: 1;
}

/* buttons in tabellen met organisaties, buttons om in te schrijven of te selecteren, ... zowel gebruikt in admin als in gebruikers pagina's */
.tabel-selecteer-btn {
    padding: 3px 10px;
    background-color: #007bff;
    border: none;
    color: white;
    font-size: inherit;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.tabel-selecteer-btn:hover {
    background-color: #0056b3;
}

.tabel-selecteer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tabel-selecteer-btn--secondary {
    background-color: #6c757d; /* grijs */
}

.tabel-selecteer-btn--secondary:hover {
    background-color: #5a6268;
}

.tabel-selecteer-btn--delete  {
    background-color: #ff4d4d; /* rood */
}

.tabel-selecteer-btn--delete:hover {
    background-color: #ff1a1a;
}

.tabel-selecteer-btn--gekopieerd {
    background-color: #66b3ff; /* grijs */
}

.tabel-selecteer-btn--gekopieerd:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tabel-selecteer-btn--selected {
    border: 3px solid #0056b3;
    font-weight: bold;
}

/* ── CV gezien badge ─────────────────────────────────────────────────────── */
.cv-gezien-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2e7d32;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 10px;
    vertical-align: middle;
    white-space: nowrap;
}

tr.cv-rij-gezien > td:first-child {
    background: #f6fef7;
}

.year-button-container {
    margin-right: 10px;
    margin-bottom: 5px;
    display: inline-block;
}

/* gebruikt in pop-up om inschrijvingspagina gasten */
.readonly-info {
    padding: 8px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    min-height: 1.5em;
}

.visits-status-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0px;
    padding-bottom: 12px;
}

/* voor organisaties in gasten.php, die volledig volzet zijn */
.volledig-volzet {
    color: #999; /* lichtere grijze kleur */
    font-style: italic; /* optioneel, voor extra visuele indicatie */
}

/* voor specifieke bezoekmomenten binnen een cel */
.volzet {
    font-style: italic;
    color: #999;
}

.radio-group label {
    display: inline-block;
    margin-right: 15px; /* optioneel wat afstand */
    padding: 0;
}

/* Stijl voor de bestandenlijst */
#fileListContainer {
    max-height: 400px;
    overflow-y: auto;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.file-item:last-child {
    border-bottom: none;
}

.file-link {
    flex-grow: 1;
}

.button-group {
    display: flex;
    gap: 0.5rem;
}

.visually-hidden-trap {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.visit-delete-btn {
    background: none;
    border: none;
    color: red;
    font-size: 18px;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
    transition: color 0.2s;
}
.visit-delete-btn:hover {
    color: darkred;
}

.visit-status-tekst {
    font-weight: normal;
    margin-right: auto;
}

.geselecteerde-visits-wrapper {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    background-color: #E9ECEF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.filters-wrapper {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0 0 0;
    background-color: #F1F3F5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Filter actief indicator - Badge naast tekst */
.filter-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: bold;
    margin-left: 8px;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.filter-active-badge:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

.filter-active-badge:hover::after {
    content: " ✕";
    font-size: 1.1em;
    margin-left: 2px;
}

.filter-active-badge:active {
    transform: scale(0.95);
}

.filters-wrapper.has-active-filter {
    border-color: #007bff;
    border-width: 2px;
    background-color: #e7f3ff;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* ruimte tussen knoppen */
    margin-bottom: 1rem;
}

.button-row form {
    margin: 0;
}

.gebruiksbeheer-form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.gebruiksbeheer-form-inline input[type="email"],
.gebruiksbeheer-form-inline input[type="text"] {
    width: 400px;
    max-width: 100%;
    font-size: 19.2px;
}

.gebruiksbeheer-form-inline select {
    width: 100px;
    font-size: 19.2px;
    max-width: 100%;
}

select[name="update_user_taal"] {
    font-size: 19.2px; /* pas hier aan naar wens */
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}

.status-pending { background: orange; }
.status-retry   { background: dodgerblue; }
.status-failed  { background: crimson; }
.status-sent    { background: seagreen; }
.status-sending { background: #f1c40f; }

a.date-link {
  color: blue;
  text-decoration: none;
}
a.date-link:hover {
  text-decoration: underline;
}

#emailQueueTable td:first-child {
  white-space: nowrap;
}

.disabled-container {
    opacity: 0.5;
    pointer-events: none; /* voorkomt klikken */
}

.password-container {
    position: relative;
}

.password-container input {
    width: 100%;
    padding-right: 45px;
    box-sizing: border-box;
}

/* Verberg de native password-reveal knop in Edge/IE en Chrome */
.password-container input[type="password"]::-ms-reveal,
.password-container input[type="password"]::-ms-clear {
    display: none;
}
.password-container input[type="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    color: #666;
    /* Voorkom tekst-selectie bij snel klikken/houden */
    user-select: none;
    -webkit-user-select: none;
}

.toggle-password:hover {
    color: #000;
}

.btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 9999px;
    padding: 1rem 1.5rem;
    font-family: Sora;
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    color: #32324d;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn--groen {
    background-color: #4dd9a8;
    color: #32324d;
    align-self: center;
}

.btn--groen:hover {
    border-color: #32324d;
    background-color: #32324d;
    color: #fff;
    text-decoration: none;
}

.btn--groen--loading {
    pointer-events: none;
    opacity: 0.8;
    gap: 0.5rem;
}

.btn--groen--loading::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.btn--wit {
    background-color: #fff;
    color: #32324d;
}

.btn--wit--metborder {
    border-color: #000;
}

.btn--wit--geenborder {
    border: none;
}

.btn--wit:hover {
    background-color: #32324d;
    color: #fff;
    text-decoration: none;
}

.btn--rood {
    background-color: #ff4d4d;
    color: #32324d;
    align-self: center;
}

.btn--rood:hover {
    background-color: #E63F3F;
    color: #32324D;
}

.btn--lichtgrijs {
    background-color: #D3D3D3;
    color: #32324d;
    align-self: center;
}

.btn--lichtgrijs:hover {
    background-color: #c0c0c0;
    color: #32324D;
}

.btn--ext:after {
    display: block;
    width: 1em;
    height: 1em;
    margin-left: 0.5rem;
    flex-shrink: 0;
    content: "";
    background-color: currentColor;

    -webkit-mask-image: url("data:image/svg+xml,%3csvg%20width='48'%20height='30'%20viewBox='0%200%2048%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M34.3281%201.03666e-07C34.3281%207.49841%2040.4067%2013.5771%2047.9051%2013.5771V16.4229C40.4067%2016.4229%2034.3281%2022.5016%2034.3281%2030H31.9565C31.9565%2024.0973%2035.1632%2018.9435%2039.9295%2016.1858L0%2016.1858L2.07327e-07%2013.8142L39.9295%2013.8142C35.1632%2011.0565%2031.9565%205.90271%2031.9565%200L34.3281%201.03666e-07Z'%20fill='black'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg%20width='48'%20height='30'%20viewBox='0%200%2048%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M34.3281%201.03666e-07C34.3281%207.49841%2040.4067%2013.5771%2047.9051%2013.5771V16.4229C40.4067%2016.4229%2034.3281%2022.5016%2034.3281%2030H31.9565C31.9565%2024.0973%2035.1632%2018.9435%2039.9295%2016.1858L0%2016.1858L2.07327e-07%2013.8142L39.9295%2013.8142C35.1632%2011.0565%2031.9565%205.90271%2031.9565%200L34.3281%201.03666e-07Z'%20fill='black'/%3e%3c/svg%3e");

    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.btn--small {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    font-size: 1rem;
}

/* ── FAQ dropdown knop in header ──────────────────────────────────────────── */
.faq-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.faq-dropdown__main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.faq-dropdown__arrow {
    padding: 0 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 0.85em;
    line-height: 1;
    cursor: pointer;
    border-left: 1px solid rgba(50,50,77,0.25);
    align-self: stretch;
    display: flex;
    align-items: center;
}

.faq-dropdown__menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    list-style: none;
    margin: 4px 0 0;
    padding: 4px 0;
    z-index: 9999;
}

.faq-dropdown__menu li a {
    display: block;
    padding: 8px 16px;
    color: #32324d;
    text-decoration: none;
    font-size: 0.9em;
    white-space: nowrap;
}

.faq-dropdown__menu li a:hover {
    background: #f0fdf8;
    color: #32324d;
}

.faq-dropdown.open .faq-dropdown__menu {
    display: block;
}

/* ── FAQ doelgroep badge (enkel zichtbaar in "alle" view) ─────────────────── */
.faq-doelgroep-badge {
    font-size: 0.72em;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 4px;
}
.faq-doelgroep-badge--iedereen {
    background: #e8f4fd;
    color: #1a6fa8;
    border: 1px solid #b6d9f5;
}
.faq-doelgroep-badge--kandidaat {
    background: #eaf6ec;
    color: #1e7e34;
    border: 1px solid #b2dfbb;
}
.faq-doelgroep-badge--organisatie {
    background: #fef3e2;
    color: #a06000;
    border: 1px solid #f5d99a;
}

/* ── FAQ accordion (faq.php) ──────────────────────────────────────────────── */
.faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #f7f8fa;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1em;
    font-weight: 600;
    gap: 12px;
    transition: background 0.15s;
    font-family: inherit;
    color: inherit;
}
.faq-question:hover,
.faq-question[aria-expanded="true"] {
    background: #eef1f6;
}
.faq-question-text {
    flex: 1;
}
.faq-arrow {
    font-size: 0.8em;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.faq-question[aria-expanded="true"] .faq-arrow {
    transform: rotate(180deg);
}
.faq-answer {
    padding: 14px 18px;
    border-top: 1px solid #e5e7eb;
    line-height: 1.65;
}
mark.faq-highlight {
    background: #fff3a3;
    border-radius: 2px;
    padding: 0 2px;
}
.faq-search-wrap {
    margin-bottom: 24px;
}
.faq-search-input {
    width: 100%;
    max-width: 500px;
    padding: 10px 14px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}
.faq-page-title {
    margin-bottom: 10px;
}
.faq-no-results {
    color: #666;
    font-style: italic;
}
.faq-empty {
    color: #666;
}

/* -----------------------------------------------------------------------
   Audit log tabel (admin-auditlog.php)
   Vaste breedte zodat de tabel nooit breder is dan de filters-wrapper.
   table-layout: fixed + width: 100% laat de browser de kolommen
   respecteren en voorkomt dat lange e-mailadressen of namen uitlopen.
   hyphens: auto werkt samen met lang="nl" / lang="fr" op <html>.
   ----------------------------------------------------------------------- */
#auditlogTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    word-break: normal;
}

/* Kolom 1 – datum: smal, breekt tussen datum en tijd */
#auditlogTable th:nth-child(1),
#auditlogTable td:nth-child(1) {
    width: 10%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Kolom 2 – entiteit naam (e-mail / organisatienaam): breed, breekt op tekengrenzen */
#auditlogTable th:nth-child(2),
#auditlogTable td:nth-child(2) {
    width: 28%;
    overflow-wrap: anywhere;
    word-break: break-all;
    hyphens: auto;
}

/* Kolom 3 – gebruiker e-mail: breed, breekt op tekengrenzen */
#auditlogTable th:nth-child(3),
#auditlogTable td:nth-child(3) {
    width: 22%;
    overflow-wrap: anywhere;
    word-break: break-all;
    hyphens: auto;
}

/* Kolom 4 – rol: smal */
#auditlogTable th:nth-child(4),
#auditlogTable td:nth-child(4) {
    width: 10%;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Kolom 5 – entiteit: ruim, breekt op woordgrenzen met afbreektekens */
#auditlogTable th:nth-child(5),
#auditlogTable td:nth-child(5) {
    width: 20%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* Kolom 6 – waarden-knop: smal, knop breekt niet */
#auditlogTable th:nth-child(6),
#auditlogTable td:nth-child(6) {
    width: 10%;
    text-align: center;
    white-space: nowrap;
}