/*
 * Sovado Design System
 * ----------------------
 * De enige bron van waarheid voor generieke UI-tokens en componenten.
 * Module-CSS mag layouts verzorgen, maar maakt geen nieuwe lokale variant van
 * buttons, form controls, cards, tabellen, badges of dialogs.
 */

:root {
    color-scheme: light;

    /* Merk en semantische kleuren */
    --os-color-primary: #5547ed;
    --os-color-primary-hover: #4638dc;
    --os-color-primary-active: #3e31c9;
    --os-color-accent-text: #5547ed;
    --os-color-primary-soft: #eeedff;
    --os-color-primary-softer: #f7f6ff;
    --os-color-primary-border: #c8c3fb;
    --os-color-ink: #12192d;
    --os-color-text: #3f485c;
    --os-color-text-secondary: #687186;
    --os-color-text-muted: #8d95a7;
    --os-color-canvas: #f7f8fc;
    --os-color-surface: #ffffff;
    --os-color-surface-muted: #f8f9fc;
    --os-color-surface-strong: #f1f3f7;
    --os-color-surface-elevated: #ffffff;
    --os-color-input: #ffffff;
    --os-color-hover: #f4f3ff;
    --os-color-selected: #eeedff;
    --os-color-border: #e3e6ee;
    --os-color-border-strong: #d4d8e2;
    --os-color-overlay: rgba(18, 25, 45, .56);
    --os-color-skeleton: #e8ebf1;
    --os-color-scrollbar: #c7ccd8;
    --os-color-focus: rgba(85, 71, 237, .14);
    --os-color-success: #218a54;
    --os-color-success-soft: #e4f8eb;
    --os-color-warning: #c96813;
    --os-color-warning-soft: #fff1df;
    --os-color-danger: #c23b36;
    --os-color-danger-soft: #fff0ef;
    --os-color-info: #316bd8;
    --os-color-info-soft: #edf3ff;

    /* Semantische aliassen voor oudere modules die al op het designsysteem leunen. */
    --os-color-text-primary: var(--os-color-ink);
    --os-color-text-tertiary: var(--os-color-text-muted);
    --os-color-surface-raised: var(--os-color-surface-elevated);
    --os-color-primary-text: var(--os-color-accent-text);
    --os-color-success-text: var(--os-color-success);
    --os-color-warning-text: var(--os-color-warning);

    /* Publieke Sovado-aliassen: modules gebruiken dezelfde centrale tokens. */
    --sovado-primary: var(--os-color-primary);
    --sovado-bg: var(--os-color-canvas);
    --sovado-surface: var(--os-color-surface);
    --sovado-border: var(--os-color-border);
    --sovado-text: var(--os-color-ink);
    --sovado-muted: var(--os-color-text-secondary);
    --sovado-success: var(--os-color-success);
    --sovado-warning: var(--os-color-warning);
    --sovado-danger: var(--os-color-danger);

    /* Typografie */
    --os-font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --os-font-size-xs: 12px;
    --os-font-size-sm: 13px;
    --os-font-size-base: 14px;
    --os-font-size-md: 15px;
    --os-font-size-lg: 18px;
    --os-font-size-xl: 22px;
    --os-font-size-2xl: 30px;
    --os-font-size-3xl: 40px;
    --os-font-weight-regular: 400;
    --os-font-weight-medium: 500;
    --os-font-weight-semibold: 600;
    --os-font-weight-bold: 700;
    --os-font-weight-heavy: 800;
    --os-line-height-tight: 1.12;
    --os-line-height-heading: 1.22;
    --os-line-height-body: 1.55;

    /* Spacing: uitsluitend stappen uit deze schaal voor generieke UI */
    --os-space-1: 4px;
    --os-space-2: 8px;
    --os-space-3: 12px;
    --os-space-4: 16px;
    --os-space-5: 20px;
    --os-space-6: 24px;
    --os-space-8: 32px;
    --os-space-10: 40px;
    --os-space-12: 48px;
    --os-space-16: 64px;

    /* Vorm */
    --os-radius-sm: 8px;
    --os-radius-md: 12px;
    --os-radius-lg: 16px;
    --os-radius-xl: 20px;
    --os-radius-pill: 999px;
    --os-control-height-sm: 34px;
    --os-control-height: 42px;
    --os-control-height-lg: 48px;
    --os-icon-sm: 14px;
    --os-icon-md: 16px;
    --os-icon-lg: 20px;
    --os-icon-xl: 24px;

    /* Layout en elevatie */
    --os-page-max-width: 1660px;
    --os-page-max-width-narrow: 980px;
    --os-page-max-width-reading: 760px;
    --os-page-padding-inline: clamp(24px, 4vw, 68px);
    --os-page-padding-block: clamp(30px, 3.4vw, 56px);
    --os-shadow-card: none;
    --os-shadow-floating: 0 16px 40px rgba(18, 25, 45, .14);
    --os-shadow-dialog: 0 28px 80px rgba(18, 25, 45, .20);
    --os-transition-fast: 150ms ease;

    /* Achterwaartse compatibiliteit met de bestaande Sovado-variabelen. */
    --brand: var(--os-color-primary);
    --brand-dark: var(--os-color-primary-hover);
    --ink: var(--os-color-ink);
    --muted: var(--os-color-text-secondary);
    --line: var(--os-color-border);
    --surface: var(--os-color-surface);
    --canvas: var(--os-color-canvas);
    --danger: var(--os-color-danger);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --os-color-primary: #6758e8;
    --os-color-primary-hover: #a69dff;
    --os-color-primary-active: #5547c9;
    --os-color-accent-text: #a69dff;
    --os-color-primary-soft: #2b2850;
    --os-color-primary-softer: #211f3a;
    --os-color-primary-border: #504a86;
    --os-color-ink: #f4f6fb;
    --os-color-text: #d8dce7;
    --os-color-text-secondary: #aeb6c8;
    --os-color-text-muted: #858fa5;
    --os-color-canvas: #0e111b;
    --os-color-surface: #171b27;
    --os-color-surface-muted: #131722;
    --os-color-surface-strong: #202535;
    --os-color-surface-elevated: #1d2230;
    --os-color-input: #121722;
    --os-color-hover: #23263f;
    --os-color-selected: #2a2750;
    --os-color-border: #2b3140;
    --os-color-border-strong: #3a4254;
    --os-color-focus: rgba(129, 116, 255, .26);
    --os-color-overlay: rgba(3, 5, 10, .76);
    --os-color-skeleton: #282e3e;
    --os-color-scrollbar: #424a5e;
    --os-color-success: #53d394;
    --os-color-success-soft: #153a2c;
    --os-color-warning: #ffad5c;
    --os-color-warning-soft: #432e19;
    --os-color-danger: #ff7d79;
    --os-color-danger-soft: #442321;
    --os-color-info: #7aa7ff;
    --os-color-info-soft: #1c3158;
    --os-shadow-floating: 0 18px 50px rgba(0, 0, 0, .34);
    --os-shadow-dialog: 0 28px 90px rgba(0, 0, 0, .54);
}

html[data-theme="dark"] body {
    background: var(--os-color-canvas);
    color: var(--os-color-ink);
}

html[data-theme="dark"] {
    scrollbar-color: var(--os-color-scrollbar) var(--os-color-canvas);
}

html[data-theme="dark"] ::selection {
    background: rgba(129, 116, 255, .36);
    color: #fff;
}

/* Typography */
body.page-company-app,
body.page-pos-v2,
body.setup-body,
body.unified-setup-body,
body.onboarding-experience-body,
body.workspace-setup-page,
body.payment-public-body {
    font-family: var(--os-font-family);
}

.os-page-title,
.os-section-title,
.os-subsection-title,
.os-card-title,
.os-body,
.os-body-small,
.os-label,
.os-caption {
    font-family: var(--os-font-family);
}

.os-page-title {
    margin: 0;
    color: var(--os-color-ink);
    font-size: clamp(var(--os-font-size-2xl), 2.5vw, var(--os-font-size-3xl));
    font-weight: var(--os-font-weight-heavy);
    letter-spacing: -.045em;
    line-height: var(--os-line-height-tight);
}

.os-page-description {
    max-width: 760px;
    margin: var(--os-space-2) 0 0;
    color: var(--os-color-text-secondary);
    font-size: var(--os-font-size-base);
    line-height: var(--os-line-height-body);
}

.os-section-title {
    margin: 0;
    color: var(--os-color-ink);
    font-size: var(--os-font-size-xl);
    font-weight: var(--os-font-weight-bold);
    letter-spacing: -.025em;
    line-height: var(--os-line-height-heading);
}

.os-subsection-title {
    margin: 0;
    color: var(--os-color-ink);
    font-size: var(--os-font-size-md);
    font-weight: var(--os-font-weight-bold);
    letter-spacing: -.012em;
    line-height: var(--os-line-height-heading);
}

.os-card-title {
    margin: 0;
    color: var(--os-color-ink);
    font-size: var(--os-font-size-lg);
    font-weight: var(--os-font-weight-bold);
    letter-spacing: -.02em;
    line-height: var(--os-line-height-heading);
}

.os-body { color: var(--os-color-text); font-size: var(--os-font-size-base); line-height: var(--os-line-height-body); }
.os-body-small { color: var(--os-color-text-secondary); font-size: var(--os-font-size-sm); line-height: 1.5; }
.os-label { color: var(--os-color-text); font-size: var(--os-font-size-sm); font-weight: var(--os-font-weight-bold); line-height: 1.4; }
.os-caption { color: var(--os-color-text-muted); font-size: var(--os-font-size-xs); line-height: 1.45; }
.os-eyebrow { color: var(--os-color-primary); font-size: var(--os-font-size-xs); font-weight: var(--os-font-weight-heavy); letter-spacing: .12em; text-transform: uppercase; }

/* Pagina-opbouw */
.os-page {
    width: 100%;
    max-width: var(--os-page-max-width);
    margin-inline: auto;
    padding: var(--os-page-padding-block) var(--os-page-padding-inline) var(--os-space-16);
}

.os-page--narrow { max-width: var(--os-page-max-width-narrow); }
.os-page--reading { max-width: var(--os-page-max-width-reading); }

.os-page-header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--os-space-6);
    margin-bottom: var(--os-space-6);
}

.os-page-header-copy { min-width: 0; }
.os-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--os-space-2); flex-wrap: wrap; }
.os-page-content { display: grid; gap: var(--os-space-6); }
.os-section-header,
.os-detail-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--os-space-4);
}
.os-section-header { margin-bottom: var(--os-space-4); }
.os-detail-header { align-items: center; }
.os-section-header-copy,
.os-detail-header-copy { min-width: 0; }
.os-section-description { max-width: 680px; margin: var(--os-space-1) 0 0; color: var(--os-color-text-secondary); font-size: var(--os-font-size-sm); line-height: 1.5; }
.os-breadcrumb { display: flex; align-items: center; gap: var(--os-space-2); margin: 0 0 var(--os-space-3); color: var(--os-color-text-muted); font-size: var(--os-font-size-sm); line-height: 1.4; }
.os-breadcrumb a { color: var(--os-color-text-secondary); font-weight: var(--os-font-weight-semibold); text-decoration: none; }
.os-breadcrumb a:hover { color: var(--os-color-primary); text-decoration: underline; text-underline-offset: 3px; }
.os-breadcrumb-separator { color: var(--os-color-border-strong); }
.os-stack { display: grid; gap: var(--os-space-4); }
.os-stack--sm { gap: var(--os-space-2); }
.os-stack--lg { gap: var(--os-space-6); }
.os-cluster { display: flex; align-items: center; gap: var(--os-space-3); flex-wrap: wrap; }
.os-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--os-space-5); }
.os-space-top-sm { margin-top: var(--os-space-3); }
.os-space-top-md { margin-top: var(--os-space-5); }
.os-space-top-lg { margin-top: var(--os-space-6); }

/* Werkbalken en filters */
.os-toolbar,
.os-filter-bar {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--os-space-3);
    flex-wrap: wrap;
}
.os-toolbar { min-height: 54px; }
.os-filter-bar { padding: var(--os-space-3); border: 1px solid var(--os-color-border); border-radius: var(--os-radius-md); background: var(--os-color-surface); }
.os-toolbar-group,
.os-filter-group { min-width: 0; display: flex; align-items: center; gap: var(--os-space-2); flex-wrap: wrap; }
.os-filter-bar .os-search-wrap { flex: 1 1 240px; max-width: 380px; }

/* Buttons */
.os-btn {
    min-width: 0;
    min-height: var(--os-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--os-space-2);
    padding: 0 var(--os-space-4);
    border: 1px solid transparent;
    border-radius: var(--os-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--os-color-text);
    font: var(--os-font-weight-bold) var(--os-font-size-sm)/1 var(--os-font-family);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--os-transition-fast), border-color var(--os-transition-fast), color var(--os-transition-fast);
}

.os-btn:hover { text-decoration: none; }
.os-btn:focus-visible { outline: 3px solid var(--os-color-focus); outline-offset: 2px; }
.os-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.os-btn:disabled,
.os-btn[aria-disabled="true"] { opacity: .48; cursor: not-allowed; pointer-events: none; }
.os-btn-primary { border-color: var(--os-color-primary); background: var(--os-color-primary); color: #fff; }
.os-btn-primary:hover { border-color: var(--os-color-primary-hover); background: var(--os-color-primary-hover); color: #fff; }
.os-btn-secondary { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text); }
.os-btn-secondary:hover { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); color: var(--os-color-primary); }
.os-btn-outline { border-color: var(--os-color-primary-border); background: transparent; color: var(--os-color-primary); }
.os-btn-outline:hover { background: var(--os-color-primary-soft); }
.os-btn-ghost { border-color: transparent; background: transparent; color: var(--os-color-text-secondary); }
.os-btn-ghost:hover { background: var(--os-color-surface-strong); color: var(--os-color-ink); }
.os-btn-danger { border-color: var(--os-color-danger); background: var(--os-color-danger); color: #fff; }
.os-btn-danger:hover { border-color: #ab312d; background: #ab312d; color: #fff; }
.os-btn-danger.os-btn-outline { border-color: #efb5b2; background: transparent; color: var(--os-color-danger); }
.os-btn-danger.os-btn-outline:hover { background: var(--os-color-danger-soft); }
.os-btn-sm { min-height: var(--os-control-height-sm); padding-inline: var(--os-space-3); border-radius: var(--os-radius-sm); font-size: var(--os-font-size-xs); }
.os-btn-lg { min-height: var(--os-control-height-lg); padding-inline: var(--os-space-5); font-size: var(--os-font-size-base); }
.os-btn-icon { width: var(--os-control-height); padding: 0; flex: 0 0 var(--os-control-height); }
.os-btn-icon.os-btn-sm { width: var(--os-control-height-sm); flex-basis: var(--os-control-height-sm); }
.os-btn svg, .os-btn i { width: var(--os-icon-md); height: var(--os-icon-md); font-size: var(--os-icon-md); flex: 0 0 auto; }
.os-btn-loading { position: relative; color: transparent; pointer-events: none; }
.os-btn-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--os-color-primary); animation: os-spin .7s linear infinite; }
.os-btn-primary.os-btn-loading::after,
.os-btn-danger.os-btn-loading::after { color: #fff; }

/* Formulieren */
.os-form { display: grid; gap: var(--os-space-5); }
.os-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--os-space-5); }
.os-form-group { min-width: 0; display: grid; align-content: start; gap: var(--os-space-2); }
.os-form-label { color: var(--os-color-text); font-size: var(--os-font-size-sm); font-weight: var(--os-font-weight-bold); line-height: 1.4; }
.os-form-required { color: var(--os-color-danger); }
.os-form-help { margin: 0; color: var(--os-color-text-muted); font-size: var(--os-font-size-xs); line-height: 1.45; }
.os-form-error { margin: 0; color: var(--os-color-danger); font-size: var(--os-font-size-xs); font-weight: var(--os-font-weight-semibold); line-height: 1.45; }
.os-input,
.os-select,
.os-textarea,
.os-search {
    width: 100%;
    min-width: 0;
    min-height: var(--os-control-height);
    border: 1px solid var(--os-color-border-strong);
    border-radius: var(--os-radius-md);
    background: var(--os-color-surface);
    box-shadow: none;
    color: var(--os-color-ink);
    font: var(--os-font-weight-regular) var(--os-font-size-base)/1.4 var(--os-font-family);
    outline: none;
    transition: border-color var(--os-transition-fast), box-shadow var(--os-transition-fast), background-color var(--os-transition-fast);
}
.os-input, .os-search { padding: 0 var(--os-space-3); }
.os-select { padding: 0 38px 0 var(--os-space-3); }
.os-textarea { min-height: 112px; padding: var(--os-space-3); resize: vertical; }
.os-input::placeholder, .os-textarea::placeholder, .os-search::placeholder { color: var(--os-color-text-muted); opacity: 1; }
.os-input:hover, .os-select:hover, .os-textarea:hover, .os-search:hover { border-color: #c4c9d4; }
.os-input:focus, .os-select:focus, .os-textarea:focus, .os-search:focus { border-color: #9f97f6; box-shadow: 0 0 0 3px var(--os-color-focus); }
.os-input:disabled, .os-select:disabled, .os-textarea:disabled, .os-search:disabled { border-color: var(--os-color-border); background: var(--os-color-surface-strong); color: var(--os-color-text-muted); cursor: not-allowed; }
.os-input[aria-invalid="true"], .os-select[aria-invalid="true"], .os-textarea[aria-invalid="true"] { border-color: #df7772; background: #fffafa; }
.os-input[aria-invalid="true"]:focus, .os-select[aria-invalid="true"]:focus, .os-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(194, 59, 54, .12); }
.os-search-wrap { position: relative; }
.os-search-wrap > svg, .os-search-wrap > i { position: absolute; top: 50%; left: var(--os-space-3); width: var(--os-icon-md); color: var(--os-color-text-muted); transform: translateY(-50%); pointer-events: none; }
.os-search-wrap .os-search { padding-left: 40px; }
.os-checkbox, .os-radio { display: inline-flex; align-items: flex-start; gap: var(--os-space-2); color: var(--os-color-text); font-size: var(--os-font-size-base); cursor: pointer; }
.os-checkbox input, .os-radio input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--os-color-primary); flex: 0 0 auto; }
.os-switch { display: inline-flex; align-items: center; gap: var(--os-space-3); color: var(--os-color-text); font-size: var(--os-font-size-base); cursor: pointer; }
.os-switch input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.os-switch-control { position: relative; width: 42px; height: 24px; border-radius: var(--os-radius-pill); background: #dfe2e8; transition: background-color var(--os-transition-fast); flex: 0 0 auto; }
.os-switch-control::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--os-transition-fast); }
.os-switch input:checked + .os-switch-control { background: var(--os-color-primary); }
.os-switch input:checked + .os-switch-control::after { transform: translateX(18px); }
.os-switch input:focus-visible + .os-switch-control { outline: 3px solid var(--os-color-focus); outline-offset: 2px; }

/* Cards en contentoppervlakken */
.os-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--os-color-border);
    border-radius: var(--os-radius-lg);
    background: var(--os-color-surface);
    box-shadow: var(--os-shadow-card);
}
.os-card-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: var(--os-space-4); padding: var(--os-space-4) var(--os-space-5); border-bottom: 1px solid var(--os-color-border); }
.os-card-header-copy { min-width: 0; }
.os-card-header-copy p { margin: var(--os-space-1) 0 0; color: var(--os-color-text-muted); font-size: var(--os-font-size-sm); }
.os-card-body { padding: var(--os-space-5); }
.os-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--os-space-2); padding: var(--os-space-4) var(--os-space-5); border-top: 1px solid var(--os-color-border); background: var(--os-color-surface-muted); }
.os-card-flat { border-radius: 0; box-shadow: none; }
.os-card-highlight { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); }
.os-card-interactive { transition: border-color var(--os-transition-fast), background-color var(--os-transition-fast); }
.os-card-interactive:hover { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); }

/* Keuzekaarten */
.os-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--os-space-3); }
.os-choice-card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--os-space-3);
    padding: var(--os-space-4);
    border: 1px solid var(--os-color-border);
    border-radius: var(--os-radius-md);
    background: var(--os-color-surface);
    color: var(--os-color-text);
    cursor: pointer;
    transition: border-color var(--os-transition-fast), background-color var(--os-transition-fast);
}
.os-choice-card:hover { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); }
.os-choice-card:has(input:checked),
.os-choice-card[aria-selected="true"] { border-color: var(--os-color-primary); background: var(--os-color-primary-softer); }
.os-choice-card > input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--os-color-primary); }
.os-choice-card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--os-radius-md); background: var(--os-color-primary-soft); color: var(--os-color-primary); }
.os-choice-card-copy { min-width: 0; }
.os-choice-card-copy strong,
.os-choice-card-copy small { display: block; }
.os-choice-card-copy strong { color: var(--os-color-ink); font-size: var(--os-font-size-base); }
.os-choice-card-copy small { margin-top: var(--os-space-1); color: var(--os-color-text-secondary); font-size: var(--os-font-size-sm); line-height: 1.45; }

/* Tabellen */
.os-table-container { overflow: hidden; border: 1px solid var(--os-color-border); border-radius: var(--os-radius-lg); background: var(--os-color-surface); }
.os-table-scroll { width: 100%; overflow-x: auto; }
.os-table { width: 100%; border-collapse: collapse; color: var(--os-color-text); font-size: var(--os-font-size-base); text-align: left; }
.os-table th { height: 46px; padding: var(--os-space-3) var(--os-space-4); border-bottom: 1px solid var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text-muted); font-size: var(--os-font-size-xs); font-weight: var(--os-font-weight-bold); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.os-table td { min-height: 54px; padding: var(--os-space-3) var(--os-space-4); border-bottom: 1px solid var(--os-color-border); vertical-align: middle; }
.os-table tbody tr { transition: background-color var(--os-transition-fast); }
.os-table tbody tr:hover { background: var(--os-color-primary-softer); }
.os-table tbody tr[aria-selected="true"] { background: var(--os-color-primary-soft); }
.os-table tbody tr:last-child td { border-bottom: 0; }
.os-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--os-space-2); }
.os-table-toolbar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: var(--os-space-4); padding: var(--os-space-3) var(--os-space-4); border-bottom: 1px solid var(--os-color-border); }

/* Badges en alerts */
.os-badge {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: var(--os-radius-pill);
    font: var(--os-font-weight-bold) var(--os-font-size-xs)/1.2 var(--os-font-family);
    white-space: nowrap;
}
.os-badge-success { background: var(--os-color-success-soft); color: var(--os-color-success); }
.os-badge-warning { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
.os-badge-danger { background: var(--os-color-danger-soft); color: var(--os-color-danger); }
.os-badge-info { background: var(--os-color-info-soft); color: var(--os-color-info); }
.os-badge-primary { background: var(--os-color-primary-soft); color: var(--os-color-primary); }
.os-badge-neutral { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
.os-badge-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.os-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-space-4); border: 1px solid var(--os-color-border); border-radius: var(--os-radius-md); background: var(--os-color-surface); color: var(--os-color-text); font-size: var(--os-font-size-sm); line-height: 1.5; }
.os-alert strong { display: block; margin-bottom: 2px; color: var(--os-color-ink); }
.os-alert-success { border-color: #b9e6cb; background: #f2fbf5; color: #287a50; }
.os-alert-warning { border-color: #f0cfaa; background: #fff9f0; color: #97601f; }
.os-alert-danger { border-color: #efc0bd; background: #fff7f6; color: #a73a35; }
.os-alert-info { border-color: #c8daf8; background: #f5f8ff; color: #3a61a4; }

/* Dialogs, menu's en overlays */
.os-modal {
    width: min(640px, calc(100vw - 32px));
    max-height: min(86dvh, 900px);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--os-color-border);
    border-radius: var(--os-radius-xl);
    background: var(--os-color-surface);
    box-shadow: var(--os-shadow-dialog);
    color: var(--os-color-ink);
}
.os-modal--sm { width: min(440px, calc(100vw - 32px)); }
.os-modal--lg { width: min(860px, calc(100vw - 32px)); }
.os-modal--confirm .os-modal-body { display: grid; gap: var(--os-space-3); }
.os-confirm-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--os-radius-md); background: var(--os-color-warning-soft); color: var(--os-color-warning); font-size: var(--os-icon-lg); }
.os-modal::backdrop { background: rgba(18, 25, 45, .58); backdrop-filter: blur(3px); }
.os-modal-header { min-height: 72px; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--os-space-4); padding: var(--os-space-5); border-bottom: 1px solid var(--os-color-border); }
.os-modal-title { margin: 0; color: var(--os-color-ink); font-size: var(--os-font-size-lg); font-weight: var(--os-font-weight-bold); }
.os-modal-description { margin: var(--os-space-1) 0 0; color: var(--os-color-text-secondary); font-size: var(--os-font-size-sm); }
.os-modal-close { width: 44px; height: 44px; display: inline-grid; place-items: center; flex: 0 0 44px; padding: 0; border: 1px solid var(--os-color-border-strong); border-radius: 12px; background: var(--os-color-surface); color: var(--os-color-text-secondary); box-shadow: 0 2px 8px rgba(18, 25, 45, .04); cursor: pointer; }
.os-modal-close:hover { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); color: var(--os-color-primary); }

/* Elk afsluitbaar platformvenster gebruikt hetzelfde rustige kruisje. */
:is(.page-company-app, .page-platform-app, .page-pos-v2) :is(dialog, [role="dialog"]) :is(button, a)[aria-label*="sluiten" i]:not([class*="backdrop"]),
:is(.page-company-app, .page-platform-app, .page-pos-v2) :is(dialog, [role="dialog"]) .platform-modal-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    padding: 0;
    border: 1px solid var(--os-color-border-strong);
    border-radius: 12px;
    background: var(--os-color-surface);
    color: #46516a;
    box-shadow: 0 2px 8px rgba(18, 25, 45, .04);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
:is(.page-company-app, .page-platform-app, .page-pos-v2) :is(dialog, [role="dialog"]) :is(button, a)[aria-label*="sluiten" i]:not([class*="backdrop"]):hover,
:is(.page-company-app, .page-platform-app, .page-pos-v2) :is(dialog, [role="dialog"]) .platform-modal-close:hover {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-primary-softer);
    color: var(--os-color-primary);
    box-shadow: 0 4px 12px rgba(85, 71, 237, .1);
    transform: none;
}
:is(.page-company-app, .page-platform-app, .page-pos-v2) :is(dialog, [role="dialog"]) :is(button, a)[aria-label*="sluiten" i]:not([class*="backdrop"]):focus-visible,
:is(.page-company-app, .page-platform-app, .page-pos-v2) :is(dialog, [role="dialog"]) .platform-modal-close:focus-visible {
    border-color: var(--os-color-primary);
    outline: 3px solid var(--os-color-focus);
    outline-offset: 2px;
}
:is(.page-company-app, .page-platform-app, .page-pos-v2) :is(dialog, [role="dialog"]) :is(button, a)[aria-label*="sluiten" i]:not([class*="backdrop"]):disabled,
:is(.page-company-app, .page-platform-app, .page-pos-v2) :is(dialog, [role="dialog"]) .platform-modal-close:disabled {
    opacity: .45;
    cursor: not-allowed;
}
:is(.page-company-app, .page-platform-app, .page-pos-v2) :is(dialog, [role="dialog"]) :is(button, a)[aria-label*="sluiten" i]:not([class*="backdrop"]) :is(i, svg),
:is(.page-company-app, .page-platform-app, .page-pos-v2) :is(dialog, [role="dialog"]) .platform-modal-close :is(i, svg) {
    width: 16px;
    height: 16px;
    font-size: 16px;
    pointer-events: none;
}
.os-modal-body { padding: var(--os-space-5); }
.os-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--os-space-2); padding: var(--os-space-4) var(--os-space-5); border-top: 1px solid var(--os-color-border); background: var(--os-color-surface-muted); }
.os-dropdown { min-width: 190px; padding: var(--os-space-2); border: 1px solid var(--os-color-border); border-radius: var(--os-radius-md); background: var(--os-color-surface); box-shadow: var(--os-shadow-floating); }
.os-dropdown a, .os-dropdown button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: var(--os-space-2); padding: var(--os-space-2) var(--os-space-3); border: 0; border-radius: var(--os-radius-sm); background: transparent; color: var(--os-color-text); font: var(--os-font-weight-semibold) var(--os-font-size-sm)/1.3 var(--os-font-family); text-align: left; cursor: pointer; }
.os-dropdown a:hover, .os-dropdown button:hover { background: var(--os-color-primary-softer); color: var(--os-color-primary); }
.os-drawer { position: fixed; z-index: 100; top: 0; right: 0; width: min(480px, 100vw); height: 100dvh; overflow: auto; border-left: 1px solid var(--os-color-border); background: var(--os-color-surface); box-shadow: -20px 0 50px rgba(18, 25, 45, .16); }

