/*
 * Kaibo for business (3.11.0): the look of the Office applications of 2016.
 *   - A title bar in the one orange, with the app launcher, the app name and the account on it.
 *   - White documents and panes on a light grey workspace; hairline borders instead of shadows; square corners.
 *   - Segoe UI throughout: light page titles, semibold commands, sentence-case labels.
 *   - Orange marks only what is selected and the main action; everything else is grey and black.
 * Loaded after the module stylesheets; the tokens themselves live in theme.css. Every rule applies to the light and
 * the dark theme (:root[data-theme]); the colours come from the tokens. What the dark theme does differently, after
 * the Black theme of Office 2016 (a near-black title bar, white paper for documents), is in the last section.
 */

/* ───────────── Base ───────────── */
:root[data-theme] body {
    background: var(--bg);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

:root[data-theme] h1 {
    font-weight: 300;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: 0;
}

:root[data-theme] h2 {
    font-weight: 600;
    letter-spacing: 0;
}

/* The page and app eyebrows ("Dagelijks", "Geld") and their orange square are not part of this look. */
:root[data-theme] .page-eyebrow {
    display: none;
}

:root[data-theme] .eyebrow::before {
    display: none;
}

:root[data-theme] :focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

/* ───────────── Title bar ───────────── */
:root[data-theme] .topbar {
    gap: 6px;
    padding-left: max(4px, env(safe-area-inset-left));
    border-bottom: 0;
}

:root[data-theme] .topbar::before {
    background: var(--accent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

:root[data-theme] .topbar-icon-button,
:root[data-theme] .topbar-apps {
    width: 48px;
    height: var(--topbar-height);
    border-radius: 0;
}

:root[data-theme] .topbar-logo {
    width: 26px;
    height: 26px;
    border-radius: 2px;
    box-shadow: none;
}

:root[data-theme] .topbar-kaibo {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}

:root[data-theme] .topbar-app {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
}

:root[data-theme] .topbar-profile {
    height: var(--topbar-height);
    border: 0;
    border-radius: 0;
}

:root[data-theme] .topbar .user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: var(--font-sans);
    font-weight: 600;
}

/* The menus of the title bar drop down as Office menus: white, square, a soft shadow. */
:root[data-theme] .app-launcher,
:root[data-theme] .profile-menu {
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
    box-shadow: var(--elev-3);
}

:root[data-theme] .app-tile,
:root[data-theme] .profile-menu a,
:root[data-theme] .profile-menu button {
    border-radius: 0;
}

:root[data-theme] .app-tile:hover,
:root[data-theme] .profile-menu a:hover,
:root[data-theme] .profile-menu button:hover {
    background: var(--surface-2);
}

:root[data-theme] .app-tile.selected {
    background: var(--accent-soft);
}

/* ───────────── Navigation panes (Financieel, Werk, Auto, Mail, Cloud) ───────────── */
:root[data-theme] .app-rail,
:root[data-theme] #cars .car-rail,
:root[data-theme] .mail-folders,
:root[data-theme] .cloud-sidebar {
    background: var(--surface);
    border-right-color: var(--line);
}

:root[data-theme] .app-rail-title,
:root[data-theme] #cars .car-rail-head h1 {
    margin-top: 0;
    font-family: var(--font-sans);
    font-size: 26px;
    font-weight: 300;
}

:root[data-theme] .app-rail-nav > a,
:root[data-theme] .app-rail-nav > button,
:root[data-theme] .work-app.has-rail .app-rail-nav > button,
:root[data-theme] #cars .car-rail-nav button {
    min-height: 38px;
    border-radius: 0;
    font-size: 14px;
}

:root[data-theme] .app-rail-nav > a:hover,
:root[data-theme] .app-rail-nav > button:hover,
:root[data-theme] .work-app.has-rail .app-rail-nav > button:hover,
:root[data-theme] #cars .car-rail-nav button:hover {
    background: var(--surface-2);
}

/* The selected part: a light orange row with an orange edge, as a selected folder in Outlook.
   On a phone the panes are a strip, and the selected part keeps its orange underline. */
:root[data-theme] .app-rail-nav > [aria-current="page"],
:root[data-theme] .work-app.has-rail .app-rail-nav > button[aria-current="page"],
:root[data-theme] #cars .car-rail-nav button[aria-current="page"],
:root[data-theme] .app-rail-accounts a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

