/* ─── Lettertype: Inter wordt geladen via layout_font_links() (jsdelivr, CSP-toegestaan) ─── */

/* ─── Design tokens ──────────────────────────────────────────────────────────── */
:root {
    --avh-dark: #1e2328;
    --avh-dark-mid: #2c3138;
    --avh-orange: #ff6900;
    --avh-orange-hover: #e05a00;
    --avh-orange-light: rgba(255, 105, 0, .10);
    --avh-orange-subtle: rgba(255, 105, 0, .05);
    --avh-text: #1a1d23;
    --avh-text-secondary: #4b5563;
    --avh-muted: #6b7280;
    --avh-bg: #f3f4f7;
    --avh-surface: #ffffff;
    --avh-surface-raised: #f8f9fb;
    --avh-border: #e5e7eb;
    --avh-border-strong: #d1d5db;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, .09), 0 4px 8px rgba(0, 0, 0, .05);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .06);
    --radius-sm: .375rem;
    --radius-md: .625rem;
    --radius-lg: .875rem;
    --radius-xl: 1.125rem;
    --radius-full: 9999px;
    --transition-fast: .12s ease;
    --transition-base: .2s ease;
    --kp-layout-max: 1520px;
    --kp-layout-max-admin: 1840px;
    --kp-layout-gutter: clamp(.85rem, 2.3vw, 2.2rem);
}

:root.theme-default {
    --avh-orange: #ff6900;
    --avh-orange-hover: #e05a00;
    --avh-orange-light: rgba(255, 105, 0, .10);
    --avh-orange-subtle: rgba(255, 105, 0, .05);
}

:root.theme-ocean {
    --avh-orange: #0b84f3;
    --avh-orange-hover: #086dcb;
    --avh-orange-light: rgba(11, 132, 243, .12);
    --avh-orange-subtle: rgba(11, 132, 243, .06);
}

:root.theme-forest {
    --avh-orange: #1f9d55;
    --avh-orange-hover: #167a41;
    --avh-orange-light: rgba(31, 157, 85, .12);
    --avh-orange-subtle: rgba(31, 157, 85, .06);
}

:root.theme-sunset {
    --avh-orange: #d97706;
    --avh-orange-hover: #b45309;
    --avh-orange-light: rgba(217, 119, 6, .12);
    --avh-orange-subtle: rgba(217, 119, 6, .06);
}

/* ─── Nova theme (alternatieve layout/look) ───────────────────────────────── */
:root.theme-nova {
    --avh-orange: #0f766e;
    --avh-orange-hover: #0d645d;
    --avh-orange-light: rgba(15, 118, 110, .14);
    --avh-orange-subtle: rgba(15, 118, 110, .07);
    --avh-bg: #eef3f7;
    --avh-surface: #ffffff;
    --avh-surface-raised: #f5f8fb;
    --avh-border: #dbe4ee;
    --avh-border-strong: #c6d3e2;
    --radius-sm: .5rem;
    --radius-md: .8rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --shadow-xs: 0 1px 3px rgba(15, 23, 42, .06);
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 14px 34px rgba(15, 23, 42, .1), 0 2px 8px rgba(15, 23, 42, .05);
    --kp-layout-max: 1460px;
    --kp-layout-max-admin: 1760px;
}

:root.theme-nova .kp-page-body {
    background-image:
        radial-gradient(1000px 320px at 18% -12%, rgba(15, 118, 110, .12), transparent 70%),
        radial-gradient(900px 280px at 82% -16%, rgba(59, 130, 246, .11), transparent 72%);
}

:root.theme-nova .kp-page-wrap {
    padding-top: 1rem;
}

:root.theme-nova .kp-shell::before {
    height: 118px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, 0) 100%);
}

:root.theme-nova .kp-navbar {
    min-height: 58px;
    backdrop-filter: saturate(120%) blur(8px);
    background: linear-gradient(90deg, rgba(30, 35, 40, .96) 0%, var(--avh-navbar-bg, #1e2328) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

:root.theme-nova .kp-navbar .navbar-nav .nav-link {
    height: 42px;
    margin: .45rem .18rem;
    padding: 0 .8rem !important;
    border-radius: .65rem;
    border-bottom: 0;
}

:root.theme-nova .kp-navbar .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

:root.theme-nova .kp-navbar-cta {
    border-radius: .7rem;
    box-shadow: 0 8px 18px rgba(15, 118, 110, .28);
}

:root.theme-nova .card {
    border-color: var(--avh-border);
    box-shadow: var(--shadow-sm);
}

:root.theme-nova .card-header {
    background: linear-gradient(180deg, #ffffff 0%, var(--avh-surface-raised) 100%);
    border-bottom-color: var(--avh-border);
}

:root.theme-nova .table thead th {
    font-size: .68rem;
    letter-spacing: .075em;
    background: #f2f7fb;
    border-bottom-color: var(--avh-border-strong);
}

:root.theme-nova .table-hover tbody tr:hover {
    background-color: rgba(15, 118, 110, .06);
}

:root.theme-nova .btn {
    border-radius: .68rem;
}

:root.theme-nova .btn-primary {
    box-shadow: 0 8px 16px rgba(15, 118, 110, .22);
}

:root.theme-nova .form-control,
:root.theme-nova .form-select {
    border-radius: .65rem;
    background: #fbfdff;
}

:root.theme-nova .form-control:focus,
:root.theme-nova .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .16);
}

:root.theme-nova .alert {
    border-left-width: 4px;
    box-shadow: var(--shadow-xs);
}

:root.theme-nova .badge {
    border-radius: .55rem;
}

/* ─── TailAdmin style theme (inspiratie, eigen implementatie) ─────────────── */
:root.theme-tailadmin {
    --avh-bg: #f1f5f9;
    --avh-surface: #ffffff;
    --avh-surface-raised: #f8fafc;
    --avh-border: #e2e8f0;
    --avh-border-strong: #cbd5e1;
    --avh-text: #1e293b;
    --avh-text-secondary: #475569;
    --avh-muted: #64748b;
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: .95rem;
    --radius-xl: 1.2rem;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .03);
    --shadow-md: 0 14px 30px rgba(15, 23, 42, .09), 0 2px 8px rgba(15, 23, 42, .05);
    --kp-layout-max: 1500px;
    --kp-layout-max-admin: 1820px;
}

:root.theme-tailadmin .kp-page-body {
    background-image:
        radial-gradient(900px 300px at 6% -10%, rgba(var(--avh-primary-rgb, 60, 80, 224), .12), transparent 70%),
        radial-gradient(920px 320px at 96% -18%, rgba(14, 165, 233, .1), transparent 72%);
}

:root.theme-tailadmin .kp-page-wrap {
    padding-top: .95rem;
}

:root.theme-tailadmin .kp-shell::before {
    height: 112px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 100%);
}

:root.theme-tailadmin .kp-navbar {
    min-height: 60px;
    background: linear-gradient(90deg, #1d2846 0%, #24335a 100%);
    border-bottom-color: rgba(148, 163, 184, .22);
}

:root.theme-tailadmin .kp-navbar .navbar-nav .nav-link {
    height: 42px;
    margin: .5rem .14rem;
    border-bottom: 0;
    border-radius: .62rem;
    padding: 0 .82rem !important;
    color: rgba(226, 232, 240, .8) !important;
}

:root.theme-tailadmin .kp-navbar .navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #f8fafc !important;
}

:root.theme-tailadmin .kp-navbar .navbar-nav .nav-link.active {
    background: rgba(var(--avh-primary-rgb, 60, 80, 224), .32);
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(var(--avh-primary-rgb, 60, 80, 224), .45);
}

:root.theme-tailadmin .kp-navbar .dropdown-menu {
    border-radius: .85rem;
    box-shadow: 0 20px 36px rgba(15, 23, 42, .14), 0 3px 10px rgba(15, 23, 42, .06);
}

:root.theme-tailadmin .card {
    border-color: var(--avh-border);
    box-shadow: var(--shadow-sm);
}

:root.theme-tailadmin .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

:root.theme-tailadmin .table thead th {
    background: #f8fbff;
    border-bottom-color: #dbe4f0;
    font-size: .67rem;
    letter-spacing: .08em;
}

:root.theme-tailadmin .table-hover tbody tr:hover {
    background-color: rgba(var(--avh-primary-rgb, 60, 80, 224), .08);
}

:root.theme-tailadmin .btn {
    border-radius: .62rem;
}

:root.theme-tailadmin .btn-primary {
    box-shadow: 0 10px 18px rgba(var(--avh-primary-rgb, 60, 80, 224), .26);
}

:root.theme-tailadmin .btn-outline-primary {
    border-color: rgba(var(--avh-primary-rgb, 60, 80, 224), .45);
    color: var(--avh-text-secondary);
}

