/* =========================================================
   BASIS / RESET
   ========================================================= */
html, body {
    height: 100%;
    overflow-x: hidden; /* nooit horizontaal scrollen */
}

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;

    /* header + footer vast, content scrollt binnen container */
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =========================================================
   NAVIGATIE
   ========================================================= */
nav {
    background-color: #003366;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    z-index: 1000;
    position: relative;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* links/rechts groepen */
.nav-left li { margin-right: 15px; }
.nav-right li { margin-left: 10px; }

/* Links als blok */
nav a.nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.15s ease;
}

nav a.nav-link:hover,
nav a.nav-link:focus {
    background-color: rgba(255,255,255,0.18);
    outline: none;
}

/* Login / logout knop */
.nav-button {
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.nav-button.login { background-color: #4CAF50; }
.nav-button.login:hover { background-color: #45a049; }

.nav-button.logout { background-color: #E94F4F; }
.nav-button.logout:hover { background-color: #d43f3a; }

/* =========================================================
   DROPDOWNS
   ========================================================= */
.dropdown { position: relative; }

/* hover bridge tegen wegklappen */
.dropdown::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 200px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    overflow: hidden;
    z-index: 2000;
}

.dropdown-content a {
    display: block;
    padding: 12px 14px;
    color: #003366;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.dropdown-content a:hover,
.dropdown-content a:focus {
    background-color: #f1f1f1;
    outline: none;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}

/* Logout knop in dropdown */
.dropdown-logout {
    width: 100%;
    border: none;
    padding: 12px 14px;
    background-color: #E94F4F;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: left;
}

.dropdown-logout:hover { background-color: #d43f3a; }

/* =========================================================
   CONTENT CONTAINER (scrollgebied)
   ========================================================= */
.container {
    width: 80%;
    margin: 20px auto;
    padding: 20px;

    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);

    flex: 1 1 auto;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

/* ✅ EXTRA: container zonder scroll (voor zoeken.php) */
.container.no-scroll {
    overflow: hidden;
}

/* =========================================================
   LAYOUT BLOKKEN
   ========================================================= */
.row {
    display: flex;
    gap: 20px;
}

.column {
    flex: 1;
    padding: 20px;
    background-color: #fafafa;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* =========================================================
   ALERTS
   ========================================================= */
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-weight: 600;
}

.alert-success {
    background-color: #eaf7ee;
    border: 1px solid #bfe7cb;
    color: #1f7a3a;
}

.alert-error {
    background-color: #fdecec;
    border: 1px solid #f5bcbc;
    color: #b42318;
}

/* =========================================================
   FORMULIEREN
   ========================================================= */
.add-user-form,
.upload-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-user-form label,
.upload-form label {
    font-weight: 600;
}

.add-user-form input,
.add-user-form textarea,
.add-user-form select,
.upload-form input,
.upload-form textarea,
.upload-form select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.add-user-form button,
.upload-form button {
    align-self: flex-start;
    padding: 10px 20px;
    background-color: #003366;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
}

.add-user-form button:hover,
.upload-form button:hover {
    background-color: #002244;
}

.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

/* =========================================================
   BUTTON-LIKE LINKS
   ========================================================= */
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

a.btn-green { background-color: #4CAF50; }
a.btn-green:hover { background-color: #45a049; }

a.btn-orange { background-color: #f39c12; }
a.btn-orange:hover { background-color: #e67e22; }

a.btn-gray { background-color: #777; }
a.btn-gray:hover { background-color: #666; }

/* =========================================================
   TABEL
   ========================================================= */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    vertical-align: top;
}

th {
    background-color: #f4f4f4;
}

td.actions {
    white-space: nowrap;
}

td.actions form {
    display: inline;
    margin: 0;
}

/* =========================================================
   KNOPPEN (ADMIN/MEDIA)
   ========================================================= */
button.edit {
    background-color: #4CAF50;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}
button.edit:hover { background-color: #45a049; }

button.delete {
    background-color: #E94F4F;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}
button.delete:hover { background-color: #d43f3a; }

button.cancel {
    background-color: #777;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}
button.cancel:hover { background-color: #666; }

/* reset-knop in gebruikersbeheer */
button[name="send_reset"] {
    background-color: #f39c12;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}
button[name="send_reset"]:hover { background-color: #e67e22; }

/* =========================================================
   GEBRUIKERSBEHEER ACCORDION
   ========================================================= */
tr.edit-row { display: none; }
tr.edit-row.open { display: table-row; }

.edit-box {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* =========================================================
   MEDIA / UPLOAD – 50/50 BLOKKEN
   ========================================================= */
.upload-container,
.media-management-container {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.upload-container > *,
.media-management-container > * {
    flex: 1;
    min-width: 0;
}

.preview,
.media-list,
.file-edit {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.preview img,
.file-edit img {
    max-width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 6px;
}

/* =========================================================
   HOME GALLERY
   ========================================================= */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 15px;

    position: relative;
    z-index: 3;
}

.gallery-item {
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    transition: transform 0.12s ease, box-shadow 0.12s ease;

    display: block;
    position: relative;
    z-index: 4;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}

.gallery-thumb {
    height: 160px;
    background: #f6f6f6;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-meta {
    padding: 10px 12px;
}

.gallery-title {
    font-weight: 700;
    color: #003366;
}

.gallery-caption {
    font-size: 0.9rem;
    color: #555;
}

.gallery.gallery-search {
    grid-template-columns: repeat(3, 1fr);
}
.gallery.gallery-search .gallery-thumb {
    height: 130px;
}

/* =========================================================
   FOTO MODAL
   ========================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 3000;
}

.modal-overlay.open { display: flex; }

.modal-window {
    background: #fff;
    width: min(1000px, 100%);
    max-height: 90vh;
    border-radius: 10px;
    padding: 18px;
    position: relative;
    overflow: auto;
    box-shadow: 0 18px 55px rgba(0,0,0,0.35);
}

.modal-close {
    position: absolute;
    right: 12px;
    top: 10px;
    font-size: 26px;
    background: rgba(0,0,0,0.08);
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    line-height: 36px;
    text-align: center;
    font-weight: 700;
}

.modal-close:hover {
    background: rgba(0,0,0,0.16);
}

.modal-body {
    display: flex;
    gap: 20px;
}

.modal-media { flex: 1; }
.modal-info  { flex: 1; }

.modal-media img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 6px;
}

.info-row {
    margin-top: 10px;
}

/* =========================================================
   CHANGELOG
   ========================================================= */
.changelog-box {
    background: #fafafa;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 14px 16px;
}

.changelog-version {
    font-weight: 800;
    color: #003366;
    margin-top: 14px;
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.changelog-line {
    padding: 3px 0;
    line-height: 1.35;
    color: #333;
}

.changelog-empty {
    height: 10px;
}

.changelog-sep {
    height: 1px;
    background: #e2e2e2;
    margin: 12px 0;
}

/* =========================================================
   FOOTER (vast, hoogte ongewijzigd)
   ========================================================= */
.site-footer {
    background-color: #003366;
    color: #fff;
    flex: 0 0 auto;
}

/* 3 zones: links / midden / rechts */
.footer-inner {
    max-width: 80%;
    margin: 0 auto;
    padding: 14px 0;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    font-size: 0.9rem;
}

.footer-left { text-align: left; }
.footer-center { display: flex; justify-content: center; align-items: center; }
.footer-right { text-align: right; }

.footer-logo {
    max-height: 26px;
    width: auto;
    display: block;

    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* =========================================================
   ✅ CONFIRM MODAL (VERWIJDEREN)
   ========================================================= */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 4000;
}

.confirm-overlay.open { display: flex; }

.confirm-window {
    width: min(520px, 100%);
    background: #fff;
    border-radius: 12px;
    padding: 16px 16px 14px;
    box-shadow: 0 18px 55px rgba(0,0,0,0.35);
}

.confirm-title {
    margin: 0 0 8px 0;
    color: #003366;
}

.confirm-message {
    margin: 0 0 14px 0;
    color: #333;
    line-height: 1.35;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-confirm {
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 700;
    cursor: pointer;
}

.btn-confirm-no {
    background: #777;
    color: #fff;
}
.btn-confirm-no:hover { background: #666; }

.btn-confirm-yes {
    background: #E94F4F;
    color: #fff;
}
.btn-confirm-yes:hover { background: #d43f3a; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .container { width: 95%; }

    .row,
    .upload-container,
    .media-management-container,
    .modal-body {
        flex-direction: column;
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery.gallery-search {
        grid-template-columns: repeat(2, 1fr);
    }

    td.actions { white-space: normal; }
}

@media (max-width: 700px) {
    .footer-inner {
        max-width: 95%;
        grid-template-columns: 1fr;
        gap: 6px;
        text-align: center;
    }

    .footer-left,
    .footer-right {
        text-align: center;
    }
}

@media (max-width: 500px) {
    .gallery {
        grid-template-columns: 1fr;
    }

    .gallery.gallery-search {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   WACHTWOORD INDICATOR
   ========================================================= */
.pw-hint {
    background: #fafafa;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
}

.pw-meter {
    margin-top: 10px;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 8px;
}

.pw-ok { color: #1f7a3a; font-weight: 600; }
.pw-bad { color: #b42318; font-weight: 600; }

#submitBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}