/* AtoZ Clean — Filament beheer custom styles */

:root {
    --beheer-primary: #0c2461;
    --beheer-primary-light: #1e3799;
}

.fi-sidebar-nav {
    gap: 0.15rem;
}

.fi-sidebar .fi-sidebar-item-button:hover {
    background-color: rgba(12, 36, 97, 0.08);
}

.fi-topbar nav {
    border-bottom: 1px solid rgba(12, 36, 97, 0.08);
}

.fi-logo span {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.beheer-message-view__hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #081a45 0%, #0c2461 52%, #1e3799 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(12, 36, 97, 0.18);
}

.beheer-message-view__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.beheer-message-view__badge--quote { background: rgba(251, 191, 36, 0.22); }
.beheer-message-view__badge--callback { background: rgba(56, 189, 248, 0.22); }

.beheer-message-view__name {
    margin: 0.75rem 0 0.35rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
}

.beheer-message-view__meta {
    margin: 0;
    opacity: 0.88;
    font-size: 0.95rem;
}

.beheer-message-view__hero-side {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

.beheer-message-view__status,
.beheer-message-view__read {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.beheer-message-view__status--open {
    background: rgba(251, 191, 36, 0.18);
    color: #fde68a;
}

.beheer-message-view__status--handled {
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
}

.beheer-message-view__read {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.beheer-message-view__read--yes {
    background: rgba(34, 197, 94, 0.16);
}

.beheer-message-view__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.beheer-message-view__card {
    background: #fff;
    border: 1px solid rgba(12, 36, 97, 0.08);
    border-radius: 1rem;
    padding: 1.25rem 1.35rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.dark .beheer-message-view__card {
    background: rgb(17 24 39);
    border-color: rgba(255, 255, 255, 0.08);
}

.beheer-message-view__card-title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--beheer-primary);
}

.dark .beheer-message-view__card-title {
    color: #dbeafe;
}

.beheer-message-view__list {
    display: grid;
    gap: 0.85rem;
    margin: 0;
}

.beheer-message-view__list dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.2rem;
}

.beheer-message-view__list dd {
    margin: 0;
    font-size: 0.98rem;
    color: #0f172a;
    word-break: break-word;
}

.dark .beheer-message-view__list dd {
    color: #e2e8f0;
}

.beheer-message-view__list a {
    color: var(--beheer-primary);
    text-decoration: none;
}

.beheer-message-view__list a:hover {
    text-decoration: underline;
}

.beheer-message-view__card--message {
    grid-column: 1 / -1;
}

.beheer-message-view__message-body {
    padding: 1rem 1.1rem;
    border-radius: 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    line-height: 1.65;
    white-space: pre-wrap;
}

.dark .beheer-message-view__message-body {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

@media (max-width: 900px) {
    .beheer-message-view__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Cursor: geen tekst-icoon overal — alleen bij typen
   ============================================ */
.fi-simple-layout,
.fi-simple-page,
.fi-simple-main,
.fi-layout,
.fi-main-ctn,
.fi-sidebar,
.fi-topbar {
    cursor: default;
}

.fi-simple-layout *,
.fi-simple-page *,
.fi-simple-main *,
.fi-layout *,
.fi-main-ctn *,
.fi-sidebar *,
.fi-topbar * {
    cursor: default;
}

/* Interactieve elementen behouden de handcursor */
.fi-simple-layout a,
.fi-simple-page a,
.fi-simple-main a,
.fi-layout a,
.fi-main-ctn a,
.fi-sidebar a,
.fi-topbar a,
.fi-simple-layout button,
.fi-simple-page button,
.fi-simple-main button,
.fi-layout button,
.fi-main-ctn button,
.fi-sidebar button,
.fi-topbar button,
.fi-simple-layout [role="button"],
.fi-simple-page [role="button"],
.fi-simple-main [role="button"],
.fi-layout [role="button"],
.fi-main-ctn [role="button"],
.fi-sidebar [role="button"],
.fi-topbar [role="button"],
.fi-simple-layout [type="checkbox"],
.fi-simple-page [type="checkbox"],
.fi-simple-main [type="checkbox"],
.fi-layout [type="checkbox"],
.fi-main-ctn [type="checkbox"],
.fi-sidebar [type="checkbox"],
.fi-topbar [type="checkbox"],
.fi-simple-layout [type="radio"],
.fi-simple-page [type="radio"],
.fi-simple-main [type="radio"],
.fi-layout [type="radio"],
.fi-main-ctn [type="radio"],
.fi-sidebar [type="radio"],
.fi-topbar [type="radio"],
.fi-simple-layout [type="range"],
.fi-simple-page [type="range"],
.fi-simple-main [type="range"],
.fi-layout [type="range"],
.fi-main-ctn [type="range"],
.fi-sidebar [type="range"],
.fi-topbar [type="range"] {
    cursor: pointer;
}

/* Typen: tekstcursor alleen hier */
.fi-simple-layout input:not([type]),
.fi-simple-layout input[type="text"],
.fi-simple-layout input[type="email"],
.fi-simple-layout input[type="password"],
.fi-simple-layout input[type="search"],
.fi-simple-layout input[type="number"],
.fi-simple-layout input[type="tel"],
.fi-simple-layout input[type="url"],
.fi-simple-layout textarea,
.fi-simple-layout [contenteditable="true"],
.fi-layout input:not([type]),
.fi-layout input[type="text"],
.fi-layout input[type="email"],
.fi-layout input[type="password"],
.fi-layout input[type="search"],
.fi-layout input[type="number"],
.fi-layout input[type="tel"],
.fi-layout input[type="url"],
.fi-layout textarea,
.fi-layout [contenteditable="true"] {
    cursor: text;
}

/* ============================================
   Beheer — Login: strak & modern (aug 2026)
   ============================================ */

.fi-simple-layout {
    background:
        radial-gradient(ellipse 75% 60% at 82% -5%, rgba(37, 99, 235, 0.32), transparent 55%),
        radial-gradient(ellipse 55% 45% at 8% 105%, rgba(255, 255, 255, 0.09), transparent 55%),
        linear-gradient(150deg, #07163d 0%, #0c2461 52%, #16307a 100%);
    justify-content: center;
    padding: 1.5rem 1rem;
}

.fi-simple-main {
    width: 100%;
    max-width: 430px !important;
    margin: 0 auto !important;
    border-radius: 1.1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 2px 4px rgba(2, 8, 32, 0.06),
        0 28px 64px -24px rgba(2, 8, 32, 0.55);
    padding: 1.25rem 1.75rem !important;
}

.dark .fi-simple-main {
    background: #0d1730;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 64px -24px rgba(0, 0, 0, 0.7);
}

.fi-simple-header {
    position: relative;
    margin-bottom: 0.4rem;
    padding-bottom: 0.45rem;
}

.fi-simple-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0c2461, #2563eb);
}

.fi-simple-header .fi-logo {
    margin-bottom: 0.15rem;
}

.fi-simple-header-heading {
    font-size: 1.25rem;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    color: #0c2461 !important;
}

/* !important nodig: de basisregel hierboven gebruikt !important,
   anders wint die in donkere modus en wordt de kop onleesbaar. */
.dark .fi-simple-header-heading {
    color: #fff !important;
}

.fi-simple-header-subheading {
    color: #5c6b7f;
    font-size: 0.9rem;
    margin-top: 0.1rem;
}

.dark .fi-simple-header-subheading {
    color: rgba(255, 255, 255, 0.6);
}

.fi-simple-main .fi-form {
    gap: 0.5rem;
}

.fi-simple-main .fi-fo-component-ctn {
    gap: 0.5rem;
}

/* Invoervelden */
.fi-simple-main .fi-input-wrp {
    background: #f8fafc !important;
    border-radius: 0.65rem !important;
    min-height: 36px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.dark .fi-simple-main .fi-input-wrp {
    background: rgba(255, 255, 255, 0.07) !important;
}

.fi-simple-main .fi-input-wrp:focus-within {
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16) !important;
}

.dark .fi-simple-main .fi-input-wrp:focus-within {
    background: rgba(255, 255, 255, 0.12) !important;
}

.fi-simple-main .fi-input {
    font-size: 0.95rem;
}

/* Aanmeldknop */
.fi-simple-main .fi-btn-color-primary {
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #1e3799 0%, #0c2461 100%) !important;
    box-shadow: 0 10px 24px -10px rgba(12, 36, 97, 0.55);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fi-simple-main .fi-btn-color-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -12px rgba(12, 36, 97, 0.6);
    background: linear-gradient(135deg, #22409f 0%, #0c2461 100%) !important;
}

/* ============================================
   Beheer — Thema: strak & leesbaar (licht + donker, aug 2026)
   ============================================ */

:root {
    --beheer-primary: #0c2461;
    --beheer-primary-soft: #1e3799;
    --beheer-accent: #2563eb;
}

/* Donkere modus: helder blauw accent i.p.v. donker navy (alles goed leesbaar) */
html.dark {
    --beheer-primary: #2563eb;
    --beheer-primary-soft: #3b82f6;

    --primary-50: 239, 246, 255;
    --primary-100: 219, 234, 254;
    --primary-200: 191, 219, 254;
    --primary-300: 147, 197, 253;
    --primary-400: 96, 165, 250;
    --primary-500: 59, 130, 246;
    --primary-600: 37, 99, 235;
    --primary-700: 29, 78, 216;
    --primary-800: 30, 64, 175;
    --primary-900: 30, 58, 138;
    --primary-950: 23, 37, 84;
}

/* Logo: navy -> wit in donkere modus (zichtbaar op donkere zijbalk) */
html.dark .fi-logo {
    filter: brightness(0) invert(1);
}

/* --- Soepele thema-overgang (stabiel) --- */
.fi-body,
.fi-sidebar,
.fi-topbar nav {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* --- Zijbalk --- */
.fi-sidebar .fi-sidebar-group-label {
    color: rgb(71 85 105);
    letter-spacing: 0.02em;
}

html.dark .fi-sidebar-group-label {
    color: rgb(203 213 225);
}

.fi-sidebar-item-button {
    border-radius: 0.625rem;
    transition: background-color 0.18s ease, color 0.18s ease;
}

html.dark .fi-sidebar-item-button {
    color: rgb(203 213 225);
}

html.dark .fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
}

html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: rgba(59, 130, 246, 0.16);
    color: #fff;
}

/* --- Topbar (donker) --- */
html.dark .fi-topbar nav {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* --- Primaire knoppen: huismerk-gradient in beide thema's --- */
.fi-btn-color-primary {
    border-radius: 0.625rem;
    background: linear-gradient(135deg, var(--beheer-primary-soft) 0%, var(--beheer-primary) 100%) !important;
    box-shadow: 0 8px 20px -10px rgba(12, 36, 97, 0.5);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.fi-btn-color-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px rgba(12, 36, 97, 0.55);
    filter: brightness(1.05);
}

/* --- Koppen: iets strakker --- */
.fi-header-heading,
.fi-section-header-heading,
.fi-widget-header-heading {
    letter-spacing: -0.02em;
}

/* --- Selectie & scrollbar --- */
::selection {
    background: rgba(37, 99, 235, 0.25);
}

html.dark ::selection {
    background: rgba(96, 165, 250, 0.35);
}

.fi-sidebar::-webkit-scrollbar,
.fi-main-ctn::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.fi-sidebar::-webkit-scrollbar-thumb,
.fi-main-ctn::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

html.dark .fi-sidebar::-webkit-scrollbar-thumb,
html.dark .fi-main-ctn::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border: 2px solid transparent;
    background-clip: content-box;
}

/* ============================================
   Beheer — Dashboard & componenten: strakker (aug 2026)
   ============================================ */

/* --- Stat-kaarten: luchtig, scherpe randen, hover --- */
.fi-wi-stats-overview-stat {
    border: 1px solid rgba(12, 36, 97, 0.08);
    border-radius: 1rem !important;
    box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.25);
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.2s ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -18px rgba(12, 36, 97, 0.35);
    border-color: rgba(12, 36, 97, 0.18);
}

html.dark .fi-wi-stats-overview-stat {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.6);
}

html.dark .fi-wi-stats-overview-stat:hover {
    border-color: rgba(96, 165, 250, 0.35);
}

.fi-wi-stats-overview-stat-value {
    letter-spacing: -0.03em;
}

.fi-wi-stats-overview-stat-icon {
    border-radius: 0.75rem;
    background: rgba(12, 36, 97, 0.08);
}

html.dark .fi-wi-stats-overview-stat-icon {
    background: rgba(255, 255, 255, 0.08);
}

/* --- Snelle acties widget --- */
.beheer-quick__head {
    margin-bottom: 1rem;
}

.beheer-quick__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--beheer-primary);
}

