/*
 * House style: NLtraining (www.nltraining.nl) brand colours and fonts, in the layout of the current DVS
 * (see docs/sources/current-dvs-screenshots): dark sidebar with orange icons, white top bar with
 * breadcrumb, light grey canvas, purple headings, pill-shaped buttons, tables as spaced white rows.
 * Brand values were taken from www.nltraining.nl (2026-10-13); fonts are defined in fonts.css.
 */
:root {
    /* NLtraining brand palette */
    --nl-purple: #501e70;
    --nl-purple-rgb: 80, 30, 112;
    --nl-orange: #f27c00;
    --nl-orange-rgb: 242, 124, 0;
    --nl-yellow: #fca01f;
    --nl-pink: #d90063;
    --nl-red: #ae0018;
    --nl-font-heading: 'Filson Pro', 'IBM Plex Sans', system-ui, sans-serif;
    --nl-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --dvs-purple: var(--nl-purple);
    --dvs-purple-rgb: var(--nl-purple-rgb);
    --dvs-orange: var(--nl-orange);
    --dvs-orange-dark: #d16a00;
    --dvs-orange-rgb: var(--nl-orange-rgb);
    --dvs-sidebar: #2f2f2f;
    --dvs-sidebar-hover: #3b3b3b;
    --dvs-sidebar-close: #1f1f1f;
    --dvs-canvas: #ebebeb;
    --dvs-line: #dcdcdc;
    --dvs-sidebar-width: 220px;
    --dvs-header-height: 56px;

    --bs-primary: var(--dvs-orange);
    --bs-primary-rgb: var(--dvs-orange-rgb);
    --bs-danger: var(--nl-red);
    --bs-danger-rgb: 174, 0, 24;
    --bs-link-color: var(--dvs-purple);
    --bs-link-color-rgb: var(--dvs-purple-rgb);
    --bs-link-hover-color: var(--dvs-orange-dark);
    --bs-body-font-family: var(--nl-font-body);
    --bs-body-font-size: .9rem;
    --bs-border-radius: .25rem;
    --bs-focus-ring-color: rgba(var(--dvs-orange-rgb), .25);
}

body.app,
body.login-page {
    font-family: var(--nl-font-body);
}

body.app {
    background: var(--dvs-canvas);
    color: #1d1d1d;
}

/* Filson Pro (headings, navigation, labels, buttons), as on nltraining.nl and in the current DVS. */
h1, h2, h3, h4, h5, .h1, .page-title, .section-title, .btn, .nav-link, .breadcrumb,
.sidebar-nav, .sidebar-brand, .tile-title, .tile-org, .backlog-label, .backlog-count,
.table-dvs > thead th, .dvs-label, .badge, .login-card .brand, .dropdown-item, legend {
    font-family: var(--nl-font-heading);
}

h1, .h1, .page-title {
    color: var(--dvs-purple);
    font-weight: 500;
    letter-spacing: -.01em;
}

.page-title {
    font-size: 2.1rem;
    margin-bottom: 1.25rem;
}

h2.section-title {
    color: var(--dvs-purple);
    font-size: 1.2rem;
    font-weight: 500;
    margin: 1.5rem 0 .75rem;
}

/* Pill-shaped buttons as on nltraining.nl. */
.btn {
    --bs-btn-border-radius: 900px;
    --bs-btn-padding-x: 1.1rem;
}

.btn-sm {
    --bs-btn-border-radius: 900px;
    --bs-btn-padding-x: .75rem;
}

.btn-secondary-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--nl-purple);
    --bs-btn-border-color: var(--nl-purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3d1556;
    --bs-btn-hover-border-color: #3d1556;
}

