/* =========================================================================
   KLERKEN HISTORIEK CMS - CORE RECOVERY (ai.css)
   ========================================================================= */

@import url('ai-header.css');
@import url('ai-mid.css');
@import url('ai-footer.css');

:root {
    --bg-main: #1e1e1e;
    --bg-darker: #141414;
    --accent-gold: #ca8a04;
    --border-historic: #800020;
    --text-light: #ffffff;
    --text-muted: #b3b3b3;
}

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

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-main);
    color: var(--text-light);
    font-family: sans-serif;
}

/* De bewezen stabiele 3-rijen hoofdstructuur */
.grid-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* RIJ 1: HEADER BALK (Volledige breedte bovenin) */
.row-rij1 {
    display: flex !important;
    flex-direction: row !important;
    width: 100vw !important;
    height: 10vh !important;
    min-height: 70px !important;
    background-color: var(--bg-darker);
    border-bottom: 3px solid var(--border-historic) !important;
}

/* RIJ 2: MIDDENBLOK (Onbreekbaar 10% - 80% - 10% grid) */
/* Update in css/ai.css - Onbreekbare horizontale Midden-balk */
.main-body-row {
    display: flex !important; /* Schakel over naar flexbox voor cross-browser garantie */
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100vw !important;
    height: 80vh !important;
    flex-grow: 1 !important;
    background-color: var(--bg-main);
    box-sizing: border-box !important;
}

/* Voeg dit onderaan toe in css/ai.css (of vervang de oude footer-rij) */
.row-rij3 {
    display: flex !important;
    flex-direction: row !important;
    width: 100vw !important;
    height: 10vh !important;
    min-height: 60px !important;
    background-color: var(--bg-darker);
    border-top: 3px solid var(--border-historic) !important;
}

/* === Omgevingskleur: localhost = oranje, tst = geel, live = groen === */
:root                   { --omg-kleur: #ff9800; }  /* onbekend = oranje */
body.omgeving-localhost { --omg-kleur: #ff9800; }  /* oranje */
body.omgeving-test      { --omg-kleur: #ffd600; }  /* geel   */
body.omgeving-live      { --omg-kleur: #2ecc71; }  /* groen  */

/* "Alles" in de header (OMGEVING-regel, MIJN STATUS, enz.) */
/* Omgevingskleur op de header-onderdelen */
.cms-title,
.env-indicator-wrapper,
.env-badge,
.dashboard-topbar,
.control-title {
    color: var(--omg-kleur);
}
.env-badge {
    border-color: var(--omg-kleur);
}
.header-right-dashboard .dashboard-console {
    border-color: var(--omg-kleur);
}
/* MIJN STATUS-paneel in de omgevingskleur */
body .status-panel-title,
body .status-console-box,
body .status-console-box .meta-label,
body .status-console-box .meta-value {
    color: var(--omg-kleur);
}
body .status-console-box {
    border-color: var(--omg-kleur);
}
/* Zoom: vergroten naar rechts/onder, zodat de linkerkant nooit buiten beeld valt */
#editImage { transform-origin: 0 0 !important; }