/* =============================================================================
   NotarisPlatform - Enhanced Custom CSS
   MudBlazor handles most styling. This file for overrides only.

   !IMPORTANT DECLARATION POLICY:
   MudBlazor components use inline styles (e.g., style="background-color: ..."),
   which have the highest CSS specificity. The ONLY way to override inline styles
   in CSS is with !important. This is a known MudBlazor architecture limitation.

   Categories of necessary !important declarations:
   1. Dark mode backgrounds - MudBlazor sets inline background colors
   2. Public header buttons - Override MudBlazor button colors on gradient
   3. Print styles - Required for proper print output
   4. Accessibility (reduced motion) - Required for WCAG compliance
   5. Third-party components (Quill) - Override library styles

   Current count: ~65 !important (all reviewed and necessary)
   Target: Minimize, but MudBlazor architecture prevents elimination

   Color source of truth: ThemeConstants.cs and MudTheme in ThemeService.cs
   ============================================================================= */

/* CSS Layers for better specificity management */
@layer mudblazor-overrides, utilities;

.gin-status-popover {
    z-index: 1600;
}

.gin-status-popover .mud-list {
    max-height: min(360px, calc(100vh - 96px));
    overflow-y: auto;
}

/* =============================================================================
   Public Header Navigation - MUST be visible in both light and dark mode
   ============================================================================= */

/* Theme toggle button - bright yellow/amber for visibility */
.public-header-theme-toggle {
    color: #fbbf24 !important;
}

.public-header-theme-toggle .mud-icon-root,
.public-header-theme-toggle svg,
.public-header-theme-toggle path {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
}

