/*
 * OTCValue Deep Blue Theme
 *
 * Compact, data-first theme layer loaded after Radzen Software / Software Dark.
 * Commenting its link in App.razor restores the plain Radzen component theme.
 * Values are declared on body so overlays rendered directly under body inherit
 * the same application palette and density.
 */

html body {
    color-scheme: light;
    font-family: "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    color: var(--otc-ink);
    background: var(--otc-canvas);

    /* Deep Blue light palette. Appearance changes never alter density. */
    --otc-shell: #173859;
    --otc-shell-background: var(--otc-shell);
    --otc-shell-text: #f3f7fc;
    --otc-ink: #1f3044;
    --otc-text: #1f3044;
    --otc-muted: #53677d;
    --otc-canvas: #eef2f6;
    --otc-page-background: var(--otc-canvas);
    --otc-surface: #ffffff;
    --otc-surface-subtle: #f5f7fa;
    --otc-surface-muted: #edf2f8;
    --otc-border-subtle: #e9edf3;
    --otc-border: #d6dee8;
    --otc-border-strong: #7f919b;
    --otc-primary: #235fad;
    --otc-primary-hover: #1f548e;
    --otc-primary-pressed: #19436f;
    --otc-primary-soft: #e9f1fd;
    --otc-primary-soft-hover: #c9ddef;
    --otc-primary-wash: #f1f5fb;
    --otc-amber: #c98a1c;
    --otc-amber-text: #8b5911;
    --otc-info-surface: #eaf2fa;
    --otc-success-surface: #eaf6f0;
    --otc-warning-surface: #fff5e2;
    --otc-danger-surface: #fff0f0;
    --otc-info-text: #19436f;
    --otc-success-text: #19744f;
    --otc-danger-text: #af3544;
    --otc-danger-selected-surface: #fbd5d8;
    --otc-danger-border: #b42332;
    --otc-shadow-surface: 0 1px 2px rgba(11, 31, 51, 0.08);
    --otc-shadow-raised: 0 8px 24px rgba(11, 31, 51, 0.15), 0 2px 6px rgba(11, 31, 51, 0.08);
    --otc-shadow-dialog: 0 18px 48px rgba(11, 31, 51, 0.22);
    --otc-focus-shadow: 0 0 0 2px rgba(37, 99, 166, 0.24);
    --otc-selection-indicator: inset 3px 0 0 var(--otc-primary);
    --otc-panel: var(--otc-surface);
    --otc-panel-solid: var(--otc-surface);
    --otc-shadow: var(--otc-shadow-surface);
    --otc-accent: #56a9e6;
    --otc-accent-dark: var(--otc-primary);
    --otc-accent-soft: var(--otc-primary-soft);
    --otc-accent-2: var(--otc-amber);
    --otc-state-pending: var(--otc-warning-surface);
    --otc-state-pending-selected: #ffe9b8;
    --otc-state-danger: var(--rz-danger);
    --otc-space-1: 0.25rem;
    --otc-space-2: 0.5rem;
    --otc-space-3: 0.75rem;
    --otc-space-4: 1rem;
    --otc-control-height: 2rem;
    --otc-button-height: 2rem;
    --otc-button-font-size: 0.8125rem;
    --otc-button-icon-size: 1rem;
    --otc-button-radius: 4px;
    --otc-button-padding-inline: 8px;
    --otc-button-gap: 5px;
    --rz-form-field-label-floating-background-color: var(--otc-surface);
    --otc-badge-font-size: 11px;
    --otc-badge-line-height: 18px;
    --otc-badge-padding: 0 6px;
    --otc-badge-radius: 4px;

    --otc-card-radius: 0.5rem;
    --otc-overlay-radius: 0.375rem;

    /* Radzen neutral and brand palettes */
    --rz-white: #ffffff;
    --rz-base: #d6dee8;
    --rz-base-50: #ffffff;
    --rz-base-100: #f5f7fa;
    --rz-base-200: #edf2f8;
    --rz-base-300: #d6dee8;
    --rz-base-400: #a9bac2;
    --rz-base-500: #8799a3;
    --rz-base-600: #687c87;
    --rz-base-700: #53677d;
    --rz-base-800: #1f3044;
    --rz-base-900: #17283c;
    --rz-base-light: var(--rz-base-200);
    --rz-base-lighter: var(--rz-base-50);
    --rz-base-dark: var(--rz-base-600);
    --rz-base-darker: var(--rz-base-900);
    --rz-primary: var(--otc-primary);
    --rz-primary-light: #3c78b8;
    --rz-primary-lighter: rgba(37, 99, 166, 0.12);
    --rz-primary-dark: var(--otc-primary-hover);
    --rz-primary-darker: var(--otc-primary-pressed);
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: #19436f;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    --rz-secondary: #0b1f33;
    --rz-secondary-light: #24445d;
    --rz-secondary-lighter: rgba(11, 31, 51, 0.1);
    --rz-secondary-dark: #081827;
    --rz-secondary-darker: #06121e;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #ffffff;
    --rz-on-secondary-lighter: #0b1f33;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;
    --rz-info: #2563a6;
    --rz-info-light: #3c78b8;
    --rz-info-lighter: rgba(37, 99, 166, 0.12);
    --rz-info-dark: #1f548e;
    --rz-info-darker: #19436f;
    --rz-on-info: #ffffff;
    --rz-on-info-lighter: #19436f;
    --rz-success: #18794e;
    --rz-success-light: #278d60;
    --rz-success-lighter: rgba(24, 121, 78, 0.12);
    --rz-success-dark: #146641;
    --rz-success-darker: #105235;
    --rz-on-success: #ffffff;
    --rz-on-success-lighter: #105235;
    --rz-warning: #a8640a;
    --rz-warning-light: #bd781d;
    --rz-warning-lighter: rgba(168, 100, 10, 0.14);
    --rz-warning-dark: #8d5408;
    --rz-warning-darker: #704306;
    --rz-on-warning: #ffffff;
    --rz-on-warning-lighter: #704306;
    --rz-danger: #b42318;
    --rz-danger-light: #c53a2f;
    --rz-danger-lighter: rgba(180, 35, 24, 0.12);
    --rz-danger-dark: #981e15;
    --rz-danger-darker: #781811;
    --rz-on-danger: #ffffff;
    --rz-on-danger-lighter: #781811;

    /* Financial chart palette: brand first, then clearly separated semantics. */
    --rz-series-1: #2563a6;
    --rz-series-2: #a65a14;
    --rz-series-3: #7a5db5;
    --rz-series-4: #168a9b;
    --rz-series-5: #b42318;
    --rz-series-6: #18794e;
    --rz-series-7: #536470;
    --rz-series-8: #5b6fb5;
    --rz-series-9: #c45d1a;
    --rz-series-10: #4056a1;
    --rz-series-11: #6f7d1c;
    --rz-series-12: #a43d75;
    --rz-series-13: #3f7fa8;
    --rz-series-14: #8a5a36;
    --rz-series-15: #6750a4;
    --rz-series-16: #19436f;
    --rz-series-17: #4e87c2;
    --rz-series-18: #a96f0c;
    --rz-series-19: #8e6fc2;
    --rz-series-20: #2b8994;
    --rz-series-21: #c44c42;
    --rz-series-22: #32906a;
    --rz-series-23: #6d7f8a;
    --rz-series-24: #334550;

    /* Shared surfaces, borders, focus, and elevation. */
    --rz-body-background-color: var(--otc-canvas);
    --rz-layout-background-color: var(--otc-canvas);
    --rz-base-background-color: var(--otc-surface);
    --rz-border-normal: 1px solid var(--otc-border);
    --rz-border-hover: 1px solid var(--otc-border-strong);
    --rz-border-focus: 1px solid var(--otc-primary);
    --rz-border-disabled: 1px solid var(--otc-border-subtle);
    --rz-shadow-1: 0 1px 1px rgba(15, 36, 55, 0.05);
    --rz-shadow-2: var(--otc-shadow-surface);
    --rz-shadow-3: 0 2px 8px rgba(15, 36, 55, 0.09);
    --rz-shadow-4: 0 3px 10px rgba(15, 36, 55, 0.1);
    --rz-shadow-5: 0 5px 16px rgba(15, 36, 55, 0.12);
    --rz-shadow-6: var(--otc-shadow-raised);
    --rz-shadow-7: 0 10px 28px rgba(15, 36, 55, 0.15);
    --rz-shadow-8: 0 12px 34px rgba(15, 36, 55, 0.17);
    --rz-shadow-9: 0 15px 40px rgba(15, 36, 55, 0.18);
    --rz-shadow-10: var(--otc-shadow-dialog);

    /* Typography, focus, and compact control sizing */
    --rz-body-font-size: 0.875rem;
    --rz-body-line-height: 1.35;
    --rz-text-font-family: "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --rz-text-title-color: var(--otc-ink);
    --rz-text-color: var(--otc-text);
    --rz-text-secondary-color: var(--otc-muted);
    --rz-text-tertiary-color: var(--otc-muted);
    --rz-text-disabled-color: var(--otc-muted);
    --rz-text-contrast-color: var(--rz-white);
    --rz-text-selection-background-color: var(--otc-primary-soft);
    --rz-link-color: var(--rz-primary);
    --rz-link-hover-color: var(--rz-primary-dark);
    --rz-border-radius: 0.375rem;
    --rz-outline-width: 2px;
    --rz-outline-offset: 1px;
    --rz-outline-color: var(--rz-primary);
    --rz-outline-focus: var(--rz-outline-width) solid var(--rz-outline-color);

    /* Shared form surfaces and states; dimensions remain in the density rules. */
    --rz-input-value-color: var(--otc-text);
    --rz-input-placeholder-color: var(--otc-muted);
    --rz-input-background-color: var(--otc-surface);
    --rz-input-hover-background-color: var(--otc-surface);
    --rz-input-focus-background-color: var(--otc-surface);
    --rz-input-border: 1px solid var(--otc-border);
    --rz-input-border-block-end: var(--rz-input-border);
    --rz-input-hover-border: 1px solid var(--otc-border-strong);
    --rz-input-hover-border-block-end: var(--rz-input-hover-border);
    --rz-input-focus-border: 1px solid var(--rz-outline-color);
    --rz-input-focus-border-block-end: var(--rz-input-focus-border);
    --rz-input-disabled-background-color: var(--otc-surface-subtle);
    --rz-input-disabled-border: 1px solid var(--otc-border-subtle);
    --rz-input-disabled-border-block-end: var(--rz-input-disabled-border);
    --rz-input-disabled-color: var(--otc-muted);
    --rz-input-disabled-placeholder-color: var(--otc-muted);
    --rz-input-disabled-opacity: 1;
    --rz-input-size-md: var(--otc-control-height);
    --rz-input-height: var(--otc-control-height);
    --rz-input-padding-block-md: 0.25rem;
    --rz-input-padding-inline-md: 0.5rem;
    --rz-input-padding-block: var(--rz-input-padding-block-md);
    --rz-input-padding-inline: var(--rz-input-padding-inline-md);
    --rz-input-border-radius: var(--rz-border-radius);
    --rz-input-shadow: none;
    --rz-input-hover-shadow: var(--rz-input-shadow);
    --rz-input-focus-shadow: var(--otc-focus-shadow);
    --rz-input-disabled-shadow: var(--rz-input-shadow);
    --rz-form-field-margin-block: 0.375rem 0;
    --rz-form-field-helper-padding: 0 0.25rem;
    --rz-form-field-filled-background-color: var(--otc-surface-subtle);
    --rz-form-field-filled-hover-background-color: var(--otc-surface);
    --rz-form-field-filled-border: var(--rz-input-border);
    --rz-form-field-filled-hover-border: var(--rz-input-hover-border);
    --rz-form-field-filled-focus-border: var(--rz-input-focus-border);
    --rz-form-field-filled-focus-shadow: var(--otc-focus-shadow);
    --rz-form-field-label-color: var(--otc-text);
    --rz-form-field-label-focus-color: var(--rz-primary);
    --rz-form-field-filled-height-md: 2.5rem;
    --rz-form-field-filled-height: var(--rz-form-field-filled-height-md);
    --rz-form-field-filled-padding-block-md: 0.9375rem 0.1875rem;
    --rz-form-field-filled-padding-inline-md: 0.5rem;
    --rz-form-field-filled-padding-block: var(--rz-form-field-filled-padding-block-md);
    --rz-form-field-filled-padding-inline: var(--rz-form-field-filled-padding-inline-md);
    --rz-form-field-filled-numeric-padding-block: 1rem 0.25rem;
    --rz-form-field-filled-numeric-padding-inline: 0.5rem 1.125rem;
    --rz-form-field-filled-label-floating-top-md: 0.125rem;
    --rz-form-field-filled-label-floating-top: var(--rz-form-field-filled-label-floating-top-md);
    --rz-form-field-filled-label-floating-font-size-md: 0.6875rem;
    --rz-dropdown-open-background-color: var(--otc-surface);
    --rz-dropdown-open-border: var(--rz-input-focus-border);
    --rz-dropdown-panel-border: 1px solid var(--otc-border);
    --rz-dropdown-panel-shadow: var(--otc-shadow-raised);
    --rz-dropdown-panel-padding: 0.25rem;
    --rz-dropdown-item-padding: 0.375rem 0.5rem;
    --rz-dropdown-item-hover-background-color: var(--otc-surface-subtle);
    --rz-dropdown-item-hover-color: var(--otc-ink);
    --rz-dropdown-item-selected-background-color: var(--otc-primary-soft);
    --rz-dropdown-item-selected-color: var(--otc-ink);
    --rz-dropdown-item-selected-shadow: var(--otc-selection-indicator);
    --rz-dropdown-item-selected-hover-background-color: var(--otc-primary-soft-hover);
    --rz-dropdown-item-selected-hover-color: var(--otc-ink);
    --rz-dropdown-item-disabled-opacity: 0.48;
    --rz-dropdown-filter-padding: 0.375rem 0;
    --rz-numeric-input-padding-block-md: 0.25rem;
    --rz-numeric-input-padding-inline-md: 0.375rem 1.125rem;
    --rz-numeric-input-padding-block: var(--rz-numeric-input-padding-block-md);
    --rz-numeric-input-padding-inline: var(--rz-numeric-input-padding-inline-md);
    --rz-numeric-button-width: var(--rz-numeric-button-width-md);
    --rz-numeric-button-height: var(--rz-numeric-button-height-md);
    --rz-numeric-button-offset: var(--rz-numeric-button-offset-md);
    --rz-button-size-md: var(--otc-button-height);
    --rz-button-size-sm: var(--otc-button-height);
    --rz-button-border-radius: var(--rz-border-radius);
    --rz-button-shadow: 0 1px 1px rgba(15, 36, 55, 0.08);
    --rz-button-hover-shadow: 0 1px 2px rgba(15, 36, 55, 0.12);
    --rz-button-focus-shadow: var(--otc-focus-shadow);
    --rz-button-active-shadow: inset 0 1px 2px rgba(15, 36, 55, 0.16);
    --rz-button-hover-gradient: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
    --rz-button-focus-gradient: none;
    --rz-button-active-gradient: linear-gradient(rgba(15, 36, 55, 0.08), rgba(15, 36, 55, 0.08));
    --rz-button-focus-outline: var(--rz-outline-focus);
    --rz-button-focus-outline-offset: 1px;
    --rz-button-disabled-opacity: 0.46;
    --rz-checkbox-checked-background-color: var(--otc-primary);
    --rz-checkbox-checked-color: var(--rz-on-primary);
    --rz-checkbox-checked-hover-background-color: var(--otc-primary-hover);
    --rz-checkbox-checked-disabled-background-color: var(--rz-base-500);
    --rz-checkbox-checked-shadow: none;
    --rz-checkbox-label-margin-inline: 0.375rem 0.75rem;
    --rz-radio-active-background-color: var(--otc-primary);
    --rz-radio-checked-background-color: var(--otc-primary);
    --rz-radio-checked-hover-background-color: var(--otc-primary-hover);
    --rz-radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1);
    --rz-radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2);
    --rz-radio-checked-border: var(--rz-input-border-block-end);
    --rz-radio-checked-color: var(--rz-on-primary);
    --rz-radio-circle-background-color: var(--otc-surface);
    --rz-radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03);
    --rz-radio-label-margin-inline: 0.5rem 0.75rem;
    --rz-switch-checked-background-color: var(--otc-primary);
    --rz-switch-box-shadow: inset 0 0 0 1px rgba(15, 36, 55, 0.08);
    --rz-gap: 0.625rem;
    --rz-row-gap: 0.625rem;

    /* Compact surfaces and overlays */
    --rz-card-background-color: var(--otc-surface);
    --rz-card-flat-background-color: var(--otc-surface-subtle);
    --rz-card-border: 1px solid var(--otc-border);
    --rz-card-padding: 0.75rem;
    --rz-card-border-radius: var(--otc-card-radius);
    --rz-card-shadow: var(--otc-shadow-surface);
    --rz-fieldset-border: 1px solid var(--otc-border);
    --rz-fieldset-padding: 0.625rem 0.75rem 0.75rem;
    --rz-fieldset-border-radius: var(--rz-border-radius);
    --rz-fieldset-legend-color: var(--otc-primary);
    --rz-fieldset-legend-margin-inline: 0.625rem 0;
    --rz-fieldset-legend-padding-inline: 0.375rem;
    --rz-dialog-background-color: var(--otc-surface);
    --rz-dialog-title-background-color: var(--otc-surface-muted);
    --rz-dialog-title-border: 1px solid var(--otc-border);
    --rz-dialog-title-color: var(--otc-ink);
    --rz-dialog-close-color: var(--otc-muted);
    --rz-dialog-close-hover-color: var(--otc-primary);
    --rz-dialog-mask-background-color: var(--otc-shell);
    --rz-dialog-title-padding-block: 0.5rem;
    --rz-dialog-title-padding-inline: 0.75rem;
    --rz-dialog-title-font-size: 1rem;
    --rz-dialog-title-line-height: 1.5rem;
    --rz-dialog-content-padding: 0.75rem;
    --rz-dialog-border-radius: var(--otc-overlay-radius);
    --rz-dialog-shadow: var(--otc-shadow-dialog);
    --rz-tabs-background-color: var(--otc-surface);
    --rz-tabs-border: 1px solid var(--otc-border);
    --rz-tabs-border-radius: var(--otc-card-radius);
    --rz-tabs-shadow: var(--otc-shadow-surface);
    --rz-tabs-padding: 0.75rem;
    --rz-tabs-tab-padding-block: 0.375rem;
    --rz-tabs-tab-padding-inline: 0.75rem;
    --rz-tabs-tab-background-color: var(--otc-surface-muted);
    --rz-tabs-tab-color: var(--otc-muted);
    --rz-tabs-tab-hover-background-color: var(--otc-surface-subtle);
    --rz-tabs-tab-hover-color: var(--otc-primary);
    --rz-tabs-tab-focus-background-color: var(--otc-surface-subtle);
    --rz-tabs-tab-focus-color: var(--otc-primary);
    --rz-tabs-tab-selected-background-color: var(--otc-surface);
    --rz-tabs-tab-selected-color: var(--otc-ink);
    --rz-tabs-tab-selected-top-border-color: var(--otc-primary);
    --rz-menu-background-color: var(--otc-surface);
    --rz-menu-border: 1px solid var(--otc-border);
    --rz-menu-border-radius: var(--otc-overlay-radius);
    --rz-menu-item-padding-block: 0.375rem;
    --rz-menu-item-padding-inline: 0.375rem 0.625rem;
    --rz-menu-item-color: var(--otc-text);
    --rz-menu-item-hover-color: var(--rz-on-primary-lighter);
    --rz-menu-item-hover-background-color: var(--otc-primary-soft);
    --rz-menu-item-selected-color: var(--rz-on-primary-lighter);
    --rz-menu-item-selected-background-color: var(--otc-primary-soft);
    --rz-menu-item-disabled-opacity: 0.46;
    --rz-menu-top-item-padding-block: 0.375rem;
    --rz-menu-top-item-padding-inline: 0.5rem;
    --rz-menu-top-item-color: var(--otc-text);
    --rz-menu-top-item-hover-color: var(--rz-on-primary-lighter);
    --rz-menu-top-item-hover-background-color: var(--otc-primary-soft);
    --rz-menu-top-item-selected-color: var(--rz-on-primary-lighter);
    --rz-menu-top-item-selected-background-color: var(--otc-primary-soft);
    --rz-context-menu-box-shadow: var(--otc-shadow-raised);
    --rz-profile-menu-background-color: var(--otc-surface);
    --rz-profile-menu-top-item-background-color: transparent;
    --rz-profile-menu-border: 1px solid var(--otc-border);
    --rz-profile-menu-border-radius: var(--otc-overlay-radius);
    --rz-profile-menu-toggle-button-color: var(--otc-primary);
    --rz-profile-menu-item-hover-background-color: var(--otc-primary-soft);
    --rz-panel-padding: 0.375rem;
    --rz-panel-menu-item-padding-block: 0.5rem;
    --rz-panel-menu-item-padding-inline: 0.75rem;
    --rz-accordion-item-background-color: var(--otc-surface);
    --rz-accordion-item-border: 1px solid var(--otc-border);
    --rz-accordion-shadow: var(--otc-shadow-surface);
    --rz-accordion-hover-color: var(--otc-primary);
    --rz-alert-margin: 0.375rem 0;
    --rz-alert-padding: 0.5rem 0.75rem;
    --rz-alert-gap: 0.5rem;
    --rz-alert-message-margin: 0;
    --rz-alert-border-radius: var(--rz-border-radius);
    --rz-alert-box-shadow: none;
    --rz-notification-border-radius: var(--otc-overlay-radius);
    --rz-notification-shadow: var(--otc-shadow-raised);
    --rz-notification-info-color: var(--otc-info-text);
    --rz-notification-info-background-color: var(--otc-info-surface);
    --rz-notification-info-icon-color: var(--otc-info-text);
    --rz-notification-success-color: var(--otc-success-text);
    --rz-notification-success-background-color: var(--otc-success-surface);
    --rz-notification-success-icon-color: var(--otc-success-text);
    --rz-notification-warning-color: var(--otc-amber-text);
    --rz-notification-warning-background-color: var(--otc-warning-surface);
    --rz-notification-warning-icon-color: var(--otc-amber-text);
    --rz-notification-error-color: var(--otc-danger-text);
    --rz-notification-error-background-color: var(--otc-danger-surface);
    --rz-notification-error-icon-color: var(--otc-danger-text);
    --rz-tooltip-background-color: var(--otc-shell);
    --rz-tooltip-color: var(--otc-shell-text);
    --rz-tooltip-shadow: var(--otc-shadow-raised);
    --rz-tooltip-border-radius: var(--rz-border-radius);
    --rz-datepicker-panel-background-color: var(--otc-surface);
    --rz-datepicker-panel-border: 1px solid var(--otc-border);
    --rz-datepicker-panel-shadow: var(--otc-shadow-raised);
    --rz-datepicker-calendar-selected-background-color: var(--otc-primary);
    --rz-datepicker-calendar-selected-color: var(--rz-on-primary);
    --rz-datepicker-calendar-selected-hover-background-color: var(--otc-primary-hover);
    --rz-datepicker-calendar-selected-hover-color: var(--rz-on-primary);
    --rz-datepicker-header-background-color: var(--otc-surface-subtle);
    --rz-datepicker-calendar-today-color: var(--otc-primary);
    --rz-datepicker-calendar-hover-background-color: var(--otc-primary-soft);
    --rz-datepicker-calendar-hover-color: var(--otc-ink);
    --rz-scrollbar-size: 12px;
    --rz-scrollbar-background-color: var(--otc-canvas);
    --rz-scrollbar-color: var(--otc-border-strong);
    --rz-scrollbar-border-radius: 8px;

    /* Data-grid visual system. Density stays in the values below. */
    --rz-grid-background-color: var(--otc-surface);
    --rz-grid-border: 1px solid var(--otc-border);
    --rz-grid-border-radius: var(--otc-card-radius);
    --rz-grid-cell-color: var(--otc-text);
    --rz-grid-cell-border: 1px solid var(--otc-border-subtle);
    --rz-grid-header-background-color: var(--otc-surface-muted);
    --rz-grid-header-color: var(--otc-ink);
    --rz-grid-header-font-weight: 600;
    --rz-grid-sort-icon-color: var(--otc-primary);
    --rz-grid-header-filter-icon-active-color: var(--otc-primary);
    --rz-grid-header-filter-icon-hover-color: var(--otc-primary-hover);
    --rz-grid-header-cell-border-bottom: 1px solid var(--otc-border);
    --rz-grid-header-sorted-background-color: var(--otc-border);
    --rz-grid-hover-background-color: var(--otc-primary-wash);
    --rz-grid-hover-color: var(--otc-text);
    --rz-grid-selected-background-color: var(--otc-primary-soft);
    --rz-grid-selected-color: var(--otc-ink);
    --rz-grid-cell-focus-background-color: var(--otc-primary-soft);
    --rz-grid-cell-focus-color: var(--otc-ink);
    --rz-grid-stripe-background-color: var(--otc-surface-subtle);
    --rz-grid-stripe-odd-background-color: var(--otc-surface);
    --rz-grid-frozen-cell-background-color: var(--otc-surface);
    --rz-grid-frozen-stripe-background-color: var(--rz-grid-stripe-background-color);
    --rz-grid-frozen-stripe-odd-background-color: var(--rz-grid-stripe-odd-background-color);
    --rz-grid-frozen-cell-border: 1px solid var(--otc-border);
    --rz-grid-filter-background-color: var(--otc-surface-subtle);
    --rz-grid-filter-border: 1px solid var(--otc-border);
    --rz-grid-filter-buttons-background-color: var(--otc-surface-subtle);
    --rz-grid-filter-buttons-border: 1px solid var(--otc-border-subtle);
    --rz-grid-foot-background-color: var(--otc-surface-muted);
    --rz-grid-foot-cell-color: var(--otc-ink);
    --rz-grid-cell-padding: 0.375rem 0.5rem;
    --rz-grid-cell-font-size: 0.8125rem;
    --rz-grid-cell-line-height: 1.125rem;
    --rz-grid-header-cell-padding: 0.375rem 0;
    --rz-grid-header-padding: 0.5rem 0.75rem;
    --rz-grid-header-font-size: 0.75rem;
    --rz-grid-header-line-height: 1rem;
    --rz-grid-filter-padding: 0.375rem 0.5rem;
    --rz-grid-filter-gap: 0.5rem;
    --rz-grid-filter-buttons-padding: 0 0.75rem 0.75rem;
    --rz-grid-group-header-padding: 0.375rem;
    --rz-grid-group-header-gap: 0.375rem;
    --rz-grid-shadow: none;
    --rz-pager-padding: 0.375rem;
    --rz-pager-gap: 0.25rem;
    --rz-pager-summary-padding: 0.5rem;
    --rz-pager-numeric-button-min-width: 2rem;
    --rz-pager-numeric-button-padding: 0.3125rem;
    --rz-pager-numeric-button-selected-padding: 0.3125rem;
    --rz-pager-numeric-button-background-color: var(--otc-surface-subtle);
    --rz-pager-numeric-button-color: var(--otc-text);
    --rz-pager-numeric-button-hover-background-color: var(--otc-primary-wash);
    --rz-pager-numeric-button-hover-color: var(--otc-text);
    --rz-pager-numeric-button-selected-background-color: var(--otc-primary-soft);
    --rz-pager-numeric-button-selected-color: var(--otc-ink);
    --rz-pager-numeric-button-selected-border: 1px solid var(--otc-primary);
    --rz-tree-node-hover-background-color: var(--otc-primary-wash);
    --rz-tree-node-hover-color: var(--otc-text);
    --rz-tree-node-selected-background-color: var(--otc-primary-soft);
    --rz-tree-node-selected-color: var(--otc-ink);
}

