/* Theme tokens are applied after component isolation styles so every custom workspace can share one appearance contract. */
html[data-color-mode="dark"] {
    color-scheme: dark;
    --primary: #76c9bb;
    --primary-hover: #9bddcf;
    --primary-soft: #173f38;
    --accent: #b74c39;
    --accent-soft: #45261f;
    --ink: #edf4f1;
    --muted: #b8c6c0;
    --border: #52615c;
    --surface-subtle: #111816;
    --paper: #1b2421;
    --surface: #1b2421;
    --surface-raised: #222d29;
    --surface-muted: #18211e;
    --field-bg: #202a27;
    --field-disabled: #2b3531;
    --on-accent: #ffffff;
    --on-primary: #102f29;
    --inverse-surface: #172f2a;
    --inverse-muted: #c8ddd7;
    --label: #dce7e2;
    --danger: #f0a79b;
    --danger-soft: #4b2824;
    --success: #8ed0a9;
    --success-soft: #183d2b;
    --info: #b7d8e8;
    --info-soft: #1a3440;
    --warning: #f0cc7e;
    --warning-soft: #493719;
    --focus: #e3b642;
    --overlay: rgba(4, 10, 8, .78);
    --shadow-sm: 0 10px 28px rgba(0, 0, 0, .24);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .42);
}

html[data-theme-style="contemporary"] {
    --radius: .6rem;
    --radius-lg: .75rem;
    --display-font: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    --shadow-sm: 0 5px 16px rgba(32, 52, 47, .08);
}

html[data-theme-style="contemporary"][data-color-mode="light"] {
    color-scheme: light;
    --primary: #116a60;
    --primary-hover: #0d5149;
    --primary-soft: #e4f2ee;
    --accent: #ad4534;
    --accent-soft: #f7e7e2;
    --ink: #172622;
    --muted: #56655f;
    --border: #d7dfdc;
    --surface-subtle: #f5f7f6;
    --paper: #ffffff;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-muted: #f1f4f3;
    --field-bg: #ffffff;
    --field-disabled: #edf1ef;
}

html[data-theme-style="editorial"][data-color-mode="light"] { color-scheme: light; }

html {
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--surface-subtle);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-secondary-bg: var(--surface-muted);
    --bs-tertiary-bg: var(--surface-muted);
    --bs-border-color: var(--border);
    --bs-primary: var(--primary);
    --bs-danger: var(--danger);
    --bs-success: var(--success);
    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--primary-hover);
}

body, .app-shell { color: var(--ink); background-color: var(--surface-subtle); }
.masthead { border-color: var(--border) !important; background: color-mix(in srgb, var(--paper) 96%, transparent) !important; box-shadow: var(--shadow-sm) !important; }
.navigation { border-color: var(--border) !important; }

.button:not(.primary), .btn:not(.btn-primary):not(.btn-danger), .menu-toggle,
.tabs, .community-list, .community-row, .report-grid article,
.security-summary article, .users-card, .roles-card, .catalogue-item,
.basket-line, .support-fields .check, .related-group > button, .record-card,
.login-card, .client-search-results, .client-search-results button,
.catalogue-item button, .client-combobox-control {
    color: var(--ink) !important;
    border-color: var(--border) !important;
    background: var(--surface-raised) !important;
}

.client-workspace, .workspace-body, .community-editor, .support-flyout,
.record-list, .basket-footer, .section-content, .profile-section.open > button,
.invite-form, .user-list article.inactive {
    color: var(--ink) !important;
    border-color: var(--border) !important;
    background: var(--surface-muted) !important;
}

.community-row:hover, .score-ledger > a:hover, .work-doors > a:hover,
.profile-section > button:hover, .client-search-results button:hover,
.client-search-results button:focus-visible {
    background: var(--primary-soft) !important;
}

.field-grid, .glance, .profile-card, .support-callout, .related-group,
.chronology-card, .checkout-panel, .panel-heading, .editor-footer,
.metric-records-summary, .kitchen-settings-card, .order-ticket,
.support-fields .check, .record-card {
    color: var(--ink) !important;
    border-color: var(--border) !important;
    background: var(--surface) !important;
}

