/* --- GLOBAL STYLING --- */
:root {
    /* --hr-rood is de PRIMAIRE KLEUR in jouw systeem */
    --hr-rood: #d3104c;
    
    --hr-blauw: #00b0eb;
    --hr-groen: #3ab7b0;
    --hr-donkerrood: #b41e4b;
    --hr-paars: #6f42c1;
    
    --hr-donkerrood-darker: #b80e43;
    --hr-blauw-zwart: #003340;
    
    --menu-bg: #d3104c;
    --menu-text: #ffffff;
    --menu-hover: #f0f0f0;
    
    /* Frontend Specifiek */
    --popover-bg: #f7efe3;
    --popover-border: #d3104c;
}

body {
    background-color: #f7efe3;
    color: var(--hr-blauw-zwart);
    font-family: sans-serif;    font-size: 1.125rem;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { color: var(--hr-blauw-zwart); }

/* Zorg dat koppen in een wit-tekst container ook echt wit zijn */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 { 
    color: #ffffff !important; 
}
a { color: var(--hr-blauw-zwart); text-decoration: none; font-weight: 500; }
a:hover, a:focus { text-decoration: underline; }

/* HEADER */
.main-header { background-color: var(--menu-bg); padding: 10px 0; position: relative; z-index: 100; }
.main-header .container { display: flex; justify-content: space-between; align-items: center; }
.logo-link { padding: 5px; }
.svg-brand-logo_beeldmerk { height: 40px; width: auto; display: block; }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-nav ul li { margin-left: 20px; }
.main-nav ul li a { color: var(--menu-text); font-weight: 500; padding: 10px 5px; display: block; text-decoration: none; }
.main-nav ul li a:hover, .main-nav ul li a:focus { color: var(--menu-hover); }

/* MOBILE MENU */
.menu-toggle { display: none; cursor: pointer; width: 30px; height: 30px; position: relative; }
.hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; background-color: #fff; height: 3px; width: 100%; border-radius: 3px; position: absolute; transition: all 0.3s; }
.hamburger { top: 13px; } .hamburger::before { top: -10px; } .hamburger::after { top: 10px; }
.menu-toggle.active .hamburger { background: transparent; }
.menu-toggle.active .hamburger::before { transform: rotate(45deg); top: 0; }
.menu-toggle.active .hamburger::after { transform: rotate(-45deg); top: 0; }

@media (max-width: 991.98px) {
    .main-nav ul li a { color: var(--hr-blauw-zwart); } 
    .menu-toggle { display: block; }
    .main-nav { display: none; position: absolute; top: 60px; left: 0; width: 100%; background-color: #f7efe3; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
    .main-nav.active { display: block; }
    .main-nav ul { flex-direction: column; padding: 10px 0; }
    .main-nav ul li { margin: 0; width: 100%; }
    .main-nav ul li a { padding: 15px 20px; border-bottom: 1px solid #ddd; }
}

.card, .modal-content, .list-group-item { color: var(--hr-blauw-zwart); }

/* --- KNOPPEN (BOOTSTRAP OVERRIDES) --- */
.btn-primary { background-color: var(--hr-donkerrood); border-color: var(--hr-donkerrood); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--hr-donkerrood-darker); border-color: var(--hr-donkerrood-darker); }
.btn-outline-primary { color: var(--hr-donkerrood); border-color: var(--hr-donkerrood); }
.btn-outline-primary:hover { background-color: var(--hr-donkerrood); color: #fff; }

.btn-success { background-color: var(--hr-groen); border-color: var(--hr-groen); color: var(--hr-blauw-zwart); }
.btn-success:hover { filter: brightness(0.9); color: var(--hr-blauw-zwart); }

.btn-info { background-color: var(--hr-blauw); border-color: var(--hr-blauw); color: var(--hr-blauw-zwart); }
.btn-info:hover { filter: brightness(0.9); color: var(--hr-blauw-zwart); }

.btn-danger { background-color: #b41e4b; border-color: #b41e4b; }
.btn-danger:hover { filter: brightness(0.9); }

.btn-zip { background-color: var(--hr-paars); border-color: var(--hr-paars); color: #ffffff; }
.btn-zip:hover, .btn-zip:focus, .btn-zip.active { background-color: #59359a; border-color: #59359a; color: #ffffff; }
.btn-outline-zip { color: var(--hr-paars); border-color: var(--hr-paars); }
.btn-outline-zip:hover { background-color: var(--hr-paars); color: #ffffff; }

.form-check-input:checked { background-color: var(--hr-groen); border-color: var(--hr-groen); }
.badge.bg-primary { background-color: var(--hr-rood) !important; }
.text-primary { color: var(--hr-rood) !important; }

/* --- FRONTEND STYLING --- */
.btn-rood {
    background-color: #d3104c;
    border-color: #d3104c;
    color: #ffffff;
}
.btn-rood:hover, .btn-rood:focus {
    background-color: #b80e43;
    border-color: #b80e43;
    color: #ffffff;
}

#promptText { background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem; border-radius: 0.375rem; white-space: pre-wrap; }

.popover-trigger { text-decoration: underline; text-decoration-style: dotted; cursor: help; }
.popover {
    --bs-popover-bg: var(--popover-bg);
    --bs-popover-border-color: var(--popover-border);
    --bs-popover-header-bg: var(--popover-border);
    --bs-popover-header-color: #fff;
    --bs-popover-body-color: var(--hr-blauw-zwart);
    max-width: 400px;
}

/* View Page & Modal */
/* Zorg dat de achtergrond van de viewer zelf wit (of neutraal) is */
body.view-page { 
    background-color: white !important; /* Forceer wit om doorzichtigheid te voorkomen */
    margin: 0; 
    padding: 0; 
    height: 100vh; 
    overflow: hidden; 
}
.frame-wrap { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; 
    z-index: 1; 
    background: white; 
}
.project-frame { width: 100%; height: 100%; border: 0; }

.info-button { 
    position: fixed; top: 10px; left: 10px; z-index: 10001; 
    background: #0d6efd; 
    color: white; padding: 8px 12px; border-radius: 8px; 
    font-weight: bold; border: none; cursor: pointer; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); 
}

/* SLUIT KRUISJE RECHTSBOVEN */
.close-site-button {
    position: fixed; top: 10px; right: 20px;
    font-size: 45px; font-weight: bold;
    color: var(--hr-rood); 
    text-decoration: none; line-height: 0.8;
    z-index: 10005; cursor: pointer;
    text-shadow: 0px 0px 5px rgba(255,255,255,0.8); 
    transition: transform 0.2s;
}
.close-site-button:hover { transform: scale(1.1); color: #000; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10002; }
.modal-content { position: relative; background: white; padding: 20px; border-radius: 8px; }
#infoModal .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 320px; }
#infoModal .modal-content input { width: 100%; padding: 8px; margin-bottom: 10px; }
#infoModal .modal-content button { padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; margin-right: 5px; }
.modal-submit { background: #0d6efd; color: white; }
.modal-close { background: #6c757d; color: white; }

/* --- Add to Homescreen Banner (iOS) --- */
#addToHomeScreen {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: #333;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 20000;
    width: 90%;
    max-width: 400px;
    font-size: 0.9rem;
    text-align: center; /* Tekst gecentreerd */
    border: 1px solid #ddd;
}
#addToHomeScreen::after {
    /* Pijltje omlaag */
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: white transparent transparent transparent;
}
.share-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='%23007AFF'%3E%3Cpath d='M30.3 13.7L25 8.4l-5.3 5.3-1.4-1.4L25 5.6l6.7 6.7z'/%3E%3Cpath d='M24 7h2v21h-2z'/%3E%3Cpath d='M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    vertical-align: middle;
    margin: 0 2px;
}
.close-banner {
    position: absolute;
    top: 5px;
    right: 10px; /* Mooi in de hoek */
    font-size: 24px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 1;
    z-index: 20001;
    padding: 5px; /* Makkelijker aan te tikken */
}

/* --- TAGS INPUT (Chips) --- */
.tag-container {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px;
    border: 1px solid #dee2e6; border-radius: 0.375rem; background-color: #fff;
    min-height: 48px; cursor: text;
}
.tag-container:focus-within {
    border-color: var(--hr-rood); 
    box-shadow: 0 0 0 0.25rem rgba(211, 16, 76, 0.25); 
}
.tag-chip {
    background-color: var(--hr-rood) !important; /* Forceer primaire kleur */
    color: white !important; 
    padding: 4px 10px; border-radius: 20px; font-size: 0.9rem;
    display: inline-flex; align-items: center; font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-right: 4px; margin-bottom: 4px;
}
.tag-chip i { margin-left: 8px; cursor: pointer; font-size: 0.8em; opacity: 0.8; }
.tag-chip i:hover { opacity: 1; }
.tag-input {
    border: none; outline: none; padding: 5px; flex-grow: 1;
    min-width: 150px; font-size: 1rem; color: #333; background: transparent;
}