/* The root attribute is synchronized with Radzen's Software Dark theme.
   Keeping colors on body covers dialogs and menus mounted outside the layout. */
html[data-otc-theme="dark"] body {
    color-scheme: dark;
    --otc-shell: #182a40;
    --otc-ink: #e2eaf4;
    --otc-text: #e2eaf4;
    --otc-muted: #a8b8ca;
    --otc-canvas: #0e151f;
    --otc-surface: #17212e;
    --otc-surface-subtle: #1c2939;
    --otc-surface-muted: #1c2939;
    --otc-border-subtle: #243448;
    --otc-border: #334256;
    --otc-border-strong: #6e849f;
    --otc-primary: #7db5ff;
    --otc-primary-hover: #a3caff;
    --otc-primary-pressed: #bddaff;
    --otc-primary-soft: #213d5e;
    --otc-primary-soft-hover: #2b4a6d;
    --otc-primary-wash: #223246;
    --otc-amber: #efc782;
    --otc-amber-text: #efc782;
    --otc-info-surface: #20364f;
    --otc-success-surface: #193a31;
    --otc-warning-surface: #3a3020;
    --otc-danger-surface: #3c2530;
    --otc-info-text: #9ac6ff;
    --otc-success-text: #74d4ab;
    --otc-danger-text: #ff9eaa;
    --otc-danger-selected-surface: #543340;
    --otc-danger-border: #f28c9b;
    --otc-state-pending-selected: #524328;
    --otc-accent: #7db5ff;
    --otc-shadow-surface: 0 1px 2px rgba(0, 0, 0, 0.18);
    --otc-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.18);
    --otc-shadow-dialog: 0 18px 48px rgba(0, 0, 0, 0.44);
    --otc-focus-shadow: 0 0 0 2px rgba(125, 181, 255, 0.35);

    /* Radzen's dark theme still orders base shades from light to dark. */
    --rz-base: #334256;
    --rz-base-50: #f3f7fc;
    --rz-base-100: #e2eaf4;
    --rz-base-200: #c7d4e4;
    --rz-base-300: #a8b8ca;
    --rz-base-400: #90a2b8;
    --rz-base-500: #768aa4;
    --rz-base-600: #5e738c;
    --rz-base-700: #334256;
    --rz-base-800: #1c2939;
    --rz-base-900: #0e151f;
    --rz-on-base: var(--otc-text);
    --rz-on-base-light: #112238;
    --rz-on-base-lighter: #112238;
    --rz-on-base-dark: var(--otc-text);
    --rz-on-base-darker: var(--otc-text);
    --rz-primary-light: #a3caff;
    --rz-primary-lighter: var(--otc-primary-soft);
    --rz-on-primary: #112238;
    --rz-on-primary-light: #112238;
    --rz-on-primary-lighter: var(--otc-info-text);
    --rz-on-primary-dark: #112238;
    --rz-on-primary-darker: #112238;
    --rz-secondary: #a8b8ca;
    --rz-secondary-light: #c7d4e4;
    --rz-secondary-lighter: #293d53;
    --rz-secondary-dark: #90a2b8;
    --rz-secondary-darker: #768aa4;
    --rz-on-secondary: #112238;
    --rz-on-secondary-light: #112238;
    --rz-on-secondary-lighter: var(--otc-text);
    --rz-on-secondary-dark: #112238;
    --rz-on-secondary-darker: #112238;
    --rz-info: var(--otc-primary);
    --rz-info-light: #a3caff;
    --rz-info-lighter: var(--otc-info-surface);
    --rz-info-dark: #a3caff;
    --rz-info-darker: #bddaff;
    --rz-on-info: #112238;
    --rz-on-info-light: #112238;
    --rz-on-info-lighter: var(--otc-info-text);
    --rz-on-info-dark: #112238;
    --rz-on-info-darker: #112238;
    --rz-success: #74d4ab;
    --rz-success-light: #96e2c0;
    --rz-success-lighter: var(--otc-success-surface);
    --rz-success-dark: #5cc69a;
    --rz-success-darker: #45b887;
    --rz-on-success: #102a21;
    --rz-on-success-light: #102a21;
    --rz-on-success-lighter: var(--otc-success-text);
    --rz-on-success-dark: #102a21;
    --rz-on-success-darker: #102a21;
    --rz-warning: #efc782;
    --rz-warning-light: #f5d7a2;
    --rz-warning-lighter: var(--otc-warning-surface);
    --rz-warning-dark: #dfb96f;
    --rz-warning-darker: #cea55c;
    --rz-on-warning: #2b220e;
    --rz-on-warning-light: #2b220e;
    --rz-on-warning-lighter: var(--otc-amber-text);
    --rz-on-warning-dark: #2b220e;
    --rz-on-warning-darker: #2b220e;
    --rz-danger: #ff9eaa;
    --rz-danger-light: #ffb8c1;
    --rz-danger-lighter: var(--otc-danger-surface);
    --rz-danger-dark: #f28c9b;
    --rz-danger-darker: #e67b8b;
    --rz-on-danger: #351821;
    --rz-on-danger-light: #351821;
    --rz-on-danger-lighter: var(--otc-danger-text);
    --rz-on-danger-dark: #351821;
    --rz-on-danger-darker: #351821;
    --rz-series-1: #7db5ff;
    --rz-series-2: #efc782;
    --rz-series-3: #bc9eea;
    --rz-series-4: #66cbd6;
    --rz-series-5: #ff9eaa;
    --rz-series-6: #74d4ab;
    --rz-series-7: #b2c3d6;
    --rz-series-8: #a4b7ff;
    --rz-series-9: #efa877;
    --rz-series-10: #86a5f2;
    --rz-series-11: #c9d37a;
    --rz-series-12: #e7a0c7;
    --rz-series-13: #82bbdc;
    --rz-series-14: #d4b291;
    --rz-series-15: #b4a3df;
    --rz-series-16: #b0d2ff;
    --rz-series-17: #77aee8;
    --rz-series-18: #dfbc76;
    --rz-series-19: #c5adeb;
    --rz-series-20: #73c7ce;
    --rz-series-21: #e99897;
    --rz-series-22: #8bcaae;
    --rz-series-23: #a5b8c6;
    --rz-series-24: #cad5df;
}