/* ---------- Buttons & forms ---------- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dvs-orange);
    --bs-btn-border-color: var(--dvs-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dvs-orange-dark);
    --bs-btn-hover-border-color: var(--dvs-orange-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dvs-orange-dark);
    --bs-btn-active-border-color: var(--dvs-orange-dark);
    --bs-btn-disabled-bg: var(--dvs-orange);
    --bs-btn-disabled-border-color: var(--dvs-orange);
    font-weight: 600;
}

.form-control, .form-select {
    border-color: #fff;
    border-radius: 0;
}

.form-control:focus, .form-select:focus {
    border-color: var(--dvs-orange);
    box-shadow: 0 0 0 .2rem rgba(var(--dvs-orange-rgb), .2);
}

.form-label, .col-form-label {
    font-size: .85rem;
}

/* ---------- Shell ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-content {
    padding: 1.75rem 2rem 3rem;
}

@media (max-width: 575.98px) {
    .app-content {
        padding: 1.25rem 1rem 2rem;
    }
}

/* Top bar */
.app-header {
    height: var(--dvs-header-height);
    background: #fff;
    display: flex;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-header .breadcrumb-bar {
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    flex: 1 1 auto;
    min-width: 0;
    font-size: .85rem;
    font-weight: 600;
}

.app-header .breadcrumb {
    margin: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

.app-header .breadcrumb a {
    color: var(--dvs-purple);
    text-decoration: none;
}

.app-header .breadcrumb-item.active {
    color: var(--dvs-purple);
    font-weight: 500;
}

.app-header .header-search {
    display: flex;
    align-items: center;
    padding: 0 .75rem;
}

.app-header .header-search .input-group {
    background: var(--dvs-canvas);
    width: 220px;
}

.app-header .header-search .form-control,
.app-header .header-search .btn {
    background: transparent;
    border: 0;
    font-size: .85rem;
}

.app-header .header-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 0 .75rem;
    border-left: 1px solid var(--dvs-canvas);
    color: #1d1d1d;
    background: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    font-size: 1.35rem;
    position: relative;
    text-decoration: none;
}

.app-header .header-action:hover {
    background: #f6f6f6;
}

.app-header .header-action .badge-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    border-radius: 1rem;
    background: var(--dvs-orange);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

.app-header .dropdown-menu {
    border-radius: 0;
    border: 0;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
    font-size: .85rem;
    max-height: 70vh;
    overflow-y: auto;
}

.app-header .dropdown-item.active,
.app-header .dropdown-item:active {
    background: var(--dvs-purple);
}

/* Sidebar (offcanvas below lg) */
.app-sidebar {
    --bs-offcanvas-width: var(--dvs-sidebar-width);
    --bs-offcanvas-bg: var(--dvs-sidebar);
    background: var(--dvs-sidebar);
    color: #fff;
}

@media (min-width: 992px) {
    .app-sidebar {
        /* Bootstrap makes .offcanvas-lg transparent from lg up. */
        background: var(--dvs-sidebar) !important;
        width: var(--dvs-sidebar-width);
        flex: 0 0 var(--dvs-sidebar-width);
        min-height: 100vh;
    }

    .app-sidebar .offcanvas-body {
        position: sticky;
        top: 0;
    }
}

.app-sidebar .sidebar-top {
    height: var(--dvs-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    background: var(--dvs-sidebar-close);
}

.app-sidebar .sidebar-brand {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.05rem;
}

.app-sidebar .sidebar-brand span {
    color: var(--dvs-orange);
}

.app-sidebar .sidebar-close {
    width: var(--dvs-header-height);
    height: var(--dvs-header-height);
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.6rem;
}

.app-sidebar .offcanvas-body {
    padding: .75rem 0 2rem;
    display: block;
}

.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav > li > a,
.sidebar-nav > li > span {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
}

.sidebar-nav > li > a:hover {
    background: var(--dvs-sidebar-hover);
}

.sidebar-nav .bi {
    color: var(--dvs-orange);
    font-size: 1.25rem;
    width: 1.4rem;
    text-align: center;
}

.sidebar-nav .sub {
    list-style: none;
    padding: 0 0 .4rem 3.1rem;
    margin: 0;
}

.sidebar-nav .sub a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
    padding: .15rem 0;
}

.sidebar-nav .sub a:hover,
.sidebar-nav .sub a.active {
    color: var(--dvs-orange);
}

.sidebar-nav > li.active > a {
    background: var(--dvs-sidebar-hover);
}

/* Items that exist in the current DVS but are not built in the POC yet. */
.sidebar-nav > li.not-built > span {
    color: #8a8a8a;
    cursor: not-allowed;
}

.sidebar-nav > li.not-built .bi {
    color: #8a6a45;
}

/* ---------- Home tiles ---------- */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 122px;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--dvs-line);
    border-radius: .3rem;
    color: #1d1d1d;
    text-decoration: none;
    text-align: center;
    transition: box-shadow .15s, transform .15s;
}

.tile:hover {
    color: #1d1d1d;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.tile-logo {
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    font-weight: 700;
    font-size: 1.05rem;
}

/* Placeholder for the client's/municipality's logo: a monogram in a coloured square. */
.tile-monogram {
    width: 34px;
    height: 34px;
    border-radius: .3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
}

.tile-org {
    color: #555;
    font-weight: 600;
    font-size: .8rem;
    max-width: 150px;
    line-height: 1.15;
    text-align: left;
}