/* Tabs, paginering en states */
.os-tabs { display: flex; align-items: center; gap: var(--os-space-1); padding: var(--os-space-1); border: 1px solid var(--os-color-border); border-radius: var(--os-radius-md); background: var(--os-color-surface-muted); overflow-x: auto; }
.os-tab { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: var(--os-space-2); padding: 0 var(--os-space-3); border: 0; border-radius: var(--os-radius-sm); background: transparent; color: var(--os-color-text-secondary); font: var(--os-font-weight-bold) var(--os-font-size-sm)/1 var(--os-font-family); white-space: nowrap; cursor: pointer; }
.os-tab:hover { color: var(--os-color-ink); }
.os-tab[aria-selected="true"], .os-tab.is-active { background: var(--os-color-surface); color: var(--os-color-primary); }
.os-pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--os-space-1); }
.os-pagination a, .os-pagination button, .os-pagination span { min-width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0 var(--os-space-2); border: 1px solid var(--os-color-border); border-radius: var(--os-radius-sm); background: var(--os-color-surface); color: var(--os-color-text-secondary); font-size: var(--os-font-size-sm); font-weight: var(--os-font-weight-bold); }
.os-pagination [aria-current="page"] { border-color: var(--os-color-primary); background: var(--os-color-primary); color: #fff; }
.os-empty-state { min-height: 220px; display: grid; place-items: center; align-content: center; gap: var(--os-space-3); padding: var(--os-space-8); color: var(--os-color-text-secondary); text-align: center; }
.os-empty-state-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--os-radius-lg); background: var(--os-color-primary-soft); color: var(--os-color-primary); font-size: var(--os-icon-lg); }
.os-empty-state h3 { margin: 0; color: var(--os-color-ink); font-size: var(--os-font-size-lg); }
.os-empty-state p { max-width: 480px; margin: 0; color: var(--os-color-text-secondary); font-size: var(--os-font-size-sm); }
.os-skeleton { position: relative; overflow: hidden; border-radius: var(--os-radius-sm); background: #eceef3; color: transparent; }
.os-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); transform: translateX(-100%); animation: os-shimmer 1.35s infinite; }
.os-spinner { width: 22px; height: 22px; display: inline-block; border: 3px solid var(--os-color-primary-soft); border-right-color: var(--os-color-primary); border-radius: 50%; animation: os-spin .7s linear infinite; }
.os-state { min-height: 160px; display: grid; place-items: center; align-content: center; gap: var(--os-space-3); padding: var(--os-space-6); text-align: center; }
.os-state-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--os-radius-lg); background: var(--os-color-primary-soft); color: var(--os-color-primary); font-size: var(--os-icon-lg); }
.os-state--success .os-state-icon { background: var(--os-color-success-soft); color: var(--os-color-success); }
.os-state--error .os-state-icon { background: var(--os-color-danger-soft); color: var(--os-color-danger); }
.os-state h2, .os-state h3 { margin: 0; color: var(--os-color-ink); font-size: var(--os-font-size-lg); }
.os-state p { max-width: 520px; margin: 0; color: var(--os-color-text-secondary); font-size: var(--os-font-size-sm); line-height: 1.5; }

/* Toasts */
.os-toast-region { position: fixed; z-index: 120; top: var(--os-space-5); right: var(--os-space-5); width: min(400px, calc(100vw - 28px)); display: grid; gap: var(--os-space-2); pointer-events: none; }
.os-toast-region--static { position: static; width: 100%; }
.os-toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--os-space-3); padding: var(--os-space-4); border: 1px solid var(--os-color-border); border-radius: var(--os-radius-lg); background: var(--os-color-surface-elevated); box-shadow: 0 18px 46px rgba(18, 25, 45, .18); color: var(--os-color-text); pointer-events: auto; animation: os-toast-enter .22s ease-out both; }
.os-toast.is-leaving { animation: os-toast-leave .2s ease-in both; }
.os-toast--success { border-color: color-mix(in srgb, var(--os-color-success) 35%, var(--os-color-border)); }
.os-toast--danger { border-color: color-mix(in srgb, var(--os-color-danger) 35%, var(--os-color-border)); }
.os-toast--warning { border-color: color-mix(in srgb, var(--os-color-warning) 35%, var(--os-color-border)); }
.os-toast > i, .os-toast > svg { margin-top: 2px; color: var(--os-color-info); }
.os-toast--success > i, .os-toast--success > svg { color: var(--os-color-success); }
.os-toast--danger > i, .os-toast--danger > svg { color: var(--os-color-danger); }
.os-toast--warning > i, .os-toast--warning > svg { color: var(--os-color-warning); }
.os-toast-copy { min-width: 0; }
.os-toast-copy > div { min-width: 0; }
.os-toast-copy p, .os-toast-copy span { margin: 2px 0 0; color: var(--os-color-text-secondary); font-size: var(--os-font-size-sm); line-height: 1.45; }
.os-toast strong, .os-toast small { display: block; }
.os-toast strong { color: var(--os-color-ink); font-size: var(--os-font-size-sm); }
.os-toast small { margin-top: 2px; color: var(--os-color-text-secondary); font-size: var(--os-font-size-sm); line-height: 1.4; }
.os-toast-close { width: 30px; height: 30px; display: grid; place-items: center; margin: -5px -7px 0 0; padding: 0; border: 0; border-radius: var(--os-radius-sm); background: transparent; color: var(--os-color-text-muted); cursor: pointer; }
.os-toast-close:hover { background: var(--os-color-hover); color: var(--os-color-ink); }
@keyframes os-toast-enter { from { opacity: 0; transform: translate3d(20px, -8px, 0) scale(.98); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes os-toast-leave { to { opacity: 0; transform: translate3d(18px, 0, 0) scale(.98); } }

/* Wizard */
.os-wizard { min-height: 100dvh; display: grid; grid-template-rows: auto auto 1fr auto; background: var(--os-color-canvas); color: var(--os-color-ink); }
.os-wizard--preview { min-height: 420px; overflow: hidden; border: 1px solid var(--os-color-border); border-radius: var(--os-radius-lg); }
.os-wizard-header { min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--os-space-4); padding: var(--os-space-3) var(--os-page-padding-inline); border-bottom: 1px solid var(--os-color-border); background: var(--os-color-surface); }
.os-wizard-title { text-align: center; }
.os-wizard-title strong, .os-wizard-title small { display: block; }
.os-wizard-title strong { color: var(--os-color-ink); font-size: var(--os-font-size-base); }
.os-wizard-title small { margin-top: 2px; color: var(--os-color-text-muted); font-size: var(--os-font-size-sm); }
.os-wizard-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--os-space-2); }
.os-wizard-body { width: 100%; max-width: 1260px; margin-inline: auto; padding: var(--os-space-8) var(--os-page-padding-inline) var(--os-space-12); }
.os-wizard-progress { display: grid; grid-template-columns: repeat(var(--os-wizard-steps, 5), minmax(0, 1fr)); gap: var(--os-space-2); padding: var(--os-space-2) var(--os-page-padding-inline) 0; background: var(--os-color-surface); }
.os-wizard-progress--4 { --os-wizard-steps: 4; }
.os-wizard-progress > span { height: 4px; border-radius: var(--os-radius-pill); background: var(--os-color-border); }
.os-wizard-progress > span.is-complete,
.os-wizard-progress > span[aria-current="step"] { background: var(--os-color-primary); }
.os-wizard-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-page-padding-inline); border-top: 1px solid var(--os-color-border); background: var(--os-color-surface); }
.os-icon-sm { width: var(--os-icon-sm); height: var(--os-icon-sm); font-size: var(--os-icon-sm); }
.os-icon-md { width: var(--os-icon-md); height: var(--os-icon-md); font-size: var(--os-icon-md); }
.os-icon-lg { width: var(--os-icon-lg); height: var(--os-icon-lg); font-size: var(--os-icon-lg); }
.os-icon-xl { width: var(--os-icon-xl); height: var(--os-icon-xl); font-size: var(--os-icon-xl); }

/*
 * Compatibiliteitslaag voor bestaande templates.
 * Functionele classes blijven bestaan; deze regels geven hun een gedeelde vorm.
 */
.page-company-app,
.page-platform-app,
.page-pos-v2,
.auth-v2,
.setup-body,
.unified-setup-body,
.onboarding-experience-body {
    font-family: var(--os-font-family);
}

.page-company-app { background: var(--os-color-canvas); color: var(--os-color-ink); }
.page-company-app .app-content { background: var(--os-color-canvas); }
.page-company-app .main:not(.main-dashboard):not(.main-agenda):not(.main-pos):not(.main-reports):not(.main-newsletter-builder):not(.main-online-presence):not(.main-company-profile) {
    width: 100%;
    max-width: var(--os-page-max-width);
    padding: var(--os-page-padding-block) var(--os-page-padding-inline) var(--os-space-16);
}

.page-company-app :is(.page-heading, .ux-page-header, .catalog-page-header, .terminal-header, .settings-page-heading):not(.operations-heading) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--os-space-6);
    margin-bottom: var(--os-space-6);
}
.page-company-app :is(.page-heading, .ux-page-header, .catalog-page-header, .terminal-header, .settings-page-heading) h1 {
    margin: 0;
    color: var(--os-color-ink);
    font-size: clamp(var(--os-font-size-2xl), 2.5vw, var(--os-font-size-3xl));
    font-weight: var(--os-font-weight-heavy);
    letter-spacing: -.045em;
    line-height: var(--os-line-height-tight);
}
.page-company-app :is(.page-heading, .ux-page-header, .catalog-page-header, .terminal-header, .settings-page-heading) p {
    max-width: 760px;
    margin: var(--os-space-2) 0 0;
    color: var(--os-color-text-secondary);
    font-size: var(--os-font-size-base);
    line-height: var(--os-line-height-body);
}
.page-company-app .breadcrumb { margin-bottom: var(--os-space-2); color: var(--os-color-text-muted); font-size: var(--os-font-size-xs); }
.page-company-app .eyebrow { color: var(--os-color-primary); font-size: var(--os-font-size-xs); font-weight: var(--os-font-weight-heavy); letter-spacing: .12em; }

.page-company-app .btn,
.page-platform-app .btn,
.page-pos-v2 .btn {
    min-height: var(--os-control-height);
    gap: var(--os-space-2);
    padding: 0 var(--os-space-4);
    border-radius: var(--os-radius-md);
    box-shadow: none;
    font-size: var(--os-font-size-sm);
    font-weight: var(--os-font-weight-bold);
    line-height: 1;
}
.page-company-app .btn:hover, .page-platform-app .btn:hover, .page-pos-v2 .btn:hover { transform: none; }
.page-company-app .btn-primary, .page-platform-app .btn-primary, .page-pos-v2 .btn-primary { border-color: var(--os-color-primary); background: var(--os-color-primary); color: #fff; }
.page-company-app .btn-primary:hover, .page-platform-app .btn-primary:hover, .page-pos-v2 .btn-primary:hover { border-color: var(--os-color-primary-hover); background: var(--os-color-primary-hover); color: #fff; }
.page-company-app .btn-secondary, .page-platform-app .btn-secondary, .page-pos-v2 .btn-secondary { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text); }
.page-company-app .btn-secondary:hover, .page-platform-app .btn-secondary:hover, .page-pos-v2 .btn-secondary:hover { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); color: var(--os-color-primary); }
.page-company-app .btn-danger, .page-pos-v2 .btn-danger { border-color: var(--os-color-danger); background: var(--os-color-danger); color: #fff; }
.page-company-app .btn-small, .page-company-app .btn-sm, .page-platform-app .btn-small, .page-pos-v2 .btn-small { min-height: var(--os-control-height-sm); padding-inline: var(--os-space-3); border-radius: var(--os-radius-sm); font-size: var(--os-font-size-xs); }
.page-company-app .icon-btn, .page-company-app .icon-button { width: var(--os-control-height); min-width: var(--os-control-height); min-height: var(--os-control-height); border-radius: var(--os-radius-md); }

.page-company-app :is(input, select, textarea).input,
.page-company-app :is(input, select, textarea).search,
.page-company-app .field > :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.page-platform-app :is(input, select, textarea).input {
    min-height: var(--os-control-height);
    border-color: var(--os-color-border-strong);
    border-radius: var(--os-radius-md);
    background: var(--os-color-surface);
    box-shadow: none;
    color: var(--os-color-ink);
    font-size: var(--os-font-size-base);
}
.page-company-app textarea.input, .page-company-app .field > textarea { min-height: 112px; padding-block: var(--os-space-3); }
.page-company-app :is(input, select, textarea).input:focus,
.page-company-app :is(input, select, textarea).search:focus,
.page-company-app .field > :is(input, select, textarea):focus,
.page-platform-app :is(input, select, textarea).input:focus { border-color: #9f97f6; box-shadow: 0 0 0 3px var(--os-color-focus); outline: none; }
.page-company-app .field { gap: var(--os-space-2); margin-bottom: var(--os-space-4); }
.page-company-app .field label, .page-company-app .field > span:first-child { color: var(--os-color-text); font-size: var(--os-font-size-sm); font-weight: var(--os-font-weight-bold); }
.page-company-app .field small { color: var(--os-color-text-muted); font-size: var(--os-font-size-xs); line-height: 1.45; }
.page-company-app :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--os-color-primary); }

.page-company-app :is(.card, .stat-card, .person-card, .form-card),
.page-platform-app :is(.card, .stat-card, .person-card, .form-card) {
    border-color: var(--os-color-border);
    border-radius: var(--os-radius-lg);
    background: var(--os-color-surface);
    box-shadow: var(--os-shadow-card);
}
.page-company-app .card-header, .page-platform-app .card-header { min-height: 68px; gap: var(--os-space-4); padding: var(--os-space-4) var(--os-space-5); border-bottom-color: var(--os-color-border); }
.page-company-app .card-header h2, .page-platform-app .card-header h2 { color: var(--os-color-ink); font-size: var(--os-font-size-lg); font-weight: var(--os-font-weight-bold); letter-spacing: -.02em; }
.page-company-app .card-header p, .page-platform-app .card-header p { margin-top: var(--os-space-1); color: var(--os-color-text-muted); font-size: var(--os-font-size-sm); }
.page-company-app .card-body, .page-platform-app .card-body { padding: var(--os-space-5); }
.page-company-app .card-footer, .page-company-app .form-footer { gap: var(--os-space-2); padding: var(--os-space-4) var(--os-space-5); border-top-color: var(--os-color-border); background: var(--os-color-surface-muted); }

.page-company-app :is(.operations-table-card, .table-card) { overflow: hidden; border: 1px solid var(--os-color-border); border-radius: var(--os-radius-lg); background: var(--os-color-surface); }
.page-company-app .table-toolbar { min-height: 62px; gap: var(--os-space-4); padding: var(--os-space-3) var(--os-space-4); border-bottom-color: var(--os-color-border); background: var(--os-color-surface); }
.page-company-app :is(.table-wrap, .operations-table-wrap) table:not(.fc-scrollgrid) th { height: 46px; padding: var(--os-space-3) var(--os-space-4); border-bottom-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text-muted); font-size: var(--os-font-size-xs); font-weight: var(--os-font-weight-bold); letter-spacing: .07em; }
.page-company-app :is(.table-wrap, .operations-table-wrap) table:not(.fc-scrollgrid) td { min-height: 54px; padding: var(--os-space-3) var(--os-space-4); border-bottom-color: var(--os-color-border); color: var(--os-color-text); font-size: var(--os-font-size-base); }
.page-company-app :is(.table-wrap, .operations-table-wrap) table:not(.fc-scrollgrid) tbody tr:hover { background: var(--os-color-primary-softer); }

.page-company-app .badge, .page-platform-app .badge, .page-pos-v2 .badge { min-height: 25px; gap: 6px; padding: 3px 9px; border-radius: var(--os-radius-pill); font-size: var(--os-font-size-xs); font-weight: var(--os-font-weight-bold); line-height: 1.2; }
.page-company-app .badge-success, .page-platform-app .badge-success, .page-pos-v2 .badge-success { background: var(--os-color-success-soft); color: var(--os-color-success); }
.page-company-app .badge-warning, .page-platform-app .badge-warning, .page-pos-v2 .badge-warning { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
.page-company-app .badge-danger, .page-platform-app .badge-danger, .page-pos-v2 .badge-danger { background: var(--os-color-danger-soft); color: var(--os-color-danger); }
.page-company-app .badge-info, .page-platform-app .badge-info, .page-pos-v2 .badge-info { background: var(--os-color-info-soft); color: var(--os-color-info); }
.page-company-app .badge-muted, .page-platform-app .badge-muted, .page-pos-v2 .badge-muted { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }

.page-company-app :is(.alert, .profile-alert), .page-platform-app .alert { border-radius: var(--os-radius-md); box-shadow: none; font-size: var(--os-font-size-sm); }
.page-company-app .profile-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--os-space-3);
    margin: 0 0 var(--os-space-4);
    padding: var(--os-space-3) var(--os-space-4);
    border: 1px solid var(--os-color-border);
    background: var(--os-color-surface);
    color: var(--os-color-text);
}
.page-company-app .profile-alert > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; flex: 0 0 26px; }
.page-company-app .profile-alert strong,
.page-company-app .profile-alert p { display: block; margin: 0; }
.page-company-app .profile-alert p { margin-top: 2px; color: currentColor; font-size: var(--os-font-size-sm); line-height: 1.45; }
.page-company-app .profile-alert-success { border-color: #b9e6cb; background: var(--os-color-success-soft); color: var(--os-color-success); }
.page-company-app .profile-alert-success > span { background: var(--os-color-surface); }
.page-company-app .profile-alert-danger { border-color: #efc0bd; background: var(--os-color-danger-soft); color: var(--os-color-danger); }
.page-company-app .profile-alert-danger > span { background: var(--os-color-surface); }
.page-company-app .settings-card { overflow: hidden; border: 1px solid var(--os-color-border); border-radius: var(--os-radius-lg); background: var(--os-color-surface); box-shadow: none; }
.page-company-app .settings-card-header { min-height: 68px; display: flex; align-items: center; justify-content: flex-start; gap: var(--os-space-3); padding: var(--os-space-4) var(--os-space-5); border-bottom: 1px solid var(--os-color-border); }
.page-company-app .settings-card-header > div:last-child { min-width: 0; }
.page-company-app .settings-card-header h2 { margin: 0; color: var(--os-color-ink); font-size: var(--os-font-size-lg); }
.page-company-app .settings-card-header p { margin: 2px 0 0; color: var(--os-color-text-secondary); font-size: var(--os-font-size-sm); }
.page-company-app .settings-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--os-radius-sm); background: var(--os-color-primary-soft); color: var(--os-color-primary); font-size: var(--os-icon-md); flex: 0 0 36px; }
.page-company-app .op-task-grid--single { grid-template-columns: 1fr; }
.page-company-app .op-eyebrow--on-dark { color: #c4d1ff; }
.page-company-app :is(.empty, .ux-empty-state) { color: var(--os-color-text-secondary); }
.page-company-app .empty-icon { color: var(--os-color-primary); }
.page-company-app :is(.choice-card, .switch-row, .relation-list > a, .relation-list.simple > div) { border-color: var(--os-color-border); border-radius: var(--os-radius-md); box-shadow: none; }
.page-company-app .choice-card:has(input:checked) { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); }
.page-company-app :is(.entity-icon, .entity-mini-icon, .mini-avatar) { background: var(--os-color-primary-soft); color: var(--os-color-primary); }

.page-company-app .modal:not(.pos-sovado-pay-dialog),
.page-platform-app .modal {
    border-color: var(--os-color-border);
    border-radius: var(--os-radius-xl);
    background: var(--os-color-surface);
    box-shadow: var(--os-shadow-dialog);
}
.page-company-app .modal:not(.pos-sovado-pay-dialog)::backdrop, .page-platform-app .modal::backdrop { background: rgba(18, 25, 45, .58); backdrop-filter: blur(3px); }
.page-company-app .modal:not(.pos-sovado-pay-dialog) header, .page-platform-app .modal header { min-height: 72px; padding: var(--os-space-5); border-bottom-color: var(--os-color-border); }
.page-company-app .modal:not(.pos-sovado-pay-dialog) .modal-body, .page-platform-app .modal .modal-body { padding: var(--os-space-5); }
.page-company-app .modal:not(.pos-sovado-pay-dialog) footer, .page-platform-app .modal footer { padding: var(--os-space-4) var(--os-space-5); border-top-color: var(--os-color-border); background: var(--os-color-surface-muted); }
.page-company-app .action-menu > div, .page-platform-app .action-menu > div { padding: var(--os-space-2); border-color: var(--os-color-border); border-radius: var(--os-radius-md); box-shadow: var(--os-shadow-floating); }
.page-company-app .action-menu :is(a, button):hover, .page-platform-app .action-menu :is(a, button):hover { background: var(--os-color-primary-softer); color: var(--os-color-primary); }

.page-company-app :focus-visible,
.page-platform-app :focus-visible,
.page-pos-v2 :focus-visible,
.auth-v2 :focus-visible,
.setup-body :focus-visible,
.unified-setup-body :focus-visible { outline: 3px solid var(--os-color-focus); outline-offset: 2px; }
.page-company-app .dashboard-search > input:focus,
.page-company-app .dashboard-search > input:focus-visible { border: 0; outline: 0; box-shadow: none; }

/* Interne design-system showcase */
.os-design-system { display: grid; gap: var(--os-space-8); }
.os-design-system-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: var(--os-space-2); padding: var(--os-space-3) 0; overflow-x: auto; background: var(--os-color-canvas); }
.os-design-system-nav a { min-height: 34px; display: inline-flex; align-items: center; padding: 0 var(--os-space-3); border: 1px solid var(--os-color-border); border-radius: var(--os-radius-pill); background: var(--os-color-surface); color: var(--os-color-text-secondary); font-size: var(--os-font-size-xs); font-weight: var(--os-font-weight-bold); white-space: nowrap; }
.os-design-system-section { display: grid; gap: var(--os-space-4); scroll-margin-top: 70px; }
.os-design-system-demo { display: flex; align-items: center; gap: var(--os-space-3); flex-wrap: wrap; }
.os-design-system-token-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--os-space-3); }
.os-token { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: var(--os-space-3); padding: var(--os-space-3); border: 1px solid var(--os-color-border); border-radius: var(--os-radius-md); background: var(--os-color-surface); }
.os-token-swatch { width: 36px; height: 36px; border: 1px solid rgba(18,25,45,.08); border-radius: var(--os-radius-sm); background: var(--token-color); }
.os-token-swatch.is-primary { --token-color: var(--os-color-primary); }
.os-token-swatch.is-ink { --token-color: var(--os-color-ink); }
.os-token-swatch.is-canvas { --token-color: var(--os-color-canvas); }
.os-token-swatch.is-surface { --token-color: var(--os-color-surface); }
.os-token-swatch.is-border { --token-color: var(--os-color-border); }
.os-token-swatch.is-success { --token-color: var(--os-color-success); }
.os-token-swatch.is-warning { --token-color: var(--os-color-warning); }
.os-token-swatch.is-danger { --token-color: var(--os-color-danger); }
.os-token strong, .os-token small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-token strong { color: var(--os-color-ink); font-size: var(--os-font-size-sm); }
.os-token small { color: var(--os-color-text-muted); font-size: var(--os-font-size-xs); }
.os-design-system-card { grid-column: span 4; }
.os-design-system-card-title { margin-top: var(--os-space-3); }
.os-design-system-search { width: 100%; max-width: 300px; }

@keyframes os-spin { to { transform: rotate(360deg); } }
@keyframes os-shimmer { to { transform: translateX(100%); } }

@media (max-width: 980px) {
    :root { --os-page-padding-inline: 20px; --os-page-padding-block: 24px; }
    .os-design-system-token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .os-design-system-card { grid-column: span 12; }
    .os-page-header { align-items: flex-start; }
    .os-wizard-header { grid-template-columns: auto minmax(0, 1fr) auto; }

    /* De desktop-subnavigatie gebruikt 100dvh. Op mobiel staat deze boven de
       inhoud en moet hij alleen de eigen bediening innemen. */
    .page-company-app .settings-subnav {
        height: auto;
        min-height: 0;
    }
}

@media (max-width: 680px) {
    :root { --os-page-padding-inline: 14px; --os-page-padding-block: 20px; }
    .page-company-app :is(.page-heading, .ux-page-header, .compact-page-header) h1 {
        display: block;
    }
    .os-page-header,
    .page-company-app :is(.page-heading, .ux-page-header, .catalog-page-header, .terminal-header, .settings-page-heading):not(.operations-heading) { align-items: stretch; flex-direction: column; gap: var(--os-space-4); }
    .os-page-actions { justify-content: flex-start; }
    .os-page-actions > .os-btn, .os-page-actions > .btn { flex: 1 1 auto; }
    .os-form-grid { grid-template-columns: 1fr; }
    .os-card-header, .os-card-body, .os-card-footer { padding-right: var(--os-space-4); padding-left: var(--os-space-4); }
    .os-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: var(--os-radius-lg); }
    .os-modal-header, .os-modal-body, .os-modal-footer { padding-right: var(--os-space-4); padding-left: var(--os-space-4); }
    .os-modal-footer { align-items: stretch; flex-direction: column-reverse; }
    .os-modal-footer .os-btn { width: 100%; }
    .os-table-toolbar { align-items: stretch; flex-direction: column; }
    .os-section-header,
    .os-detail-header,
    .os-toolbar,
    .os-filter-bar { align-items: stretch; flex-direction: column; }
    .os-filter-bar .os-search-wrap { width: 100%; max-width: none; flex-basis: auto; }
    .os-wizard-header { min-height: 64px; grid-template-columns: auto 1fr auto; padding-inline: var(--os-space-3); }
    .os-wizard-title small { display: none; }
    .os-wizard-actions .os-btn:not(:last-child) { display: none; }
    .os-wizard-body { padding: var(--os-space-6) var(--os-page-padding-inline) var(--os-space-10); }
    .os-wizard-footer { position: sticky; bottom: 0; padding-inline: var(--os-space-3); }
    .os-wizard-footer .os-btn { flex: 1 1 auto; }
    .os-toast-region { top: 14px; right: 14px; }
    .os-design-system-token-grid { grid-template-columns: 1fr; }
    .page-company-app .btn, .page-platform-app .btn, .page-pos-v2 .btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto; animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
}

/*
 * Uniform intern paginacanvas
 * --------------------------
 * Dit contract staat bewust als laatste in de cascade. Iedere normale
 * werkplekpagina gebruikt zo dezelfde achtergrond, buitenruimte en paginakop.
 * Volschermwerkplekken (agenda, kassa en builders) behouden hun eigen canvas.
 */
.page-company-app,
.page-platform-app,
.page-company-app .app-content,
.page-platform-app .platform-app-content {
    background: var(--os-color-canvas);
}

.page-company-app .main.main-dashboard,
.page-company-app .main.main-uniform-page,
.page-company-app .main:not(.main-dashboard):not(.main-agenda):not(.main-pos):not(.main-reports):not(.main-settings):not(.main-marketing):not(.main-apps):not(.main-newsletter-builder):not(.main-online-presence):not(.main-company-profile),
.page-platform-app .main {
    width: 100%;
    max-width: var(--os-page-max-width);
    min-height: 100dvh;
    margin: 0 auto;
    padding: var(--os-page-padding-block) var(--os-page-padding-inline) var(--os-space-16);
    background: var(--os-color-canvas);
    box-sizing: border-box;
}

.page-company-app .main.main-uniform-page.main-website-command {
    max-width: var(--os-page-max-width);
    padding: var(--os-page-padding-block) var(--os-page-padding-inline) var(--os-space-16);
    background: var(--os-color-canvas);
}