/* Keep numeric steppers unobtrusive until the field receives focus. This also
   gives standalone inputs the same behavior as numerics inside RadzenFormField. */
html body .rz-numeric > .rz-numeric-button {
    display: none;
}

html body .rz-numeric:focus-within > .rz-numeric-button {
    display: block;
}

/* Native standalone inputs share the Radzen field contract. Composite controls
   retain their own inner-input sizing and chrome. */
html body input.rz-inputtext:where(:not(.rz-datepicker input, .rz-numeric input, .rz-autocomplete input, .rz-dropdown-filter, .rz-multiselect-filter)) {
    box-sizing: border-box;
    height: var(--rz-input-height);
    min-height: var(--rz-input-height);
    padding: var(--rz-input-padding-block) var(--rz-input-padding-inline);
    border: 1px solid var(--otc-border);
    border-radius: var(--rz-input-border-radius);
    color: var(--otc-text);
    background: var(--otc-surface);
    font: inherit;
    font-size: var(--rz-input-font-size);
    box-shadow: var(--rz-input-shadow);
}

html body input.rz-inputtext:where(:not(.rz-datepicker input, .rz-numeric input, .rz-autocomplete input, .rz-dropdown-filter, .rz-multiselect-filter))::placeholder {
    color: var(--otc-muted);
    opacity: 1;
}

html body input.rz-inputtext:where(:not(.rz-datepicker input, .rz-numeric input, .rz-autocomplete input, .rz-dropdown-filter, .rz-multiselect-filter)):hover:not(:disabled) {
    border-color: var(--otc-border-strong);
}

html body input.rz-inputtext:where(:not(.rz-datepicker input, .rz-numeric input, .rz-autocomplete input, .rz-dropdown-filter, .rz-multiselect-filter)):focus {
    border-color: var(--otc-primary);
    outline: none;
    box-shadow: var(--otc-focus-shadow);
}

html body input.rz-inputtext:where(:not(.rz-datepicker input, .rz-numeric input, .rz-autocomplete input, .rz-dropdown-filter, .rz-multiselect-filter)):disabled {
    color: var(--otc-muted);
    background: var(--otc-surface-subtle);
    border-color: var(--otc-border-subtle);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--otc-success-text);
}

.invalid {
    outline: 1px solid var(--otc-danger-text);
}

.validation-message {
    color: var(--otc-danger-text);
}

.darker-border-checkbox.form-check-input {
    border-color: var(--otc-border-strong);
}

/* Shared action controls. Medium and Small use the Positions action profile;
   ExtraSmall remains available for dense grid-row actions. Inputs have their
   own density token so changing a button never changes financial row height. */
html body .btn,
html body .rz-button:is(.rz-button-md, .rz-button-sm) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--otc-button-height);
    min-height: var(--otc-button-height);
    height: var(--otc-button-height);
    padding: 0 var(--otc-button-padding-inline);
    border-radius: var(--otc-button-radius);
    font-size: var(--otc-button-font-size);
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    box-shadow: none;
}

html body .rz-button:is(.rz-button-md, .rz-button-sm) .rz-button-box,
html body .rz-scheduler-nav-prev-next .rz-button .rz-button-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--otc-button-gap);
    line-height: inherit;
}

html body .rz-button:is(.rz-button-md, .rz-button-sm) :is(.rz-button-image, .rzi),
html body .rz-scheduler-nav-prev-next .rz-button :is(.rz-button-image, .rzi),
html body .rz-panel-titlebar-toggler .rzi {
    flex-shrink: 0;
    width: var(--otc-button-icon-size);
    height: var(--otc-button-icon-size);
    font-size: var(--otc-button-icon-size);
    line-height: 1;
    margin: 0;
}

html body .rz-button:is(.rz-button-md, .rz-button-sm):is(.rz-button-icon-only, :has(> .rz-button-box > img):not(:has(.rz-button-text))) {
    padding-inline: 0;
}

html body .rz-splitbutton {
    min-height: var(--otc-button-height);
    font-size: var(--otc-button-font-size);
}

html body .rz-splitbutton > .rz-button:first-child {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

html body .rz-splitbutton > .rz-splitbutton-menubutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--otc-button-height);
    min-width: var(--otc-button-height);
    padding: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

html body .rz-button:focus-visible {
    outline: 2px solid var(--otc-primary);
    outline-offset: 2px;
}

html body .rz-button.rz-light:where(:not(.otc-theme-button)):not(.rz-variant-outlined, .rz-variant-text):hover:not(:disabled, .rz-state-disabled, [aria-disabled="true"]) {
    background: var(--otc-primary-wash);
}

