/* 1. BASIS LAYOUT & KLEURENPALET KLERKEN HISTORIEK */
:root { 
    --groen: #e8f5e9; 
    --sepia: #f4ecd8; 
    --bruin: #5d4037; 
    --border: #d3c4a9;
    --tekst: #333;
    --wit: #ffffff;
	
  --color-button-primary: #22c55e;      /* Groen */
  --color-button-active: #15803d;       /* Donkergroen (laatst ingedrukt) */
  --color-link: #3b82f6;                /* Blauw */
  --color-link-visited: #6b7280;        /* Grijs (reeds bezocht/ingedrukt) */
}

/* Standaard link styling */
a {
  color: var(--color-link);
  text-decoration: underline;
}

a:visited {
  color: var(--color-link-visited);
}

/* Standaard button styling */
button, .btn {
  background-color: var(--color-button-primary);
  color: white;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* De actieve/laatst ingedrukte button klasse */
button.is-active, .btn.is-active {
  background-color: var(--color-button-active);
}
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    display: grid; 
    height: 100vh; 
    grid-template-areas: 
        "logo actueel" 
        "historie info"; 
    /* VERBETERING: 'min-content' zorgt dat de kolom krimpt tot de tekst, met een max van 280px */
    grid-template-columns: minmax(120px, min-content) 1fr; 
    grid-template-rows: 70px 1fr; 
    background: #fffcf5; 
    overflow: hidden; 
	 padding-bottom: 80px; /* Zorg dat dit even hoog is als je footer-balk */
}

/* Of als je footer niet fixed is, zorg dat hij de flow volgt: */
footer {
    clear: both;
    position: relative;
    margin-top: 20px;
}


/* 2. LOGO AREA (RESPONSIVE) */
.logo-area { 
    grid-area: logo; 
    background: var(--sepia); 
    border-bottom: 2px solid var(--border); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 15px; 
    z-index: 1001; 
}

.logo-area img { 
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; 
    object-fit: contain; 
    display: block;
}

/* 3. HOOFDGEBIEDEN */
.header-actueel { 
    grid-area: actueel; 
    background: var(--groen); 
    border-bottom: 2px solid #a5d6a7; 
    display: flex; 
    align-items: center; 
    padding: 0 25px; 
    z-index: 1000; 
}

.sidebar-historie { 
    grid-area: historie; 
    background: var(--sepia); 
    border-right: 2px solid var(--border); 
    overflow-y: auto; 
    padding: 10px 0; /* Iets compacter */
    /* Zorgt dat de sidebar niet breder wordt dan nodig */
    max-width: 280px; 
}

/* VERBETERING: Maak de navigatie-links compacter */
.sidebar-historie a {
    padding: 6px 15px; /* Minder verticale padding voor smallere rijen */
    white-space: nowrap; /* Voorkomt dat tekst onnodig afbreekt */
}
.main-info { 
    grid-area: info; 
    padding: 40px; 
    overflow-y: auto; 
    background: var(--wit); 
    padding-bottom: 120px; 
}

/* 4. NAVIGATIE (BOVEN & LINKS) */
nav ul, aside ul { list-style: none; padding: 0; margin: 0; }
nav a, aside a { display: block; text-decoration: none; color: var(--tekst); padding: 12px 15px; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 14px; transition: 0.2s; }