html.dark .beheer-quick__title {
    color: #e0e7ff;
}

.beheer-quick__sub {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

html.dark .beheer-quick__sub {
    color: rgba(255, 255, 255, 0.55);
}

.beheer-quick__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
}

.beheer-quick__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(12, 36, 97, 0.08);
    background: #fff;
    text-decoration: none;
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 600;
    transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.beheer-quick__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -16px rgba(12, 36, 97, 0.35);
    border-color: rgba(12, 36, 97, 0.2);
    text-decoration: none;
}

html.dark .beheer-quick__item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
    color: #e2e8f0;
}

html.dark .beheer-quick__item:hover {
    border-color: rgba(96, 165, 250, 0.4);
}

.beheer-quick__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
}

.beheer-quick__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.beheer-quick__item--primary .beheer-quick__icon {
    background: rgba(12, 36, 97, 0.09);
    color: #0c2461;
}

html.dark .beheer-quick__item--primary .beheer-quick__icon {
    background: rgba(59, 130, 246, 0.16);
    color: #93c5fd;
}

.beheer-quick__item--warning .beheer-quick__icon {
    background: rgba(251, 191, 36, 0.16);
    color: #b45309;
}

html.dark .beheer-quick__item--warning .beheer-quick__icon {
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
}

.beheer-quick__item--neutral .beheer-quick__icon {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

html.dark .beheer-quick__item--neutral .beheer-quick__icon {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

@media (max-width: 640px) {
    .beheer-quick__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Tabellen: iets meer ademruimte, zachte hover --- */
.fi-ta-table {
    border-radius: 0.75rem;
}

.fi-ta-row {
    transition: background-color 0.15s ease;
}

.fi-ta-row:hover {
    background-color: rgba(12, 36, 97, 0.03) !important;
}

html.dark .fi-ta-row:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- Secties / kaarten --- */
.fi-section {
    border-radius: 1rem !important;
}

.fi-section-header-heading {
    font-weight: 700;
}

/* --- Badges --- */
.fi-badge {
    border-radius: 999px;
    font-weight: 600;
}

/* --- Knoppen: consistente radius --- */
.fi-btn {
    border-radius: 0.625rem;
}

/* --- Actieve zijbalk-item: subtiel huismerk-accent --- */
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: linear-gradient(90deg, rgba(12, 36, 97, 0.1), rgba(12, 36, 97, 0.05));
}

html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.06));
}

