/**
 * MY-LEX Theme — "Archival Precision"
 * ────────────────────────────────────
 * A distinctive enterprise theme for knowledge workers in the Dutch public sector.
 * Aesthetic: Refined institutional — precision meets warmth.
 * Brand: Steel Blue #7C98AB × Accent Red #DD0031
 *
 * Design principles:
 *   1. Authority through restraint — generous whitespace, deliberate color placement
 *   2. The red accent is a scalpel, not a paintbrush — used only for critical actions
 *   3. Every surface has purpose — layered depth, not flatness
 *   4. Typography carries weight — Plus Jakarta Sans brings geometric clarity
 */


/* ═══════════════════════════════════════════════════════════════
   § 1  DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Type Scale ── */
    --ml-text-title-font-family: var(--rz-text-font-family);
    --rz-body-font-size: 0.875rem;
    /* ── MY-LEX Brand Tokens ── */
    --ml-blue: var(--rz-primary-light, #7C98AB);
    --ml-blue-deep: var(--rz-primary, #3A6478);
    --ml-blue-dark: var(--rz-primary-darker, #1B3A4B);
    --ml-blue-darker: #132D3B;
    --ml-blue-darkest: #0C1F2B;
    --ml-blue-light: var(--rz-primary-lighter, #E8EFF3);
    --ml-blue-50: #F0F5F8;
    --ml-red: var(--rz-danger, #DD0031);
    --ml-red-hover: var(--rz-danger-dark, #BE002A);
    --ml-red-soft: var(--rz-danger-light, #FFF1F4);
    --ml-red-border: #FFCDD9;
    /* -- Header Typography tokens */
    --rz-text-display-h1-color: var(--rz-base-800);
    --rz-text-display-h2-color: var(--rz-base-800);
    --rz-text-display-h3-color: var(--rz-base-800);
    --rz-text-display-h4-color: var(--rz-base-800);
    --rz-text-display-h5-color: var(--rz-base-700);
    --rz-text-display-h1-font-weight: 800;
    --rz-text-display-h2-font-weight: 700;
    --rz-text-display-h3-font-weight: 700;
    --rz-text-display-h4-font-weight: 600;
    --rz-text-display-h5-font-weight: 600;
    /* ── JSON viewer syntax highlighting ── */
    --jv-string-color: var(--rz-success);
    --jv-number-color: var(--rz-series-1);
    --jv-boolean-color: var(--rz-warning);
    --jv-null-color: var(--rz-text-disabled-color);
    --jv-guid-color: var(--rz-text-secondary-color);
    --jv-datetime-color: var(--rz-series-2);
    --jv-url-color: var(--rz-info);
    --jv-filepath-color: var(--rz-primary);
    /* Card variables */
    --rz-panel-background-color: var(--rz-card-background-color);
    /* WCAG: improve header text contrast in grids across pages */
    --rz-grid-header-color: var(--rz-base-600);
    /* WCAG: pager summary was --rz-text-secondary-color (often below 4.5:1 on light pager bars) */
    --rz-pager-summary-color: var(--rz-base-700);
    /* Radzen TooltipService — single surface (background on .rz-tooltip-content only; see theme-overrides.css) */
    --rz-tooltip-background-color: var(--rz-base-800);
    --rz-tooltip-color: var(--rz-white);
    --rz-tooltip-shadow: 0 10px 32px rgba(14, 27, 40, 0.22), 0 2px 10px rgba(14, 27, 40, 0.12);
    --rz-tooltip-padding: 0.5rem 0.75rem;
    --rz-tooltip-border-radius: 8px;
    --rz-tooltip-font-size: 0.8125rem;
    /* Thin scrollbar utility (.thin-scrollbar in theme-overrides.css) */
    --ml-thin-scrollbar-thumb: var(--rz-base-300);
    --ml-thin-scrollbar-thumb-hover: var(--rz-base-400);
    /* Steps: base uses base-500 for inactive numbers, too close to --rz-primary for the selected one */
    --rz-steps-number-background-color: var(--rz-base-200);
    --rz-steps-number-color: var(--rz-base-700);
    --rz-steps-number-selected-background: var(--rz-primary);
    --rz-steps-number-selected-color: var(--rz-on-primary);
    --rz-steps-color: var(--rz-base-600);
    --rz-steps-title-selected-color: var(--rz-primary-dark);
}


/* ═══════════════════════════════════════════════════════════════
   § 2  HEADER — Signature dark top bar
   ═══════════════════════════════════════════════════════════════ */
.rz-header {
    background: linear-gradient( 135deg, var(--ml-blue-darkest) 0%, var(--ml-blue-dark) 50%, var(--ml-blue-deep) 100% ) !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 16px rgba(14, 27, 40, 0.2) !important;
    min-height: 54px;
    position: relative;
    padding: 0.3rem;
}

    /* Subtle bottom accent line in brand blue */
    .rz-header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--ml-blue) 0%, transparent 70%);
        opacity: 0.4;
    }

    /* Header text */
    .rz-header,
    .rz-header .rz-text,
    .rz-header .rz-label,
    .rz-header a,
    .rz-header a:hover,
    .rz-header a:focus {
        color: var(--rz-white) !important;
    }

        /* Header: sidebar toggle */
        .rz-header .rz-sidebar-toggle {
            color: rgba(255, 255, 255, 0.7) !important;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

            .rz-header .rz-sidebar-toggle:hover {
                color: var(--rz-white) !important;
                background: rgba(255, 255, 255, 0.08) !important;
            }

        /* Header: flat / icon buttons */
        .rz-header .rz-button.rz-variant-flat,
        .rz-header .rz-button.rz-light.rz-variant-flat {
            color: rgba(255, 255, 255, 0.8) !important;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

            .rz-header .rz-button.rz-variant-flat:hover,
            .rz-header .rz-button.rz-light.rz-variant-flat:hover {
                color: var(--rz-white) !important;
                background: rgba(255, 255, 255, 0.1) !important;
            }

        /* Header: search button — dark icon on light pill for contrast */
        .rz-header .header-search-btn {
            background: rgba(255, 255, 255, 0.95) !important;
            color: var(--ml-blue-dark) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            border-radius: 8px;
            padding: 0.375rem 0.875rem !important;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        }

            .rz-header .header-search-btn:hover {
                background: var(--rz-white) !important;
                color: var(--ml-blue-darkest) !important;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
            }

            .rz-header .header-search-btn .rzi {
                color: var(--ml-blue-dark) !important;
                font-weight: 600;
            }

            .rz-header .header-search-btn .header-search-text {
                color: var(--rz-base-600) !important;
            }

        /* Header: primary CTA — the red "Aanmaken" button */
        .rz-header .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat) {
            background: var(--ml-red) !important;
            border-color: var(--ml-red) !important;
            color: var(--rz-white) !important;
            font-weight: 600;
            letter-spacing: 0.01em;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(221, 0, 49, 0.3);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

            .rz-header .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover {
                background: var(--ml-red-hover) !important;
                border-color: var(--ml-red-hover) !important;
                box-shadow: 0 4px 16px rgba(221, 0, 49, 0.4);
                transform: translateY(-1px);
            }

            .rz-header .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):active {
                transform: translateY(0);
                box-shadow: 0 1px 3px rgba(221, 0, 49, 0.2);
            }

        /* Header: dropdown theme selector */
        .rz-header .rz-dropdown {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 6px;
            transition: all 0.2s ease;
            min-width: 120px;
        }

            .rz-header .rz-dropdown:hover {
                background: rgba(255, 255, 255, 0.12) !important;
                border-color: rgba(255, 255, 255, 0.25) !important;
            }

            .rz-header .rz-dropdown .rz-dropdown-label,
            .rz-header .rz-dropdown .rz-dropdown-trigger .rzi {
                color: rgba(255, 255, 255, 0.9) !important;
            }

        /* Header: appearance toggle */
        .rz-header .rz-appearance-toggle .rz-button {
            color: rgba(255, 255, 255, 0.7) !important;
            border-radius: 8px;
        }

            .rz-header .rz-appearance-toggle .rz-button:hover {
                color: var(--rz-white) !important;
                background: rgba(255, 255, 255, 0.08) !important;
            }


/* ═══════════════════════════════════════════════════════════════
   § 3  SIDEBAR — Refined navigation
   ═══════════════════════════════════════════════════════════════ */
.rz-sidebar {
    box-shadow: none !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-header {
    background: linear-gradient(135deg, var(--ml-blue-darkest) 0%, var(--ml-blue-dark) 100%);
    height: 54px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(14, 27, 40, 0.1);
}

    .sidebar-header img {
        filter: brightness(0) invert(1);
        opacity: 0.9;
    }

/* Hide header content when collapsed */
.rz-sidebar-collapsed .sidebar-header {
    padding: 0 !important;
}

    .rz-sidebar-collapsed .sidebar-header img {
        display: none;
    }

/* Menu items — only what Radzen tokens cannot express */
.rz-panel-menu .rz-navigation-item-text {
    letter-spacing: 0.005em;
}

.rz-panel-menu .rz-navigation-item-wrapper-active::before {
    inset-block-start: 6px !important;
    inset-block-end: 6px !important;
    width: 3px !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Section labels */
.rz-sidebar .rz-text-uppercase {
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: var(--rz-base-400) !important;
    text-transform: uppercase !important;
    padding-left: 1.25rem !important;
    margin-bottom: 0.25rem !important;
}

/* Sidebar footer (version info) */
.rz-sidebar .rz-text-caption {
    color: var(--rz-base-400) !important;
    font-size: 0.6875rem !important;
}


/* ═══════════════════════════════════════════════════════════════
   § 4  BUTTONS — Every variant, every state
   ═══════════════════════════════════════════════════════════════ */

/* Global button base */
.rz-button {
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    /*position: relative;*/
    cursor: pointer;
}

    /* ── PRIMARY (Filled) ── */
    .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat) {
        background: var(--rz-primary) !important;
        border: 1px solid var(--rz-primary) !important;
        color: var(--rz-white) !important;
        box-shadow: 0 1px 3px rgba(58, 100, 120, 0.2);
    }

        .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover {
            background: var(--ml-blue-deep) !important;
            border-color: var(--ml-blue-deep) !important;
            box-shadow: 0 4px 12px rgba(58, 100, 120, 0.3);
            transform: translateY(-1px);
        }

        .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):active {
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(58, 100, 120, 0.15);
        }

    /* ── PRIMARY (Text variant) ── */
    .rz-button.rz-primary.rz-variant-text {
        background: transparent !important;
        border: 1px solid transparent !important;
        color: var(--rz-primary-darker) !important;
        box-shadow: none !important;
    }

        .rz-button.rz-primary.rz-variant-text:hover {
            background: var(--ml-blue-50) !important;
            color: var(--ml-blue-darkest) !important;
        }

    /* ── PRIMARY (Outlined) ── */
    .rz-button.rz-primary.rz-variant-outlined {
        background: transparent !important;
        border: 1px solid var(--rz-primary) !important;
        color: var(--rz-primary) !important;
    }

        .rz-button.rz-primary.rz-variant-outlined:hover {
            background: var(--ml-blue-50) !important;
            border-color: var(--ml-blue-deep) !important;
            color: var(--ml-blue-deep) !important;
        }

    /* ── SECONDARY (Filled) ── */
    .rz-button.rz-secondary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat) {
        background: var(--rz-white) !important;
        border: 1px solid var(--rz-base-300) !important;
        color: var(--rz-base-700) !important;
        box-shadow: 0 1px 2px rgba(14, 27, 40, 0.04);
    }

        .rz-button.rz-secondary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover {
            background: var(--rz-base-50) !important;
            border-color: var(--rz-base-400) !important;
            color: var(--rz-base-800) !important;
            box-shadow: 0 2px 6px rgba(14, 27, 40, 0.08);
            transform: translateY(-1px);
        }

        .rz-button.rz-secondary:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):active {
            transform: translateY(0);
        }

    /* ── SECONDARY (Text variant) ── */
    .rz-button.rz-secondary.rz-variant-text {
        background: transparent !important;
        border: 1px solid transparent !important;
        color: var(--rz-base-600) !important;
        box-shadow: none !important;
    }

        .rz-button.rz-secondary.rz-variant-text:hover {
            background: var(--rz-base-50) !important;
            color: var(--rz-base-800) !important;
        }

    /* ── LIGHT (Filled) ── */
    .rz-button.rz-light:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat) {
        background: var(--rz-white) !important;
        border: 1px solid var(--rz-base-300) !important;
        color: var(--rz-base-700) !important;
        box-shadow: 0 1px 2px rgba(14, 27, 40, 0.04);
    }

        .rz-button.rz-light:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover {
            background: var(--rz-base-50) !important;
            border-color: var(--rz-base-400) !important;
            box-shadow: 0 2px 6px rgba(14, 27, 40, 0.08);
            transform: translateY(-1px);
        }

    /* ── DANGER (Filled) ── */
    .rz-button.rz-danger:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat) {
        background: var(--ml-red) !important;
        border: 1px solid var(--ml-red) !important;
        color: var(--rz-white) !important;
        box-shadow: 0 1px 3px rgba(221, 0, 49, 0.2);
    }

        .rz-button.rz-danger:not(.rz-variant-text):not(.rz-variant-outlined):not(.rz-variant-flat):hover {
            background: var(--ml-red-hover) !important;
            border-color: var(--ml-red-hover) !important;
            box-shadow: 0 4px 12px rgba(221, 0, 49, 0.3);
            transform: translateY(-1px);
        }

    /* ── DANGER (Text variant) — the "Verwijder" buttons ── */
    .rz-button.rz-danger.rz-variant-text {
        background: transparent !important;
        border: 1px solid transparent !important;
        color: var(--ml-red) !important;
        box-shadow: none !important;
    }

        .rz-button.rz-danger.rz-variant-text:hover {
            background: var(--ml-red-soft) !important;
            color: var(--ml-red-hover) !important;
            border-color: var(--ml-red-border) !important;
        }

    /* ── DANGER (Outlined) ── */
    .rz-button.rz-danger.rz-variant-outlined {
        background: transparent !important;
        border: 1px solid var(--ml-red) !important;
        color: var(--ml-red) !important;
    }

        .rz-button.rz-danger.rz-variant-outlined:hover {
            background: var(--ml-red-soft) !important;
            border-color: var(--ml-red-hover) !important;
            color: var(--ml-red-hover) !important;
        }

    /* ── Disabled state (all variants) ── */
    .rz-button.rz-state-disabled,
    .rz-button[disabled] {
        opacity: 0.45 !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* ── Small buttons ── */
    .rz-button.rz-button-sm {
        font-size: 0.8125rem !important;
        padding: 0.375rem 0.875rem !important;
    }


/* ═══════════════════════════════════════════════════════════════
   § 5  BODY & CONTENT AREA — Atmosphere
   ═══════════════════════════════════════════════════════════════ */

/* Subtle geometric dot grid on body for visual texture */
.rz-body {
    background-color: var(--rz-body-background-color) !important;
    background-image: radial-gradient(circle, var(--rz-base-300) 0.5px, transparent 0.5px) !important;
    background-size: 24px 24px !important;
    animation: fadeInUp 0.6s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Staggered reveal for cards */
.rz-card {
    animation: fadeInUp 0.5s cubic-bezier(0.2, 0, 0.2, 1) both;
}

    .rz-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .rz-card:nth-child(2) {
        animation-delay: 0.15s;
    }

    .rz-card:nth-child(3) {
        animation-delay: 0.2s;
    }

    .rz-card:nth-child(4) {
        animation-delay: 0.25s;
    }

    .rz-card:nth-child(5) {
        animation-delay: 0.3s;
    }

    .rz-card:nth-child(6) {
        animation-delay: 0.35s;
    }

    /* ═══════════════════════════════════════════════════════════════
   § 6  CARDS & PANELS — Layered surfaces
   ═══════════════════════════════════════════════════════════════ */
    /* Elevated card on hover */
    .rz-card:hover {
        box-shadow: 0 8px 24px rgba(14, 27, 40, 0.08), 0 2px 6px rgba(14, 27, 40, 0.04) !important;
        transform: translateY(-2px);
    }

/* Panel styled as card (collapsible card sections) */
.rz-panel.rz-panel-card {
    border: 1px solid var(--rz-base-200);
}

.rz-panel-card:hover {
    box-shadow: 0 8px 24px rgba(14, 27, 40, 0.08), 0 2px 6px rgba(14, 27, 40, 0.04);
    /*transform: translateY(-2px);*/
}

.rz-panel-card .rz-panel-titlebar:hover,
.rz-panel-card .rz-panel-titlebar:hover > * {
    color: var(--rz-primary) !important;
}

.rz-fieldset-legend {
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: var(--rz-base-600) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.slide-in-container .rz-panel.rz-panel-card {
    background-color: var(--rz-card-flat-background-color);
}


/* ═══════════════════════════════════════════════════════════════
   § 7  DATAGRID — Enterprise-grade tables
   ═══════════════════════════════════════════════════════════════ */
/* Radzen grid tokens cover structure; keep only missing typographic detail. */
.rz-datatable .rz-datatable-thead > tr > th {
    letter-spacing: 0.06em !important;
}

/* Alternating */
.rz-datatable .rz-datatable-tbody > tr:nth-child(even) > td {
    background: var(--rz-grid-stripe-background-color) !important;
}

/* Links in grid — darker than --rz-primary for 4.5:1 on white and striped rows */
.rz-datatable a {
    color: var(--ml-blue-dark, var(--rz-base-800)) !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

    .rz-datatable a:hover {
        color: var(--ml-blue-darkest, var(--rz-base-900)) !important;
        text-decoration: underline;
    }


/* ═══════════════════════════════════════════════════════════════
   § 8  LISTBOX — Polished selection lists
   ═══════════════════════════════════════════════════════════════ */
.rz-listbox .rz-listbox-item {
    border-left: 3px solid transparent;
}

    .rz-listbox .rz-listbox-item.rz-state-highlight {
        background: var(--ml-blue-50) !important;
        border-left-color: var(--ml-blue-deep) !important;
        color: var(--ml-blue-deep) !important;
        font-weight: 600;
    }


/* ═══════════════════════════════════════════════════════════════
   § 9  FORM INPUTS — Precise, clean
   ═══════════════════════════════════════════════════════════════ */
/* Form labels */
.rz-form-field label,
.rz-form-field .rz-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--rz-base-700);
    letter-spacing: 0.01em;
}

/* Dropdown menus (popup panel) */
.rz-dropdown-panel {
    border-radius: 8px !important;
    overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   § 10  DIALOGS — Elevated, premium
   ═══════════════════════════════════════════════════════════════ */
/* Dialog backdrop */
.rz-dialog-mask {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* ═══════════════════════════════════════════════════════════════
   § 11  TABS — Underline accent style
   ═══════════════════════════════════════════════════════════════ */
.rz-tabstrip .rz-tabstrip-nav {
    border-bottom: 2px solid var(--rz-base-200) !important;
    gap: 0.25rem;
}

    .rz-tabstrip .rz-tabstrip-nav .rz-tabstrip-item {
        border-radius: 0 !important;
        margin-bottom: -2px;
        padding: 0.625rem 1rem !important;
        font-weight: 500;
        font-size: 0.875rem;
        color: var(--rz-base-600);
        transition: all 0.2s ease !important;
        border-bottom: 2px solid transparent;
    }

        .rz-tabstrip .rz-tabstrip-nav .rz-tabstrip-item:hover {
            color: var(--rz-base-700) !important;
            background: transparent !important;
        }

        .rz-tabstrip .rz-tabstrip-nav .rz-tabstrip-item.rz-state-active {
            color: var(--rz-primary) !important;
            font-weight: 700;
            border-bottom-color: var(--rz-primary) !important;
            background: transparent !important;
        }

/* Custom Empty State styling */
.mylex-empty-state {
    padding: 4rem 2rem;
    text-align: center;
    background: var(--rz-base-50);
    border: 2px dashed var(--rz-base-200);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

    .mylex-empty-state .rz-icon {
        font-size: 4rem !important;
        color: var(--rz-base-300);
        margin-bottom: 1rem;
    }

/* Skeleton loader pulse */
.mylex-skeleton {
    background: linear-gradient(90deg, var(--rz-base-100) 25%, var(--rz-base-200) 50%, var(--rz-base-100) 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeletonPulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


/* ═══════════════════════════════════════════════════════════════
   § 13  BREADCRUMBS
   ═══════════════════════════════════════════════════════════════ */
.rz-breadcrumb {
    font-size: 0.8125rem;
    margin-bottom: 0.75rem !important;
}

    .rz-breadcrumb a {
        color: var(--rz-base-600) !important;
        transition: color 0.15s ease;
        font-weight: 500;
    }

        .rz-breadcrumb a:hover {
            color: var(--rz-primary) !important;
        }

    .rz-breadcrumb .rz-breadcrumb-item:last-child {
        color: var(--rz-base-700) !important;
        font-weight: 600;
    }


/* ═══════════════════════════════════════════════════════════════
   § 14  TOOLTIPS — tokens in §1 :root; outer .rz-tooltip reset in theme-overrides.css
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   § 15  SCROLLBARS — tokens only; rules live in theme-overrides.css (.thin-scrollbar)
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   § 16  TYPOGRAPHY — Weight and hierarchy
   ═══════════════════════════════════════════════════════════════ */
h1, .rz-text-h1 {
    letter-spacing: -0.025em;
}

h2, .rz-text-h2 {
    letter-spacing: -0.02em;
}

h3, .rz-text-h3 {
    letter-spacing: -0.015em;
}

h4, .rz-text-h4, h5, .rz-text-h5 {
    letter-spacing: -0.01em;
}

/* Page headings — distinctive bottom accent */
.rz-text-h3[style*="margin: 0"],
.rz-text-h3[style*="margin:0"] {
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--rz-base-200);
    margin-bottom: 1rem !important;
    position: relative;
}

    .rz-text-h3[style*="margin: 0"]::after,
    .rz-text-h3[style*="margin:0"]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 48px;
        height: 2px;
        background: var(--ml-blue-deep);
        border-radius: 1px;
    }


/* ═══════════════════════════════════════════════════════════════
   § 16b  BODY DATAGRID — White background for grids in body
   ═══════════════════════════════════════════════════════════════ */
.rz-body .rz-datatable {
    background: var(--rz-white);
}

/* ═══════════════════════════════════════════════════════════════
   § 16c  DATEPICKER — Icon fix
   ═══════════════════════════════════════════════════════════════ */
/*.rz-datepicker .rz-calendar-icon,
.rz-datepicker .rz-datepicker-trigger {
    position: relative;
    top: auto;
}*/


/* ═══════════════════════════════════════════════════════════════
   § 17  PANEL SECTION (detail / tab content)
   ═══════════════════════════════════════════════════════════════ */
.panel-section-card {
    background: var(--rz-white) !important;
    border: 1px solid var(--rz-base-200) !important;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 !important;
}

.panel-section-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--rz-base-100);
    background: var(--rz-base-50);
}


.panel-section-label {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rz-base-600);
}

.panel-section-body {
    padding: 1.5rem;
}

/* Refined dl/dt/dd styling for metadata */
dl.archiefitem-dl {
    margin: 0;
}

    dl.archiefitem-dl > dt,
    dl.row > dt {
        font-size: 0.75rem;
        line-height: 1.4rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--rz-base-600);
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
        border-bottom: 1px solid var(--rz-base-100);
    }

    dl.archiefitem-dl > dd,
    dl.row > dd {
        font-size: 0.875rem;
        line-height: 1.3rem;
        color: var(--rz-base-700);
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
        border-bottom: 1px solid var(--rz-base-100);
        margin-bottom: 0;
    }

        dl.archiefitem-dl > dt:last-of-type,
        dl.archiefitem-dl > dd:last-of-type {
            border-bottom: none;
        }

/* Inline tables in detail views */
dl.row table.rz-grid-table {
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

    .panel-section-body table.rz-grid-table th,
    dl.row table.rz-grid-table th {
        letter-spacing: 0.06em;
        border-bottom: 1px solid var(--rz-base-200);
    }

    .panel-section-body table.rz-grid-table td,
    dl.row table.rz-grid-table td {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
        color: var(--rz-base-700);
        border-bottom: 1px solid var(--rz-base-100);
    }

    .panel-section-body table.rz-grid-table tr:last-child td,
    dl.row table.rz-grid-table tr:last-child td {
        border-bottom: none;
    }

    .panel-section-body table.rz-grid-table tbody tr:nth-child(even) td,
    dl.row table.rz-grid-table tbody tr:nth-child(even) td {
        background: var(--rz-base-50);
    }

    .panel-section-body table.rz-grid-table tr:hover td,
    dl.row table.rz-grid-table tr:hover td {
        background: var(--ml-blue-50);
    }

/* Trefwoorden badge refinement (non-pill only — pills use --rz-badge-pill-*) */
.panel-section-body .rz-badge:not(.rz-badge-pill) {
    font-size: var(--rz-badge-font-size);
    padding: var(--rz-badge-padding);
    border-radius: var(--rz-badge-border-radius);
    font-weight: var(--rz-badge-font-weight);
}


/* ═══════════════════════════════════════════════════════════════
   § 17b  BADGES — Shade.Lighter enhancements
   Colors come from Radzen's --rz-*-lighter / --rz-on-*-lighter via Shade.Lighter.
   We only add a subtle border (derived from currentColor) and match outlined box model.
   ═══════════════════════════════════════════════════════════════ */
.rz-badge.rz-shade-lighter:not(.rz-variant-outlined):not(.rz-variant-text) {
    border: var(--rz-border-width) solid color-mix(in srgb, currentColor 28%, transparent);
}

/* WCAG: Radzen --rz-on-*-lighter text on pastel fills is often below 4.5:1; darken foreground in dense UI */
.rz-datatable .rz-badge-info.rz-shade-lighter,
.panel-section-card .rz-badge-info.rz-shade-lighter {
    color: var(--rz-info-darker);
}

.rz-datatable .rz-badge-success.rz-shade-lighter,
.panel-section-card .rz-badge-success.rz-shade-lighter {
    color: var(--rz-success-darker);
}

.rz-datatable .rz-badge-warning.rz-shade-lighter,
.panel-section-card .rz-badge-warning.rz-shade-lighter {
    color: var(--rz-warning-darker);
}

.rz-variant-outlined.rz-badge {
    border: var(--rz-border-width) solid transparent;
}


/* ═══════════════════════════════════════════════════════════════
   § 18  SELECTION & FOCUS
   ═══════════════════════════════════════════════════════════════ */
::selection {
    background: rgba(124, 152, 171, 0.2);
    color: var(--rz-base-900);
}

*:focus-visible:not(input,textarea) {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px !important;
}

/* Toegangsprofielen — em dash placeholder (light: secondary can fail on striped rows) */
.permission-schemes-placeholder-dash,
.permission-schemes-linked-placeholder {
    color: var(--rz-base-700);
}

/* ═══════════════════════════════════════════════════════════════
   § BESTAND UPLOAD — Light-theme variable overrides
   ═══════════════════════════════════════════════════════════════ */

.bestand-upload.rz-fileupload {
    --rz-upload-choose-background-color: var(--rz-base-200);
    --rz-upload-choose-hover-color: var(--rz-primary);
    --rz-upload-choose-hover-background-color: var(--rz-base-300);
}