.page-company-app :is(.settings-workspace, .marketing-workspace, .apps-workspace) {
    min-width: 0;
    background: var(--os-color-canvas);
}

.page-company-app :is(.settings-workspace, .marketing-workspace, .apps-workspace) > :is(.settings-content, .marketing-content, .apps-content) {
    width: 100%;
    max-width: var(--os-page-max-width);
    min-width: 0;
    margin: 0;
    padding: var(--os-page-padding-block) var(--os-page-padding-inline) var(--os-space-16);
    background: var(--os-color-canvas);
    box-sizing: border-box;
}

/* App-pagina's gebruiken de volledige beschikbare breedte naast het app-submenu. */
.page-company-app .apps-workspace > .settings-content.apps-content {
    align-self: stretch;
    max-width: none;
}

.page-company-app .apps-workspace > .settings-content.apps-content > * {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Productintro's vormen één volledig canvas binnen het app-gedeelte. */
.page-company-app .apps-workspace > .settings-content.apps-content.apps-content-feature {
    min-height: 100dvh;
    display: flex;
    align-self: stretch;
    flex-direction: column;
    padding: 0;
    overflow: visible;
    background: #fff;
}

.page-company-app .apps-content-feature .app-feature-launchpad {
    min-height: 100dvh;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

.page-company-app .apps-content-feature .app-feature-launchpad > .app-feature-intro {
    min-height: 560px;
    flex: 1 1 auto;
    border: 0;
    border-bottom: 1px solid #e1e4eb;
    border-radius: 0;
}

.page-company-app .apps-content-feature .app-feature-launchpad > .app-feature-value-grid {
    flex: 0 0 auto;
    gap: 12px;
    margin: 0;
    padding: 14px 18px 16px;
    border-top: 0;
    background: var(--os-color-canvas);
}

.page-company-app .apps-content-feature .app-feature-value-grid article {
    min-height: 88px;
    border-radius: 14px;
}

.page-company-app .apps-content-feature .app-feature-intro .app-feature-intro-list {
    margin-block: 20px 22px;
}

/* Ingebedde activatiepagina's sluiten op desktop exact aan onder hun vaste navigatie. */
@media (min-width: 1121px) and (min-height: 720px) {
    body.page-company-app.page-compact-activation {
        height: 100dvh;
        overflow: hidden;
    }

    body.page-company-app.page-compact-activation .app-shell,
    body.page-company-app.page-compact-activation .app-content {
        height: 100dvh;
        min-height: 0;
    }

    body.page-company-app.page-compact-activation .app-content {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body.page-company-app.page-compact-activation .main {
        height: calc(100dvh - var(--dashboard-toolbar-height, 68px) - var(--module-subnav-height, 56px));
        min-height: calc(100dvh - var(--dashboard-toolbar-height, 68px) - var(--module-subnav-height, 56px)) !important;
        max-height: calc(100dvh - var(--dashboard-toolbar-height, 68px) - var(--module-subnav-height, 56px));
        flex: 0 0 auto;
        overflow: hidden;
    }

    /* Marketing legde via main-marketing opnieuw 100dvh op. Op de drie
       ingebedde activaties moet juist alleen de ruimte onder toolbar en subnav
       als centreervlak tellen, gelijk aan de cadeaubonnenactivatie. */
    body.page-company-app.page-marketing.page-compact-activation .main.main-marketing {
        height: calc(100dvh - var(--dashboard-toolbar-height, 68px) - var(--module-subnav-height, 56px));
        min-height: calc(100dvh - var(--dashboard-toolbar-height, 68px) - var(--module-subnav-height, 56px)) !important;
        max-height: calc(100dvh - var(--dashboard-toolbar-height, 68px) - var(--module-subnav-height, 56px));
    }

    body.page-company-app.page-compact-activation :is(
        .apps-workspace,
        .apps-content-feature,
        .app-feature-launchpad,
        .app-feature-intro
    ) {
        height: 100%;
        min-height: 0 !important;
    }

    body.page-company-app.page-compact-activation .apps-content-feature,
    body.page-company-app.page-compact-activation .app-feature-launchpad {
        overflow: hidden;
    }
}

@media (max-width: 800px) {
    .page-company-app .apps-workspace > .settings-content.apps-content.apps-content-feature {
        min-height: auto;
        padding: 0 0 92px;
        overflow: visible;
    }

    .page-company-app .apps-content-feature .app-feature-launchpad {
        min-height: auto;
    }

    .page-company-app .apps-content-feature .app-feature-launchpad > .app-feature-intro {
        min-height: 0;
        border-radius: 0;
    }

    .page-company-app .apps-content-feature .app-feature-launchpad > .app-feature-value-grid {
        padding: 14px 16px 18px;
    }
}

/* Binnencontainers mogen niet nogmaals hun eigen afwijkende pagina-padding zetten. */
.page-company-app :is(.settings-content, .marketing-content, .apps-content) > :is(
    .payments-page,
    .promotions-page,
    .promotion-detail-page,
    .subscription-dashboard-shell,
    .terminal-settings-page,
    .calendar-sync-page
) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.page-company-app .website-command,
.page-company-app .voice-shell {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

.page-company-app.page-marketing .marketing-content:has(.promotions-page),
.page-company-app.page-marketing .marketing-content:has(.promotion-detail-page) {
    width: 100%;
    max-width: var(--os-page-max-width);
    margin: 0;
    padding: var(--os-page-padding-block) var(--os-page-padding-inline) var(--os-space-16);
    background: var(--os-color-canvas);
}

/* De actie-wizard beheert zelf zijn binnenruimte en sluit daarom randloos aan. */
.page-company-app.page-marketing .marketing-content:has(.promotion-form-page) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: #fff;
}

/* Eén visuele paginakop voor alle functionele varianten. */
.page-company-app .os-page-header,
.page-company-app :is(.detail-hero, .voice-list-head, .voice-call-head) {
    min-width: 0;
    min-height: 124px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--os-space-8);
    margin: 0 0 var(--os-space-8);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-company-app .os-page-header > :first-child,
.page-company-app :is(.detail-hero, .voice-list-head, .voice-call-head) > :first-child {
    min-width: 0;
}

.page-company-app .os-page-header :is(
    .eyebrow,
    .settings-kicker,
    .page-eyebrow,
    .website-command-kicker,
    .subscription-v2-kicker,
    .dashboard-date,
    .voice-eyebrow,
    .customer-detail-kicker,
    .service-detail-kicker
) {
    min-height: 18px;
    display: inline-flex;
    align-items: center;
    gap: var(--os-space-2);
    margin: 0 0 var(--os-space-3);
    color: var(--os-color-primary);
    font-size: var(--os-font-size-xs);
    font-weight: var(--os-font-weight-heavy);
    line-height: 1.25;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.page-company-app .os-page-header h1,
.page-company-app :is(.detail-hero, .voice-list-head, .voice-call-head) h1,
.page-platform-app .os-page-header h1 {
    margin: 0;
    color: var(--os-color-ink);
    font-size: clamp(34px, 3vw, 48px);
    font-weight: var(--os-font-weight-heavy);
    line-height: 1.02;
    letter-spacing: -.055em;
}

.page-company-app .os-page-header p,
.page-company-app :is(.detail-hero, .voice-list-head, .voice-call-head) p,
.page-platform-app .os-page-header p {
    max-width: 780px;
    margin: var(--os-space-3) 0 0;
    color: var(--os-color-text-secondary);
    font-size: var(--os-font-size-md);
    line-height: 1.55;
}

.page-company-app .os-page-header :is(.heading-actions, .ux-header-actions, .website-command-header-actions, .customer-detail-actions, .service-detail-actions, .promotion-detail-actions, .lm-heading-actions),
.page-company-app :is(.detail-hero, .voice-list-head, .voice-call-head) :is(.heading-actions, .detail-actions) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--os-space-2);
    flex-wrap: wrap;
}

.page-company-app .os-page-header > :is(.btn, .button, .dashboard-primary-action, .subscription-v2-header-action),
.page-company-app .os-page-header :is(.heading-actions, .ux-header-actions, .website-command-header-actions, .customer-detail-actions, .service-detail-actions, .promotion-detail-actions, .lm-heading-actions) :is(.btn, .button),
.page-company-app :is(.detail-hero, .voice-list-head, .voice-call-head) :is(.btn, .button) {
    min-height: 54px;
    padding-right: var(--os-space-5);
    padding-left: var(--os-space-5);
    border-radius: var(--os-radius-lg);
}

/* De standaardpagina's met een automatisch sectielabel houden dat label boven
   de titel; alle maten en uitlijning zijn nu gelijk aan de overige headers. */
.page-company-app .main.main-uniform-page > .os-page-header,
.page-company-app .main.main-uniform-page > .terminal-page > .os-page-header,
.page-company-app .main.main-uniform-page > .website-command > .os-page-header {
    min-height: 124px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--os-space-8);
    row-gap: var(--os-space-2);
    margin-bottom: var(--os-space-8);
}

.page-company-app .main.main-uniform-page > .os-page-header::before,
.page-company-app .main.main-uniform-page > .terminal-page > .os-page-header::before,
.page-company-app .main.main-uniform-page > .website-command > .os-page-header::before {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding-left: 24px;
    color: var(--os-color-primary);
    background-size: 16px 16px;
    font-size: var(--os-font-size-xs);
    font-weight: var(--os-font-weight-heavy);
    line-height: 1.25;
    letter-spacing: .13em;
}

.page-company-app .main.main-uniform-page > .os-page-header > div:first-child,
.page-company-app .main.main-uniform-page > .terminal-page > .os-page-header > div:first-child,
.page-company-app .main.main-uniform-page > .website-command > .os-page-header > div:first-child {
    grid-column: 1;
    grid-row: 2;
}

.page-company-app .main.main-uniform-page > .os-page-header > :is(.btn, .heading-actions, .ux-header-actions, .status-label),
.page-company-app .main.main-uniform-page > .terminal-page > .os-page-header > :is(.btn, .terminal-secure-badge),
.page-company-app .main.main-uniform-page > .website-command > .os-page-header > .website-command-header-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.page-company-app .main.main-uniform-page > .os-page-header :is(.eyebrow, .website-command-kicker),
.page-company-app .main.main-uniform-page > .terminal-page > .os-page-header .eyebrow,
.page-company-app .main.main-uniform-page > .website-command > .os-page-header .website-command-kicker {
    display: none;
}

/* Catalogusoverzichten gebruiken dezelfde echte kicker als de Add-ons-pagina. */
.page-company-app .main.main-uniform-page > .os-page-header.settings-kicker-header::before {
    content: none;
    display: none;
    background-image: none;
}

.page-company-app .main.main-uniform-page > .os-page-header.settings-kicker-header > div:first-child {
    grid-row: 1 / span 2;
    align-self: center;
    display: block;
}

.page-company-app .main.main-uniform-page > .os-page-header.settings-kicker-header > div:first-child > :is(h1, p) {
    grid-row: auto;
}

.page-company-app .main.main-uniform-page > .os-page-header.settings-kicker-header h1 {
    display: block;
}

@media (min-width: 801px) {
    .page-company-app .main.main-uniform-page > .os-page-header.settings-kicker-header > .catalog-hero-actions {
        grid-row: 1 / span 2;
        align-self: center;
        margin-top: 0;
    }
}

.page-company-app .breadcrumb,
.page-platform-app .breadcrumb {
    width: max-content;
    max-width: 100%;
    margin: 0 0 var(--os-space-2);
    padding-left: 24px;
    overflow: hidden;
    color: var(--os-color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235547ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    font-size: var(--os-font-size-xs);
    font-weight: var(--os-font-weight-heavy);
    line-height: 1.35;
    letter-spacing: .1em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.page-platform-app .os-page-header {
    min-height: 124px;
    margin-bottom: var(--os-space-8);
}

@media (max-width: 1180px) {
    :root {
        --os-page-padding-inline: 32px;
        --os-page-padding-block: 34px;
    }
}

@media (max-width: 800px) {
    :root {
        --os-page-padding-inline: 20px;
        --os-page-padding-block: 24px;
    }

    .page-company-app :is(.settings-workspace, .marketing-workspace, .apps-workspace) > :is(.settings-content, .marketing-content, .apps-content),
    .page-company-app.page-marketing .marketing-content:has(.promotions-page),
    .page-company-app.page-marketing .marketing-content:has(.promotion-detail-page) {
        padding-bottom: 92px;
    }

    .page-company-app .os-page-header,
    .page-company-app :is(.detail-hero, .voice-list-head, .voice-call-head),
    .page-company-app .main.main-uniform-page > .os-page-header,
    .page-company-app .main.main-uniform-page > .terminal-page > .os-page-header,
    .page-company-app .main.main-uniform-page > .website-command > .os-page-header {
        min-height: 0;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: var(--os-space-4);
        margin-bottom: var(--os-space-6);
    }

    .page-company-app .main.main-uniform-page > .os-page-header::before,
    .page-company-app .main.main-uniform-page > .terminal-page > .os-page-header::before,
    .page-company-app .main.main-uniform-page > .website-command > .os-page-header::before {
        align-self: start;
    }

    .page-company-app .os-page-header h1,
    .page-company-app :is(.detail-hero, .voice-list-head, .voice-call-head) h1,
    .page-platform-app .os-page-header h1 {
        font-size: 32px;
    }

    .page-company-app .os-page-header p,
    .page-company-app :is(.detail-hero, .voice-list-head, .voice-call-head) p,
    .page-platform-app .os-page-header p {
        margin-top: var(--os-space-2);
        font-size: var(--os-font-size-base);
    }

    .page-company-app .os-page-header > :is(.btn, .button, .dashboard-primary-action, .subscription-v2-header-action),
    .page-company-app .os-page-header :is(.heading-actions, .ux-header-actions, .website-command-header-actions, .customer-detail-actions, .service-detail-actions, .promotion-detail-actions, .lm-heading-actions),
    .page-company-app :is(.detail-hero, .voice-list-head, .voice-call-head) :is(.heading-actions, .detail-actions) {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    :root {
        --os-page-padding-inline: 16px;
        --os-page-padding-block: 20px;
    }
}

/* Thema-instelling ------------------------------------------------------- */
.settings-theme-options {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--os-space-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-theme-option {
    position: relative;
    min-width: 0;
    min-height: 112px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    align-items: center;
    gap: var(--os-space-3);
    padding: var(--os-space-4);
    border: 1px solid var(--os-color-border);
    border-radius: var(--os-radius-lg);
    background: var(--os-color-surface);
    color: var(--os-color-text);
    cursor: pointer;
    transition: border-color var(--os-transition-fast), background-color var(--os-transition-fast);
}

.settings-theme-option:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
.settings-theme-option:has(input:focus-visible) { outline: 3px solid var(--os-color-focus); outline-offset: 2px; }
.settings-theme-option:has(input:checked) { border-color: var(--os-color-primary); background: var(--os-color-primary-softer); }
.settings-theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.settings-theme-option-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--os-radius-md); background: var(--os-color-surface-strong); color: var(--os-color-primary); font-size: 17px; }
.settings-theme-option-copy { min-width: 0; display: grid; gap: 4px; }
.settings-theme-option-copy strong { color: var(--os-color-ink); font-size: var(--os-font-size-base); }
.settings-theme-option-copy small { color: var(--os-color-text-secondary); font-size: var(--os-font-size-xs); line-height: 1.45; }
.settings-theme-option-check { color: var(--os-color-primary); opacity: 0; }
.settings-theme-option:has(input:checked) .settings-theme-option-check { opacity: 1; }
.settings-theme-status { min-height: 20px; margin: var(--os-space-3) 0 0; color: var(--os-color-text-muted); font-size: var(--os-font-size-xs); }
.settings-theme-status[data-state="saving"] { color: var(--os-color-info); }
.settings-theme-status[data-state="saved"] { color: var(--os-color-success); }
.settings-theme-status[data-state="error"] { color: var(--os-color-danger); }

.page-company-app .settings-theme-panel .settings-theme-options {
    gap: var(--os-space-4);
    padding: var(--os-space-5) var(--os-space-5) 0;
}

.page-company-app .settings-theme-panel .settings-theme-status {
    margin: var(--os-space-3) var(--os-space-5) var(--os-space-5);
}

@media (max-width: 900px) {
    .settings-theme-options { grid-template-columns: 1fr; }
    .settings-theme-option { min-height: 82px; }
}

@media (max-width: 520px) {
    .page-company-app .settings-theme-panel .settings-theme-options {
        padding: var(--os-space-4) var(--os-space-4) 0;
    }

    .page-company-app .settings-theme-panel .settings-theme-status {
        margin-right: var(--os-space-4);
        margin-bottom: var(--os-space-4);
        margin-left: var(--os-space-4);
    }
}

/* Platformbrede semantische dark-mode laag ----------------------------- */
html[data-theme="dark"] body.page-company-app {
    --brand: var(--os-color-primary);
    --brand-dark: var(--os-color-primary-hover);
    --ink: var(--os-color-ink);
    --muted: var(--os-color-text-secondary);
    --line: var(--os-color-border);
    --surface: var(--os-color-surface);
    --canvas: var(--os-color-canvas);
}

html[data-theme="dark"] body.page-dashboard {
    --dashboard-ink: var(--os-color-ink);
    --dashboard-muted: var(--os-color-text-secondary);
    --dashboard-line: var(--os-color-border);
    --dashboard-canvas: var(--os-color-canvas);
}

html[data-theme="dark"] .page-agenda {
    --agenda-accent: var(--os-color-primary);
    --agenda-accent-strong: var(--os-color-primary-hover);
    --agenda-accent-soft: var(--os-color-primary-soft);
    --agenda-ink: var(--os-color-ink);
    --agenda-muted: var(--os-color-text-secondary);
    --agenda-line: var(--os-color-border);
    --agenda-canvas: var(--os-color-canvas);
    --agenda-surface: var(--os-color-surface);
}

html[data-theme="dark"] .page-customers {
    --customers-accent: var(--os-color-primary);
    --customers-accent-strong: var(--os-color-primary-hover);
    --customers-accent-soft: var(--os-color-primary-soft);
    --customers-ink: var(--os-color-ink);
    --customers-muted: var(--os-color-text-secondary);
    --customers-line: var(--os-color-border);
    --customers-canvas: var(--os-color-canvas);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) {
    --catalog-ink: var(--os-color-ink);
    --catalog-muted: var(--os-color-text-secondary);
    --catalog-line: var(--os-color-border);
    --catalog-brand: var(--os-color-primary);
    --catalog-canvas: var(--os-color-canvas);
}

html[data-theme="dark"] :where(.page-pos-v2, .page-pos-admin) {
    --pos-brand: var(--os-color-primary);
    --pos-brand-dark: var(--os-color-primary-hover);
    --pos-ink: var(--os-color-ink);
    --pos-copy: var(--os-color-text);
    --pos-muted: var(--os-color-text-secondary);
    --pos-line: var(--os-color-border);
    --pos-line-strong: var(--os-color-border-strong);
    --pos-canvas: var(--os-color-canvas);
    --pos-surface: var(--os-color-surface);
    --pos-violet-soft: var(--os-color-primary-soft);
    --pos-green: var(--os-color-success);
    --pos-green-soft: var(--os-color-success-soft);
    --pos-orange: var(--os-color-warning);
    --pos-orange-soft: var(--os-color-warning-soft);
}

html[data-theme="dark"] {
    --online-ink: var(--os-color-ink);
    --online-muted: var(--os-color-text-secondary);
    --online-line: var(--os-color-border);
    --online-blue: var(--os-color-primary);
    --online-soft: var(--os-color-primary-soft);
    --online-bg: var(--os-color-canvas);
    --online-success: var(--os-color-success);
    --online-warning: var(--os-color-warning);
}

html[data-theme="dark"] .page-company-app :is(.app-content, .main, .settings-workspace, .marketing-workspace, .apps-workspace, .settings-content, .marketing-content, .apps-content) {
    background-color: var(--os-color-canvas);
    color: var(--os-color-ink);
}

html[data-theme="dark"] .page-company-app .topbar,
html[data-theme="dark"] .page-dashboard .topbar,
html[data-theme="dark"] .online-tabs {
    border-color: var(--os-color-border);
    background: color-mix(in srgb, var(--os-color-surface) 94%, transparent);
    color: var(--os-color-ink);
}

html[data-theme="dark"] .page-company-app :is(.sidebar, .sidebar-footer),
html[data-theme="dark"] .page-dashboard :is(.sidebar, .sidebar-footer),
html[data-theme="dark"] .page-platform-app .sidebar {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] :is(.page-company-app, .page-dashboard) .sidebar-settings-entry {
    border-top-color: var(--os-color-border);
}

html[data-theme="dark"] :is(.page-company-app, .page-dashboard) .sidebar-collapse-toggle {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
    box-shadow: none;
}

html[data-theme="dark"] :is(.page-company-app, .page-dashboard) .sidebar-collapse-toggle:hover {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-hover);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"].sidebar-collapsed :is(.page-company-app, .page-dashboard) .sidebar-footer-toggle {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-surface-strong);
}

html[data-theme="dark"].sidebar-collapsed :is(.page-company-app, .page-dashboard) .sidebar-footer-toggle:hover {
    background: var(--os-color-hover);
}

html[data-theme="dark"] .page-company-app .sidebar .brand-mark,
html[data-theme="dark"] .page-dashboard .sidebar .brand-mark { color: var(--os-color-ink); }
html[data-theme="dark"] .page-company-app .sidebar .brand-icon,
html[data-theme="dark"] .page-dashboard .sidebar .brand-icon { background: transparent; }
html[data-theme="dark"] .page-company-app .nav-item,
html[data-theme="dark"] .page-dashboard .nav-item { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-company-app .nav-icon,
html[data-theme="dark"] .page-dashboard .nav-icon { color: var(--os-color-text-muted); }
html[data-theme="dark"] .page-company-app .nav-item:hover,
html[data-theme="dark"] .page-dashboard .nav-item:hover { background: var(--os-color-hover); color: var(--os-color-primary-hover); }
html[data-theme="dark"] .page-company-app .nav-item.active,
html[data-theme="dark"] .page-dashboard .nav-item.active { background: var(--os-color-selected); color: var(--os-color-primary-hover); }
html[data-theme="dark"] .page-company-app .nav-item.active .nav-icon,
html[data-theme="dark"] .page-dashboard .nav-item.active .nav-icon { color: var(--os-color-primary-hover); }
html[data-theme="dark"] .page-company-app .sidebar-subscription,
html[data-theme="dark"] .page-dashboard .sidebar-subscription { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-ink); }

html[data-theme="dark"] :is(.input, .search, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea),
html[data-theme="dark"] .page-company-app :is(.os-input, .os-select, .os-textarea, .os-search) {
    border-color: var(--os-color-border-strong);
    background-color: var(--os-color-input);
    color: var(--os-color-ink);
}

html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--os-color-text-muted); }
html[data-theme="dark"] select { color-scheme: dark; }
html[data-theme="dark"] :is(.input, .search, input, select, textarea):focus { border-color: var(--os-color-primary-border); box-shadow: 0 0 0 3px var(--os-color-focus); }
html[data-theme="dark"] :is(input, select, textarea):disabled { background: var(--os-color-surface-strong); color: var(--os-color-text-muted); }

html[data-theme="dark"] :is(.card, .stat-card, .os-card, .modal, .compact-dialog, .settings-panel, .settings-export-card, .settings-privacy-card, .settings-action-card, .settings-module-intro, .settings-context-note) {
    border-color: var(--os-color-border);
    background-color: var(--os-color-surface);
    color: var(--os-color-ink);
}