:root.theme-tailadmin .btn-outline-primary:hover {
    background: var(--avh-orange);
    border-color: var(--avh-orange);
    color: #fff;
}

:root.theme-tailadmin .form-control,
:root.theme-tailadmin .form-select,
:root.theme-tailadmin .input-group-text {
    border-color: #d6e1ee;
    background: #fbfdff;
    border-radius: .62rem;
}

:root.theme-tailadmin .form-control:focus,
:root.theme-tailadmin .form-select:focus {
    border-color: rgba(var(--avh-primary-rgb, 60, 80, 224), .55);
    box-shadow: 0 0 0 .18rem rgba(var(--avh-primary-rgb, 60, 80, 224), .18);
}

:root.theme-tailadmin .badge {
    border-radius: .5rem;
    font-size: .68rem;
}

:root.theme-tailadmin .alert {
    border-left-width: 4px;
    box-shadow: var(--shadow-xs);
}

/*
 * ─── HaloPSA style theme (inspiratie, eigen implementatie) ──────────────────
 * Donkere navy sidebar + lichte, dichte contentkaarten/tabellen — de
 * herkenbare PSA/ticketing-tool look. --avh-orange (tenant/reseller-merkkleur,
 * zie includes/layout_shared.php:layout_branding_css_vars()) blijft bewust
 * ongemoeid: die stuurt nog steeds knoppen/actieve accenten, alleen de
 * chrome eromheen wordt donkerder en dichter.
 */
:root.theme-halopsa {
    --avh-sidebar-bg: #101a2c;
    --avh-sidebar-border: rgba(255, 255, 255, .08);
    --avh-sidebar-text: #94a3b8;
    --avh-sidebar-text-muted: #5b6b85;
    --avh-sidebar-text-active: #ffffff;
    --avh-bg: #f3f5fa;
    --avh-surface: #ffffff;
    --avh-surface-raised: #f8fafc;
    --avh-border: #e3e7f0;
    --avh-border-strong: #cad2e1;
    --avh-text: #1b2333;
    --avh-text-secondary: #4b5568;
    --avh-muted: #6b7686;
    --radius-sm: .4rem;
    --radius-md: .55rem;
    --radius-lg: .75rem;
    --radius-xl: .9rem;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .05);
    --kp-layout-max: 1520px;
    --kp-layout-max-admin: 1840px;
}

/* Sidebar (includes/navbar.php, .kp-app-sidebar) — donker navy i.p.v. wit */
:root.theme-halopsa .kp-app-sidebar {
    background-color: var(--avh-sidebar-bg);
    border-color: var(--avh-sidebar-border);
}

:root.theme-halopsa .kp-app-sidebar .tw-border-gray-100,
:root.theme-halopsa .kp-app-sidebar .tw-border-b {
    border-color: var(--avh-sidebar-border);
}

:root.theme-halopsa .kp-app-sidebar .tw-text-gray-900 {
    color: var(--avh-sidebar-text-active);
}

:root.theme-halopsa .kp-app-sidebar .tw-text-gray-400 {
    color: var(--avh-sidebar-text-muted);
}

/* Menu-items (component classes, assets/tailwind/input.css) */
:root.theme-halopsa .tw-menu-item {
    color: var(--avh-sidebar-text);
}

:root.theme-halopsa .tw-menu-item-inactive:hover {
    background-color: rgba(255, 255, 255, .06);
    color: var(--avh-sidebar-text-active);
}