/* Icon presentation belongs to the component theme; asset files only map glyphs. */
.rz-button:has(> .rz-button-box > img[src*="icons/colored/"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rz-button:has(> .rz-button-box > img[src*="icons/colored/"]) > .rz-button-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rz-button img[src*="icons/colored/"] {
    /* Radzen assigns its size-specific rzi font size to button images too. */
    inline-size: 1em;
    block-size: 1em;
    display: block;
    object-position: center;
    align-self: center;
    margin: 0;
}

/* Match the remaining native sizes; the theme owns medium/small and FAB density. */
.rz-button.rz-button-xs:where(:has(> .rz-button-box > img[src*="icons/colored/"]):not(:has(> .rz-button-box > .rz-button-text))) {
    padding: 0.125rem;
}

.rz-button.rz-button-xs:where(:has(> .rz-button-box > img[src*="icons/colored/"]):has(> .rz-button-box > .rz-button-text)) {
    padding: 0.125rem 0.5rem 0.125rem 0.125rem;
}

.rz-button.rz-button-lg:where(:has(> .rz-button-box > img[src*="icons/colored/"]):not(:has(> .rz-button-box > .rz-button-text))) {
    padding: 0.875rem;
}

.rz-button.rz-button-lg:where(:has(> .rz-button-box > img[src*="icons/colored/"]):has(> .rz-button-box > .rz-button-text)) {
    padding: 0 1.375rem;
}

.otc-primary-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link > img[src*="icons/colored/"] {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-inline-end: 0.375rem;
    content: var(--otc-icon-dark);
}

.rz-navigation-menu img[src*="icons/colored/"],
.rz-menu-popup img[src*="icons/colored/"] {
    margin-inline-end: 0.5rem;
}

/* Target solid surfaces, including default and flat variants. */
.rz-button:where(:not(.rz-scheduler *, .rz-selectbar *)):is(.rz-primary, .rz-secondary, .rz-info, .rz-success, .rz-warning, .rz-danger, .rz-dark):not(.rz-variant-outlined, .rz-variant-text, .rz-shade-light, .rz-shade-lighter) img[src*="icons/colored/"] {
    content: var(--otc-icon-dark);
}

.rz-button:where(:not(.rz-scheduler *, .rz-selectbar *)):is(.rz-primary, .rz-secondary, .rz-info, .rz-success, .rz-warning, .rz-danger, .rz-dark):not(.rz-variant-outlined, .rz-variant-text, .rz-shade-light, .rz-shade-lighter) :is(i.rzi, span.rzi, .otc-colored-glyph),
.otc-primary-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rz-navigation-item-icon-children,
.otc-profile .rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link > .rz-navigation-item-icon-children,
.otc-mobile-nav-toggle .rzi[data-otc-icon],
.otc-language-trigger .rzi,
.otc-avatar .rzi[data-otc-icon],
.rz-chkbox-box.rz-state-active .rzi {
    background-image: var(--otc-icon-dark);
}

/* White artwork keeps every stroke readable on blue action buttons. */
.rz-button:where(:not(.rz-scheduler *, .rz-selectbar *)):is(.rz-primary, .rz-info):not(.rz-variant-outlined, .rz-variant-text, .rz-shade-light, .rz-shade-light, .rz-shade-lighter, .otc-colored-fab-toggle) :is(img[src*="icons/colored/"], i.rzi, span.rzi, .otc-colored-glyph) {
    filter: brightness(0) invert(1);
}

/* Preserve the owning Radzen control's opacity and pointer/keyboard behavior. */
.rz-state-disabled img[src*="icons/colored/"],
.rz-state-disabled .rzi[data-otc-icon],
.rz-button:disabled img[src*="icons/colored/"] {
    filter: saturate(0.35);
}

button.rzi.rz-grid-filter-icon.rz-grid-filter-active {
    background-color: var(--otc-primary-soft);
    border-radius: 0.25rem;
    box-shadow: inset 0 -2px 0 var(--otc-primary);
}

/* Filled actions use pale semantic colors in dark mode and dark artwork.
   Only artwork is filtered: labels and disabled/focus behavior stay native. */
html[data-otc-theme="dark"] .rz-button:where(:not(.rz-scheduler *, .rz-selectbar *)):is(.rz-primary, .rz-secondary, .rz-info, .rz-success, .rz-warning, .rz-danger):not(.rz-variant-outlined, .rz-variant-text, .rz-shade-light, .rz-shade-lighter, .otc-colored-fab-toggle) :is(img[src*="icons/colored/"], i.rzi, span.rzi, .otc-colored-glyph),
html[data-otc-theme="dark"] .rz-chkbox-box.rz-state-active .rzi {
    filter: brightness(0);
}
/* The closed FAB keeps its native plus. The expanded close artwork follows
   the foreground contrast of the filled action in either appearance. */
.otc-colored-fab-toggle[aria-expanded="false"] .rzi {
    color: var(--rz-on-primary);
}

.otc-colored-fab-toggle[aria-expanded="true"] .rzi {
    filter: brightness(0) invert(1);
}

html[data-otc-theme="dark"] .otc-colored-fab-toggle[aria-expanded="true"] .rzi {
    filter: brightness(0);
}

/* RadzenFabMenuItem defaults to ButtonSize.Large independently from the
   compact toggle. Keep every expanded action aligned with the responsive
   OTCValue control density without changing native FAB positioning. */
html body .rz-fabmenu-items .rz-button.rz-button-lg {
    min-width: calc(var(--otc-control-height) + 0.25rem);
    min-height: calc(var(--otc-control-height) + 0.25rem);
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: var(--rz-body-font-size);
    font-weight: 500;
    line-height: 1rem;
    box-shadow: var(--otc-shadow-surface);
}

html body .rz-fabmenu-items .rz-button.rz-button-lg .rz-button-box {
    gap: 0.25rem;
    line-height: 1rem;
}

html body .rz-fabmenu-items .rz-button.rz-button-lg .rzi {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    line-height: 1rem;
}

html body .rz-alert.rz-alert-md {
    --rz-alert-margin: 0.375rem 0;
    --rz-alert-padding: 0.5rem 0.75rem;
    --rz-alert-gap: 0.5rem;
    --rz-alert-message-margin: 0;
}

html body .rz-data-grid.rz-density-compact {
    --rz-grid-cell-line-height: 1rem;
    --rz-grid-cell-padding: 0.25rem 0.5rem;
    --rz-grid-header-cell-padding: 0.25rem 0;
    --rz-grid-header-padding: 0.25rem 0.75rem;
    --rz-grid-header-title-padding-inline: 0.375rem 0;
    --rz-grid-filter-padding: 0.25rem 0.5rem;
    --rz-grid-group-header-padding: 0.25rem;
    --rz-grid-group-header-gap: 0.25rem;
    --rz-grid-group-header-item-padding-block: 0.125rem;
    --rz-grid-group-header-item-padding-inline: 0.375rem 0.25rem;
}

/* Theme-default scrollbars. Radzen's four-pixel transparent thumb border would
   otherwise leave only a very thin grip at compact sizes. */
html:root {
    color-scheme: light;
    --rz-scrollbar-size: 12px;
    --rz-scrollbar-background-color: #eef2f6;
    --rz-scrollbar-color: #7f919b;
    --rz-scrollbar-border-radius: 8px;
    background: #eef2f6;
    scrollbar-color: var(--rz-scrollbar-color) var(--rz-scrollbar-background-color);
    scrollbar-width: auto;
}

html:root[data-otc-theme="dark"] {
    color-scheme: dark;
    --rz-scrollbar-background-color: #0e151f;
    --rz-scrollbar-color: #6e849f;
    background: #0e151f;
}

html body:not(.rz-default-scrollbars) {
    scrollbar-color: var(--rz-scrollbar-color) var(--rz-scrollbar-background-color);
    scrollbar-width: auto;
}

html:root::-webkit-scrollbar,
html body:not(.rz-default-scrollbars)::-webkit-scrollbar,
html body:not(.rz-default-scrollbars) ::-webkit-scrollbar {
    width: var(--rz-scrollbar-size);
    height: var(--rz-scrollbar-size);
    background-color: var(--rz-scrollbar-background-color);
}

html:root::-webkit-scrollbar-track,
html body:not(.rz-default-scrollbars)::-webkit-scrollbar-track,
html body:not(.rz-default-scrollbars) ::-webkit-scrollbar-track {
    background-color: var(--rz-scrollbar-background-color);
}

html:root::-webkit-scrollbar-thumb,
html body:not(.rz-default-scrollbars)::-webkit-scrollbar-thumb,
html body:not(.rz-default-scrollbars) ::-webkit-scrollbar-thumb {
    min-width: 40px;
    min-height: 40px;
    background: var(--rz-scrollbar-color);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: var(--rz-scrollbar-border-radius);
}

html:root::-webkit-scrollbar-thumb:hover,
html body:not(.rz-default-scrollbars)::-webkit-scrollbar-thumb:hover,
html body:not(.rz-default-scrollbars) ::-webkit-scrollbar-thumb:hover {
    background-color: var(--rz-base-600);
}

/* Common controls and surfaces used by every workspace and entry window. */
html body .rz-button.rz-light:where(:not(.otc-theme-button)):not(.rz-variant-outlined, .rz-variant-text) {
    background-color: var(--otc-surface);
    color: var(--otc-text);
    border: 1px solid var(--otc-border);
}

html body .rz-button.rz-light:where(:not(.otc-theme-button)):not(.rz-variant-outlined, .rz-variant-text)[aria-expanded="true"] {
    background: var(--otc-primary-soft);
    color: var(--otc-primary);
}

html body .rz-button.rz-light:where(:not(.otc-theme-button)):not(.rz-variant-outlined, .rz-variant-text):is(:disabled, .rz-state-disabled, [aria-disabled="true"]) {
    color: var(--otc-muted);
    background-color: var(--otc-surface-muted);
    border-color: var(--otc-border-subtle);
    opacity: 0.75;
}

/* Existing HTML badges and Radzen badges share the same quiet status treatment. */
html body :is(.counterparty-status, .organization-status-badge,
    .organization-role-badge, .organization-email-badge, .organization-default-badge,
    .otc-external-source-provider-status, .otc-commodity-workspace-completeness,
    .commodity-price-archive-status-badge, .commodity-price-archive-count,
    .commodity-price-archive-row-status, .organization-permission-chips > span),
html body .rz-badge:not(.rz-variant-outlined, .rz-variant-text) {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: var(--otc-badge-padding);
    border: 0;
    border-radius: var(--otc-badge-radius);
    color: var(--otc-badge-color, var(--otc-muted));
    background: var(--otc-badge-background, var(--otc-surface-subtle));
    font-size: var(--otc-badge-font-size);
    font-weight: 500;
    line-height: var(--otc-badge-line-height);
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

html body :is(.rz-badge-success, .counterparty-status.is-active, .otc-external-source-provider-status-healthy,
    .organization-status-active, .commodity-price-archive-status-badge.is-active,
    .commodity-price-archive-row-status.is-active, .otc-commodity-price-row-state.is-success) {
    --otc-badge-color: var(--otc-success-text);
    --otc-badge-background: color-mix(in srgb, var(--otc-success-text) 12%, var(--otc-surface));
}

html body :is(.rz-badge-primary, .rz-badge-info, .organization-role-badge,
    .organization-default-badge, .otc-commodity-workspace-completeness) {
    --otc-badge-color: var(--otc-info-text);
    --otc-badge-background: var(--otc-info-surface);
}

html body :is(.rz-badge-warning, .otc-external-source-provider-status-warning, .organization-invitation-pending, .organization-email-badge,
    .otc-commodity-price-row-state.is-pending) {
    --otc-badge-color: var(--otc-amber-text);
    --otc-badge-background: var(--otc-warning-surface);
}

html body :is(.rz-badge-danger, .rz-badge-error, .otc-external-source-provider-status-failed, .organization-invitation-revoked,
    .otc-commodity-price-row-state.is-error) {
    --otc-badge-color: var(--otc-danger-text);
    --otc-badge-background: var(--otc-danger-surface);
}

html body :is(.rz-badge-light, .rz-badge-secondary, .rz-badge-base, .rz-badge-dark,
    .counterparty-status.is-archived, .organization-status-inactive,
    .organization-status-disabled, .commodity-price-archive-row-status.is-archived,
    .otc-commodity-price-row-state.is-neutral) {
    --otc-badge-color: var(--otc-muted);
    --otc-badge-background: var(--otc-surface-subtle);
}

/* Resolve derived Radzen tokens at the component so theme switches are reliable. */
html body .rz-selectbar {
    gap: 4px;
    flex-wrap: wrap;
    --rz-selectbar-border-radius: var(--otc-button-radius);
    --rz-selectbar-background-color: var(--otc-surface);
    --rz-selectbar-color: var(--otc-text);
    --rz-selectbar-border: 1px solid var(--otc-border);
    --rz-selectbar-selected-background-color: var(--otc-primary-soft);
    --rz-selectbar-selected-color: var(--otc-info-text);
    --rz-selectbar-selected-border: 1px solid var(--otc-primary);
    --rz-selectbar-focus-outline: var(--rz-outline-focus);
    --rz-selectbar-button-focus-outline: var(--rz-outline-focus);
}

/* Separate options so their complete native outlines remain visible when wrapping. */
html body .rz-selectbar .rz-button {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    gap: var(--otc-button-gap);
    border-radius: var(--rz-selectbar-border-radius);
}

html body .rz-selectbar.rz-selectbar-horizontal .rz-button:not(:first-child) {
    margin-inline-start: 0;
}

html body .rz-selectbar.rz-selectbar-vertical .rz-button:not(:first-child) {
    margin-top: 0;
}

html body .rz-scheduler {
    --rz-scheduler-background-color: var(--otc-surface);
    --rz-scheduler-color: var(--otc-text);
    --rz-scheduler-border-color: var(--otc-border);
    --rz-scheduler-minor-border-color: var(--otc-border-subtle);
    --rz-scheduler-toolbar-background-color: var(--otc-surface-subtle);
    --rz-scheduler-toolbar-title-color: var(--otc-text);
    --rz-scheduler-header-background-color: var(--otc-surface-muted);
    --rz-scheduler-header-color: var(--otc-text);
    --rz-scheduler-header-border: 1px solid var(--otc-border);
    --rz-scheduler-prev-next-button-background-color: var(--otc-primary-soft);
    --rz-scheduler-prev-next-button-color: var(--otc-primary);
    --rz-scheduler-prev-next-button-padding-block: 0;
    --rz-scheduler-prev-next-button-padding-inline: 0;
    --rz-scheduler-prev-next-button-font-size: var(--otc-button-font-size);
    --rz-scheduler-today-button-padding: 0 var(--otc-button-padding-inline);
    --rz-scheduler-today-button-font-size: var(--otc-button-font-size);
    --rz-scheduler-today-button-text-transform: none;
    --rz-scheduler-view-button-background-color: var(--otc-surface);
    --rz-scheduler-view-button-color: var(--otc-muted);
    --rz-scheduler-view-button-border: 1px solid var(--otc-border);
    --rz-scheduler-view-selected-background-color: var(--otc-primary-soft);
    --rz-scheduler-view-selected-color: var(--otc-primary);
    --rz-scheduler-view-selected-border-color: var(--otc-primary);
    --rz-scheduler-weekend-background-color: var(--otc-surface-subtle);
    --rz-scheduler-weekend-color: var(--otc-muted);
    --rz-scheduler-other-month-background-color: var(--otc-surface-subtle);
    --rz-scheduler-event-background-color: var(--otc-primary-soft);
    --rz-scheduler-event-color: var(--otc-primary);
    --rz-scheduler-event-list-button-color: var(--otc-primary);
    --rz-scheduler-highlight-background-color: var(--otc-warning-surface);
}

/* Scheduler navigation omits Radzen's size classes. Keep its native joined
   corners and palette while sharing the action control density. */
html body .rz-scheduler-nav-prev-next .rz-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--otc-button-height);
    min-height: var(--otc-button-height);
    height: var(--otc-button-height);
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    box-shadow: none;
}

html body .rz-panel {
    --rz-panel-toggle-icon-width: var(--otc-button-height);
    --rz-panel-toggle-icon-height: var(--otc-button-height);
    --rz-panel-toggle-icon-font-size: var(--otc-button-icon-size);
    --rz-panel-toggle-icon-border-radius: var(--otc-button-radius);
    --rz-panel-toggle-icon-background-color: var(--otc-surface);
    --rz-panel-toggle-icon-focus-outline: 2px solid var(--otc-primary);
    --rz-panel-toggle-icon-focus-outline-offset: 2px;
    --rz-panel-hover-color: var(--otc-primary);
}

html body .rz-panel-titlebar-toggler {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--otc-button-height);
    height: var(--otc-button-height);
    min-width: var(--otc-button-height);
    min-height: var(--otc-button-height);
    padding: 0;
    border: 1px solid var(--otc-border);
    color: var(--otc-text);
    box-shadow: none;
}

html body .rz-panel-titlebar-toggler:hover:not(:disabled, .rz-state-disabled, [aria-disabled="true"]) {
    border-color: var(--otc-border-strong);
    color: var(--otc-primary);
    background-color: var(--otc-primary-wash);
}

html body .rz-panel-titlebar-toggler:is(:disabled, .rz-state-disabled, [aria-disabled="true"]) {
    border-color: var(--otc-border-subtle);
    color: var(--otc-muted);
    background-color: var(--otc-surface-subtle);
    cursor: default;
}

html body .otc-calendar-select-button {
    color: var(--otc-text);
    font-size: 12px;
    font-weight: 500;
}

html body .otc-calendar-select-button:focus-visible {
    outline: 2px solid var(--otc-primary);
    outline-offset: -2px;
    border-radius: var(--rz-border-radius);
}

/* Shared surfaces and reading hierarchy; no widths, scroll or panel sizing. */
html body :is(.otc-workspace, .otc-entry-window-shell, .otc-account-surface) {
    color: var(--otc-text);
}

html body .otc-entry-window-shell {
    background: var(--otc-canvas);
}

html body :is(.otc-account-card-body, .otc-account-form-section) {
    border: 0;
    background: transparent;
    box-shadow: none;
}

html body :is(.otc-workspace-header, .otc-entry-heading) {
    border-inline-start: 3px solid var(--otc-primary);
    border-bottom: 1px solid var(--otc-border);
}

html body .otc-page-header h1,
html body .otc-workspace-header h1,
html body .otc-entry-heading-title,
html body .otc-account-surface h1 {
    color: var(--otc-text);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
}