/* ============================================
   Dashboard: compact — minder scrollen (aug 2026)
   ============================================ */

/* Minder lucht boven de pagina-inhoud */
.fi-page-header {
    padding-block: 0.75rem;
}

/* Widgets dichter op elkaar */
.fi-page-content-grid {
    gap: 0.9rem !important;
}

/* --- Stat-kaarten: kleiner & 2 kolommen op mobiel --- */
.fi-wi-stats-overview {
    gap: 0.6rem !important;
}

.fi-wi-stats-overview-stat {
    padding: 0.8rem 0.9rem !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.5rem !important;
    line-height: 1.1;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.7rem !important;
    margin-top: 0.1rem !important;
}

.fi-wi-stats-overview-stat-icon {
    width: 1.9rem !important;
    height: 1.9rem !important;
    border-radius: 0.55rem !important;
}

.fi-wi-stats-overview-stat > .grid {
    gap: 0.3rem !important;
}

@media (max-width: 767px) {
    .fi-wi-stats-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fi-wi-stats-overview-stat {
        padding: 0.7rem 0.8rem !important;
    }

    .fi-wi-stats-overview-stat-description {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* --- Snelle acties: compacter (icoon links, label rechts) --- */
.beheer-quick__head {
    margin-bottom: 0.55rem;
}

.beheer-quick__title {
    font-size: 0.95rem;
}

.beheer-quick__sub {
    font-size: 0.75rem;
}

.beheer-quick__grid {
    gap: 0.45rem;
}

.beheer-quick__item {
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.65rem;
    font-size: 0.8rem;
}

.beheer-quick__icon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.beheer-quick__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}



/* ============================================
   Login: 'Terug naar de website' (aug 2026)
   ============================================ */
.beheer-login-back {
    margin-top: 0.3rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(12, 36, 97, 0.1);
}

/* Wachtwoord-vergeten: verberg de subtiele ingebouwde 'terug naar
   inloggen'-link in de subheading — onze eigen knop staat eronder. */
.beheer-pwreset-marker {
    display: none;
}

.fi-simple-page section:has(.beheer-pwreset-marker) .fi-simple-header-subheading {
    display: none;
}

.dark .beheer-login-back {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.beheer-login-back__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(12, 36, 97, 0.22);
    background: #fff;
    color: #0c2461;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.beheer-login-back__link svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.beheer-login-back__link:hover {
    background: #0c2461;
    border-color: #0c2461;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(12, 36, 97, 0.6);
}

.beheer-login-back__link:hover svg {
    transform: translateX(-3px);
}

.dark .beheer-login-back__link {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: #dbeafe;
}

.dark .beheer-login-back__link:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(37, 99, 235, 0.7);
}