.tile-title {
    font-weight: 700;
    font-size: .9rem;
}

.tile-sub {
    font-size: .75rem;
    color: #6c6c6c;
    margin-top: -.5rem;
}

.tile.tile-system .tile-logo {
    color: var(--dvs-purple);
}

.tile.tile-system .tile-logo .bi {
    color: var(--dvs-orange);
    font-size: 1.6rem;
}

.tile.tile-closed {
    opacity: .7;
}

/* ---------- Tables: spaced white rows on the grey canvas ---------- */
.table-dvs {
    --bs-table-bg: transparent;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-size: .82rem;
}

.table-dvs > thead th {
    border: 0;
    font-weight: 700;
    white-space: nowrap;
    padding-bottom: .25rem;
}

.table-dvs > tbody > tr > td {
    background: #fff;
    border: 0;
    vertical-align: middle;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.table-dvs > tbody > tr:hover > td {
    background: #fafafa;
}

.table-dvs .row-actions {
    white-space: nowrap;
    text-align: right;
}

.table-dvs .row-actions a {
    color: #1d1d1d;
    font-size: 1rem;
    margin-left: .5rem;
}

.table-dvs .row-actions a:hover {
    color: var(--dvs-orange);
}

/* ---------- Tabs (dossier) ---------- */
.nav-dvs-tabs {
    border-bottom: 1px solid #c9c9c9;
    gap: .25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.nav-dvs-tabs .nav-link {
    color: #8c8c8c;
    font-weight: 600;
    font-size: .85rem;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: .6rem .9rem;
    white-space: nowrap;
}

.nav-dvs-tabs .nav-link.active {
    color: #1d1d1d;
    border-bottom-color: var(--dvs-purple);
    background: transparent;
}

/* ---------- Login (nltraining.nl look: purple and yellow blocks, pill fields and button) ---------- */
.login-page {
    background: #fff;
}

.login-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.login-intro {
    background: var(--nl-purple);
    color: #fff;
    padding: 3rem clamp(1.5rem, 6vw, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-intro h1 {
    color: #fff;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 500;
    margin: 2rem 0 1rem;
}

.login-intro p {
    font-size: 1.05rem;
    max-width: 30rem;
    opacity: .9;
}

.login-form-block {
    background: var(--nl-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .08);
}

.login-card .brand {
    color: var(--dvs-purple);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -.02em;
}

.login-card .brand span {
    color: var(--dvs-orange);
}

.login-card .form-control {
    border: 1px solid #1d1d1d;
    border-radius: 36px;
    padding: .5rem 1rem;
}

.login-card .form-label {
    font-family: var(--nl-font-heading);
    font-weight: 500;
}

.nl-wordmark {
    font-family: var(--nl-font-heading);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -.03em;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Abstract brand mark in NLtraining colours (stand-in for the official logo). */
.nl-wordmark-mark {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .5rem .5rem .5rem 0;
    background: conic-gradient(var(--nl-pink) 0 25%, var(--nl-yellow) 0 50%, var(--nl-orange) 0 75%, #fff 0);
}

@media (max-width: 767.98px) {
    .login-wrap {
        grid-template-columns: 1fr;
    }

    .login-intro {
        padding: 2rem 1.5rem;
    }

    .login-intro h1 {
        margin-top: 1rem;
    }
}

.filter-bar .form-control,
.filter-bar .form-select {
    min-width: 180px;
}

/* ---------- Dossier ---------- */
.dossier-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dossier-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    font-size: .85rem;
}

.dossier-meta a {
    color: var(--dvs-purple);
}

.hours-card {
    background: #fff;
    padding: .6rem .9rem;
    min-width: 220px;
    font-size: .85rem;
}

.hours-card .progress {
    height: 6px;
    margin-top: .35rem;
    --bs-progress-bar-bg: var(--dvs-orange);
}

/* Two columns of label/field pairs, as on the DVS dossier tabs. */
.dvs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 28px;
}

.dvs-grid > .full {
    grid-column: 1 / -1;
}

@media (max-width: 991.98px) {
    .dvs-grid {
        grid-template-columns: 1fr;
    }
}

.dvs-field {
    display: grid;
    grid-template-columns: minmax(130px, 34%) 1fr;
    align-items: center;
    gap: 0 .75rem;
}

.dvs-grid > .full.dvs-field {
    grid-template-columns: minmax(130px, calc(17% - 7px)) 1fr;
}

@media (max-width: 575.98px) {
    .dvs-field,
    .dvs-grid > .full.dvs-field {
        grid-template-columns: 1fr;
    }
}

.dvs-field .dvs-label {
    font-size: .8rem;
    margin: 0;
    padding: .35rem 0;
}

.dvs-field .dvs-label.required::after {
    content: " *";
    color: var(--dvs-orange-dark);
}

.dvs-field .form-control,
.dvs-field .form-select {
    font-size: .85rem;
    min-height: 34px;
}

.dvs-field .form-control:disabled,
.dvs-field .form-select:disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
}

.dvs-field .form-text {
    font-size: .72rem;
    margin-top: .1rem;
}

.dvs-field .form-check {
    margin-bottom: .1rem;
}

.dvs-subcard {
    background: rgba(255, 255, 255, .55);
    border-left: 3px solid var(--dvs-purple);
    padding: .75rem 1rem;
    margin-bottom: .75rem;
}

.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0 1rem;
    background: #fff;
    padding: .5rem .75rem;
}

.daypart-grid {
    background: #fff;
    font-size: .8rem;
    border-collapse: separate;
    border-spacing: 0;
}

.daypart-grid th,
.daypart-grid td {
    padding: .35rem .9rem;
    text-align: center;
}

.daypart-grid tbody th {
    text-align: left;
}

.daypart-grid .form-check {
    margin: 0;
    min-height: 0;
    padding-left: 0;
}

.daypart-grid .form-check-input {
    float: none;
    margin: 0;
}

.dvs-add {
    margin: .25rem 0 1rem;
}

.dvs-add > summary {
    color: var(--dvs-purple);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    margin-bottom: .5rem;
}

.table-dvs > tbody > tr.row-attention > td {
    background: #fff7ec;
}

.table-dvs .form-control {
    font-size: .82rem;
    min-width: 120px;
}

.bsn-value {
    background: #fff;
    padding: .35rem .6rem;
    color: #1d1d1d;
    font-size: .9rem;
}

/* ---------- Groups ---------- */
.schedule-table .form-select,
.schedule-table .form-control,
.lessons-table .form-select,
.lessons-table .form-control {
    min-width: 110px;
}

.schedule-table td:first-child .form-check {
    margin: 0;
    font-weight: 600;
}

/* ---------- Presence registration (mobile-first: teachers register in the classroom) ---------- */
.presence-form {
    max-width: 1100px;
}

.presence-row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto minmax(260px, 1.2fr);
    align-items: center;
    gap: .5rem 1rem;
    background: #fff;
    padding: .6rem .9rem;
    margin-bottom: 4px;
    border-left: 4px solid transparent;
}

.presence-row.is-open {
    border-left-color: var(--dvs-orange);
}

.presence-student {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .6rem;
}

.presence-status {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.presence-status .btn {
    min-width: 92px;
    min-height: 38px;
    border: 1px solid #cfcfcf;
    background: #fff;
    font-weight: 600;
}

.btn-check:checked + .presence-present { background: #198754; border-color: #198754; color: #fff; }
.btn-check:checked + .presence-late { background: #ffc107; border-color: #ffc107; color: #1d1d1d; }
.btn-check:checked + .presence-absent_excused { background: #6c757d; border-color: #6c757d; color: #fff; }
.btn-check:checked + .presence-absent_unexcused { background: #dc3545; border-color: #dc3545; color: #fff; }

.presence-reason {
    display: flex;
    gap: .4rem;
}

.presence-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: .75rem .9rem;
    background: #fff;
    position: sticky;
    bottom: 0;
    box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .06);
}

@media (max-width: 991.98px) {
    .presence-row {
        grid-template-columns: 1fr;
    }

    .presence-status .btn {
        flex: 1 1 40%;
    }

    .presence-reason {
        flex-direction: column;
    }
}

/* Breadcrumb must never run under the header icons on small screens. */
.app-header .breadcrumb-bar {
    overflow: hidden;
}

.app-header .breadcrumb-item {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .app-header .breadcrumb-item:not(:last-child) {
        display: none;
    }

    .app-header .breadcrumb-item + .breadcrumb-item::before {
        display: none;
    }
}

/* ---------- Backlog dashboard ---------- */
.sidebar-badge {
    margin-left: auto;
    background: var(--dvs-orange);
    color: #fff;
    border-radius: 1rem;
    font-size: .7rem;
    padding: .05rem .5rem;
}

.tile {
    position: relative;
}

.tile-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    min-width: 1.6rem;
    padding: .1rem .45rem;
    border-radius: 1rem;
    background: var(--dvs-orange);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.backlog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .75rem;
}

.backlog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1rem;
    background: #fff;
    border-left: 4px solid #c9c9c9;
    color: #1d1d1d;
    text-decoration: none;
    min-height: 92px;
}

.backlog-card:hover {
    color: #1d1d1d;
    box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .07);
}

.backlog-card.has-issues {
    border-left-color: var(--dvs-orange);
}

.backlog-card.is-ok {
    border-left-color: #198754;
}

.backlog-card.is-selected {
    outline: 2px solid var(--dvs-purple);
}

.backlog-count {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--dvs-purple);
}