html body .otc-workspace-header .otc-eyebrow {
    color: var(--otc-muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

html body :is(.otc-workspace-header .otc-subtitle, .otc-entry-heading-context,
    .otc-account-surface .otc-subtitle, .otc-workspace-section-header p) {
    color: var(--otc-muted);
    font-size: 12px;
    line-height: 1.5;
}

html body :is(.otc-workspace-section, .otc-workspace-table-card) h2,
html body .otc-account-surface :is(h2, h3, h4) {
    color: var(--otc-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

html body :is(.otc-workspace-form-actions, .otc-entry-actions, .otc-auth-links) {
    border-top: 1px solid var(--otc-border);
}

html body .otc-workspace-section-header {
    border-bottom: 1px solid var(--otc-border);
}

html body :is(.otc-entry-section, .rz-fieldset) {
    border-color: var(--otc-border);
    border-radius: var(--rz-border-radius);
    background: var(--otc-surface);
}

html body :is(.otc-entry-section, .rz-fieldset):focus-within {
    border-color: var(--otc-primary);
}

html body :is(.rz-fieldset-legend, .rz-fieldset-legend-text) {
    color: var(--otc-text);
    font-size: 13px;
    font-weight: 600;
}

html body :is(.otc-entry-facts, .otc-entry-summary, .otc-account-security-section) {
    border: 1px solid var(--otc-border-subtle);
    border-radius: var(--rz-border-radius);
    background: var(--otc-surface-subtle);
}

html body :is(.otc-entry-fact, .otc-entry-summary-item) {
    color: var(--otc-text);
    font-size: 12px;
    line-height: 1.45;
}

html body .otc-entry-fact-label {
    color: var(--otc-muted);
    font-size: 12px;
    font-weight: 400;
}

html body .otc-entry-fact-value {
    font-weight: 500;
}

html body :is(.rz-alert, .alert) {
    border-radius: var(--rz-border-radius);
    font-size: 12px;
    line-height: 1.5;
}

html body :is(.otc-faq-answer, .otc-instrument-type-panel, .otc-rich-text) {
    color: var(--otc-text);
    font-size: 13px;
    line-height: 1.65;
}

html body .rz-accordion {
    border: 1px solid var(--otc-border);
    border-radius: var(--rz-border-radius);
    background: var(--otc-surface);
}

html body .rz-accordion-header > :is(a, button) {
    color: var(--otc-text);
    font-weight: 500;
    text-align: start;
}

html body .rz-accordion-content {
    background: var(--otc-surface);
}

html body .otc-workspace-message {
    border: 1px solid var(--otc-border);
    border-inline-start: 3px solid var(--otc-amber-text);
    border-radius: var(--otc-card-radius);
    background: var(--otc-surface);
}

/* Native Bootstrap account forms use the same theme values as Radzen. */
html body :is(.form-control, .form-select) {
    border-color: var(--otc-border);
    color: var(--otc-text);
    background-color: var(--otc-surface);
}

html body :is(.form-control, .form-select):disabled {
    color: var(--otc-muted);
    background-color: var(--otc-surface-subtle);
}

html body :is(.form-control, .form-select):focus {
    border-color: var(--otc-primary);
    box-shadow: var(--otc-focus-shadow);
}

html body .form-floating > label {
    color: var(--otc-muted);
}

html body .form-floating > label::after {
    background-color: var(--otc-surface);
}

html body .form-floating > :is(.form-control, .form-select):is(:disabled, [readonly]) ~ label {
    color: var(--otc-muted);
}

html body .form-floating > :is(.form-control, .form-select)[readonly]:not(:disabled) ~ label::after {
    background-color: var(--otc-surface);
}

html body .form-floating > :is(.form-control, .form-select):disabled ~ label::after {
    background-color: var(--otc-surface-subtle);
}

html body .checkbox input {
    accent-color: var(--otc-primary);
}

html body .btn-primary {
    --bs-btn-color: var(--rz-on-primary);
    --bs-btn-bg: var(--rz-primary);
    --bs-btn-border-color: var(--rz-primary);
    --bs-btn-hover-color: var(--rz-on-primary-dark);
    --bs-btn-hover-bg: var(--rz-primary-dark);
    --bs-btn-hover-border-color: var(--rz-primary-dark);
    --bs-btn-active-color: var(--rz-on-primary-darker);
    --bs-btn-active-bg: var(--rz-primary-darker);
    --bs-btn-active-border-color: var(--rz-primary-darker);
    --bs-btn-disabled-color: var(--rz-on-primary);
    --bs-btn-disabled-bg: var(--rz-primary);
    --bs-btn-disabled-border-color: var(--rz-primary);
}

html body .btn-danger {
    --bs-btn-color: var(--rz-on-danger);
    --bs-btn-bg: var(--rz-danger);
    --bs-btn-border-color: var(--rz-danger);
    --bs-btn-hover-color: var(--rz-on-danger-dark, var(--rz-on-danger));
    --bs-btn-hover-bg: var(--rz-danger-dark);
    --bs-btn-hover-border-color: var(--rz-danger-dark);
    --bs-btn-active-color: var(--rz-on-danger-darker, var(--rz-on-danger));
    --bs-btn-active-bg: var(--rz-danger-darker);
    --bs-btn-active-border-color: var(--rz-danger-darker);
    --bs-btn-disabled-color: var(--rz-on-danger);
    --bs-btn-disabled-bg: var(--rz-danger);
    --bs-btn-disabled-border-color: var(--rz-danger);
}

html body .btn:focus-visible,
html body .otc-account-surface a:focus-visible {
    outline: 2px solid var(--otc-primary);
    outline-offset: 3px;
}

html body .alert-success {
    --bs-alert-color: var(--otc-success-text);
    --bs-alert-bg: var(--otc-success-surface);
    --bs-alert-border-color: color-mix(in srgb, var(--otc-success-text) 25%, transparent);
}

html body .alert-danger {
    --bs-alert-color: var(--otc-danger-text);
    --bs-alert-bg: var(--otc-danger-surface);
    --bs-alert-border-color: color-mix(in srgb, var(--otc-danger-text) 25%, transparent);
}

html body .alert-warning {
    --bs-alert-color: var(--otc-amber-text);
    --bs-alert-bg: var(--otc-warning-surface);
    --bs-alert-border-color: color-mix(in srgb, var(--otc-amber-text) 25%, transparent);
}

html body .alert-info {
    --bs-alert-color: var(--otc-info-text);
    --bs-alert-bg: var(--otc-info-surface);
    --bs-alert-border-color: var(--otc-border);
}

html body .otc-account-surface .text-danger {
    color: var(--otc-danger-text) !important;
}

html body .otc-account-surface .text-info {
    color: var(--otc-muted) !important;
}

html body .table {
    --bs-table-color: var(--otc-text);
    --bs-table-bg: var(--otc-surface);
    --bs-table-border-color: var(--otc-border);
    --bs-table-striped-color: var(--otc-text);
    --bs-table-striped-bg: var(--otc-surface-subtle);
    --bs-table-hover-color: var(--otc-text);
    --bs-table-hover-bg: var(--otc-surface-subtle);
}

html body .otc-workspace-table {
    font-size: 12px;
}

html body .otc-workspace-table th {
    color: var(--otc-text);
    background: var(--otc-surface-subtle);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

html body kbd {
    border: 1px solid var(--otc-border);
    border-radius: var(--rz-border-radius);
    color: var(--otc-text);
    background: var(--otc-surface-subtle);
}

/* Component surfaces that Radzen Software does not fully expose via tokens. */
html body .rz-card.rz-variant-filled {
    border: var(--rz-card-border);
    box-shadow: var(--rz-card-shadow);
}

html body .rz-dialog,
html body .rz-dialog-side {
    border: 1px solid var(--otc-border);
}

html body .rz-dropdown-panel,
html body .rz-multiselect-panel,
html body .rz-autocomplete-panel,
html body .rz-splitbutton-menu {
    border: 1px solid var(--otc-border);
    border-radius: var(--otc-overlay-radius);
    background-color: var(--otc-surface);
    box-shadow: var(--otc-shadow-raised);
}

html body .rz-alert.rz-info:not(.rz-variant-outlined):not(.rz-variant-text) {
    --rz-alert-background-color: var(--otc-info-surface);
    --rz-alert-color: var(--otc-info-text);
    --rz-alert-title-color: var(--otc-info-text);
    --rz-alert-icon-color: var(--rz-info);
    border-inline-start: 3px solid var(--rz-info);
}

html body .rz-alert.rz-success:not(.rz-variant-outlined):not(.rz-variant-text) {
    --rz-alert-background-color: var(--otc-success-surface);
    --rz-alert-color: var(--otc-success-text);
    --rz-alert-title-color: var(--otc-success-text);
    --rz-alert-icon-color: var(--rz-success);
    border-inline-start: 3px solid var(--rz-success);
}

html body .rz-alert.rz-warning:not(.rz-variant-outlined):not(.rz-variant-text) {
    --rz-alert-background-color: var(--otc-warning-surface);
    --rz-alert-color: var(--otc-amber-text);
    --rz-alert-title-color: var(--otc-amber-text);
    --rz-alert-icon-color: var(--rz-warning);
    border-inline-start: 3px solid var(--rz-warning);
}

html body .rz-alert.rz-danger:not(.rz-variant-outlined):not(.rz-variant-text) {
    --rz-alert-background-color: var(--otc-danger-surface);
    --rz-alert-color: var(--otc-danger-text);
    --rz-alert-title-color: var(--otc-danger-text);
    --rz-alert-icon-color: var(--rz-danger);
    border-inline-start: 3px solid var(--rz-danger);
}

/* Frozen headers share the header palette while body cells retain an opaque
   row surface beneath Radzen's hover and selection overlays. */
html body .rz-grid-table thead th.rz-frozen-cell {
    --rz-grid-frozen-cell-background-color: var(--rz-grid-header-background-color);
}

html body .rz-grid-table thead th.rz-frozen-cell.rz-sortable-column.rz-state-active {
    --rz-grid-frozen-cell-background-color: var(--rz-grid-header-sorted-background-color);
}

html body .rz-grid-table tbody tr.rz-state-highlight > td,
html body .rz-grid-table tbody tr.rz-data-row.rz-state-highlight > td {
    color: var(--rz-grid-selected-color);
    background-color: var(--rz-grid-selected-background-color);
}

html body .rz-grid-table tbody tr.rz-state-highlight > td:first-child,
html body .rz-grid-table tbody tr.rz-data-row.rz-state-highlight > td:first-child {
    box-shadow: var(--otc-selection-indicator);
}

html body :is(
    .otc-language-trigger,
    .otc-language-option,
    .otc-mobile-nav-toggle,
    .otc-attachment-remove,
    .otc-field-link-icon,
    .otc-dropdown-tree-clear,
    .otc-calendar-select-button,
    .otc-commodity-revision-button
):focus-visible,
html body .otc-mobile-nav-panel a:focus-visible {
    outline: var(--rz-outline-focus);
    outline-offset: 1px;
}

html body .otc-mobile-nav-toggle:focus-visible,
html body .otc-nav > .rz-menu > .rz-navigation-item
    > .rz-navigation-item-wrapper > .rz-navigation-item-link:focus-visible,
html body .otc-brand:focus-visible,
html body .otc-profile [role="button"]:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px rgba(15, 36, 55, 0.48);
}

html body .otc-nav > .rz-menu:not(.rz-profile-menu):focus-visible {
    outline: none;
}

html body .otc-nav > .rz-menu:not(.rz-profile-menu):focus-visible
    > .rz-navigation-item.rz-state-focused > .rz-navigation-item-wrapper {
    border-radius: 0;
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

html body .otc-topbar .otc-profile ul.rz-profile-menu
    > .rz-navigation-item > [role="button"]:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px rgba(11, 31, 51, 0.48);
}

html body .rz-data-grid,
html body .otc-positions-pnl-summary,
html body .otc-valuation-about-grid,
html body .otc-commodity-price-table,
html body .otc-commodity-price-calculated-table {
    font-variant-numeric: tabular-nums;
}

/* Application shell and shared surfaces */
html body .otc-topbar {
    border-bottom-color: rgba(255, 255, 255, 0.14);
    background: var(--otc-shell-background);
    color: var(--otc-shell-text);
    box-shadow: none;
}

html body .otc-brand-title {
    color: var(--otc-shell-text);
    font-weight: 500;
    letter-spacing: -0.02em;
}

html body .otc-nav {
    justify-self: start;
    align-self: stretch;
    height: 100%;
    --rz-menu-top-item-hover-background-color: rgba(255, 255, 255, 0.1);
    --rz-menu-top-item-selected-background-color: transparent;
}

html body .otc-nav > .rz-menu {
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
}

html body .otc-nav > .rz-menu > .rz-navigation-item,
html body .otc-nav > .rz-menu > .rz-navigation-item > .rz-navigation-item-wrapper {
    display: flex;
    align-items: stretch;
    border-radius: 0;
}

html body .otc-nav > .rz-menu > .rz-navigation-item > .rz-navigation-menu {
    inset-block-start: 100%;
    inset-inline-start: 0;
}

html body .otc-nav > .rz-menu > .rz-navigation-item
    > .rz-navigation-item-wrapper > .rz-navigation-item-link {
    align-items: center;
    height: 100%;
    border-radius: 0;
    font-weight: 400;
}

html body .otc-nav > .rz-menu > .rz-navigation-item
    > .rz-navigation-item-wrapper > .rz-navigation-item-link::after {
    right: 0.625rem;
    bottom: 0;
    left: 0.625rem;
    border-radius: 0;
    background: var(--otc-shell-text);
}

html body .otc-nav > .rz-menu > .rz-navigation-item
    > .rz-navigation-item-wrapper > .rz-navigation-item-link:hover {
    background: rgba(255, 255, 255, 0.075) !important;
}

html body .otc-nav > .rz-menu > .rz-navigation-item
    > .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
html body .otc-nav > .rz-menu > .rz-navigation-item
    > .rz-navigation-item-wrapper > .rz-navigation-item-link.rz-state-active,
html body .otc-nav > .rz-menu > .rz-navigation-item
    > .rz-navigation-item-wrapper > .rz-navigation-item-link.active {
    color: var(--otc-shell-text) !important;
    background: transparent !important;
    font-weight: 500;
    box-shadow: none;
}

html body .otc-brand-logo {
    box-shadow: 0 1px 3px rgba(15, 36, 55, 0.18);
}

html body .otc-avatar {
    border-color: rgba(255, 255, 255, 0.24);
    background: var(--otc-shell);
    box-shadow: 0 1px 3px rgba(15, 36, 55, 0.2);
}

html body .rz-body.app-body > .page-container {
    padding: 1.25rem;
}

html body .otc-page-header {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

html body .otc-subtitle {
    font-size: 0.875rem;
    line-height: 1.4;
}

html body .otc-card,
html body .rz-card.otc-card,
html body .otc-card-tight,
html body .rz-card.otc-card-tight,
html body .otc-account-card,
html body .rz-card.otc-account-card,
html body :is(.otc-account-surface, .otc-workspace-table-card, .otc-entry-window-card, .otc-position-entry-card, .otc-listed-trade-summary) {
    border: 1px solid var(--otc-border);
    border-radius: var(--otc-card-radius);
    background: var(--otc-surface);
    box-shadow: var(--otc-shadow-surface);
}

/* Positions workspace and OTC/listed entry forms */
html body .rz-card.otc-positions-toolbar-card {
    padding: 0.625rem 0.75rem;
    border-radius: var(--otc-card-radius);
}

html body .rz-card.otc-positions-grid-card,
html body .rz-card.otc-positions-summary-card,
html body .rz-card.otc-position-entry-card {
    padding: 0.75rem;
    border-radius: var(--otc-card-radius);
}

html body .rz-card.otc-positions-metrics-card {
    padding-block: 0.5rem;
}

html body .otc-positions-grid-header,
html body .otc-positions-pnl-summary {
    margin-bottom: 0.5rem;
}

html body .otc-positions-layout,
html body .otc-positions-overview,
html body .otc-positions-toolbar-card > .rz-stack,
html body .otc-positions-summary-card > .rz-stack {
    gap: 0.5rem !important;
}

html body .otc-positions-pnl-summary {
    padding: 0.375rem 0;
}

html body .otc-positions-metrics-card .otc-positions-pnl-summary {
    margin: 0;
    padding: 0;
    border-block: 0;
}

html body .otc-positions-pnl-summary-item {
    padding-inline: 0.5rem;
}

html body .otc-position-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem 0.625rem;
}

html body .rz-card.otc-position-entry-card .otc-position-section-fieldset .otc-position-form-grid {
    row-gap: 0.75rem;
}

html body .otc-position-entry-card .rz-form-field.rz-state-focused:has(.rz-numeric.valid.modified:not(.invalid)) .rz-form-field-content {
    border-color: var(--otc-success-text);
    border-block-end-color: var(--otc-success-text);
    box-shadow: var(--otc-focus-shadow);
}

html body .otc-position-entry-card .rz-form-field.rz-state-focused .rz-numeric.valid.modified:not(.invalid):focus-within {
    border-color: var(--otc-success-text);
    border-block-end-color: var(--otc-success-text);
}

html body .otc-position-entry-card .rz-form-field.rz-state-focused:has(.rz-numeric.valid.modified:not(.invalid)) .rz-form-field-label {
    color: var(--otc-success-text);
}

html body .otc-position-entry-card form > .rz-stack,
html body .otc-positions-grid-card form > .rz-stack {
    gap: 0.625rem !important;
}

html body .otc-position-radio-list {
    min-height: var(--otc-control-height);
    padding-inline: 0.5rem;
}

/* Radzen floats the FormField label above horizontal radio lists without
   reserving vertical clearance for it. Keep the choices optically centered
   below that label in every compact form. */
html body .rz-form-field-content > .rz-radio-button-list {
    min-height: var(--otc-control-height);
    padding-block: 0.375rem 0.125rem;
}

html body .otc-position-switch-field {
    min-height: var(--otc-control-height);
    gap: 0.5rem;
    padding-inline: 0.5rem;
}

html body .otc-field-with-help {
    gap: 0.35rem;
}

html body .otc-actions {
    gap: 0.5rem;
    margin-top: 0.75rem;
}

html body .otc-market-save-status {
    color: var(--otc-success-text);
    font-size: 12px;
    font-weight: 500;
}

html body .otc-md-status-text {
    border: 1px solid var(--otc-border);
    border-radius: var(--rz-border-radius);
    color: var(--otc-text);
    background: var(--otc-surface);
    font: inherit;
    line-height: 1.35;
}

/* Shared setup, administration, and market-data forms */
html body .otc-md-filter-panel,
html body .otc-system-calendar-filters,
html body .otc-system-calendar-summary {
    gap: 0.625rem;
}

html body .otc-md-filter-grid,
html body .otc-settings-grid,
html body .otc-commodity-future-definition-fields,
html body .otc-admin-split {
    gap: 0.625rem;
}

html body .otc-md-actions,
html body .otc-md-inline-query,
html body .otc-definition-filter-grid,
html body .otc-definition-two-cols,
html body .otc-definition-four-cols,
html body .otc-definition-scan-row {
    gap: 0.5rem;
}

html body .otc-md-inline-actions,
html body .otc-md-inline-result {
    min-height: var(--otc-control-height);
}

html body .otc-md-inline-result,
html body .otc-md-summary-item,
html body .otc-md-detail-panel,
html body .otc-md-quality-panel,
html body .otc-admin-editor,
html body .otc-settings-preview-item {
    padding: 0.625rem;
    border: 1px solid var(--otc-border);
    border-radius: var(--otc-card-radius);
    background: var(--otc-surface);
    box-shadow: var(--otc-shadow-surface);
}

html body .otc-system-calendar-summary > div {
    border-bottom-color: var(--otc-border-subtle);
}

/* Profile identity and commodity catalogues use the common theme in both modes. */
html body .otc-account-header:has(.otc-profile-email) {
    display: block;
}

html body .otc-profile-email {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    margin-top: 0.5rem;
    color: var(--otc-muted);
    font-size: 0.8125rem;
}

html body .otc-profile-email-address {
    min-width: 0;
    color: var(--otc-text);
    font-weight: 500;
    overflow-wrap: anywhere;
    user-select: text;
}

html body .otc-market-commodity-search .rz-textbox {
    width: min(100%, 32rem);
}

html body .otc-market-family-catalog {
    display: grid;
    border: 1px solid var(--otc-border);
    border-radius: var(--otc-card-radius);
    overflow: clip;
}

html body .otc-market-family-band {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    background: var(--otc-surface);
    border-inline-start: 3px solid transparent;
}

html body .otc-market-family-band + .otc-market-family-band {
    border-top: 1px solid var(--otc-border);
}

html body .otc-market-family-band.is-selected {
    border-inline-start-color: var(--otc-primary);
}

html body .otc-market-family-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.75rem;
    color: var(--otc-text);
    background: var(--otc-surface-subtle);
    border-inline-end: 1px solid var(--otc-border-subtle);
}

html body .otc-market-family-heading strong {
    font-size: 0.8125rem;
    font-weight: 600;
}

html body .otc-market-family-heading small {
    display: block;
    margin-top: 0.2rem;
    color: var(--otc-muted);
    font-size: 0.75rem;
}

html body .otc-market-family-products {
    padding: 0.65rem 0.85rem;
    min-width: 0;
    color: var(--otc-text);
    font-size: 0.8125rem;
    line-height: 1.65;
}

html body .otc-market-family-products ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .otc-market-family-products li {
    overflow-wrap: anywhere;
}

html body .otc-market-family-products li:not(:last-child)::after {
    content: "·";
    margin-inline: 0.6rem;
    color: var(--otc-muted);
}

/* The first-login market selection shares the regular market controls. */
html body .otc-market-setup-shell {
    min-height: 100dvh;
    background: var(--otc-canvas);
}

html body .otc-market-setup-brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem max(1rem, calc((100% - 1200px) / 2));
    color: var(--otc-shell-text);
    background: var(--otc-shell-background);
}

html body .otc-market-setup-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1rem;
    font-weight: 600;
}

html body .otc-market-setup-brandbar form {
    margin: 0;
}

html body .otc-market-setup-logout {
    border: 1px solid currentColor;
    border-radius: var(--rz-border-radius);
    padding: 0.3rem 0.6rem;
    color: inherit;
    background: transparent;
    font: inherit;
}

html body .otc-market-setup-logout:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

html body .otc-market-setup-shell .otc-markets-page {
    width: min(100% - 2rem, 1200px);
    margin: 1.25rem auto;
}

html body .otc-market-setup-introduction {
    display: grid;
    gap: 0.75rem;
    margin-block: 0.75rem;
    color: var(--otc-muted);
}

html body .otc-market-setup-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .otc-market-setup-steps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.35rem;
    color: var(--otc-muted);
    border-bottom: 2px solid transparent;
}