/* ============================================
   Login-pagina: thema-switcher boven het formulier (aug 2026)
   ============================================ */
.fi-auth-theme-toggle-row {
    display: flex;
    justify-content: center;
    margin: -0.35rem 0 0.1rem;
}

.fi-auth-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #334155;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.fi-auth-theme-toggle:hover {
    background: #f1f5f9;
    color: #0c2461;
    border-color: rgba(15, 23, 42, 0.2);
}

.fi-auth-theme-toggle:focus-visible {
    outline: 2px solid #0c2461;
    outline-offset: 2px;
}

.fi-auth-theme-toggle:active {
    transform: scale(0.94);
}

.fi-auth-theme-toggle__icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.dark .fi-auth-theme-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
}

.dark .fi-auth-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.24);
}

.dark .fi-auth-theme-toggle:focus-visible {
    outline-color: #3b82f6;
}

/* ============================================
   Bovenbalk: status + 'Naar website' (aug 2026)
   ============================================ */
.beheer-topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: 0.25rem;
}

.beheer-topbar__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid;
    white-space: nowrap;
}

.beheer-topbar__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.beheer-topbar__status--live {
    color: #15803d;
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
}

.beheer-topbar__status--live .beheer-topbar__dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.beheer-topbar__status--onderhoud {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

.beheer-topbar__status--onderhoud .beheer-topbar__dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

html.dark .beheer-topbar__status--live {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
}

html.dark .beheer-topbar__status--onderhoud {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

.beheer-topbar__theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #334155;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.beheer-topbar__theme:hover {
    background: #f1f5f9;
    color: #0c2461;
    border-color: rgba(15, 23, 42, 0.2);
}

.beheer-topbar__theme:focus-visible {
    outline: 2px solid #0c2461;
    outline-offset: 2px;
}

.beheer-topbar__theme:active {
    transform: scale(0.94);
}

.beheer-topbar__theme-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

html.dark .beheer-topbar__theme {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
}

html.dark .beheer-topbar__theme:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.24);
}