:root.theme-halopsa .tw-menu-item-active {
    background-color: rgba(255, 255, 255, .08);
    color: var(--avh-sidebar-text-active);
    box-shadow: inset 3px 0 0 0 var(--avh-orange, #ff6900);
}

:root.theme-halopsa .tw-menu-item-icon-inactive {
    color: var(--avh-sidebar-text-muted);
}

:root.theme-halopsa .tw-menu-item-icon-active {
    color: var(--avh-orange, #ff6900);
}

:root.theme-halopsa .tw-menu-dropdown-item {
    color: var(--avh-sidebar-text);
}

:root.theme-halopsa .tw-menu-dropdown-item:hover {
    background-color: rgba(255, 255, 255, .06);
    color: var(--avh-sidebar-text-active);
}

:root.theme-halopsa .tw-menu-dropdown-item-active {
    color: var(--avh-orange, #ff6900);
}

/* Topbar (header naast de sidebar) blijft licht, alleen rand verfijnd */
:root.theme-halopsa header.tw-bg-white {
    border-color: var(--avh-border);
}

/* Kaarten — hergebruikt overal dezelfde Tailwind-utilityklassen-combinatie
   (zie dashboard.php, ticket_detail.php, klant_detail.php e.a.) */
:root.theme-halopsa .tw-rounded-2xl.tw-border.tw-border-gray-200.tw-bg-white {
    border-color: var(--avh-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

/* Tailwind-tabellen (tickets.php, dashboard.php e.a.) */
:root.theme-halopsa thead.tw-bg-gray-50,
:root.theme-halopsa tfoot.tw-bg-gray-50 {
    background-color: var(--avh-surface-raised);
}

:root.theme-halopsa tbody.tw-divide-y.tw-divide-gray-100 tr:hover {
    background-color: rgba(51, 65, 85, .045);
}

/* Badges/pills — al pil-vormig (.badge/.tw-badge), hier iets dichter/steviger */
:root.theme-halopsa .badge,
:root.theme-halopsa .tw-badge {
    font-weight: 700;
    letter-spacing: .01em;
}

/* Bootstrap-tabellen/kaarten (klanten.php, facturen.php e.a., zelfde patroon
   als .theme-nova/.theme-tailadmin hierboven) */
:root.theme-halopsa .card {
    border-color: var(--avh-border);
    box-shadow: var(--shadow-xs);
}

:root.theme-halopsa .card-header {
    background: var(--avh-surface-raised);
    border-bottom-color: var(--avh-border);
}

:root.theme-halopsa .table thead th {
    background: var(--avh-surface-raised);
    border-bottom-color: var(--avh-border-strong);
    font-size: .68rem;
    letter-spacing: .07em;
}

:root.theme-halopsa .table-hover tbody tr:hover {
    background-color: rgba(51, 65, 85, .045);
}

:root.theme-halopsa .btn {
    border-radius: .55rem;
}

:root.theme-halopsa .form-control,
:root.theme-halopsa .form-select {
    border-radius: .5rem;
}

/* admin/ en portaal/ top-navbar (nog geen sidebar daar — zie plan) blijft
   qua achtergrond de ingestelde navbar_kleur volgen (standaard al donker,
   #32373c), hier alleen de nav-link states op de navy-toon afstemmen. */
:root.theme-halopsa .kp-navbar .navbar-nav .nav-link {
    border-radius: .55rem;
    color: rgba(226, 232, 240, .82) !important;
}

:root.theme-halopsa .kp-navbar .navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff !important;
}

:root.theme-halopsa .kp-navbar .navbar-nav .nav-link.active {
    background: var(--avh-orange-light, rgba(255, 105, 0, .22));
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* ─── Algemeen ──────────────────────────────────────────────────────────────── */
body {
    background-color: var(--avh-bg);
    font-family: 'Inter', 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--avh-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes kp-fadein {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kp-page-body {
    min-height: 100vh;
    animation: kp-fadein .22s ease both;
}

.kp-page-wrap {
    padding-top: .5rem;
    padding-bottom: 2rem;
    width: min(var(--kp-layout-max), calc(100vw - (var(--kp-layout-gutter) * 2)));
    margin-inline: auto;
    padding-left: var(--kp-layout-gutter) !important;
    padding-right: var(--kp-layout-gutter) !important;
}

.kp-page-body--admin .kp-page-wrap {
    width: min(var(--kp-layout-max-admin), calc(100vw - (var(--kp-layout-gutter) * 2)));
}

/*
 * Ruimte voor de vaste Tailwind/Alpine-sidebar (includes/navbar.php, 290px breed)
 * op desktop. De sidebar is `position: fixed` (neemt geen documentflow-ruimte in),
 * dus body/container moeten hier expliciet rekening mee houden. Alleen app/admin:
 * portaalpagina's tonen geen sidebar (zie includes/navbar.php, fallback-branding
 * als er geen staff-sessie is) en blijven dus onaangetast.
 */
/*
 * Sidebar open/dicht-state via een eigen class i.p.v. Tailwind's translate-x
 * utilities, zodat het zichtbaar/verborgen zijn nooit afhangt van de volgorde
 * waarin Tailwind utilities genereert (twee gelijk-specifieke utility-classes
 * die om dezelfde `transform`-property strijden zou onvoorspelbaar zijn zodra
 * de build verandert). Hier bepaalt CSS-specificiteit het altijd deterministisch:
 * basis (mobiel dicht) < media-override (desktop open) < .kp-sidebar-open
 * (Alpine, mobiel) < html.kp-sidebar-collapsed (voorkeur, desktop) wint altijd.
 */
.kp-app-sidebar {
    transform: translateX(-100%);
}

.kp-app-sidebar.kp-sidebar-open {
    transform: translateX(0);
}

@media (min-width: 1024px) {
    .kp-app-sidebar {
        transform: translateX(0);
    }

    html.kp-sidebar-collapsed .kp-app-sidebar {
        transform: translateX(-100%);
    }

    .kp-page-body--app,
    .kp-page-body--admin {
        padding-left: 290px;
        transition: padding-left var(--transition-fast, .12s ease);
    }

    .kp-page-body--app .kp-page-wrap {
        width: min(var(--kp-layout-max), calc(100vw - 290px - (var(--kp-layout-gutter) * 2)));
    }

    .kp-page-body--admin .kp-page-wrap {
        width: min(var(--kp-layout-max-admin), calc(100vw - 290px - (var(--kp-layout-gutter) * 2)));
    }

    /* Ingeklapte sidebar (via hamburger-knop, voorkeur onthouden in localStorage) */
    html.kp-sidebar-collapsed .kp-page-body--app,
    html.kp-sidebar-collapsed .kp-page-body--admin {
        padding-left: 0;
    }

    html.kp-sidebar-collapsed .kp-page-body--app .kp-page-wrap {
        width: min(var(--kp-layout-max), calc(100vw - (var(--kp-layout-gutter) * 2)));
    }

    html.kp-sidebar-collapsed .kp-page-body--admin .kp-page-wrap {
        width: min(var(--kp-layout-max-admin), calc(100vw - (var(--kp-layout-gutter) * 2)));
    }
}

/* Alpine: elementen met x-cloak moeten verborgen zijn tot Alpine initialiseert */
[x-cloak] {
    display: none !important;
}

.kp-shell {
    position: relative;
}

.kp-shell::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 96px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 0;
}

.kp-shell>* {
    position: relative;
    z-index: 1;
}

/* Elk kind is een eigen stapellaag (z-index 1), waardoor een open dropdown anders
   onder het volgende blok (bv. een card) verdwijnt. Til het blok met het open menu op. */
.kp-shell>*:has(.dropdown-menu.show),
.kp-shell>*:has([aria-expanded="true"]) {
    z-index: 5;
}

.kp-shell>.card,
.kp-shell>.alert,
.kp-shell>.table-responsive,
.kp-shell>.row,
.kp-shell>.d-flex {
    margin-bottom: 1rem;
}

.kp-shell>.card:last-child,
.kp-shell>.alert:last-child,
.kp-shell>.table-responsive:last-child,
.kp-shell>.row:last-child,
.kp-shell>.d-flex:last-child {
    margin-bottom: 0;
}

.container,
.container-fluid {
    max-width: none;
}

@media (max-width: 767.98px) {
    .kp-page-wrap {
        --kp-layout-gutter: .75rem;
    }
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--avh-border-strong);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--avh-muted);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    letter-spacing: -.015em;
    line-height: 1.3;
}

h1.h3,
.h3 {
    font-weight: 700;
    font-size: 1.3rem;
}

/* ─── Kaarten ───────────────────────────────────────────────────────────────── */
.card {
    background: var(--avh-surface);
    border: 1px solid var(--avh-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background: var(--avh-surface-raised);
    border-bottom: 1px solid var(--avh-border);
    padding: .8rem 1.25rem;
    font-size: .76rem;
    font-weight: 700;
    color: var(--avh-text-secondary);
    text-transform: uppercase;
    letter-spacing: .055em;
}

.card-header:first-child {
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: var(--avh-surface-raised);
    border-top: 1px solid var(--avh-border);
    padding: .8rem 1.25rem;
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}

/* ─── Statistieken ──────────────────────────────────────────────────────────── */
.stat-card {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}

.stat-card .card-body {
    padding: 1.1rem 1.25rem;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.stat-icon.text-primary {
    background: var(--avh-orange-light);
    color: var(--avh-orange) !important;
}

.stat-icon.text-success {
    background: rgba(25, 135, 84, .10);
}

.stat-icon.text-danger {
    background: rgba(220, 53, 69, .10);
}

.stat-icon.text-warning {
    background: rgba(234, 179, 8, .12);
}

.stat-icon.text-info {
    background: rgba(14, 165, 233, .10);
}

.stat-icon.text-secondary {
    background: rgba(108, 117, 125, .10);
}

.stat-icon.text-orange {
    background: var(--avh-orange-light);
    color: var(--avh-orange);
}

.stat-number {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--avh-text);
    letter-spacing: -.02em;
}

.stat-label {
    font-size: .7rem;
    color: var(--avh-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .055em;
    margin-top: .1rem;
}

/* ─── Dashboard module-kaarten ──────────────────────────────────────────────── */
.dashboard-module-card {
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-left-color var(--transition-base);
    border-left: 3px solid transparent !important;
}

.dashboard-module-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
    border-left-color: var(--avh-orange) !important;
}

.dashboard-module-card .card-body {
    padding: 1.35rem;
}

/* ─── Tabel ─────────────────────────────────────────────────────────────────── */
.table {
    font-size: .875rem;
}

.table> :not(caption)>*>* {
    padding: .7rem 1rem;
    border-color: var(--avh-border);
}

.table thead th {
    background: var(--avh-surface-raised);
    color: var(--avh-text-secondary);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 2px solid var(--avh-border);
    white-space: nowrap;
    padding: .65rem 1rem;
}

.table tbody tr {
    transition: background var(--transition-fast);
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 105, 0, .04);
    cursor: pointer;
}

/* ─── Navbar ─────────────────────────────────────────────────────────────────── */
.navbar {
    padding: 0;
    background-color: var(--avh-navbar-bg, var(--avh-dark));
}

.kp-navbar {
    min-height: 52px;
    position: relative;
    z-index: 1080;
    isolation: isolate;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.kp-navbar--app {
    border-bottom-color: rgba(var(--avh-primary-rgb, 255, 105, 0), .4);
}

.kp-navbar--admin {
    border-bottom-color: rgba(245, 158, 11, .4);
}

.kp-navbar--platform {
    border-bottom-color: rgba(99, 102, 241, .5);
}

.kp-navbar--portaal {
    border-bottom-color: rgba(var(--avh-primary-rgb, 255, 105, 0), .3);
}

.kp-nav-shell {
    width: min(var(--kp-layout-max), calc(100vw - (var(--kp-layout-gutter) * 2)));
    margin-inline: auto;
    padding-left: var(--kp-layout-gutter) !important;
    padding-right: var(--kp-layout-gutter) !important;
}

.kp-nav-shell--admin {
    width: min(var(--kp-layout-max-admin), calc(100vw - (var(--kp-layout-gutter) * 2)));
}

.kp-page-body--nonprod {
    box-shadow: inset 0 4px 0 #ff8a00;
}

.kp-navbar-logo {
    width: auto;
    object-fit: contain;
}

.kp-env-badge {
    background: rgba(255, 160, 0, .18);
    color: #ffc147;
    border: 1px solid rgba(255, 160, 0, .3);
    letter-spacing: .06em;
    font-size: .6rem;
    font-weight: 700;
    vertical-align: middle;
    border-radius: var(--radius-sm);
    padding: .15em .5em;
}

.kp-navbar-logo--app {
    height: 30px;
}

.kp-navbar-logo--admin {
    height: 26px;
}

.kp-navbar-logo--portaal {
    height: 28px;
}

.kp-navbar .navbar-brand {
    max-width: min(100%, 300px);
    line-height: 1.1;
    gap: .6rem;
}

.kp-navbar-brandcopy {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.kp-navbar-brandtitle {
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.05;
}

.kp-navbar-brandmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

.kp-admin-navbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.kp-navbar .navbar-toggler {
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: var(--radius-sm) !important;
    padding: .3rem .55rem !important;
}

.kp-navbar .navbar-collapse {
    align-items: stretch;
    position: relative;
    z-index: 1085;
}

.navbar-brand img {
    height: 30px;
    width: auto;
    filter: none;
}

/* Nav links — subtiele stijl, active via bottom-border indicator */
.kp-navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .65) !important;
    font-weight: 500;
    font-size: .82rem;
    letter-spacing: .01em;
    transition: color var(--transition-base), border-color var(--transition-base);
    border-radius: 0;
    padding: 0 .9rem !important;
    height: 52px;
    display: flex;
    align-items: center;
    gap: .35rem;
    border-bottom: 2px solid transparent;
    position: relative;
}

.kp-navbar .navbar-nav .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .05);
}

.kp-navbar .navbar-nav .nav-link.active {
    color: #fff !important;
    font-weight: 600;
    border-bottom-color: var(--avh-orange, #ff6900);
    background: transparent;
}

/* Dropdown toggle indicator */
.kp-navbar .navbar-nav .dropdown-toggle::after {
    margin-left: .2em;
    opacity: .5;
}

/* Dropdown menu — altijd licht, ongeacht data-bs-theme op de nav */
.kp-navbar .dropdown-menu {
    border: 1px solid var(--avh-border);
    border-radius: var(--radius-lg);
    padding: .4rem;
    box-shadow: var(--shadow-lg);
    z-index: 1090;
    margin-top: 0 !important;
    min-width: 200px;
    animation: kp-fadein .12s ease both;
    /* Force light theme */
    background-color: #ffffff !important;
    color: var(--avh-text) !important;
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-color: var(--avh-text);
    --bs-dropdown-border-color: var(--avh-border);
}

.kp-navbar .dropdown-item {
    border-radius: var(--radius-sm);
    padding: .5rem .8rem;
    font-weight: 500;
    font-size: .83rem;
    color: var(--avh-text);
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.kp-navbar .dropdown-item:hover {
    background: var(--avh-orange-light);
    color: var(--avh-orange);
}

.kp-navbar .dropdown-item.active,
.kp-navbar .dropdown-item:active {
    background: var(--avh-orange-light);
    color: var(--avh-orange);
    font-weight: 600;
}

.kp-navbar .dropdown-divider {
    margin: .35rem .4rem;
    border-color: var(--avh-border);
}

/* CTA knop (Nieuwe werkbon) */
.kp-navbar-cta {
    border: 1px solid rgba(var(--avh-primary-rgb, 255, 105, 0), .5);
    background: rgba(var(--avh-primary-rgb, 255, 105, 0), .15);
    color: #fff !important;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: .79rem;
    padding: .4rem .85rem !important;
    height: auto !important;
    border-bottom: 1px solid rgba(var(--avh-primary-rgb, 255, 105, 0), .5) !important;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.kp-navbar-cta:hover {
    background: rgba(var(--avh-primary-rgb, 255, 105, 0), .28) !important;
    border-color: rgba(var(--avh-primary-rgb, 255, 105, 0), .7) !important;
    color: #fff !important;
}

.kp-navbar-ghost {
    border: 1px solid rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .75) !important;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: .38rem .7rem;
    text-decoration: none;
    font-weight: 500;
    font-size: .79rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.kp-navbar-ghost:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff !important;
}

.kp-navbar-ghost--danger {
    border-color: rgba(255, 100, 100, .3);
    color: rgba(255, 180, 180, .85) !important;
}

.kp-navbar-ghost--danger:hover {
    background: rgba(220, 53, 69, .18);
    color: #fca5a5 !important;
}

.kp-navbar-userbar {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
    align-items: center;
}

.kp-navbar-userbar__label {
    margin: 0;
    padding: .3rem 0 !important;
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
}

/* ─── Badges ────────────────────────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    font-size: .695rem;
    padding: .3em .65em;
    letter-spacing: .02em;
    border-radius: var(--radius-full);
}

.badge.rounded-pill {
    padding: .3em .75em;
}

.workorder-overview-meta {
    letter-spacing: .01em;
}

.workorder-overview-toolbar {
    background: var(--avh-surface);
    border: 1px solid var(--avh-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.workorder-overview-toolbar .card-body {
    padding: 1rem 1.25rem;
}

.workorder-bulk-toolbar {
    position: sticky;
    top: 1rem;
    z-index: 10;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg) !important;
}

.workorder-empty-state {
    border: 1.5px dashed var(--avh-border-strong);
    border-radius: var(--radius-lg);
}

.workorder-empty-state-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--avh-orange-light);
    color: var(--avh-orange);
    font-size: 2rem;
}

/* ─── Detail hero ────────────────────────────────────────────────────────────── */
.kp-detail-hero {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.kp-detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.kp-detail-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-full);
    background: rgba(15, 23, 42, .05);
    color: #475569;
    font-size: .76rem;
    font-weight: 600;
    border: 1px solid rgba(15, 23, 42, .06);
}

.kp-detail-pill--accent {
    background: var(--avh-orange-light);
    color: var(--avh-orange);
    border-color: rgba(255, 105, 0, .15);
}

/* ─── Admin quicklink grid ───────────────────────────────────────────────────── */
.admin-quicklink-grid {
    --bs-gutter-y: .85rem;
}

.admin-quicklink-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--avh-border);
    background: var(--avh-surface);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    box-shadow: var(--shadow-xs);
}

.admin-quicklink-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 105, 0, .25);
    box-shadow: var(--shadow-md);
}