.backlog-card.is-ok .backlog-count {
    color: #6c757d;
}

.backlog-label {
    font-size: .82rem;
    font-weight: 600;
}

.backlog-ok {
    position: absolute;
    top: .7rem;
    right: .8rem;
    color: #198754;
}

.backlog-matrix th {
    font-size: .75rem;
    white-space: normal;
    vertical-align: bottom;
}

.backlog-pill {
    display: inline-block;
    min-width: 2rem;
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: var(--dvs-orange);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.backlog-pill.is-signal {
    background: var(--dvs-purple);
}

.backlog-pill:hover {
    color: #fff;
    opacity: .85;
}

/* ---------- Export builder ---------- */
.export-step {
    margin-bottom: .5rem;
}

.dataset-btn {
    font-weight: 600;
}

.btn-check:checked + .dataset-btn {
    background: var(--dvs-purple) !important;
    border-color: var(--dvs-purple);
    color: #fff;
}

.export-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem 2rem;
    background: #fff;
    padding: 1rem;
}

.export-filters .dvs-label {
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
    float: none;
}

.export-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.export-fields fieldset {
    background: #fff;
    padding: .75rem 1rem;
}

.export-fields legend {
    font-size: .85rem;
    font-weight: 700;
    color: var(--dvs-purple);
    float: none;
    margin-bottom: .25rem;
}