@media (min-width: 721px) {
    :root[data-theme] .app-rail-nav > [aria-current="page"],
    :root[data-theme] .work-app.has-rail .app-rail-nav > button[aria-current="page"],
    :root[data-theme] #cars .car-rail-nav button[aria-current="page"],
    :root[data-theme] .app-rail-accounts a[aria-current="page"] {
        background: var(--accent-soft);
    }

    :root[data-theme] .app-rail-nav > [aria-current="page"]::before,
    :root[data-theme] #cars .car-rail-nav button[aria-current="page"]::before {
        left: -14px;
        top: 0;
        bottom: 0;
        width: 3px;
    }
}

:root[data-theme] .app-rail-accounts a {
    border-radius: 0;
}

/* ───────────── Page headers: a white command band across the top of the page ───────────── */
:root[data-theme] .finance-main > .page-header,
:root[data-theme] main > .page-header {
    margin: -32px calc(clamp(20px, 3.2vw, 48px) * -1) 24px;
    padding: 22px clamp(20px, 3.2vw, 48px) 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

@media (max-width: 1100px) and (min-width: 721px) {
    :root[data-theme] .finance-main > .page-header,
    :root[data-theme] main > .page-header {
        margin: -28px -28px 22px;
        padding: 20px 28px 16px;
    }
}

@media (max-width: 720px) {
    :root[data-theme] .finance-main > .page-header,
    :root[data-theme] main > .page-header {
        margin: -22px calc(max(16px, env(safe-area-inset-right)) * -1) 18px calc(max(16px, env(safe-area-inset-left)) * -1);
        padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
    }
}

:root[data-theme] .page-header h1 {
    font-size: 28px;
}

:root[data-theme] .page-subtitle {
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 13px;
}

/* ───────────── Commands ───────────── */
:root[data-theme] .primary-action {
    min-height: 32px;
    border: 1px solid var(--accent);
    border-radius: 2px;
    background: var(--accent);
    box-shadow: none;
    color: var(--on-accent);
    font-weight: 600;
}

:root[data-theme] .primary-action:hover {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
    color: var(--on-accent);
}

:root[data-theme] .secondary-action {
    min-height: 32px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: var(--surface);
    box-shadow: none;
    color: var(--ink);
    font-weight: 600;
}

:root[data-theme] .secondary-action:hover {
    border-color: var(--ink-4);
    background: var(--surface-2);
    color: var(--ink);
}

:root[data-theme] .danger-button {
    border-radius: 2px;
    box-shadow: none;
}

/* ───────────── Fields ───────────── */
:root[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
:root[data-theme] select,
:root[data-theme] textarea {
    border-color: var(--ink-4);
    border-radius: 2px;
    box-shadow: none;
}

:root[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):hover,
:root[data-theme] select:hover,
:root[data-theme] textarea:hover {
    border-color: var(--ink-2);
}

:root[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
:root[data-theme] select:focus,
:root[data-theme] textarea:focus {
    border-color: var(--accent);
    outline: 1px solid var(--accent);
    outline-offset: -2px;
    box-shadow: none;
}

:root[data-theme] input[type="checkbox"],
:root[data-theme] input[type="radio"] {
    accent-color: var(--accent);
}

/* ───────────── Panels, dialogs and tables ───────────── */
:root[data-theme] .panel,
:root[data-theme] .notice {
    border-radius: 2px;
    box-shadow: none;
}

:root[data-theme] dialog {
    border-radius: 2px;
}

:root[data-theme] dialog::backdrop {
    background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* generated labels: start */
/* Small labels: sentence case and grey, as Office labels its groups, not spaced capitals.
   Generated by scripts/build-office-labels.cjs from the module stylesheets; do not edit by hand. */
:root[data-theme] .topbar .user-avatar,
:root[data-theme] .profile-menu .user-avatar,
:root[data-theme] .launcher-group,
:root[data-theme] .page-eyebrow,
:root[data-theme] .eyebrow,
:root[data-theme] .section-header > span,
:root[data-theme] .settings-tab,
:root[data-theme] .transaction-date small,
:root[data-theme] .transaction-direction-filter a,
:root[data-theme] .transaction-filter-clear,
:root[data-theme] .transaction-month h3,
:root[data-theme] dt,
:root[data-theme] .widget-label,
:root[data-theme] .recurring-summary p,
:root[data-theme] .recurring-summary small,
:root[data-theme] .recurring-list-heading span,
:root[data-theme] .recurring-table th,
:root[data-theme] .recurring-upcoming time span,
:root[data-theme] .float-tip-head,
:root[data-theme] .recurring-dialog-heading::before,
:root[data-theme] .cloud-dialog:not(.is-viewer) .cloud-dialog-heading::before,
:root[data-theme] .car-finance-fields legend,
:root[data-theme] .app-rail-group-label,
:root[data-theme] #cars .car-eyebrow,
:root[data-theme] #cars .car-plate,
:root[data-theme] #cars .car-hero-art > span,
:root[data-theme] #cars .car-psa .psa-eyebrow,
:root[data-theme] #cars .car-hero .eyebrow,
:root[data-theme] #cars .psa-connection-pill,
:root[data-theme] #cars .car-hero .car-eyebrow,
:root[data-theme] #cars .car-status,
:root[data-theme] #cars .car-summary > div > span,
:root[data-theme] #cars .car-garage-switch button small,
:root[data-theme] #cars .car-hero-art :is([data-car-model-photo-error], .car-model-photo-missing),
:root[data-theme] #cars .car-tabs button,
:root[data-theme] #cars .car-chart-column time,
:root[data-theme] #cars .car-chart-column:last-child time,
:root[data-theme] #cars .car-upcoming-date small,
:root[data-theme] #cars .car-perkm-value small,
:root[data-theme] #cars .car-ledger [data-cost-count],
:root[data-theme] #cars .car-period button,
:root[data-theme] #cars .car-log-date small,
:root[data-theme] #cars .car-log-bank,
:root[data-theme] #cars .car-fixed-list small,
:root[data-theme] #cars .psa-steps li,
:root[data-theme] #cars .psa-highlight-title,
:root[data-theme] #cars .psa-control-heading > span,
:root[data-theme] #cars .car-model-picker-heading::before,
:root[data-theme] #cars .car-rail-switch span,
:root[data-theme] #cars .car-rail .car-open-sales span,
:root[data-theme] .cloud-storage-head span,
:root[data-theme] .cloud-view-controls > span,
:root[data-theme] .cloud .cloud-columns [data-cloud-sort-by],
:root[data-theme] .cloud-section-label,
:root[data-theme] .cloud-shortcuts,
:root[data-theme] .cloud-transfer-heading-button strong,
:root[data-theme] .cloud-group-head strong,
:root[data-theme] .cloud-zip-summary dt,
:root[data-theme] .cloud-zip-table th,
:root[data-theme] .ca-model,
:root[data-theme] .ca-label,
:root[data-theme] .ca-status,
:root[data-theme] .ca-empty > .ca-index,
:root[data-theme] .planner-overline,
:root[data-theme] .planner-day-date>small,
:root[data-theme] .planner-weekdays>span,
:root[data-theme] .work-heading .eyebrow,
:root[data-theme] .work-app .work-tabs button,
:root[data-theme] .work-app .planner-view button:not(.primary-action),
:root[data-theme] .work-annual-table thead th,
:root[data-theme] .week-steps li,
:root[data-theme] .week-meter > span,
:root[data-theme] .week-action details summary,
:root[data-theme] .timeline-date small,
:root[data-theme] .timeline-date span,
:root[data-theme] .timeline-holiday,
:root[data-theme] .work-app button.timeline-entry b,
:root[data-theme] .timeline-total small,
:root[data-theme] .week-side h3,
:root[data-theme] .work-app button.planner-week-link,
:root[data-theme] .balance-meter > small,
:root[data-theme] .annual-month small,
:root[data-theme] .annual-caption span,
:root[data-theme] .work-app .work-ledger-table th,
:root[data-theme] .work-app button.timeline-day-action,
:root[data-theme] .work-app button.balance-meter-open,
:root[data-theme] .work-app .afs-version-fields label,
:root[data-theme] .afs-section-head > span,
:root[data-theme] .afs-fields > fieldset:not(.afs-week) > legend,
:root[data-theme] .afs-week-head,
:root[data-theme] .afs-advanced > summary span,
:root[data-theme] .afs-time > span,
:root[data-theme] .work-total > header,
:root[data-theme] .work-total-label,
:root[data-theme] .work-app .work-balance-table thead th,
:root[data-theme] .work-app .work-balance-table tfoot th,
:root[data-theme] .annual-year-end tbody th small,
:root[data-theme] .work-app .work-dialog > header::before,
:root[data-theme] .work-team-actions span,
:root[data-theme] .whats-new-eyebrow,
:root[data-theme] .whats-new-latest,
:root[data-theme] .whats-new-history-title,
:root[data-theme] #dashboard .widget-label,
:root[data-theme] #dashboard .widget-heading a,
:root[data-theme] #dashboard .balance-hero .balance-hero-caption,
:root[data-theme] #dashboard .balance-hero-stale,
:root[data-theme] #dashboard .widget-account-list small,
:root[data-theme] #dashboard .widget-shortcut-list > *,
:root[data-theme] #dashboard .mini-history-period > small,
:root[data-theme] #dashboard .insight-link,
:root[data-theme] #dashboard .payment-date small,
:root[data-theme] #dashboard .forecast-horizon,
:root[data-theme] #dashboard .forecast-status,
:root[data-theme] #dashboard .forecast-change span,
:root[data-theme] #dashboard .forecast-milestones time,
:root[data-theme] #dashboard .cashflow-heading > span,
:root[data-theme] #dashboard .widget-picker-categories button,
:root[data-theme] #dashboard .dashboard-onboarding-steps span,
:root[data-theme] .user-badge,
:root[data-theme] .profile-facts dt,
:root[data-theme] .profile-modules-label,
:root[data-theme] .profile-secret,
:root[data-theme] .profile-module-state,
:root[data-theme] .users-summary dt,
:root[data-theme] .user-module-name,
:root[data-theme] .mail-quota span,
:root[data-theme] .mail-list-head span,
:root[data-theme] .auth-lead,
:root[data-theme] form label,
:root[data-theme] .auth-facts dt {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}
/* generated labels: end */

/* generated corners: start */
/* Square corners: fixed rounded corners of the older look become the 2px corner of Office.
   Generated by scripts/build-office-labels.cjs from the module stylesheets; do not edit by hand. */
:root[data-theme] .topbar-logo,
:root[data-theme] .app-tile-icon,
:root[data-theme] .dashboard-widget,
:root[data-theme] .widget-origin,
:root[data-theme] .widget-drop-preview,
:root[data-theme] .widget-picker,
:root[data-theme] .widget-picker-heading .icon-button,
:root[data-theme] .widget-picker-item,
:root[data-theme] .chart-interval,
:root[data-theme] .chart-interval button,
:root[data-theme] .balance-tooltip,
:root[data-theme] .car-loan,
:root[data-theme] .car-sold-banner,
:root[data-theme] :is(.recurring-dialog, .cloud-dialog:not(.is-viewer)) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
:root[data-theme] #cars .car-model-field,
:root[data-theme] #cars .car-model-picker,
:root[data-theme] #cars .car-model-search input,
:root[data-theme] #cars .car-model-picker-filters button,
:root[data-theme] #cars .car-model-card,
:root[data-theme] #cars .car-hero,
:root[data-theme] #cars .car-status,
:root[data-theme] #cars .car-summary > div,
:root[data-theme] #cars .car-summary > div:first-child,
:root[data-theme] #cars .car-chart-section,
:root[data-theme] #cars .car-ledger,
:root[data-theme] #cars .car-details > section,
:root[data-theme] #cars .car-filters,
:root[data-theme] #cars .car-finance-grid > div,
:root[data-theme] #cars .car-finance-grid .car-loan,
:root[data-theme] #cars .car-empty,
:root[data-theme] #cars .car-psa,
:root[data-theme] #cars .psa-connection-pill,
:root[data-theme] #cars .psa-highlight,
:root[data-theme] #cars .psa-highlight meter::-webkit-meter-bar,
:root[data-theme] #cars .psa-highlight meter::-webkit-meter-optimum-value,
:root[data-theme] #cars .car-psa button,
:root[data-theme] #cars .psa-control-symbol,
:root[data-theme] #cars .psa-data-card,
:root[data-theme] #cars .car-psa input,
:root[data-theme] #cars .car-psa select,
:root[data-theme] #cars .car-energy-item,
:root[data-theme] #cars .psa-location-card,
:root[data-theme] #cars .psa-advanced-link,
:root[data-theme] #cars .car-rail-icon,
:root[data-theme] .cloud-dialog,
:root[data-theme] .cloud-dialog input,
:root[data-theme] .cloud-dialog select,
:root[data-theme] .cloud-archive-status:not(:empty),
:root[data-theme] .cloud-media,
:root[data-theme] .cloud-pdf,
:root[data-theme] .cloud-office-controls select,
:root[data-theme] .cv-empty,
:root[data-theme] .work-app button:not(.primary-action),
:root[data-theme] .work-app input,
:root[data-theme] .work-app select,
:root[data-theme] .work-app textarea,
:root[data-theme] .work-dialog,
:root[data-theme] .work-line,
:root[data-theme] .work-preview,
:root[data-theme] .work-week-schedule,
:root[data-theme] .planner-view,
:root[data-theme] .planner-day,
:root[data-theme] .planner-balance-card,
:root[data-theme] .planner-progress,
:root[data-theme] .planner-progress>span,
:root[data-theme] .planner-month-week,
:root[data-theme] .work-app .work-dialog,
:root[data-theme] .work-app .work-planner button.planner-suggestion,
:root[data-theme] .work-annual-cards section,
:root[data-theme] .work-annual-table,
:root[data-theme] .work-dialog [data-week-error],
:root[data-theme] .whats-new-dialog,
:root[data-theme] .whats-new-feature,
:root[data-theme] .whats-new-done,
:root[data-theme] .users-dialog-modules > div,
:root[data-theme] .mail-chip,
:root[data-theme] .recurring-dialog .mail-setting-switch input[role="switch"],
:root[data-theme] .auth-brand img {
    border-radius: 2px;
}
/* generated corners: end */

/* generated accent text: start */
/* Dark theme: text written in the orange of fills takes the lighter orange for text, which reaches 4.5:1 on the dark panes.
   Generated by scripts/build-office-labels.cjs from the module stylesheets; do not edit by hand. */
:root[data-theme="dark"] .topbar-apps[aria-expanded="true"],
:root[data-theme="dark"] .app-tile.selected .app-tile-icon,
:root[data-theme="dark"] .menu-item:hover svg,
:root[data-theme="dark"] .widget-heading a,
:root[data-theme="dark"] .widget-account-list a:hover strong,
:root[data-theme="dark"] .widget-shortcut-list a:hover,
:root[data-theme="dark"] .widget-shortcut-list button:hover,
:root[data-theme="dark"] .account-balance-widget:hover h2,
:root[data-theme="dark"] .widget-drop-label,
:root[data-theme="dark"] .widget-life .widget-life-icon,
:root[data-theme="dark"] .insight-link,
:root[data-theme="dark"] .flow-outgoing,
:root[data-theme="dark"] .insight-transactions a:hover b,
:root[data-theme="dark"] .recurring-empty > .app-icon,
:root[data-theme="dark"] .car-empty > .app-icon,
:root[data-theme="dark"] .app-rail-nav > [aria-current="page"] .app-rail-icon,
:root[data-theme="dark"] #cars .car-model-field-photo,
:root[data-theme="dark"] #cars .car-model-picker-filters button[aria-pressed=true],
:root[data-theme="dark"] #cars .car-model-selected,
:root[data-theme="dark"] #cars .car-hero .car-eyebrow,
:root[data-theme="dark"] #cars .car-hero-art,
:root[data-theme="dark"] #cars .car-psa .psa-eyebrow,
:root[data-theme="dark"] #cars .car-psa[data-updating="true"] .psa-feedback,
:root[data-theme="dark"] #cars .psa-highlight-fuelLevel strong,
:root[data-theme="dark"] #cars .psa-control-symbol,
:root[data-theme="dark"] #cars .psa-map-link,
:root[data-theme="dark"] #cars .car-energy-item strong,
:root[data-theme="dark"] #cars .psa-control-tabs button[aria-pressed="true"],
:root[data-theme="dark"] #cars .psa-data-card summary::after,
:root[data-theme="dark"] #cars .psa-location-heading a,
:root[data-theme="dark"] #cars .psa-advanced-link,
:root[data-theme="dark"] #cars .psa-back-link,
:root[data-theme="dark"] #cars .car-tabs button span,
:root[data-theme="dark"] #cars .car-upcoming-list .is-soon .car-upcoming-copy small,
:root[data-theme="dark"] #cars .psa-group[data-tone="warn"] p,
:root[data-theme="dark"] #cars .psa-group[data-tone="active"] p,
:root[data-theme="dark"] #cars .psa-group[data-tone="warn"] .psa-group-icon,
:root[data-theme="dark"] #cars .psa-group[data-tone="active"] .psa-group-icon,
:root[data-theme="dark"] #cars .car-rail-icon,
:root[data-theme="dark"] #cars .car-rail-nav button[aria-current="page"] .car-rail-nav-icon,
:root[data-theme="dark"] .cloud-tabs button[aria-pressed=true] svg,
:root[data-theme="dark"] .cloud-tabs button[aria-pressed=true] small,
:root[data-theme="dark"] .cloud-columns .is-sorted::after,
:root[data-theme="dark"] .cloud-row-state,
:root[data-theme="dark"] .cloud .cloud-breadcrumbs .is-drop-target,
:root[data-theme="dark"] .cloud-drop-overlay,
:root[data-theme="dark"] .cloud-transfer-icon,
:root[data-theme="dark"] .cloud-dialog [aria-busy=true] .cloud-archive-status,
:root[data-theme="dark"] .cloud-archive-metrics strong,
:root[data-theme="dark"] .cloud .cloud-assistant-button[aria-expanded=true] > svg,
:root[data-theme="dark"] .work-tabs button[aria-current],
:root[data-theme="dark"] .work-app .work-tabs button[aria-current],
:root[data-theme="dark"] .work-day.today time,
:root[data-theme="dark"] .work-app [data-feedback]:not(:empty),
:root[data-theme="dark"] .work-balance-cards strong,
:root[data-theme="dark"] .work-week-total strong,
:root[data-theme="dark"] .planner-day-date>span,
:root[data-theme="dark"] .planner-day.is-today .planner-day-date>strong,
:root[data-theme="dark"] .planner-balance-state,
:root[data-theme="dark"] .planner-week-result em,
:root[data-theme="dark"] .work-app .planner-day.is-today .planner-day-date > strong,
:root[data-theme="dark"] .work-comparison header > span,
:root[data-theme="dark"] .work-form-section-title > span,
:root[data-theme="dark"] .timeline-day.is-today .timeline-date strong,
:root[data-theme="dark"] .work-app button.timeline-add:hover,
:root[data-theme="dark"] .week-pending b,
:root[data-theme="dark"] .work-app button.timeline-day-action,
:root[data-theme="dark"] .work-app button.balance-meter-open:hover,
:root[data-theme="dark"] .afs-section-head > span,
:root[data-theme="dark"] .afs-week-total .is-off,
:root[data-theme="dark"] .afs-save.is-dirty b,
:root[data-theme="dark"] .afs-summary dd.is-off,
:root[data-theme="dark"] .annual-year-end tbody th small,
:root[data-theme="dark"] .whats-new-launch:hover svg,
:root[data-theme="dark"] .whats-new-eyebrow,
:root[data-theme="dark"] #dashboard .widget-shortcut-list > *:hover .dashboard-glyph,
:root[data-theme="dark"] .mail-folders .mail-folder-list button[aria-current] .mail-folder-icon,
:root[data-theme="dark"] .mail-star.is-on {
    color: var(--accent-text);
}
/* generated accent text: end */

/* ───────────── Switches: the round Office toggle ───────────── */
:root[data-theme] .recurring-switch span {
    width: 40px;
    height: 20px;
    border: 1px solid var(--ink-3);
    border-radius: 10px;
    background: var(--surface);
}

:root[data-theme] .recurring-switch span::after {
    width: 12px;
    height: 12px;
    margin: 3px;
    border-radius: 50%;
    background: var(--ink-3);
}

:root[data-theme] .recurring-switch input:checked + span {
    border-color: var(--accent);
    background: var(--accent);
}

:root[data-theme] .recurring-switch input:checked + span::after {
    background: var(--on-accent);
    transform: translateX(20px);
}

/* ───────────── Tabs: the ribbon tabs, sentence case with an orange underline ───────────── */
:root[data-theme] .settings-tab,
:root[data-theme] .account-tabs a {
    font-size: 14px;
}

:root[data-theme] .settings-tab.active,
:root[data-theme] .account-tabs a.active {
    font-weight: 600;
}

/* ───────────── Dashboard: plain figures, no decoration ───────────── */
:root[data-theme] #dashboard .balance-hero-symbol {
    display: none;
}

:root[data-theme] .recurring-confirm > h2::before,
:root[data-theme] .car-finance-fields legend::before,
:root[data-theme] .profile-hero::before {
    display: none;
}

:root[data-theme] #cars .car-status::before {
    box-shadow: none;
}

/* Unread mail: a bold sender with an orange bar, as in Outlook. */
:root[data-theme] .mail-folders .mail-folder-list button[aria-current] {
    background: var(--accent-soft);
    font-weight: 600;
}

:root[data-theme] .mail-folders .mail-folder-list button[aria-current]::before {
    top: 0;
    bottom: 0;
    width: 3px;
}

/* ───────────── Sign in, registration and password pages: the Office sign-in card ───────────── */
:root[data-theme] body:has(> .auth-backdrop),
:root[data-theme] body:has(> main > .auth-brand) {
    background-color: var(--bg);
    background-image: none;
}

/* No vignette and no grid paper: the chart in authFormStyle.css carries the page on plain workspace grey. */
:root[data-theme] body:has(> .auth-backdrop)::after,
:root[data-theme] body:has(> main > .auth-brand)::after {
    display: none;
}

:root[data-theme] body:has(> main > .auth-brand) > main {
    border: 0;
    border-top: 4px solid var(--accent);
    border-radius: 0;
    background: var(--surface);
    box-shadow: var(--elev-3);
}

:root[data-theme] .auth-brand h1 {
    font-size: 26px;
    font-weight: 600;
}

:root[data-theme] .auth-brand img {
    border-radius: 2px;
}

/* Dark messages only apply on a dark page: the switch shows in the dark theme only. */
:root[data-theme="light"] .mail-setting-switch:has(input[name="darkMessages"]) {
    display: none;
}

/* Tab strips scroll sideways on a phone without showing a scroll bar, as the other strips do. */
:root[data-theme] .settings-tabs {
    scrollbar-width: none;
}

:root[data-theme] .settings-tabs::-webkit-scrollbar {
    display: none;
}

/* The status dot of the balance stays a plain dot: no halo or glow in this look. */
:root[data-theme] #dashboard .balance-live-dot,
:root[data-theme] #dashboard .balance-live-dot.is-stale {
    box-shadow: none;
}

/* Mijn cloud: the selected part looks as in the other navigation panes, a light orange row with an orange edge. */
@media (min-width: 751px) {
    :root[data-theme] .cloud-sidebar .cloud-tabs button[aria-pressed=true] {
        border-radius: 0;
        background: var(--accent-soft);
    }

    :root[data-theme] .cloud-sidebar .cloud-tabs button[aria-pressed=true]::before {
        top: 0;
        bottom: 0;
        width: 3px;
    }
}

/* ───────────── Hover tips: the white Office tooltip ─────────────
   The dashboard charts, Werk and Auto had tooltips from the dark look (an almost black card, heavy shadows). In the
   light look every hover tip is a white card with a grey edge, dark text and the soft tooltip shadow of Office. */
:root[data-theme] :is(.balance-tooltip, .flow-tooltip, .mini-history-tooltip, .float-tip, .work-term-tip) {
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .13), 0 1px 2px rgba(0, 0, 0, .1);
}

