/* Bouvy-huisstijl bovenop Galène. Wordt ná galene.css geladen (zie galene.html).
 * Forest-groen #14463C / #0E3329 / #082420 leidend, koper #C99879 alleen als accent.
 * Bij een update van Galène: kijk of de selectors hieronder nog bestaan in galene.css. */
/* Fonts lokaal: Galène stuurt een CSP die Google Fonts blokkeert. */
@font-face { font-family: 'Montserrat'; src: url('/montserrat-var-latin.woff2') format('woff2'); font-weight: 100 900; }
@font-face { font-family: 'Quattrocento Sans'; src: url('/quattrocento-sans-400-latin.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Quattrocento Sans'; src: url('/quattrocento-sans-700-latin.woff2') format('woff2'); font-weight: 700; }

:root {
    --bouvy-groen: #14463C;
    --bouvy-donker: #0E3329;
    --bouvy-diep: #082420;
    --bouvy-koper: #C99879;
    --bouvy-licht: #F4F1EC;
}

body { font-family: 'Quattrocento Sans', Georgia, serif; background: var(--bouvy-licht); color: #1d2b27; }
h1, h2, legend, label, .btn, .nav-text, .header-title { font-family: 'Montserrat', Arial, sans-serif; }

/* Kopbalk en zijbalk */
.navbar, .topnav, .users-header { background: var(--bouvy-groen) !important; }
.header-title, #title { color: #fff; font-weight: 600; letter-spacing: .02em; }
header .collapse, .galene-header { color: #fff; }
.galene-header { font-size: 0; line-height: 34px; }
.galene-header img { height: 30px; vertical-align: middle; }
.nav-link:hover, .nav-link label:hover, header .collapse:hover, .sidenav a:hover { color: var(--bouvy-koper); }
#left-sidebar { border-right: 1px solid #d9d3c8; }

/* Knoppen */
.btn-blue, .btn-success {
    background-color: var(--bouvy-groen); border-color: var(--bouvy-groen);
    border-radius: 6px; font-weight: 600;
}
.btn-blue:hover, .btn-success:hover { background-color: var(--bouvy-donker); border-color: var(--bouvy-donker); }
#chpwspan a { color: var(--bouvy-koper); }

/* Inlogkaart */
.login-box {
    width: 22em; height: auto; padding: 2em 2em 1.5em; margin: 1.5em auto;
    background: #fff; border-radius: 10px; border-top: 4px solid var(--bouvy-koper);
    box-shadow: 0 6px 24px rgba(8, 36, 32, .10);
}
.bouvy-welkom { text-align: center; margin-bottom: 1.2em; }
.bouvy-welkom h2 { margin: 0 0 .3em; color: var(--bouvy-groen); font-size: 1.25rem; font-weight: 700; }
.bouvy-welkom p { margin: 0; color: #4d5d58; font-size: .95rem; line-height: 1.4; }
.login-box label { color: var(--bouvy-diep); font-weight: 600; font-size: .85rem; }
.login-box .form-control { border: 1px solid #cfd8d4; border-radius: 6px; margin: .3em 0 1em; width: 100%; box-sizing: border-box; }
.login-box .form-control:focus { outline: none; border-color: var(--bouvy-groen); box-shadow: 0 0 0 3px rgba(20, 70, 60, .15); }
.login-box .connect { margin-top: 1em; }
.login-box #connectbutton { width: 100%; padding: .7em; font-size: 1rem; }
.switch-radio input { accent-color: var(--bouvy-groen); }
#test-camera { color: #4d5d58; }
#test-camera summary { cursor: pointer; text-align: center; }

/* Gesprek */
.peer-active { border: 2px solid var(--bouvy-koper); }
.show-video { background: var(--bouvy-groen); }
.file-progress { accent-color: var(--bouvy-groen); }
#invite-dialog { border: solid 2px var(--bouvy-groen); }

/* Zolang de klant nog niet binnen is: alleen de inlogkaart, geen lege chat- en deelnemerskolom. */
body:has(#login-container:not(.invisible)) #left,
body:has(#login-container:not(.invisible)) #resizer,
body:has(#login-container:not(.invisible)) #left-sidebar { display: none; }
body:has(#login-container:not(.invisible)) #mainrow, body:has(#login-container:not(.invisible)) #right { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; }
body:has(#login-container:not(.invisible)) #sidebarCollapse,
body:has(#login-container:not(.invisible)) .nav-menu { display: none; }