.admin-quicklink-card__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--avh-orange-light);
    color: var(--avh-orange);
    font-size: 1rem;
    flex-shrink: 0;
}

/* ─── Knoppen ───────────────────────────────────────────────────────────────── */
.btn {
    font-weight: 600;
    font-size: .82rem;
    border-radius: var(--radius-md);
    letter-spacing: .01em;
    transition: background var(--transition-fast), border-color var(--transition-fast),
        box-shadow var(--transition-fast), transform var(--transition-fast);
}

.btn:active {
    transform: scale(.98);
}

.btn-primary {
    background: var(--avh-orange);
    border-color: var(--avh-orange);
    color: #fff;
    box-shadow: 0 1px 3px rgba(255, 105, 0, .28);
}

.btn-primary:hover {
    background: var(--avh-orange-hover);
    border-color: var(--avh-orange-hover);
    box-shadow: 0 4px 10px rgba(255, 105, 0, .26);
    color: #fff;
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 .22rem rgba(255, 105, 0, .32);
}

.btn-outline-primary {
    color: var(--avh-orange);
    border-color: var(--avh-orange);
}

.btn-outline-primary:hover {
    background: var(--avh-orange);
    border-color: var(--avh-orange);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 105, 0, .22);
}

.btn-outline-secondary {
    border-color: var(--avh-border-strong);
    color: var(--avh-text-secondary);
}

.btn-outline-secondary:hover {
    background: var(--avh-surface-raised);
    border-color: var(--avh-border-strong);
    color: var(--avh-text);
}

.btn-sm {
    padding: .35rem .75rem;
    font-size: .78rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: .7rem 1.5rem;
    font-size: .95rem;
    border-radius: var(--radius-md);
    font-weight: 700;
}

/* ─── Formulieren ───────────────────────────────────────────────────────────── */
.form-label {
    font-weight: 600;
    font-size: .8rem;
    color: var(--avh-text-secondary);
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    border-color: var(--avh-border-strong);
    border-radius: var(--radius-sm);
    font-size: .875rem;
    padding: .5rem .85rem;
    background: var(--avh-surface);
    color: var(--avh-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control::placeholder {
    color: #9ca3af;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 105, 0, .18);
    border-color: var(--avh-orange);
    outline: none;
}

.input-group-text {
    background: var(--avh-surface-raised);
    border-color: var(--avh-border-strong);
    color: var(--avh-muted);
    font-size: .875rem;
}

.form-text {
    font-size: .74rem;
    color: var(--avh-muted);
}

.form-check-input:checked {
    background-color: var(--avh-orange);
    border-color: var(--avh-orange);
}

.form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 105, 0, .18);
    border-color: var(--avh-orange);
}

.omschrijving-tekst {
    white-space: pre-wrap;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ─── Navbar scope badges ────────────────────────────────────────────────────── */
/* Gebruik deze klassen i.p.v. inline styles voor scope/versie badges in navbars */
.kp-badge-scope {
    display: inline-flex;
    align-items: center;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: .22em .55em;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    text-transform: uppercase;
    vertical-align: middle;
}

.kp-badge-admin {
    background: #f59e0b;
    color: #1c1917;
}

.kp-badge-platform {
    background: #6366f1;
    color: #fff;
}

.kp-badge-version {
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .65);
    border: 1px solid rgba(255, 255, 255, .1);
}

/* ─── Navbar avatar ─────────────────────────────────────────────────────────── */
.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--avh-orange);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .02em;
}

.werkzaamheden-keuze:checked {
    background-color: var(--avh-orange);
    border-color: var(--avh-orange);
}

.werkzaamheden-keuze:checked+.form-check-label {
    color: var(--avh-orange);
    font-weight: 600;
}

.omschrijving-lijst {
    margin: .35rem 0 0 1.2rem;
    padding: 0;
}

.omschrijving-lijst li {
    margin: .1rem 0;
    font-weight: 600;
    color: var(--avh-orange);
}

/* ─── Rich text ──────────────────────────────────────────────────────────────── */
.rich-text-content {
    line-height: 1.65;
    font-size: .9rem;
}

.rich-text-content>*:first-child {
    margin-top: 0;
}