:root[data-theme] .float-tip::after {
    border-color: var(--line-strong);
    background: var(--surface);
}

:root[data-theme] :is(.balance-tooltip, .flow-tooltip) span {
    color: var(--ink-2);
}

:root[data-theme] :is(.balance-tooltip, .flow-tooltip, .float-tip) strong {
    color: var(--ink);
}

:root[data-theme] .mini-history-tooltip {
    font-family: var(--font-sans);
    font-size: 12px;
}

/* The pressed part of a button group (Maand, a car period, a planner view, a transaction filter): light orange with
   orange text and an orange edge, as a selected toggle in Office, instead of the dark grey of the old look. */
:root[data-theme] .chart-interval button[aria-pressed="true"],
:root[data-theme] #cars .car-garage-switch button[aria-pressed="true"],
:root[data-theme] #cars .car-period button[aria-pressed="true"],
:root[data-theme] .work-app .planner-view button[aria-pressed="true"],
:root[data-theme] .transaction-direction-filter a[aria-current] {
    background: var(--accent-soft);
    color: var(--accent-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Werk codes: their colours are pastels made for the dark look. As text on white they cannot be read, so in the
   light look a code label writes in a dark shade of its own colour on a light tint of it. */
:root[data-theme] .work-app .planner-code,
:root[data-theme] .planner-code {
    color: color-mix(in srgb, var(--code-color) 40%, var(--ink)) !important;
    background: color-mix(in srgb, var(--code-color) 18%, var(--surface));
    border-radius: 2px;
}

/* Auto › connect a car: the sign-in and verify buttons write white on the orange. */
:root[data-theme] #cars [data-psa-login] > button,
:root[data-theme] #cars [data-psa-verify] > button {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

:root[data-theme] #cars [data-psa-login] > button:hover:not(:disabled),
:root[data-theme] #cars [data-psa-verify] > button:hover:not(:disabled) {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

/* Bestanden › preview of a Word, Excel or PowerPoint file: white paper with dark text. The old look drew the paper
   with the ink colour, which is black in the light look. */
:root[data-theme] :is(.cloud-docx, .cloud-office, .cloud-office-slide) {
    background: var(--surface);
    color: var(--ink);
}

:root[data-theme] .cloud-docx {
    border: 1px solid var(--line);
    border-radius: 2px;
}

:root[data-theme] .cloud-office-slide {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .13), 0 1px 2px rgba(0, 0, 0, .1);
}

:root[data-theme] .cloud-office-slide h2 {
    color: var(--ink);
}

:root[data-theme] .cloud-pdf {
    border-radius: 2px;
    background: var(--surface-3);
}

:root[data-theme] .cloud-sheet-table :is(th, td) {
    border-color: var(--line);
}

:root[data-theme] .cloud-sheet-table thead th,
:root[data-theme] .cloud-sheet-table tr > th:first-child {
    background: var(--surface-2);
    color: var(--ink-2);
}

/* The car model picker sets its own darker overlay with an id selector; give it the light Office overlay too. */
:root[data-theme] #cars .car-model-picker::backdrop {
    background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Gebruikers: a blocked account is shown quieter by a grey name, not by fading the whole card, so its details and
   the red Geblokkeerd label stay readable. */
:root[data-theme] .user-card.is-disabled .user-identity {
    opacity: 1;
}

:root[data-theme] .user-card.is-disabled .user-names h2 {
    color: var(--ink-3);
}

/* ═════════════ The dark theme: what differs from the light one ═════════════
   After the Black theme of Office 2016: the title bar is near black instead of orange, menus and tips are dark grey
   cards with a heavier shadow, and documents keep white paper, as Word and Excel do in that theme. */
:root[data-theme="dark"] .topbar {
    border-bottom: 1px solid #000;
    color: var(--ink);
}

:root[data-theme="dark"] .topbar::before {
    background: #141414;
}

:root[data-theme="dark"] :is(.topbar-icon-button, .topbar-brand, .topbar-app, .topbar-profile, .topbar-chevron) {
    color: var(--ink);
}

:root[data-theme="dark"] .topbar-divider {
    background: #3d3d3d;
}

:root[data-theme="dark"] :is(.topbar-icon-button:hover, .topbar-icon-button[aria-expanded="true"], .topbar-apps[aria-expanded="true"], .topbar-profile:hover, .topbar-profile[aria-expanded="true"]) {
    border-color: transparent;
    background: #333;
    color: var(--ink);
}

/* The initial is an orange disc with a white letter, the one spot of colour in the bar besides the logo. */
:root[data-theme="dark"] .topbar .user-avatar {
    background: var(--accent);
    color: var(--on-accent);
}

:root[data-theme="dark"] .topbar-logo {
    box-shadow: none;
}

:root[data-theme="dark"] :is(.app-tile:focus-visible, .topbar-profile:focus-visible, .topbar-icon-button:focus-visible, .topbar-brand:focus-visible) {
    outline-color: var(--ink);
}

:root[data-theme="dark"] :is(.balance-tooltip, .flow-tooltip, .mini-history-tooltip, .float-tip, .work-term-tip) {
    background: var(--surface-3);
    box-shadow: var(--elev-2);
}

:root[data-theme="dark"] .float-tip::after {
    background: var(--surface-3);
}

:root[data-theme="dark"] dialog::backdrop,
:root[data-theme="dark"] #cars .car-model-picker::backdrop {
    background: rgba(0, 0, 0, .6);
}