html.dark .beheer-topbar__theme:focus-visible {
    outline-color: #3b82f6;
}

.beheer-topbar__site {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.6rem;
    background: #0c2461;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.beheer-topbar__site:hover {
    background: #16307a;
    color: #fff;
    text-decoration: none;
}

.beheer-topbar__site svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

html.dark .beheer-topbar__site {
    background: #2563eb;
}

html.dark .beheer-topbar__site:hover {
    background: #3b82f6;
}

@media (max-width: 480px) {
    .beheer-topbar {
        gap: 0.35rem;
    }

    .beheer-topbar__status {
        padding: 0.24rem 0.5rem;
        font-size: 0.7rem;
    }

    .beheer-topbar__site {
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
    }

    /* Captcha op mobiel: royale knoppen en invoerveld, vraag blijft leesbaar */
    .beheer-captcha__box {
        padding: 10px 12px;
        gap: 10px;
    }

    .beheer-captcha__question {
        font-size: 16px;
    }

    .beheer-captcha__refresh {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        flex-shrink: 0;
    }

    .beheer-captcha__refresh svg {
        width: 22px;
        height: 22px;
    }

    .beheer-captcha__input {
        font-size: 17px;
        padding: 12px 8px;
    }
}

/* ============================================
   Thema-fix: ontbrekende utilities (aug 2026)
   ============================================
   De custom beheer-views (site-optimize, system-updates) gebruiken Tailwind-
   utility-classes die niet door de geladen Filament-CSS worden gegenereerd
   (de project-Vite-build draait niet op het beheerpanel). Hier staan ze als
   expliciete regels — met dezelfde kleurvariabelen als Filament, zodat licht
   én donker thema consistent blijven.
   ============================================ */