/* BOVEN MENU (Scrollable Dropdown & Accordeon voor diepe mappen) */
.header-actueel > ul { display: flex; gap: 8px; }
.header-actueel li { position: relative; }
.header-actueel a { background: var(--wit); border: 1px solid #ddd; border-radius: 4px; white-space: nowrap; }
.header-actueel ul ul { 
    display: none; position: absolute; top: 100%; left: 0; 
    z-index: 3000; min-width: 260px; max-height: 70vh; 
    overflow-y: auto; background: var(--wit); box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
}
.header-actueel li:hover > ul { display: block; }

/* Diepe mappen boven (Straten > Namen > Straat) klappen naar beneden uit */
.header-actueel ul ul ul { position: relative; left: 0; top: 0; border-left: 4px solid var(--groen); box-shadow: none; background: #fafafa; }
.header-actueel ul ul ul a { padding-left: 35px; font-size: 13px; }

/* SIDEBAR ACCORDEON */
.sidebar-historie a:hover { background: var(--wit); padding-left: 20px; color: var(--bruin); }
.sidebar-historie li:hover > ul { display: block; position: relative; }
.sidebar-historie ul ul a { padding-left: 40px; font-size: 0.9em; background: rgba(0,0,0,0.03); }

/* 5. CONTENT & GOOGLE MAPS */
.breadcrumb { background: #f9f9f9; padding: 10px 15px; border-radius: 4px; margin-bottom: 25px; font-size: 12px; border: 1px solid #eee; }
.breadcrumb a { color: var(--bruin); font-weight: bold; text-decoration: none; }
.breadcrumb span { margin: 0 8px; color: #ccc; }

.content-view { line-height: 1.7; color: var(--tekst); }
.content-view strong, .content-view b { font-weight: bold !important; }
.content-view h1, .content-view h2 { color: var(--bruin); margin: 20px 0 10px 0; }
.content-view img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0; }

#mapBox { box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 2px solid var(--border); overflow: hidden; }

/* 6. DRIE-DELIGE FOOTER */

.footer-bar { 
    position: fixed; bottom: 0; left: 0; width: 100%; 
    background: #1a1a1a; color: #bbb; padding: 12px 30px; 
    display: grid; grid-template-columns: 1.2fr 0.6fr 1.2fr; 
    align-items: center; z-index: 4000; border-top: 3px solid var(--bruin); 
    font-size: 11px;
}
.footer-left { display: flex; align-items: center; gap: 10px; }
.footer-center { display: flex; align-items: center; justify-content: center; gap: 8px; }
.footer-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.footer-left input { background: #333; color: var(--wit); border: 1px solid #444; padding: 4px 8px; border-radius: 3px; width: 80px; }
.btn-login { background: #2e7d32; color: var(--wit); border: none; padding: 4px 10px; cursor: pointer; border-radius: 3px; font-weight: bold; }
.logout-link { color: #ffeb3b; text-decoration: none; font-size: 10px; border: 1px solid #ffeb3b; padding: 1px 5px; border-radius: 3px; }

.device-switcher { background: #333; padding: 3px 8px; border-radius: 20px; display: flex; gap: 10px; border: 1px solid #444; }
.device-switcher button { background: transparent; border: none; cursor: pointer; font-size: 16px; transition: transform 0.2s; filter: grayscale(100%); }
.device-switcher button:hover { transform: scale(1.2); filter: grayscale(0%); }

/* 6. DRIE-DELIGE FOOTER EXTRA'S */
.device-switcher button { 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    font-size: 18px; 
    transition: all 0.2s ease; 
    filter: grayscale(100%); 
    opacity: 0.5;
    padding: 0 5px;
}

/* Effect als een modus actief is (indien je dit met JS aanstuurt) */
.device-switcher button.active, 
.device-switcher button:hover { 
    filter: grayscale(0%); 
    opacity: 1;
    transform: scale(1.2); 
}

/* Specifieke rotatie voor de liggende smartphone-knop */
.device-switcher button[title="Smartphone Landschap"] {
    transform: rotate(-90deg);
}

.device-switcher button[title="Smartphone Landschap"]:hover {
    transform: rotate(-90deg) scale(1.2);
}

/* 7. ALGEMENE ELEMENTEN */
.btn { padding: 8px 15px; border-radius: 4px; color: var(--wit); text-decoration: none; font-size: 11px; font-weight: bold; border: none; cursor: pointer; display: inline-block; transition: 0.2s; }
.btn:hover { opacity: 0.9; }

.stats-table { width: 100%; border-collapse: collapse; margin-top: 10px; background: #fff; }
.stats-table th, .stats-table td { border: 1px solid #ddd; padding: 10px; text-align: left; }
.stats-table th { background: #333; color: #fff; cursor: pointer; }


.main-menu ul ul {
    margin-left: 15px;
    border-left: 1px solid #ccc;
    padding-left: 10px;
}

/* --- HORIZONTAAL MENU (BOVEN) --- */
.header-actueel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Zet items naast elkaar */
    flex-wrap: wrap; 
    gap: 20px;
    background: #f4f4f4;
    padding: 10px;
}

.header-actueel li {
    position: relative;
    display: inline-block;
}

/* Sub-niveaus in het topmenu (als die opengeklapt zijn) */
.header-actueel ul ul {
    display: block; /* Toon onder elkaar binnen het horizontale item */
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    min-width: 150px;
    z-index: 100;
    padding: 5px;
}

/* --- VERTICAAL MENU (LINKS) --- */
.sidebar-historie ul {
    list-style: none;
    padding: 0;
    margin: 5px 0;
    display: block; /* Altijd onder elkaar */
}

.sidebar-historie li {
    margin: 5px 0;
}

.sidebar-historie ul ul {
    margin-left: 15px;
    border-left: 1px dotted #ccc;
    padding-left: 10px;
}

/* De gezamenlijke box */
.content-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.intro-text {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee; /* Scheidingslijn tussen tekst en lijst */
}
/* 1. BASIS LAYOUT & CONTAINERS */
.container, .main-info {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}

.content-box {
    display: inline-block;
    min-width: 250px;
    max-width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}
/* 2. LIJSTEN (Directory & Menu) */

/* Containers: Breedte en gedrag */
.directory-listing, 
.sidebar, 
.menu-list,
.content-box {
    width: fit-content;
    min-width: 180px;
    max-width: 100%;       /* Voorkomt buiten scherm lopen */
    box-sizing: border-box; /* Padding telt mee in breedte */
}

/* De lijst-structuur */
.directory-listing ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* De lijst-items: Tekstafhandeling */
.directory-listing li {
    display: flex;
    align-items: center;
    overflow-wrap: break-word; /* Breekt lange woorden af */
    word-break: break-word;    /* 'break-word' is vaak netter dan 'break-all' */
    min-width: 0;              /* Nodig voor correcte flexbox-wrapping */
}

/* De links binnen de lijst */
.directory-listing li a {
    display: block;
    width: 100%;
    min-width: 0; /* Essentieel voor flexbox om tekst te laten inkorten */
    white-space: normal; /* Zorgt dat tekst naar de volgende regel gaat */
}

/* Gecombineerde stijl voor lijst-items */
.menu-list li, 
.directory-listing li {
    display: flex;
    align-items: center;
    padding: 2px 0;
    line-height: 1.2;
    font-size: 0.95rem;
}

/* Gecombineerde stijl voor links */
.menu-list li a, 
.directory-listing li a {
    display: block;
    width: 100%;
    padding: 2px 5px;
    text-decoration: none;
    color: var(--primary-color, inherit);
    box-sizing: border-box;
}

/* 3. ICOONTJES (Pseudo-elements) */
.is-directory::before,
.is-file::before {
    margin-right: 8px;
    font-size: 1.1em;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0; /* Voorkomt dat icoon platgedrukt wordt */
}

.is-directory::before { content: "📁"; }
.is-file::before      { content: "📄"; opacity: 0.6; }

/* 4. RESPONSIVE (Mobile first/Adjustments) */
@media screen and (max-width: 768px) {
    .wrapper { display: block; }

    aside, .sidebar, .menu-list {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .note-editor { width: 100% !important; height: auto !important; }

    #statsTable {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .breadcrumb { font-size: 0.85rem; padding: 5px; }

    .btn {
        display: block;
        width: 100%;
        padding: 12px;
        margin-bottom: 10px;
    }
}
/* --- DE SIMULATOR (COMPACT) --- */
body.is-mobile, 
body.is-tablet {
    margin: 20px auto !important;
    border: 10px solid #333;
    border-radius: 20px;
    height: 80vh; 
    overflow-x: hidden; /* Direct hier toegevoegd */
    overflow-y: auto;
    transition: all 0.3s ease; /* Animeert nu ook de hoogte */
    background-color: #f0f0f0; /* Geeft een duidelijk 'device' contrast */
}

/* Breedte instellingen */
body.is-tablet { width: 1024px; }
body.is-mobile { width: 375px; }

/* De Landscape overrule: Specifieker en krachtiger */
body.is-mobile.is-landscape {
    width: 736px !important;
    height: 414px !important;
}
/* Zorg dat de navigatiebalk/header ook meeschaalt */
header, .top-bar {
    width: 100%;
    max-width: 100%;
}
/* --- DE MOBIELE LOGICA (Gekoppeld aan de simulator) --- */

/* 1. Voor echte mobiele schermen (Media Query) */
@media screen and (max-width: 768px) {
    .wrapper { 
        display: block; 
    }

    aside, .sidebar, .menu-list {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }

    .btn {
        display: block;
        width: 100%;
    }
}

/* 2. Voor de simulator classes op de body */
body.is-mobile .wrapper,
body.is-tablet .wrapper { 
    display: block; 
}

body.is-mobile aside, body.is-mobile .sidebar, body.is-mobile .menu-list,
body.is-tablet aside, body.is-tablet .sidebar, body.is-tablet .menu-list {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px;
}

body.is-mobile .btn,
body.is-tablet .btn {
    display: block;
    width: 100%;
}

/* 2. Specifieke aanpassing voor landscape simulatie */
/* In standaard CSS schrijf je de selectors voluit, zonder de '&' */
body.is-landscape {
    font-size: 0.9rem;
}

/* Als je wilt dat de tekst alleen in de mappenlijst kleiner wordt bij landscape: */
body.is-landscape .directory-listing {
    font-size: 0.9rem;
}
/* 3. Voorkom dat afbeeldingen in de content te breed worden */
.content-view img, .intro-text img {
    max-width: 100%;
    height: auto;
}
/* 8. GSM OPTIMALISATIE */
@media screen and (max-width: 768px) {
    body {
        grid-template-areas: 
            "logo"
            "actueel"
            "historie"
            "info";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr;
        overflow-y: auto; /* Laat de hele pagina scrollen op GSM */
    }

    .sidebar-historie {
        border-right: none;
        border-bottom: 2px solid var(--border);
        max-width: 100%;
        min-height: auto;
    }

    .main-info {
        padding: 20px;
        padding-bottom: 150px; /* Ruimte voor de footer bar */
    }

    .footer-bar {
        grid-template-columns: 1fr; /* Stapel footer items op GSM */
        height: auto;
        text-align: center;
    }
}

.sidebar-nav ul { list-style: none; padding-left: 15px; margin: 5px 0; }
.sidebar-nav ul ul { border-left: 1px dotted #ccc; }
.sidebar-nav li { margin: 3px 0; }
/* Summernote Lite Fixes */
.note-editor { margin-bottom: 20px; }
.note-btn { font-family: "summernote" !important; }

        .open-link {
            display: inline-block;
            margin: 20px;
            color: #0066cc;
            text-decoration: none;
            font-weight: bold;
            font-family: sans-serif;
        }
        .open-link:hover {
            text-decoration: underline;
        }
        .php-vars-container {
            width: 100%;
            max-width: 600px;
            height: 250px;
            overflow: auto;
            background: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin: 20px;
        }
        .php-vars-container pre {
            margin: 0;
            font-family: monospace;
            font-size: 14px;
        }
.code-block {
    background-color: #1a1a1a;
    border-left: 4px solid #007bff;
    padding: 10px;
    color: #a9dc76; /* Groene syntax-achtige kleur */
}

.trace-item code {
    background: #1a1a1a;
    color: #a9dc76; /* Accentkleur voor de code */
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}