/* ==========================================================================
   VANHOECKE.CSS - DEFINITIEVE OPGERUIMDE VERSIE
   ========================================================================== */

/* 1. GAP KILLER & BASE RESET */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    background-color: #0b1120;
}

form, #form1, main, .body-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

.container-fluid {
    padding-top: 25px !important;
}

*, *::before, *::after {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 2. NAVBAR BASE STYLING */
.navbar, nav, nav.navbar-default {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
}

.navbar-nav {
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

    .navbar-nav > li > a {
        padding: 10px 12px !important;
    }

/* 3. LIGHT MODE STYLING */
[data-theme="light"],
[data-theme="light"] *,
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] #form1,
html[data-theme="light"] #form1 *,
html[data-theme="light"] .container,
html[data-theme="light"] .container *,
html[data-theme="light"] .container-fluid,
html[data-theme="light"] .container-fluid * {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

    [data-theme="light"] a,
    html[data-theme="light"] a {
        color: #2563eb !important;
        background-color: transparent !important;
    }

    [data-theme="light"] input[type="text"],
    [data-theme="light"] select,
    [data-theme="light"] textarea,
    [data-theme="light"] .form-control,
    [data-theme="light"] button,
    [data-theme="light"] .btn-default {
        background-color: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1 !important;
    }

/* 4. DARK MODE STYLING */
[data-theme="dark"],
[data-theme="dark"] *,
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #form1,
html[data-theme="dark"] #form1 *,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container *,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] .container-fluid * {
    background-color: #0b1120 !important;
    color: #f1f5f9 !important;
    border-color: #1e293b !important;
}

    [data-theme="dark"] a,
    html[data-theme="dark"] a {
        color: #60a5fa !important;
        background-color: transparent !important;
    }

    [data-theme="dark"] input[type="text"],
    [data-theme="dark"] select,
    [data-theme="dark"] textarea,
    [data-theme="dark"] .form-control {
        background-color: #1e293b !important;
        color: #f1f5f9 !important;
        border: 1px solid #1e293b !important;
    }

/* 5. HEADER, ZOEKVELD & LINKER KOLOM */
#btnTheme {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 4px 8px !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
}

.search-input,
#q,
input[type="text"]#q {
    width: 100% !important;
    min-width: 220px !important;
    height: 38px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    display: block !important;
}

#divKeywords {
    padding-left: 15px !important;
    padding-right: 10px !important;
}

.row > div:first-child {
    padding-left: 20px !important;
}

/* 6. PLACES CARD CONTAINER & KADERS */
[data-theme="dark"] .panel-default,
[data-theme="dark"] #divPlaces > div {
    border: 1px solid #64748b !important; /* Heldere, opvallende rand */
    background-color: #0f172a !important;
    margin-bottom: 16px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   7. PANEL HEADERS & METADATA LAYOUT (FLOAT RECHTS)
   ========================================================================== */

/* Zorg dat de kopbalk floats netjes opvangt */
.panel-heading {
    background-color: transparent !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #1e293b !important;
    display: block !important; /* Geen flexbox om volgordeproblemen te voorkomen */
    clear: both !important;
    overflow: hidden !important;
}

/* Metadata STRIKT RECHTS op 1 regel */
.place-meta {
    float: right !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    margin-left: 15px !important;
    line-height: 1.5 !important;
}

    .place-meta a {
        color: #94a3b8 !important;
        text-decoration: none !important;
    }

        .place-meta a:hover {
            text-decoration: underline !important;
        }

/* Admin ID link opvallend stylen */
.place-id a {
    color: #f43f5e !important;
    font-weight: bold !important;
}


/* Titels opvallend en duidelijk groter dan de beschrijving */
.panel-heading .place-title,
a.place-title {
    font-size: 1.25rem !important; /* Duidelijk groter dan de body tekst */
    font-weight: 700 !important;   /* Extra dik gedrukt */
    line-height: 1.3 !important;
    color: #60a5fa !important;
}

/* Titel vult de linkerruimte op en blijft ruim voor de metadata */
    .place-title:hover {
        text-decoration: underline !important;
    }