/* Nexus UI — brug tussen legacy content-markup en WowDash-chrome.
   Werkt alleen binnen .dashboard-main-body; publieke .public-site-pagina's
   behouden hun eigen stijl. */

/* Sidebar-layout deterministisch vastzetten: de WowDash-breakpoints
   lieten .dashboard-main zonder margin terwijl de sidebar zichtbaar was.
   Fysieke margin-left i.p.v. margin-inline-start: de oude style.css heeft
   main{max-width/margin:auto}-regels die de logische variant overstemmen. */
.dashboard-main { max-width: none; }
/* Flex-items mogen onder hun min-content krimpen; anders trekt een brede
   tabel de hele kolom op 660px+ en ontstaat pagina-overflow op mobiel.
   Daarnaast: de kolom-flex van WowDash staat wrap toe — lange pagina's
   schuiven dan een tweede kolom náást de viewport (scrollWidth-explosie). */
.dashboard-main { flex-wrap: nowrap; }
.dashboard-main > .navbar-header,
.dashboard-main > .dashboard-main-body { min-width: 0; }
.sidebar { transition: left .25s ease; }
@media (min-width: 1200px) {
    .sidebar { left: 0; width: 275px; }
    .dashboard-main { margin-left: 275px; margin-right: 0; }
    .sidebar-mobile-toggle { display: none; }
    .sidebar-close-btn { display: none; }
}
@media (max-width: 1199.98px) {
    .sidebar { left: -105%; width: 275px; }
    .sidebar.sidebar-open { left: 0; }
    .sidebar-toggle { display: none; }
    .dashboard-main { margin-left: 0; margin-right: 0; }
}
/* Ingeklapte icon-only modus (.active via sidebar-toggle) */
@media (min-width: 1200px) {
    .sidebar.active { width: 5.375rem; }
    .dashboard-main.active { margin-left: 5.375rem; }
    .sidebar.active .sidebar-menu-group-title,
    .sidebar.active .sidebar-menu li a span { display: none; }
    .sidebar.active:hover { width: 275px; }
    .sidebar.active:hover .sidebar-menu-group-title,
    .sidebar.active:hover .sidebar-menu li a span { display: inline-block; }
}
/* Sticky navbar: vaste 4.5rem laat gewrapte inhoud over de eerste
   contentregels vallen (intercepts clicks). Laat hem meegroeien. */
.navbar-header { height: auto; min-height: 4.5rem; }

/* Mobiele overlay achter de open sidebar */
body.overlay-active::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 25;
}

/* Secties direct onder de inhoud worden kaarten */
.dashboard-main-body > section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
html.dark .dashboard-main-body > section {
    background: #1f2937;
    border-color: #374151;
    box-shadow: none;
}
.dashboard-main-body > section > h2:first-child,
.dashboard-main-body > section > h3:first-child { margin-top: 0; }
/* Resultaat-artikelen binnen een sectie als subkaart */
.dashboard-main-body > section > article:not(.nexus-card) {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: 1rem;
    margin: .75rem 0;
}
html.dark .dashboard-main-body > section > article:not(.nexus-card) {
    background: #111827;
    border-color: #374151;
}