/* --- Licht: achtergronden --- */
.bg-danger-50 { background-color: rgba(var(--danger-50), 1); }
.bg-success-50 { background-color: rgba(var(--success-50), 1); }
.bg-warning-500 { background-color: rgba(var(--warning-500), 1); }
.bg-gray-900 { background-color: rgba(var(--gray-900), 1); }

/* --- Licht: tekstkleuren --- */
.text-gray-900 { color: rgba(var(--gray-900), 1); }
.text-danger-700 { color: rgba(var(--danger-700), 1); }
.text-success-500 { color: rgba(var(--success-500), 1); }
.text-success-600 { color: rgba(var(--success-600), 1); }
.text-success-700 { color: rgba(var(--success-700), 1); }
.text-warning-500 { color: rgba(var(--warning-500), 1); }
.text-warning-600 { color: rgba(var(--warning-600), 1); }

/* --- Licht: randen & delers --- */
.border-danger-200 { border-color: rgba(var(--danger-200), 1); }
.border-success-200 { border-color: rgba(var(--success-200), 1); }
.divide-danger-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--danger-100), 1); }

/* --- Donker: achtergronden --- */
html.dark .dark\:bg-danger-950 { background-color: rgba(var(--danger-950), 1); }
html.dark .dark\:bg-success-950 { background-color: rgba(var(--success-950), 1); }

/* --- Donker: tekstkleuren --- */
html.dark .dark\:text-danger-300 { color: rgba(var(--danger-300), 1); }
html.dark .dark\:text-success-300 { color: rgba(var(--success-300), 1); }
html.dark .dark\:text-success-400 { color: rgba(var(--success-400), 1); }
html.dark .dark\:text-warning-400 { color: rgba(var(--warning-400), 1); }