/* Werk codes: on the dark panes a code writes in a light shade of its own colour. */
:root[data-theme="dark"] .work-app .planner-code,
:root[data-theme="dark"] .planner-code {
    color: color-mix(in srgb, var(--code-color) 70%, #fff) !important;
    background: color-mix(in srgb, var(--code-color) 16%, var(--surface));
}

/* Previews of Word, Excel and PowerPoint files stay white paper with dark text, as in Office's Black theme. The
   light tokens are set on the paper itself, so everything inside it follows. */
:root[data-theme="dark"] :is(.cloud-docx, .cloud-office, .cloud-office-slide) {
    --surface: #ffffff;
    --surface-2: #f3f2f1;
    --surface-3: #edebe9;
    --line: #e1dfdd;
    --line-strong: #c8c6c4;
    --ink: #201f1e;
    --ink-2: #3b3a39;
    --ink-3: #605e5c;
    --ink-4: #6e6c6a;
    background: var(--surface);
    color: var(--ink);
}

:root[data-theme="dark"] .mail-frame.is-dark {
    background: var(--surface);
}

/* Instellingen › Account › Thema: a compact button group, as wide as its three choices. */
:root[data-theme] .theme-choice {
    justify-self: start;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    margin: 2px 0 8px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
}

/* The account header is a flat band, without the orange glow of the older look. */
:root[data-theme] .profile-hero {
    background-image: none;
}