/* Losse tabellen/lijsten direct onder de inhoud krijgen ook een kaartvlak */
.dashboard-main-body > .table-scroll,
.dashboard-main-body > table,
.dashboard-main-body > ul {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1rem;
    margin: 0 0 1.5rem;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
html.dark .dashboard-main-body > .table-scroll,
html.dark .dashboard-main-body > table,
html.dark .dashboard-main-body > ul {
    background: #1f2937;
    border-color: #374151;
    box-shadow: none;
}
.dashboard-main-body > ul { padding-left: 2.5rem; }
/* Brede tabellen scrollen binnen hun kaart i.p.v. de pagina te verbreden */
.dashboard-main-body > table { display: block; overflow-x: auto; }
.dashboard-main-body .table-scroll { overflow-x: auto; }

/* Neutraliseer de oude kaart-achtergronden op losse formulieren/artikelen */
.dashboard-main-body form:not(.nexus-card),
.dashboard-main-body article:not(.nexus-card),
.dashboard-main-body fieldset {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}
.dashboard-main-body fieldset {
    border: 1px solid var(--neutral-200, #e5e7eb);
    border-radius: .5rem;
    padding: 1rem;
}
html.dark .dashboard-main-body fieldset { border-color: #4b5563; }

/* Koppen binnen de app normaliseren (WowDash gebruikt utility-typografie) */
.dashboard-main-body h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
.dashboard-main-body h2 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
.dashboard-main-body h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.dashboard-main-body h4 { font-size: .95rem; font-weight: 600; margin: 1rem 0 .5rem; }
main.dashboard-main { max-width: none; padding: 0; }
.dashboard-main-body main { max-width: none; margin: 0; padding: 0; }

/* Oude nav/header van base verdwenen — veiligheid voor publieke pagina's */
.public-site main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem; }

/* Status-badges: semantische kleuren, zelfde classnamen als voorheen */
.status-badge {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    padding: .35rem .7rem;
    border-radius: 999px;
    white-space: nowrap;
}
.status-planned, .status-active, .status-active_run,
.status-passed, .status-tested, .status-completed, .status-included {
    background: #d1fae5; color: #047857;
}
.status-partial, .status-queued, .status-running, .status-pending,
.status-blocked_partial, .status-advice, .status-not_tested, .status-untested {
    background: #fef3c7; color: #b45309;
}
.status-blocked, .status-failed, .status-error, .status-denied,
.status-cancelled, .status-superseded {
    background: #fee2e2; color: #b91c1c;
}
.status-obsolete, .status-draft, .status-unknown {
    background: #e5e7eb; color: #4b5563;
}
html.dark .status-planned, html.dark .status-active,
html.dark .status-passed, html.dark .status-tested,
html.dark .status-completed, html.dark .status-included {
    background: rgba(5,150,105,.2); color: #6ee7b7;
}
html.dark .status-partial, html.dark .status-queued, html.dark .status-running,
html.dark .status-not_tested, html.dark .status-untested {
    background: rgba(217,119,6,.2); color: #fcd34d;
}
html.dark .status-blocked, html.dark .status-failed, html.dark .status-error,
html.dark .status-denied, html.dark .status-cancelled, html.dark .status-superseded {
    background: rgba(220,38,38,.2); color: #fca5a5;
}

/* Tabellen: de oude .report-table krijgt WowDash-tabellook */
.dashboard-main-body .report-table,
.dashboard-main-body table:not(.table) {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.dashboard-main-body .report-table th,
.dashboard-main-body .report-table td,
.dashboard-main-body table:not(.table) td,
.dashboard-main-body table:not(.table) th {
    padding: .55rem .8rem;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}
html.dark .dashboard-main-body .report-table th,
html.dark .dashboard-main-body .report-table td,
html.dark .dashboard-main-body table:not(.table) td,
html.dark .dashboard-main-body table:not(.table) th {
    border-color: #4b5563;
}
.dashboard-main-body .report-table thead th,
.dashboard-main-body table:not(.table) thead th {
    background: #f8fafc;
    font-weight: 600;
}
html.dark .dashboard-main-body .report-table thead th,
html.dark .dashboard-main-body table:not(.table) thead th {
    background: rgba(255,255,255,.04);
}

/* Definition lists als tweekoloms */
.dashboard-main-body dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1.25rem;
    margin: 0;
}
.dashboard-main-body dt { font-weight: 600; color: #4b5563; }
html.dark .dashboard-main-body dt { color: #d1d5db; }

/* Contrast-fixes voor axe (AA): primary-600 is te licht voor witte tekst */
.btn.btn-primary-600 { background-color: #2563eb; }
.btn.btn-primary-600:hover { background-color: #1d4ed8; }
.sidebar-menu li > a.active-page,
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a { background-color: #2563eb; }
.sidebar-menu li > a.active-page:hover,
.sidebar-menu li.dropdown.open > a:hover { background-color: #1d4ed8; }
.dashboard-main-body dd { margin: 0; overflow-wrap: anywhere; }

/* code/digest leesbaar */
.dashboard-main-body code { font-size: .82rem; overflow-wrap: anywhere; }

/* details/summary */
.dashboard-main-body details > summary { cursor: pointer; font-weight: 600; }
.dashboard-main-body details[open] > summary { margin-bottom: .75rem; }

/* Links */
.dashboard-main-body a { color: #2563eb; }
html.dark .dashboard-main-body a { color: #93c5fd; }
.dashboard-main-body a:hover { text-decoration: underline; }
/* Links die als primaire knop renderen, behouden witte tekst */
.dashboard-main-body a.btn.btn-primary-600 { color: #fff; }

/* Primaire actieknop-compatibiliteit */
.dashboard-main-body .primary-action {
    background: #4338ca;
    color: #fff !important;
    border-radius: .5rem;
    font-weight: 600;
    padding: .55rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none !important;
}
.dashboard-main-body .primary-action:hover {
    background: #3730a3;
    text-decoration: none !important;
}

/* Formulierknoppen in dashboard-context */
.dashboard-main-body form button,
.dashboard-main-body form input[type="submit"] {
    background: #4338ca;
    color: #fff;
    border: 0;
    border-radius: .5rem;
    font-weight: 600;
    padding: .55rem 1.1rem;
    cursor: pointer;
}
.dashboard-main-body form button:hover { background: #3730a3; }
.dashboard-main-body form button.danger {
    background: transparent;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}
.dashboard-main-body form button.danger:hover { background: #fef2f2; }
html.dark .dashboard-main-body form button.danger {
    color: #f87171;
    border-color: #7f1d1d;
}
html.dark .dashboard-main-body form button.danger:hover { background: #450a0a; }
/* Inputs iets consistenter met de kaartlook */
.dashboard-main-body input:not([type="checkbox"]):not([type="radio"]),
.dashboard-main-body textarea,
.dashboard-main-body select {
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    padding: .55rem .8rem;
    background: #fff;
    color: inherit;
}
html.dark .dashboard-main-body input:not([type="checkbox"]):not([type="radio"]),
html.dark .dashboard-main-body textarea,
html.dark .dashboard-main-body select {
    background: #111827;
    border-color: #4b5563;
    color: #f3f4f6;
}
.dashboard-main-body input:focus,
.dashboard-main-body textarea:focus,
.dashboard-main-body select:focus {
    outline: 2px solid #a5b4fc;
    outline-offset: 1px;
}

/* Herbruikbare kaart — zelfde look als WowDash-cards */
.nexus-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: none;
}
html.dark .nexus-card {
    background: rgba(255,255,255,.045);
    border-color: #4b5563;
}

/* Page-header rij */
.nexus-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.nexus-page-header h4 { margin: 0; font-size: 1.4rem; font-weight: 700; }
.nexus-backlink { font-size: .875rem; margin-bottom: .75rem; display: block; }

/* aside note-blokken */
.dashboard-main-body aside[role="note"] {
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
    padding: .75rem 1rem;
    border-radius: .375rem;
    margin: 1rem 0;
}
html.dark .dashboard-main-body aside[role="note"] {
    background: rgba(245,158,11,.12);
}

/* Oog-knop in wachtwoordvelden (geïnjecteerd door nexus-ui.js) */
.pw-eye {
    position: absolute;
    inset-inline-end: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
}
.pw-eye:hover, .pw-eye:focus { color: #4f46e5; }
input[type="password"] { padding-inline-end: 2.75rem; }