/* --- Donker: randen & delers --- */
html.dark .dark\:border-danger-800 { border-color: rgba(var(--danger-800), 1); }
html.dark .dark\:border-success-800 { border-color: rgba(var(--success-800), 1); }
html.dark .dark\:divide-danger-900 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--danger-900), 1); }
html.dark .dark\:divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--gray-800), 1); }

/* --- Donker: tabel-hover (de licht-variant wint anders door lagere specificiteit) --- */
html.dark .dark\:hover\:bg-gray-800\/50:hover { background-color: rgba(var(--gray-800), 0.5); }

/* ---- Beheer (donker): gedempte grijze tekst beter leesbaar ----
   Filament gebruikt text-gray-500 (#64748b) voor metadata/labels;
   contrast is 3.75:1 op donker -> oplichten naar slate-400/300. */
html.dark .text-gray-500 {
    color: #94a3b8;
}
html.dark .fi-btn--gray .fi-btn-label {
    color: #cbd5e1;
}

/* ---- Beheer (donker): danger-knoppen donkerder voor witte tekst ----
   Wit op red-500 (#ef4444) = 3.7:1 -> red-600 (#dc2626) = 4.6:1. */
html.dark .fi-btn-color-danger {
    background-color: #dc2626;
}
html.dark .fi-btn-color-danger:hover {
    background-color: #b91c1c;
}


/* ---- Zwevende lichtbubbels op de beheer-login (/beheer/login) ---- */
.fi-simple-layout { position: relative; z-index: 1; }

.fi-login-bubble {
    position: fixed;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
.fi-login-bubble--1 { width: 300px; height: 300px; top: -90px; right: 6%; background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.45), rgba(59, 130, 246, 0.07) 70%); animation: fi-bubble-float-1 13s ease-in-out infinite; }
.fi-login-bubble--2 { width: 210px; height: 210px; bottom: -60px; left: 4%; background: radial-gradient(circle at 30% 30%, rgba(96, 165, 250, 0.4), rgba(59, 130, 246, 0.05) 70%); animation: fi-bubble-float-2 16s ease-in-out 1.5s infinite; }
.fi-login-bubble--3 { width: 110px; height: 110px; top: 20%; left: 10%; background: radial-gradient(circle at 30% 30%, rgba(147, 197, 253, 0.4), transparent 70%); animation: fi-bubble-float-3 10s ease-in-out 0.8s infinite; }
.fi-login-bubble--4 { width: 160px; height: 160px; top: 12%; right: 24%; background: radial-gradient(circle at 30% 30%, rgba(96, 165, 250, 0.35), transparent 72%); animation: fi-bubble-float-4 14s ease-in-out 3.5s infinite; }
.fi-login-bubble--5 { width: 80px; height: 80px; bottom: 22%; right: 12%; background: radial-gradient(circle at 30% 30%, rgba(147, 197, 253, 0.45), transparent 70%); animation: fi-bubble-float-3 11s ease-in-out 5s infinite; }

@keyframes fi-bubble-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(24px, -32px) scale(1.07); }
    66%      { transform: translate(-18px, 20px) scale(0.97); }
}
@keyframes fi-bubble-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%      { transform: translate(-26px, -28px) scale(1.05); }
    70%      { transform: translate(16px, 22px) scale(0.98); }
}
@keyframes fi-bubble-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(13px, -20px) scale(1.08); }
}
@keyframes fi-bubble-float-4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    45%      { transform: translate(-20px, 26px) scale(1.06); }
    80%      { transform: translate(12px, -14px) scale(0.98); }
}

/* Geen beweging voor gebruikers die dit niet willen */
@media (prefers-reduced-motion: reduce) {
    .fi-login-bubble { animation: none; }
}