.export-fields fieldset.is-sensitive {
    border-left: 3px solid #dc3545;
}

.export-fields .form-check-label {
    font-size: .82rem;
}

.export-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .06);
}

.export-preview td,
.export-preview th {
    white-space: nowrap;
}

.export-filters legend.dvs-label {
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.export-filters input[type=date] {
    min-width: 0;
    flex: 1 1 0;
}

/* ---------- Change history ---------- */
.audit-list {
    max-width: 1100px;
}

.audit-entry {
    background: #fff;
    padding: .7rem 1rem;
    margin-bottom: 4px;
    border-left: 4px solid #c9c9c9;
    font-size: .85rem;
}

.audit-entry.audit-create { border-left-color: #198754; }
.audit-entry.audit-update { border-left-color: var(--nl-purple); }
.audit-entry.audit-delete { border-left-color: var(--nl-red); }
.audit-entry.audit-view_sensitive,
.audit-entry.audit-export { border-left-color: var(--nl-orange); }

.audit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    align-items: center;
    color: #6c6c6c;
    font-size: .78rem;
}

.audit-badge {
    background: var(--dvs-canvas);
    color: #1d1d1d;
    font-weight: 500;
}

.audit-label {
    font-weight: 600;
    margin: .2rem 0;
}

.audit-changes {
    font-size: .8rem;
    border-collapse: collapse;
}

.audit-changes th {
    font-weight: 500;
    color: #555;
    padding: .1rem 1rem .1rem 0;
    white-space: nowrap;
    vertical-align: top;
    font-family: var(--nl-font-heading);
}

.audit-changes td {
    padding: .1rem .75rem .1rem 0;
    vertical-align: top;
}

.audit-changes td.old {
    color: #8a8a8a;
    text-decoration: line-through;
}

.pagination {
    --bs-pagination-active-bg: var(--nl-purple);
    --bs-pagination-active-border-color: var(--nl-purple);
    --bs-pagination-color: var(--nl-purple);
}

/* ---------- Evaluations ---------- */
.evaluation-list {
    max-width: 1100px;
}

.evaluation-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    background: #fff;
    padding: .75rem 1rem;
    margin-bottom: 4px;
}

.evaluation-main {
    flex: 1 1 320px;
}

.evaluation-actions {
    flex: 0 1 320px;
    text-align: right;
}

.evaluation-actions details > summary {
    list-style: none;
}

.evaluation-actions details > summary::-webkit-details-marker {
    display: none;
}

.evaluation-form {
    text-align: left;
    margin-top: .5rem;
}

.evaluation-form .dvs-label {
    display: block;
    font-size: .78rem;
    margin-top: .35rem;
}