.rich-text-content>*:last-child {
    margin-bottom: 0;
}

.rich-text-content p,
.rich-text-content blockquote,
.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3 {
    margin: 0 0 .75rem;
}

.rich-text-content ul,
.rich-text-content ol {
    margin: 0 0 .75rem 1.3rem;
    padding: 0;
}

/* Tailwind preflight (tailadmin.css) zet lijsten, links en alinea's plat.
   Class-selectors winnen van preflight's element-selectors, ongeacht laadvolgorde. */
.rich-text-content ul,
.rt-message-content ul {
    list-style: disc;
}

.rich-text-content ol,
.rt-message-content ol {
    list-style: decimal;
}

.rt-message-content ul,
.rt-message-content ol {
    margin: 0 0 .75rem 1.3rem;
    padding: 0;
}

.rt-message-content {
    overflow-wrap: anywhere;
}

.kp-page-body--portaal a:not([class]),
.kp-page-body--portaal .breadcrumb-item a {
    color: var(--bs-link-color);
}

.kp-page-body--portaal a:not([class]):hover {
    text-decoration: underline;
}

.rich-text-content li {
    margin: .2rem 0;
}

.rich-text-content blockquote {
    border-left: 3px solid var(--avh-orange);
    padding: .6rem .85rem;
    color: var(--avh-muted);
    background: var(--avh-orange-subtle);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0 0 .75rem;
}

/* ─── WYSIWYG editor ─────────────────────────────────────────────────────────── */
.workorder-editor {
    border: 1px solid var(--avh-border-strong);
    border-radius: var(--radius-md);
    background: var(--avh-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.workorder-editor:focus-within {
    border-color: var(--avh-orange);
    box-shadow: 0 0 0 .2rem rgba(255, 105, 0, .15);
}

.workorder-editor .ql-toolbar.ql-snow {
    border: 0;
    border-bottom: 1px solid var(--avh-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--avh-surface-raised);
    padding: .45rem .6rem;
}

.workorder-editor .ql-container.ql-snow {
    border: 0;
    min-height: 180px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.workorder-editor.workorder-editor--compact .ql-container.ql-snow {
    min-height: 110px;
}

.workorder-editor .ql-editor {
    font-family: 'Inter', 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
}

.workorder-editor.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .12);
}

/* ─── Alerts ─────────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-md);
    border-width: 1px;
    border-left-width: 3px;
    font-size: .86rem;
    padding: .8rem 1rem;
}

.alert-danger {
    border-color: #fca5a5;
    border-left-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

.alert-success {
    border-color: #86efac;
    border-left-color: #22c55e;
    background: #f0fdf4;
    color: #14532d;
}

.alert-warning {
    border-color: #fcd34d;
    border-left-color: #f59e0b;
    background: #fffbeb;
    color: #78350f;
}

.alert-info {
    border-color: #a5f3fc;
    border-left-color: #0ea5e9;
    background: #f0fdfe;
    color: #164e63;
}

.alert-light {
    border-color: var(--avh-border);
    border-left-color: var(--avh-border-strong);
    background: var(--avh-surface-raised);
    color: var(--avh-text-secondary);
}

/* ─── Modal ──────────────────────────────────────────────────────────────────── */
.modal-content {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.modal-header {
    background: var(--avh-surface-raised);
    border-bottom: 1px solid var(--avh-border);
    padding: 1rem 1.35rem;
}

.modal-header .modal-title {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
}

.modal-body {
    padding: 1.35rem;
}

.modal-footer {
    background: var(--avh-surface-raised);
    border-top: 1px solid var(--avh-border);
    padding: .85rem 1.35rem;
    gap: .5rem;
}

/* ─── Nav tabs ───────────────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid var(--avh-border);
    gap: .1rem;
}

.nav-tabs .nav-link {
    font-weight: 500;
    font-size: .84rem;
    color: var(--avh-muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .6rem .85rem;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-tabs .nav-link:hover {
    color: var(--avh-text);
    border-bottom-color: var(--avh-border-strong);
}

.nav-tabs .nav-link.active {
    color: var(--avh-orange);
    font-weight: 600;
    border-bottom-color: var(--avh-orange);
    background: transparent;
}

/* ─── Dropdown ───────────────────────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--avh-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .4rem;
    font-size: .875rem;
    animation: kp-fadein .15s ease both;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: .5rem .8rem;
    font-weight: 500;
    color: var(--avh-text);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--avh-surface-raised);
    color: var(--avh-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--avh-orange-light);
    color: var(--avh-orange);
}

.dropdown-divider {
    border-color: var(--avh-border);
    margin: .35rem .4rem;
}

/* ─── Pagination ─────────────────────────────────────────────────────────────── */
.pagination {
    gap: .15rem;
}

.page-link {
    border-radius: var(--radius-sm) !important;
    border-color: var(--avh-border);
    color: var(--avh-text-secondary);
    font-size: .8rem;
    font-weight: 500;
    padding: .38rem .7rem;
    transition: all var(--transition-fast);
}

.page-link:hover {
    background: var(--avh-surface-raised);
    border-color: var(--avh-border-strong);
    color: var(--avh-text);
}

.page-item.active .page-link {
    background: var(--avh-orange);
    border-color: var(--avh-orange);
    box-shadow: 0 2px 6px rgba(255, 105, 0, .25);
    color: #fff;
}

/* ─── List groups ────────────────────────────────────────────────────────────── */
.list-group-item {
    font-size: .875rem;
    border-color: var(--avh-border);
    padding: .7rem 1rem;
}

.list-group-item:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.list-group-item:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.list-group-item:only-child {
    border-radius: var(--radius-lg);
}

.list-group-item-action:hover {
    background: rgba(255, 105, 0, .04);
    color: var(--avh-text);
}

/* ─── Feature-kaarten ────────────────────────────────────────────────────────── */
.feat-card {
    background: var(--avh-surface);
    border: 1px solid var(--avh-border);
    border-radius: var(--radius-md);
    padding: .9rem 1rem;
    display: flex !important;
    align-items: center;
    gap: .85rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.feat-card:hover {
    border-color: var(--avh-border-strong);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
}

.feat-card:has(input:checked) {
    border-color: var(--avh-orange);
    background: var(--avh-orange-subtle);
    box-shadow: 0 0 0 1px rgba(255, 105, 0, .12);
}

.feat-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--avh-surface-raised);
    color: var(--avh-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.feat-card:has(input:checked) .feat-icon {
    background: var(--avh-orange);
    color: #fff;
}

.feat-card .form-check-input {
    width: 2.25em;
    height: 1.2em;
    cursor: pointer;
}

.inst-save-bar {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--avh-border);
    padding: .75rem 1.5rem;
    z-index: 1020;
}

/* ─── Functies sidebar-nav ────────────────────────────────────────────────── */
.ft-sidebar-nav {
    border-right: 1px solid var(--avh-border);
    padding: 1.1rem .75rem 1.1rem .9rem;
    background: var(--avh-surface-raised);
    min-height: 380px;
}

.ft-nav-pill {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    color: var(--avh-text-secondary);
    font-size: .84rem;
    font-weight: 500;
}

.ft-nav-pill:hover {
    background: rgba(0, 0, 0, .04);
    color: var(--avh-text);
}

.ft-nav-pill.active {
    background: var(--avh-orange-light);
    color: var(--avh-orange);
    font-weight: 600;
}

.ft-nav-dot {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.ft-content {
    padding: 1.35rem 1.65rem;
}

.ft-pane-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--avh-border);
    margin-bottom: 1.35rem;
}

.ft-pane-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
}

.ft-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--avh-muted);
    margin-bottom: .5rem;
    margin-top: 1.25rem;
}

.ft-label:first-child {
    margin-top: 0;
}

/* ─── Progress ───────────────────────────────────────────────────────────────── */
.progress {
    border-radius: 9999px;
    background: var(--avh-border);
    height: 6px;
}

.progress-bar {
    background: var(--avh-orange);
    border-radius: 9999px;
}

/* ─── Tooltips ───────────────────────────────────────────────────────────────── */
.tooltip-inner {
    border-radius: var(--radius-sm);
    font-size: .78rem;
    background: #1a1d23;
    padding: .35rem .65rem;
}

/* ─── Login pagina ───────────────────────────────────────────────────────────── */
.login-shell {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
}

.login-shell::before,
.login-shell::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
}

.login-shell::before {
    width: 32rem;
    height: 32rem;
    top: -12rem;
    right: -10rem;
    background: radial-gradient(circle, rgba(255, 105, 0, .35) 0%, rgba(255, 105, 0, 0) 70%);
}

