:root {
    /* Overrides the border radius setting in the theme. */
    --ck-border-radius: 4px;

    /* Overrides the default font size in the theme. */
    --ck-font-size-base: 14px;

    /* Helper variables to avoid duplication in the colors. */
    --ck-custom-background: hsl(270, 1%, 29%);
    --ck-custom-foreground: hsl(255, 3%, 18%);
    --ck-custom-border: hsl(300, 1%, 22%);
    --ck-custom-white: hsl(0, 0%, 100%);

    /* -- Overrides generic colors. ------------------------------------------------------------- */

    --ck-color-base-foreground: var(--ck-custom-background);
    --ck-color-focus-border: hsl(208, 90%, 62%);
    --ck-color-text: hsl(0, 0%, 98%);
    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);

    /* -- Overrides the default .ck-button class colors. ---------------------------------------- */

    --ck-color-button-default-background: var(--ck-custom-background);
    --ck-color-button-default-hover-background: hsl(270, 1%, 22%);
    --ck-color-button-default-active-background: hsl(270, 2%, 20%);
    --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
    --ck-color-button-default-disabled-background: var(--ck-custom-background);

    --ck-color-button-on-background: var(--ck-custom-foreground);
    --ck-color-button-on-hover-background: hsl(255, 4%, 16%);
    --ck-color-button-on-active-background: hsl(255, 4%, 14%);
    --ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);

    --ck-color-button-action-background: hsl(168, 76%, 42%);
    --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
    --ck-color-button-action-active-background: hsl(168, 76%, 36%);
    --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
    --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
    --ck-color-button-action-text: var(--ck-custom-white);

    --ck-color-button-save: hsl(120, 100%, 46%);
    --ck-color-button-cancel: hsl(15, 100%, 56%);

    /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */

    --ck-color-dropdown-panel-background: var(--ck-custom-background);
    --ck-color-dropdown-panel-border: var(--ck-custom-foreground);

    /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */

    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
    --ck-color-split-button-hover-border: var(--ck-custom-foreground);

    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */

    --ck-color-input-background: var(--ck-custom-background);
    --ck-color-input-border: hsl(257, 3%, 43%);
    --ck-color-input-text: hsl(0, 0%, 98%);
    --ck-color-input-disabled-background: hsl(255, 4%, 21%);
    --ck-color-input-disabled-border: hsl(250, 3%, 38%);
    --ck-color-input-disabled-text: hsl(0, 0%, 78%);

    /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */

    --ck-color-labeled-field-label-background: var(--ck-custom-background);

    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */

    --ck-color-list-background: var(--ck-custom-background);
    --ck-color-list-button-hover-background: var(--ck-color-base-foreground);
    --ck-color-list-button-on-background: var(--ck-color-base-active);
    --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
    --ck-color-list-button-on-text: var(--ck-color-base-background);

    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */

    --ck-color-panel-background: var(--ck-custom-background);
    --ck-color-panel-border: var(--ck-custom-border);

    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */

    --ck-color-toolbar-background: var(--ck-custom-background);
    --ck-color-toolbar-border: var(--ck-custom-border);

    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */

    --ck-color-tooltip-background: hsl(252, 7%, 14%);
    --ck-color-tooltip-text: hsl(0, 0%, 93%);

    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */

    --ck-color-image-caption-background: hsl(0, 0%, 97%);
    --ck-color-image-caption-text: hsl(0, 0%, 20%);

    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */

    --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
    --ck-color-widget-hover-border: hsl(43, 100%, 68%);
    --ck-color-widget-editable-focus-background: var(--ck-custom-white);

    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */

    --ck-color-link-default: hsl(190, 100%, 75%);
}

/* PowerGrid tables: keep action dropdowns visible above subsequent rows */
.table-responsive:has(.dropdown.show),
.overflow-x-auto:has(.dropdown.show) {
    overflow: visible !important;
}

table tbody tr:has(.dropdown.show) {
    position: relative;
    z-index: 1051;
}

table tbody tr:has(.dropdown.show) td {
    overflow: visible;
}

/* Wetboek: consistente padding in blocks en formuliervelden */
.lawbook-page .block-header {
    padding: 0.875rem 1.625rem;
}

.lawbook-page .block-content:not(.p-0) {
    padding: 1.625rem !important;
}

.lawbook-page .law-article-body {
    margin: 0;
}

.lawbook-page .law-tier-list > :last-child {
    margin-bottom: 0;
}

.lawbook-page .form-control,
.lawbook-page .form-select {
    padding: 0.625rem 1rem;
}

.lawbook-page .clickable-row {
    cursor: pointer;
}

.lawbook-page .clickable-row:hover {
    background-color: rgba(47, 128, 237, 0.08) !important;
}

html.dark .select2-container--default .select2-search--inline .select2-search__field {
    color: #d5dbe3;
    background-color: transparent;
}

/*
 * Wetboek tekstkleur in dark mode.
 * Codebase gebruikt html.dark; Bootstrap --bs-body-color blijft dan een donkere light-mode waarde.
 * Lokaal (Vite dev) erft de tekst vaak al van #page-container; op de server kan een oude build
 * color: var(--bs-body-color) nog actief zijn — daarom expliciet inherit, geladen na @vite.
 */
html.dark .lawbook-page .law-article-body,
html.dark .lawbook-page .law-tier-item__label,
html.dark .lawbook-page .law-tier-item__value {
    color: inherit;
}

html.dark .lawbook-page .law-tier-item__type {
    color: inherit;
    opacity: 0.75;
}

/*
 * Modals in whitemode.
 * Codebase zet $modal-content-bg op transparent; design1 herstelde dat alleen onder html.dark.
 * Zonder achtergrond zie je alleen inputs over de backdrop. Tokens dekken beide modes.
 */
html:not(.dark) .modal-content {
    background: var(--pm-surface-card, #ffffff);
    border: 1px solid var(--pm-border-inset, rgba(15, 23, 42, 0.1));
    border-radius: 12px;
}

html:not(.dark) .modal-header {
    background: var(--pm-surface-card-header, #f7f9fb);
    border-bottom: 1px solid var(--pm-border, rgba(15, 23, 42, 0.08));
}

html:not(.dark) .modal-header .modal-title,
html:not(.dark) .modal-header .block-title {
    color: var(--pm-text, #151b24);
}

html:not(.dark) .modal-footer {
    border-top: 1px solid var(--pm-border, rgba(15, 23, 42, 0.08));
}

/*
 * Read-only form fields with links (verbalisant, meos, etc.).
 * Was hardcoded #2a2f35 — black in light mode. Use theme inset surface instead.
 */
.form-control.form-control-static {
    min-height: 2.5rem;
    background-color: var(--pm-surface-inset, #f2f5f8) !important;
    border-color: var(--pm-border-inset, rgba(15, 23, 42, 0.1)) !important;
    color: var(--pm-text, #151b24);
    opacity: 1;
}

html.dark .form-control.form-control-static {
    background-color: var(--pm-surface-inset, #191a1e) !important;
    border-color: var(--pm-border-inset, rgba(255, 255, 255, 0.08)) !important;
    color: var(--pm-text, #e2e3e6);
}