/* ==========================================================
   TYPOGRAFIE (Rijkshuisstijl RO Sans)
   ========================================================== */
@font-face {
    font-family: 'RO Sans';
    src: url('fonts/ROSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RO Sans';
    src: url('fonts/ROSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RO Sans';
    src: url('fonts/ROSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================
   KLEUREN & VARIABELEN (LIGHT MODE)
   ========================================================== */
:root {
    --nl-blue: #01689B;
    --nl-light-blue: #E1F2F9;
    --nl-dark-blue: #00456A;
    --nl-focus: #FFC000;
    --nl-text: #333333;
    --nl-bg: #F4F4F4;
    --nl-white: #FFFFFF;
    --nl-border: #767676; 
    --nl-border-light: #CCCCCC;
    --nl-error-bg: #FDF2F2;
    --nl-error-border: #D52B1E;
    --nl-font: "RO Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    
    --message-warning-bg: #FFF3CD;
    --message-warning-border: #FFA000;
    --message-warning-text: #5A4000;
    
    --message-success-bg: #D4EDDA;
    --message-success-border: #28A745;
    --message-success-text: #155724;
    
    --message-info-bg: #E1F2F9;
    --message-info-border: #01689B;
    --message-info-text: #00456A;
    
    --finding-box-bg: #FAFAFA;
    --header-info-bg: rgba(0, 0, 0, 0.05);
}

/* ==========================================================
   KLEUREN & VARIABELEN (DARK MODE)
   ========================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --nl-bg: #121212;
        --nl-white: #1E1E1E;
        --nl-text: #E0E0E0;
        --nl-border: #888888;
        --nl-border-light: #444444;
        --nl-light-blue: #00334D;
        --nl-error-bg: #3B1818;
        --nl-error-border: #FF6B6B;
        
        --message-warning-bg: #332B00;
        --message-warning-border: #FFAA00;
        --message-warning-text: #FFCC00;
        
        --message-success-bg: #0D2B14;
        --message-success-border: #28A745;
        --message-success-text: #85E097;
        
        --message-info-bg: #00334D;
        --message-info-border: #01689B;
        --message-info-text: #66B3FF;
        
        --finding-box-bg: #2A2A2A;
        --header-info-bg: rgba(255, 255, 255, 0.1);
    }
}

/* ==========================================================
   BASIS OPMAAK & LAYOUT
   ========================================================== */
body { 
    font-family: var(--nl-font); 
    font-size: 1rem; 
    color: var(--nl-text); 
    background-color: var(--nl-bg); 
    margin: 0; 
    padding: 0; 
    line-height: 1.5; 
}

.container { max-width: 900px; margin: 0 auto; padding: 20px; }
.hidden { display: none !important; }

.nl-header { background-color: var(--nl-blue); color: #FFF; padding: 15px 0; margin-bottom: 20px; }
.nl-header h1 { margin: 0; font-size: 1.5rem; padding: 0 20px; }

.nl-card { 
    background: var(--nl-white); 
    padding: 30px; 
    border-radius: 2px; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); 
    margin-bottom: 20px; 
    border: 1px solid var(--nl-border-light); 
}

/* ==========================================================
   FORMULIEREN & INPUTS
   ========================================================== */
fieldset { border: 1px solid var(--nl-border-light); border-radius: 2px; padding: 20px; margin-bottom: 25px; }
legend { font-size: 1.125rem; font-weight: bold; color: var(--nl-blue); padding: 0 10px; background: var(--nl-white); }

.nl-form-group { margin-bottom: 15px; }
label { display: block; font-weight: bold; margin-bottom: 5px; }
.nl-help-text { display: block; font-size: 0.875rem; color: #888; margin-top: 4px; line-height: 1.4; }

input[type="text"], input[type="password"], input[type="email"], textarea, select {
    width: 100%; padding: 12px; border: 2px solid var(--nl-border); background: var(--nl-white); color: var(--nl-text);
    border-radius: 2px; box-sizing: border-box; font-family: var(--nl-font); font-size: 1rem;
}

::placeholder { color: #666666; opacity: 1; }

/* Focus States (WCAG AA) */
input:focus, textarea:focus, select:focus, summary:focus-visible { 
    outline: 3px solid var(--nl-focus); 
    outline-offset: 2px; 
    border-color: var(--nl-dark-blue);
}

.nl-checkbox { font-weight: normal; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.nl-checkbox input[type="checkbox"]:focus { outline: 3px solid var(--nl-focus); outline-offset: 2px; }

.input-with-button { display: flex; gap: 10px; align-items: stretch; flex-wrap: nowrap; }
.input-with-button input { flex: 1; min-width: 0; }
.input-with-button button { display: flex; align-items: center; justify-content: center; padding: 0 20px; margin: 0; flex-shrink: 0; font-size: 1.2rem; }

/* ==========================================================
   BUTTONS
   ========================================================== */
.nl-button { padding: 12px 24px; font-size: 1rem; font-weight: bold; border: none; border-radius: 2px; cursor: pointer; text-align: center; transition: background 0.2s; }
.nl-button:focus-visible { outline: 3px solid var(--nl-focus); outline-offset: 2px; }
.nl-button--primary { background-color: var(--nl-blue); color: #FFF; border: 2px solid var(--nl-blue); }
.nl-button--primary:hover { background-color: var(--nl-dark-blue); border-color: var(--nl-dark-blue); }
.nl-button--secondary { background-color: var(--nl-light-blue); color: var(--nl-blue); border: 2px solid var(--nl-light-blue); }
.nl-button--secondary:hover { opacity: 0.8; }
.nl-button--outline { background-color: transparent; border: 2px solid var(--nl-blue); color: var(--nl-text); }
.nl-button--outline:hover { background-color: var(--nl-light-blue); }

/* ==========================================================
   STATUS DASHBOARD & STEPPERS
   ========================================================== */
.status-card {
    flex: 1; 
    min-width: 250px; 
    background: var(--nl-white); 
    border: 2px solid var(--nl-light-blue); 
    padding: 20px; 
    border-radius: 4px;
    transition: all 0.3s ease;
}

.stepper { list-style: none; padding: 0; margin: 0; line-height: 2.2; }
.stepper li { color: #888; transition: color 0.3s ease; }

/* ==========================================================
   MELDINGEN & RAPPORTAGE PREVIEW
   ========================================================== */
.nl-alert { background-color: var(--nl-error-bg); border-left: 4px solid var(--nl-error-border); padding: 15px; margin-bottom: 20px; color: var(--nl-error-border); font-weight: bold; border-radius: 2px; }
.nl-message { padding: 15px; margin-bottom: 20px; border-radius: 2px; line-height: 1.5; }
.nl-message--warning { background-color: var(--message-warning-bg); border-left: 4px solid var(--message-warning-border); color: var(--message-warning-text); }
.nl-message--success { background-color: var(--message-success-bg); border-left: 4px solid var(--message-success-border); color: var(--message-success-text); }
.nl-message--info { background-color: var(--message-info-bg); border-left: 4px solid var(--message-info-border); color: var(--message-info-text); }

.sticky-actions {
    position: sticky; top: 0; background: var(--nl-white); padding: 15px 0; z-index: 100;
    border-bottom: 1px solid var(--nl-border-light); display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
}

.nl-preview { padding-top: 5px; }
.nl-report-content { background: var(--nl-white); padding: 30px; border: 1px solid var(--nl-border-light); border-radius: 2px; }
.nl-report-content h2, .nl-report-content h3, .nl-report-content h4 { color: var(--nl-blue); margin-top: 0; }
.finding-box { border-left: 4px solid var(--nl-error-border); margin-bottom: 15px; background: var(--finding-box-bg); padding: 15px 15px 15px 20px; }

summary { cursor: pointer; opacity: 0.9; font-weight: bold; color: inherit; }
summary:hover { opacity: 1; }
hr { border: 0; border-top: 1px solid var(--nl-border-light); margin: 20px 0; }

.nl-status-text { font-weight: bold; color: var(--nl-blue); margin-bottom: 5px; }
.nl-countdown { color: #888; font-size: 0.875rem; font-style: italic; margin-top: 0; }

/* ==========================================================
   ANIMATIES VOOR LAADSCHERM
   ========================================================== */
.spin-icon {
    display: inline-block;
    animation: spin-slow 2s linear infinite;
    margin-right: 8px;
}
@keyframes spin-slow {
    100% { transform: rotate(360deg); }
}

.pulse-text {
    animation: pulse-opacity 1.5s ease-in-out infinite;
}
@keyframes pulse-opacity {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Gloed effect voor het actieve kaartje */
.active-card {
    border-color: var(--nl-blue) !important;
    box-shadow: 0 4px 12px rgba(1, 104, 155, 0.15);
}

/* ==========================================================
   PLACEHOLDERS VOOR CONTENTEDITABLE (PREVIEW)
   ========================================================== */
[contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: var(--nl-text);
    opacity: 0.6; /* Dit maakt de tekst subtieler, maar áltijd leesbaar in beide thema's */
    font-style: italic;
    cursor: text;
    pointer-events: none;
}

/* Fix voor Chrome Autofill in (Dark) Mode */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    /* Gebruik een flinke interne schaduw om de Chrome-kleur weg te drukken */
    -webkit-box-shadow: 0 0 0 30px var(--nl-white) inset !important;
    -webkit-text-fill-color: var(--nl-text) !important;
    transition: background-color 5000s ease-in-out 0s;
}