.login-shell::after {
    width: 26rem;
    height: 26rem;
    bottom: -10rem;
    left: -8rem;
    background: radial-gradient(circle, rgba(59, 130, 246, .28) 0%, rgba(59, 130, 246, 0) 70%);
}

.login-shell>* {
    position: relative;
    z-index: 1;
}

@keyframes kp-login-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, .06);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, #f7f8fb 100%);
    backdrop-filter: blur(2px);
    animation: kp-login-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

/* Moderne inputvelden met icoon in het veld i.p.v. los input-group-vak */
.login-field {
    position: relative;
}

.login-field .login-field-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--avh-muted);
    font-size: .95rem;
    pointer-events: none;
    transition: color var(--transition-fast);
    z-index: 2;
}

.login-field input.form-control {
    padding-left: 2.5rem;
    border-radius: var(--radius-md);
}

.login-field:focus-within .login-field-icon {
    color: var(--avh-orange);
}

.login-submit-btn {
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.login-submit-btn:hover {
    transform: translateY(-1px);
}

.login-card--passkey-focus {
    box-shadow: 0 26px 60px rgba(7, 10, 16, .4), 0 12px 28px rgba(255, 105, 0, .16);
}

.login-header {
    background: linear-gradient(135deg, var(--avh-dark) 0%, var(--avh-dark-mid) 100%);
    padding: 2rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.login-header img {
    height: 48px;
    width: auto;
    max-width: 100%;
    filter: brightness(0) invert(1);
}

.login-title {
    color: rgba(255, 255, 255, .5);
    font-size: .75rem;
    font-weight: 600;
    margin-top: .75rem;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.login-body {
    padding: 2rem;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 105, 0, .07) 0%, rgba(255, 105, 0, 0) 55%),
        radial-gradient(120% 80% at 0% 100%, rgba(30, 35, 40, .05) 0%, rgba(30, 35, 40, 0) 60%),
        var(--avh-surface);
}

body.login-page.passkey-supported {
    background:
        radial-gradient(45rem 20rem at 85% -5%, rgba(255, 105, 0, .2) 0%, rgba(255, 105, 0, 0) 60%),
        radial-gradient(35rem 15rem at -10% 110%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 65%),
        linear-gradient(135deg, var(--avh-dark) 0%, var(--avh-dark-mid) 100%);
}

.passkey-direct-panel {
    border: 1px solid rgba(255, 105, 0, .35);
    border-radius: var(--radius-md);
    padding: .9rem;
    background: linear-gradient(160deg, rgba(255, 105, 0, .12) 0%, rgba(255, 105, 0, .04) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 20px rgba(255, 105, 0, .08);
    text-align: left;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.passkey-direct-panel.is-active {
    border-color: rgba(255, 105, 0, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 28px rgba(255, 105, 0, .18);
    transform: translateY(-1px);
}

.passkey-direct-panel.is-prompting {
    animation: passkeyPulse 1.35s ease-in-out infinite;
}

@keyframes passkeyPulse {
    0% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 28px rgba(255, 105, 0, .16);
    }

    50% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 16px 34px rgba(255, 105, 0, .24);
    }

    100% {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 28px rgba(255, 105, 0, .16);
    }
}

.passkey-direct-title {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9a4100;
    margin-bottom: .2rem;
}

.passkey-direct-chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    background: rgba(255, 105, 0, .18);
    color: #8f3d00;
    font-size: .63rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 900;
    padding: .2rem .5rem;
    border: 1px solid rgba(255, 105, 0, .28);
}

.passkey-direct-subtitle {
    font-size: .78rem;
    color: #7a5b46;
    margin-bottom: .65rem;
    line-height: 1.35;
}

#passkey-login-btn {
    border: 1px solid rgba(255, 105, 0, .78);
    background: linear-gradient(180deg, #ff8a1f 0%, #ff6900 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(255, 105, 0, .24);
}

#passkey-login-btn:hover,
#passkey-login-btn:focus-visible {
    border-color: #ff8a1f;
    background: linear-gradient(180deg, #ff9b3f 0%, #ff7a14 100%);
    box-shadow: 0 0 0 .2rem rgba(255, 105, 0, .22), 0 14px 28px rgba(255, 105, 0, .3);
}

#passkey-login-btn.is-loading {
    opacity: .82;
}

.passkey-login-status {
    color: #7a5b46;
    line-height: 1.35;
    min-height: 1.2rem;
}

.passkey-login-status.is-info {
    color: #8f3d00;
}

.passkey-login-status.is-success {
    color: #157347;
}

.passkey-login-status.is-danger {
    color: #b42318;
}

/* ─── Dark mode toggle ───────────────────────────────────────────────────────── */
.kp-darkmode-btn {
    background: none;
    border: none;
    padding: .45rem .55rem;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .65);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.kp-darkmode-btn:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.dark-mode-toggle {
    cursor: pointer;
    padding: .45rem .5rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    line-height: 1;
}

.dark-mode-toggle:hover {
    background: rgba(255, 127, 31, .1);
}

/* ─── Mobiel ─────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .container {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .stat-number {
        font-size: 1.35rem;
    }

    .table-responsive {
        font-size: .82rem;
    }

    h1.h3 {
        font-size: 1.05rem;
    }

    .kp-page-wrap {
        padding-top: .25rem;
        padding-bottom: 1.25rem;
    }

    .card-body {
        padding: 1rem;
    }

    .kp-navbar .navbar-collapse {
        margin-top: .5rem;
        padding: .75rem;
        border-radius: var(--radius-lg);
        background: rgba(18, 24, 32, .97);
        box-shadow: var(--shadow-lg);
        border: 1px solid rgba(255, 255, 255, .06);
    }

    .kp-navbar .navbar-nav {
        gap: .2rem !important;
    }

    .kp-navbar .navbar-brand {
        max-width: calc(100% - 64px);
    }

    .kp-navbar-brandtitle {
        font-size: .9rem;
    }

    .kp-navbar-brandmeta {
        gap: .2rem;
    }

    .kp-navbar-userbar {
        justify-content: flex-start;
        width: 100%;
        margin-top: .45rem;
    }

    .kp-admin-navbar-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: .45rem;
    }

    .workorder-bulk-toolbar {
        top: .5rem;
    }

    .kp-detail-hero__meta {
        gap: .3rem;
    }

    .kp-detail-pill {
        width: 100%;
        justify-content: flex-start;
    }

    .modal-content {
        border-radius: var(--radius-lg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════ DARK MODE ════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════ */

:root.dark-mode {
    --avh-dark: #e2e8f0;
    --avh-orange: #ff7f1f;
    --avh-orange-hover: #ff8d33;
    --avh-orange-light: rgba(255, 127, 31, .12);
    --avh-orange-subtle: rgba(255, 127, 31, .06);
    --avh-text: #e2e8f0;
    --avh-text-secondary: #94a3b8;
    --avh-muted: #64748b;
    --avh-border: #334155;
    --avh-border-strong: #475569;
    --avh-bg: #0f172a;
    --avh-surface: #1e293b;
    --avh-surface-raised: #162032;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .28);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, .32);
    --shadow-md: 0 6px 14px rgba(0, 0, 0, .38);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, .44);
    --shadow-xl: 0 24px 52px rgba(0, 0, 0, .52);
    --bs-body-bg: #0f172a;
    --bs-body-color: #e2e8f0;
    --bs-secondary-bg: #1e293b;
    --bs-tertiary-bg: #162032;
    --bs-card-bg: #1e293b;
}

:root.dark-mode body {
    background-color: #0f172a;
    color: #e2e8f0;
}

:root.dark-mode .navbar,
:root.dark-mode .navbar-dark {
    border-bottom: 1px solid #334155;
}