.work-list, .client-results { background: color-mix(in srgb, var(--paper) 76%, transparent) !important; }
.empty-state, .metric-records-empty { background: color-mix(in srgb, var(--surface-raised) 72%, transparent) !important; border-color: var(--border) !important; }
.status-select select { background: var(--field-bg) !important; }
.tabs button { color: var(--muted) !important; border-color: var(--border) !important; background: var(--surface-muted) !important; }
.tabs button.active { color: #fff !important; border-color: var(--primary) !important; background: var(--primary) !important; }
.client-workspace .tabs button.active { color: var(--primary) !important; border-bottom-color: var(--paper) !important; background: var(--paper) !important; }
.nav-link, .sign-out, .appearance-menu summary { color: var(--muted) !important; }
.nav-link.active { color: var(--primary) !important; }

html[data-color-mode="dark"] .status.active,
html[data-color-mode="dark"] .state { color: #a9dfbf !important; background: #183d2b !important; }
html[data-color-mode="dark"] .status.waiting,
html[data-color-mode="dark"] .high .state { color: #f0cc7e !important; background: #493719 !important; }
html[data-color-mode="dark"] .status.closed { color: #c1cbc7 !important; background: #313b37 !important; }
html[data-color-mode="dark"] .status.initial { color: #d8c2ec !important; background: #3a2947 !important; }
html[data-color-mode="dark"] .critical .state { color: #f4b0a6 !important; background: #4b2824 !important; }
html[data-color-mode="dark"] .tabs button.active,
html[data-color-mode="dark"] .appearance-panel button.selected,
html[data-color-mode="dark"] .mobile-progress button.active span,
html[data-color-mode="dark"] .editor-section > header > span { color: var(--on-primary) !important; }
html[data-color-mode="dark"] .page-header > div:first-child > span { color: var(--danger) !important; }
html[data-color-mode="dark"] .eyebrow,
html[data-color-mode="dark"] .work-doors > a > span,
html[data-color-mode="dark"] .account-header > span { color: var(--danger) !important; }
html[data-color-mode="dark"] .client-workspace .tabs button.active { color: var(--primary) !important; border-bottom-color: var(--paper) !important; background: var(--paper) !important; }
html[data-color-mode="dark"] .account-content .form-label { color: var(--label) !important; }
html[data-color-mode="dark"] .metric-card.blue { --tone: #8ec8e9; }
html[data-color-mode="dark"] .metric-card.amber { --tone: #f0cc7e; }
html[data-color-mode="dark"] .metric-card.purple { --tone: #d8c2ec; }
html[data-color-mode="dark"] .metric-card.red { --tone: #f0a79b; }
html[data-color-mode="dark"] .metric-card.green { --tone: #8ed0a9; }
html[data-color-mode="dark"] .workspace-message.success,
html[data-color-mode="dark"] .community-message.success,
html[data-color-mode="dark"] .checkout-message.success,
html[data-color-mode="dark"] .admin-message.success { color: #a9dfbf !important; border-color: #3d7457 !important; background: #183d2b !important; }
html[data-color-mode="dark"] .workspace-message.error,
html[data-color-mode="dark"] .community-message.error,
html[data-color-mode="dark"] .checkout-message.error,
html[data-color-mode="dark"] .admin-message.error,
html[data-color-mode="dark"] .editor-message { color: #f4b0a6 !important; border-color: #815047 !important; background: #4b2824 !important; }

html[data-color-mode="dark"] .detail-ticket { background: color-mix(in srgb, var(--tone) 18%, var(--surface-raised)) !important; }
html[data-color-mode="dark"] .client-combobox-control.selected { border-color: var(--success) !important; background: var(--primary-soft) !important; }
html[data-color-mode="dark"] .client-combobox-control.no-results { border-color: var(--danger) !important; background: var(--danger-soft) !important; }
html[data-color-mode="dark"] .client-combobox-control .client-find { color: #172622 !important; background: #f4c675 !important; }
html[data-color-mode="dark"] .client-combobox-control .client-clear { color: var(--ink) !important; background: var(--surface-muted) !important; }
html[data-color-mode="dark"] .basket-panel.receiving { border-color: var(--warning) !important; background: color-mix(in srgb, var(--warning-soft) 48%, var(--surface)) !important; }
html[data-color-mode="dark"] .line-main em { color: var(--danger) !important; background: var(--danger-soft) !important; }
html[data-color-mode="dark"] .queue-message.success,
html[data-color-mode="dark"] .checkout-message.success { color: var(--success) !important; border-color: color-mix(in srgb, var(--success) 48%, var(--border)) !important; background: var(--success-soft) !important; }
html[data-color-mode="dark"] .queue-message.error,
html[data-color-mode="dark"] .checkout-message.error { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 48%, var(--border)) !important; background: var(--danger-soft) !important; }
html[data-color-mode="dark"] .dietary { color: var(--warning) !important; border-left-color: var(--warning) !important; background: var(--warning-soft) !important; }
html[data-color-mode="dark"] .dietary.none { color: var(--muted) !important; border-left-color: var(--border) !important; background: var(--surface-muted) !important; }
html[data-color-mode="dark"] .ticket-number,
html[data-color-mode="dark"] .timeline-item p { color: var(--ink) !important; }
html[data-color-mode="dark"] .order-ticket footer { border-color: var(--border) !important; }
html[data-color-mode="dark"] .community-row .avatar,
html[data-color-mode="dark"] .work-row .avatar,
html[data-color-mode="dark"] .client-row .avatar,
html[data-color-mode="dark"] .user-avatar { color: var(--info) !important; background: var(--info-soft) !important; }
html[data-color-mode="dark"] .community-row .avatar.partner { color: #d8c2ec !important; background: #3a2947 !important; }
html[data-color-mode="dark"] .community-row .avatar.donation { color: var(--success) !important; background: var(--success-soft) !important; }
html[data-color-mode="dark"] .support-fields .field-note,
html[data-color-mode="dark"] .drop-tail.active,
html[data-color-mode="dark"] .drop-empty > span { background: #3d311c !important; }
html[data-color-mode="dark"] .community-editor,
html[data-color-mode="dark"] .support-flyout { box-shadow: -20px 0 55px rgba(0,0,0,.55) !important; }
html[data-color-mode="dark"] .editor-backdrop,
html[data-color-mode="dark"] .support-flyout-backdrop { background: var(--overlay) !important; }
html[data-color-mode="dark"] .rainbow-mark { filter: saturate(.9) brightness(1.1); }
html[data-color-mode="dark"] #blazor-error-ui { color: #ffe4b5; background: #4a3412; }

html[data-theme-style="contemporary"] .app-shell { background-image: none !important; }
html[data-theme-style="contemporary"] .rainbow-mark { transform: none !important; }
html[data-theme-style="contemporary"] .avatar,
html[data-theme-style="contemporary"] .mini-avatar,
html[data-theme-style="contemporary"] .user-chip > span { border-radius: 50% !important; box-shadow: none !important; }
html[data-theme-style="contemporary"] .client-workspace,
html[data-theme-style="contemporary"] .glance,
html[data-theme-style="contemporary"] .profile-card,
html[data-theme-style="contemporary"] .support-callout,
html[data-theme-style="contemporary"] .related-group,
html[data-theme-style="contemporary"] .chronology-card { border-radius: var(--radius-lg) !important; }
html[data-theme-style="contemporary"] .brief-note::after { display: none; }
html[data-theme-style="contemporary"] .page-header::before { width: 3px; border-radius: 0; }
html[data-theme-style="contemporary"] h1,
html[data-theme-style="contemporary"] h2,
html[data-theme-style="contemporary"] h3 { letter-spacing: -.025em; }

@media (max-width: 850px) {
    .nav-link.active { background: var(--primary-soft) !important; }
}

/* Scale rem-based type and spacing together; customer display boards keep their original scale. */
html[data-layout="compact"]:not(:has(.display-shell)) { font-size: 15px; }
html[data-layout="compact"] .page-content { padding: .75rem 1.25rem 1.25rem; }
html[data-layout="compact"] .content-frame { width: 100%; }
html[data-layout="compact"] :is(.masthead-primary, .nav-body) { max-width: none; padding-inline: 1.25rem; }
html[data-layout="compact"] :is(.nav-body, .nav-link, .sign-out, .appearance-menu summary) { min-height: 2.6rem; }
html[data-layout="compact"] .masthead-primary { min-height: 4rem; padding-top: .35rem; padding-bottom: .35rem; }
html[data-layout="compact"] .page-header { min-height: 0; padding-bottom: .65rem; gap: .65rem; }
html[data-layout="compact"] .page-header h1 { margin-block: .15rem; font-size: 1.85rem; line-height: 1.1; }
html[data-layout="compact"] .page-header p { line-height: 1.35; }
html[data-layout="compact"] .page-header::before { bottom: .75rem; }
html[data-layout="compact"] .search-panel { margin-top: .65rem; padding-block: .6rem; }
html[data-layout="compact"] .result-context { min-height: 2.5rem; padding-block: .45rem; }
html[data-layout="compact"] :is(.client-row, .community-row, .work-row) { min-height: 3.75rem; padding-block: .4rem; }
html[data-layout="compact"] .profile-section > button { min-height: 3.25rem; padding-block: .45rem; }
html[data-layout="compact"] :is(.section-content, .field-grid, .support-fields, .metric-card, .chronology-card, .order-ticket) { padding: .65rem .8rem; }
html[data-layout="compact"] :is(.field-grid, .support-fields, .checkout-grid, .catalogue-list, .detail-form) { gap: .5rem; }
html[data-layout="compact"] .checkout-hero { min-height: 5.5rem; padding-block: .6rem; }
html[data-layout="compact"] .checkout-hero.standalone { margin-top: 0; }
html[data-layout="compact"] .catalogue-item { min-height: 6rem; padding: .55rem; }
html[data-layout="compact"] .line-main { padding-block: .45rem; }
html[data-layout="compact"] .client-header { min-height: 4.75rem; padding: .7rem .8rem; }
html[data-layout="compact"] .identity-block h1 { font-size: 1.4rem; }
html[data-layout="compact"] .client-header .avatar { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; }
html[data-layout="compact"] .client-workspace .tabs { margin-top: .5rem; }
html[data-layout="compact"] .tabs button { min-height: 2.25rem; padding-inline: .65rem; }
html[data-layout="compact"] :is(.workspace-body, .glance, .gdpr-content, .privacy-group, .financial-columns, .financial-summary) { padding: .6rem; }
html[data-layout="compact"] :is(.card-heading, .related-group > button) { min-height: 3rem; padding: .45rem .7rem; }
html[data-layout="compact"] :is(.profile-layout, .summary-grid, .financial-columns, .privacy-groups) { gap: .5rem; }
html[data-layout="compact"] .support-callout { margin-top: .5rem; padding: .65rem; gap: .6rem; }
html[data-layout="compact"] .timeline-item { min-height: 4rem; }
html[data-layout="compact"] .support-flyout-header { min-height: 3.5rem; padding: .5rem .8rem; }
html[data-layout="compact"] .page-content :is(.button, .btn) { min-height: 2.25rem; }
html[data-layout="compact"] .page-content :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select) { min-height: 2.25rem; padding-top: .35rem; padding-bottom: .35rem; }
@media (pointer: coarse) {
    html[data-layout="compact"] .page-content :is(.button, .btn, input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select) { min-height: 44px; }
}

html[data-layout="compact"] .overview-section { margin-top: .85rem; }
html[data-layout="compact"] :is(.overview-metrics, .overview-actions) { gap: .55rem; }
html[data-layout="compact"] .overview-metric { padding: .65rem .8rem; gap: .15rem; }
html[data-layout="compact"] .overview-metric > strong { font-size: 1.7rem; }
html[data-layout="compact"] .overview-metric > em { margin-top: .25rem; padding-top: .35rem; }
html[data-layout="compact"] .overview-actions > a { padding: .65rem .8rem; }
/* Keep the editorial overview in Standard; switch immediately with the saved layout. */
.overview-compact { display: none; }
html[data-layout="compact"] .overview-standard { display: none; }
html[data-layout="compact"] .overview-compact { display: block; }