html[data-theme="dark"] :is(.modal, .compact-dialog, dialog)::backdrop { background: var(--os-color-overlay); }
html[data-theme="dark"] :is(.modal header, .modal footer, .card-header, .form-footer, .drawer-footer) { border-color: var(--os-color-border); background-color: var(--os-color-surface); }
html[data-theme="dark"] :is(.icon-button, .btn-secondary, .os-btn-secondary) { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] :is(.icon-button, .btn-secondary, .os-btn-secondary):hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); color: var(--os-color-primary-hover); }
html[data-theme="dark"] :is(.btn-primary, .os-btn-primary) { border-color: var(--os-color-primary); background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] :is(.btn-primary, .os-btn-primary):hover { border-color: var(--os-color-primary-active); background: var(--os-color-primary-active); color: #fff; }
html[data-theme="dark"] :is(.btn-danger, .os-btn-danger) { border-color: #9f3735; background: #9f3735; color: #fff; }
html[data-theme="dark"] :is(.btn-danger, .os-btn-danger):hover { border-color: #ba4642; background: #ba4642; color: #fff; }
html[data-theme="dark"] :is(.os-eyebrow, .eyebrow, .settings-kicker, .link, .link-button, .table-primary-link, .page-link) { color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.logout-btn, .settings-subnav-logout, .settings-subnav-logout button, .settings-subnav-logout button span) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.settings-subnav-logout, .reports-subnav .reports-subnav-period) { border-color: var(--os-color-border); }

html[data-theme="dark"] :is(table, .os-table) { color: var(--os-color-text); }
html[data-theme="dark"] :is(th, .os-table th) { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text-muted); }
html[data-theme="dark"] :is(td, .os-table td) { border-color: var(--os-color-border); color: var(--os-color-text); }
html[data-theme="dark"] :is(tbody tr:hover, .os-table tbody tr:hover) { background: var(--os-color-hover); }

/* Dashboard */
html[data-theme="dark"] :is(.dashboard-metric-card, .dashboard-panel, .dashboard-week-panel) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] :is(.dashboard-panel-header, .dashboard-appointment-row, .dashboard-chart, .dashboard-focus, .dashboard-day-footer) { border-color: var(--os-color-border); }
html[data-theme="dark"] :is(.dashboard-day-footer, .dashboard-focus--top) { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .dashboard-action-list > a { background: var(--os-color-primary-softer); }
html[data-theme="dark"] .dashboard-action-list > a:nth-child(2) { background: color-mix(in srgb, var(--os-color-success-soft) 70%, var(--os-color-surface)); }
html[data-theme="dark"] .dashboard-action-list > a:nth-child(3) { background: color-mix(in srgb, var(--os-color-warning-soft) 70%, var(--os-color-surface)); }
html[data-theme="dark"] :is(.dashboard-hero h1, .dashboard-metric-card strong, .dashboard-panel-header h2, .dashboard-appointment-main strong, .dashboard-chart-heading strong, .dashboard-focus h3) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.dashboard-hero p, .dashboard-metric-card small, .dashboard-panel-header p, .dashboard-appointment-main small, .dashboard-action-list small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .dashboard-date,
html[data-theme="dark"] :is(.dashboard-panel-header, .dashboard-week-panel > header) > a,
html[data-theme="dark"] :is(.dashboard-focus-list small, .dashboard-chart a) { color: var(--os-color-accent-text); }
html[data-theme="dark"] body.page-company-app .dashboard-date { color: var(--os-color-accent-text); }
html[data-theme="dark"] .dashboard-primary-action { background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] .dashboard-primary-action:hover { background: var(--os-color-primary-active); color: #fff; }
html[data-theme="dark"] :is(.dashboard-status.status-confirmed, .dashboard-status.status-completed) { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .dashboard-status.status-planned { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .dashboard-day-footer strong { color: var(--os-color-text); }
html[data-theme="dark"] .dashboard-chart-heading span { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .dashboard-focus > header span { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .dashboard-week-panel > header a { color: var(--os-color-accent-text); }
html[data-theme="dark"] .dashboard-panel-header > span { color: var(--os-color-accent-text); }

/* Agenda, afspraakdrawer en planners */
html[data-theme="dark"] .page-agenda :is(.agenda-workspace, .agenda-toolbar, .agenda-summary, .agenda-view-switch, .agenda-tool-group, .agenda-filters, .agenda-drawer, .drawer-footer, .standalone-appointment-wizard, .booking-wizard-footer) { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-ink); }
html[data-theme="dark"] .page-agenda :is(.agenda-summary, .agenda-view-switch, .agenda-tool-group, .booking-wizard-footer, .standalone-wizard-footer) { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .page-agenda .full-calendar :is(.fc-scrollgrid, td, th, .fc-timegrid-slot) { border-color: var(--os-color-border); }
html[data-theme="dark"] .page-agenda .full-calendar :is(.fc-col-header-cell, .fc-list-day-cushion) { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .page-agenda .full-calendar :is(.fc-timegrid-col, .fc-daygrid-day, .fc-list-table td) { background-color: var(--os-color-surface); }
html[data-theme="dark"] .page-agenda .full-calendar :is(.fc-col-header-cell-cushion, .fc-daygrid-day-number, .fc-list-day-text, .fc-list-day-side-text) { color: var(--os-color-text); }
html[data-theme="dark"] .page-agenda .full-calendar .fc-timegrid-slot-label-cushion { color: var(--os-color-text-muted); }
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-event:hover td { background: var(--os-color-hover); }
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-day-cushion { border-color: var(--os-color-border); }
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-day-side-text {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-input);
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-event > td {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
}
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-event:hover > td { background: var(--os-color-hover); }
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-event:focus-visible > td { border-color: var(--os-color-primary-border); }
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-event-time,
html[data-theme="dark"] .page-agenda .agenda-list-event-customer { color: var(--os-color-ink); }
html[data-theme="dark"] .page-agenda :is(.agenda-list-event-service, .agenda-list-event-meta) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-agenda .agenda-list-event-location::before { color: var(--os-color-text-muted); }
html[data-theme="dark"] .page-agenda .agenda-list-event-arrow {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .page-agenda .agenda-list-event-status {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}
html[data-theme="dark"] .page-agenda .agenda-event-status-checked_in .agenda-list-event-status {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}
html[data-theme="dark"] .page-agenda .agenda-event-status-completed .agenda-list-event-status {
    background: var(--os-color-info-soft);
    color: var(--os-color-info);
}
html[data-theme="dark"] .page-agenda .agenda-event-status-no_show .agenda-list-event-status {
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning);
}
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-event[class*="agenda-event-status-cancelled"] > td { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-event[class*="agenda-event-status-cancelled"] .agenda-list-event-status {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-event[class*="agenda-event-status-cancelled"] .agenda-list-event-customer,
html[data-theme="dark"] .page-agenda .full-calendar .fc-list-empty { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-agenda :is(.booking-choice-card, .date-shortcut, .time-slot-button, .booking-search, .booking-review, .interval-options label) { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] .page-agenda :is(.booking-choice-card, .date-shortcut, .time-slot-button, .interval-options label):has(input:checked),
html[data-theme="dark"] .page-agenda :is(.date-shortcut, .time-slot-button).active { border-color: var(--os-color-primary); background: var(--os-color-selected); color: var(--os-color-primary-hover); }
html[data-theme="dark"] .page-agenda :is(.drawer-tabs, .wizard-progress, .detail-list div, .notes-details, .booking-review div) { border-color: var(--os-color-border); }
html[data-theme="dark"] .page-agenda :is(.note-box, .availability-note) { background: var(--os-color-surface-muted); color: var(--os-color-text); }
html[data-theme="dark"] .page-agenda :is(.agenda-search, .agenda-filter-search) { border-color: var(--os-color-border-strong); background: var(--os-color-input); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-agenda :is(.agenda-tool-group .btn, .agenda-view-switch button, .agenda-toolbar-action, .check-row) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-agenda .agenda-toolbar-action.btn-primary { color: #fff; }
html[data-theme="dark"] .page-agenda :is(.agenda-tool-group .btn:hover, .agenda-view-switch button:hover, .agenda-toolbar-action:hover) { background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-agenda .agenda-view-switch button.active { background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] .page-agenda :is(.text-button, [data-calendar-today]) { color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-agenda :is(.agenda-filter-head strong, .agenda-filters legend, .agenda-filters > label, .drawer-header h2) { color: var(--os-color-ink); }
html[data-theme="dark"] .page-agenda :is(.agenda-filters fieldset, .drawer-header) { border-color: var(--os-color-border); }
html[data-theme="dark"] .page-agenda .full-calendar :is(.fc-timegrid-axis, .fc-timegrid-slot-label) { background: var(--os-color-surface-muted); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-agenda .full-calendar .fc-non-business { color-scheme: dark; }
html[data-theme="dark"] .page-agenda .agenda-event-status { background: color-mix(in srgb, var(--os-color-surface-elevated) 84%, transparent); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-agenda .agenda-legend span { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-agenda .agenda-summary-help span > i {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .page-agenda .agenda-summary-help .agenda-closed-swatch {
    border-color: var(--os-color-border-strong);
    background: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 6px,
        color-mix(in srgb, var(--os-color-text-secondary) 24%, transparent) 6px,
        color-mix(in srgb, var(--os-color-text-secondary) 24%, transparent) 7px
    ) var(--os-color-surface-strong);
}
html[data-theme="dark"] .page-agenda .wizard-progress { border-color: var(--os-color-border); }
html[data-theme="dark"] .page-agenda .wizard-progress li { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-agenda .wizard-progress li:not(:last-child)::after { background: var(--os-color-border-strong); }
html[data-theme="dark"] .page-agenda .wizard-progress span { border-color: var(--os-color-border-strong); background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-agenda .wizard-progress li.active { color: var(--os-color-primary-hover); }
html[data-theme="dark"] .page-agenda .wizard-progress li.active span { border-color: var(--os-color-primary); background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] .page-agenda :is(.booking-wizard-header p, .step-heading p, .wizard-step-counter, .booking-choice-card small, .date-shortcut small, .time-slot-button small, .slot-loading, .slot-empty-state, .alternative-days small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-agenda :is(.booking-choice-card strong, .slot-empty-state strong, .choice-fieldset > legend:not(.sr-only)) { color: var(--os-color-ink); }
html[data-theme="dark"] .page-agenda .booking-choice-card:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .page-agenda .booking-choice-card:has(input:checked) { border-color: var(--os-color-primary); background: var(--os-color-selected); box-shadow: 0 0 0 1px var(--os-color-primary); }
html[data-theme="dark"] .page-agenda :is(.booking-search input, .time-slot-button, .date-shortcut) { color: var(--os-color-text); }
html[data-theme="dark"] .page-agenda .booking-search:focus-within { border-color: var(--os-color-primary-border); box-shadow: 0 0 0 3px var(--os-color-focus); }
html[data-theme="dark"] .page-agenda .date-shortcut:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-agenda .time-slot-button:hover,
html[data-theme="dark"] .page-agenda .time-slot-button.active { border-color: var(--os-color-primary); background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] .page-agenda .booking-empty { border-color: var(--os-color-border-strong); color: var(--os-color-text-secondary); }

/* Klanten en aanbod */
html[data-theme="dark"] :is(.customers-metric-card, .customers-directory, .customer-detail-card, .customer-preferences-card, .offer-catalog-status, .offer-workspace, .catalog-panel, .service-detail-card, .product-detail-card) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] :is(.customers-directory-header, .customers-table-header, .offer-workspace-header, .catalog-toolbar) { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] :is(.customers-metric-card strong, .customers-directory h2, .customer-detail-card h2, .offer-workspace h2, .catalog-panel h2) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.customers-directory p, .customers-metric-card small, .customer-detail-card p, .offer-workspace p, .catalog-panel p) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .customers-search { border-color: var(--os-color-border-strong); background: var(--os-color-input); color: var(--os-color-text-muted); }
html[data-theme="dark"] .customers-search:focus-within { border-color: var(--os-color-primary-border); background: var(--os-color-input); box-shadow: 0 0 0 3px var(--os-color-focus); }
html[data-theme="dark"] .customers-filter-tabs { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .customers-filter-tabs button { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .customers-filter-tabs button span { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .customers-filter-tabs button.active { background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] .customers-filter-tabs button.active span { background: rgba(255,255,255,.18); color: #fff; }
html[data-theme="dark"] .customers-list-head { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text-muted); }
html[data-theme="dark"] .customer-directory-row { border-color: var(--os-color-border); color: var(--os-color-text); }
html[data-theme="dark"] .customer-directory-row:hover { background: var(--os-color-hover); }
html[data-theme="dark"] :is(.customer-row-identity strong, .customer-row-date strong, .customer-row-visits strong, .customer-row-value strong) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.customer-row-contact > span, .customer-row-contact > small, .customer-row-date small, .customer-row-visits small, .customer-row-value small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .customer-row-contact i { color: var(--os-color-text-muted); }
html[data-theme="dark"] .customer-row-tags em { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .customer-status.is-active { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .customer-status.is-archived { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .customer-status.is-blocked { background: var(--os-color-danger-soft); color: var(--os-color-danger); }
html[data-theme="dark"] .customer-row-arrow { color: var(--os-color-text-muted); }
html[data-theme="dark"] .offer-status-lead small,
html[data-theme="dark"] .offer-workspace-header small { color: var(--os-color-accent-text); }
html[data-theme="dark"] .offer-products-card .offer-workspace-header small { color: var(--os-color-info); }
html[data-theme="dark"] .offer-status-lead p,
html[data-theme="dark"] .offer-workspace-header p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .offer-status-metrics { border-color: var(--os-color-border); background: var(--os-color-border); }
html[data-theme="dark"] .offer-status-metrics > span { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .offer-status-metrics strong { color: var(--os-color-ink); }
html[data-theme="dark"] .offer-status-metrics small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .offer-workspace-header { border-color: var(--os-color-border); background: var(--os-color-primary-softer); }
html[data-theme="dark"] .offer-products-card .offer-workspace-header { background: var(--os-color-info-soft); }
html[data-theme="dark"] .offer-workspace-count { border-color: var(--os-color-primary-border); background: var(--os-color-surface); color: var(--os-color-accent-text); }
html[data-theme="dark"] .offer-products-card .offer-workspace-count { border-color: color-mix(in srgb, var(--os-color-info) 45%, var(--os-color-border)); color: var(--os-color-info); }
html[data-theme="dark"] .offer-preview-panel > header strong { color: var(--os-color-ink); }
html[data-theme="dark"] .offer-preview-panel > header span { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .offer-preview-list { border-color: var(--os-color-border); }
html[data-theme="dark"] .offer-preview-row { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .offer-preview-row:hover { background: var(--os-color-hover); }
html[data-theme="dark"] :is(.offer-preview-identity strong, .offer-preview-value strong) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.offer-preview-identity small, .offer-preview-value small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .offer-preview-status.is-ready { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .offer-preview-status.is-low { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .offer-secondary-action { color: var(--os-color-accent-text); }
html[data-theme="dark"] .offer-products-card .offer-secondary-action { color: var(--os-color-info); }
html[data-theme="dark"] .offer-context-strip { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .offer-context-strip strong { color: var(--os-color-ink); }
html[data-theme="dark"] .offer-context-strip p { color: var(--os-color-text-secondary); }

/* Rapportages */
html[data-theme="dark"] .report-filter strong { color: var(--os-color-ink); }
html[data-theme="dark"] .report-filter :is(span, label) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .report-kpis article { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .report-kpis strong { color: var(--os-color-ink); }
html[data-theme="dark"] .report-kpis :is(small, em) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .report-kpi-icon { background: var(--os-color-info-soft); color: var(--os-color-info); }
html[data-theme="dark"] .report-kpi-icon.revenue { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .report-kpi-icon.customers { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .report-kpi-icon.average { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .promotion-report-kpis article { border-color: var(--os-color-primary-border); background: var(--os-color-selected); }
html[data-theme="dark"] .promotion-report-kpis small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .promotion-report-kpis strong { color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-report-grid { border-color: var(--os-color-border); }
html[data-theme="dark"] .promotion-report-grid > div + div { border-color: var(--os-color-border); }
html[data-theme="dark"] .promotion-report-grid li { border-color: var(--os-color-border); }
html[data-theme="dark"] .promotion-report-grid li small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .promotion-report-grid li b { color: var(--os-color-accent-text); }
html[data-theme="dark"] .report-bar-column > span { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .report-bar-value { color: var(--os-color-text); }
html[data-theme="dark"] .report-ranking article { border-color: var(--os-color-border); }
html[data-theme="dark"] .report-ranking article > span { background: var(--os-color-surface-strong); color: var(--os-color-text); }
html[data-theme="dark"] .report-ranking small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .report-ranking b { color: var(--os-color-ink); }
html[data-theme="dark"] .report-customer-card p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .report-customer-donut { background: radial-gradient(circle, var(--os-color-surface) 55%, transparent 57%), conic-gradient(var(--os-color-primary) calc(var(--value) * 1%), var(--os-color-surface-strong) 0); }
html[data-theme="dark"] .report-customer-donut strong { color: var(--os-color-ink); }
html[data-theme="dark"] .report-customer-donut span { color: var(--os-color-text-secondary); }

/* Instellingen, marketing en add-ons */
html[data-theme="dark"] :is(.settings-subnav, .apps-subnav) { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] :is(.settings-subnav-groups, .apps-subnav-groups) a { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.settings-subnav-groups, .apps-subnav-groups) a:hover { background: var(--os-color-hover); color: var(--os-color-primary-hover); }
html[data-theme="dark"] :is(.settings-subnav-groups, .apps-subnav-groups) a.is-active { border-color: var(--os-color-primary-border); background: var(--os-color-selected); color: var(--os-color-primary-hover); }
html[data-theme="dark"] :is(.settings-panel, .settings-module-intro, .settings-action-card, .marketing-module-grid > a, .automation-overview-strip article, .automation-preset-card, .automation-custom-grid, .automation-custom-delay, .automation-custom-variables, .automation-custom-footer, .promotion-list-panel, .promotion-form-card, .sms-panel, .sms-stat-grid article, .sms-bundle-card, .sms-custom-purchase) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .settings-panel > header { border-color: var(--os-color-border); }
html[data-theme="dark"] .settings-panel h2 { color: var(--os-color-ink); }
html[data-theme="dark"] .settings-panel p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.settings-fields-grid label > span, .settings-choice-columns legend) { color: var(--os-color-text-muted); }
html[data-theme="dark"] .settings-fields-grid label > small { color: var(--os-color-text-muted); }
html[data-theme="dark"] .settings-choice { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] .settings-choice:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .settings-choice:has(input:checked) { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] .settings-choice > span > i { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .settings-choice:has(input:checked) > span > i { background: var(--os-color-primary-soft); color: var(--os-color-primary-hover); }
html[data-theme="dark"] .settings-choice strong { color: var(--os-color-ink); }
html[data-theme="dark"] .settings-choice small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.settings-permission-note, .settings-privacy-card) { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] :is(.settings-permission-note, .settings-privacy-card) strong { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.settings-permission-note, .settings-privacy-card) p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.settings-export-card, .settings-privacy-card) h2 { color: var(--os-color-ink); }
html[data-theme="dark"] .settings-export-card p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .settings-export-card ul { color: var(--os-color-text); }
html[data-theme="dark"] .settings-export-card > span { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .settings-privacy-card > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-company-app .settings-content-header .settings-kicker { color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-company-app .settings-kicker,
html[data-theme="dark"] .page-company-app .breadcrumb a { color: var(--os-color-accent-text); }
html[data-theme="dark"] .settings-account-list { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .settings-account-list > header { border-color: var(--os-color-border); }
html[data-theme="dark"] .settings-account-list > header h2,
html[data-theme="dark"] .settings-account-identity strong,
html[data-theme="dark"] .settings-account-fact strong { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.settings-account-list > header p, .settings-account-identity span, .settings-account-fact span) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .settings-account-list > header > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .settings-account-row { border-color: var(--os-color-border); }
html[data-theme="dark"] .settings-account-row:hover { background: var(--os-color-hover); }
html[data-theme="dark"] .settings-account-access { color: var(--os-color-warning); }
html[data-theme="dark"] .settings-account-access.is-linked { color: var(--os-color-success); }
html[data-theme="dark"] .settings-row-arrow { color: var(--os-color-text-muted); }
html[data-theme="dark"] .settings-account-empty > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-settings :is(.choice-card, .schedule-day-row, .company-hours-settings .schedule-day-row, .settings-profile-stack .profile-hours-grid .schedule-day-row) { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text); }
html[data-theme="dark"] .page-settings :is(.choice-card, .schedule-day-row):hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .page-settings :is(.choice-card:has(input:checked), .schedule-day-row.is-active, .company-hours-settings .schedule-day-row.is-active, .settings-profile-stack .profile-hours-grid .schedule-day-row.is-active) { border-color: var(--os-color-primary-border); background: var(--os-color-selected); }
html[data-theme="dark"] .page-settings :is(.choice-card strong, .switch-row strong, .schedule-day-toggle strong, .section-subtitle) { color: var(--os-color-ink); }
html[data-theme="dark"] .page-settings :is(.choice-card small, .switch-row small, .schedule-day-times span, .schedule-closed-label, .settings-help, .feature-notice span) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-settings .schedule-day-toggle > span { background: var(--os-color-border-strong); }
html[data-theme="dark"] .page-settings .schedule-day-toggle input:checked + span { background: var(--os-color-primary); }
html[data-theme="dark"] .page-settings .feature-notice { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text); }
html[data-theme="dark"] .page-settings .settings-fields-grid label > span { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .billing-v2-page { color: var(--os-color-text); --package-ink: var(--os-color-ink); --package-muted: var(--os-color-text-secondary); }
html[data-theme="dark"] .billing-v2-page .subscription-v2-kicker { color: var(--os-color-accent-text); }
html[data-theme="dark"] .billing-ledger-module .billing-table-heading { border-color: var(--os-color-border); }
html[data-theme="dark"] .billing-ledger-module .os-table th { background: var(--os-color-surface-muted); color: var(--os-color-text-muted); }
html[data-theme="dark"] .billing-ledger-module .os-table td { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .booking-interval-card .card-header > div p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .booking-interval-card .interval-options label { border-color: var(--os-color-border-strong); background: var(--os-color-surface-muted); color: var(--os-color-text); }
html[data-theme="dark"] .booking-interval-card .interval-options label:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .booking-interval-card .interval-options label:has(input:checked) { border-color: var(--os-color-primary); background: var(--os-color-selected); box-shadow: 0 0 0 1px var(--os-color-primary); }
html[data-theme="dark"] .booking-interval-card .interval-options :is(strong, span) { color: var(--os-color-ink); }
html[data-theme="dark"] .booking-interval-card .interval-options small,
html[data-theme="dark"] .booking-interval-card form > footer p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .apps-active-summary { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .apps-active-summary > span { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .apps-active-summary strong { color: var(--os-color-ink); }
html[data-theme="dark"] .apps-active-summary small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card h2 { color: var(--os-color-ink); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card p,
html[data-theme="dark"] .settings-integration-card.apps-integration-card small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card strong { color: var(--os-color-accent-text); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card > span.is-violet { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card > span.is-green { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card > span.is-orange { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card > span.is-blue { background: var(--os-color-info-soft); color: var(--os-color-info); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card.is-tone-violet .apps-integration-meta > small { color: var(--os-color-accent-text); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card.is-tone-green .apps-integration-meta > small { color: var(--os-color-success); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card.is-tone-orange .apps-integration-meta > small { color: var(--os-color-warning); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card.is-tone-blue .apps-integration-meta > small { color: var(--os-color-info); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card .apps-pricing-check { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card.is-tone-violet .apps-pricing-check { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card.is-tone-green .apps-pricing-check { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card.is-tone-orange .apps-pricing-check { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card.is-tone-blue .apps-pricing-check { background: var(--os-color-info-soft); color: var(--os-color-info); }
html[data-theme="dark"] .settings-integration-card.apps-integration-card .apps-integration-arrow { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-ink); }
html[data-theme="dark"] .apps-status.is-inactive { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .apps-status.is-inactive i { background: var(--os-color-text-muted); }
html[data-theme="dark"] .apps-status.is-active { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .apps-security-note { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .apps-security-note h2 { color: var(--os-color-ink); }
html[data-theme="dark"] .apps-security-note p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.marketing-page-heading h1, .automation-page-header h1, .automation-settings-header h1, .automation-editor-heading h1, .app-feature-intro h1, .app-feature-intro h2) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.marketing-page-heading p, .automation-page-header p, .automation-settings-header p, .app-feature-intro-copy > p) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-company-app .main .marketing-page-heading .eyebrow { color: var(--os-color-accent-text); }
html[data-theme="dark"] .marketing-module-grid > a { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] .marketing-module-grid > a:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .marketing-module-grid h2 { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.marketing-module-grid p, .marketing-module-grid small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .marketing-module-grid > a > i { color: var(--os-color-text-muted); }
html[data-theme="dark"] .marketing-module-grid > a > span.purple { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .marketing-module-grid > a > span.blue { background: var(--os-color-info-soft); color: var(--os-color-info); }
html[data-theme="dark"] .marketing-module-grid > a > span.orange { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .marketing-module-grid > a > span.green { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] :is(.marketing-focus-card, .marketing-principles, .marketing-preset-card, .marketing-preset-form, .marketing-existing, .marketing-tool-hero, .giftcard-list-card, .giftcard-create-card, .giftcard-kpis article) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .marketing-focus-card > header { border-color: var(--os-color-border); }
html[data-theme="dark"] .marketing-focus-card > header span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.marketing-focus-card h2, .marketing-action-list strong, .marketing-principles h2, .marketing-preset-card h2, .marketing-preset-form h2, .marketing-existing h2, .giftcard-create-card h2, .giftcard-list-card h2, .giftcard-kpis strong, .giftcard-list-main > strong, .giftcard-balance strong, .giftcard-empty h2) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.marketing-focus-card small, .marketing-action-list small, .marketing-principles p, .marketing-preset-card small, .marketing-preset-card li p, .marketing-preset-form > div > p, .marketing-existing p, .marketing-existing small, .giftcard-create-card > div > p, .giftcard-list-card p, .giftcard-kpis small, .giftcard-list-main > small, .giftcard-balance small, .giftcard-balance span, .giftcard-empty p) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .marketing-action-list a { color: var(--os-color-text); }
html[data-theme="dark"] .marketing-action-list a:hover { background: var(--os-color-hover); }
html[data-theme="dark"] .marketing-action-list a + a { border-color: var(--os-color-border); }
html[data-theme="dark"] .marketing-action-list a > span { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .marketing-action-list > a > i { color: var(--os-color-text-muted); }
html[data-theme="dark"] .marketing-principles { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); }
html[data-theme="dark"] :is(.marketing-principles a, .marketing-existing a, .giftcard-list-main code) { color: var(--os-color-accent-text); }
html[data-theme="dark"] .marketing-message-preview { border-color: var(--os-color-primary-border); background: var(--os-color-selected); }
html[data-theme="dark"] .marketing-message-preview strong { color: var(--os-color-ink); }
html[data-theme="dark"] .marketing-message-preview p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.marketing-preset-card li + li, .marketing-existing > header, .marketing-existing article + article, .marketing-tool-steps article + article, .giftcard-list-card > header, .giftcard-list article + article) { border-color: var(--os-color-border); }
html[data-theme="dark"] :is(.marketing-preset-form label, .giftcard-create-card label) { color: var(--os-color-text); }
html[data-theme="dark"] .marketing-check { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .marketing-check strong { color: var(--os-color-ink); }
html[data-theme="dark"] .marketing-check small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .marketing-tool-steps { background: var(--os-color-surface); }
html[data-theme="dark"] .marketing-tool-steps > small { color: var(--os-color-text-muted); }
html[data-theme="dark"] .marketing-tool-steps b { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .marketing-tool-steps p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .marketing-alert.success { border-color: color-mix(in srgb, var(--os-color-success) 44%, var(--os-color-border)); background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .marketing-alert.error { border-color: color-mix(in srgb, var(--os-color-danger) 44%, var(--os-color-border)); background: var(--os-color-danger-soft); color: var(--os-color-danger); }

/* Loyaliteit */
html[data-theme="dark"] .loyalty-types span { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-ink); }
html[data-theme="dark"] .loyalty-types label:hover span { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .loyalty-types input:checked + span { border-color: var(--os-color-primary); background: var(--os-color-selected); box-shadow: inset 0 0 0 1px var(--os-color-primary); }
html[data-theme="dark"] .loyalty-types small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .loyalty-settings { border-color: var(--os-color-border); }
html[data-theme="dark"] .input-with-suffix span { border-color: var(--os-color-border-strong); background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .loyalty-preview { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); }
html[data-theme="dark"] .loyalty-preview > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .loyalty-preview small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .loyalty-preview strong { color: var(--os-color-ink); }
html[data-theme="dark"] .loyalty-preview-bar { background: var(--os-color-surface-strong); }
html[data-theme="dark"] .loyalty-preview-bar i { background: var(--os-color-primary-hover); }
html[data-theme="dark"] .loyalty-example .muted { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .loyalty-overview .report-ranking article { border-color: var(--os-color-border); }

/* Nieuwsbrieven: overzicht, wizard en controle */
html[data-theme="dark"] .newsletter-list-heading .eyebrow { color: var(--os-color-accent-text); }
html[data-theme="dark"] .newsletter-list-card { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .newsletter-campaign { border-color: var(--os-color-border); }
html[data-theme="dark"] .newsletter-campaign:hover { background: var(--os-color-hover); }
html[data-theme="dark"] .newsletter-campaign-icon { background: var(--os-color-info-soft); color: var(--os-color-info); }
html[data-theme="dark"] .newsletter-campaign :is(h3, .newsletter-campaign-title) { color: var(--os-color-ink); }
html[data-theme="dark"] .newsletter-campaign :is(p, small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-back { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-back:hover { color: var(--os-color-primary-hover); }
html[data-theme="dark"] .newsletter-progress span { color: var(--os-color-text-muted); }
html[data-theme="dark"] .newsletter-progress span:not(:last-child)::after { background: var(--os-color-border-strong); }
html[data-theme="dark"] .newsletter-progress b { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-progress .active { color: var(--os-color-accent-text); }
html[data-theme="dark"] .newsletter-progress .active b { border-color: var(--os-color-primary); background: var(--os-color-primary); color: #fff; box-shadow: 0 0 0 6px var(--os-color-primary-soft); }
html[data-theme="dark"] .newsletter-progress .done { color: var(--os-color-success); }
html[data-theme="dark"] .newsletter-progress .done b { border-color: var(--os-color-success); background: var(--os-color-success); color: #07130e; }
html[data-theme="dark"] .newsletter-progress .done::after { background: var(--os-color-success); }
html[data-theme="dark"] .newsletter-wizard-heading h1 { color: var(--os-color-ink); }
html[data-theme="dark"] .newsletter-wizard-heading p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.newsletter-goal-card, .newsletter-wizard-name, .newsletter-template-card, .newsletter-audience-card, .newsletter-filter-details, .newsletter-review-details, .newsletter-test-form, .newsletter-send-card) { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] :is(.newsletter-goal-card, .newsletter-template-card, .newsletter-audience-card):hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); box-shadow: none; }
html[data-theme="dark"] :is(.newsletter-goal-card, .newsletter-audience-card):has(input:checked) { border-color: var(--os-color-primary); background: var(--os-color-selected); box-shadow: 0 0 0 3px var(--os-color-focus); }
html[data-theme="dark"] .newsletter-template-card.selected { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] :is(.goal-icon, .audience-icon) { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.newsletter-goal-card, .newsletter-audience-card) strong { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.newsletter-goal-card small, .newsletter-wizard-name label small, .newsletter-audience-card small, .newsletter-audience-card > em, .template-card-body p) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-audience-card > b { color: var(--os-color-ink); }
html[data-theme="dark"] .template-card-body h2 { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.template-thumb, .template-full-preview) { color-scheme: light; }
html[data-theme="dark"] .newsletter-consent-note { border: 1px solid color-mix(in srgb, var(--os-color-success) 38%, var(--os-color-border)); background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .newsletter-review-details dl > div { border-color: var(--os-color-border); }
html[data-theme="dark"] .newsletter-review-details dt { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-review-details dd { color: var(--os-color-ink); }
html[data-theme="dark"] .newsletter-review-details dd small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-check.error { background: var(--os-color-danger-soft); color: var(--os-color-danger); }
html[data-theme="dark"] .newsletter-check.warning { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .newsletter-check.success { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .newsletter-send-card > label span small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-preview-tabs { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .newsletter-preview-tabs button { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-preview-tabs button.active { background: var(--os-color-selected); color: var(--os-color-accent-text); }
html[data-theme="dark"] .newsletter-review-frame { background: var(--os-color-surface-strong); }
html[data-theme="dark"] :is(.newsletter-custom-audience > div:first-child p, .newsletter-customer-checklist small, .newsletter-empty-custom) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-customer-checklist label { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .newsletter-customer-checklist label:has(input:checked) { border-color: var(--os-color-primary); background: var(--os-color-selected); }

/* SMS-tegoed */
html[data-theme="dark"] .sms-credits-page { color: var(--os-color-text); }
html[data-theme="dark"] .sms-page-tabs { border-color: var(--os-color-border); background: color-mix(in srgb, var(--os-color-surface) 94%, transparent); }
html[data-theme="dark"] .sms-page-tabs a { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-page-tabs :is(a:hover, a.is-active) { background: var(--os-color-selected); color: var(--os-color-accent-text); }
html[data-theme="dark"] .sms-page-alert { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .sms-page-alert p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-page-alert.is-success { border-color: color-mix(in srgb, var(--os-color-success) 42%, var(--os-color-border)); background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .sms-page-alert.is-warning { border-color: color-mix(in srgb, var(--os-color-warning) 42%, var(--os-color-border)); background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .sms-page-alert.is-error { border-color: color-mix(in srgb, var(--os-color-danger) 42%, var(--os-color-border)); background: var(--os-color-danger-soft); color: var(--os-color-danger); }
html[data-theme="dark"] .sms-stat-grid article { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .sms-stat-grid :is(strong, p) { color: var(--os-color-ink); }
html[data-theme="dark"] .sms-stat-grid small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-stat-grid .tone-violet { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .sms-stat-grid .tone-green { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .sms-stat-grid .tone-blue { background: var(--os-color-info-soft); color: var(--os-color-info); }
html[data-theme="dark"] .sms-stat-grid .tone-orange { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .sms-panel { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .sms-section-heading { border-color: var(--os-color-border); }
html[data-theme="dark"] .sms-section-heading span:not(.sms-secure-label) { color: var(--os-color-accent-text); }
html[data-theme="dark"] .sms-section-heading h2 { color: var(--os-color-ink); }
html[data-theme="dark"] .sms-section-heading p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-secure-label { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .sms-inline-notice { border-color: color-mix(in srgb, var(--os-color-warning) 40%, var(--os-color-border)); background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .sms-inline-notice span { color: var(--os-color-text); }
html[data-theme="dark"] .sms-bundle-card { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .sms-bundle-card:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .sms-bundle-card.is-popular { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] .sms-bundle-icon { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .sms-bundle-card h3,
html[data-theme="dark"] .sms-bundle-card > strong { color: var(--os-color-ink); }
html[data-theme="dark"] .sms-bundle-card > p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-custom-purchase { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .sms-custom-copy > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .sms-custom-copy small { color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.sms-custom-copy h3, .sms-custom-price strong) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.sms-custom-copy p, .sms-custom-price small, .sms-custom-price span) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-filter-row { border-color: var(--os-color-border); }
html[data-theme="dark"] .sms-filter-row a { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-filter-row :is(a.is-active, a:hover) { background: var(--os-color-selected); color: var(--os-color-accent-text); }
html[data-theme="dark"] .sms-data-table th { background: var(--os-color-surface-muted); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-data-table td { border-color: var(--os-color-border); color: var(--os-color-text); }
html[data-theme="dark"] .sms-data-table td small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-status-badge { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.sms-status-badge.status-delivered, .sms-status-badge.status-sent) { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] :is(.sms-status-badge.status-failed, .sms-status-badge.status-undelivered) { background: var(--os-color-danger-soft); color: var(--os-color-danger); }
html[data-theme="dark"] .sms-status-badge.status-skipped { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] :is(.sms-status-badge.status-queued, .sms-status-badge.status-scheduled, .sms-status-badge.status-processing) { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .sms-empty-state { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-amount.is-positive { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .sms-amount.is-negative { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .sms-transaction-table code { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-settings-grid article { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .sms-settings-grid article > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .sms-settings-grid strong { color: var(--os-color-ink); }
html[data-theme="dark"] .sms-settings-grid p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-settings-grid em { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-settings-grid em.is-online { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .sms-settings-footer { background: var(--os-color-surface-strong); color: var(--os-color-ink); }
html[data-theme="dark"] .sms-settings-footer span { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-settings-footer a { color: var(--os-color-accent-text); }
html[data-theme="dark"] .sms-log-filters { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .sms-log-filters label { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .sms-log-filters > div > a { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .giftcard-money-note { border-color: color-mix(in srgb, var(--os-color-info) 44%, var(--os-color-border)); background: var(--os-color-info-soft); color: var(--os-color-info); }
html[data-theme="dark"] :is(.giftcard-money-note strong, .giftcard-money-note p) { color: inherit; }
html[data-theme="dark"] :is(.giftcard-kpis article > span, .giftcard-list-icon, .giftcard-empty > span, .giftcard-list-card > header > span) { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .giftcard-list-main button { color: var(--os-color-text-muted); }
html[data-theme="dark"] .giftcard-status.active { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .giftcard-status.redeemed { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.giftcard-status.expired, .giftcard-status.void) { background: var(--os-color-danger-soft); color: var(--os-color-danger); }
html[data-theme="dark"] .giftcard-quick-values button { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] .giftcard-quick-values button:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] .giftcard-confirm { border-color: var(--os-color-primary-border); background: var(--os-color-selected); }
html[data-theme="dark"] .automation-category-nav { background: color-mix(in srgb, var(--os-color-canvas) 94%, transparent); }
html[data-theme="dark"] .automation-guidance { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); }
html[data-theme="dark"] .automation-delete-zone { border-color: color-mix(in srgb, var(--os-color-danger) 45%, var(--os-color-border)); background: var(--os-color-danger-soft); }

/* Automatiseringen: de oudere modulekleurwaarden worden volledig naar de
   semantische thematokens vertaald. */
html[data-theme="dark"] .automation-overview-strip strong,
html[data-theme="dark"] .automation-category > header h2,
html[data-theme="dark"] .automation-preset-card,
html[data-theme="dark"] .automation-preset-copy h3,
html[data-theme="dark"] .automation-create-preset-card h3,
html[data-theme="dark"] .automation-existing-section h2,
html[data-theme="dark"] .automation-existing-list strong,
html[data-theme="dark"] .automation-runs-section summary strong { color: var(--os-color-ink); }
html[data-theme="dark"] .automation-overview-strip small,
html[data-theme="dark"] .automation-category > header p,
html[data-theme="dark"] .automation-category > header > span,
html[data-theme="dark"] .automation-preset-copy p,
html[data-theme="dark"] .automation-availability-note,
html[data-theme="dark"] .automation-preset-meta,
html[data-theme="dark"] .automation-create-preset-card p,
html[data-theme="dark"] .automation-existing-section p,
html[data-theme="dark"] .automation-existing-list small,
html[data-theme="dark"] .automation-runs-section summary small,
html[data-theme="dark"] .automation-runs-section td small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .automation-page-header .eyebrow,
html[data-theme="dark"] .automation-settings-header .eyebrow,
html[data-theme="dark"] .automation-editor-heading .eyebrow,
html[data-theme="dark"] .automation-existing-section .eyebrow,
html[data-theme="dark"] .automation-custom-label,
html[data-theme="dark"] .automation-preset-action,
html[data-theme="dark"] .automation-create-preset-card > strong,
html[data-theme="dark"] .automation-guidance a { color: var(--os-color-accent-text); }
html[data-theme="dark"] .automation-guidance strong { color: var(--os-color-ink); }
html[data-theme="dark"] .automation-guidance p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .automation-category-nav a { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .automation-category-nav a:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] .automation-category-nav span,
html[data-theme="dark"] .automation-existing-section > header > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .automation-preset-card:hover { border-color: var(--os-color-primary-border); }
html[data-theme="dark"] .automation-preset-card.is-active { border-color: color-mix(in srgb, var(--os-color-success) 48%, var(--os-color-border)); }
html[data-theme="dark"] .automation-preset-card-unavailable { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .automation-custom-preset-card { background: linear-gradient(180deg,var(--os-color-surface),var(--os-color-primary-softer)); }
html[data-theme="dark"] .automation-preset-action,
html[data-theme="dark"] .automation-existing-section > header,
html[data-theme="dark"] .automation-existing-list article + article,
html[data-theme="dark"] .automation-runs-section details[open] > summary { border-color: var(--os-color-border); }
html[data-theme="dark"] .automation-preset-status,
html[data-theme="dark"] .automation-settings-state { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .automation-preset-status.is-active,
html[data-theme="dark"] .automation-settings-state.is-active { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .automation-preset-status.is-paused { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .automation-preset-status.is-unavailable { background: var(--os-color-surface-strong); color: var(--os-color-text-muted); }
html[data-theme="dark"] :is(.automation-existing-section, .automation-runs-section, .automation-message-example, .automation-settings-form, .automation-editor-section, .automation-advanced-settings, .automation-editor-savebar, .automation-live-preview, .automation-configuration-summary) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .automation-back-link { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .automation-back-link:hover { color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.automation-settings-form h2, .automation-editor-section h2, .automation-trigger-card strong, .automation-audience-option strong, .automation-advanced-settings strong, .automation-live-preview h2, .automation-configuration-summary h2, .automation-preview-sender strong, .automation-preview-mail h3) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.automation-settings-form header p, .automation-field small, .automation-editor-section > header p, .automation-trigger-card small, .automation-delay-block > p, .automation-audience-option small, .automation-variable-row > span, .automation-advanced-settings small, .automation-preview-sender small, .automation-preview-mail p, .automation-configuration-summary dt, .automation-mini-flow small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.automation-field, .automation-fieldset legend, .automation-delay-block > label, .automation-configuration-summary dd) { color: var(--os-color-text); }
html[data-theme="dark"] .automation-fieldset,
html[data-theme="dark"] .automation-trigger-card { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .automation-fieldset > p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .automation-active-choice { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); }
html[data-theme="dark"] .automation-active-choice strong { color: var(--os-color-ink); }
html[data-theme="dark"] .automation-active-choice small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .automation-consent-note { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .automation-editor-section > header,
html[data-theme="dark"] :is(.automation-live-preview, .automation-configuration-summary) > header,
html[data-theme="dark"] .automation-preview-sender,
html[data-theme="dark"] .automation-configuration-summary dl > div + div { border-color: var(--os-color-border); }
html[data-theme="dark"] .automation-delay-builder { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); color: var(--os-color-text); }
html[data-theme="dark"] .automation-audience-option { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .automation-audience-option:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .automation-audience-option:has(input:checked) { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] .automation-audience-icon,
html[data-theme="dark"] .automation-advanced-settings summary > span,
html[data-theme="dark"] .automation-live-preview header > span { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .automation-variable-row button { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); color: var(--os-color-accent-text); }
html[data-theme="dark"] .automation-switch { background: var(--os-color-border-strong); }
html[data-theme="dark"] .automation-switch::after { background: var(--os-color-ink); }
html[data-theme="dark"] .automation-preview-mail { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .automation-mini-flow { background: var(--os-color-primary-softer); }
html[data-theme="dark"] .automation-configuration-summary > footer { border-color: color-mix(in srgb, var(--os-color-success) 38%, var(--os-color-border)); background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .automation-delete-zone-copy strong { color: var(--os-color-danger); }
html[data-theme="dark"] .automation-delete-zone-copy small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .automation-delete-button { border-color: color-mix(in srgb, var(--os-color-danger) 55%, var(--os-color-border)); background: var(--os-color-surface); color: var(--os-color-danger); }
html[data-theme="dark"] .automation-delete-button:hover { background: var(--os-color-danger-soft); }
html[data-theme="dark"] .automation-channel-option { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text); }
html[data-theme="dark"] .automation-channel-option:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .automation-channel-option.is-active { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] .automation-channel-option strong,
html[data-theme="dark"] .automation-channel-fields-header strong,
html[data-theme="dark"] .automation-sms-meter strong { color: var(--os-color-ink); }
html[data-theme="dark"] .automation-channel-option small,
html[data-theme="dark"] .automation-channel-fields-header small,
html[data-theme="dark"] .automation-sms-meter small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .automation-channel-fields,
html[data-theme="dark"] .automation-sms-meter > span { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .automation-sms-fields { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); }
html[data-theme="dark"] .automation-channel-fields-header { border-color: var(--os-color-border); }
html[data-theme="dark"] .automation-channel-fields-header > a { color: var(--os-color-accent-text); }
html[data-theme="dark"] .automation-sms-meter > p { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] :is(.automation-live-preview, .automation-configuration-summary) header > small { color: var(--os-color-accent-text); }

/* Kortingen en acties */
html[data-theme="dark"] :is(.promotions-page, .promotion-detail-page, .promotion-form-page) {
    --ink: var(--os-color-ink);
    --muted: var(--os-color-text-secondary);
    --line: var(--os-color-border);
    --violet: var(--os-color-primary-hover);
    --violet-soft: var(--os-color-primary-soft);
    color: var(--os-color-text);
}
html[data-theme="dark"] .promotions-heading .eyebrow { color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-overview-grid article { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] :is(.promotion-overview-grid strong, .promotion-list-toolbar h2, .promotion-row-main strong, .promotion-row-result strong, .promotion-empty h3, .promotion-module-footer strong) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.promotion-overview-grid small, .promotion-list-toolbar p, .promotion-row-main em, .promotion-row-period, .promotion-row-period small, .promotion-row-result small, .promotion-empty p, .promotion-module-footer) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .promotion-list-toolbar,
html[data-theme="dark"] .promotion-row { border-color: var(--os-color-border); }
html[data-theme="dark"] .promotion-filters { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .promotion-filters a { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .promotion-filters a:hover { background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-filters a.is-active { border-color: var(--os-color-primary-border); background: var(--os-color-selected); color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-row { color: var(--os-color-text); }
html[data-theme="dark"] .promotion-row:hover { background: var(--os-color-hover); }
html[data-theme="dark"] .promotion-row-main small { color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-row-period strong { color: var(--os-color-text); }
html[data-theme="dark"] .promotion-row-arrow { color: var(--os-color-text-muted); }
html[data-theme="dark"] .promotion-status { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .promotion-status.is-active { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .promotion-row-value { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-status.is-scheduled { background: var(--os-color-info-soft); color: var(--os-color-info); }
html[data-theme="dark"] .promotion-status.is-paused { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] :is(.promotion-status.is-expired, .promotion-status.is-ended) { background: var(--os-color-danger-soft); color: var(--os-color-danger); }
html[data-theme="dark"] .promotion-module-footer button { color: var(--os-color-danger); }

html[data-theme="dark"] .promotion-form-page { background: var(--os-color-canvas); }
html[data-theme="dark"] .promotion-wizard-header { border-color: var(--os-color-border); background: color-mix(in srgb, var(--os-color-surface) 96%, transparent); }
html[data-theme="dark"] .promotion-wizard-header > a { border-color: var(--os-color-border-strong); color: var(--os-color-text); }
html[data-theme="dark"] .promotion-wizard-header small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .promotion-wizard-header strong,
html[data-theme="dark"] .promotion-step-heading h1,
html[data-theme="dark"] .promotion-type-card strong,
html[data-theme="dark"] .promotion-field-label,
html[data-theme="dark"] .promotion-form-card label { color: var(--os-color-ink); }
html[data-theme="dark"] .promotion-wizard-header > span { color: var(--os-color-success); }
html[data-theme="dark"] .promotion-progress button { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .promotion-progress button::before { background: var(--os-color-border-strong); }
html[data-theme="dark"] .promotion-progress button i { border-color: var(--os-color-border-strong); background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .promotion-progress button:is(.is-active, .is-complete) { color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-progress button:is(.is-active, .is-complete)::before,
html[data-theme="dark"] .promotion-progress button:is(.is-active, .is-complete) i { border-color: var(--os-color-primary); background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] .promotion-step-heading > span,
html[data-theme="dark"] .promotion-type-card > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.promotion-step-heading p, .promotion-type-card small, .promotion-field-label small, .promotion-form-card label > small, .promotion-audience-customers .muted) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .promotion-type-card { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .promotion-type-card:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .promotion-type-card:has(input:checked) { border-color: var(--os-color-primary); background: var(--os-color-selected); box-shadow: inset 0 0 0 1px var(--os-color-primary); }
html[data-theme="dark"] :is(.promotion-target-group, .promotion-form-card, .promotion-audience-customers) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] :is(.promotion-specific-targets, .promotion-specific-targets details, .promotion-form-card hr) { border-color: var(--os-color-border); }
html[data-theme="dark"] .promotion-choice-tile span,
html[data-theme="dark"] .promotion-check-list span,
html[data-theme="dark"] .promotion-weekdays span,
html[data-theme="dark"] .promotion-toggle-list span { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .promotion-choice-tile:has(input:checked) span,
html[data-theme="dark"] .promotion-check-list label:has(input:checked) span,
html[data-theme="dark"] .promotion-toggle-list label:has(input:checked) span { border-color: var(--os-color-primary); background: var(--os-color-selected); color: var(--os-color-accent-text); box-shadow: inset 0 0 0 1px var(--os-color-primary); }
html[data-theme="dark"] .promotion-check-list label:has(input:checked) strong { color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-form-card :is(input, select, textarea),
html[data-theme="dark"] .promotion-input-affix { border-color: var(--os-color-border-strong); background: var(--os-color-input); color: var(--os-color-text); }
html[data-theme="dark"] .promotion-toggle-list i { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-wizard-footer { border-color: var(--os-color-border); background: color-mix(in srgb, var(--os-color-surface) 97%, transparent); }
html[data-theme="dark"] .promotion-wizard-footer > span b { color: var(--os-color-ink); }
html[data-theme="dark"] .promotion-wizard-footer > span small { color: var(--os-color-text-secondary); }

html[data-theme="dark"] .promotion-detail-title > a,
html[data-theme="dark"] .promotion-detail-actions summary { border-color: var(--os-color-border-strong); color: var(--os-color-text); }
html[data-theme="dark"] .promotion-detail-title > span,
html[data-theme="dark"] .promotion-detail-card header > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-detail-title small { color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.promotion-detail-title h1, .promotion-detail-metrics strong, .promotion-detail-card h2, .promotion-detail-rules dd, .promotion-usage-list strong) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.promotion-detail-title p, .promotion-detail-metrics small, .promotion-detail-metrics span, .promotion-detail-rules dt, .promotion-target-summary small, .promotion-description, .promotion-usage-list small, .promotion-usage-empty) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.promotion-detail-metrics article, .promotion-detail-card, .promotion-detail-actions details > div) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] :is(.promotion-detail-card header, .promotion-detail-rules > div, .promotion-target-summary > div, .promotion-usage-list article) { border-color: var(--os-color-border); }
html[data-theme="dark"] .promotion-detail-actions form button { color: var(--os-color-text); }
html[data-theme="dark"] .promotion-detail-actions form button:hover { background: var(--os-color-hover); }
html[data-theme="dark"] .promotion-detail-actions form button.is-danger { color: var(--os-color-danger); }
html[data-theme="dark"] .promotion-target-summary b { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .promotion-usage-list article > span { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }

/* Abonnement: ook de prijskaarten en betaalgegevens blijven donker. */
html[data-theme="dark"] .page-package {
    --package-ink: var(--os-color-ink);
    --package-muted: var(--os-color-text-secondary);
    --package-line: var(--os-color-border);
    --package-brand: var(--os-color-accent-text);
}
html[data-theme="dark"] .subscription-dashboard-v2 {
    --package-ink: var(--os-color-ink);
    --package-muted: var(--os-color-text-secondary);
    --package-line: var(--os-color-border);
    --package-brand: var(--os-color-accent-text);
}
html[data-theme="dark"] .page-package :is(.subscription-v2-kicker, .subscription-commerce-head small) { color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-package .subscription-v2-header-action { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] .page-package .subscription-v2-header-action:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-package .subscription-change-banner { border-color: color-mix(in srgb, var(--os-color-success) 45%, var(--os-color-border)); background: var(--os-color-success-soft); }
html[data-theme="dark"] .page-package .subscription-change-banner > span { background: color-mix(in srgb, var(--os-color-success) 20%, var(--os-color-surface)); color: var(--os-color-success); }
html[data-theme="dark"] .page-package .subscription-change-banner :is(small, p) { color: var(--os-color-success); }
html[data-theme="dark"] .page-package :is(.subscription-v2-metric, .subscription-plans, .subscription-module, .subscription-tier, .subscription-billing-compact, .subscription-danger-zone) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .page-package .subscription-tier.recommended { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] .page-package .subscription-tier.current { box-shadow: inset 0 0 0 1px var(--os-color-primary-border); }
html[data-theme="dark"] .page-package :is(.subscription-v2-metric strong, .subscription-commerce-head h2, .subscription-tier h3, .subscription-tier-price span strong, .subscription-billing-toggle strong, .subscription-danger-zone strong) { color: var(--os-color-ink); }
html[data-theme="dark"] .page-package :is(.subscription-v2-metric small, .subscription-v2-metric > div > span:not(.subscription-status), .subscription-commerce-head p, .subscription-tier header p, .subscription-tier-price span small, .subscription-tier-price em, .subscription-tier li, .subscription-billing-toggle em, .subscription-danger-zone p) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-package .subscription-cycle-toggle { border-color: var(--os-color-border); background: var(--os-color-surface-strong); }
html[data-theme="dark"] .page-package .subscription-cycle-toggle button { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-package .subscription-cycle-toggle button.active { background: var(--os-color-surface); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-package .subscription-tier > header > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-package .subscription-tier ul { border-color: var(--os-color-border); }
html[data-theme="dark"] .page-package .subscription-billing-toggle { background: var(--os-color-surface); color: var(--os-color-ink); }
html[data-theme="dark"] .page-package .subscription-billing-toggle > span > i { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-package .subscription-billing-compact > form { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .page-package .subscription-danger-zone { border-color: color-mix(in srgb, var(--os-color-danger) 42%, var(--os-color-border)); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-v2-kicker { color: var(--os-color-accent-text); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-v2-header-action { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-change-banner { border-color: color-mix(in srgb, var(--os-color-success) 45%, var(--os-color-border)); background: var(--os-color-success-soft); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-change-banner > span { background: color-mix(in srgb, var(--os-color-success) 20%, var(--os-color-surface)); color: var(--os-color-success); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-change-banner :is(small, p) { color: var(--os-color-success); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-change-banner.is-cancellation { border-color: color-mix(in srgb, var(--os-color-danger) 45%, var(--os-color-border)); background: var(--os-color-danger-soft); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-change-banner.is-cancellation > span { background: color-mix(in srgb, var(--os-color-danger) 20%, var(--os-color-surface)); color: var(--os-color-danger); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-change-banner.is-cancellation :is(small, p) { color: var(--os-color-danger); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-access-banner { border-color: color-mix(in srgb, var(--os-color-warning) 45%, var(--os-color-border)); background: var(--os-color-warning-soft); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-access-banner > span { background: color-mix(in srgb, var(--os-color-warning) 20%, var(--os-color-surface)); color: var(--os-color-warning); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-access-banner :is(strong, p, small) { color: var(--os-color-warning); }
html[data-theme="dark"] .subscription-dashboard-v2 :is(.subscription-v2-metric, .subscription-plans, .subscription-module, .subscription-tier, .subscription-billing-compact, .subscription-danger-zone) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-tier.recommended { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] .subscription-dashboard-v2 :is(.subscription-v2-metric strong, .subscription-commerce-head h2, .subscription-tier h3, .subscription-tier-price span strong, .subscription-billing-toggle strong, .subscription-danger-zone strong) { color: var(--os-color-ink); }
html[data-theme="dark"] .subscription-dashboard-v2 :is(.subscription-v2-metric small, .subscription-v2-metric > div > span:not(.subscription-status), .subscription-commerce-head p, .subscription-tier header p, .subscription-tier-price span small, .subscription-tier-price em, .subscription-tier li, .subscription-billing-toggle em, .subscription-danger-zone p) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-commerce-head small { color: var(--os-color-accent-text); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-cycle-toggle { border-color: var(--os-color-border); background: var(--os-color-surface-strong); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-cycle-toggle button { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-cycle-toggle button.active { background: var(--os-color-surface); color: var(--os-color-accent-text); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-cycle-toggle button span { color: var(--os-color-success); }
html[data-theme="dark"] .subscription-dashboard-v2 :is(.subscription-billing-toggle small, .subscription-addon-card > div:nth-child(2) > span) { color: var(--os-color-accent-text); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-tier > header > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-tier ul { border-color: var(--os-color-border); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-billing-toggle { background: var(--os-color-surface); color: var(--os-color-ink); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-billing-toggle > span > i { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-billing-compact > form { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] :is(.page-package, .subscription-dashboard-v2) .subscription-billing-compact form > footer > span { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .subscription-dashboard-v2 .subscription-danger-zone { border-color: color-mix(in srgb, var(--os-color-danger) 42%, var(--os-color-border)); }
html[data-theme="dark"] .subscription-dialog-kicker { color: var(--os-color-accent-text); }
html[data-theme="dark"] .subscription-change-review { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .subscription-change-review > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .subscription-change-review strong { color: var(--os-color-ink); }
html[data-theme="dark"] .subscription-change-review :is(small, p) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .subscription-change-review.is-warning { border-color: color-mix(in srgb, var(--os-color-warning) 45%, var(--os-color-border)); background: var(--os-color-warning-soft); }
html[data-theme="dark"] .subscription-change-review.is-warning > span { background: color-mix(in srgb, var(--os-color-warning) 20%, var(--os-color-surface)); color: var(--os-color-warning); }
html[data-theme="dark"] .subscription-change-review.is-positive { border-color: color-mix(in srgb, var(--os-color-success) 45%, var(--os-color-border)); background: var(--os-color-success-soft); }
html[data-theme="dark"] .subscription-change-review.is-positive > span { background: color-mix(in srgb, var(--os-color-success) 20%, var(--os-color-surface)); color: var(--os-color-success); }
html[data-theme="dark"] .subscription-change-timing legend { color: var(--os-color-text); }
html[data-theme="dark"] .subscription-change-timing label > span { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .subscription-change-timing label > span > i { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .subscription-change-timing label :is(strong, small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .subscription-change-timing input:checked + span { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] .subscription-change-timing input:checked + span > i { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .subscription-change-confirm { background: var(--os-color-surface-muted); color: var(--os-color-text-secondary); }

/* Klantvoorkeuren en widgetbeheer. */
html[data-theme="dark"] .customer-inline-preference { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .customer-inline-preference:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .customer-inline-preference.is-blocking { background: color-mix(in srgb, var(--os-color-danger-soft) 60%, var(--os-color-surface)); }
html[data-theme="dark"] .customer-preference-copy strong { color: var(--os-color-ink); }
html[data-theme="dark"] .customer-preference-copy small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .customer-inline-toggle { background: var(--os-color-border-strong); }
html[data-theme="dark"] :is(.customer-form-card, .customer-consent-card, .customer-save-card) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] :is(.customer-card-heading, .customer-consent-card > header) { border-color: var(--os-color-border); }
html[data-theme="dark"] :is(.customer-card-heading h2, .customer-consent-card h2, .customer-consent-row strong, .customer-save-card strong) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.customer-card-heading p, .customer-consent-card p, .customer-consent-row small, .customer-save-card p) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .customer-consent-row { border-color: var(--os-color-border); }
html[data-theme="dark"] .online-widget-layout { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .online-widget-preview-card { border-color: var(--os-color-border); background: var(--os-color-surface-strong); }
html[data-theme="dark"] .online-widget-preview-card > header { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .online-widget-preview-card > header strong { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .online-widget-preview-card iframe { background: #fff; color-scheme: light; }

/* Websitebeheer: alleen het beheerscherm volgt het thema. De websitepreview
   in het iframe blijft bewust de door de gebruiker gekozen website-uitstraling. */
html[data-theme="dark"] .op-studio .op-eyebrow { color: var(--os-color-accent-text); }
html[data-theme="dark"] .op-studio-head h1,
html[data-theme="dark"] :is(.op-panel-head h2, .op-task strong, .op-section-editor summary, .op-help-card h3, .op-media-card strong, .op-page-card h3, .op-version-row strong, .op-form-stack label, .wg-visibility-card strong) { color: var(--os-color-ink); }
html[data-theme="dark"] .op-studio-head p,
html[data-theme="dark"] :is(.op-panel-head p, .op-task small, .op-section-editor summary small, .op-help-card p, .op-empty, .op-media-card small, .op-page-card p, .op-version-row small, .op-form-stack label small, .wg-visibility-card small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .op-status { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .op-status.is-live { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .op-studio-nav { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .op-studio-nav a { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .op-studio-nav a:hover { background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] .op-studio-nav a.is-active { background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] :is(.op-studio-panel, .op-media-card, .op-page-card, .op-section-editor) { border-color: var(--os-color-border); background: var(--os-color-surface); box-shadow: none; }
html[data-theme="dark"] .op-panel-head { border-color: var(--os-color-border); }
html[data-theme="dark"] .op-task { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text); }
html[data-theme="dark"] .op-task:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); box-shadow: none; }
html[data-theme="dark"] .op-task > span:first-child { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .op-help-card { border: 1px solid var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .op-section-editor[open] { border-color: var(--os-color-primary-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .op-upload-zone { border-color: var(--os-color-border-strong); background: var(--os-color-surface-muted); color: var(--os-color-text); }
html[data-theme="dark"] .op-upload-zone:hover,
html[data-theme="dark"] .op-upload-zone.is-dragover { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] .op-preview-shell,
html[data-theme="dark"] .wg-preview-frame { border-color: var(--os-color-border); background: var(--os-color-surface-strong); }
html[data-theme="dark"] :is(.op-preview-shell, .wg-preview-frame) iframe { background: #fff; color-scheme: light; }
html[data-theme="dark"] .op-checklist li,
html[data-theme="dark"] .op-version-row { border-color: var(--os-color-border); }
html[data-theme="dark"] .op-danger-zone { border-color: color-mix(in srgb, var(--os-color-danger) 42%, var(--os-color-border)); background: var(--os-color-danger-soft); }
html[data-theme="dark"] .op-danger-zone h3 { color: var(--os-color-danger); }
html[data-theme="dark"] .op-danger-zone p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .wg-visibility-card button { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] .wg-visibility-card { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] .wg-visibility-card button:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .wg-visibility-card button i { color: var(--os-color-accent-text); }
html[data-theme="dark"] .op-studio .wg-device-switch { background: var(--os-color-surface-strong); }
html[data-theme="dark"] .op-studio .wg-device-switch button { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .op-studio .wg-device-switch button:hover { background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] .op-studio .wg-device-switch button.is-active { background: var(--os-color-selected); color: var(--os-color-accent-text); box-shadow: none; }
html[data-theme="dark"] .op-studio :is(h3, .op-checklist span, .op-version-row > span) { color: var(--os-color-ink); }

/* Telefoonassistent */
html[data-theme="dark"] .voice-shell .voice-eyebrow { color: var(--os-color-accent-text); }
html[data-theme="dark"] .voice-shell :is(.voice-status, .voice-overview-card, .voice-metric-grid article, .voice-step-card) { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .voice-shell .voice-overview-card > div,
html[data-theme="dark"] .voice-shell .voice-call-list > a,
html[data-theme="dark"] .voice-shell .voice-toggle-list > label,
html[data-theme="dark"] .voice-shell :is(.voice-summary > div, .voice-dl > div),
html[data-theme="dark"] .voice-shell .voice-tools > div { border-color: var(--os-color-border); }
html[data-theme="dark"] .voice-shell :is(.voice-hero h1, .voice-list-head h1, .voice-call-head h1, .voice-wizard h1, .voice-step-card h2, .voice-overview-card strong, .voice-metric-grid strong, .voice-call-list strong, .voice-summary strong, .voice-dl dd, .voice-tools strong) { color: var(--os-color-ink); }
html[data-theme="dark"] .voice-shell :is(.voice-hero p, .voice-list-head p, .voice-call-head p, .voice-wizard header p, .voice-overview-card small, .voice-metric-grid span, .voice-call-list small, .voice-step-card > p, .voice-choice small, .voice-toggle-list small, .voice-summary span, .voice-dl dt, .voice-tools small, .voice-privacy) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .voice-shell .voice-status { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .voice-shell .voice-metric-grid i { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .voice-shell .voice-steps li { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .voice-shell .voice-steps li:not(:last-child)::after { background: var(--os-color-border-strong); }
html[data-theme="dark"] .voice-shell .voice-steps b { border-color: var(--os-color-border-strong); background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .voice-shell .voice-steps :is(.is-current, .is-done) { color: var(--os-color-ink); }
html[data-theme="dark"] .voice-shell .voice-steps .is-current b { border-color: var(--os-color-primary); background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] .voice-shell .voice-steps .is-done b { border-color: var(--os-color-success); background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .voice-shell .voice-choice { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .voice-shell .voice-choice:has(input:checked) { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] .voice-shell .voice-test-notice { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); color: var(--os-color-text); }
html[data-theme="dark"] .online-widget-settings > header > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .online-widget-settings > header :is(small, h2) { color: var(--os-color-accent-text); }
html[data-theme="dark"] .online-widget-settings > header h2 { color: var(--os-color-ink); }
html[data-theme="dark"] .online-widget-modes legend { color: var(--os-color-ink); }
html[data-theme="dark"] .online-widget-modes label > span { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text); }
html[data-theme="dark"] .online-widget-modes label > span:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .online-widget-modes input:checked + span { border-color: var(--os-color-primary); background: var(--os-color-selected); box-shadow: 0 0 0 2px var(--os-color-primary-border); }
html[data-theme="dark"] .online-widget-modes label > span > i { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .online-widget-modes input:checked + span > i { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .online-widget-modes :is(strong, b) { color: var(--os-color-ink); }
html[data-theme="dark"] .online-widget-modes small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .online-widget-fields label { color: var(--os-color-text); }
html[data-theme="dark"] .online-color-field > span:last-child { border-color: var(--os-color-border-strong); background: var(--os-color-input); }
html[data-theme="dark"] .online-color-field b { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .online-toggle { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .online-toggle strong { color: var(--os-color-ink); }
html[data-theme="dark"] .online-toggle small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .online-install-card { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .online-install-copy h2 { color: var(--os-color-ink); }
html[data-theme="dark"] .online-install-copy p { color: var(--os-color-text-secondary); }

html[data-theme="dark"] .app-feature-intro {
    --app-feature-accent-soft: color-mix(in srgb, var(--app-feature-accent) 18%, var(--os-color-surface));
    --app-feature-stage-start: color-mix(in srgb, var(--app-feature-accent) 11%, var(--os-color-surface-muted));
    --app-feature-stage-end: color-mix(in srgb, var(--app-feature-accent) 24%, var(--os-color-canvas));
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
}
html[data-theme="dark"] body.page-company-app .apps-workspace > .settings-content.apps-content.apps-content-feature { background: var(--os-color-canvas); color: var(--os-color-text); }
html[data-theme="dark"] .app-feature-intro-kicker { color: color-mix(in srgb, var(--app-feature-accent) 52%, white); }
html[data-theme="dark"] .app-feature-intro-list { color: var(--os-color-text); }
html[data-theme="dark"] .app-feature-intro-actions .app-feature-primary { border-color: color-mix(in srgb, var(--app-feature-accent) 68%, black); background: color-mix(in srgb, var(--app-feature-accent) 68%, black); color: #fff; }
html[data-theme="dark"] .app-feature-intro-actions .app-feature-primary.is-disabled { opacity: .72; }
html[data-theme="dark"] .app-feature-intro-actions .app-feature-more { border-color: transparent; background: transparent; color: var(--os-color-text); }
html[data-theme="dark"] .app-feature-intro-actions .app-feature-more:hover { background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] .app-feature-intro-unavailable { border-color: color-mix(in srgb, var(--os-color-warning) 45%, var(--os-color-border)); background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .app-feature-value-grid article { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .app-feature-value-grid article > span { background: color-mix(in srgb, var(--app-feature-accent) 16%, var(--os-color-surface)); color: color-mix(in srgb, var(--app-feature-accent) 52%, white); }
html[data-theme="dark"] .app-feature-value-grid strong { color: var(--os-color-ink); }
html[data-theme="dark"] .app-feature-value-grid p { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .app-feature-intro-visual {
    --os-color-surface: inherit;
    --os-color-surface-muted: inherit;
    --os-color-surface-strong: inherit;
    --os-color-surface-elevated: inherit;
    --os-color-input: inherit;
    --os-color-border: inherit;
    --os-color-border-strong: inherit;
    --os-color-ink: inherit;
    --os-color-text: inherit;
    --os-color-text-secondary: inherit;
    --os-color-text-muted: inherit;
    color: var(--os-color-text);
    color-scheme: dark;
    background:
        radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--app-feature-accent) 24%, transparent), transparent 34%),
        linear-gradient(135deg, var(--app-feature-stage-start), var(--app-feature-stage-end));
}

html[data-theme="dark"] .app-feature-intro-visual::before {
    opacity: .62;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
}

html[data-theme="dark"] .app-feature-intro-visual :is(
    .addon-demo-toast,
    .addon-discount-builder,
    .addon-discount-receipt,
    .addon-loyalty-pass,
    .addon-loyalty-visit,
    .addon-newsletter-editor,
    .addon-newsletter-stats,
    .addon-gift-redeem,
    .sumup-intro-sale,
    .voice-intro-conversation,
    .pay-intro-request,
    .pay-intro-qr,
    .last-minute-intro-calendar,
    .calendar-sync-demo-calendar,
    .calendar-sync-demo-device,
    .calendar-sync-demo-apps,
    .calendar-sync-demo-lock,
    .ai-addon-checkout-card
) {
    border-color: var(--os-color-border-strong);
    background: color-mix(in srgb, var(--os-color-surface-elevated) 94%, transparent);
    color: var(--os-color-ink);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .app-feature-intro-visual :is(
    .addon-discount-builder > header,
    .addon-newsletter-editor > header,
    .addon-loyalty-pass > header,
    .sumup-intro-sale > header,
    .sumup-intro-sale-row,
    .voice-intro-conversation > header,
    .pay-intro-request > header,
    .pay-intro-request > footer,
    .last-minute-intro-calendar > header,
    .last-minute-intro-calendar > footer,
    .calendar-sync-demo-calendar > header,
    .calendar-sync-demo-days,
    .calendar-sync-demo-appointments article
) {
    border-color: var(--os-color-border);
}

/* Inbegrepen add-ons: dezelfde demo's, uitgevoerd als donkere productkaarten. */
html[data-theme="dark"] .app-feature-intro-visual .addon-demo { color: var(--os-color-text); }
html[data-theme="dark"] .app-feature-intro-visual .addon-demo-toast {
    background: color-mix(in srgb, var(--os-color-surface-elevated) 90%, transparent);
    backdrop-filter: blur(16px);
}
html[data-theme="dark"] .app-feature-intro-visual :is(
    .addon-demo-toast strong,
    .addon-discount-builder header strong,
    .addon-discount-receipt > strong,
    .addon-discount-rule strong,
    .addon-loyalty-pass header strong,
    .addon-loyalty-reward strong,
    .addon-loyalty-visit strong,
    .addon-newsletter-editor header strong,
    .addon-newsletter-canvas > strong,
    .addon-newsletter-editor footer strong,
    .addon-gift-redeem header strong
) { color: var(--os-color-ink); }
html[data-theme="dark"] .app-feature-intro-visual :is(
    .addon-discount-builder header small,
    .addon-discount-value small,
    .addon-discount-value span,
    .addon-discount-rule small,
    .addon-discount-receipt s,
    .addon-loyalty-balance small,
    .addon-loyalty-balance span,
    .addon-loyalty-reward small,
    .addon-loyalty-visit small,
    .addon-loyalty-visit em,
    .addon-newsletter-editor header small,
    .addon-newsletter-canvas > p,
    .addon-newsletter-editor footer small,
    .addon-newsletter-stats > small,
    .addon-newsletter-stats > span,
    .addon-gift-redeem header small,
    .addon-gift-redeem > div small
) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .app-feature-intro-visual :is(.addon-discount-builder header b, .addon-newsletter-editor header b) {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .app-feature-intro-visual :is(.addon-discount-rule, .addon-loyalty-reward) {
    border-color: var(--os-color-border);
    background: var(--os-color-surface-muted);
}
html[data-theme="dark"] .app-feature-intro-visual :is(.addon-discount-value strong, .addon-loyalty-balance strong, .addon-newsletter-stats > strong, .addon-gift-redeem > div strong) {
    color: color-mix(in srgb, var(--app-feature-accent) 60%, white);
}
html[data-theme="dark"] .app-feature-intro-visual .addon-loyalty-progress { background: var(--os-color-surface-strong); }
html[data-theme="dark"] .app-feature-intro-visual .addon-newsletter-canvas { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .app-feature-intro-visual .addon-newsletter-photo {
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-feature-accent) 28%, var(--os-color-surface-strong)), color-mix(in srgb, var(--app-feature-accent) 54%, var(--os-color-surface-muted)));
}
html[data-theme="dark"] .app-feature-intro-visual .addon-gift-card {
    border-color: color-mix(in srgb, var(--os-color-success) 38%, var(--os-color-border));
    background: linear-gradient(145deg, #0d493d, #12634f 64%, #237b61);
    box-shadow: 0 28px 64px rgba(0, 0, 0, .38);
}

/* SumUp */
html[data-theme="dark"] .app-feature-intro-visual .sumup-intro-terminal {
    border-color: #080c15;
    background: var(--os-color-surface-muted);
    box-shadow: 0 28px 58px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .app-feature-intro-visual .sumup-intro-terminal > header,
html[data-theme="dark"] .app-feature-intro-visual :is(.sumup-intro-terminal-body small, .sumup-intro-terminal-body span, .sumup-intro-sale small) {
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .app-feature-intro-visual :is(.sumup-intro-terminal-body strong, .sumup-intro-sale strong) { color: var(--os-color-ink); }
html[data-theme="dark"] .app-feature-intro-visual .sumup-intro-contactless,
html[data-theme="dark"] .app-feature-intro-visual .sumup-intro-sale > header i {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}
html[data-theme="dark"] .app-feature-intro-visual .sumup-intro-sent {
    border: 1px solid color-mix(in srgb, var(--os-color-success) 30%, var(--os-color-border));
    background: color-mix(in srgb, var(--os-color-success) 15%, var(--os-color-surface-elevated));
    color: var(--os-color-ink);
}
html[data-theme="dark"] .app-feature-intro-visual .sumup-intro-sent small { color: var(--os-color-success); }

/* AI Receptionist */
html[data-theme="dark"] .app-feature-intro-visual .voice-launchpad-stage {
    border-color: var(--os-color-primary-border);
    background: radial-gradient(circle at 50% 28%, rgba(103, 88, 232, .24), transparent 15rem), linear-gradient(155deg, var(--os-color-surface-elevated), var(--os-color-primary-softer));
    box-shadow: 0 24px 58px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] .app-feature-intro-visual .voice-stage-chip,
html[data-theme="dark"] .app-feature-intro-visual .voice-stage-conversation span {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-surface-strong);
    color: var(--os-color-text);
}
html[data-theme="dark"] .app-feature-intro-visual .voice-stage-conversation span:last-child {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-primary-soft);
}
html[data-theme="dark"] .app-feature-intro-visual .voice-stage-result,
html[data-theme="dark"] .app-feature-intro-visual .voice-intro-result {
    border-color: color-mix(in srgb, var(--os-color-success) 38%, var(--os-color-border));
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}
html[data-theme="dark"] .app-feature-intro-visual .voice-intro-conversation > header strong,
html[data-theme="dark"] .app-feature-intro-visual .voice-intro-booking strong { color: var(--os-color-ink); }
html[data-theme="dark"] .app-feature-intro-visual .voice-intro-conversation > header b,
html[data-theme="dark"] .app-feature-intro-visual .voice-intro-chat p.is-assistant,
html[data-theme="dark"] .app-feature-intro-visual .voice-intro-booking {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}
html[data-theme="dark"] .app-feature-intro-visual .voice-intro-chat p {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text);
}
html[data-theme="dark"] .app-feature-intro-visual :is(.voice-intro-conversation > header small, .voice-intro-booking small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .app-feature-intro-visual .ai-addon-checkout-card { backdrop-filter: blur(18px); }

/* Sovado Pay: alleen de QR zelf blijft wit voor betrouwbare scanbaarheid. */
html[data-theme="dark"] .app-feature-intro-visual :is(.pay-intro-request > header strong, .pay-intro-amount strong, .pay-intro-merchant strong, .pay-intro-customer strong, .pay-intro-qr strong) { color: var(--os-color-ink); }
html[data-theme="dark"] .app-feature-intro-visual :is(.pay-intro-request small, .pay-intro-amount span, .pay-intro-qr small, .pay-intro-qr em) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .app-feature-intro-visual .pay-intro-request > header b,
html[data-theme="dark"] .app-feature-intro-visual .pay-intro-paid {
    border-color: color-mix(in srgb, var(--os-color-success) 38%, var(--os-color-border));
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}
html[data-theme="dark"] .app-feature-intro-visual :is(.pay-intro-merchant > span, .pay-intro-customer > span) {
    background: var(--os-color-info-soft);
    color: var(--os-color-info);
}
html[data-theme="dark"] .app-feature-intro-visual .pay-intro-customer {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-primary-softer);
}
html[data-theme="dark"] .app-feature-intro-visual .pay-intro-request > footer {
    background: var(--os-color-surface-muted);
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .app-feature-intro-visual .pay-intro-request > footer strong { color: var(--os-color-text); }
html[data-theme="dark"] .app-feature-intro-visual .pay-intro-qr > span {
    border-color: #eef1f6;
    background: #fff;
    color: #11182c;
    color-scheme: light;
}
html[data-theme="dark"] .app-feature-intro-visual .pay-intro-paid small { color: var(--os-color-success); }

/* Last minute */
html[data-theme="dark"] .app-feature-intro-visual .last-minute-intro-calendar { color: var(--os-color-text); }
html[data-theme="dark"] .app-feature-intro-visual :is(.last-minute-intro-calendar small, .last-minute-intro-timeline time, .last-minute-intro-timeline article em) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .app-feature-intro-visual .last-minute-intro-calendar > header b {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}
html[data-theme="dark"] .app-feature-intro-visual .last-minute-intro-timeline article.is-found {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-primary-soft);
}
html[data-theme="dark"] .app-feature-intro-visual .last-minute-intro-timeline article.is-found::after {
    border-top-color: rgba(255, 255, 255, .12);
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .12) 48%, transparent 66%);
}
html[data-theme="dark"] .app-feature-intro-visual .last-minute-intro-calendar > footer { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .app-feature-intro-visual .last-minute-intro-sent {
    border-color: color-mix(in srgb, var(--os-color-success) 38%, var(--os-color-border));
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}
html[data-theme="dark"] .app-feature-intro-visual .last-minute-intro-sent small { color: var(--os-color-success); }

/* Agenda synchroniseren */
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-calendar > header strong,
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-appointments strong,
html[data-theme="dark"] .app-feature-intro-visual :is(.calendar-sync-demo-device, .calendar-sync-demo-lock) strong { color: var(--os-color-ink); }
html[data-theme="dark"] .app-feature-intro-visual :is(.calendar-sync-demo-calendar > header small, .calendar-sync-demo-appointments time, .calendar-sync-demo-appointments small, .calendar-sync-demo-device small, .calendar-sync-demo-device em, .calendar-sync-demo-lock small, .calendar-sync-demo-apps small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-days { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-days span { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-days small { color: var(--os-color-ink); }
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-days .is-active { color: var(--os-color-info); }
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-days .is-active small { background: var(--os-color-info); color: #fff; }
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-calendar > header b {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-apps > span {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text);
}

/* Website-intro: ook het browservenster en de losse statuskaarten horen bij de donkere demo. */
html[data-theme="dark"] .app-feature-intro--website :is(.standard-intro-preview, .online-site-mockup, .website-intro-booking) {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-surface-elevated);
    color: var(--os-color-ink);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] .app-feature-intro--website .standard-browser,
html[data-theme="dark"] .app-feature-intro--website .online-site-browser {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .app-feature-intro--website .standard-intro-preview iframe {
    background: var(--os-color-surface-muted);
    color-scheme: dark;
}
html[data-theme="dark"] .app-feature-intro--website .online-site-canvas { background: var(--os-color-surface-muted); }
html[data-theme="dark"] .app-feature-intro--website .online-site-canvas > header { background: var(--os-color-surface-elevated); }
html[data-theme="dark"] .app-feature-intro--website .online-site-services span { background: var(--os-color-surface-strong); }
html[data-theme="dark"] .app-feature-intro--website .online-site-sync {
    border-color: color-mix(in srgb, var(--os-color-success) 38%, var(--os-color-border));
    background: color-mix(in srgb, var(--os-color-success) 16%, var(--os-color-surface-elevated));
    color: var(--os-color-success);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] .app-feature-intro--website .online-site-sync strong { color: var(--os-color-success); }
html[data-theme="dark"] .app-feature-intro--website .online-site-sync small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .app-feature-intro--website .website-intro-booking small,
html[data-theme="dark"] .app-feature-intro--website .website-intro-booking em { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .app-feature-intro--website .website-intro-booking > span {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}
html[data-theme="dark"] .terminal-handshake-page .sumup-advanced > summary small { color: var(--os-color-text-secondary); }

/* POS overlays use the same dark surfaces as the fullscreen register. */
html[data-theme="dark"] .page-pos-v2 .pos-dialog:not(.pos-sovado-pay-dialog) {
    background: var(--os-color-surface);
    color: var(--os-color-text-primary);
    border-color: var(--os-color-border);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .page-pos-v2 .pos-dialog:not(.pos-sovado-pay-dialog)::backdrop {
    background: rgba(3, 5, 10, .78);
}
html[data-theme="dark"] .page-pos-v2 .pos-dialog-shell > header,
html[data-theme="dark"] .page-pos-v2 .pos-dialog-shell > footer {
    background: var(--os-color-surface);
    border-color: var(--os-color-border);
}
html[data-theme="dark"] .page-pos-v2 .pos-dialog-shell h2,
html[data-theme="dark"] .page-pos-v2 .pos-options-dialog .field,
html[data-theme="dark"] .page-pos-v2 .pos-payments legend {
    color: var(--os-color-text-primary);
}
html[data-theme="dark"] .page-pos-v2 .pos-dialog-shell header p,
html[data-theme="dark"] .page-pos-v2 .pos-options-dialog small,
html[data-theme="dark"] .page-pos-v2 .pos-payment-total span,
html[data-theme="dark"] .page-pos-v2 .pos-split-payment label,
html[data-theme="dark"] .page-pos-v2 .pos-sales-list small {
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .page-pos-v2 .pos-dialog-body,
html[data-theme="dark"] .page-pos-v2 .pos-payment-total,
html[data-theme="dark"] .page-pos-v2 .permission-note,
html[data-theme="dark"] .page-pos-v2 .pos-split-payment,
html[data-theme="dark"] .page-pos-v2 .sale-icon {
    background: var(--os-color-surface-muted);
    color: var(--os-color-text-secondary);
    border-color: var(--os-color-border);
}
html[data-theme="dark"] .page-pos-v2 .pos-payment-choices button,
html[data-theme="dark"] .page-pos-v2 .cash-quick button,
html[data-theme="dark"] .page-pos-v2 .pos-giftcard-quick button,
html[data-theme="dark"] .page-pos-v2 .pos-giftcard-remainder-choices button {
    background: var(--os-color-surface-raised);
    color: var(--os-color-text-secondary);
    border-color: var(--os-color-border-strong);
}
html[data-theme="dark"] .page-pos-v2 .pos-payment-choices button > i:first-child {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .page-pos-v2 .pos-payment-choices button > .pos-payment-option-copy {
    display: grid;
    background: transparent;
}
html[data-theme="dark"] .page-pos-v2 .pos-payment-option-copy strong { color: var(--os-color-text-primary); }
html[data-theme="dark"] .page-pos-v2 .pos-payment-option-copy small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 .pos-payment-choices button:not(.selected) > .pos-payment-option-check {
    display: grid;
    background: var(--os-color-surface-raised);
    border-color: var(--os-color-border-strong);
    color: transparent;
}
html[data-theme="dark"] .page-pos-v2 .pos-payment-choices button.selected > .pos-payment-option-check {
    display: grid;
    background: var(--os-color-primary);
    color: #fff;
}
html[data-theme="dark"] .page-pos-v2 .pos-payment-choices button:hover,
html[data-theme="dark"] .page-pos-v2 .pos-payment-choices button.selected,
html[data-theme="dark"] .page-pos-v2 .pos-giftcard-remainder-choices button:hover,
html[data-theme="dark"] .page-pos-v2 .pos-giftcard-remainder-choices button.selected {
    background: var(--os-color-primary-soft);
    color: var(--os-color-primary-text);
    border-color: var(--os-color-primary);
}
html[data-theme="dark"] .page-pos-v2 .pos-payment-choices button.selected > i:first-child {
    background: var(--os-color-primary);
    color: #fff;
}
html[data-theme="dark"] .page-pos-v2 .pos-split-payment summary { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 .pos-split-payment summary:hover { color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-pos-v2 .pos-split-payment > div { background: var(--os-color-surface); }
html[data-theme="dark"] .page-pos-v2 .pos-split-payment-icon { background: var(--os-color-primary-soft); color: var(--os-color-primary-text); }
html[data-theme="dark"] .page-pos-v2 .pos-split-payment-copy strong { color: var(--os-color-text-primary); }
html[data-theme="dark"] .page-pos-v2 .pos-split-payment-copy small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 .pos-split-payment-chevron { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 .pos-split-payment[open] .pos-split-payment-chevron { background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] .page-pos-v2 [data-pay-button]:disabled {
    border-color: var(--os-color-border);
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-muted);
    opacity: 1;
}
html[data-theme="dark"] .page-pos-v2 [data-pay-button]:disabled strong { color: inherit; }
html[data-theme="dark"] .page-pos-v2 .pos-cash-received,
html[data-theme="dark"] .page-pos-v2 .pos-payment-status.complete {
    background: var(--os-color-success-soft);
    color: var(--os-color-success-text);
    border-color: color-mix(in srgb, var(--os-color-success) 42%, var(--os-color-border));
}
html[data-theme="dark"] .page-pos-v2 .pos-payment-status {
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning-text);
}
html[data-theme="dark"] .page-pos-v2 .pos-sales-list > a {
    color: var(--os-color-text-primary);
    border-color: var(--os-color-border);
}
html[data-theme="dark"] .page-pos-v2 .pos-sales-list > button {
    border-color: var(--os-color-border);
    background: transparent;
    color: var(--os-color-text-primary);
}
html[data-theme="dark"] .page-pos-v2 .pos-sales-list > button :is(strong, b) {
    color: var(--os-color-ink);
}
html[data-theme="dark"] .page-pos-v2 .pos-sales-list > button > i {
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .page-pos-v2 .pos-sales-list > button:is(:hover, :focus-visible) {
    background: var(--os-color-hover);
    color: var(--os-color-text-primary);
    outline-color: var(--os-color-primary-border);
}
html[data-theme="dark"] .page-pos-v2 .pos-sales-list > button:is(:hover, :focus-visible) strong {
    color: var(--os-color-accent-text);
}
html[data-theme="dark"] .page-pos-v2 .pos-dialog .price-input > span {
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .page-pos-v2 .pos-promotion-summary {
    background: var(--os-color-primary-soft);
    color: var(--os-color-primary-text);
    border-color: color-mix(in srgb, var(--os-color-primary) 45%, var(--os-color-border));
}
html[data-theme="dark"] .page-pos-v2 .pos-promotion-summary small,
html[data-theme="dark"] .page-pos-v2 .pos-promotion-summary > b {
    color: var(--os-color-primary-text);
}

html[data-theme="dark"] .settings-mobile-menu > summary,
html[data-theme="dark"] .settings-mobile-menu > div {
    background: var(--os-color-surface);
    color: var(--os-color-text-primary);
    border-color: var(--os-color-border-strong);
}
html[data-theme="dark"] .settings-mobile-menu > div {
    box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}
html[data-theme="dark"] .settings-mobile-menu > div > strong {
    color: var(--os-color-text-tertiary);
}
html[data-theme="dark"] .settings-mobile-menu a {
    color: var(--os-color-text-secondary);
}
html[data-theme="dark"] .settings-mobile-menu a.is-active {
    background: var(--os-color-primary-soft);
    color: var(--os-color-primary-text);
}

@media (max-width: 700px) {
    html[data-theme="dark"] .mobile-app-nav {
        background: rgba(19, 23, 34, .96);
        border-top-color: var(--os-color-border);
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .28);
    }
    html[data-theme="dark"] .mobile-app-nav-item {
        color: var(--os-color-text-tertiary);
    }
    html[data-theme="dark"] .mobile-app-nav-item.active,
    html[data-theme="dark"] .mobile-app-nav-item.drawer-open {
        color: var(--os-color-primary-text);
    }
    html[data-theme="dark"] .mobile-app-nav-item.active > span,
    html[data-theme="dark"] .mobile-app-nav-item.drawer-open > span {
        background: var(--os-color-primary-soft);
    }
    html[data-theme="dark"] .topbar {
        background: rgba(19, 23, 34, .94);
        border-bottom-color: var(--os-color-border);
        box-shadow: 0 1px 10px rgba(0, 0, 0, .22);
    }
    html[data-theme="dark"] .mobile-app-title {
        color: var(--os-color-text-primary);
    }
    html[data-theme="dark"] .mobile-appbar-action {
        background: var(--os-color-surface-raised);
        color: var(--os-color-text-primary);
        border-color: var(--os-color-border);
        box-shadow: none;
    }
    html[data-theme="dark"] .sidebar-subscription a {
        color: var(--os-color-primary-text);
    }
}
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-days span { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-days .is-active { color: var(--os-color-info); }
html[data-theme="dark"] .app-feature-intro-visual .calendar-sync-demo-days .is-active small { background: var(--os-color-info); color: #fff; }
html[data-theme="dark"] .app-feature-intro-visual :is(.calendar-sync-demo-appointments time, .calendar-sync-demo-device em) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] body.page-company-app .apps-content-feature .calendar-sync-consent { border-color: var(--os-color-border-strong); background: var(--os-color-surface-muted); color: var(--os-color-ink); }
html[data-theme="dark"] body.page-company-app .apps-content-feature .calendar-sync-consent:has(input:checked) { border-color: var(--os-color-primary-border); background: var(--os-color-selected); }
html[data-theme="dark"] body.page-company-app .apps-content-feature .calendar-sync-consent small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] body.page-company-app .apps-content-feature .calendar-sync-activation-form > .btn { border-color: color-mix(in srgb, var(--app-feature-accent) 68%, black); background: color-mix(in srgb, var(--app-feature-accent) 68%, black); color: #fff; }

/* Online beheer: alleen de beheerinterface volgt het thema. */
html[data-theme="dark"] :is(.online-website-dashboard, .online-domain-panel, .online-widget-panel, .online-empty-website, .online-site-mockup) { border-color: var(--os-color-border); background-color: var(--os-color-surface); color: var(--os-color-ink); }
html[data-theme="dark"] .online-tabs { border-color: var(--os-color-border); background: var(--os-color-surface); }
html[data-theme="dark"] .online-tabs-title small { color: var(--os-color-accent-text); }
html[data-theme="dark"] .online-tab { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.online-tab:hover, .online-tab.is-active) { border-color: var(--os-color-primary-border); background: var(--os-color-selected); color: var(--os-color-accent-text); }
html[data-theme="dark"] .online-tab-icon { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .online-tab.is-active .online-tab-icon { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .online-tab-copy small { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.online-eyebrow, .online-summary-heading small, .online-widget-settings > header small, .online-domain-choice > small, .online-subdomain-card small, .online-domain-status-main small) { color: var(--os-color-accent-text); }
html[data-theme="dark"] .online-status { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .online-status.is-success { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .online-status.is-warning { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] .online-site-canvas { color-scheme: light; }
html[data-theme="dark"] .app-feature-intro--website .online-site-mockup {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-surface-elevated);
    color: var(--os-color-ink);
}
html[data-theme="dark"] .app-feature-intro--website .online-site-canvas { color-scheme: dark; }

/* Aanbod: lijsten, details en formulieren delen dezelfde donkere semantiek. */
html[data-theme="dark"] :is(.page-services, .page-products) {
    --catalog-ink: var(--os-color-ink);
    --catalog-muted: var(--os-color-text-secondary);
    --catalog-line: var(--os-color-border);
    --catalog-brand: var(--os-color-accent-text);
}
html[data-theme="dark"] :is(.page-services, .page-products) :is(.catalog-kicker, .catalog-back-link, .catalog-field-link, .service-detail-kicker) { color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.page-services, .page-products) :is(.catalog-summary-card, .catalog-directory, .catalog-editor-card, .service-detail-hero, .service-profile-metrics article, .service-profile-card, .catalog-category-modal .inline-category-create, .catalog-category-modal .category-row) {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
}
html[data-theme="dark"] :is(.page-services, .page-products) :is(.catalog-summary-card strong, .catalog-directory-header h2, .catalog-row-identity strong, .catalog-editor-card .card-header h2, .catalog-editor-card .field label, .service-employee-copy strong, .service-employee-empty strong, .service-detail-name h1, .service-profile-metrics strong, .service-card-heading h2, .service-facts-grid strong, .service-relation-list strong, .service-card-empty strong, .service-setting-list strong, .service-metadata-list strong, .service-location-list strong) { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.page-services, .page-products) :is(.catalog-summary-card small, .catalog-summary-note, .catalog-directory-header p, .catalog-row-identity small, .catalog-editor-card .card-header p, .catalog-editor-card .field > small, .service-employee-copy small, .service-employee-empty p, .catalog-number-suffix span, .service-detail-identity p, .service-profile-metrics small, .service-card-heading p, .service-facts-grid small, .service-copy-grid span, .service-relation-list small, .service-card-empty p, .service-setting-list span, .service-metadata-list span, .service-location-list small, .service-location-fallback) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-directory-header { border-color: var(--os-color-border); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-directory-search {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-input);
    color: var(--os-color-text-muted);
}
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-directory-search:focus-within { border-color: var(--os-color-primary-border); box-shadow: 0 0 0 3px var(--os-color-focus); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-directory-search input { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-filter-tabs { background: var(--os-color-surface-strong); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-filter-tabs button { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-filter-tabs button:hover { background: var(--os-color-hover); color: var(--os-color-text); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-filter-tabs button span { background: var(--os-color-surface); color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-filter-tabs button.active { background: var(--os-color-primary); color: #fff; }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-filter-tabs button.active span { background: rgba(255, 255, 255, .18); color: #fff; }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-list-head { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text-muted); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-directory-row { border-color: var(--os-color-border); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-directory-row:hover { background: var(--os-color-hover); }
html[data-theme="dark"] :is(.page-services, .page-products) :is(.catalog-row-fact strong, .catalog-row-stock strong) { color: var(--os-color-text); }
html[data-theme="dark"] :is(.page-services, .page-products) :is(.catalog-row-fact small, .catalog-row-stock small) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-row-icon { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-products .catalog-row-icon.is-blue { background: var(--os-color-info-soft); color: var(--os-color-info); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-row-arrow { color: var(--os-color-text-muted); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-stock-button { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-stock-button:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-status.is-active { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-status.is-inactive { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-status.is-archived { background: var(--os-color-warning-soft); color: var(--os-color-warning); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-soft-status.is-online { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-soft-status.is-muted { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-editor-card > .card-header { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-editor-card .choice-card { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-editor-card .choice-card:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-editor-card .settings-icon { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-products .catalog-editor-card .settings-icon { background: var(--os-color-info-soft); color: var(--os-color-info); }
html[data-theme="dark"] :is(.page-services, .page-products) .service-employee-avatar { background: color-mix(in srgb, var(--employee-color) 18%, var(--os-color-surface)); }
html[data-theme="dark"] :is(.page-services, .page-products) .service-employee-empty { border-color: var(--os-color-border-strong); background: var(--os-color-surface-muted); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-editor-help { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-editor-help strong { color: var(--os-color-ink); }
html[data-theme="dark"] :is(.page-services, .page-products) .catalog-editor-help span { color: var(--os-color-text-secondary); }
html[data-theme="dark"] :is(.page-services, .page-products) .service-detail-avatar,
html[data-theme="dark"] :is(.page-services, .page-products) :is(.service-card-heading > span, .service-facts-grid > div > span, .service-mini-avatar, .service-card-empty > span) { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.page-services, .page-products) .service-card-heading em { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] :is(.page-services, .page-products) .service-copy-grid p { color: var(--os-color-text); }
html[data-theme="dark"] :is(.page-services, .page-products) .service-relation-list > a:hover { background: var(--os-color-hover); }
html[data-theme="dark"] :is(.page-services, .page-products) :is(.service-setting-list > div, .service-metadata-list > div, .service-location-list > div) { border-color: var(--os-color-border); }
html[data-theme="dark"] :is(.page-services, .page-products) .service-profile-metrics .metric-slate { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }

/* Kassa */
html[data-theme="dark"] .page-pos-v2 :is(.pos-fullscreen-shell, .pos-fullscreen-main, .pos-catalog, .pos-cart, .pos-checkout-panel) { background-color: var(--os-color-canvas); color: var(--os-color-ink); }
html[data-theme="dark"] .page-pos-v2 :is(.pos-panel, .pos-product-card, .pos-service-card, .pos-cart-line, .pos-payment-option, .pos-modal-shell, .pos-receipt-dialog) { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-ink); }
html[data-theme="dark"] .page-pos-v2 :is(.pos-fullscreen-header, .pos-category-tabs, .pos-cart-header, .pos-modal-header, .pos-modal-footer) { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-ink); }
html[data-theme="dark"] .page-pos-v2 .pos-payment-option:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .page-pos-v2 :is(.pos-workspace, .pos-receipt-panel, .pos-catalog-toolbar) { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-ink); }
html[data-theme="dark"] .page-pos-v2 .pos-catalog { border-color: var(--os-color-border); background: var(--os-color-canvas); }
html[data-theme="dark"] .page-pos-v2 .pos-search { border-color: var(--os-color-border-strong); background: var(--os-color-input); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 .pos-search:focus-within { border-color: var(--os-color-primary-border); background: var(--os-color-input); box-shadow: 0 0 0 3px var(--os-color-focus); }
html[data-theme="dark"] .page-pos-v2 .pos-catalog-tabs { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .page-pos-v2 .pos-catalog-tabs button { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 .pos-catalog-tabs button.active { background: var(--os-color-selected); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-pos-v2 .pos-catalog-tabs span { background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 .pos-catalog-tabs .active span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-pos-v2 .pos-session-manage { border-color: var(--os-color-primary-border); background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-pos-v2 .pos-session-manage:hover { border-color: var(--os-color-primary-hover); background: var(--os-color-hover); color: var(--os-color-primary-hover); }
html[data-theme="dark"] .page-pos-v2 .pos-session-manage i { color: currentColor; }
html[data-theme="dark"] .page-pos-v2 .pos-panel-heading span { color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-pos-v2 .pos-tile { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-text); }
html[data-theme="dark"] .page-pos-v2 .pos-tile:hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); }
html[data-theme="dark"] .page-pos-v2 .pos-tile.selected { border-color: var(--os-color-primary); background: var(--os-color-selected); }
html[data-theme="dark"] .page-pos-v2 :is(.pos-tile > div strong, .pos-tile > b, .pos-receipt-panel h2) { color: var(--os-color-ink); }
html[data-theme="dark"] .page-pos-v2 :is(.pos-tile > div small, .pos-session-state, .pos-receipt-panel h2 span) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 .pos-tile > b.pos-tile-price { color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-pos-v2 :is(.pos-stepper button, .line-controls button, .pos-options-trigger) { border-color: var(--os-color-border-strong); background: var(--os-color-surface); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 :is(.pos-stepper button, .line-controls button, .pos-options-trigger):hover { border-color: var(--os-color-primary-border); background: var(--os-color-hover); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-pos-v2 .pos-sale-meta label { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 .pos-sale-meta select { background: var(--os-color-input); color: var(--os-color-ink); }
html[data-theme="dark"] .page-pos-v2 .pos-receipt-totals { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .page-pos-v2 .pos-receipt-totals > div { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-v2 .pos-receipt-totals :is(strong, .total) { color: var(--os-color-ink); }

/* Gesloten kassa: de introductie blijft onderdeel van de donkere werkplek. */
html[data-theme="dark"] .page-pos-v2 .pos-register-start {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-steps > div:not(:last-child)::after {
    background: var(--os-color-border-strong);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-steps span {
    background: var(--os-color-surface);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-steps b {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-steps .active b {
    border-color: var(--os-color-primary);
    background: var(--os-color-primary);
    color: #fff;
}

html[data-theme="dark"] .page-pos-v2 .pos-register-steps :is(strong, small) {
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-steps strong {
    color: var(--os-color-ink);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-explainer {
    border-color: var(--os-color-border);
    background: var(--os-color-surface-muted);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-explainer > span {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-explainer h3,
html[data-theme="dark"] .page-pos-v2 .pos-register-explainer > small strong {
    color: var(--os-color-ink);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-explainer :is(p, li),
html[data-theme="dark"] .page-pos-v2 .pos-register-explainer > small {
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-explainer > small {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-manage {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-manage :is(span, a) {
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-pos-v2 .pos-register-manage a:hover {
    background: var(--os-color-hover);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] :is(.pos-fullscreen-title, .pos-compact-nav-item.active) { color: var(--os-color-text); }
html[data-theme="dark"] .pos-fullscreen-session.active { background: var(--os-color-success-soft); color: var(--os-color-success); }

/* Kassadiensten en kassa-beheer */
html[data-theme="dark"] .page-pos-admin :is(.pos-session-onboarding, .pos-active-session, .pos-session-action-card, .pos-session-history, .pos-session-flow) {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
    color: var(--os-color-text);
}
html[data-theme="dark"] .page-pos-admin :is(.pos-session-onboarding-copy, .pos-session-timeline div, .pos-session-action-card form) { background: var(--os-color-surface); }
html[data-theme="dark"] .page-pos-admin :is(.pos-session-onboarding-copy h2, .pos-session-open-form h3, .pos-active-session-title h2, .pos-active-session-summary strong, .pos-active-session-next strong, .pos-session-flow strong, .pos-session-action-card h2, .pos-session-history h2) { color: var(--os-color-ink); }
html[data-theme="dark"] .page-pos-admin :is(.pos-session-onboarding-copy > p, .pos-session-timeline span, .pos-session-open-form .field small, .pos-session-action-card .field small, .pos-active-session-title p, .pos-active-session-summary span, .pos-active-session-summary small, .pos-active-session-next p, .pos-session-flow small, .pos-session-action-card header p, .pos-session-history .card-header p) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-admin .pos-session-timeline li:not(:last-child)::after { background: var(--os-color-border-strong); }
html[data-theme="dark"] .page-pos-admin .pos-session-timeline b { border-color: var(--os-color-border-strong); background: var(--os-color-surface-muted); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-admin .pos-session-open-form { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .page-pos-admin .pos-session-form-note { background: var(--os-color-info-soft); color: var(--os-color-text); }
html[data-theme="dark"] .page-pos-admin .pos-active-session { border-color: color-mix(in srgb, var(--os-color-success) 40%, var(--os-color-border)); }
html[data-theme="dark"] .page-pos-admin .pos-active-session-head { border-color: var(--os-color-border); background: color-mix(in srgb, var(--os-color-success-soft) 38%, var(--os-color-surface)); }
html[data-theme="dark"] .page-pos-admin .pos-active-session-title > span { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .page-pos-admin .pos-active-session-title small { color: var(--os-color-success); }
html[data-theme="dark"] .page-pos-admin .pos-live-badge { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .page-pos-admin .pos-active-session-summary > div { border-color: var(--os-color-border); }
html[data-theme="dark"] .page-pos-admin .pos-active-session-summary .highlight { background: transparent; }
html[data-theme="dark"] .page-pos-admin .pos-active-session-summary .highlight strong { color: var(--os-color-success); }
html[data-theme="dark"] .page-pos-admin .pos-active-session-next { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .page-pos-admin .pos-active-session-next > span { background: var(--os-color-success-soft); color: var(--os-color-success); }
html[data-theme="dark"] .page-pos-admin .pos-session-flow b { border-color: var(--os-color-border-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-admin .pos-session-flow > i { background: var(--os-color-border-strong); }
html[data-theme="dark"] .page-pos-admin .pos-session-flow > i:first-of-type { background: var(--os-color-success); }
html[data-theme="dark"] .page-pos-admin .pos-session-action-card > header { border-color: var(--os-color-border); background: var(--os-color-surface-muted); }
html[data-theme="dark"] .page-pos-admin .pos-session-action-card > header > span { background: var(--os-color-primary-soft); color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-pos-admin .pos-session-action-card header small { color: var(--os-color-accent-text); }
html[data-theme="dark"] .page-pos-admin .pos-session-close-card > header > span { background: var(--os-color-danger-soft); color: var(--os-color-danger); }
html[data-theme="dark"] .page-pos-admin .pos-session-close-card header small { color: var(--os-color-danger); }
html[data-theme="dark"] .page-pos-admin :is(.pos-session-open-form label span, .pos-session-action-card label span) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-admin .price-input > span { border-color: var(--os-color-border-strong); background: var(--os-color-surface-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .page-pos-admin .btn-danger { border-color: #9f3735; background: #9f3735; color: #fff; }
html[data-theme="dark"] .page-pos-admin .btn-danger:hover { border-color: #ba4642; background: #ba4642; color: #fff; }
html[data-theme="dark"] .page-pos-admin .pos-session-date-card {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
    box-shadow: none;
}
html[data-theme="dark"] .page-pos-admin :is(.pos-session-start-intro, .pos-session-start-form) {
    border-color: var(--os-color-border);
    box-shadow: none;
}
html[data-theme="dark"] .page-pos-admin .pos-session-start-intro {
    background: linear-gradient(145deg, color-mix(in srgb, var(--os-color-primary-soft) 38%, var(--os-color-surface-muted)), var(--os-color-surface) 86%);
}
html[data-theme="dark"] .page-pos-admin .pos-session-start-form,
html[data-theme="dark"] .page-pos-admin .pos-session-note-field {
    background: var(--os-color-surface);
}
html[data-theme="dark"] .page-pos-admin :is(.pos-session-start-duration, .pos-session-note-field) {
    border-color: var(--os-color-border);
}

html[data-theme="dark"] .newsletter-builder { background: var(--os-color-canvas); }
html[data-theme="dark"] :is(.newsletter-builder-toolbar, .newsletter-block-library, .newsletter-inspector, .newsletter-preview-tabs) { border-color: var(--os-color-border); background: var(--os-color-surface); color: var(--os-color-ink); }
html[data-theme="dark"] :is(.newsletter-block-buttons button, .newsletter-version-list button) { border-color: var(--os-color-border); background: var(--os-color-surface-muted); color: var(--os-color-text); }
html[data-theme="dark"] :is(.newsletter-title-fields span, .newsletter-block-library p, .newsletter-block-library h3) { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-device-switch { background: var(--os-color-surface-strong); }
html[data-theme="dark"] .newsletter-device-switch button { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-device-switch button.active {
    background: var(--os-color-surface-elevated);
    color: var(--os-color-accent-text);
    box-shadow: none;
}
html[data-theme="dark"] :is(.newsletter-inspector-fields label, .newsletter-email-settings label, .newsletter-spacing legend) { color: var(--os-color-text-primary); }
html[data-theme="dark"] :is(.newsletter-spacing, .newsletter-block-danger, .newsletter-email-settings) { border-color: var(--os-color-border); }
html[data-theme="dark"] .newsletter-spacing label span { border-color: var(--os-color-border-strong); color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-spacing label:has(input:checked) span { border-color: var(--os-color-primary); background: var(--os-color-primary-soft); color: var(--os-color-primary-text); }
html[data-theme="dark"] .newsletter-block-danger button { color: var(--os-color-text-secondary); }
html[data-theme="dark"] .newsletter-block-danger button:last-child { color: var(--os-color-danger); }
html[data-theme="dark"] .newsletter-canvas-area { background: var(--os-color-canvas); }
html[data-theme="dark"] .newsletter-canvas { background: var(--os-color-surface-strong); }
html[data-theme="dark"] .newsletter-email-body,
html[data-theme="dark"] .newsletter-review-frame iframe,
html[data-theme="dark"] .template-full-preview { color-scheme: light; }
html[data-theme="dark"] .newsletter-email-body { color: #344054; }
html[data-theme="dark"] .newsletter-email-body :is(.newsletter-block-header strong, .newsletter-block-card strong) { color: #172033; }
html[data-theme="dark"] .newsletter-email-body .newsletter-block-header span { color: #667085; }

/* Volledige normalisatie van werkplekoppervlakken in donkere modus.
 * Oudere modules behouden hun eigen layout, maar gebruiken hier dezelfde
 * semantische oppervlakken, velden, randen en tekstkleuren. */
html[data-theme="dark"] body.page-company-app :is(dialog:not(.pos-sovado-pay-dialog), .action-menu > div, .pos-more-menu > div) {
    border-color: var(--os-color-border);
    background-color: var(--os-color-surface-elevated);
    color: var(--os-color-ink);
    box-shadow: var(--os-shadow-floating);
}

html[data-theme="dark"] body.page-company-app :is(.action-menu, .pos-more-menu) :is(a, button) {
    color: var(--os-color-text);
}

html[data-theme="dark"] body.page-company-app :is(.action-menu, .pos-more-menu) :is(a, button):hover {
    background: var(--os-color-hover);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] body.page-company-app :is(.action-menu, .pos-more-menu) .danger-link {
    color: var(--os-color-danger);
}

/* Agenda: het nieuwe afspraakformulier en alle uitklapbare velden. */
html[data-theme="dark"] .page-agenda .agenda-create-content {
    background: var(--os-color-canvas);
}

html[data-theme="dark"] .page-agenda :is(.agenda-create-section, .agenda-create-notes, .agenda-create-service-row) {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
    color: var(--os-color-text);
    box-shadow: none;
}

html[data-theme="dark"] .page-agenda :is(
    .agenda-create-service-editor,
    .agenda-repeat-panel,
    .agenda-create-notes-fields,
    .agenda-time-picker-column,
    .agenda-create-service-summary,
    .booking-service-total
) {
    border-color: var(--os-color-border);
    background: var(--os-color-surface-muted);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-agenda :is(
    .agenda-create-form .input,
    .agenda-create-customer-search,
    .agenda-time-picker-popover,
    .agenda-create-customer-dropdown,
    .agenda-create-customer-option,
    .agenda-repeat-weekdays span,
    .booking-service-remove,
    .agenda-create-service-duration-field .input[readonly]
) {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-input);
    color: var(--os-color-text);
}

html[data-theme="dark"] .page-agenda :is(
    .agenda-create-form .field,
    .agenda-create-service-editor .field > span:first-child,
    .agenda-repeat-weekdays legend,
    .agenda-time-picker-column-wrap > small,
    .agenda-time-picker-separator,
    .agenda-create-service-card-summary > [data-create-service-card-duration]
) {
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-agenda :is(
    .agenda-create-service-card-summary > strong,
    .agenda-create-service-card-employee,
    .agenda-time-picker-column button,
    .booking-service-total strong,
    .agenda-create-service-summary strong
) {
    color: var(--os-color-ink);
}

html[data-theme="dark"] .page-agenda :is(.agenda-create-service-summary span + span, .agenda-repeat-panel, .agenda-create-notes-fields) {
    border-color: var(--os-color-border);
}

html[data-theme="dark"] .page-agenda :is(.agenda-create-customer-search button, .agenda-time-picker-toggle, .agenda-create-service-edit, .agenda-create-service-remove) {
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-agenda :is(.agenda-create-customer-search button, .agenda-time-picker-toggle, .agenda-create-service-edit):hover,
html[data-theme="dark"] .page-agenda .agenda-time-picker.is-open .agenda-time-picker-toggle,
html[data-theme="dark"] .page-agenda .agenda-time-picker-column button:hover,
html[data-theme="dark"] .page-agenda .agenda-time-picker-column button:focus-visible {
    background: var(--os-color-hover);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .page-agenda .agenda-create-customer-option:is(:hover, :focus-visible, .is-selected) {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-selected);
}

html[data-theme="dark"] .page-agenda .agenda-create-customer-recent {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] .page-agenda .agenda-repeat-toggle-icon {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-agenda .agenda-repeat-switch {
    background: var(--os-color-border-strong);
}

html[data-theme="dark"] .page-agenda .agenda-create-header p {
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-agenda :is([data-create-row-employee-avatar], [data-create-service-card-avatar]) {
    background: color-mix(in srgb, var(--service-employee-color, #98a2b3) 65%, #000);
    color: #fff;
}

html[data-theme="dark"] .page-agenda .agenda-create-warning {
    border-color: color-mix(in srgb, var(--os-color-warning) 44%, var(--os-color-border));
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning);
}

html[data-theme="dark"] .page-agenda .agenda-create-warning :is(p, label) {
    color: var(--os-color-warning);
}

html[data-theme="dark"] .page-agenda .agenda-create-warning-overlap {
    border-color: color-mix(in srgb, var(--os-color-info) 44%, var(--os-color-border));
    background: var(--os-color-info-soft);
    color: var(--os-color-info);
}

html[data-theme="dark"] .page-agenda .agenda-create-warning-overlap :is(p, label) {
    color: var(--os-color-info);
}

/* Afspraakdetail: lichte vaste tekstkleuren hadden te weinig contrast. */
html[data-theme="dark"] .page-agenda :is(.drawer-header p, .drawer-tabs button, .detail-list dt, .appointment-quick-status > strong) {
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-agenda :is(.detail-list dd, .drawer-content h3) {
    color: var(--os-color-ink);
}

html[data-theme="dark"] .page-agenda :is(.appointment-quick-status, .drawer-footer) {
    border-color: var(--os-color-border);
}

html[data-theme="dark"] .page-agenda .drawer-tabs button.active {
    border-color: var(--os-color-primary);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .page-agenda .status-pill {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] .page-agenda .status-pill.completed {
    background: var(--os-color-info-soft);
    color: var(--os-color-info);
}

html[data-theme="dark"] .page-agenda .status-pill.cancelled {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-agenda .payment-callout {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

/* Kassa: werkruimte, catalogus, filters, bon en alle overlay-bediening. */
html[data-theme="dark"] :where(.page-pos-v2, .page-pos-admin) {
    --pos-brand: var(--os-color-primary);
    --pos-brand-dark: var(--os-color-primary-hover);
    --pos-copy: var(--os-color-text);
    --pos-muted: var(--os-color-text-secondary);
    --pos-line: var(--os-color-border);
    --pos-line-strong: var(--os-color-border-strong);
    --pos-canvas: var(--os-color-canvas);
    --pos-surface: var(--os-color-surface);
    --pos-violet-soft: var(--os-color-primary-soft);
    --pos-green: var(--os-color-success);
    --pos-green-soft: var(--os-color-success-soft);
    --pos-orange: var(--os-color-warning);
    --pos-orange-soft: var(--os-color-warning-soft);
}

html[data-theme="dark"] .page-pos-v2 :is(
    .pos-catalog-scroll,
    .pos-receipt-panel,
    .pos-cart-line,
    .pos-customer-list button
) {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
    color: var(--os-color-text);
}

html[data-theme="dark"] .page-pos-v2 :is(.pos-catalog-controls, .pos-catalog-toolbar, .pos-receipt-totals) {
    border-color: var(--os-color-border);
    background: var(--os-color-surface-muted);
}

html[data-theme="dark"] .page-pos-v2 :is(
    .pos-register-header-tools .pos-search,
    .pos-header-account-trigger,
    .pos-list-search,
    .pos-recent-sales,
    .pos-catalog-sort,
    .pos-header-location,
    .pos-receipt-options,
    .pos-receipt-customer-trigger,
    .pos-customer-search,
    .pos-receipt-quick-actions button,
    .pos-cart-line .line-quantity-count,
    .pos-cart-line .line-quantity .line-controls,
    .pos-cart-line .line-controls button,
    .pos-cart-line .line-controls > b,
    .pos-stepper > button:last-child
) {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-input);
    color: var(--os-color-text);
}

html[data-theme="dark"] .page-pos-v2 :is(.pos-list-search, .pos-customer-search):focus-within {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-input);
    box-shadow: 0 0 0 3px var(--os-color-focus);
}

html[data-theme="dark"] .page-pos-v2 :is(.pos-catalog-sort span, .pos-list-heading > span, .pos-tile-meta, .pos-tile > .pos-tile-copy small) {
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-pos-v2 .pos-catalog-sort select {
    color: var(--os-color-ink);
}

html[data-theme="dark"] .page-pos-v2 .pos-header-account-trigger :is(strong, small) {
    color: inherit;
}

html[data-theme="dark"] .page-pos-v2 .pos-header-account-dropdown :is(.pos-header-account-logout, .pos-header-account-logout i, .pos-header-account-logout span) {
    color: var(--os-color-danger);
}

html[data-theme="dark"] .page-pos-v2 .pos-category-filters button {
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-pos-v2 .pos-category-filters :is(button:hover, button.active) {
    background: var(--os-color-selected);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .page-pos-v2 .pos-category-filters button.active b {
    background: var(--os-color-surface-strong);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .page-pos-v2 .pos-category-filters button:not(.active) b {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .page-pos-v2 .pos-catalog-tabs button.active {
    border-color: var(--os-color-primary-border);
}

html[data-theme="dark"] .page-pos-v2 :is(.pos-list-heading, .pos-category-filters .pos-category-action) {
    border-color: var(--os-color-border);
}

html[data-theme="dark"] .page-pos-v2 .pos-tile {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
}

html[data-theme="dark"] .page-pos-v2 .pos-tile:is(:hover, :focus-within, .selected) {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-selected);
}

html[data-theme="dark"] .page-pos-v2 .pos-tile > b {
    color: var(--os-color-ink);
}

html[data-theme="dark"] .page-pos-v2 :is(.pos-recent-sales, .pos-receipt-options, .pos-receipt-customer-trigger, .pos-receipt-quick-actions button):hover {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-hover);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .page-pos-v2 .pos-receipt-quick-actions button.danger {
    color: var(--os-color-danger);
}

/* Het kassabonvenster is werkplek-UI; alleen de echte print blijft papierwit. */
@media screen {
    html[data-theme="dark"] .page-pos-v2 .pos-complete-receipt-dialog {
        border: 1px solid var(--os-color-border);
        background: var(--os-color-surface);
        color: var(--os-color-text);
    }

    html[data-theme="dark"] .page-pos-v2 .pos-complete-receipt-shell {
        background: var(--os-color-canvas);
    }

    html[data-theme="dark"] .page-pos-v2 :is(.pos-complete-receipt-head, .pos-complete-receipt-actions) {
        border-color: var(--os-color-border);
        background: var(--os-color-surface);
        color: var(--os-color-text);
    }

    html[data-theme="dark"] .page-pos-v2 :is(
        .pos-complete-receipt-head h2,
        .pos-complete-receipt-actions form label,
        .pos-final-receipt-brand strong,
        .pos-final-receipt-meta strong,
        .pos-final-receipt-item strong,
        .pos-final-receipt-summary h3,
        .pos-final-payments h3,
        .pos-final-tax-lines strong,
        .pos-final-total-lines strong,
        .pos-final-payments strong,
        .pos-final-total-lines .grand,
        .pos-final-total-lines .grand strong,
        .pos-final-receipt > footer strong,
        .pos-final-gift-cards h3,
        .pos-final-gift-cards code,
        .pos-final-gift-cards strong
    ) {
        color: var(--os-color-ink);
    }

    html[data-theme="dark"] .page-pos-v2 :is(
        .pos-complete-receipt-head p,
        .pos-complete-receipt-actions > p,
        .pos-receipt-loading,
        .pos-final-receipt-brand small,
        .pos-final-company-details > div,
        .pos-final-receipt-meta small,
        .pos-final-receipt-item,
        .pos-final-receipt-item small,
        .pos-final-receipt-item-head,
        .pos-final-tax-lines > div,
        .pos-final-total-lines > div,
        .pos-final-payments > div,
        .pos-final-payments small,
        .pos-final-note p,
        .pos-final-receipt > footer,
        .pos-final-gift-cards small,
        .pos-final-gift-cards p
    ) {
        color: var(--os-color-text-secondary);
    }

    html[data-theme="dark"] .page-pos-v2 .pos-complete-receipt-body {
        background: var(--os-color-canvas);
    }

    html[data-theme="dark"] .page-pos-v2 .pos-final-receipt {
        border-color: var(--os-color-border);
        background: var(--os-color-surface);
        color: var(--os-color-text);
        box-shadow: var(--os-shadow-card);
    }

    html[data-theme="dark"] .page-pos-v2 :is(
        .pos-final-receipt-brand,
        .pos-final-company-details,
        .pos-final-receipt-items,
        .pos-final-receipt-item,
        .pos-final-total-lines .grand,
        .pos-final-payments,
        .pos-final-payments .pos-final-giftcard-balance,
        .pos-final-gift-cards p
    ) {
        border-color: var(--os-color-border);
    }

    html[data-theme="dark"] .page-pos-v2 .pos-final-receipt-paid {
        background: var(--os-color-success-soft);
        color: var(--os-color-success);
    }

    html[data-theme="dark"] .page-pos-v2 :is(.pos-final-note, .pos-final-gift-cards) {
        border-color: var(--os-color-border);
        background: var(--os-color-surface-muted);
        color: var(--os-color-text);
    }

    html[data-theme="dark"] .page-pos-v2 .pos-final-payments .pos-final-giftcard-balance > span {
        color: var(--os-color-text);
    }

    html[data-theme="dark"] .page-pos-v2 .pos-receipt-load-error {
        border-color: color-mix(in srgb, var(--os-color-danger) 42%, var(--os-color-border));
        background: var(--os-color-danger-soft);
        color: var(--os-color-danger);
    }
}

/* Diensten, producten en abonnementen: filters, menu's en statussen. */
html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) {
    --catalog-muted: var(--os-color-text-secondary);
    --catalog-brand: var(--os-color-primary);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) :is(.catalog-directory-search, .catalog-directory-filter) {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-input);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) .catalog-directory-filter select {
    color: var(--os-color-text);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) :is(.catalog-directory-search, .catalog-directory-filter):focus-within {
    border-color: var(--os-color-primary-border);
    box-shadow: 0 0 0 3px var(--os-color-focus);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) .catalog-image-dropzone,
html[data-theme="dark"] .catalog-category-modal .inline-category-create {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-surface-muted);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) .catalog-image-dropzone.is-dragging {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-selected);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) :is(
    .service-icon-select > span,
    .catalog-image-placeholder > span,
    .catalog-empty-state > span,
    .catalog-modal-icon
) {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) .catalog-image-field-heading strong {
    color: var(--os-color-ink);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) .catalog-image-field-heading span {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) .service-profile-metrics .metric-violet {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) .service-profile-metrics .metric-green {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) :is(.service-profile-metrics .metric-orange, .service-location-list > div > span) {
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) .catalog-summary-icon.metric-violet {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) .catalog-summary-icon.metric-green {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] :is(.page-services, .page-products, .page-offer) .catalog-summary-icon.metric-orange {
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning);
}

html[data-theme="dark"] .catalog-category-modal .icon-btn {
    border-color: var(--os-color-border);
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .subscription-status.active {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] .dashboard-empty-day > a {
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .dashboard-empty-day > span,
html[data-theme="dark"] .dashboard-focus-list .focus-opportunity > span:first-child {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .dashboard-focus-list a > span:first-child,
html[data-theme="dark"] .dashboard-focus-list .focus-credit > span:first-child {
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning);
}

html[data-theme="dark"] .dashboard-metric-icon.metric-violet,
html[data-theme="dark"] .customers-empty-state > span {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .dashboard-metric-icon.metric-green {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] .dashboard-metric-icon.metric-orange {
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning);
}

html[data-theme="dark"] .settings-panel > header > span,
html[data-theme="dark"] :is(.settings-permission-note, .settings-privacy-card) > span {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] .settings-panel > header > span.is-violet,
html[data-theme="dark"] :is(.settings-permission-note, .settings-privacy-card) > span {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .settings-context-note strong { color: var(--os-color-ink); }
html[data-theme="dark"] .settings-context-note > span { color: var(--os-color-accent-text); }

html[data-theme="dark"] :is(.page-package, .subscription-dashboard-v2) .subscription-v2-metric-icon.is-violet {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] :is(.page-package, .subscription-dashboard-v2) .subscription-v2-metric-icon.is-green {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] :is(.page-package, .subscription-dashboard-v2) .subscription-v2-metric-icon.is-orange {
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning);
}

html[data-theme="dark"] :is(.page-package, .subscription-dashboard-v2) .subscription-v2-metric-icon.is-blue {
    background: var(--os-color-info-soft);
    color: var(--os-color-info);
}

/* Automatiseringen: iedere presetkleur krijgt een donkere semantische variant. */
html[data-theme="dark"] :is(
    .tone-violet .automation-preset-icon,
    .tone-purple .automation-preset-icon,
    .automation-settings-icon.tone-violet,
    .automation-settings-icon.tone-purple,
    .automation-create-preset-icon,
    .automation-existing-icon
) {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] :is(
    .tone-mint .automation-preset-icon,
    .tone-teal .automation-preset-icon,
    .automation-settings-icon.tone-mint,
    .automation-settings-icon.tone-teal
) {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] :is(.tone-blue .automation-preset-icon, .automation-settings-icon.tone-blue) {
    background: var(--os-color-info-soft);
    color: var(--os-color-info);
}

html[data-theme="dark"] :is(
    .tone-rose .automation-preset-icon,
    .tone-pink .automation-preset-icon,
    .automation-settings-icon.tone-rose,
    .automation-settings-icon.tone-pink
) {
    background: var(--os-color-danger-soft);
    color: var(--os-color-danger);
}

html[data-theme="dark"] :is(
    .tone-orange .automation-preset-icon,
    .tone-amber .automation-preset-icon,
    .automation-settings-icon.tone-orange,
    .automation-settings-icon.tone-amber
) {
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning);
}

html[data-theme="dark"] .automation-runs-section details > summary > span {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .automation-overview-strip span.is-violet {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .automation-overview-strip span.is-blue {
    background: var(--os-color-info-soft);
    color: var(--os-color-info);
}

html[data-theme="dark"] .automation-overview-strip span.is-green {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] .automation-overview-strip span.is-orange {
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning);
}

/* Betaalterminalbeheer buiten de kleurgetrouwe productillustratie. */
html[data-theme="dark"] .terminal-handshake-page :is(.sumup-connect-card, .sumup-choice-card) {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
}

html[data-theme="dark"] .terminal-handshake-page .sumup-connect-card.is-connected {
    border-color: color-mix(in srgb, var(--os-color-success) 42%, var(--os-color-border));
    background: color-mix(in srgb, var(--os-color-success-soft) 34%, var(--os-color-surface));
}

html[data-theme="dark"] .terminal-handshake-page :is(.sumup-code-form, .terminal-pair-form) {
    border-color: var(--os-color-border);
    background: var(--os-color-surface-muted);
}

html[data-theme="dark"] .terminal-handshake-page .sumup-merchant-options label > span {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-input);
    color: var(--os-color-text);
}

html[data-theme="dark"] .terminal-handshake-page :is(.sumup-advanced > summary > span, .terminal-device-icon) {
    background: var(--os-color-surface-strong);
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .terminal-handshake-page :is(.sumup-trust-row, .terminal-device, .sumup-advanced .terminal-form) {
    border-color: var(--os-color-border);
}

/* Add-on-overzicht: de illustratieve betaalkaart volgt ook de werkplekmodus. */
html[data-theme="dark"] .apps-pay-preview,
html[data-theme="dark"] .apps-pay-chip {
    border-color: var(--os-color-border-strong);
    background: var(--os-color-surface-elevated);
    color: var(--os-color-text);
    box-shadow: var(--os-shadow-floating);
}

html[data-theme="dark"] .apps-pay-preview > header {
    border-color: var(--os-color-border);
}

html[data-theme="dark"] .apps-pay-preview :is(header small, header strong),
html[data-theme="dark"] .apps-pay-preview > div {
    color: var(--os-color-ink);
}

html[data-theme="dark"] .apps-pay-preview > div > small {
    color: var(--os-color-text-secondary);
}

html[data-theme="dark"] .apps-pay-preview > div > span,
html[data-theme="dark"] .apps-pay-chip > i {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .apps-pay-chip small {
    color: var(--os-color-success);
}

html[data-theme="dark"] .apps-directory-billing.apps-integration-pricing.is-paid {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .apps-directory-card {
    --app-card-accent: var(--os-color-accent-text);
    --app-card-soft: var(--os-color-primary-soft);
}

html[data-theme="dark"] .apps-directory-card.is-tone-green {
    --app-card-accent: var(--os-color-success);
    --app-card-soft: var(--os-color-success-soft);
}

html[data-theme="dark"] .apps-directory-card.is-tone-orange {
    --app-card-accent: var(--os-color-warning);
    --app-card-soft: var(--os-color-warning-soft);
}

html[data-theme="dark"] .apps-directory-card.is-tone-blue {
    --app-card-accent: var(--os-color-info);
    --app-card-soft: var(--os-color-info-soft);
}

html[data-theme="dark"] .apps-directory-section > header button { color: var(--os-color-accent-text); }
html[data-theme="dark"] .apps-directory-section > header button:hover { color: var(--os-color-primary-hover); }
html[data-theme="dark"] .apps-directory-status.is-active { color: var(--os-color-success); }
html[data-theme="dark"] .apps-directory-status.is-inactive { color: var(--os-color-text-secondary); }

/* Websitebouwer: alleen de beheerinterface wordt donker; de echte websitepreview
 * blijft bewust kleurgetrouw en dus in zijn eigen lichte iframe-canvas. */
html[data-theme="dark"] body.page-company-app :is(.main-standard-website, .visual-website-builder) {
    --app-bg: var(--os-color-canvas);
    --text-strong: var(--os-color-ink);
    --text: var(--os-color-text);
    --text-muted: var(--os-color-text-secondary);
    --surface: var(--os-color-surface);
    --surface-subtle: var(--os-color-surface-muted);
    --border: var(--os-color-border);
}

html[data-theme="dark"] .visual-website-builder :is(
    .visual-builder-main-tabs button:hover,
    .visual-builder-main-tabs button.is-active,
    .visual-builder-product-links a:hover,
    .visual-builder-product-links a.is-active,
    .visual-device-switcher button:hover,
    .visual-device-switcher button.is-active,
    .visual-color-preset:hover,
    .visual-color-preset.is-selected,
    .visual-choice-list button:hover,
    .visual-choice-list button.is-selected,
    .visual-button-presets button:hover,
    .visual-button-presets button.is-selected,
    .visual-radio-cards input:checked + span,
    .visual-position-options input:checked + span
) {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-selected);
    color: var(--os-color-accent-text);
    box-shadow: none;
}

html[data-theme="dark"] .visual-website-builder :is(.visual-panel-icon, .visual-page-card > span) {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .visual-website-builder .visual-builder-tips li > span {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .visual-website-builder .visual-status.is-draft {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .visual-website-builder .visual-status.is-online {
    background: var(--os-color-success-soft);
    color: var(--os-color-success);
}

html[data-theme="dark"] .visual-website-builder .visual-status.is-changes_pending {
    background: var(--os-color-warning-soft);
    color: var(--os-color-warning);
}

html[data-theme="dark"] .visual-website-builder .visual-save-state.is-saved { color: var(--os-color-success); }

html[data-theme="dark"] .visual-website-builder :is(
    .visual-panel-heading small,
    .visual-context-panel header small,
    .visual-page-card a,
    .visual-more-options summary
) {
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .visual-website-builder .visual-upload-button {
    border-color: var(--os-color-primary-border);
    background: var(--os-color-primary-softer);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .visual-website-builder .visual-dynamic-summary {
    background: var(--os-color-primary-softer);
    color: var(--os-color-text);
}

html[data-theme="dark"] .visual-website-builder .visual-dynamic-summary > span {
    background: var(--os-color-primary-soft);
    color: var(--os-color-accent-text);
}

html[data-theme="dark"] .visual-preview-viewport,
html[data-theme="dark"] .visual-preview-viewport iframe {
    background: #fff;
    color-scheme: light;
}

/* Zoekvelden waarvan de buitenste component de rand tekent. De algemene
 * donkere inputregel mag die rand niet met een ondoorzichtige input afdekken. */
html[data-theme="dark"] body.page-company-app :is(
    .catalog-directory-search,
    .customers-search,
    .apps-directory-search,
    .payments-search,
    .agenda-search,
    .booking-search,
    .agenda-create-customer-search
) > input,
html[data-theme="dark"] .page-pos-v2 :is(.pos-search, .pos-list-search, .pos-customer-search) > input {
    border: 0;
    background: transparent;
    box-shadow: none;
}

html[data-theme="dark"] body.page-company-app :is(
    .catalog-directory-search,
    .customers-search,
    .apps-directory-search,
    .payments-search,
    .agenda-search,
    .booking-search,
    .agenda-create-customer-search
) > input:focus,
html[data-theme="dark"] .page-pos-v2 :is(.pos-search, .pos-list-search, .pos-customer-search) > input:focus {
    border: 0;
    box-shadow: none;
    outline: 0;
}

/* Platformbeheer en onboarding */
html[data-theme="dark"] body:is(.page-platform-app, .setup-body, .unified-setup-body, .onboarding-experience-body) { background: var(--os-color-canvas); color: var(--os-color-ink); }
html[data-theme="dark"] .page-platform-app :is(.app-content, .main, .platform-app-content) { background: var(--os-color-canvas); color: var(--os-color-ink); }
html[data-theme="dark"] :is(.setup-header, .unified-header, .onboarding-experience-header, .unified-content) { border-color: var(--os-color-border); background-color: var(--os-color-surface); color: var(--os-color-ink); }

html[data-theme="dark"] :is(.skeleton, [class*="skeleton"]) { background-color: var(--os-color-skeleton); }
html[data-theme="dark"] :is(.tooltip, [role="tooltip"]) { border-color: var(--os-color-border); background: var(--os-color-surface-elevated); color: var(--os-color-ink); box-shadow: var(--os-shadow-floating); }

/* Abonnementsafhankelijke functies blijven zichtbaar en commercieel bruikbaar. */
.feature-lock-shell {
    width: min(980px, 100%);
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr);
    align-items: center;
    gap: clamp(32px, 6vw, 72px);
    margin: clamp(24px, 6vh, 72px) auto;
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid var(--sovado-border);
    border-radius: var(--os-radius-xl);
    background: var(--sovado-surface);
    box-shadow: var(--os-shadow-card);
}

.feature-lock-preview {
    position: relative;
    min-height: 330px;
    display: grid;
    place-content: center;
    gap: 14px;
    overflow: hidden;
    padding: 32px;
    border: 1px solid var(--os-color-primary-border);
    border-radius: var(--os-radius-xl);
    background: linear-gradient(145deg, var(--os-color-primary-softer), var(--os-color-info-soft));
}

.feature-lock-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55), transparent 65%);
    transform: translateX(-100%);
    animation: feature-preview-sheen 4.8s ease-in-out infinite;
}

@keyframes feature-preview-sheen { 55%, 100% { transform: translateX(100%); } }

.feature-lock-preview-icon {
    position: relative;
    z-index: 1;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    border-radius: 22px;
    background: var(--sovado-surface);
    color: var(--sovado-primary);
    box-shadow: var(--os-shadow-elevated);
    font-size: 26px;
}

.feature-lock-preview > i {
    width: min(220px, 52vw);
    height: 13px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--sovado-primary) 11%, var(--sovado-surface));
}

.feature-lock-preview > i:nth-of-type(2) { width: min(170px, 42vw); }
.feature-lock-preview > i:nth-of-type(3) { width: min(195px, 47vw); }
.feature-lock-copy { min-width: 0; }
.feature-lock-kicker { display: block; margin-bottom: 10px; color: var(--sovado-primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.feature-lock-copy h1 { margin: 0; color: var(--sovado-text); font-size: clamp(30px, 4vw, 45px); letter-spacing: -.045em; line-height: 1.08; }
.feature-lock-copy > p { max-width: 570px; margin: 16px 0 22px; color: var(--sovado-muted); font-size: 15px; line-height: 1.65; }
.feature-lock-offer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding: 16px 18px; border: 1px solid var(--os-color-primary-border); border-radius: var(--os-radius-md); background: var(--os-color-primary-softer); }
.feature-lock-offer span, .feature-lock-offer b { display: grid; gap: 3px; }
.feature-lock-offer small { color: var(--sovado-muted); font-size: 10px; font-weight: 550; line-height: 1.4; }
.feature-lock-offer strong { color: var(--sovado-text); font-size: 14px; }
.feature-lock-offer > b { color: var(--sovado-primary); font-size: 18px; text-align: right; }
.feature-lock-note { display: block; margin-top: 14px; color: var(--sovado-muted); line-height: 1.5; }

/* Dashboarddetails uit de vernieuwde dagweergave. */
.page-company-app.page-dashboard .dashboard-hero.os-page-header {
    min-height: 0;
    margin: 0 0 14px;
    padding: 10px 0 12px;
}
.page-dashboard .dashboard-toolbar { display: grid; grid-template-columns: minmax(280px, 750px) auto; }
.page-dashboard .dashboard-side-stack { grid-template-rows: auto auto auto; }
.page-dashboard .dashboard-quick-panel { order: 1; }
.page-dashboard .dashboard-focus--top { order: 2; }
.page-dashboard .dashboard-growth-card { order: 3; }
.page-dashboard .dashboard-action-grid > a.is-locked { border-style: dashed; background: var(--os-color-surface-muted); color: var(--sovado-muted); }
.page-dashboard .dashboard-action-grid > a.is-locked > span { background: var(--os-color-surface-strong); color: var(--sovado-muted); }
.page-dashboard .dashboard-day-add { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-dashboard .dashboard-day-add a { min-height: 42px; padding: 0 14px; }
.page-dashboard .dashboard-day-add a:first-child { border-color: var(--os-color-primary-border); background: var(--os-color-primary-softer); }
.page-dashboard .dashboard-day-add a:last-child { border-color: transparent; background: transparent; }
.page-dashboard :is(
    button,
    [role="button"],
    .os-btn,
    .dashboard-trial-warning > a,
    .dashboard-primary-action,
    .dashboard-secondary-action,
    .dashboard-notification-link,
    .dashboard-company-switcher,
    .dashboard-day-controls a,
    .dashboard-empty-day > a,
    .dashboard-day-add a,
    .dashboard-action-grid > a,
    .dashboard-growth-copy > b
) { box-shadow: none; }

/* De marketing-hub toont ook vergrendelde modules als zachte previews. */
.marketing-hero-card--compact { min-height: 148px; grid-template-columns: 1fr; }
.marketing-module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.marketing-module-grid > a.is-locked { border-style: dashed; background: linear-gradient(145deg, var(--os-color-surface), var(--os-color-surface-muted)); }
.marketing-module-grid > a.is-locked:hover { border-color: var(--os-color-primary-border); }
.marketing-module-grid > a.is-locked h2 i { margin-left: 5px; color: var(--os-color-text-muted); font-size: 10px; }
.marketing-segment-card { overflow: hidden; }
.marketing-segment-list { display: grid; }
.marketing-segment-list article { min-height: 70px; display: flex; align-items: center; gap: 14px; padding: 12px 20px; }
.marketing-segment-list article + article { border-top: 1px solid var(--sovado-border); }
.marketing-segment-list article > span { width: 38px; height: 38px; display: grid; flex: 0 0 38px; place-items: center; border-radius: 11px; background: var(--os-color-primary-softer); color: var(--sovado-primary); }
.marketing-segment-list strong, .marketing-segment-list small { display: block; }
.marketing-segment-list small { margin-top: 3px; color: var(--sovado-muted); font-size: 11px; }

/* Abonnement, rapportages en medewerkers gebruiken dezelfde rustige locktaal. */
.subscription-available-addons { margin-bottom: 18px; scroll-margin-top: 20px; }
.subscription-available-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.subscription-available-grid > article { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--sovado-border); border-radius: var(--os-radius-md); background: var(--os-color-surface-muted); }
.subscription-available-grid strong { color: var(--sovado-text); font-size: 13px; }
.subscription-available-grid p { margin: 3px 0; color: var(--sovado-muted); font-size: 11px; line-height: 1.45; }
.subscription-available-grid small { color: var(--sovado-primary); font-size: 10px; font-weight: 650; }
.subscription-available-grid form { margin: 0; }
.subscription-addon-unpriced { display: inline-flex; align-items: center; gap: 6px; color: var(--sovado-muted); font-size: 10px; font-weight: 650; white-space: nowrap; }
.reports-locked-panel { min-height: 120px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-bottom: 16px; padding: 20px; border: 1px solid var(--os-color-primary-border); border-radius: var(--os-radius-lg); background: var(--os-color-primary-softer); }
.reports-locked-panel > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--sovado-surface); color: var(--sovado-primary); }
.reports-locked-panel :is(small, h2, p) { margin: 0; }
.reports-locked-panel small { color: var(--sovado-primary); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reports-locked-panel h2 { margin-top: 3px; color: var(--sovado-text); font-size: 17px; }
.reports-locked-panel p { margin-top: 5px; color: var(--sovado-muted); font-size: 12px; line-height: 1.5; }
.reports-locked-panel--soft { margin-top: 16px; border-color: var(--sovado-border); background: var(--sovado-surface); }
.employee-access-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; margin-bottom: 18px; padding: 15px 17px; border: 1px solid var(--os-color-primary-border); border-radius: var(--os-radius-md); background: var(--os-color-primary-softer); }
.employee-access-note > i { color: var(--sovado-primary); font-size: 18px; }
.employee-access-note strong { color: var(--sovado-text); }
.employee-access-note p { margin: 3px 0 0; color: var(--sovado-muted); font-size: 12px; }
.employee-access-note > a { color: var(--sovado-primary); font-size: 12px; font-weight: 750; white-space: nowrap; }
.employee-paid-seat-confirm { display: block; margin-bottom: 18px; padding: 14px; border: 1px solid var(--os-color-primary-border); border-radius: var(--os-radius-md); background: var(--os-color-primary-softer); cursor: pointer; }
.employee-paid-seat-confirm > span { display: flex; align-items: flex-start; gap: 12px; }
.employee-paid-seat-confirm input { margin: 3px 10px 0 0; accent-color: var(--sovado-primary); }
.employee-paid-seat-confirm strong, .employee-paid-seat-confirm small { display: block; }
.employee-paid-seat-confirm small { margin-top: 3px; color: var(--sovado-muted); font-weight: 500; }

@media (min-width: 981px) and (max-height: 820px) {
    .page-company-app .sidebar-subscription { display: block; padding: 8px 10px; }
    .page-company-app .sidebar-subscription p { margin: 3px 0; }
    .page-company-app .sidebar-subscription :is(small, a) { font-size: 9px; }
    .page-company-app .sidebar-subscription strong { font-size: 11px; }
}

@media (max-width: 900px) {
    .feature-lock-shell { grid-template-columns: 1fr; min-height: 0; margin-block: 16px; }
    .feature-lock-preview { min-height: 220px; }
    .subscription-available-grid { grid-template-columns: 1fr; }
    .marketing-module-grid { grid-template-columns: 1fr 1fr; }
    .page-dashboard .dashboard-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 620px) {
    .feature-lock-shell { padding: 20px; border-radius: var(--os-radius-lg); }
    .feature-lock-preview { min-height: 175px; }
    .feature-lock-offer, .employee-access-note { align-items: flex-start; flex-direction: column; }
    .feature-lock-offer { display: grid; }
    .feature-lock-offer > b { text-align: left; }
    .marketing-module-grid { grid-template-columns: 1fr; }
    .reports-locked-panel { grid-template-columns: auto minmax(0, 1fr); }
    .reports-locked-panel > a { grid-column: 1 / -1; }
    .employee-access-note { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .employee-access-note > a { grid-column: 1 / -1; }
    .subscription-available-grid > article { grid-template-columns: auto minmax(0, 1fr); }
    .subscription-available-grid > article > :is(a, form, .subscription-addon-unpriced) { grid-column: 1 / -1; }
    .page-dashboard .dashboard-day-add { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { scroll-behavior: auto; }
    .feature-lock-preview::after { animation: none; }
}