html body .otc-market-setup-steps li > span {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--otc-border);
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
}

html body .otc-market-setup-steps li.is-current {
    color: var(--otc-primary);
    border-bottom-color: currentColor;
    font-weight: 600;
}

html body .otc-market-setup-steps li.is-current > span {
    background: var(--otc-primary-soft);
    border-color: var(--otc-primary);
}

html body .otc-market-setup-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-inline-start: auto;
}

html body .otc-market-step-skip {
    margin-top: 0.5rem;
}

html body .otc-market-setup-empty-choice {
    margin: 0;
    padding: 0.5rem;
    color: var(--otc-text);
}

@media (max-width: 640px) {
    html body .otc-market-family-band {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .otc-market-family-heading {
        border-inline-end: 0;
        padding-bottom: 0.5rem;
    }

    html body .otc-market-family-products {
        padding: 0.5rem 0.75rem 0.75rem;
    }

    html body .otc-market-setup-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

html body .otc-market-setup-introduction p,
html body .otc-market-setup-footer p {
    margin: 0;
}

html body .otc-market-setup-none {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--otc-border);
    border-radius: var(--rz-border-radius);
    color: var(--otc-text);
    background: var(--otc-surface);
}

html body .otc-market-setup-none small {
    display: block;
    margin-top: 0.2rem;
    color: var(--otc-muted);
    font-size: 0.75rem;
}

html body .otc-market-setup-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--otc-border);
    border-radius: var(--rz-border-radius);
    color: var(--otc-text);
    background: var(--otc-surface);
    box-shadow: var(--otc-shadow-raised);
}

html body .otc-market-setup-hint {
    color: var(--otc-muted);
    font-size: 0.75rem;
    padding-top: 0.25rem;
}

html body .otc-market-setup-error {
    color: var(--otc-danger-text);
    padding-top: 0.25rem;
}

html body .otc-page.otc-system-calendars-page .otc-system-calendar-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

html body .otc-page.otc-system-calendars-page .otc-system-calendar-summary > div {
    display: flex;
    flex: 0 1 auto;
    align-items: baseline;
    gap: 0.375rem;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

html body .otc-page.otc-system-calendars-page .otc-system-calendar-summary > div:first-child,
html body .otc-page.otc-system-calendars-page .otc-system-calendar-summary > div:last-child {
    display: block;
    flex-basis: 100%;
}

html body .otc-page.otc-system-calendars-page .otc-system-calendar-summary > div:first-child > .otc-system-calendar-summary-label {
    margin-bottom: 0.25rem;
}

html body .otc-page.otc-system-calendars-page .otc-system-calendar-summary > div:last-child {
    padding-top: 0.625rem;
    border-top: 1px solid var(--otc-border-subtle);
}

html body .otc-page.otc-system-calendars-page .otc-system-calendar-summary-label {
    color: var(--otc-muted);
    font-size: 0.6875rem;
    font-weight: 500;
}

html body .otc-page.otc-system-calendars-page .otc-system-calendar-products {
    margin-top: 0.375rem;
    font-size: 0.75rem;
}

html body .otc-calendar-row {
    border: 1px solid var(--otc-border);
    border-radius: var(--rz-border-radius);
    background: var(--otc-surface);
    box-shadow: var(--otc-shadow-surface);
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

html body .otc-calendar-row:hover {
    border-color: var(--otc-border-strong);
    background: var(--otc-surface-subtle);
}

html body .otc-calendar-row.is-selected {
    border-color: var(--otc-primary);
    background: var(--otc-primary-soft);
    box-shadow: inset 3px 0 0 var(--otc-primary);
}

/* Shared field definition links and calendar selection. */
.otc-field-link-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--otc-amber);
    line-height: 1;
    text-decoration: none;
}

.otc-field-link-icon .rzi {
    font-size: 1.05rem;
}

.otc-field-link-icon:hover,
.otc-field-link-icon:focus-visible {
    color: var(--otc-amber-text);
}

.otc-field-link-icon-disabled {
    color: var(--rz-text-disabled-color);
    cursor: default;
    opacity: .65;
}

.otc-calendar-selector {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    align-items: center;
    gap: .25rem;
    width: 100%;
    min-width: 0;
}

.otc-calendar-selector > .otc-field-link-icon {
    justify-content: center;
}

html body .rz-form-field-content:has(> .otc-calendar-selector) {
    flex-wrap: wrap;
    min-width: 0;
}

html body .rz-form-field-content > .otc-calendar-selector {
    flex: 1 1 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Outlined labels sit over the field border; reserve clearance above the button. */
html body .rz-form-field.rz-variant-outlined .rz-form-field-content > .otc-calendar-selector {
    padding-block: 6px 2px;
    padding-inline: var(--rz-input-padding-inline);
}

html body .rz-form-field-content > .otc-calendar-picker-load-error {
    flex: 1 1 100%;
    min-width: 0;
}

/* Read descriptions before confirming a calendar. */
html body .rz-dialog.otc-calendar-picker-dialog {
    width: min(1080px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
}

html body .otc-calendar-picker-dialog > .rz-dialog-titlebar {
    flex-shrink: 0;
}

html body .otc-calendar-picker-dialog > .rz-dialog-content {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

html body .otc-calendar-picker {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    color: var(--otc-text);
}

html body .otc-calendar-picker-filters {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) minmax(120px, .7fr);
    flex-shrink: 0;
    gap: 8px;
    align-items: end;
}

html body .otc-calendar-picker-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

html body .otc-calendar-picker-filter > label {
    margin: 0;
    color: var(--otc-muted);
    font-size: 11px;
    line-height: 1.4;
}

html body .otc-calendar-picker-filter > :is(input, .rz-textbox, .rz-dropdown) {
    width: 100%;
    min-width: 0;
}

html body .otc-calendar-picker-results-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--otc-muted);
    font-size: 12px;
}

html body .otc-calendar-picker-list {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 2px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

html body .otc-calendar-picker-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) minmax(130px, 180px);
    align-items: start;
    gap: 10px;
    min-height: 70px;
    margin: 0 0 6px;
    padding: 10px 12px;
    border: 1px solid var(--otc-border);
    border-radius: var(--otc-button-radius);
    color: var(--otc-text);
    background: var(--otc-surface);
    cursor: pointer;
}

html body .otc-calendar-picker-row:last-child {
    margin-bottom: 0;
}

html body .otc-calendar-picker-row:hover {
    border-color: var(--otc-border-strong);
    background: var(--otc-surface-subtle);
}

html body .otc-calendar-picker-row.is-selected {
    border-color: var(--otc-primary);
    background: var(--otc-primary-soft);
    box-shadow: var(--otc-selection-indicator);
}

html body .otc-calendar-picker-row:focus-within {
    outline: 2px solid var(--otc-primary);
    outline-offset: 0;
}

html body .otc-calendar-picker-row > input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--otc-primary);
    cursor: inherit;
}