:root.dark-mode .card {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

:root.dark-mode .card-header {
    background: #162032;
    border-bottom-color: #334155;
    color: #94a3b8;
}

:root.dark-mode .card-body {
    background: #1e293b;
}

:root.dark-mode .card-footer {
    background: #162032;
    border-top-color: #334155;
}

:root.dark-mode .list-group-item {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

:root.dark-mode .list-group-item a {
    color: #60a5fa;
}

:root.dark-mode .list-group-item a:hover {
    color: #93c5fd;
}

:root.dark-mode .list-group-item-action:hover {
    background: rgba(255, 127, 31, .07);
    color: #e2e8f0;
}

:root.dark-mode .form-control,
:root.dark-mode .form-select,
:root.dark-mode .form-control-plaintext {
    background: #162032;
    border-color: #334155;
    color: #e2e8f0;
}

:root.dark-mode .form-control:focus,
:root.dark-mode .form-select:focus {
    background: #1e293b;
    border-color: #ff7f1f;
    color: #e2e8f0;
    box-shadow: 0 0 0 .2rem rgba(255, 127, 31, .2);
}

:root.dark-mode .form-control::placeholder {
    color: #475569;
}

:root.dark-mode textarea.form-control {
    background: #162032;
    color: #e2e8f0;
}

:root.dark-mode .input-group-text {
    background: #162032;
    border-color: #334155;
    color: #64748b;
}

:root.dark-mode table {
    color: #e2e8f0;
}

:root.dark-mode .table {
    --bs-table-color: #e2e8f0;
    --bs-table-bg: #1e293b;
    --bs-table-border-color: #334155;
    --bs-table-hover-bg: rgba(255, 127, 31, .06);
    --bs-table-striped-bg: #162032;
}

:root.dark-mode .table thead th {
    background: #162032;
    color: #64748b;
    border-bottom-color: #334155;
}

:root.dark-mode .table-bordered {
    border-color: #334155;
}

:root.dark-mode thead {
    background: #162032;
    color: #94a3b8;
}

:root.dark-mode .badge {
    --bs-badge-bg: #334155;
    --bs-badge-color: #e2e8f0;
}

:root.dark-mode .btn-outline-secondary {
    --bs-btn-color: #e2e8f0;
    --bs-btn-border-color: #475569;
}

:root.dark-mode .btn-outline-secondary:hover {
    --bs-btn-bg: #334155;
    --bs-btn-border-color: #475569;
}

:root.dark-mode .alert {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

:root.dark-mode .alert-danger {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .3);
    color: #fca5a5;
}

:root.dark-mode .alert-success {
    background: rgba(34, 197, 94, .10);
    border-color: rgba(34, 197, 94, .3);
    color: #86efac;
}

:root.dark-mode .alert-warning {
    background: rgba(234, 179, 8, .10);
    border-color: rgba(234, 179, 8, .3);
    color: #fde68a;
}

:root.dark-mode .alert-info {
    background: rgba(14, 165, 233, .10);
    border-color: rgba(14, 165, 233, .3);
    color: #7dd3fc;
}

:root.dark-mode .alert-light {
    background: #162032;
    border-color: #334155;
    color: #94a3b8;
}

:root.dark-mode .modal-content {
    background: #1e293b;
    border-color: #334155;
}

:root.dark-mode .modal-header {
    background: #162032;
    border-bottom-color: #334155;
    color: #e2e8f0;
}

:root.dark-mode .modal-body {
    background: #1e293b;
    color: #e2e8f0;
}

:root.dark-mode .modal-footer {
    background: #162032;
    border-top-color: #334155;
}

:root.dark-mode .btn-close {
    filter: invert(1);
}

:root.dark-mode .nav-tabs {
    border-bottom-color: #334155;
}

:root.dark-mode .nav-tabs .nav-link {
    color: #64748b;
}

:root.dark-mode .nav-tabs .nav-link:hover {
    color: #94a3b8;
    border-bottom-color: #475569;
}

:root.dark-mode .nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: #ff7f1f;
    color: #ff7f1f;
}

:root.dark-mode .dropdown-menu {
    background: #1e293b;
    border-color: #334155;
}

:root.dark-mode .dropdown-item {
    color: #e2e8f0;
}

:root.dark-mode .dropdown-item:hover,
:root.dark-mode .dropdown-item:focus {
    background: rgba(255, 127, 31, .08);
    color: #ff7f1f;
}

:root.dark-mode .dropdown-divider {
    border-color: #334155;
}

:root.dark-mode .pagination {
    --bs-pagination-bg: #1e293b;
    --bs-pagination-border-color: #334155;
}

:root.dark-mode .page-link {
    background: #1e293b;
    border-color: #334155;
    color: #60a5fa;
}

:root.dark-mode .page-link:hover {
    background: #162032;
    border-color: #475569;
    color: #93c5fd;
}

:root.dark-mode .page-item.active .page-link {
    background: #ff7f1f;
    border-color: #ff7f1f;
    color: #fff;
}

:root.dark-mode .feat-card {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

:root.dark-mode .feat-card:hover {
    border-color: #475569;
}

:root.dark-mode .feat-card:has(input:checked) {
    background: rgba(255, 127, 31, .08);
    border-color: #ff7f1f;
}

:root.dark-mode .feat-icon {
    background: #162032;
    color: #64748b;
}

:root.dark-mode .admin-quicklink-card {
    background: #1e293b;
    border-color: #334155;
}

:root.dark-mode .admin-quicklink-card:hover {
    border-color: rgba(255, 127, 31, .35);
}

:root.dark-mode .ft-sidebar-nav {
    background: #162032;
    border-right-color: #334155;
}

:root.dark-mode .ft-nav-pill {
    color: #64748b;
}

:root.dark-mode .ft-nav-pill:hover {
    background: rgba(255, 255, 255, .04);
    color: #94a3b8;
}

:root.dark-mode .ft-nav-pill.active {
    background: rgba(255, 127, 31, .12);
    color: #ff7f1f;
}

:root.dark-mode .ft-pane-header {
    border-bottom-color: #334155;
}

:root.dark-mode code {
    color: #60a5fa;
    background: #162032;
    border-radius: var(--radius-sm);
    padding: .2rem .4rem;
}

:root.dark-mode pre {
    background: #162032;
    border-color: #334155;
    color: #e2e8f0;
}

:root.dark-mode .workorder-overview-toolbar {
    background: #1e293b;
    border-color: #334155;
}

:root.dark-mode .workorder-empty-state {
    border-color: #334155;
}

:root.dark-mode .kp-detail-pill {
    background: rgba(255, 255, 255, .05);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, .06);
}

:root.dark-mode .kp-detail-pill--accent {
    background: rgba(255, 127, 31, .12);
    color: #ff7f1f;
    border-color: rgba(255, 127, 31, .2);
}

:root.dark-mode .text-muted,
:root.dark-mode .text-secondary {
    color: #64748b !important;
}

/* Bootstrap primary-subtle (bv. reseller-badge) in dark mode */
:root.dark-mode .bg-primary-subtle {
    background-color: rgba(99, 102, 241, .15) !important;
}

:root.dark-mode .text-primary {
    color: #818cf8 !important;
}

:root.dark-mode .border-primary-subtle {
    border-color: rgba(99, 102, 241, .3) !important;
}

:root.dark-mode .kp-icon-box {
    background: rgba(255, 127, 31, .12);
    color: #ff7f1f;
}

:root.dark-mode .kp-icon-box--muted {
    background: #162032;
    color: #475569;
}

:root.dark-mode .kp-icon-box--success {
    background: rgba(34, 197, 94, .10);
    color: #4ade80;
}

:root.dark-mode .kp-icon-box--danger {
    background: rgba(239, 68, 68, .10);
    color: #f87171;
}

:root.dark-mode .kp-icon-box--info {
    background: rgba(14, 165, 233, .10);
    color: #38bdf8;
}

:root.dark-mode .kp-icon-box--warning {
    background: rgba(245, 158, 11, .10);
    color: #fbbf24;
}

:root.dark-mode .kp-module-badge {
    background: #334155;
    color: #64748b;
}

:root.dark-mode .kp-secondary-module-card {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

:root.dark-mode .kp-secondary-module-card:hover {
    border-color: rgba(255, 127, 31, .35);
}

:root.dark-mode .kp-secondary-module-card__icon {
    background: rgba(255, 127, 31, .12);
    color: #ff7f1f;
}

:root.dark-mode .kp-secondary-module-card__title {
    color: #e2e8f0;
}

:root.dark-mode .alert-danger {
    border-left-color: #f87171;
}

:root.dark-mode .alert-success {
    border-left-color: #4ade80;
}

:root.dark-mode .alert-warning {
    border-left-color: #fbbf24;
}

:root.dark-mode .alert-info {
    border-left-color: #38bdf8;
}

:root.dark-mode .alert-light {
    border-left-color: #475569;
}

:root.dark-mode .progress {
    background: #334155;
}

:root.dark-mode .inst-save-bar {
    background: rgba(20, 30, 45, .95);
    border-top-color: #334155;
}

/* table-light headers in dark mode */
:root.dark-mode .table-light,
:root.dark-mode .table-light>th,
:root.dark-mode .table-light>td,
:root.dark-mode thead.table-light th {
    background: #162032 !important;
    color: #64748b !important;
    border-color: #334155 !important;
}

/* bg-light / bg-body-tertiary in dark mode */
:root.dark-mode .bg-light {
    background-color: #162032 !important;
    color: #94a3b8 !important;
}

:root.dark-mode .bg-body-tertiary {
    background-color: #162032 !important;
    color: #94a3b8 !important;
}

/* text-bg-light badge in dark mode */
:root.dark-mode .text-bg-light {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}

/* Borders in dark mode */
:root.dark-mode .border {
    border-color: #334155 !important;
}

:root.dark-mode .border-top,
:root.dark-mode .border-bottom,
:root.dark-mode .border-start,
:root.dark-mode .border-end {
    border-color: #334155 !important;
}

/* White backgrounds in dark mode */
:root.dark-mode [style*="background:#fff"],
:root.dark-mode [style*="background: #fff"],
:root.dark-mode [style*="background:white"],
:root.dark-mode [style*="background: white"],
:root.dark-mode .bg-white {
    background-color: #1e293b !important;
}

/* ─── Form small variants ─────────────────────────────────────────────────── */
.form-control-sm,
.form-select-sm {
    font-size: .8rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-sm);
}

/* ─── Consistente leeg/empty states ─────────────────────────────────────────── */
.kp-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--avh-muted);
}

