/* /assets/css/layout.css */

/* =========================================
 1. Basis Layout (Full Viewport & Flex)
========================================= */

/* Default layout: Scrollen van de hele body */
body {
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
}

.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
height: 100%;
}

main.content {
flex-grow: 1;
flex-shrink: 0;
min-height: 1px;
overflow-y: auto;
padding: 20px;
}

/* Scrollfix: Inhoud scrollt tussen header en footer */
body.scrollfix {
display: flex;
flex-direction: column;
height: 100vh;  /* volledige viewporthoogte */
overflow: hidden; /* voorkom dubbele scrollbars */
}

body.scrollfix .page-wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;  /* belangrijk voor flexbox scroll */
}

body.scrollfix header.topbar,
body.scrollfix footer.bottombar {
flex-shrink: 0;  /* header/footer blijven vast */
}

body.scrollfix main.content {
flex: 1 1 auto;  /* neemt resterende ruimte */
min-height: 0;  /* voorkomt dat flexbox de hoogte blokkeert */
overflow-y: auto; /* inhoud scrollt */
-webkit-overflow-scrolling: touch; /* soepel scrollen op mobiel */
}


/* =========================================
 2. Header, Footer en Logo
========================================= */
header.topbar,
footer.bottombar {
height: 60px;
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
background-color: var(--kleur-accent);
color: white;
}

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

.footer-right a {
color: white;
text-decoration: underline;
font-weight: 500;
transition: color 0.2s ease;
}
.footer-right a:hover { color: var(--kleur-accent-geel); }


/* Logo en Titel */
.logo-wrapper {
text-align: center;
margin-bottom: 20px;
}
.logo-wrapper img {
max-width: 200px;
height: auto;
display: inline-block;
}
.logo-title {
display: flex;
align-items: center;
gap: 10px;
}
.logo-title .logo-img {
height: 40px;
width: auto;
}
.logo-title .page-title {
font-weight: 600;
font-size: 18px;
color: #fff;
}

/* Op kleinere schermen logo automatisch kleiner */
@media (max-width: 640px) {
.logo-wrapper img {
 max-width: 150px;
}
}


/* =========================================
 3. Navigatie (Desktop & Mobiel)
========================================= */

/* --- Standaard: Desktop --- */
.hamburger {
display: none;
}
.desktop-menu {
display: flex;
gap: 10px;
}
.menu-popup {
display: none;
}

/* --- Mobiel --- */
@media screen and (max-width: 768px) {
.hamburger {
 display: block;
 background: none;
 border: none;
 color: white;
 font-size: 20px;
 cursor: pointer;
}

.desktop-menu {
 display: none;
}

.menu-popup {
 display: none;
 flex-direction: column;
 position: absolute;
 top: 60px;
 right: 20px;
 background: var(--kleur-accent);
 padding: 12px;
 border-radius: var(--radius);
 z-index: 100;
}

.menu-popup.open {
 display: flex;
 gap: 8px;
}

.menu-popup a {
 color: white;
 text-decoration: none;
 padding: 8px 12px;
 border-radius: 4px;
 background: #004080;
 margin-bottom: 6px;
}

.menu-popup a:hover {
 background: var(--kleur-accent-licht);
}
}


/* =========================================
 4. Grid Helpers (Kolommen)
========================================= */
/* Dashboard grid (Generiek grid) */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-top: 30px;
}

/* 2 Kolommen */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 900px) {
.grid-2 { grid-template-columns: 1fr; }
}

/* 3 Kolommen */
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
align-items: stretch; /* alle kolommen even hoog */
}
@media (max-width: 900px) {
.grid-3 { grid-template-columns: 1fr; }
}


/* =========================================
 5. Printvriendelijke Layout
========================================= */
@media print {
header.topbar,
footer.bottombar,
.btn,
.btn-header { display: none; }

body {
 background: white;
 color: black;
}

.voorwaarden {
 box-shadow: none;
 padding: 0;
}

.table-wrapper {
 max-height: none;
 overflow: visible;
}
}