/* ---- Caps Lock-waarschuwing + hulp-blok op de beheer-login ---- */
.beheer-capslock-hint {
    display: none;
    margin-top: 6px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}
html.dark .beheer-capslock-hint {
    color: #fbbf24;
    background: rgba(180, 130, 40, 0.12);
    border-color: rgba(180, 130, 40, 0.3);
}

.beheer-login-help {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    padding: 7px 11px;
    border: 1px solid rgba(12, 36, 97, 0.12);
    border-radius: 10px;
    background: rgba(12, 36, 97, 0.04);
}
.beheer-login-help svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #0c2461;
}
.beheer-login-help__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--slate-600, #475569);
}
.beheer-login-help__text strong {
    font-size: 13px;
    font-weight: 700;
    color: #0c2461;
}
.beheer-login-help__text a {
    color: #1e3799;
    font-weight: 600;
    text-decoration: none;
}
.beheer-login-help__text a:hover {
    text-decoration: underline;
}
html.dark .beheer-login-help {
    border-color: rgba(147, 197, 253, 0.18);
    background: rgba(59, 130, 246, 0.08);
}
html.dark .beheer-login-help svg { color: #93c5fd; }
html.dark .beheer-login-help__text { color: #94a3b8; }
html.dark .beheer-login-help__text strong { color: #e2e8f0; }
html.dark .beheer-login-help__text a { color: #93c5fd; }


.beheer-captcha {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

/* Eén duidelijke witte box: vraag + invoerveld + verversknop bij elkaar. */
.beheer-captcha__box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid rgba(12, 36, 97, 0.16);
    border-radius: 10px;
    padding: 6px 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.beheer-captcha__box--error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.beheer-captcha__question {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: #0c2461;
    white-space: nowrap;
    padding: 0 2px;
}

.beheer-captcha__input {
    width: 100%;
    min-width: 0;
    text-align: center;
    border: 1px solid rgba(12, 36, 97, 0.18);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: #f8fafc;
    color: #0f172a;
    caret-color: #1e3799;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.beheer-captcha__input--error {
    border-color: #ef4444;
}

.beheer-captcha__input:focus {
    outline: none;
    border-color: #1e3799;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(30, 55, 153, 0.15);
}

.beheer-captcha__refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid rgba(12, 36, 97, 0.16);
    border-radius: 9px;
    background: #ffffff;
    color: #0c2461;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.beheer-captcha__refresh:hover {
    background: #f1f5f9;
    border-color: rgba(12, 36, 97, 0.3);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.beheer-captcha__refresh:hover svg {
    transform: rotate(180deg);
}

.beheer-captcha__refresh:active {
    transform: scale(0.94);
}

.beheer-captcha__refresh svg {
    width: 17px;
    height: 17px;
    transition: transform 0.35s ease;
}

.beheer-captcha__hint {
    font-size: 0.7rem;
    line-height: 1.15;
    color: #64748b;
}

html.dark .beheer-captcha__hint {
    color: #94a3b8;
}

/* Donker thema: de captcha-box wordt donker en past bij het donkere thema. */
html.dark .beheer-captcha__box {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

html.dark .beheer-captcha__question {
    color: #e2e8f0;
}

html.dark .beheer-captcha__input {
    background: #0f172a;
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.3);
    caret-color: #93c5fd;
}

html.dark .beheer-captcha__input::placeholder {
    color: #94a3b8;
}

html.dark .beheer-captcha__input:focus {
    border-color: #93c5fd;
    background: #0f172a;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.16);
}

html.dark .beheer-captcha__refresh {
    background: #0f172a;
    color: #93c5fd;
    border-color: rgba(148, 163, 184, 0.3);
}

html.dark .beheer-captcha__refresh:hover {
    background: #1e293b;
    border-color: rgba(147, 197, 253, 0.4);
}

.beheer-captcha__input::placeholder {
    color: #8b98ab;
    font-weight: 500;
    letter-spacing: 0.05em;
}