.kp-empty-state-icon {
    font-size: 2.5rem;
    opacity: .45;
    display: block;
    margin-bottom: .75rem;
    line-height: 1;
}

.kp-empty-state-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--avh-text-secondary);
    margin-bottom: .35rem;
}

.kp-empty-state-text {
    font-size: .85rem;
    margin-bottom: 1.25rem;
}

/* ─── Consistente page-header ────────────────────────────────────────────────── */
/* Gebruik .kp-page-header op de wrapper-div van de pagina-header */
.kp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.kp-page-header__title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin: 0;
}

.kp-page-header__meta {
    font-size: .8rem;
    color: var(--avh-muted);
    margin-top: .15rem;
}

/* ─── Icoonbox (universeel icoonkader voor module-kaarten en lijsten) ─────────── */
.kp-icon-box {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: var(--avh-orange-light);
    color: var(--avh-orange);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.kp-icon-box--sm {
    width: 36px;
    height: 36px;
    font-size: .95rem;
    border-radius: var(--radius-sm);
}

.kp-icon-box--lg {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
}

.kp-icon-box--muted {
    background: var(--avh-surface-raised);
    color: var(--avh-muted);
}

.kp-icon-box--success {
    background: rgba(34, 197, 94, .10);
    color: #16a34a;
}

.kp-icon-box--danger {
    background: rgba(239, 68, 68, .10);
    color: #dc2626;
}

.kp-icon-box--info {
    background: rgba(14, 165, 233, .10);
    color: #0284c7;
}

.kp-icon-box--warning {
    background: rgba(245, 158, 11, .10);
    color: #d97706;
}

/* ─── Module badge (vervangt text-bg-light dat dark mode breekt) ─────────────── */
.kp-module-badge {
    display: inline-flex;
    align-items: center;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .28em .65em;
    border-radius: var(--radius-full);
    background: var(--avh-border);
    color: var(--avh-muted);
    border: 1px solid transparent;
}

/* ─── Secundaire module-link kaarten (dashboard overige modules) ─────────────── */
.kp-secondary-module-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--avh-border);
    background: var(--avh-surface);
    height: 100%;
    color: var(--avh-text);
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.kp-secondary-module-card:hover {
    border-color: rgba(255, 105, 0, .3);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
}

.kp-secondary-module-card__icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: var(--avh-orange-light);
    color: var(--avh-orange);
    flex-shrink: 0;
}

.kp-secondary-module-card__body {
    min-width: 0;
}

.kp-secondary-module-card__title {
    font-size: .86rem;
    font-weight: 600;
    color: var(--avh-text);
    margin-bottom: .2rem;
    line-height: 1.3;
}

.kp-secondary-module-card__desc {
    font-size: .78rem;
    color: var(--avh-muted);
    margin: 0;
    line-height: 1.4;
}

/* ─── Afdrukken ─────────────────────────────────────────────────────────────── */
@page {
    margin: 0;
}

@media print {
    body {
        margin: 12mm 14mm;
        background: #fff !important;
        color: #000 !important;
    }

    .navbar,
    .footer,
    .btn,
    .no-print {
        display: none !important;
    }
}

/* ─── Preset theme swatches (admin branding) ─────────────────────────────── */
.kp-theme-swatch {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .75rem .4rem .5rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--avh-border);
    background: var(--avh-surface);
    font-size: .78rem;
    font-weight: 500;
    color: var(--avh-text);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.kp-theme-swatch:hover {
    border-color: var(--avh-border-strong);
    box-shadow: var(--shadow-sm);
}

.kp-theme-swatch--active {
    border-color: var(--avh-orange);
    box-shadow: 0 0 0 2px var(--avh-orange-light);
}

.kp-theme-swatch__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(0, 0, 0, .12);
}

.kp-theme-swatch__dot--sm {
    width: 10px;
    height: 10px;
    margin-left: -6px;
    border-color: rgba(0, 0, 0, .15);
}

.kp-theme-swatch__label {
    line-height: 1;
}

:root.dark-mode .kp-theme-swatch {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

:root.dark-mode .kp-theme-swatch:hover {
    border-color: #475569;
}

:root.dark-mode .kp-theme-swatch--active {
    border-color: var(--avh-orange);
}

/* ─── Klantentabel ───────────────────────────────────────────────────────────── */
.kp-klanten-table thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--avh-muted);
    background: var(--avh-surface-raised);
    border-bottom: 1px solid var(--avh-border);
    padding: .6rem .75rem;
    white-space: nowrap;
}

.kp-klanten-table tbody tr {
    transition: background var(--transition-fast);
}

.kp-klanten-table tbody td {
    padding: .55rem .75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--avh-border);
}

.kp-klanten-table tbody tr:last-child td {
    border-bottom: none;
}

/* InvoiceNinja gekoppeld-stip */
.kp-ij-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    cursor: help;
}

/* Compacte actieknopjes */
.kp-action-btn {
    padding: .2rem .42rem;
    font-size: .8rem;
    line-height: 1.4;
    border-radius: var(--radius-sm);
}

.dropdown-toggle-no-caret::after {
    display: none !important;
}

:root.dark-mode .kp-klanten-table thead th {
    background: #1a2234;
    color: #64748b;
    border-bottom-color: #334155;
}

:root.dark-mode .kp-klanten-table tbody td {
    border-bottom-color: #1e293b;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════ TOAST NOTIFICATIONS ══════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.kp-toast-viewport {
    position: fixed;
    z-index: 1090;
    bottom: 1.25rem;
    right: 1.25rem;
    display: flex;
    flex-direction: column-reverse;
    gap: .6rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.kp-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: var(--avh-surface);
    border: 1px solid var(--avh-border);
    border-left: 4px solid var(--avh-orange);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .75rem .9rem;
    font-size: .875rem;
    color: var(--avh-text);
    animation: kp-toast-in .2s ease-out;
}

.kp-toast.is-leaving {
    animation: kp-toast-out .15s ease-in forwards;
}

.kp-toast-icon {
    font-size: 1.05rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.kp-toast-message {
    flex: 1 1 auto;
    line-height: 1.4;
}

.kp-toast-close {
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
    color: var(--avh-muted);
    flex-shrink: 0;
    cursor: pointer;
}

.kp-toast-close:hover {
    color: var(--avh-text);
}

.kp-toast--danger {
    border-left-color: #dc3545;
}

.kp-toast--danger .kp-toast-icon {
    color: #dc3545;
}

.kp-toast--success {
    border-left-color: #198754;
}

.kp-toast--success .kp-toast-icon {
    color: #198754;
}

.kp-toast--warning {
    border-left-color: #ffc107;
}

.kp-toast--warning .kp-toast-icon {
    color: #b8860b;
}

.kp-toast--info {
    border-left-color: #0dcaf0;
}

.kp-toast--info .kp-toast-icon {
    color: #0dcaf0;
}

@keyframes kp-toast-in {
    from {
        opacity: 0;
        transform: translateY(.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes kp-toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(.35rem);
    }
}

:root.dark-mode .kp-toast {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

:root.dark-mode .kp-toast-close {
    color: #64748b;
}

:root.dark-mode .kp-toast-close:hover {
    color: #e2e8f0;
}
/* ─── Portaal: donkere modus voor lichte Bootstrap-utilities ─────────────────── */
:root.dark-mode .kp-page-body--portaal .bg-white:not(.badge),
:root.dark-mode .kp-page-body--portaal .bg-light:not(.badge) {
    background-color: var(--avh-surface) !important;
    color: var(--avh-text);
}

:root.dark-mode .kp-page-body--portaal .table-light,
:root.dark-mode .kp-page-body--portaal .table-light > th,
:root.dark-mode .kp-page-body--portaal .table-light > td {
    --bs-table-bg: var(--avh-surface-raised);
    --bs-table-color: var(--avh-text);
    border-color: var(--avh-border);
}

:root.dark-mode .kp-page-body--portaal .text-dark:not(.badge) {
    color: var(--avh-text) !important;
}

:root.dark-mode .kp-page-body--portaal .breadcrumb-item.active {
    color: var(--avh-text-secondary);
}