/* Login button - outlined with white text on primary appbar */
a.mud-button-root.mud-button.public-header-login-btn,
a.mud-button-root.mud-button.mud-button-outlined.public-header-login-btn {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

a.mud-button-root.public-header-login-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

a.mud-button-root.public-header-login-btn span.mud-button-label,
.public-header-login-btn.mud-button-outlined span.mud-button-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Force white text on all appbar elements */
.mud-appbar .mud-button-text .mud-button-label,
.mud-appbar .mud-icon-button .mud-icon-root,
.mud-appbar .mud-typography {
    color: white !important;
}

/* Ensure AppBar is always visible and above other elements on mobile */
.mud-appbar {
    z-index: 1300 !important;
}

/* Exclude theme toggle from white color */
.mud-appbar .public-header-theme-toggle .mud-icon-root {
    color: #fbbf24 !important;
}

/* Register/Gratis Starten button - prominent white filled on primary appbar */
a.mud-button-root.mud-button.public-header-register-btn,
a.mud-button-root.mud-button.mud-button-filled.public-header-register-btn {
    background-color: #fff !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600 !important;
}

a.mud-button-root.public-header-register-btn:hover {
    background-color: #e8eaf6 !important;
}

a.mud-button-root.public-header-register-btn span.mud-button-label,
.mud-appbar .public-header-register-btn .mud-button-label {
    color: var(--mud-palette-primary) !important;
}

/* Dark-mode override: pure-white achtergrond steekt onleesbaar uit op donkere appbar.
   Inverteren naar transparant met witte rand zodat de knop bij beide themes leesbaar
   blijft maar visueel onderscheidend (bug #11). */
html[data-theme='dark'] a.mud-button-root.mud-button.public-header-register-btn,
html[data-theme='dark'] a.mud-button-root.mud-button.mud-button-filled.public-header-register-btn {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

html[data-theme='dark'] a.mud-button-root.public-header-register-btn:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme='dark'] a.mud-button-root.public-header-register-btn span.mud-button-label,
html[data-theme='dark'] .mud-appbar .public-header-register-btn .mud-button-label {
    color: #ffffff !important;
}

/* Typography - Let MudTheme handle font-family via Typography configuration */
html, body {
    font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--mud-palette-background, #f8fafc);
    color: var(--mud-palette-text-primary);
}

/* Dark mode body background */
.mud-theme-dark,
.mud-theme-dark body,
body.mud-theme-dark {
    background-color: #0f172a !important;
}

/* Apply theme to main container */
.mud-main-content {
    background-color: var(--mud-palette-background) !important;
    flex: 1 1 auto;
}

.mud-theme-dark .mud-main-content {
    background-color: #0f172a !important;
}

/* Defensive light-mode override:
   if stale mud-theme-dark classes remain during a quick toggle, keep workspace readable. */
html[data-theme='light'] body,
html[data-theme='light'] body.mud-theme-dark,
html[data-theme='light'] .mud-layout,
html[data-theme='light'] .mud-main-content,
html[data-theme='light'] main {
    background-color: var(--mud-palette-background, #ffffff) !important;
    color: var(--mud-palette-text-primary, #1a202c) !important;
}

/* Extra hardening for mixed-theme states: when html is light but a parent still carries
   mud-theme-dark, force workspace containers back to the light palette. */
html[data-theme='light'] .mud-theme-dark,
html[data-theme='light'] .mud-theme-dark .mud-layout,
html[data-theme='light'] .mud-theme-dark .mud-main-content,
html[data-theme='light'] .mud-theme-dark main,
html[data-theme='light'] .mud-theme-dark .mud-layout-content {
    background-color: var(--mud-palette-background, #ffffff) !important;
    color: var(--mud-palette-text-primary, #1a202c) !important;
}

/* Light-mode component hardening: MudPaper, MudCard, MudTextField */
html[data-theme='light'] .mud-paper {
    background-color: var(--mud-palette-background, #ffffff) !important;
    color: var(--mud-palette-text-primary, #1a202c) !important;
}

html[data-theme='light'] .mud-theme-dark .mud-paper {
    background-color: var(--mud-palette-background, #ffffff) !important;
    color: var(--mud-palette-text-primary, #1a202c) !important;
}

html[data-theme='light'] .mud-card {
    background-color: var(--mud-palette-surface, #ffffff) !important;
    color: var(--mud-palette-text-primary, #1a202c) !important;
}

html[data-theme='light'] .mud-theme-dark .mud-card {
    background-color: var(--mud-palette-surface, #ffffff) !important;
    color: var(--mud-palette-text-primary, #1a202c) !important;
}

/* Light-mode table styling */
html[data-theme='light'] .mud-table {
    background-color: var(--mud-palette-background, #ffffff) !important;
    color: var(--mud-palette-text-primary, #1a202c) !important;
}

html[data-theme='light'] .mud-table .mud-table-head {
    background-color: var(--mud-palette-action-default, #f5f5f5) !important;
}

html[data-theme='light'] .mud-table .mud-table-body .mud-table-row {
    background-color: var(--mud-palette-background, #ffffff) !important;
}

html[data-theme='light'] .mud-table .mud-table-body .mud-table-row:hover {
    background-color: var(--mud-palette-action-hover, #f0f0f0) !important;
}

/* Light-mode text field styling */
html[data-theme='light'] .mud-input-base {
    background-color: var(--mud-palette-background, #ffffff) !important;
    color: var(--mud-palette-text-primary, #1a202c) !important;
}

html[data-theme='light'] .mud-input-base .mud-input-adornment {
    color: var(--mud-palette-text-secondary, #546b82) !important;
}

/* Light-mode dialog/drawer */
html[data-theme='light'] .mud-dialog {
    background-color: var(--mud-palette-background, #ffffff) !important;
    color: var(--mud-palette-text-primary, #1a202c) !important;
}

html[data-theme='light'] .mud-drawer-container {
    background-color: var(--mud-palette-background, #ffffff) !important;
}

/* Prevent transition flicker while JS toggles theme classes */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

/* Theme-aware keyboard focus states (WCAG-friendly) */
html[data-theme='light'] :focus-visible {
    outline: 2px solid var(--color-primary, #1a365d) !important;
    outline-offset: 2px;
}

html[data-theme='dark'] :focus-visible {
    outline: 2px solid var(--color-primary-light, #63b3ed) !important;
    outline-offset: 2px;
}

/* Light-mode appbar */
html[data-theme='light'] .mud-appbar {
    background-color: var(--mud-palette-primary, #1a365d) !important;
    color: var(--mud-palette-primary-contrast, #ffffff) !important;
}

/* Ensure main content area has correct background */
main {
    background-color: var(--mud-palette-background) !important;
}

.mud-theme-dark main {
    background-color: #0f172a !important;
}

/* MudLayout dark mode */
.mud-theme-dark .mud-layout {
    background-color: #0f172a !important;
}

/* =============================================================================
   Component Utility Classes (replacing inline styles)
   ============================================================================= */

/* Hero section text (white on gradient) */
.hero-text {
    color: white !important;
}

/* Hero benefit cards (translucent white on dark hero) — beats global .mud-paper override */
html[data-theme='light'] .mud-paper.hero-benefit-card,
html[data-theme='dark'] .mud-paper.hero-benefit-card,
.mud-paper.hero-benefit-card {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Kenniscentrum hero sections on dark primary gradients */
.knowledge-hero {
    color: white;
}

.knowledge-hero .mud-typography,
.knowledge-hero .mud-breadcrumbs,
.knowledge-hero .mud-breadcrumbs *,
.knowledge-hero .mud-icon-button-root,
.knowledge-hero .mud-icon-button-root .mud-icon-root,
.knowledge-hero .mud-link {
    color: white !important;
}

.knowledge-hero .mud-breadcrumb-separator,
.knowledge-hero .mud-breadcrumb-item-disabled {
    color: rgba(255, 255, 255, 0.72) !important;
}

.knowledge-hero .knowledge-hero-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
}

.knowledge-hero .mud-icon-button-root:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.knowledge-hero .hero-cta-outlined.mud-disabled,
.knowledge-hero .hero-cta-outlined.mud-disabled .mud-button-label,
.knowledge-hero .hero-cta-outlined.mud-disabled .mud-icon-root {
    color: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
}

.mud-typography mark,
.mud-chip mark {
    background-color: rgba(255, 193, 7, 0.28);
    color: inherit;
    padding: 0 0.15rem;
    border-radius: 0.2rem;
}

/* Hero CTA button (white bg, primary text) — !important to beat MudBlazor specificity */
.hero-cta-primary {
    background-color: white !important;
    color: var(--mud-palette-primary) !important;
}

.hero-cta-primary .mud-button-label,
.hero-cta-primary .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.hero-cta-primary:hover {
    background-color: #f8fafc !important;
}

/* Hero CTA button outlined (white) — !important to beat MudBlazor specificity */
.hero-cta-outlined {
    border-color: white !important;
    color: white !important;
}

.hero-cta-outlined .mud-button-label,
.hero-cta-outlined .mud-icon-root {
    color: white !important;
}

.hero-cta-outlined:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Large avatar (80x80) */
.avatar-lg {
    width: 80px;
    height: 80px;
}

/* Medium-large avatar (60x60) */
.avatar-md-lg {
    width: 60px;
    height: 60px;
}

/* Full height card */
.card-full-height {
    height: 100%;
}

/* Clickable card */
.card-clickable {
    height: 100%;
    cursor: pointer;
}

/* Large icon (3rem) */
.icon-lg {
    font-size: 3rem;
}

/* Public header navigation buttons - white text */
.public-nav-button {
    color: white;
}

.mud-appbar .public-nav-button .mud-button-label {
    color: white;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.mud-appbar .public-nav-button.mud-button-size-small {
    padding-left: 10px;
    padding-right: 10px;
    min-width: unset;
}

/* Force hide desktop nav and show hamburger below 1280px */
@media (max-width: 1279.98px) {
    .public-desktop-nav {
        display: none !important;
    }
    .public-mobile-menu-btn {
        display: inline-flex !important;
    }
}

@media (min-width: 1280px) {
    .public-mobile-menu-btn {
        display: none !important;
    }
}

/* Hero gradient background — force white text on all MudBlazor children */
.hero-gradient {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    color: white;
}

.hero-gradient .mud-typography,
.hero-gradient .mud-button-label,
.hero-gradient .mud-icon-root,
.hero-gradient .mud-link,
.hero-gradient .mud-nav-link {
    color: white !important;
}

/* Exclude CTA buttons that have their own color schemes */
.hero-gradient .hero-cta-primary .mud-button-label,
.hero-gradient .hero-cta-primary .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.hero-gradient .mud-chip-text .mud-chip-content {
    color: inherit;
}

/* Breadcrumbs on dark backgrounds — force white text on links and separators */
.breadcrumbs-on-dark .mud-breadcrumb-item a,
.breadcrumbs-on-dark .mud-breadcrumb-item span,
.breadcrumbs-on-dark .mud-breadcrumb-separator,
.breadcrumbs-on-dark li {
    color: rgba(255, 255, 255, 0.9) !important;
}

.breadcrumbs-on-dark .mud-breadcrumb-item:last-child span {
    color: #ffffff !important;
    font-weight: 600;
}

/* Active breadcrumb item (current page) — distinct styling */
.mud-breadcrumb-item:last-child .mud-typography {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Hover lift effect for cards */
.hover-lift {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* Module card clickable style */
.module-card {
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.module-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

/* =============================================================================
   End Component Utility Classes
   ============================================================================= */

.mud-theme-dark .mud-layout-content {
    background-color: #0f172a !important;
}

/* Ensure MudContainer has correct background */
.mud-container {
    background-color: transparent;
}

/* Section grey background - light mode */
.section-grey {
    background-color: #f1f5f9 !important;
}

/* Section grey background - dark mode - higher specificity to override .mud-paper */
.mud-theme-dark .section-grey,
.mud-theme-dark .mud-paper.section-grey,
.mud-theme-dark MudPaper.section-grey {
    background-color: #0f172a !important;
}

/* Section headings in dark mode */
.mud-theme-dark .section-heading,
.mud-theme-dark .mud-typography.section-heading,
.mud-theme-dark h4.section-heading {
    color: #f8fafc !important;
}

.mud-theme-dark .section-subheading,
.mud-theme-dark .mud-typography.section-subheading {
    color: #cbd5e1 !important;
}

/* All headings in dark mode should be light */
.mud-theme-dark .mud-typography-h4,
.mud-theme-dark .mud-typography-h3,
.mud-theme-dark .mud-typography-h5,
.mud-theme-dark .mud-typography-h6 {
    color: #f8fafc !important;
}

/* All body text in dark mode */
.mud-theme-dark .mud-typography-body1,
.mud-theme-dark .mud-typography-body2 {
    color: #e2e8f0;
}

/* Secondary text color override */
.mud-theme-dark .mud-secondary-text,
.mud-theme-dark [class*="Color-Secondary"] {
    color: #94a3b8 !important;
}

/* Default text in dark mode */
.mud-theme-dark .mud-typography {
    color: #e2e8f0;
}

/* Override background-grey CSS variable for dark mode */
.mud-theme-dark {
    --mud-palette-background-grey: #0f172a;
    --mud-palette-background-gray: #0f172a;
}

/* Enhanced focus indicators for accessibility */
/* Global focus-visible rule — ensure all interactive elements have visible focus */
*:focus-visible {
    outline: 2px solid var(--np-primary, #7c3aed);
    outline-offset: 2px;
}

/* MudTextField/MudSelect/MudAutocomplete tonen al hun eigen outlined-border bij focus.
   Een extra outline op de inner <input>/<textarea> zou een zichtbaar dubbel kader geven.
   In MudBlazor heeft de inner input/textarea zelf de class .mud-input-slot. */
.mud-input-outlined input.mud-input-slot:focus,
.mud-input-outlined input.mud-input-slot:focus-visible,
.mud-input-outlined textarea.mud-input-slot:focus,
.mud-input-outlined textarea.mud-input-slot:focus-visible,
.mud-input-outlined input:focus,
.mud-input-outlined input:focus-visible,
.mud-input-outlined textarea:focus,
.mud-input-outlined textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

*:focus:not(:focus-visible) {
    outline: none;
}

@layer mudblazor-overrides {
    .mud-button-root:focus-visible,
    .mud-icon-button:focus-visible,
    .mud-checkbox:focus-within {
        outline: 2px solid var(--np-primary);
        outline-offset: 2px;
    }

    /* MudTextField/MudSelect tonen al hun eigen outlined-border bij focus.
       De inner <input> krijgt bovendien de globale :focus-visible outline.
       Een extra outline op het wrapper-element zou een dubbel kader geven. */
    .mud-textfield:focus-within .mud-input-outlined-border,
    .mud-select:focus-within .mud-input-outlined-border {
        border-width: 2px;
        border-color: var(--np-primary);
    }

    /* High contrast focus state for buttons */
    .mud-button-root:focus-visible {
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
    }

    /* Focus within MudDataGrid cells */
    .mud-table-cell:focus-within {
        box-shadow: inset 0 0 0 2px var(--np-primary);
    }
}

/* Custom scrollbar (optional, subtle) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--mud-palette-background-gray, #f1f5f9);
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-gray-default, #cbd5e1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-gray-dark, #94a3b8);
}

/* Dark mode scrollbar */
.mud-theme-dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

.mud-theme-dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.mud-theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Cursor pointer for clickable rows */
.cursor-pointer {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Print styles */
@media print {
    .mud-drawer,
    .mud-appbar,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Loading overlay (for page transitions) */
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mud-palette-overlay-light, rgba(255, 255, 255, 0.9));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.mud-theme-dark .page-loading {
    background: rgba(15, 23, 42, 0.9);
}

.public-main-content {
    padding-top: var(--mud-appbar-height, 64px);
    scroll-padding-top: calc(var(--mud-appbar-height, 64px) + 24px);
    scroll-padding-bottom: calc(14rem + env(safe-area-inset-bottom));
    min-height: 100vh;
}

.public-form-shell {
    scroll-margin-top: calc(var(--mud-appbar-height, 64px) + 24px);
    padding-bottom: calc(16rem + env(safe-area-inset-bottom));
}

.public-form-shell .mud-alert,
.public-form-shell .mud-button-root,
.public-form-shell .mud-input-control,
.public-form-shell .mud-paper,
.public-form-shell .mud-stepper,
.public-form-shell [id] {
    scroll-margin-top: calc(var(--mud-appbar-height, 64px) + 24px);
}

/* Ensure stepper content is never clipped by overflow */
.public-form-shell .mud-stepper-content,
.public-form-shell .mud-step-content {
    overflow: visible;
}

@media (max-width: 959.98px) {
    .public-form-shell {
        padding-bottom: calc(20rem + env(safe-area-inset-bottom));
    }
}

.components-reconnect-banner {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 9999;
    transform: translateX(-50%);
    max-width: min(calc(100vw - 32px), 42rem);
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    background: #1976d2;
    color: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    font-size: 0.9rem;
}

.components-reconnect-action {
    padding: 0.35rem 1rem;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}

.components-reconnect-action:hover {
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 599.98px) {
    .components-reconnect-banner {
        left: 16px;
        right: 16px;
        transform: none;
        width: auto;
        justify-content: flex-start;
    }
}

/* Ensure MudBlazor drawer doesn't conflict with content */
.mud-drawer-open-responsive-lg-left .mud-main-content {
    padding-left: 0;
}

/* Layout fixes for AppBar/Drawer overlap */
/* Note: MudMainContent already accounts for AppBar height via MudLayout.
   Only add extra padding if the AppBar is NOT part of MudLayout. */
.app-main {
    overflow-y: auto;
    min-height: 0;
}

@media (min-width: 1280px) {
    .mud-drawer-open-responsive-lg-left .app-main {
        margin-left: 280px;
    }
}

@media (max-width: 1279.98px) {
    .mud-drawer-open-responsive-lg-left .app-main {
        margin-left: 0;
    }

    /* Geef footer ruimte voor de mobile bottom bar */
    .app-footer {
        padding-bottom: 68px;
    }
}

/* Fix for datepicker in Dutch locale */
.mud-picker-calendar-header-transition {
    text-transform: capitalize;
}

/* Enhanced spacing utilities */
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

/* Transition utilities for smooth interactions */
.transition-all {
    transition: all 0.2s ease;
}

/* Link styling */
a {
    color: var(--np-primary);
    text-decoration: none;
}

a:hover {
    color: var(--np-primary-light);
    text-decoration: underline;
}

/* Form styling enhancements */
.mud-input-slot {
    color: var(--np-secondary);
}

.mud-input-underline::after {
    border-bottom-color: var(--np-primary);
}

/* Table row hover effect */
.mud-table-row:hover {
    background-color: var(--mud-palette-table-hover, rgba(124, 58, 237, 0.05));
}

/* Card/Paper enhancements */
.mud-paper {
    border-radius: var(--np-border-radius);
}

/* Badge styling */
.mud-chip {
    border-radius: 12px;
}

/* Button styling - Namespaced to avoid overly broad overrides */
.np-app .mud-button-root {
    text-transform: none;
    letter-spacing: 0;
}

.np-app .mud-button-filled-primary {
    background: linear-gradient(135deg, var(--np-primary) 0%, var(--np-primary-dark) 100%);
}

.np-app .mud-button-filled-primary:hover {
    background: linear-gradient(135deg, var(--np-primary-light) 0%, var(--np-primary) 100%);
}

/* Responsive padding utility */
@media (max-width: 600px) {
    .mud-paper {
        padding: 16px !important;
    }
}

/* Animation for page transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}
/* ========================================================================
   Privacy & Visibility Banner Styles
   ======================================================================== */

.page-visibility-banner {
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.page-visibility-banner.visibility-personal {
    border-left: 4px solid var(--mud-palette-info);
    background-color: rgba(33, 150, 243, 0.05);
}

.page-visibility-banner.visibility-office {
    border-left: 4px solid var(--mud-palette-grey-default);
    background-color: rgba(158, 158, 158, 0.05);
}

.page-visibility-banner.visibility-platform {
    border-left: 4px solid var(--mud-palette-warning);
    background-color: rgba(255, 152, 0, 0.08);
}

.page-visibility-banner.visibility-public {
    border-left: 4px solid var(--mud-palette-error);
    background-color: rgba(244, 67, 54, 0.08);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .page-visibility-banner.visibility-personal {
        background-color: rgba(33, 150, 243, 0.12);
    }
    .page-visibility-banner.visibility-office {
        background-color: rgba(158, 158, 158, 0.1);
    }
    .page-visibility-banner.visibility-platform {
        background-color: rgba(255, 152, 0, 0.15);
    }
    .page-visibility-banner.visibility-public {
        background-color: rgba(244, 67, 54, 0.15);
    }
}

/* =============================================================================
   WYSIWYG Email Template Editor (Quill/Blazored.TextEditor)
   ============================================================================= */

/* Quill editor container */
.ql-container {
    min-height: 350px;
    font-family: 'Roboto', sans-serif !important;
}

.ql-editor {
    min-height: 300px;
    font-size: 14px;
    line-height: 1.6;
}

/* Quill toolbar styling to match MudBlazor */
.ql-toolbar.ql-snow {
    border-color: var(--mud-palette-lines-default) !important;
    border-radius: 4px 4px 0 0;
    background: var(--mud-palette-surface, #fafafa);
}

.ql-container.ql-snow {
    border-color: var(--mud-palette-lines-default) !important;
    border-radius: 0 0 4px 4px;
    background: var(--mud-palette-surface);
}

.mud-theme-dark .ql-toolbar.ql-snow {
    background: #1e293b;
}

.mud-theme-dark .ql-container.ql-snow {
    background: #1e293b;
}

.mud-theme-dark .ql-editor {
    color: #f8fafc;
}

/* Source code editor styling */
.monospace-editor textarea {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    tab-size: 2;
}

/* =============================================================================
   Dark Mode Overrides for MudBlazor Components
   ============================================================================= */

/* Input fields background in dark mode */
.mud-theme-dark .mud-input-control,
.mud-theme-dark .mud-input,
.mud-theme-dark .mud-input-slot {
    background-color: transparent;
}

.mud-theme-dark .mud-input-outlined .mud-input-slot {
    background-color: #1e293b;
}

.mud-theme-dark .mud-input-outlined .mud-input-slot input,
.mud-theme-dark .mud-input-outlined .mud-input-slot textarea {
    color: #f8fafc;
}

.mud-theme-dark .mud-input-outlined .mud-input-slot input::placeholder,
.mud-theme-dark .mud-input-outlined .mud-input-slot textarea::placeholder {
    color: #8b9bb5; /* WCAG AA: ~4.5:1 contrast on #1e293b */
}

.mud-theme-dark .mud-input-label {
    color: #94a3b8;
}

.mud-theme-dark .mud-input-label.mud-input-label-inputcontrol {
    color: #94a3b8;
}

/* Input adornment icons */
.mud-theme-dark .mud-input-adornment {
    color: #64748b;
}

.mud-theme-dark .mud-input-adornment .mud-icon-root {
    color: #64748b;
}

/* Helper text below inputs */
.mud-theme-dark .mud-input-helper-text {
    color: #64748b;
}

/* Native HTML inputs in forms */
.mud-theme-dark input[type="text"],
.mud-theme-dark input[type="email"],
.mud-theme-dark input[type="password"],
.mud-theme-dark input[type="tel"],
.mud-theme-dark textarea {
    background-color: #1e293b;
    color: #f8fafc;
    border-color: #475569;
}

.mud-theme-dark .mud-input-outlined-border {
    border-color: #475569;
}

.mud-theme-dark .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #64748b;
}

/* Text field filled variant */
.mud-theme-dark .mud-input-filled .mud-input-slot {
    background-color: rgba(255, 255, 255, 0.05);
}

.mud-theme-dark .mud-input-filled:hover .mud-input-slot {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Paper/Card backgrounds - exclude section-grey */
.mud-theme-dark .mud-paper:not(.section-grey) {
    background-color: #1e293b;
    color: #f8fafc;
}

.mud-theme-dark .mud-paper-outlined {
    border-color: #334155;
}

/* Alert/Info boxes */
.mud-theme-dark .mud-alert-filled-info {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

.mud-theme-dark .mud-alert-filled-success {
    background-color: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.mud-theme-dark .mud-alert-filled-warning {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fde68a;
}

.mud-theme-dark .mud-alert-filled-error {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.mud-theme-dark .mud-alert-standard-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
}

.mud-theme-dark .mud-alert-standard-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-left: 4px solid #22c55e;
}

.mud-theme-dark .mud-alert-standard-warning {
    background-color: rgba(234, 179, 8, 0.1);
    border-left: 4px solid #eab308;
}

.mud-theme-dark .mud-alert-standard-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
}

/* Tabs */
.mud-theme-dark .mud-tabs {
    background-color: transparent;
}

.mud-theme-dark .mud-tab {
    color: #94a3b8;
}

.mud-theme-dark .mud-tab.mud-tab-active {
    color: #f8fafc;
}

/* Buttons */
.mud-theme-dark .mud-button-text {
    color: #94a3b8;
}

.mud-theme-dark .mud-button-text:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.mud-theme-dark .mud-button-outlined {
    border-color: #475569;
    color: #cbd5e1;
}

.mud-theme-dark .mud-button-outlined:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Chips — alleen unstyled chips aanpassen, gekleurde chips behouden hun kleuren */
.mud-theme-dark .mud-chip-default:not([class*="mud-chip-color-"]) {
    background-color: #334155;
    color: #e2e8f0;
}

/* Tabel iconen (column options, sort) zichtbaar in dark mode */
.mud-theme-dark .mud-table .mud-icon-button svg,
.mud-theme-dark .mud-menu-activator svg {
    fill: var(--mud-palette-text-primary);
}

/* Select/Dropdown */
.mud-theme-dark .mud-select,
.mud-theme-dark .mud-autocomplete {
    background-color: transparent;
}

/* Popover paper: ondoorzichtige achtergrond + duidelijke schaduw zodat dropdowns
   niet transparant over onderliggende formuliervelden lijken te lopen. We laten
   z-index expliciet ongemoeid zodat MudBlazor's stacking-orde (popover < dialog)
   intact blijft — een eigen z-index zou popovers boven dialogs kunnen forceren. */
.mud-popover-paper {
    background-color: var(--mud-palette-surface, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* PE-overzicht: maak sort-icoontjes in headers duidelijker zichtbaar.
   MudTableSortLabel rendert standaard een halftransparant pijltje dat eindgebruikers
   makkelijk over het hoofd zien. We dimmen het in rust en tonen volledige opacity
   bij hover en actieve sortering. */
.pe-overview-grid .mud-table-sort-label-icon {
    opacity: 0.35;
    transition: opacity 0.15s ease-in-out;
}

.pe-overview-grid .mud-table-sort-label:hover .mud-table-sort-label-icon,
.pe-overview-grid .mud-table-sort-label.mud-direction-asc .mud-table-sort-label-icon,
.pe-overview-grid .mud-table-sort-label.mud-direction-desc .mud-table-sort-label-icon {
    opacity: 1;
}

.mud-theme-dark .mud-popover-paper {
    background-color: #1e293b;
    border: 1px solid #334155;
}

.mud-theme-dark .mud-list-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Dialog */
.mud-theme-dark .mud-dialog {
    background-color: #1e293b;
}

.mud-theme-dark .mud-dialog-title {
    background-color: #0f172a;
}

/* Drawer (sidebar) */
.mud-theme-dark .mud-drawer {
    background-color: #0b1324;
}

.mud-theme-dark .mud-nav-link {
    color: #cbd5e1;
}

.mud-theme-dark .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.mud-theme-dark .mud-nav-link.active {
    background-color: rgba(124, 58, 237, 0.15);
}

/* Avatar */
.mud-theme-dark .mud-avatar {
    background-color: #334155;
}

/* Divider */
.mud-theme-dark .mud-divider {
    border-color: #334155;
}

/* Skeleton loader */
.mud-theme-dark .mud-skeleton {
    background-color: #334155;
}

/* Table */
.mud-theme-dark .mud-table {
    background-color: #1e293b;
}

.mud-theme-dark .mud-table-head {
    background-color: #0f172a;
}

.mud-theme-dark .mud-table-cell {
    border-bottom-color: #334155;
}

.mud-theme-dark .mud-table-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Card content */
.mud-theme-dark .mud-card {
    background-color: #1e293b;
}

.mud-theme-dark .mud-card-header {
    background-color: #0f172a;
}

/* Links */
.mud-theme-dark a {
    color: #a78bfa;
}

.mud-theme-dark a:hover {
    color: #c4b5fd;
}

/* Switch */
.mud-theme-dark .mud-switch-track {
    background-color: #475569;
}

/* Checkbox/Radio */
.mud-theme-dark .mud-checkbox .mud-icon-default {
    color: #64748b;
}

/* Progress indicators */
.mud-theme-dark .mud-progress-linear-buffer {
    background-color: #334155;
}

/* Expansion panel */
.mud-theme-dark .mud-expand-panel {
    background-color: #1e293b;
    border-color: #334155;
}

.mud-theme-dark .mud-expand-panel-header:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* =============================================================================
   Dark Mode Overrides for Public Pages (Home, Login, etc.)
   ============================================================================= */

/* Override background-grey for dark mode - this is used on public sections */
.mud-theme-dark [style*="background-grey"],
.mud-theme-dark [style*="background: var(--mud-palette-background-grey)"] {
    background-color: #0f172a !important;
}

/* MudLayout and MudMainContent in dark mode */
.mud-theme-dark .mud-layout {
    background-color: #0f172a;
}

.mud-theme-dark .mud-main-content {
    background-color: #0f172a !important;
}

/* Public page sections with grey background */
.mud-theme-dark .public-section-grey,
.mud-theme-dark .section-grey {
    background-color: #0f172a !important;
}

/* Footer in dark mode */
.mud-theme-dark .mud-paper[style*="background-grey"] {
    background-color: #0b1324 !important;
}

/* Cards on dark backgrounds should have visible background */
.mud-theme-dark .mud-card {
    background-color: #1e293b !important;
    border: 1px solid #334155;
}

.mud-theme-dark .mud-card-content {
    background-color: transparent;
}

/* Avatar backgrounds in dark mode */
.mud-theme-dark .mud-avatar-outlined {
    border-color: currentColor;
}

/* Ensure text is visible in dark mode */
.mud-theme-dark .mud-text-secondary {
    color: #94a3b8 !important;
}

/* Typography colors in dark mode */
.mud-theme-dark .mud-typography-body2 {
    color: #cbd5e1;
}

.mud-theme-dark .mud-typography-caption {
    color: #94a3b8;
}

.mud-theme-dark .mud-typography-subtitle2 {
    color: #e2e8f0;
}

/* Links in dark mode - higher contrast */
.mud-theme-dark .mud-link {
    color: #93c5fd !important;
}

.mud-theme-dark .mud-link:hover {
    color: #bfdbfe !important;
}

.mud-theme-dark a.mud-link-default,
.mud-theme-dark .mud-link.mud-default-text {
    color: #cbd5e1 !important;
}

.mud-theme-dark a.mud-link-default:hover,
.mud-theme-dark .mud-link.mud-default-text:hover {
    color: #f8fafc !important;
}

/* Inherit links follow parent text color */
.mud-theme-dark .mud-link.mud-inherit-text {
    color: inherit;
}

.mud-theme-dark .mud-link.mud-inherit-text:hover {
    color: #93c5fd !important;
}

/* Footer text visibility */
.mud-theme-dark .section-grey .mud-text,
.mud-theme-dark .section-grey .mud-typography {
    color: #e2e8f0;
}

.mud-theme-dark .section-grey .mud-typography-h6,
.mud-theme-dark .section-grey .mud-typography-subtitle2 {
    color: #f8fafc;
}

.mud-theme-dark .section-grey .mud-typography-body2 {
    color: #cbd5e1;
}

.mud-theme-dark .section-grey .mud-typography-caption {
    color: #94a3b8;
}

/* Color.Secondary text in dark mode */
.mud-theme-dark .mud-secondary-text {
    color: #94a3b8 !important;
}

/* Login/Form cards - exclude section-grey */
.mud-theme-dark .mud-paper:not(.section-grey) {
    background-color: #1e293b !important;
}

/* Hero sections should keep their gradient */
.mud-theme-dark .mud-paper[style*="linear-gradient"] {
    /* Hero gradient remains unchanged */
}

/* Menu dropdown in dark mode */
.mud-theme-dark .mud-menu {
    background-color: #1e293b;
}

.mud-theme-dark .mud-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Snackbar */
.mud-theme-dark .mud-snackbar {
    background-color: #334155;
    color: #f8fafc;
}

/* Breadcrumbs */
.mud-theme-dark .mud-breadcrumb-item {
    color: #94a3b8 !important;
}

.mud-theme-dark .mud-breadcrumb-item a,
.mud-theme-dark .mud-breadcrumb-item .mud-link {
    color: #93c5fd !important;
}

.mud-theme-dark .mud-breadcrumb-item a:hover,
.mud-theme-dark .mud-breadcrumb-item .mud-link:hover {
    color: #bfdbfe !important;
}

.mud-theme-dark .mud-breadcrumb-separator {
    color: #64748b !important;
}

.mud-theme-dark .mud-breadcrumbs {
    color: #94a3b8;
}

.mud-theme-dark .mud-breadcrumbs .mud-typography {
    color: #94a3b8 !important;
}

/* Rating stars */
.mud-theme-dark .mud-rating-item {
    color: #64748b;
}

.mud-theme-dark .mud-rating-item.mud-rating-item-active {
    color: #fbbf24;
}

/* Timeline */
.mud-theme-dark .mud-timeline-item-dot {
    background-color: #334155;
    border-color: #475569;
}

/* Stepper */
.mud-theme-dark .mud-step-label-content {
    color: #94a3b8;
}

.mud-theme-dark .mud-step-label-content.mud-step-label-content-active {
    color: #f8fafc;
}

/* AppBar in public layout should have proper contrast */
.mud-theme-dark .mud-appbar {
    background-color: #0b1324 !important;
}

/* =============================================================================
   Bootstrap/HTML Elements Dark Mode Support
   These styles ensure plain HTML elements have proper contrast in dark mode
   ============================================================================= */

/* Headings */
.mud-theme-dark h1,
.mud-theme-dark h2,
.mud-theme-dark h3,
.mud-theme-dark h4,
.mud-theme-dark h5,
.mud-theme-dark h6 {
    color: #f8fafc;
}

/* Paragraphs and text */
.mud-theme-dark p,
.mud-theme-dark span:not([class*="mud-"]),
.mud-theme-dark li {
    color: #e2e8f0;
}

/* Bootstrap cards */
.mud-theme-dark .card {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

.mud-theme-dark .card-body,
.mud-theme-dark .card-header,
.mud-theme-dark .card-footer {
    background-color: transparent;
    color: #f8fafc;
}

/* Bootstrap text-muted in dark mode */
.mud-theme-dark .text-muted {
    color: #94a3b8 !important;
}

/* Bootstrap buttons in dark mode */
.mud-theme-dark .btn-outline-secondary {
    border-color: #475569;
    color: #cbd5e1;
}

.mud-theme-dark .btn-outline-secondary:hover {
    background-color: #334155;
    border-color: #64748b;
    color: #f8fafc;
}

/* Bootstrap display headings */
.mud-theme-dark .display-1,
.mud-theme-dark .display-2,
.mud-theme-dark .display-3,
.mud-theme-dark .display-4,
.mud-theme-dark .display-5,
.mud-theme-dark .display-6 {
    color: inherit;
}

/* Bootstrap small text */
.mud-theme-dark small {
    color: #94a3b8;
}

/* Login page choice cards */
.login-choice-link,
.login-choice-link:hover,
.login-choice-link:focus-visible,
.login-choice-link:active {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}

.login-choice-card {
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.login-choice-link:hover .login-choice-card,
.login-choice-link:focus-visible .login-choice-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--mud-palette-primary) !important;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.login-choice-link:focus-visible {
    outline: none;
}

/* Footer in dark mode - reliable theming support */
.mud-theme-dark .section-grey .mud-typography-caption {
    color: #94a3b8;
}

/* ── Public Site Footer ── */
.public-site-footer {
    margin-top: auto;
    padding: 3.5rem 0 1.5rem;
    border-top: 3px solid var(--mud-palette-primary);
    background: linear-gradient(180deg, #e8eef5 0%, #dce5ef 100%);
}

.public-site-footer-grid {
    row-gap: 1.5rem;
}

.public-footer-kicker {
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.public-footer-title {
    color: #0f2f57;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.public-footer-summary {
    max-width: 32rem;
    color: #475569;
    line-height: 1.75;
}

.public-footer-primary-link {
    color: #0f4c81 !important;
    font-weight: 600;
    text-decoration: none !important;
}

.public-footer-primary-link:hover {
    color: #0a66c2 !important;
}

.public-footer-heading {
    margin-bottom: 0.9rem;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-footer-links {
    align-items: flex-start;
}

.public-footer-link,
.public-footer-contact-link {
    color: #163a63 !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.public-footer-link:hover,
.public-footer-contact-link:hover,
.public-footer-bottom-link:hover {
    color: #0a66c2 !important;
}

.public-footer-label {
    display: block;
    margin-bottom: 0.25rem;
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-footer-meta {
    color: #0f172a;
    font-weight: 500;
}

.public-footer-divider {
    margin: 2rem 0 1.25rem;
}

.public-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.public-footer-bottom-text {
    color: #64748b;
}

.public-footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.public-footer-bottom-link {
    color: #475569 !important;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.mud-theme-dark .public-site-footer {
    border-top: 3px solid var(--mud-palette-primary);
    background: linear-gradient(180deg, #0b1324 0%, #111c32 100%);
}

.mud-theme-dark .public-footer-kicker,
.mud-theme-dark .public-footer-label,
.mud-theme-dark .public-footer-bottom-text {
    color: #94a3b8;
}

.mud-theme-dark .public-footer-title,
.mud-theme-dark .public-footer-heading,
.mud-theme-dark .public-footer-meta {
    color: #f8fafc;
}

.mud-theme-dark .public-footer-summary {
    color: #cbd5e1;
}

.mud-theme-dark .public-footer-link,
.mud-theme-dark .public-footer-contact-link,
.mud-theme-dark .public-footer-primary-link,
.mud-theme-dark .public-footer-bottom-link {
    color: #dbeafe !important;
}

.mud-theme-dark .public-footer-link:hover,
.mud-theme-dark .public-footer-contact-link:hover,
.mud-theme-dark .public-footer-primary-link:hover,
.mud-theme-dark .public-footer-bottom-link:hover {
    color: #93c5fd !important;
}

@media (max-width: 959.98px) {
    .public-site-footer {
        padding: 2.75rem 0 1.25rem;
    }

    .public-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ── Authenticated App Footer ── */
.app-footer {
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.mud-theme-dark .app-footer {
    background: #0b1324;
    border-top-color: #1e293b;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3);
}

.app-footer-icon {
    color: var(--text-muted);
    opacity: 0.7;
}

.app-footer-text {
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.app-footer-link {
    color: var(--text-muted) !important;
    font-size: 0.75rem;
    transition: color 0.15s ease;
}

.app-footer-link:hover {
    color: var(--color-primary) !important;
}

.mud-theme-dark .app-footer-link:hover {
    color: #63b3ed !important;
}

/* =============================================================================
   Cookie Consent Banner
   ============================================================================= */
/* Volle-breedte afsluitende balk i.p.v. een zwevende rechtsonder-kaart. De oude kaart
   overlapte structureel primaire acties/CTA's op ~100 pagina's (/modules/*, /toegang-geweigerd,
   /abonnementen) vóór akkoord (UX-audit 2026-07-25). Een balk met eigen achtergrond over de
   volle breedte sluit de onderkant netjes af; de body reserveert er ruimte voor (zie
   body.has-cookie-consent) zodat er geen content onder verdwijnt. */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1290;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--mud-palette-surface, #fff);
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,0.12));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.cookie-consent-paper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4px 8px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Reserveer onderaan de pagina ruimte zodat de laatste content-rij nooit onder de balk valt. */
body.has-cookie-consent {
    padding-bottom: 140px;
}

@media (min-width: 960px) {
    body.has-cookie-consent {
        padding-bottom: 96px;
    }
    /* Op brede schermen kan de balk compacter (tekst + knoppen op één rij). */
    .cookie-consent-paper .mud-stack {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
}

/* =============================================================================
   Globale button-iconificatie
   ============================================================================= */

.np-iconified-button:not(.mud-width-full) {
    min-width: 2.5rem !important;
}

.np-iconified-button,
.np-iconified-button .mud-button-label {
    gap: 0.35rem;
}

.np-iconified-button .np-button-text {
    display: none !important;
}

.np-iconified-button .np-auto-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
}

.np-iconified-button.mud-button-root .mud-button-label {
    justify-content: center;
}

/* Upload-dropzones: MudBlazor 9 kent de utilityclass opacity-0 niet meer; deze class houdt de
   overlay-input van MudFileUpload onzichtbaar maar klik- en drop-baar over de hele zone. */
.np-upload-overlay-input {
    opacity: 0;
}