html body .otc-calendar-picker-main,
html body .otc-calendar-picker-metadata {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

html body .otc-calendar-picker-name {
    color: var(--otc-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

html body .otc-calendar-picker-description {
    margin: 0;
    color: var(--otc-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
}

html body .otc-calendar-picker-metadata {
    color: var(--otc-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

html body .otc-calendar-picker-footer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-top: 10px;
    border-top: 1px solid var(--otc-border);
    background: var(--otc-surface);
}

html body .otc-calendar-picker-selection {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    flex: 1 1 220px;
    min-width: 0;
    color: var(--otc-muted);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

html body .otc-calendar-picker-selection-hint {
    flex-basis: 100%;
}

html body .otc-calendar-picker-current-badge {
    align-self: flex-start;
    padding: 1px 5px;
    border-radius: var(--otc-button-radius);
    color: var(--otc-primary);
    background: var(--otc-primary-soft);
}

html body .otc-calendar-picker-meta-label {
    margin-inline-end: 4px;
}

html body .otc-calendar-picker-empty,
html body .otc-calendar-picker-load-error {
    padding: 8px;
    color: var(--otc-muted);
}

html body .otc-calendar-picker-load-error {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

html body .otc-calendar-picker-selection strong {
    color: var(--otc-ink);
    font-weight: 600;
}

html body .otc-calendar-picker-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-inline-start: auto;
}

html body .otc-calendar-picker-trigger-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

html body .otc-calendar-picker-current-value {
    display: block;
    flex: 1 1 8rem;
    min-width: 0;
    color: var(--otc-text);
    font-size: var(--rz-input-font-size);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .otc-calendar-picker-trigger-row > .rz-button {
    flex-shrink: 0;
    max-width: 100%;
    height: auto;
    min-height: var(--otc-button-height);
}

html body .otc-calendar-picker-trigger-row > .rz-button .rz-button-box {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

html body .otc-calendar-picker-trigger-row > .rz-button .rz-button-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    html body .otc-calendar-picker-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .otc-calendar-picker-row {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 6px 8px;
        padding: 9px 8px;
    }

    html body .otc-calendar-picker-metadata {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    html body .otc-calendar-picker-footer {
        align-items: flex-start;
    }

    html body .otc-calendar-picker-selection {
        flex-basis: 100%;
    }
}

@media (max-height: 540px) {
    html body .otc-calendar-picker-dialog > .rz-dialog-content {
        display: block;
        overflow: auto;
    }

    html body .otc-calendar-picker-list {
        flex: none;
        overflow: visible;
    }
}

/* Daily price entry: the same surfaces, controls and status tokens as the workspace. */
html body .otc-commodity-price-filterbar,
html body .otc-commodity-price-entry-toolbar {
    border-bottom: 1px solid var(--otc-border-subtle);
}

html body :is(.otc-commodity-price-entry-guide, .otc-commodity-price-filter-hint,
    .otc-commodity-price-sheet-note, .otc-commodity-price-progress,
    .otc-commodity-price-previous-date, .otc-commodity-price-entry-unit, .otc-commodity-price-unit-label,
    .otc-commodity-price-mobile-label) {
    color: var(--otc-muted);
    font-size: 11px;
    line-height: 1.4;
}

html body .otc-commodity-price-search-field > .rzi,
html body .otc-commodity-price-entry-guide > .rzi,
html body .otc-commodity-price-sheet-note > .rzi {
    color: var(--otc-muted);
    font-size: 14px;
}

html body .otc-commodity-price-progress progress {
    appearance: none;
    border: 0;
    border-radius: 3px;
    color: var(--otc-primary);
    background: var(--otc-surface-muted);
    accent-color: var(--otc-primary);
}

html body .otc-commodity-price-progress progress::-webkit-progress-bar {
    border-radius: 3px;
    background: var(--otc-surface-muted);
}

html body .otc-commodity-price-progress progress::-webkit-progress-value {
    border-radius: 3px;
    background: var(--otc-primary);
}

html body .otc-commodity-price-progress progress::-moz-progress-bar {
    border-radius: 3px;
    background: var(--otc-primary);
}

html body .otc-commodity-price-table,
html body .otc-commodity-price-calculated-table {
    color: var(--otc-text);
    font-size: 12px;
    line-height: 18px;
}

html body .otc-commodity-price-table th,
html body .otc-commodity-price-table td,
html body .otc-commodity-price-calculated-table th,
html body .otc-commodity-price-calculated-table td {
    border: 0;
    border-bottom: 1px solid var(--otc-border-subtle);
}

html body .otc-commodity-price-table thead th,
html body .otc-commodity-price-calculated-table thead th {
    color: var(--otc-muted);
    background: var(--otc-surface-subtle);
    font-size: 11px;
    font-weight: 500;
    line-height: 24px;
}

html body .otc-commodity-price-data-row > *,
html body .otc-commodity-price-calculated-table tbody tr > * {
    background: var(--otc-surface);
}

html body .otc-commodity-price-data-row:hover > *,
html body .otc-commodity-price-calculated-table tbody tr:hover > * {
    background: var(--otc-surface-subtle);
}

html body .otc-commodity-price-data-row.is-created > *,
html body .otc-commodity-price-calculated-table tbody tr.is-created > * {
    border-bottom-color: color-mix(in srgb, var(--otc-success-text) 35%, var(--otc-border-subtle));
    background: color-mix(in srgb, var(--otc-success-text) 6%, var(--otc-surface));
    box-shadow: inset 0 1px color-mix(in srgb, var(--otc-success-text) 35%, var(--otc-border-subtle));
}

html body .otc-commodity-price-unit-label {
    background: var(--otc-surface);
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

html body .otc-commodity-price-field:has(.rz-numeric.rz-state-disabled) .otc-commodity-price-unit-label {
    background: var(--otc-surface-subtle);
}

html body .otc-commodity-price-field .rz-numeric:focus-within:not(.rz-state-disabled) {
    border: 1px solid var(--otc-primary);
    outline: none;
    box-shadow: none;
}

html body .otc-commodity-price-entry-editor .rz-numeric input {
    color: var(--otc-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

html body .otc-commodity-price-entry-unit,
html body .otc-commodity-price-previous-value strong,
html body .otc-commodity-price-previous-date,
html body .otc-commodity-price-calculated-value:not(.is-error) strong {
    white-space: nowrap;
}

html body .otc-commodity-price-previous-value strong,
html body .otc-commodity-price-calculated-value strong {
    color: inherit;
    font-weight: 500;
}

html body .otc-commodity-price-entry-heading > .rzi,
html body .otc-commodity-price-calculated-value > .rzi {
    color: var(--otc-muted);
    font-size: 13px;
}

html body .otc-commodity-price-status-icon {
    appearance: none;
    border: 0;
    border-radius: var(--otc-button-radius);
    color: var(--otc-badge-color, var(--otc-muted));
    background: var(--otc-badge-background, var(--otc-surface-subtle));
    box-shadow: none;
}

html body .otc-commodity-price-status-icon:hover {
    background: color-mix(in srgb, var(--otc-badge-color, var(--otc-muted)) 18%, var(--otc-surface));
}

html body .otc-commodity-price-status-icon:focus-visible {
    outline: 2px solid var(--otc-primary);
    outline-offset: 2px;
}

html body .otc-commodity-price-calculated-value.is-error {
    color: var(--otc-danger-text);
    white-space: normal;
    overflow-wrap: anywhere;
}

html body .otc-commodity-price-group-row th {
    color: var(--otc-muted);
    background: var(--otc-surface-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 22px;
}

html body .otc-commodity-price-empty {
    color: var(--otc-muted);
    background: var(--otc-surface);
}

html body .otc-commodity-price-reference-link {
    border: 0;
    color: var(--rz-link-color);
    background: transparent;
    font: inherit;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
}

html body .otc-commodity-price-reference-link:hover,
html body .otc-commodity-price-reference-link:focus-visible {
    color: var(--rz-link-hover-color);
    text-decoration: underline;
}

html body .otc-commodity-price-reference-link:disabled {
    color: var(--otc-muted);
    cursor: default;
}

html body .otc-commodity-price-reference-link:focus-visible {
    outline: 2px solid var(--otc-primary);
    outline-offset: 2px;
}

html body .otc-commodity-price-calculated-section > summary,
html body .otc-commodity-price-settings > summary {
    color: var(--otc-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

html body .otc-commodity-price-calculated-section > summary > span {
    color: var(--otc-muted);
    font-size: 11px;
    font-weight: 400;
}

html body .otc-commodity-price-calculated-section > summary::marker,
html body .otc-commodity-price-settings > summary::marker {
    color: var(--otc-muted);
}

html body .otc-commodity-price-calculated-section > summary:hover,
html body .otc-commodity-price-settings > summary:hover {
    background: var(--otc-surface-subtle);
}

html body .otc-commodity-price-calculated-section > summary:focus-visible,
html body .otc-commodity-price-settings > summary:focus-visible {
    outline: 2px solid var(--otc-primary);
    outline-offset: -2px;
}

html body .otc-commodity-price-calculated-section[open] > summary,
html body .otc-commodity-price-settings[open] > summary {
    border-bottom: 1px solid var(--otc-border-subtle);
}

html body .otc-commodity-work-calendar {
    border: 1px solid var(--otc-border);
    border-radius: var(--otc-card-radius);
    background: var(--otc-surface-subtle);
}

html body .otc-commodity-work-calendar span {
    color: var(--otc-muted);
    font-size: 12px;
}

html body .otc-commodity-work-calendar-missing {
    border-color: var(--otc-amber-text);
    background: var(--otc-warning-surface);
}

html body .otc-commodity-compact-checkbox {
    min-height: var(--otc-control-height);
    gap: 0.375rem;
}

/*
 * Ultra-dense desktop workstation profile.
 *
 * Desktop financial workflows favor information density over touch target
 * size. Mobile keeps the larger metrics declared below this block.
 */
@media (min-width: 769px) {
    html body {
        --otc-control-height: 1.5rem;
        --otc-button-height: 25px;
        --otc-button-font-size: 12px;
        --otc-button-icon-size: 14px;
        --otc-brand-logo-size: 2rem;
        --otc-topbar-height: 2.75rem;
        --otc-card-radius: 0.25rem;
        --otc-shadow: var(--otc-shadow-surface);

        --rz-body-font-size: 0.75rem;
        --rz-body-line-height: 1.25;
        --rz-icon-size: 0.875rem;
        --rz-border-radius: 0.1875rem;

        --rz-text-body1-font-size: 0.75rem;
        --rz-text-body1-line-height: 0.9375rem;
        --rz-text-body2-font-size: 0.6875rem;
        --rz-text-body2-line-height: 0.875rem;
        --rz-text-subtitle1-font-size: 0.8125rem;
        --rz-text-subtitle1-line-height: 1rem;
        --rz-text-subtitle1-margin-block-end: 0.25rem;
        --rz-text-subtitle2-font-size: 0.75rem;
        --rz-text-subtitle2-line-height: 0.9375rem;
        --rz-text-subtitle2-margin-block-end: 0.25rem;
        --rz-text-caption-font-size: 0.6875rem;
        --rz-text-caption-margin-block-end: 0.25rem;

        --rz-input-size-md: var(--otc-control-height);
        --rz-input-height: var(--otc-control-height);
        --rz-input-font-size-md: 0.75rem;
        --rz-input-font-size: var(--rz-input-font-size-md);
        --rz-input-padding-block-md: 0.125rem;
        --rz-input-padding-inline-md: 0.375rem;
        --rz-input-padding-block: var(--rz-input-padding-block-md);
        --rz-input-padding-inline: var(--rz-input-padding-inline-md);
        --rz-form-field-margin-block: 0.1875rem 0;
        --rz-form-field-helper-padding: 0 0.125rem;
        --rz-form-field-label-floating-font-size: 0.5625rem;
        --rz-form-field-filled-height-md: 1.75rem;
        --rz-form-field-filled-height: var(--rz-form-field-filled-height-md);
        --rz-form-field-filled-padding-block-md: 0.5rem 0.125rem;
        --rz-form-field-filled-padding-inline-md: 0.375rem;
        --rz-form-field-filled-padding-block: var(--rz-form-field-filled-padding-block-md);
        --rz-form-field-filled-padding-inline: var(--rz-form-field-filled-padding-inline-md);
        --rz-form-field-filled-numeric-padding-block: 0.5625rem 0.125rem;
        --rz-form-field-filled-numeric-padding-inline: 0.375rem 0.875rem;
        --rz-form-field-filled-label-floating-font-size-md: 0.5625rem;
        --rz-form-field-filled-label-floating-top-md: 0.0625rem;
        --rz-dropdown-panel-padding: 0.125rem;
        --rz-dropdown-item-padding: 0.125rem 0.375rem;
        --rz-dropdown-filter-padding: 0.25rem 0;
        --rz-dropdown-trigger-icon-margin-inline: 0 0.25rem;
        --rz-datepicker-trigger-icon-size-md: 0.875rem;
        --rz-datepicker-trigger-icon-size: var(--rz-datepicker-trigger-icon-size-md);
        --rz-datepicker-header-padding-block: 0.125rem;
        --rz-datepicker-header-padding-inline: 0.125rem;
        --rz-datepicker-calendar-item-padding: 0.25rem 0.5rem;
        --rz-datepicker-footer-padding: 0 0.5rem;
        --rz-datepicker-footer-line-height: 2rem;
        --rz-numeric-input-padding-block-md: 0.125rem;
        --rz-numeric-input-padding-inline-md: 0.25rem 0.875rem;
        --rz-numeric-input-padding-block: var(--rz-numeric-input-padding-block-md);
        --rz-numeric-input-padding-inline: var(--rz-numeric-input-padding-inline-md);
        --rz-numeric-button-width-md: 0.6875rem;
        --rz-numeric-button-height-md: 0.625rem;
        --rz-numeric-button-offset-md: 1px;

        --rz-button-size-md: var(--otc-button-height);
        --rz-button-size-sm: var(--otc-button-height);
        --rz-checkbox-width: 0.875rem;
        --rz-checkbox-height: 0.875rem;
        --rz-checkbox-icon-width: 0.625rem;
        --rz-checkbox-icon-height: 0.625rem;
        --rz-checkbox-icon-font-size: 0.625rem;
        --rz-checkbox-label-margin-inline: 0.25rem 0.5rem;
        --rz-radio-width: 0.875rem;
        --rz-radio-height: 0.875rem;
        --rz-radio-icon-width: 0.375rem;
        --rz-radio-icon-height: 0.375rem;
        --rz-radio-label-margin-inline: 0.25rem 0.5rem;
        --rz-gap: 0.25rem;
        --rz-row-gap: 0.25rem;

        --rz-card-padding: 0.375rem;
        --rz-card-border-radius: var(--otc-card-radius);
        --rz-card-shadow: var(--otc-shadow-surface);
        --rz-fieldset-padding: 0.25rem 0.375rem 0.375rem;
        --rz-fieldset-border-radius: var(--rz-border-radius);
        --rz-fieldset-legend-margin-inline: 0.375rem 0;
        --rz-fieldset-legend-padding-inline: 0.25rem;
        --rz-dialog-title-padding-block: 0.25rem;
        --rz-dialog-title-padding-inline: 0.5rem;
        --rz-dialog-title-font-size: 0.8125rem;
        --rz-dialog-title-line-height: 1.125rem;
        --rz-dialog-content-padding: 0.5rem;
        --rz-dialog-border-radius: var(--otc-card-radius);
        --rz-tabs-padding: 0.375rem;
        --rz-tabs-tab-padding-block: 0.1875rem;
        --rz-tabs-tab-padding-inline: 0.5rem;
        --rz-tabs-tab-font-size: 0.75rem;
        --rz-menu-item-padding-block: 0.1875rem;
        --rz-menu-item-padding-inline: 0.1875rem 0.5rem;
        --rz-menu-top-item-padding-block: 0.1875rem;
        --rz-menu-top-item-padding-inline: 0.375rem;
        --rz-panel-padding: 0.25rem;
        --rz-panel-menu-item-padding-block: 0.25rem;
        --rz-panel-menu-item-padding-inline: 0.5rem;
        --rz-profile-menu-padding-block: 0.25rem;
        --rz-profile-menu-padding-inline: 0.375rem;
        --rz-profile-menu-item-icon-margin-inline: 0 0.25rem;
        --rz-tooltip-font-size: 0.6875rem;
        --rz-tooltip-padding: 0.1875rem 0.375rem;
        --rz-alert-margin: 0.25rem 0;
        --rz-alert-padding: 0.25rem 0.375rem;
        --rz-alert-gap: 0.25rem;

        --rz-grid-cell-padding: 0.1875rem 0.375rem;
        --rz-grid-cell-font-size: 0.75rem;
        --rz-grid-cell-line-height: 1rem;
        --rz-grid-header-cell-padding: 0.25rem 0;
        --rz-grid-header-padding: 0.25rem 0.375rem;
        --rz-grid-header-font-size: 0.6875rem;
        --rz-grid-header-line-height: 0.875rem;
        --rz-grid-filter-padding: 0.125rem 0.375rem;
        --rz-grid-filter-gap: 0.25rem;
        --rz-grid-filter-buttons-padding: 0 0.375rem 0.375rem;
        --rz-grid-group-header-padding: 0.1875rem;
        --rz-grid-group-header-gap: 0.1875rem;
        --rz-pager-padding: 0.1875rem;
        --rz-pager-gap: 0.125rem;
        --rz-pager-summary-padding: 0.25rem;
        --rz-pager-numeric-button-min-width: var(--otc-control-height);
        --rz-pager-numeric-button-padding: 0.125rem;
        --rz-pager-numeric-button-selected-padding: 0.125rem;
    }

    html body .otc-workspace-table tbody tr:nth-child(even) {
        background: var(--otc-surface-subtle);
    }

    html body .otc-topbar {
        gap: 1.125rem;
        padding-inline: 0.875rem;
        box-shadow: none;
    }

    html body .otc-brand {
        gap: 0.5rem;
    }

    html body .otc-brand-logo {
        border-radius: 0.25rem;
        box-shadow: 0 1px 2px rgba(15, 36, 55, 0.2);
    }

    html body .otc-brand-title {
        font-size: 1.0625rem;
    }

    html body .otc-brand-subtitle {
        font-size: 0.625rem;
    }

    html body .otc-nav > .rz-menu > .rz-navigation-item
        > .rz-navigation-item-wrapper > .rz-navigation-item-link {
        padding-block: 0;
        padding-inline: 0.625rem;
        border-radius: 0;
        font-size: 0.75rem;
    }

    html body .rz-fabmenu-items .rz-button.rz-button-lg {
        font-size: 0.6875rem;
    }

    html body .otc-profile {
        gap: 0.25rem;
    }

    html body .otc-avatar {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
        box-shadow: 0 1px 2px rgba(15, 36, 55, 0.22);
    }

    html body .rz-body.app-body > .page-container {
        padding: 0.5rem;
    }

    html body .otc-page {
        width: min(100%, 100rem);
    }

    html body .otc-page.otc-positions-page {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    html body h1 {
        margin-bottom: 0.25rem;
        font-size: 1.5rem;
        line-height: 1.15;
    }

    html body h2 {
        font-size: 1.125rem;
    }

    html body h3 {
        font-size: 1rem;
    }

    html body h4,
    html body h5,
    html body h6 {
        font-size: 0.8125rem;
    }

    html body p {
        margin-bottom: 0.5rem;
    }

    html body hr {
        margin-block: 0.5rem;
    }

    html body .otc-page-header {
        gap: 0.375rem;
        margin-bottom: 0.375rem;
    }

html body .otc-subtitle {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    html body .rz-pager-element {
        min-width: var(--otc-control-height);
        min-height: var(--otc-control-height);
        padding: 0.125rem 0.375rem;
        font-size: 0.75rem;
        line-height: 0.9375rem;
    }

    html body .rz-alert.rz-alert-md {
        --rz-alert-margin: 0.25rem 0;
        --rz-alert-padding: 0.25rem 0.375rem;
        --rz-alert-gap: 0.25rem;
        --rz-alert-message-margin: 0;
    }

    html body .rz-form-field .rz-form-field-label {
        font-size: var(--rz-input-font-size);
        line-height: 0.75rem;
    }

    html body .rz-datepicker:has(.rz-datepicker-trigger) > .rz-inputtext {
        padding-inline-end: calc(0.375rem + var(--rz-datepicker-trigger-icon-size));
    }

    html body .rz-switch {
        width: 2rem;
        min-width: 2rem;
        height: 1.125rem;
    }

    html body .rz-switch .rz-switch-circle::before {
        width: 0.875rem;
        height: 0.875rem;
        inset-inline-start: 0.125rem;
        margin-block-start: -0.4375rem;
    }

    html body .rz-switch.rz-switch-checked .rz-switch-circle::before {
        transform: translateX(0.875rem);
    }

    html[dir="rtl"] body .rz-switch.rz-switch-checked .rz-switch-circle::before {
        transform: translateX(-0.875rem);
    }

    html body .rz-data-grid.rz-density-compact {
        --rz-grid-cell-line-height: 0.9375rem;
        --rz-grid-cell-padding: 0.125rem 0.3125rem;
        --rz-grid-header-cell-padding: 0.125rem 0;
        --rz-grid-header-padding: 0.1875rem 0.375rem;
        --rz-grid-header-title-padding-inline: 0.25rem 0;
        --rz-grid-filter-padding: 0.125rem 0.3125rem;
        --rz-grid-group-header-padding: 0.125rem;
        --rz-grid-group-header-gap: 0.125rem;
        --rz-grid-group-header-item-padding-block: 0.0625rem;
        --rz-grid-group-header-item-padding-inline: 0.25rem 0.125rem;
    }

    html body .rz-pager.rz-density-compact {
        --rz-pager-padding: 0.125rem;
        --rz-pager-gap: 0.125rem;
        --rz-pager-summary-padding: 0.25rem;
    }

html body .rz-card.otc-positions-toolbar-card {
        padding: 0.375rem 0.5rem;
        border-radius: var(--otc-card-radius);
    }

    html body .rz-card.otc-positions-grid-card,
    html body .rz-card.otc-positions-summary-card,
    html body .rz-card.otc-position-entry-card {
        padding: 0.375rem;
        border-radius: var(--otc-card-radius);
    }

    html body .rz-card.otc-positions-metrics-card {
        padding-block: 0.25rem;
    }

    html body .otc-positions-layout,
    html body .otc-positions-overview,
    html body .otc-positions-toolbar-card > .rz-stack,
    html body .otc-positions-summary-card > .rz-stack {
        gap: 0.25rem !important;
    }

    html body .otc-positions-grid-header,
    html body .otc-positions-pnl-summary {
        margin-bottom: 0.25rem;
    }

    html body .otc-positions-pnl-summary {
        padding: 0.125rem 0;
    }

    html body .otc-positions-pnl-summary-item {
        padding-inline: 0.375rem;
    }

    html body .otc-position-form-title {
        font-size: 0.8125rem;
        line-height: 1rem;
    }

    html body .otc-position-form-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 0.25rem 0.375rem;
    }

    html body .otc-position-entry-card form > .rz-stack,
    html body .otc-positions-grid-card form > .rz-stack {
        gap: 0.25rem !important;
    }

    html body .otc-position-radio-list {
        min-height: var(--otc-control-height);
        padding-inline: 0.375rem;
    }

    html body .otc-position-switch-field {
        min-height: var(--otc-control-height);
        gap: 0.25rem;
        padding-inline: 0.375rem;
    }

    html body .otc-position-switch-field > .rz-switch {
        flex-basis: 2rem;
        width: 2rem;
    }

    html body .otc-field-with-help {
        gap: 0.1875rem;
    }

    html body .otc-field-help-icon {
        font-size: 0.8125rem;
    }

    html body .otc-actions {
        gap: 0.25rem;
        margin-top: 0.375rem;
    }

    html body .otc-md-filter-panel,
    html body .otc-system-calendar-filters,
    html body .otc-system-calendar-summary,
    html body .otc-md-filter-grid,
    html body .otc-settings-grid,
    html body .otc-commodity-future-definition-fields,
    html body .otc-admin-split {
        gap: 0.375rem;
    }

    html body .otc-md-actions,
    html body .otc-md-inline-query,
    html body .otc-definition-filter-grid,
    html body .otc-definition-two-cols,
    html body .otc-definition-four-cols,
    html body .otc-definition-scan-row {
        gap: 0.25rem;
    }

    html body .otc-md-inline-result,
    html body .otc-md-summary-item,
    html body .otc-md-detail-panel,
    html body .otc-md-quality-panel,
    html body .otc-admin-editor,
    html body .otc-settings-preview-item {
        padding: 0.375rem;
        border-radius: var(--otc-card-radius);
    }

    html body .otc-commodity-prices-page > .rz-stack,
    html body .otc-commodity-prices-page .rz-card.otc-card > .rz-stack {
        gap: 0.375rem !important;
    }

    html body .otc-commodity-compact-checkbox {
        min-height: var(--otc-control-height);
        gap: 0.25rem;
    }
}

/* Keep the 40px appearance buttons inside the header on touch displays. */
@media (min-width: 769px) and (pointer: coarse) {
    html body {
        --otc-topbar-height: 3rem;
    }
}

@media (max-width: 768px) {
    html body .otc-commodity-price-data-row {
        border-bottom: 1px solid var(--otc-border);
    }

    html body .otc-commodity-price-data-row > * {
        border-bottom: 0;
    }

    html body .otc-commodity-price-reference-link {
        white-space: normal;
    }

    html body .otc-page-header h1,
    html body .otc-workspace-header h1,
    html body .otc-account-surface h1 {
        font-size: 18px;
    }

    html body {
        --otc-control-height: 2.375rem;
        --otc-button-height: 40px;
        --rz-input-size-md: var(--otc-control-height);
        --rz-input-height: var(--otc-control-height);
        --rz-button-size-md: var(--otc-button-height);
    }

    html body .rz-body.app-body > .page-container {
        padding: 0.75rem;
    }

    html body .otc-position-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (pointer: coarse) {
    html body {
        --otc-button-height: 40px;
        --otc-button-icon-size: 16px;
    }
}

@media (max-width: 600px) {
    html body .otc-entry-heading-title {
        font-size: 16px;
    }
}

/* Portfolio classification uses the same optional editor in personal and organization workflows. */
html body .portfolio-classification-details {
    padding: 0.5rem 0;
    max-width: 64rem;
}

html body .portfolio-classification-details summary {
    cursor: pointer;
    color: var(--otc-primary);
    width: fit-content;
    font-weight: 600;
}

html body .portfolio-classification-details[open] summary { margin-bottom: 0.75rem; }

html body .portfolio-details-grid,
html body .portfolio-classification-fields,
html body .wizard-classification-fields {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(14rem, 1fr);
    gap: 0.75rem;
    align-items: start;
}

html body .portfolio-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .portfolio-classification-fields { grid-column: 1 / -1; }
html body .portfolio-classification-fields > h3,
html body .portfolio-classification-fields > .portfolio-classification-help,
html body .portfolio-classification-fields > .portfolio-classification-warning { grid-column: 1 / -1; }
html body .portfolio-classification-fields > h3 { margin: 0.25rem 0 0; font-size: 0.875rem; }
html body .portfolio-details-grid > *,
html body .portfolio-classification-fields > *,
html body .wizard-classification-fields > * { min-width: 0; }

html body .portfolio-classification-fields .rz-form-field,
html body .portfolio-details-grid .rz-form-field { width: 100%; }

html body .portfolio-classification-help {
    margin: 0.5rem 0;
    color: var(--otc-muted);
    font-size: 0.8rem;
}

html body .portfolio-classification-warning {
    display: flex;
    align-items: start;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    margin: 0.5rem 0;
    border-inline-start: 2px solid var(--otc-primary);
    border-radius: var(--otc-button-radius);
    color: var(--otc-info-text);
    background: var(--otc-info-surface);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

html body .portfolio-classification-warning .rzi { flex-shrink: 0; font-size: 1rem; }

html body .portfolio-classification-summary,
html body .wizard-classification-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    color: var(--otc-muted);
    font-size: 0.75rem;
    margin-top: 0.3rem;
    overflow-wrap: anywhere;
}

html body .wizard-classification-fields { grid-template-columns: repeat(2, minmax(14rem, 1fr)); }
html body .wizard-node-classification {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
    gap: 0.5rem;
    min-width: 0;
    margin-top: 0.25rem;
}
html body .wizard-node-classification > .rz-numeric,
html body .wizard-node-classification > .rz-dropdown { width: 100%; min-width: 0; }
html body .wizard-tree-node > .wizard-classification-summary { grid-column: 1 / -1; grid-row: 2; }
html body .wizard-tree-node > .wizard-tree-type { grid-column: -2 / -1; grid-row: 1; }
html body .wizard-campaign-row { grid-template-columns: minmax(0, 1fr) minmax(7rem, 10rem) auto; }
html body .wizard-campaign-row > .rz-numeric { width: 100%; min-width: 0; }

@media (max-width: 640px) {
    html body .portfolio-details-grid,
    html body .portfolio-classification-fields,
    html body .wizard-classification-fields,
    html body .wizard-node-classification { grid-template-columns: minmax(0, 1fr); }
}

/* Compact portfolio row editing and the shared product-family picker. */
html body .portfolio-row-actions {
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.25rem;
}

html body .portfolio-row-actions .rz-button { flex: 0 0 auto; }
html body .portfolio-row-editor { background: var(--otc-primary-soft); }
html body .portfolio-row-editor > td:first-child { box-shadow: var(--otc-selection-indicator); }
html body .portfolio-row-editor > td { vertical-align: top; }
html body .portfolio-cell-input,
html body .portfolio-row-editor .rz-form-field { width: 100%; min-width: 0; }
html body .portfolio-inline-warning { margin: 0; }

html body .otc-product-tree-selector { min-width: 0; width: 100%; }
html body .otc-product-tree-selector .otc-dropdown-tree-selector { position: relative; }
html body .otc-product-tree-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: var(--rz-input-height, var(--otc-control-height));
    padding: 0.2rem 3.4rem 0.2rem 0.5rem;
    border: 1px solid var(--otc-border);
    border-radius: var(--otc-button-radius);
    background: var(--otc-surface);
    color: var(--otc-ink);
    font: inherit;
    text-align: start;
}
html body .otc-product-tree-trigger:disabled { opacity: 0.65; cursor: not-allowed; }
html body .otc-product-tree-value,
html body .otc-product-tree-placeholder {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
html body .otc-product-tree-placeholder { color: var(--otc-muted); }
html body .otc-product-tree-clear {
    position: absolute;
    inset-inline-end: 1.7rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 0;
    border-radius: var(--otc-button-radius);
    color: var(--otc-muted);
    background: transparent;
    cursor: pointer;
}
html body .otc-product-tree-clear:hover,
html body .otc-product-tree-clear:focus-visible { background: var(--otc-primary-soft); color: var(--otc-primary); }
html body .otc-product-tree-clear:disabled { cursor: not-allowed; opacity: 0.65; }
html body .otc-product-tree-clear .rzi { font-size: 1rem; }
html body .otc-product-tree-popup {
    width: min(30rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: 0;
    color: var(--otc-ink);
    background: var(--otc-surface);
}
html body .otc-product-tree-family { font-weight: 600; color: var(--otc-muted); }
html body .otc-product-tree-leaf {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding-block: 0.1rem;
    color: var(--otc-ink);
    cursor: pointer;
}
html body .otc-product-tree-leaf > span { white-space: normal; overflow-wrap: anywhere; }
html body .otc-product-tree-inactive { color: var(--otc-muted); font-size: 0.75rem; }
html body .otc-product-tree-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.4rem 0.5rem;
    border-top: 1px solid var(--otc-border);
    background: var(--otc-surface-subtle);
}

@media (max-width: 640px) {
    html body .portfolio-row-editor .portfolio-cell-input { min-width: 0; }
    html body .portfolio-inline-warning td { display: block; }
    html body .portfolio-inline-warning td::before { display: none; }
}