/* ============================================================================
   OPEN SANS – LOCALES LOADING (WOFF2, FONT-DISPLAY: OPTIONAL)
   ========================================================================== */

/* Stable brand lettering uses the bundled original, independent of local fonts. */
@font-face {
  font-family: 'SKS Logo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

/* Locally hosted Manrope, SIL Open Font License (assets/fonts/manrope-OFL.txt). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600.ttf') format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700.ttf') format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: optional;
  src:
    local('Open Sans Light'),
    local('OpenSans-Light'),
    local('Open Sans 300'),
    url('../fonts/open-sans-v44-latin-300.woff2') format('woff2');
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2212,
    U+2215;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src:
    local('Open Sans'),
    local('Open Sans Regular'),
    local('OpenSans-Regular'),
    url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src:
    local('Open Sans Medium'),
    local('OpenSans-Medium'),
    local('Open Sans 500'),
    url('../fonts/open-sans-v44-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src:
    local('Open Sans Bold'),
    local('OpenSans-Bold'),
    local('Open Sans 700'),
    url('../fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

/* ============================================================================
   ROOT VARIABLES / THEME BASIS
   ========================================================================== */

:root {
  --sks-chart-model-light: #94a3b8;
  --sks-chart-orange: #ea580c;
  --sks-chart-purple: #7c3aed;
  --sks-chart-teal: #0d9488;
  --sks-chart-pink: #db2777;
  --sks-chart-series-1: var(--sks-chart-primary);
  --sks-chart-series-2: var(--sks-chart-success);
  --sks-chart-series-3: var(--sks-chart-purple);
  --sks-chart-series-4: var(--sks-chart-warning);
  --sks-chart-series-5: var(--sks-chart-danger);
  --sks-chart-series-6: var(--sks-chart-info);
  --sks-chart-series-7: var(--sks-chart-orange);
  --sks-chart-series-8: var(--sks-chart-teal);
  --sks-chart-series-9: var(--sks-chart-pink);
  --sks-chart-series-10: var(--sks-chart-secondary);
  --sks-control-shadow: none;
  --sks-font-numeric: 'Manrope', 'Open Sans', sans-serif;
  color-scheme: light dark;

  --control-h: calc(2.5rem + 2px);
  --sks-ci-red: #e40613;
  --sks-display-red: #f20b1d;
  --sks-ci-red-rgb: 228, 6, 19;
  --sks-ci-black: #000000;
  --sks-ci-white: #ffffff;
  --sks-accent: var(--sks-ci-red);
  --sks-accent-soft: rgba(var(--sks-ci-red-rgb), .14);
  --sks-accent-border: rgba(var(--sks-ci-red-rgb), .34);
  --sks-radius: .375rem;
  --sks-radius-sm: .375rem;
  --sks-radius-lg: .5rem;
  --sks-radius-pill: 999px;
  --bs-border-radius: var(--sks-radius-sm);
  --bs-border-radius-sm: var(--sks-radius-sm);
  --bs-border-radius-lg: var(--sks-radius);
  --bs-border-radius-xl: var(--sks-radius-lg);
  --bs-border-radius-xxl: var(--sks-radius-lg);
  --sks-metric-icon-overlay: rgba(255, 255, 255, .16);
  --sks-metric-surface-shade: rgba(0, 0, 0, .12);
  --sks-metric-value-size: clamp(2.75rem, calc(1.625rem + 3.3vw), 4.5rem);
  --sks-space-1: .25rem;
  --sks-space-2: .5rem;
  --sks-space-3: .75rem;
  --sks-space-4: 1rem;
  --sks-space-5: 1.25rem;
  --sks-space-6: 1.5rem;
  --sks-inline-gap-sm: .4rem;
  --sks-control-icon: 2.3rem;
  --sks-switch-w: 1.9rem;
  --sks-switch-h: 1rem;
  --sks-switch-knob: .68rem;
  --sks-mini-switch-w: var(--sks-switch-w);
  --sks-mini-switch-h: var(--sks-switch-h);
  --sks-mini-switch-knob: var(--sks-switch-knob);
  --sks-icon-col: 1.35rem;
  --sks-font-2xs: .62rem;
  --sks-font-xs: .68rem;
  --sks-font-sm: .72rem;
  --sks-font-compact: .76rem;
  --sks-font-md: .78rem;
  --sks-font-ui-sm: .8rem;
  --sks-font-table: .82rem;
  --sks-font-ui-md: .84rem;
  --sks-font-meta: .875rem;
  --sks-font-body-sm: .9rem;
  --sks-font-base: .95rem;
  --sks-font-title-sm: var(--sks-font-base);
  --sks-font-lg: 1.15rem;
  --sks-font-heading-md: 1.25rem;
  --sks-font-xl: 1.5rem;
  --sks-card-body-padding: 1.25rem;
  --sks-card-header-padding: .875rem 1.25rem;
  --sks-card-footer-padding: .875rem 1.25rem;
  --sks-card-gap: .75rem;
  --sks-card-section-gap: 1rem;
  --sks-card-row-padding: .625rem .75rem;
  --sks-card-title-size: 1.125rem;
  --sks-card-text-size: .9375rem;
  --sks-card-meta-size: .875rem;
  --sks-card-label-size: .8125rem;
  --sks-card-line-height: 1.45;
  --sks-empty-state-min-h: 7.5rem;
  --sks-empty-state-icon: 4rem;
  /* Lists grow with their actual content. Empty and short result sets must not
     push the application footer below the viewport. */
  --sks-module-list-min-h: 0;
  --sks-module-header-pt: var(--sks-space-2);
  --sks-infinite-sentinel-min-h: 2.25rem;
  --sks-chip-h: 1.35rem;
  --sks-chip-min-w: 2.3rem;
  --sks-chip-max-w: 5.8rem;
  --sks-swatch-size: 1rem;
  --sks-calendar-week-day-min-h: 12.5rem;
  --sks-feature-value-col: 4.25rem;
  --sks-feature-value-col-sm: 3.25rem;
  --sks-feature-note-col: minmax(4.75rem, 8rem);
  --sks-meter-h: .38rem;
  --sks-progress-h-md: .5rem;
  --sks-signature-h: 9.375rem;
  --sks-alert-dot-size: .55rem;
  --sks-required-mark-min-w: .85rem;
  --sks-input-addon-min-w: 2.6rem;
  --sks-line-accent-h: 2px;
  --sks-busy-bar-h: 3px;
  --sks-busy-track-bg: rgba(var(--bs-danger-rgb), .18);
  --sks-busy-bar-bg: linear-gradient(90deg, rgba(var(--bs-danger-rgb), 0), rgba(var(--bs-danger-rgb), .92), rgba(var(--bs-primary-rgb), .85));
  --sks-baseline-shift-xs: .05rem;
  --sks-backdrop-blur-sm: 6px;
  --sks-backdrop-blur-md: 8px;
  --sks-backdrop-blur-lg: 10px;
  --sks-z-base-overlay: 10;
  --sks-z-loading: 1085;
  --sks-z-top-loading: 1090;
  --sks-z-toast: 3100;
  --sks-z-modal-backdrop: 2990;
  --sks-z-modal: 3000;
  --sks-z-popover: 3010;
  --sks-z-modal-stacked-backdrop: 3010;
  --sks-z-modal-stacked: 3020;
  --sks-z-lightbox: 4000;
  --sks-z-lightbox-control: 4001;
  --sks-z-lightbox-ui: 4002;
  --sks-z-lightbox-popover: 4010;
  --sks-z-confirm-lightbox-backdrop: 4040;
  --sks-z-confirm-lightbox: 4050;
  --sks-focus-ring: 0 0 0 .2rem rgba(var(--sks-ci-red-rgb), .18);
  --sks-motion: 160ms ease;
  --sks-control-h: var(--control-h);
  --sks-radius-control: var(--sks-radius-sm);
  --sks-radius-panel: var(--sks-radius);
  --sks-radius-overlay: var(--sks-radius-lg);
  --sks-glass-blur: 24px;
  --sks-action-gap: var(--sks-space-2);
  --sks-toolbar-gap: var(--sks-action-gap);
  --sks-toolbar-row-gap: var(--sks-space-2);
  --sks-card-action-gap: var(--sks-action-gap);
  --sks-card-action-size: var(--control-h);
  --sks-touch-target: 2.75rem;
  --sks-component-transition: var(--sks-motion);
  --sks-layout-max-width: 1760px;
  --sks-login-card-w: 31rem;
  --sks-logo-w: 15.5rem;
  --sks-turnstile-slot-h: 4.625rem;
  --sks-turnstile-widget-h: 4.0625rem;
  --sks-upload-option-min-h: 4.25rem;
  --sks-upload-icon-col: 2rem;
  --sks-upload-icon-size: 1.35rem;
  --sks-dashboard-chart-footer-gap: 5px;
  --sks-dashboard-title-slot-h: 1.5rem;
  --sks-dashboard-circular-chart-inset: 1rem;
  --sks-dashboard-summary-min-h: 2.85rem;
  --sks-dashboard-summary-h: calc(var(--sks-dashboard-summary-min-h) + (var(--sks-space-3) * 2));
  --sks-dashboard-footer-h: calc(var(--sks-control-icon) + var(--sks-space-3) + 1px);
  --sks-dashboard-card-page-min-h: 12.5rem;
  --sks-dashboard-card-visual-min-h: 26rem;
  --sks-dashboard-card-list-min-h: 18rem;
  --sks-dashboard-kpi-visual-h: 11.875rem;
  --sks-dashboard-media-h: 11.25rem;
  --sks-dashboard-media-chrome-offset: 1.125rem;
  --sks-dashboard-number-kpi-size: 5.75rem;
  --sks-dashboard-chart-max-h: 32.5rem;
  --sks-dashboard-stock-max-h: 10.3125rem;
  --sks-dashboard-stock-max-h-sm: 11.5625rem;
  --sks-dashboard-clock-toolbar-min-h: 2.25rem;
  --sks-dashboard-clock-pill-min-h: 2.1rem;
  --sks-dashboard-clock-pill-py: .15rem;
  --sks-dashboard-picker-min-h: 2rem;
  --sks-dashboard-chart-min-w-sm: 18.75rem;
  --sks-dashboard-chart-min-w-md: 26.25rem;
  --sks-dashboard-chart-min-w-lg: 40rem;
  --sks-dashboard-chart-min-w-xl: 53.75rem;
  --sks-chart-h-sm: 10rem;
  --sks-chart-h-md: 13.4375rem;
  --sks-chart-h-lg: 20rem;
  --sks-chart-h-xl: 31.25rem;
  --sks-kpi-visual-h: var(--sks-chart-h-md);
  --sks-kpi-visual-h-sm: var(--sks-chart-h-sm);
  --sks-progress-h-sm: .35rem;
  --sks-quality-card-min-h: 22rem;
  --sks-quality-card-description-min-h: 3.8rem;
  --sks-quality-card-main-offset: 3.15rem;
  --sks-quality-card-main-offset-sm: 4.65rem;
  --sks-quality-card-badges-left: 12.5rem;
  --sks-quality-card-badges-top-sm: 2.75rem;
  --sks-quality-card-line-icon-col-sm: 1.25rem;
  --sks-quality-lightbox-max-h: 76vh;
  --sks-quality-detail-number-size: clamp(1.75rem, 3vw, 2.5rem);
  --sks-quality-detail-stat-min-h: 5rem;
  --sks-quality-detail-text-min-h: 2.75rem;
  --sks-quality-detail-icon-col: 1.5rem;
  --sks-quality-history-icon-size: 2rem;
  --sks-entity-description-min-h: 3.1em;
  --sks-entity-extra-min-h: 2.05rem;
  --sks-module-line-min-h: 1.55em;
  --sks-module-order-min-h: 2.45em;
  --sks-production-note-min-h: 1.9rem;
  --sks-production-quality-drag-col-w: 3.5rem;
  --sks-production-quality-status-col-w: 7rem;
  --sks-production-quality-actions-col-w: 8rem;
  --sks-color-stripe-w: 1.5rem;
  --sks-color-stripe-h: 1.6em;
  --sks-workload-progress-min-w: 12rem;
  --sks-workload-input-w: 11rem;
  --sks-stats-period-label-min-w: 4.5rem;
  --sks-stats-period-type-w: 16rem;
  --sks-stats-grid-min-h: 72rem;
  --sks-stats-grid-min-h-sm: 52rem;
  --sks-toast-layer-min-h: 4.25rem;
  --sks-employee-chart-scroll-h: 18.75rem;
  --sks-employee-year-label-min-w: 5.25rem;
  --sks-color-card-preview-h: 30vh;
  --sks-progress-track: var(--sks-border);
  --sks-media-overlay: rgba(0, 0, 0, .9);
  --sks-media-card-gradient: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .10) 100%);
  --sks-media-control-bg: rgba(255, 255, 255, .13);
  --sks-media-control-hover: rgba(255, 255, 255, .22);
  --sks-media-control-border: rgba(255, 255, 255, .18);
  --sks-media-control-size: 2.75rem;
  --sks-media-nav-size: 4.5rem;
  --sks-media-nav-size-sm: 3.25rem;
  --sks-media-nav-icon-size: 2rem;
  --sks-media-card-min-h: 16.25rem;
  --sks-media-viewport-w: 96vw;
  --sks-media-content-h: 92vh;
  --sks-media-content-max-w: 87.5rem;
  --sks-media-content-max-h: 56.25rem;
  --sks-media-footer-w: 47.5rem;
  --sks-media-error-w: 53.75rem;
  --sks-media-footer-offset: 6rem;
  --sks-media-counter-offset: 5rem;
  --sks-media-footer-offset-sm: 7.5rem;
  --sks-media-counter-offset-sm: 6.25rem;
  --sks-media-panel-bg: rgba(0, 0, 0, .72);
  --sks-media-text: rgba(255, 255, 255, .9);
  --sks-media-text-muted: rgba(255, 255, 255, .72);
  --sks-media-divider: rgba(255, 255, 255, .18);
  --sks-tooltip-bg: var(--sks-surface-overlay);
  --sks-tooltip-color: var(--bs-body-color);
  --sks-semantic-primary-rgb: 24, 93, 159;
  --sks-semantic-secondary-rgb: 95, 111, 126;
  --sks-semantic-success-rgb: 18, 132, 92;
  --sks-semantic-info-rgb: 8, 125, 150;
  --sks-semantic-warning-rgb: 236, 174, 45;
  --sks-semantic-danger-rgb: 196, 24, 37;
  --sks-chart-accent-rgb: var(--sks-semantic-danger-rgb);
  --sks-chart-primary-rgb: var(--sks-semantic-primary-rgb);
  --sks-chart-danger-rgb: var(--sks-semantic-danger-rgb);
  --sks-chart-warning-rgb: var(--sks-semantic-warning-rgb);
  --sks-chart-success-rgb: var(--sks-semantic-success-rgb);
  --sks-chart-info-rgb: var(--sks-semantic-info-rgb);
  --sks-chart-secondary-rgb: var(--sks-semantic-secondary-rgb);
  --sks-pdf-accent-rgb: var(--sks-ci-red-rgb);
  --sks-status-warning-bg: rgba(var(--sks-semantic-warning-rgb), .14);
  --sks-status-warning-border: rgba(var(--sks-semantic-warning-rgb), .38);
  --sks-status-warning-text: #8a5700;
  --sks-status-warning-contrast: #212529;
  --sks-status-info-bg: rgba(var(--sks-semantic-info-rgb), .13);
  --sks-status-info-border: rgba(var(--sks-semantic-info-rgb), .34);
  --sks-status-info-text: #076a80;
  --sks-status-success-bg: rgba(var(--sks-semantic-success-rgb), .13);
  --sks-status-success-border: rgba(var(--sks-semantic-success-rgb), .34);
  --sks-status-success-text: #0f6f4d;
  --sks-status-violet-bg: rgba(139, 92, 246, .16);
  --sks-status-violet-border: rgba(139, 92, 246, .4);
  --sks-status-violet-text: #6d28d9;
  --sks-status-pink-bg: rgba(236, 72, 153, .16);
  --sks-status-pink-border: rgba(236, 72, 153, .4);
  --sks-status-pink-text: #be185d;

  --pin-r: 4;
  --pin-font: 4.5px;

  --mf-switch-w: 1.5rem;
  --mf-switch-h: .9rem;
  --mf-gap: .4rem;
  --mf-gap-y: .35rem;
  --mf-gap-x: .9rem;
}

/* ============================================================================
   THEME: LIGHT MODE
   ========================================================================== */

html:not([data-bs-theme="dark"]) {
  color-scheme: dark;
  --sks-placeholder-color: #80939e;
  --bs-emphasis-color: #f1f6f6;
  --bs-emphasis-color-rgb: 241, 246, 246;
  --sks-metric-on-color: #10202d;
  --sks-metric-on-warning: #182027;
  --sks-semantic-primary-rgb: 139, 197, 255;
  --sks-semantic-secondary-rgb: 165, 178, 190;
  --sks-semantic-success-rgb: 100, 211, 154;
  --sks-semantic-info-rgb: 86, 202, 224;
  --sks-semantic-warning-rgb: 244, 196, 87;
  --sks-semantic-danger-rgb: 255, 143, 135;
  --sks-metric-text-tint: 18%;
  --sks-glass-card: rgba(35, 53, 66, .94);
  --sks-button-bg: rgba(222, 241, 250, .055);
  --sks-button-hover-bg: rgba(222, 241, 250, .12);
  --sks-control-edge: rgba(209, 232, 248, .19);
  --sks-glass-edge: rgba(233, 251, 255, .18);
  --sks-card-edge: rgba(209, 232, 248, .17);
  --sks-card-shadow: inset 0 1px 0 rgba(230, 246, 255, .07), 0 5px 16px rgba(0, 10, 18, .18);
  --sks-card-hover-bg: rgba(40, 60, 74, .97);
  --sks-card-hover-edge: rgba(209, 232, 248, .24);
  --sks-glass-highlight: rgba(218, 239, 255, .035);
  --sks-glass-reflection: rgba(150, 190, 224, .012);
  --sks-glass-toolbar: rgba(225, 244, 248, .045);
  --sks-card-hover-shadow: 0 8px 20px rgba(0, 10, 15, .18);
  --bs-body-bg: #1c2a34;
  --bs-body-color: #f1f6f6;
  --bs-secondary-color: #e1ebee;
  --bs-tertiary-bg: #304653;
  --bs-border-color: rgba(223, 244, 248, .13);
  --bs-primary: rgb(var(--sks-semantic-primary-rgb));
  --bs-primary-rgb: var(--sks-semantic-primary-rgb);
  --bs-secondary: rgb(var(--sks-semantic-secondary-rgb));
  --bs-secondary-rgb: var(--sks-semantic-secondary-rgb);
  --bs-success: rgb(var(--sks-semantic-success-rgb));
  --bs-success-rgb: var(--sks-semantic-success-rgb);
  --bs-info: rgb(var(--sks-semantic-info-rgb));
  --bs-info-rgb: var(--sks-semantic-info-rgb);
  --bs-warning: rgb(var(--sks-semantic-warning-rgb));
  --bs-warning-rgb: var(--sks-semantic-warning-rgb);
  --bs-danger: rgb(var(--sks-semantic-danger-rgb));
  --bs-danger-rgb: var(--sks-semantic-danger-rgb);
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: #b7dcff;
  --bs-link-hover-color-rgb: 183, 220, 255;
  --bs-primary-text-emphasis: #b7dcff;
  --bs-secondary-text-emphasis: #d4dee7;
  --bs-success-text-emphasis: #a9efc8;
  --bs-info-text-emphasis: #b1f0fb;
  --bs-warning-text-emphasis: #ffe0a3;
  --bs-danger-text-emphasis: #ffc5bf;
  --bs-primary-bg-subtle: rgba(var(--sks-semantic-primary-rgb), .18);
  --bs-secondary-bg-subtle: rgba(var(--sks-semantic-secondary-rgb), .14);
  --bs-success-bg-subtle: rgba(var(--sks-semantic-success-rgb), .18);
  --bs-info-bg-subtle: rgba(var(--sks-semantic-info-rgb), .18);
  --bs-warning-bg-subtle: rgba(var(--sks-semantic-warning-rgb), .18);
  --bs-danger-bg-subtle: rgba(var(--sks-semantic-danger-rgb), .17);
  --bs-primary-border-subtle: rgba(var(--sks-semantic-primary-rgb), .38);
  --bs-secondary-border-subtle: rgba(var(--sks-semantic-secondary-rgb), .28);
  --bs-success-border-subtle: rgba(var(--sks-semantic-success-rgb), .38);
  --bs-info-border-subtle: rgba(var(--sks-semantic-info-rgb), .38);
  --bs-warning-border-subtle: rgba(var(--sks-semantic-warning-rgb), .4);
  --bs-danger-border-subtle: rgba(var(--sks-semantic-danger-rgb), .36);
  --sks-semantic-primary-on: #10202d;
  --sks-semantic-secondary-on: #182027;
  --sks-semantic-success-on: #10251b;
  --sks-semantic-danger-on: #351513;
  --sks-semantic-warm-on: #182027;

  --sks-accent: var(--sks-ci-red);
  --sks-accent-soft: rgba(var(--sks-ci-red-rgb), .18);
  --sks-accent-border: rgba(var(--sks-ci-red-rgb), .42);
  --sks-focus-ring: 0 0 0 .2rem rgba(var(--sks-ci-red-rgb), .22);
  --sks-page-bg: radial-gradient(ellipse at 5% 8%, rgba(43, 91, 127, .15), transparent 55%), linear-gradient(135deg, #20333f, #1b2b36 54%, #192630);
  --sks-page-bg-size: auto;
  --sks-surface: #263b49;
  --sks-surface-2: #304653;
  --sks-surface-3: #3a5261;
  --sks-surface-overlay: rgba(32, 49, 62, .99);
  --sks-border: rgba(223, 244, 248, .13);
  --sks-border-strong: rgba(223, 244, 248, .3);
  --sks-text-muted: #e1ebee;
  --sks-primary-text: #8bc5ff;
  --sks-primary-text-rgb: var(--sks-semantic-primary-rgb);
  --sks-primary-text-hover: #b4dcff;
  --sks-danger-text: #ffc5bf;
  --sks-error-text: #ffc5bf;
  --sks-footer-muted: #c2d3d8;
  --sks-hover: rgba(229, 247, 251, .1);
  --sks-active: rgba(var(--sks-ci-red-rgb), .19);
  --sks-shadow-sm: inset 0 1px 0 rgba(241, 252, 255, .16), inset 0 -1px 0 rgba(221, 242, 255, .035), 0 10px 30px rgba(0, 10, 15, .14);
  --sks-shadow-md: inset 0 1px 0 rgba(241, 252, 255, .15), 0 28px 80px rgba(0, 8, 12, .4);
  --sks-progress-track: rgba(230, 248, 253, .14);
  --sks-tooltip-bg: rgba(49, 68, 78, .98);
  --sks-tooltip-color: #ffffff;
  --sks-code-bg: #354b55;
  --sks-code-border: rgba(223, 244, 248, .13);
  --sks-code-color: #f1f6f6;
  --sks-busy-overlay-bg: rgba(33, 37, 41, .72);
  --sks-loading-overlay-bg: rgba(30, 43, 51, .98);
  --sks-switch-off-bg: #374151;
  --sks-switch-off-border: #4b5563;
  --sks-switch-off-hover-bg: #465160;
  --sks-switch-knob-bg: #f8fafc;
  --sks-switch-on-bg: #198754;
  --sks-switch-on-border: #198754;
  --sks-status-warning-bg: rgba(var(--sks-semantic-warning-rgb), .2);
  --sks-status-warning-border: rgba(var(--sks-semantic-warning-rgb), .46);
  --sks-status-warning-text: #ffe0a3;
  --sks-status-warning-contrast: #212529;
  --sks-status-info-bg: rgba(var(--sks-semantic-info-rgb), .19);
  --sks-status-info-border: rgba(var(--sks-semantic-info-rgb), .44);
  --sks-status-info-text: #b1f0fb;
  --sks-status-success-bg: rgba(var(--sks-semantic-success-rgb), .19);
  --sks-status-success-border: rgba(var(--sks-semantic-success-rgb), .44);
  --sks-status-success-text: #a9efc8;
  --sks-status-violet-bg: rgba(139, 92, 246, .22);
  --sks-status-violet-border: rgba(139, 92, 246, .48);
  --sks-status-violet-text: #a78bfa;
  --sks-status-pink-bg: rgba(236, 72, 153, .2);
  --sks-status-pink-border: rgba(236, 72, 153, .46);
  --sks-status-pink-text: #f472b6;

  --sks-bg-page: var(--sks-page-bg);
  --sks-bg-surface: var(--sks-surface);
  --sks-bg-surface-muted: var(--sks-surface-2);
  --sks-bg-surface-raised: var(--sks-surface);
  --sks-bg-overlay: var(--sks-surface-overlay);
  --sks-border-subtle: var(--sks-border);
  --sks-border-emphasis: var(--sks-border-strong);
  --sks-text-default: var(--bs-body-color);
  --sks-text-subtle: var(--sks-text-muted);
  --sks-control-bg: rgba(16, 31, 42, .28);
  --sks-control-muted-bg: rgba(28, 44, 56, .8);
  --sks-control-border: var(--sks-control-edge);
  --sks-control-border-hover: var(--sks-border-strong);
  --sks-control-addon-focus-bg: rgba(134, 197, 255, .12);
  --sks-control-addon-focus-border: rgba(134, 197, 255, .38);
  --sks-control-addon-focus-color: #b4dcff;
  --sks-overlay-bg: var(--sks-surface-overlay);
  --sks-overlay-border: var(--sks-border);
  --sks-overlay-shadow: var(--sks-shadow-md);
  --sks-chart-hover-border: rgba(255,255,255,0.75);
  --sks-chart-segment-border: transparent;
  --sks-chart-text: var(--bs-body-color);
  --sks-chart-grid: rgba(154, 164, 178, .22);
  --sks-chart-grid-soft: rgba(154, 164, 178, .14);
  --sks-chart-grid-zero: rgba(154, 164, 178, .34);
  --sks-chart-bg: #364955;
  --sks-chart-accent: rgb(var(--sks-chart-accent-rgb));
  --sks-chart-accent-border: rgb(var(--sks-chart-accent-rgb));
  --sks-chart-primary: rgb(var(--sks-chart-primary-rgb));
  --sks-chart-primary-soft: rgba(var(--sks-chart-primary-rgb), .2);
  --sks-chart-danger: rgb(var(--sks-chart-danger-rgb));
  --sks-chart-danger-soft: rgba(var(--sks-chart-danger-rgb), .18);
  --sks-chart-danger-border: rgb(var(--sks-chart-danger-rgb));
  --sks-chart-warning: rgb(var(--sks-chart-warning-rgb));
  --sks-chart-warning-soft: rgba(var(--sks-chart-warning-rgb), .18);
  --sks-chart-warning-border: rgb(var(--sks-chart-warning-rgb));
  --sks-chart-success: rgb(var(--sks-chart-success-rgb));
  --sks-chart-success-border: rgb(var(--sks-chart-success-rgb));
  --sks-chart-info: rgb(var(--sks-chart-info-rgb));
  --sks-chart-info-soft: rgba(var(--sks-chart-info-rgb), .18);
  --sks-chart-secondary: rgb(var(--sks-chart-secondary-rgb));
  --sks-chart-secondary-border: rgb(var(--sks-chart-secondary-rgb));
  --sks-pdf-text-rgb: 0, 0, 0;
  --sks-pdf-muted-rgb: 96, 103, 115;
  --sks-pdf-border-rgb: 220, 224, 229;
  --sks-pdf-soft-rgb: 246, 247, 249;
  --sks-pdf-table-head-rgb: 230, 230, 230;

  --card-bg-elevated: var(--sks-glass-card);
  --card-border-elevated: var(--sks-glass-edge);
  --card-shadow-elevated: var(--sks-shadow-sm);
}

/* ============================================================================
   THEME: DARK MODE
   ========================================================================== */

html[data-bs-theme="dark"] {
  --sks-placeholder-color: #8195a2;
  --sks-semantic-primary-rgb: 139, 197, 255;
  --sks-semantic-secondary-rgb: 165, 178, 190;
  --sks-semantic-success-rgb: 100, 211, 154;
  --sks-semantic-info-rgb: 86, 202, 224;
  --sks-semantic-warning-rgb: 244, 196, 87;
  --sks-semantic-danger-rgb: 255, 143, 135;
  --sks-metric-text-tint: 18%;
  --sks-glass-card: rgba(218, 238, 250, .065);
  --sks-button-bg: rgba(222, 241, 250, .055);
  --sks-button-hover-bg: rgba(222, 241, 250, .12);
  --sks-control-edge: rgba(223, 244, 248, .1);
  --sks-glass-edge: rgba(233, 251, 255, .18);
  --sks-card-edge: rgba(233, 251, 255, .085);
  --sks-card-shadow: 0 6px 22px rgba(0, 10, 15, .1);
  --sks-card-hover-bg: rgba(218, 238, 250, .055);
  --sks-card-hover-edge: rgba(233, 251, 255, .14);
  --sks-glass-highlight: rgba(232, 252, 255, .085);
  --sks-glass-reflection: rgba(210, 232, 246, .025);
  --sks-glass-toolbar: rgba(225, 244, 248, .045);
  --sks-card-hover-shadow: 0 8px 20px rgba(0, 10, 15, .18);
  --bs-body-bg: #090f14;
  --bs-body-color: #f1f6f6;
  --bs-secondary-color: #e1ebee;
  --bs-tertiary-bg: #1d2c36;
  --bs-border-color: rgba(223, 244, 248, .13);
  --bs-primary: rgb(var(--sks-semantic-primary-rgb));
  --bs-primary-rgb: var(--sks-semantic-primary-rgb);
  --bs-secondary: rgb(var(--sks-semantic-secondary-rgb));
  --bs-secondary-rgb: var(--sks-semantic-secondary-rgb);
  --bs-success: rgb(var(--sks-semantic-success-rgb));
  --bs-success-rgb: var(--sks-semantic-success-rgb);
  --bs-info: rgb(var(--sks-semantic-info-rgb));
  --bs-info-rgb: var(--sks-semantic-info-rgb);
  --bs-warning: rgb(var(--sks-semantic-warning-rgb));
  --bs-warning-rgb: var(--sks-semantic-warning-rgb);
  --bs-danger: rgb(var(--sks-semantic-danger-rgb));
  --bs-danger-rgb: var(--sks-semantic-danger-rgb);
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: #b7dcff;
  --bs-link-hover-color-rgb: 183, 220, 255;
  --bs-primary-text-emphasis: #b7dcff;
  --bs-secondary-text-emphasis: #d4dee7;
  --bs-success-text-emphasis: #a9efc8;
  --bs-info-text-emphasis: #b1f0fb;
  --bs-warning-text-emphasis: #ffe0a3;
  --bs-danger-text-emphasis: #ffc5bf;
  --bs-primary-bg-subtle: rgba(var(--sks-semantic-primary-rgb), .18);
  --bs-secondary-bg-subtle: rgba(var(--sks-semantic-secondary-rgb), .14);
  --bs-success-bg-subtle: rgba(var(--sks-semantic-success-rgb), .18);
  --bs-info-bg-subtle: rgba(var(--sks-semantic-info-rgb), .18);
  --bs-warning-bg-subtle: rgba(var(--sks-semantic-warning-rgb), .18);
  --bs-danger-bg-subtle: rgba(var(--sks-semantic-danger-rgb), .17);
  --bs-primary-border-subtle: rgba(var(--sks-semantic-primary-rgb), .38);
  --bs-secondary-border-subtle: rgba(var(--sks-semantic-secondary-rgb), .28);
  --bs-success-border-subtle: rgba(var(--sks-semantic-success-rgb), .38);
  --bs-info-border-subtle: rgba(var(--sks-semantic-info-rgb), .38);
  --bs-warning-border-subtle: rgba(var(--sks-semantic-warning-rgb), .4);
  --bs-danger-border-subtle: rgba(var(--sks-semantic-danger-rgb), .36);
  --sks-semantic-primary-on: #10202d;
  --sks-semantic-secondary-on: #182027;
  --sks-semantic-success-on: #10251b;
  --sks-semantic-danger-on: #351513;
  --sks-semantic-warm-on: #182027;

  --sks-accent: var(--sks-ci-red);
  --sks-accent-soft: rgba(var(--sks-ci-red-rgb), .18);
  --sks-accent-border: rgba(var(--sks-ci-red-rgb), .42);
  --sks-focus-ring: 0 0 0 .2rem rgba(var(--sks-ci-red-rgb), .22);
  --sks-page-bg: radial-gradient(ellipse at 5% 8%, rgba(65, 105, 136, .38), transparent 55%), radial-gradient(ellipse at 92% 88%, rgba(128, 106, 75, .2), transparent 54%), radial-gradient(ellipse at 65% 5%, rgba(69, 88, 123, .16), transparent 46%), linear-gradient(135deg, #0d161d, #091016 54%, #090d12);
  --sks-page-bg-size: auto;
  --sks-surface: #16232d;
  --sks-surface-2: #1d2c36;
  --sks-surface-3: #273844;
  --sks-surface-overlay: rgba(20, 30, 39, .97);
  --sks-border: rgba(223, 244, 248, .13);
  --sks-border-strong: rgba(223, 244, 248, .3);
  --sks-text-muted: #e1ebee;
  --sks-primary-text: #8bc5ff;
  --sks-primary-text-rgb: var(--sks-semantic-primary-rgb);
  --sks-primary-text-hover: #b4dcff;
  --sks-danger-text: #ffc5bf;
  --sks-error-text: #ffc5bf;
  --sks-footer-muted: #c2d3d8;
  --sks-hover: rgba(229, 247, 251, .1);
  --sks-active: rgba(var(--sks-ci-red-rgb), .19);
  --sks-shadow-sm: inset 0 1px 0 rgba(241, 252, 255, .16), inset 0 -1px 0 rgba(221, 242, 255, .035), 0 10px 30px rgba(0, 10, 15, .14);
  --sks-shadow-md: inset 0 1px 0 rgba(241, 252, 255, .15), 0 28px 80px rgba(0, 8, 12, .4);
  --sks-progress-track: rgba(230, 248, 253, .14);
  --sks-tooltip-bg: rgba(20, 32, 39, .98);
  --sks-tooltip-color: #ffffff;
  --sks-code-bg: #18262e;
  --sks-code-border: rgba(223, 244, 248, .13);
  --sks-code-color: #f1f6f6;
  --sks-busy-overlay-bg: rgba(33, 37, 41, .72);
  --sks-loading-overlay-bg: rgba(5, 6, 8, .98);
  --sks-switch-off-bg: #374151;
  --sks-switch-off-border: #4b5563;
  --sks-switch-off-hover-bg: #465160;
  --sks-switch-knob-bg: #f8fafc;
  --sks-switch-on-bg: #198754;
  --sks-switch-on-border: #198754;
  --sks-status-warning-bg: rgba(var(--sks-semantic-warning-rgb), .2);
  --sks-status-warning-border: rgba(var(--sks-semantic-warning-rgb), .46);
  --sks-status-warning-text: #ffe0a3;
  --sks-status-warning-contrast: #212529;
  --sks-status-info-bg: rgba(var(--sks-semantic-info-rgb), .19);
  --sks-status-info-border: rgba(var(--sks-semantic-info-rgb), .44);
  --sks-status-info-text: #b1f0fb;
  --sks-status-success-bg: rgba(var(--sks-semantic-success-rgb), .19);
  --sks-status-success-border: rgba(var(--sks-semantic-success-rgb), .44);
  --sks-status-success-text: #a9efc8;
  --sks-status-violet-bg: rgba(139, 92, 246, .22);
  --sks-status-violet-border: rgba(139, 92, 246, .48);
  --sks-status-violet-text: #a78bfa;
  --sks-status-pink-bg: rgba(236, 72, 153, .2);
  --sks-status-pink-border: rgba(236, 72, 153, .46);
  --sks-status-pink-text: #f472b6;

  --sks-bg-page: var(--sks-page-bg);
  --sks-bg-surface: var(--sks-surface);
  --sks-bg-surface-muted: var(--sks-surface-2);
  --sks-bg-surface-raised: var(--sks-surface);
  --sks-bg-overlay: var(--sks-surface-overlay);
  --sks-border-subtle: var(--sks-border);
  --sks-border-emphasis: var(--sks-border-strong);
  --sks-text-default: var(--bs-body-color);
  --sks-text-subtle: var(--sks-text-muted);
  --sks-control-bg: rgba(222, 241, 250, .04);
  --sks-control-muted-bg: rgba(24, 37, 45, .6);
  --sks-control-border: var(--sks-control-edge);
  --sks-control-border-hover: var(--sks-border-strong);
  --sks-control-addon-focus-bg: rgba(134, 197, 255, .12);
  --sks-control-addon-focus-border: rgba(134, 197, 255, .38);
  --sks-control-addon-focus-color: #b4dcff;
  --sks-overlay-bg: var(--sks-surface-overlay);
  --sks-overlay-border: var(--sks-border);
  --sks-overlay-shadow: var(--sks-shadow-md);
  --sks-chart-hover-border: rgba(255,255,255,0.75);
  --sks-chart-segment-border: transparent;
  --sks-chart-text: var(--bs-body-color);
  --sks-chart-grid: rgba(154, 164, 178, .22);
  --sks-chart-grid-soft: rgba(154, 164, 178, .14);
  --sks-chart-grid-zero: rgba(154, 164, 178, .34);
  --sks-chart-bg: #16232d;
  --sks-chart-accent: rgb(var(--sks-chart-accent-rgb));
  --sks-chart-accent-border: rgb(var(--sks-chart-accent-rgb));
  --sks-chart-primary: rgb(var(--sks-chart-primary-rgb));
  --sks-chart-primary-soft: rgba(var(--sks-chart-primary-rgb), .2);
  --sks-chart-danger: rgb(var(--sks-chart-danger-rgb));
  --sks-chart-danger-soft: rgba(var(--sks-chart-danger-rgb), .18);
  --sks-chart-danger-border: rgb(var(--sks-chart-danger-rgb));
  --sks-chart-warning: rgb(var(--sks-chart-warning-rgb));
  --sks-chart-warning-soft: rgba(var(--sks-chart-warning-rgb), .18);
  --sks-chart-warning-border: rgb(var(--sks-chart-warning-rgb));
  --sks-chart-success: rgb(var(--sks-chart-success-rgb));
  --sks-chart-success-border: rgb(var(--sks-chart-success-rgb));
  --sks-chart-info: rgb(var(--sks-chart-info-rgb));
  --sks-chart-info-soft: rgba(var(--sks-chart-info-rgb), .18);
  --sks-chart-secondary: rgb(var(--sks-chart-secondary-rgb));
  --sks-chart-secondary-border: rgb(var(--sks-chart-secondary-rgb));
  --sks-pdf-text-rgb: 0, 0, 0;
  --sks-pdf-muted-rgb: 96, 103, 115;
  --sks-pdf-border-rgb: 220, 224, 229;
  --sks-pdf-soft-rgb: 246, 247, 249;
  --sks-pdf-table-head-rgb: 230, 230, 230;

  --card-bg-elevated: var(--sks-glass-card);
  --card-border-elevated: var(--sks-glass-edge);
  --card-shadow-elevated: var(--sks-shadow-sm);
}

/* ============================================================================
   THEME: PORCELAIN
   ========================================================================== */

html[data-sks-theme="porcelain"] {
  color-scheme: light;
  --sks-semantic-primary-rgb: 24, 93, 159;
  --sks-semantic-secondary-rgb: 95, 111, 126;
  --sks-semantic-success-rgb: 18, 132, 92;
  --sks-semantic-info-rgb: 8, 125, 150;
  --sks-semantic-warning-rgb: 236, 174, 45;
  --sks-semantic-danger-rgb: 196, 24, 37;
  --sks-semantic-primary-on: #ffffff;
  --sks-semantic-secondary-on: #ffffff;
  --sks-semantic-success-on: #ffffff;
  --sks-semantic-danger-on: #ffffff;
  --sks-metric-on-color: #ffffff;
  --bs-body-bg: #f6f8fa;
  --bs-body-color: #253441;
  --bs-body-color-rgb: 37, 52, 65;
  --bs-emphasis-color: #172631;
  --bs-emphasis-color-rgb: 23, 38, 49;
  --bs-secondary-color: #596b78;
  --bs-secondary-bg: #e9eef2;
  --bs-tertiary-color: #687986;
  --bs-tertiary-bg: #f1f4f6;
  --bs-border-color: #d9e1e7;
  --bs-link-color: #245f91;
  --bs-link-color-rgb: 36, 95, 145;
  --bs-link-hover-color: #17466e;
  --bs-link-hover-color-rgb: 23, 70, 110;
  --bs-primary-text-emphasis: #17466e;
  --bs-secondary-text-emphasis: #425461;
  --bs-success-text-emphasis: #176343;
  --bs-info-text-emphasis: #186170;
  --bs-warning-text-emphasis: #76510c;
  --bs-danger-text-emphasis: #9c2d32;
  --sks-placeholder-color: #728390;
  --sks-page-bg: linear-gradient(135deg, #f8fafb, #f3f6f8);
  --sks-surface: #ffffff;
  --sks-surface-2: #f6f8fa;
  --sks-surface-3: #edf2f5;
  --sks-surface-overlay: #ffffff;
  --sks-glass-card: #ffffff;
  --sks-glass-toolbar: #ffffff;
  --sks-glass-highlight: transparent;
  --sks-glass-reflection: transparent;
  --sks-control-bg: #ffffff;
  --sks-control-muted-bg: #f0f3f5;
  --sks-button-bg: #ffffff;
  --sks-button-hover-bg: #edf2f5;
  --sks-border: #d9e1e7;
  --sks-border-strong: #abbac5;
  --sks-control-edge: #cbd6de;
  --sks-glass-edge: #dce4e9;
  --sks-card-edge: #dce4e9;
  --sks-card-hover-bg: #ffffff;
  --sks-card-hover-edge: #bbcbd5;
  --sks-card-shadow: 0 2px 12px rgba(27, 47, 61, .055);
  --sks-card-hover-shadow: 0 8px 22px rgba(27, 47, 61, .09);
  --sks-shadow-sm: 0 2px 12px rgba(27, 47, 61, .055);
  --sks-shadow-md: 0 20px 55px rgba(27, 47, 61, .16);
  --sks-text-muted: #5b6d79;
  --sks-footer-muted: #687986;
  --sks-primary-text: #245f91;
  --sks-primary-text-rgb: 36, 95, 145;
  --sks-primary-text-hover: #17466e;
  --sks-danger-text: #9c2d32;
  --sks-error-text: #9c2d32;
  --sks-hover: rgba(36, 95, 145, .07);
  --sks-active: rgba(var(--sks-ci-red-rgb), .1);
  --sks-accent-soft: rgba(var(--sks-ci-red-rgb), .08);
  --sks-accent-border: rgba(var(--sks-ci-red-rgb), .28);
  --sks-progress-track: #e7edf1;
  --sks-tooltip-bg: #253441;
  --sks-tooltip-color: #ffffff;
  --sks-code-bg: #eef3f6;
  --sks-code-border: #d9e1e7;
  --sks-code-color: #253441;
  --sks-chart-bg: #ffffff;
  --sks-chart-model-light: #718294;
  --sks-chart-text: #253441;
  --sks-chart-grid: rgba(66, 89, 106, .19);
  --sks-chart-grid-soft: rgba(66, 89, 106, .1);
  --sks-chart-grid-zero: rgba(66, 89, 106, .3);
  --sks-chart-hover-border: rgba(37, 52, 65, .65);
  --sks-loading-overlay-bg: rgba(246, 248, 250, .98);
  --sks-busy-overlay-bg: rgba(246, 248, 250, .74);
  --sks-switch-off-bg: #dce4e9;
  --sks-switch-off-border: #abbac5;
  --sks-switch-off-hover-bg: #cbd6de;
  --sks-status-warning-text: #76510c;
  --sks-status-info-text: #186170;
  --sks-status-success-text: #176343;
  --sks-status-violet-text: #6040a1;
  --sks-status-pink-text: #a12e62;
}

/* ============================================================================
   GLOBAL TYPOGRAPHY / BODY
   ========================================================================== */

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  /* `hidden` creates an implicit vertical scroll container in Chromium and
     prevents nested sticky sidebars from following the document viewport. */
  overflow-x: clip;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: var(--sks-font-base);
  font-weight: 400;
  position: relative;
  min-height: 100vh;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--sks-page-bg, var(--bs-body-bg));
  background-size: var(--sks-page-bg-size, auto);
  pointer-events: none;
}

.sks-main {
  width: min(calc(100% - clamp(1rem, 3.5vw, 4rem)), var(--sks-layout-max-width));
  max-width: var(--sks-layout-max-width);
  margin-inline: auto;
}

body > footer {
  width: min(calc(100% - clamp(1rem, 3.5vw, 4rem)), var(--sks-layout-max-width));
  max-width: var(--sks-layout-max-width);
  margin-inline: auto;
}

.sks-app-footer,
.sks-app-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sks-app-footer {
  flex-wrap: wrap;
}

.sks-app-footer-row {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sks-app-footer-separator {
  margin-inline: var(--sks-space-2);
}

@media (max-width: 575.98px) {
  body.sks-has-app-footer > .sks-main {
    min-height: 0;
    flex: 0 0 auto !important;
  }

  .sks-app-footer {
    flex-direction: column;
    gap: var(--sks-space-1);
    line-height: 1.45;
  }

  .sks-app-footer-leading-separator {
    display: none;
  }

  .sks-app-footer-version {
    font-size: var(--sks-font-xs);
  }
}

.text-danger {
  color: var(--sks-danger-text, var(--bs-danger)) !important;
}

body > footer.text-secondary {
  color: var(--sks-footer-muted, var(--sks-text-muted, var(--bs-secondary-color))) !important;
}

.sks-skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 2000;
  padding: .65rem .9rem;
  border-radius: var(--sks-radius-sm);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: var(--sks-shadow-md);
  transform: translateY(-150%);
  transition: transform var(--sks-motion);
}

.sks-skip-link:focus,
.sks-skip-link:focus-visible {
  transform: translateY(0);
}

.sks-main:focus {
  outline: none;
}

input,
select,
button,
textarea {
  font: inherit;
  font-weight: 300;
}

h1 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0;
}

h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0;
}

h3 {
  font-size: var(--sks-font-heading-md);
  font-weight: 700;
  letter-spacing: 0;
}

h4 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
}

h5 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

h6 {
  font-size: var(--sks-font-base);
  font-weight: 700;
  letter-spacing: 0;
}

strong {
  font-weight: 500;
}

.title-weight {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.fw-semibold {
  font-weight: 700;
  letter-spacing: 0;
}

/* ============================================================================
   UTILITIES
   ========================================================================== */

.pointer {
  cursor: pointer;
}

.app-scroll-lock {
  overflow: hidden;
}

.toast-layer {
  z-index: 3100;
  contain: layout paint style;
  pointer-events: none;
  min-width: min(24rem, calc(100vw - 2rem));
  min-height: var(--sks-toast-layer-min-h);
}

.toast-layer > * {
  pointer-events: auto;
}

.logger-error-pre {
  color: var(--sks-error-text, var(--sks-danger-text, var(--bs-danger)));
}

.drag-handle {
  cursor: grab;
}

.download-proxy-link {
  display: none;
}

.chart-canvas-fluid {
  width: 100%;
}

.css-probe-hidden {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.password-strength-progress {
  height: var(--sks-progress-h-sm);
}

.pw-strength-0 { width: 0%; }
.pw-strength-13 { width: 12.5%; }
.pw-strength-25 { width: 25%; }
.pw-strength-38 { width: 37.5%; }
.pw-strength-50 { width: 50%; }
.pw-strength-63 { width: 62.5%; }
.pw-strength-75 { width: 75%; }
.pw-strength-88 { width: 87.5%; }
.pw-strength-100 { width: 100%; }

.employee-year-label {
  min-width: var(--sks-employee-year-label-min-w);
}

.color-card-col {
  height: var(--sks-color-card-preview-h);
}

.color-card-col > .card {
  height: 100%;
}

.color-card-col .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.drag-handle:active {
  cursor: grabbing;
}

.text-no-underline,
a.text-no-underline,
a.text-no-underline:hover {
  text-decoration: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-1);
  min-height: 1.55rem;
  padding: .34rem .58rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--sks-font-ui-sm);
  line-height: 1;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--sks-primary-text-rgb), .12);
}

/* ============================================================================
   QUALITY REPORTS
   ========================================================================== */

.quality-card {
  min-height: var(--sks-quality-card-min-h);
}

.quality-card-description {
  display: -webkit-box;
  min-height: var(--sks-quality-card-description-min-h);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.quality-card .quality-card-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding-top: var(--sks-quality-card-main-offset);
}

.quality-card-badges {
  position: absolute;
  top: var(--sks-space-4);
  right: var(--sks-space-4);
  left: var(--sks-quality-card-badges-left);
  min-height: var(--sks-chip-h);
  z-index: 4;
}

.quality-card-number {
  min-height: 1.25em;
  color: var(--sks-body-color, var(--bs-body-color));
}

.quality-card-title {
  min-height: 1.55em;
  color: var(--sks-text-muted);
  font-weight: 600;
}

.quality-card-line {
  display: grid;
  grid-template-columns: var(--sks-icon-col) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sks-space-3);
  min-height: 1.55em;
  color: var(--sks-text-muted);
  line-height: 1.55;
}

.quality-card-line > i {
  color: var(--sks-text-muted);
  opacity: .9;
}

.quality-card-line-value {
  min-width: 0;
  color: var(--sks-body-color, var(--bs-body-color));
}

.quality-card-pill-xs {
  padding: var(--sks-space-1) var(--sks-space-2);
  font-size: var(--sks-font-xs);
  line-height: 1.05;
}

@media (max-width: 575.98px) {
  .quality-card-badges {
    top: var(--sks-quality-card-badges-top-sm);
    right: var(--sks-space-4);
    left: var(--sks-space-4);
    justify-content: flex-start !important;
  }

  .quality-card .quality-card-main {
    padding-top: var(--sks-quality-card-main-offset-sm);
  }

  .quality-card-line {
    grid-template-columns: var(--sks-quality-card-line-icon-col-sm) minmax(0, 1fr);
  }
}

.quality-form-section {
  padding: var(--sks-space-5);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2);
}

.quality-form-section .form-label {
  color: var(--sks-text-muted);
  font-weight: 700;
}

.quality-attachments {
  margin-top: var(--sks-space-5);
}

.quality-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--sks-space-2);
}

.quality-file-row {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  min-width: 0;
}

.quality-file-link {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--sks-space-2);
  min-width: 0;
  padding: var(--sks-space-2) var(--sks-space-3);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface);
  color: var(--bs-body-color);
  text-align: left;
  text-decoration: none;
}

.quality-file-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-file-link:hover,
.quality-file-link:focus {
  border-color: var(--sks-primary);
  color: var(--bs-body-color);
}

.quality-file-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sks-space-1);
}

.quality-media-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface);
  color: var(--bs-body-color);
}

.quality-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quality-media-video {
  flex-direction: column;
  gap: var(--sks-space-2);
  padding: var(--sks-space-3);
  text-align: center;
}

.quality-media-video span {
  max-width: 100%;
  overflow: hidden;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-lightbox-media {
  max-width: 100%;
  max-height: var(--sks-quality-lightbox-max-h);
  border-radius: var(--sks-radius-sm);
}

.quality-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sks-space-4);
}

.quality-detail-hero,
.quality-detail-stat,
.quality-detail-section {
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2);
}

.quality-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-4);
  padding: var(--sks-space-5);
}

.quality-detail-kicker,
.quality-detail-stat span,
.quality-detail-label,
.quality-detail-subtitle {
  color: var(--sks-text-muted);
  font-weight: 700;
}

.quality-detail-kicker {
  margin-bottom: .25rem;
}

.quality-detail-number {
  color: var(--bs-body-color);
  font-size: var(--sks-quality-detail-number-size);
  font-weight: 800;
  line-height: 1;
}

.quality-detail-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sks-space-1);
  min-height: var(--sks-quality-detail-stat-min-h);
  padding: var(--sks-space-4);
}

.quality-detail-stat strong {
  font-size: var(--sks-font-xl);
  line-height: 1.15;
}

.quality-detail-section {
  height: 100%;
  padding: var(--sks-space-5);
}

.quality-detail-section h3 {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  margin: 0 0 var(--sks-space-4);
  color: var(--bs-body-color);
  font-size: 1rem;
}

.quality-detail-section h3 i {
  color: var(--sks-danger, var(--bs-danger));
}

.quality-detail-item {
  display: grid;
  grid-template-columns: var(--sks-quality-detail-icon-col) 1fr;
  gap: var(--sks-space-3);
  margin-bottom: var(--sks-space-3);
}

.quality-detail-item > i {
  color: var(--sks-text-muted);
}

.quality-detail-label,
.quality-detail-subtitle {
  margin-bottom: var(--sks-space-1);
  font-size: var(--sks-font-ui-md);
}

.quality-detail-value {
  color: var(--bs-body-color);
  font-weight: 600;
}

.quality-detail-text {
  min-height: var(--sks-quality-detail-text-min-h);
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface);
  white-space: pre-wrap;
}

.quality-history {
  display: flex;
  flex-direction: column;
  gap: var(--sks-space-3);
}

.quality-history-item {
  display: grid;
  grid-template-columns: var(--sks-quality-history-icon-size) 1fr;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface);
}

.quality-history-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sks-quality-history-icon-size);
  height: var(--sks-quality-history-icon-size);
  border-radius: 999px;
  background: var(--sks-surface-2);
  color: var(--sks-danger, var(--bs-danger));
}

.quality-history-change {
  margin-top: var(--sks-space-1);
  color: var(--bs-body-color);
  font-weight: 700;
}

.quality-history-change span {
  color: var(--sks-text-muted);
  font-weight: 500;
}

.quality-history-message {
  margin-top: var(--sks-space-1);
  color: var(--bs-body-color);
  white-space: pre-wrap;
}

.quality-comment-box {
  padding: var(--sks-space-4);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface);
}

/* Text and links need their own contrast; filled primary buttons keep Bootstrap's palette. */
.text-primary,
.link-primary {
  color: rgba(var(--sks-primary-text-rgb), var(--bs-text-opacity, 1)) !important;
}

.link-primary {
  text-decoration-color: var(--sks-primary-text) !important;
}

.link-primary:is(:hover, :focus) {
  color: var(--sks-primary-text-hover) !important;
  text-decoration-color: var(--sks-primary-text-hover) !important;
}

/* Midnight Indigo retains the stored purple preference and dark component behavior. */
html[data-bs-theme="dark"][data-sks-theme="purple"] {
  --sks-placeholder-color: #8e99b4;
  --bs-body-bg: #090b12;
  --bs-body-color: #f1f3f9;
  --bs-body-color-rgb: 241, 243, 249;
  --bs-secondary-bg: #1b2030;
  --bs-secondary-color: #cdd2e1;
  --bs-tertiary-bg: #222839;
  --bs-border-color: rgba(195, 204, 240, .13);
  --sks-page-bg: radial-gradient(ellipse at 5% 8%, rgba(67, 74, 127, .24), transparent 55%), radial-gradient(ellipse at 92% 88%, rgba(75, 61, 103, .1), transparent 54%), linear-gradient(135deg, #10141f, #0b0e17 54%, #090b12);
  --sks-surface: #171c29;
  --sks-surface-2: #1e2534;
  --sks-surface-3: #2a3243;
  --sks-surface-overlay: rgba(21, 26, 39, .98);
  --sks-text-muted: #cdd2e1;
  --sks-footer-muted: #b7bfd3;
  --sks-border: rgba(195, 204, 240, .13);
  --sks-border-strong: rgba(195, 204, 240, .28);
  --sks-control-edge: rgba(195, 204, 240, .1);
  --sks-glass-edge: rgba(212, 219, 251, .18);
  --sks-card-edge: rgba(212, 219, 251, .085);
  --sks-glass-card: rgba(181, 194, 241, .055);
  --sks-glass-toolbar: rgba(199, 209, 249, .045);
  --sks-glass-highlight: rgba(221, 227, 255, .08);
  --sks-glass-reflection: rgba(172, 178, 226, .025);
  --sks-button-bg: rgba(199, 209, 249, .055);
  --sks-button-hover-bg: rgba(199, 209, 249, .12);
  --sks-card-hover-bg: rgba(181, 194, 241, .055);
  --sks-card-hover-edge: rgba(212, 219, 251, .14);
  --sks-control-bg: rgba(199, 209, 249, .04);
  --sks-control-muted-bg: rgba(26, 32, 48, .65);
  --sks-hover: rgba(210, 220, 251, .1);
  --sks-tooltip-bg: #1e2534;
  --sks-code-bg: #1b2231;
  --sks-code-border: var(--sks-border);
  --sks-code-color: #f1f3f9;
  --sks-progress-track: rgba(209, 219, 251, .14);
  --sks-loading-overlay-bg: rgba(8, 10, 17, .98);
  --sks-busy-overlay-bg: rgba(23, 28, 42, .75);
  --sks-switch-off-bg: #363e50;
  --sks-switch-off-border: #4c566d;
  --sks-switch-off-hover-bg: #454f65;
}

/* ============================================================================
   LOGIN SCREEN
   ========================================================================== */

.sks-maintenance-admin-banner {
  display: flex;
  align-items: center;
  gap: var(--sks-space-3);
  padding: .65rem .85rem;
  border: 1px solid color-mix(in srgb, var(--bs-warning) 48%, var(--sks-border));
  border-radius: var(--bs-border-radius-lg);
  background: color-mix(in srgb, var(--bs-warning) 11%, var(--bs-body-bg));
  box-shadow: var(--sks-shadow-sm);
}

.sks-maintenance-admin-banner-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--bs-warning-text-emphasis);
  background: color-mix(in srgb, var(--bs-warning) 22%, transparent);
}

.sks-maintenance-admin-banner-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--sks-space-2);
  font-size: var(--sks-font-ui-sm);
}

.sks-maintenance-admin-banner-copy strong {
  flex: 0 0 auto;
  color: var(--bs-warning-text-emphasis);
}

.sks-maintenance-admin-banner-copy span {
  color: var(--bs-secondary-color);
}

.sks-mfa-rollout-banner {
  display: flex;
  align-items: center;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3) 3.25rem var(--sks-space-3) var(--sks-space-3);
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--bs-info) 10%, var(--bs-body-bg));
  border-color: color-mix(in srgb, var(--bs-info) 42%, var(--bs-border-color));
}

.sks-mfa-rollout-banner-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--sks-card-action-size);
  height: var(--sks-card-action-size);
  color: var(--bs-info);
  background: color-mix(in srgb, var(--bs-info) 14%, transparent);
  border-radius: var(--bs-border-radius);
}

.sks-mfa-rollout-banner-copy {
  display: grid;
  flex: 1 1 auto;
  gap: var(--sks-space-1);
  min-width: 0;
}

.sks-mfa-rollout-banner-copy strong,
.sks-mfa-rollout-banner-copy span {
  display: block;
}

.sks-mfa-rollout-banner-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .sks-mfa-rollout-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .sks-mfa-rollout-banner-copy {
    flex-basis: calc(100% - var(--sks-card-action-size) - var(--sks-space-3));
  }

  .sks-mfa-rollout-banner-action {
    width: 100%;
  }
}

@media (max-width: 47.99rem) {
  .sks-maintenance-admin-banner-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }
}

.login-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--sks-z-base-overlay);
}

.login-card {
  max-width: var(--sks-login-card-w);
  width: 100%;
}

.login-card .login-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sks-space-6);
}

.login-turnstile-slot {
  min-height: var(--sks-turnstile-slot-h);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.login-turnstile-widget {
  width: 100%;
  min-height: var(--sks-turnstile-widget-h);
}

.login-turnstile-widget iframe {
  width: 100% !important;
}

.login-support-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sks-space-2);
  margin-block: var(--sks-space-4) var(--sks-space-2);
}

.login-support-action {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sks-space-2);
  min-width: 0;
  min-height: 4.25rem;
  padding: var(--sks-space-3);
  color: var(--sks-text-default, var(--bs-body-color));
  font: inherit;
  text-align: start;
  background: var(--sks-control-muted-bg, var(--bs-tertiary-bg));
  border: 1px solid var(--sks-control-edge, var(--bs-border-color));
  border-radius: var(--sks-radius-control);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.login-support-action:hover {
  color: var(--sks-text-default, var(--bs-body-color));
  background: var(--sks-control-bg, var(--bs-body-bg));
  border-color: var(--bs-primary);
  transform: translateY(-1px);
}

.login-support-action:focus-visible {
  outline: 0;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

.login-support-action-icon,
.login-flow-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .14);
  border-radius: var(--sks-radius-control);
}

.login-support-action-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.login-support-action-title {
  overflow: hidden;
  font-size: var(--sks-font-ui-sm);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-support-action-hint {
  overflow: hidden;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-xs);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-support-action-chevron {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-sm);
}

.login-flow-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--sks-space-3);
  padding-bottom: var(--sks-space-4);
  margin-bottom: var(--sks-space-4);
  border-bottom: 1px solid var(--sks-control-edge, var(--bs-border-color));
}

.login-flow-icon {
  width: 2.75rem;
  height: 2.75rem;
  font-size: var(--sks-font-lg);
}

.login-flow-title {
  margin: 0 0 var(--sks-space-1);
  font-size: var(--sks-font-lg);
  font-weight: 700;
}

.login-flow-copy {
  margin: 0;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-ui-sm);
  line-height: 1.45;
}

.login-flow-status {
  font-size: var(--sks-font-ui-sm);
  line-height: 1.45;
}

.login-account-type {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.login-account-type-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sks-space-2);
}

.login-account-type-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sks-space-2);
  min-width: 0;
  min-height: 3.5rem;
  padding: var(--sks-space-2) var(--sks-space-3);
  cursor: pointer;
  background: var(--sks-control-muted-bg, var(--bs-tertiary-bg));
  border: 1px solid var(--sks-control-edge, var(--bs-border-color));
  border-radius: var(--sks-radius-control);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.login-account-type-option:hover {
  border-color: var(--bs-primary);
}

.login-account-type-option:has(.form-check-input:checked) {
  background: rgba(var(--bs-primary-rgb), .1);
  border-color: var(--bs-primary);
  box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.login-account-type-option:has(.form-check-input:focus-visible) {
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

.login-account-type-option .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.login-account-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .14);
  border-radius: var(--sks-radius-control);
}

.login-account-type-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: var(--sks-space-3);
}

.login-account-type-title {
  overflow: hidden;
  font-size: var(--sks-font-ui-sm);
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-account-type-tag {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.login-flow-back {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--sks-space-5);
}

.login-flow-back .btn {
  display: inline-flex;
  align-items: center;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-ui-sm);
  text-decoration: none;
}

.login-flow-back .btn:hover {
  color: var(--bs-primary);
}

.login-card :is(#resetPanel, #accountApplyPanel, #accountActivationPanel) .input-group-text {
  min-width: 3rem;
  justify-content: center;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  background: var(--sks-control-muted-bg, var(--bs-tertiary-bg));
}

@media (max-width: 32rem) {
  .login-wrapper {
    align-items: flex-start;
    overflow-y: auto;
    padding: var(--sks-space-3);
  }

  .login-card {
    margin-block: var(--sks-space-3);
  }

  .login-support-actions {
    grid-template-columns: 1fr;
  }

}

#loginForm[data-turnstile-enabled="1"] .login-turnstile-gated {
  visibility: hidden;
}

#loginForm[data-turnstile-enabled="1"].is-turnstile-human .login-turnstile-gated {
  visibility: visible;
}

#loginSubmitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
}

.login-remember-switch {
  display: flex;
  align-items: center;
  margin-top: var(--sks-space-1);
}

.login-remember-switch-control {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: var(--sks-switch-w);
  height: var(--sks-switch-h);
  margin: 0;
  border: 1px solid var(--sks-switch-off-border, var(--sks-border-strong, var(--bs-border-color)));
  border-radius: 999px;
  background-color: var(--sks-switch-off-bg, var(--bs-body-bg));
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--sks-motion),
    border-color var(--sks-motion),
    box-shadow var(--sks-motion);
}

.login-remember-switch-control::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc((var(--sks-switch-h) - var(--sks-switch-knob)) / 2);
  width: var(--sks-switch-knob);
  height: var(--sks-switch-knob);
  border-radius: 50%;
  background: var(--sks-switch-knob-bg, var(--bs-secondary-color));
  transform: translateY(-50%);
  transition:
    background-color var(--sks-motion),
    transform var(--sks-motion);
}

.login-remember-switch-control:checked {
  border-color: var(--sks-switch-on-border, var(--bs-success));
  background-color: var(--sks-switch-on-bg, var(--bs-success));
  box-shadow: 0 0 0 .2rem rgba(var(--sks-primary-text-rgb), .22);
}

.login-remember-switch-control:checked::before {
  background: var(--bs-white);
  transform: translate(calc(var(--sks-switch-w) - var(--sks-switch-h)), -50%);
}

.login-remember-switch-control:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--sks-primary-text-rgb), .22);
}

.login-remember-switch-label {
  color: var(--bs-body-color);
  font-weight: 600;
  line-height: 1.25;
  user-select: none;
  cursor: pointer;
}

[data-bs-theme="dark"] .login-remember-switch-control {
  background-color: var(--sks-switch-off-bg, var(--bs-body-bg));
  box-shadow: none;
}

[data-bs-theme="dark"] .login-remember-switch-control:checked {
  background-color: var(--sks-switch-on-bg, var(--bs-success));
}

.production-media-upload-options {
  display: grid;
  gap: var(--sks-space-3);
}

.production-media-upload-option {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--sks-surface-2, var(--bs-tertiary-bg));
  --bs-btn-border-color: var(--sks-border-strong, var(--bs-border-color));
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--sks-hover);
  --bs-btn-hover-border-color: var(--sks-border-strong, var(--bs-border-color));
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--sks-hover);
  --bs-btn-active-border-color: var(--sks-border-strong, var(--bs-border-color));
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-bg: var(--sks-surface-2, var(--bs-tertiary-bg));
  --bs-btn-disabled-border-color: var(--sks-border, var(--bs-border-color));
  display: flex;
  align-items: center;
  gap: var(--sks-space-3);
  width: 100%;
  min-height: var(--sks-upload-option-min-h);
  padding: var(--sks-space-3) var(--sks-space-4);
  border: 1px solid var(--sks-border-strong, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  color: var(--bs-body-color);
  text-align: left;
  text-decoration: none;
  transition:
    border-color var(--sks-motion),
    background-color var(--sks-motion),
    color var(--sks-motion),
    box-shadow var(--sks-motion);
}

.production-media-upload-option > i {
  flex: 0 0 auto;
  width: var(--sks-upload-icon-col);
  color: var(--sks-muted, var(--bs-secondary-color));
  font-size: var(--sks-upload-icon-size);
  text-align: center;
}

.production-media-upload-option > span {
  min-width: 0;
}

.production-media-upload-option .fw-semibold {
  color: var(--bs-body-color);
}

.production-media-upload-option .text-muted {
  color: var(--sks-muted, var(--bs-secondary-color)) !important;
}

.production-media-upload-option:hover {
  border-color: var(--sks-border-strong, var(--bs-border-color));
  background: var(--sks-hover);
  color: var(--bs-body-color);
  box-shadow: none;
}

.production-media-upload-option:focus-visible {
  border-color: var(--sks-border-strong, var(--bs-border-color));
  background: var(--sks-hover);
  color: var(--bs-body-color);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sks-border-strong, var(--bs-border-color)) 34%, transparent);
  outline: 0;
}

.production-media-upload-option:hover > i,
.production-media-upload-option:focus-visible > i,
.production-media-upload-option:hover .fw-semibold,
.production-media-upload-option:focus-visible .fw-semibold {
  color: var(--bs-body-color);
}

.production-media-upload-option:hover .text-muted,
.production-media-upload-option:focus-visible .text-muted {
  color: var(--bs-secondary-color) !important;
}

.production-media-upload-dropzone {
  border-style: dashed;
  cursor: pointer;
}

.production-media-upload-option:disabled,
.production-media-upload-dropzone[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .62;
  box-shadow: none;
}

/* ============================================================================
   LOGO
   ========================================================================== */

.logo-sksroltec-svg {
  display: block;
  margin: 0 auto;
  width: min(100%, var(--sks-logo-w));
  height: auto;
  aspect-ratio: 31 / 6;
}

.logo-sksroltec-svg-margin {
  margin: 0;
}

.logo-sksroltec-svg text {
  font-family: 'SKS Logo', 'Open Sans', sans-serif;
  font-weight: 700;
  letter-spacing: .075em;
  stroke-width: .9px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.logo-sksroltec-svg .logo-main {
  fill: var(--sks-ci-white);
  stroke: var(--sks-ci-white);
}

.logo-sksroltec-svg .logo-sub {
  fill: var(--sks-display-red);
  stroke: var(--sks-display-red);
}

html[data-sks-theme="porcelain"] .logo-sksroltec-svg .logo-main {
  fill: var(--bs-emphasis-color);
  stroke: var(--bs-emphasis-color);
}

.logo-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* linksbündig */
}

.logo-stack .logo-sksroltec-svg {
  margin: 0;    /* kein zentriertes auto mehr */
}

.logo-stack .page-subtitle {
  margin-top: var(--sks-space-1);
}

/* ============================================================================
   PRINT OVERRIDES
   ========================================================================== */
@media print {
  /* Hintergrund & Text generell */
  body {
    background: var(--sks-ci-white) !important;
    color: var(--sks-ci-black) !important;
  }

  /* Logo: auch im Dark-Mode in schwarz drucken */
  .logo-sksroltec-svg .logo-main {
    fill: var(--sks-ci-black) !important;
    stroke: var(--sks-ci-black) !important;
  }

  /* Optional: Rot leicht dunkler/print-freundlich machen */
  .logo-sksroltec-svg .logo-sub {
    fill: #c82333 !important; /* etwas dunkleres Rot */
    stroke: #c82333 !important;
  }
}

/* ============================================================================
   HEADER DROPDOWNS
   ========================================================================== */

.sks-theme-switch .btn,
.sks-language-switch .btn {
  min-height: var(--sks-control-h);
  padding-inline: var(--sks-space-3);
}

.sks-language-code {
  min-width: 2ch;
  font-weight: var(--sks-font-weight-bold);
  line-height: 1;
  letter-spacing: 0;
}

/* Icon-only dropdowns use the same square control as every other icon action.
   Icon and caret form one centred, evenly spaced unit; text dropdowns retain
   Bootstrap's standard treatment. */
.dropdown-toggle:has(> i.bi):not(:has(> span:not(.visually-hidden))) {
  display: inline-grid !important;
  width: var(--control-h);
  min-width: var(--control-h);
  max-width: var(--control-h);
  min-height: var(--control-h);
  grid-template-columns: max-content max-content;
  column-gap: var(--sks-space-1);
  align-items: center;
  justify-content: center;
  padding-inline: 0 !important;
}

.dropdown-toggle:has(> i.bi):not(:has(> span:not(.visually-hidden)))::after {
  margin: 0;
  opacity: 0.8;
}

/* Initial avatars share the card header slot with entity icons. */
.entity-card-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--sks-ci-red);
  color: #fff;
  font-family: var(--sks-font-numeric);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.entity-card-avatar--code {
  flex-basis: 3rem;
  width: 3rem;
  height: 3rem;
  font-size: .875rem;
}

.entity-card-avatar--compact {
  font-size: .625rem;
}

.entity-card-avatar.color-card-avatar {
  background: var(--sks-button-bg);
  color: inherit;
}

/* Shared component owner. !important is limited to Bootstrap utility adapters
   (shadow, text color, font size/weight, spacing) and accessibility/overlay guards. */
/* ============================================================================
   FORMS / LABELS / BUTTONS
   ========================================================================== */

label {
  font-size: var(--sks-font-body-sm);
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

.form-label {
  padding-block: 0px 4px;
  margin: 0;
  letter-spacing: 0;
}

.form-label .text-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sks-required-mark-min-w);
  color: var(--sks-danger-text, var(--sks-accent)) !important;
  font-weight: 700;
}

.btn {
  font-size: var(--sks-font-body-sm);
  font-weight: 700;
  letter-spacing: 0;
  border-radius: var(--sks-radius-sm);
  min-height: var(--control-h);
  padding-inline: calc(var(--bs-btn-padding-x) + 2px);
  transition:
    transform var(--sks-motion),
    box-shadow var(--sks-motion),
    background-color var(--sks-motion),
    border-color var(--sks-motion),
    color var(--sks-motion);
}

.btn:hover {
  transform: none;
  box-shadow: none;
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--sks-control-border-hover);
  box-shadow: 0 0 0 .2rem rgba(var(--sks-primary-text-rgb), .22);
}

.btn:disabled,
.btn.disabled,
.form-control:disabled,
.form-select:disabled,
fieldset:disabled .btn,
fieldset:disabled .form-control,
fieldset:disabled .form-select {
  cursor: not-allowed;
  opacity: .62;
  box-shadow: none;
}

[role="button"]:not(.btn):not([aria-disabled="true"]):not(.disabled) {
  cursor: pointer;
}

[role="button"]:not(.btn):focus-visible,
[tabindex="0"][data-bs-toggle="popover"]:focus-visible,
[tabindex="0"][data-bs-toggle="tooltip"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--sks-primary-text-rgb), .22);
  border-radius: var(--sks-radius-sm);
}

.btn-primary {
  --bs-btn-color: var(--sks-semantic-primary-on, #ffffff);
  --bs-btn-bg: rgb(var(--sks-semantic-primary-rgb));
  --bs-btn-border-color: rgb(var(--sks-semantic-primary-rgb));
  --bs-btn-hover-color: var(--sks-semantic-primary-on, #ffffff);
  --bs-btn-hover-bg: color-mix(in srgb, rgb(var(--sks-semantic-primary-rgb)) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, rgb(var(--sks-semantic-primary-rgb)) 84%, black);
  --bs-btn-active-color: var(--sks-semantic-primary-on, #ffffff);
  --bs-btn-active-bg: color-mix(in srgb, rgb(var(--sks-semantic-primary-rgb)) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, rgb(var(--sks-semantic-primary-rgb)) 78%, black);
  --bs-btn-disabled-bg: rgb(var(--sks-semantic-primary-rgb));
  --bs-btn-disabled-border-color: rgb(var(--sks-semantic-primary-rgb));
}

.btn-success {
  --bs-btn-color: var(--sks-semantic-success-on, #ffffff);
  --bs-btn-bg: rgb(var(--sks-semantic-success-rgb));
  --bs-btn-border-color: rgb(var(--sks-semantic-success-rgb));
  --bs-btn-hover-color: var(--sks-semantic-success-on, #ffffff);
  --bs-btn-hover-bg: color-mix(in srgb, rgb(var(--sks-semantic-success-rgb)) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, rgb(var(--sks-semantic-success-rgb)) 84%, black);
  --bs-btn-active-color: var(--sks-semantic-success-on, #ffffff);
  --bs-btn-active-bg: color-mix(in srgb, rgb(var(--sks-semantic-success-rgb)) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, rgb(var(--sks-semantic-success-rgb)) 78%, black);
  --bs-btn-disabled-bg: rgb(var(--sks-semantic-success-rgb));
  --bs-btn-disabled-border-color: rgb(var(--sks-semantic-success-rgb));
}

.btn-info,
.btn-warning {
  --bs-btn-color: var(--sks-semantic-warm-on, #212529);
}

.btn-info {
  --bs-btn-bg: rgb(var(--sks-semantic-info-rgb));
  --bs-btn-border-color: rgb(var(--sks-semantic-info-rgb));
  --bs-btn-hover-color: var(--sks-semantic-warm-on, #212529);
  --bs-btn-hover-bg: color-mix(in srgb, rgb(var(--sks-semantic-info-rgb)) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, rgb(var(--sks-semantic-info-rgb)) 84%, black);
  --bs-btn-active-color: var(--sks-semantic-warm-on, #212529);
  --bs-btn-active-bg: color-mix(in srgb, rgb(var(--sks-semantic-info-rgb)) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, rgb(var(--sks-semantic-info-rgb)) 78%, black);
  --bs-btn-disabled-bg: rgb(var(--sks-semantic-info-rgb));
  --bs-btn-disabled-border-color: rgb(var(--sks-semantic-info-rgb));
}

.btn-warning {
  --bs-btn-bg: rgb(var(--sks-semantic-warning-rgb));
  --bs-btn-border-color: rgb(var(--sks-semantic-warning-rgb));
  --bs-btn-hover-color: var(--sks-semantic-warm-on, #212529);
  --bs-btn-hover-bg: color-mix(in srgb, rgb(var(--sks-semantic-warning-rgb)) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, rgb(var(--sks-semantic-warning-rgb)) 86%, black);
  --bs-btn-active-color: var(--sks-semantic-warm-on, #212529);
  --bs-btn-active-bg: color-mix(in srgb, rgb(var(--sks-semantic-warning-rgb)) 82%, black);
  --bs-btn-active-border-color: color-mix(in srgb, rgb(var(--sks-semantic-warning-rgb)) 80%, black);
  --bs-btn-disabled-bg: rgb(var(--sks-semantic-warning-rgb));
  --bs-btn-disabled-border-color: rgb(var(--sks-semantic-warning-rgb));
}

.btn-danger {
  --bs-btn-color: var(--sks-semantic-danger-on, #ffffff);
  --bs-btn-bg: rgb(var(--sks-semantic-danger-rgb));
  --bs-btn-border-color: rgb(var(--sks-semantic-danger-rgb));
  --bs-btn-hover-color: var(--sks-semantic-danger-on, #ffffff);
  --bs-btn-hover-bg: color-mix(in srgb, rgb(var(--sks-semantic-danger-rgb)) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, rgb(var(--sks-semantic-danger-rgb)) 84%, black);
  --bs-btn-active-color: var(--sks-semantic-danger-on, #ffffff);
  --bs-btn-active-bg: color-mix(in srgb, rgb(var(--sks-semantic-danger-rgb)) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, rgb(var(--sks-semantic-danger-rgb)) 78%, black);
  --bs-btn-disabled-bg: rgb(var(--sks-semantic-danger-rgb));
  --bs-btn-disabled-border-color: rgb(var(--sks-semantic-danger-rgb));
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
  background-color: transparent;
  box-shadow: none;
}

.btn-outline-primary {
  --bs-btn-color: rgb(var(--sks-semantic-primary-rgb));
  --bs-btn-border-color: rgba(var(--sks-semantic-primary-rgb), .55);
  --bs-btn-hover-color: var(--sks-semantic-primary-on, #ffffff);
  --bs-btn-hover-bg: rgb(var(--sks-semantic-primary-rgb));
  --bs-btn-hover-border-color: rgb(var(--sks-semantic-primary-rgb));
  --bs-btn-active-color: var(--sks-semantic-primary-on, #ffffff);
  --bs-btn-active-bg: rgb(var(--sks-semantic-primary-rgb));
  --bs-btn-active-border-color: rgb(var(--sks-semantic-primary-rgb));
}

.btn-outline-success {
  --bs-btn-color: rgb(var(--sks-semantic-success-rgb));
  --bs-btn-border-color: rgba(var(--sks-semantic-success-rgb), .55);
  --bs-btn-hover-color: var(--sks-semantic-success-on, #ffffff);
  --bs-btn-hover-bg: rgb(var(--sks-semantic-success-rgb));
  --bs-btn-hover-border-color: rgb(var(--sks-semantic-success-rgb));
  --bs-btn-active-color: var(--sks-semantic-success-on, #ffffff);
  --bs-btn-active-bg: rgb(var(--sks-semantic-success-rgb));
  --bs-btn-active-border-color: rgb(var(--sks-semantic-success-rgb));
}

.btn-outline-info {
  --bs-btn-color: rgb(var(--sks-semantic-info-rgb));
  --bs-btn-border-color: rgba(var(--sks-semantic-info-rgb), .55);
  --bs-btn-hover-color: var(--sks-semantic-warm-on, #212529);
  --bs-btn-hover-bg: rgb(var(--sks-semantic-info-rgb));
  --bs-btn-hover-border-color: rgb(var(--sks-semantic-info-rgb));
  --bs-btn-active-color: var(--sks-semantic-warm-on, #212529);
  --bs-btn-active-bg: rgb(var(--sks-semantic-info-rgb));
  --bs-btn-active-border-color: rgb(var(--sks-semantic-info-rgb));
}

.btn-outline-warning {
  --bs-btn-color: rgb(var(--sks-semantic-warning-rgb));
  --bs-btn-border-color: rgba(var(--sks-semantic-warning-rgb), .62);
  --bs-btn-hover-color: var(--sks-semantic-warm-on, #212529);
  --bs-btn-hover-bg: rgb(var(--sks-semantic-warning-rgb));
  --bs-btn-hover-border-color: rgb(var(--sks-semantic-warning-rgb));
  --bs-btn-active-color: var(--sks-semantic-warm-on, #212529);
  --bs-btn-active-bg: rgb(var(--sks-semantic-warning-rgb));
  --bs-btn-active-border-color: rgb(var(--sks-semantic-warning-rgb));
}

.btn-outline-danger {
  --bs-btn-color: rgb(var(--sks-semantic-danger-rgb));
  --bs-btn-border-color: rgba(var(--sks-semantic-danger-rgb), .55);
  --bs-btn-hover-color: var(--sks-semantic-danger-on, #ffffff);
  --bs-btn-hover-bg: rgb(var(--sks-semantic-danger-rgb));
  --bs-btn-hover-border-color: rgb(var(--sks-semantic-danger-rgb));
  --bs-btn-active-color: var(--sks-semantic-danger-on, #ffffff);
  --bs-btn-active-bg: rgb(var(--sks-semantic-danger-rgb));
  --bs-btn-active-border-color: rgb(var(--sks-semantic-danger-rgb));
}

html :is(.bg-primary, .text-bg-primary) {
  color: var(--sks-semantic-primary-on) !important;
}

html :is(.bg-secondary, .text-bg-secondary) {
  color: var(--sks-semantic-secondary-on) !important;
}

html :is(.bg-success, .text-bg-success) {
  color: var(--sks-semantic-success-on) !important;
}

html :is(.bg-info, .text-bg-info, .bg-warning, .text-bg-warning) {
  color: var(--sks-semantic-warm-on) !important;
}

html :is(.bg-danger, .text-bg-danger) {
  color: var(--sks-semantic-danger-on) !important;
}

.form-control,
.form-select,
.input-group-text {
  border-radius: var(--sks-radius-sm);
  transition:
    border-color var(--sks-motion),
    box-shadow var(--sks-motion),
    background-color var(--sks-motion);
}

.form-control,
.form-select {
  min-height: var(--control-h);
}

.form-control:hover,
.form-select:hover {
  border-color: var(--sks-border-strong, var(--bs-border-color));
}

html input[type="date"].form-control {
  color-scheme: dark;
}

html input[type="date"].form-control::-webkit-calendar-picker-indicator {
  opacity: .82;
}

html input[type="date"].form-control:disabled::-webkit-calendar-picker-indicator,
html input[type="date"].form-control[readonly]::-webkit-calendar-picker-indicator {
  opacity: .5;
}

.input-group-text {
  background-color: var(--sks-surface-2, var(--bs-tertiary-bg));
  color: var(--sks-text-muted, var(--bs-secondary-color));
  min-width: var(--sks-input-addon-min-w);
  justify-content: center;
}

.input-group:focus-within .input-group-text {
  border-color: var(--sks-control-addon-focus-border, var(--sks-control-border-hover));
  color: var(--sks-control-addon-focus-color, var(--sks-primary-text));
  background-color: var(--sks-control-addon-focus-bg, var(--sks-hover));
}

.form-check.form-switch {
  display: flex;
  align-items: center;
  gap: var(--sks-space-3);
  min-height: var(--control-h);
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  padding: var(--sks-space-2) var(--sks-space-3);
  transition:
    border-color var(--sks-motion),
    background-color var(--sks-motion),
    box-shadow var(--sks-motion);
}

.form-check.form-switch:hover,
.form-check.form-switch:focus-within {
  border-color: var(--sks-border-strong, var(--bs-border-color));
  box-shadow: var(--sks-shadow-sm);
}

.form-switch .form-check-input {
  flex: 0 0 var(--sks-switch-w);
  width: var(--sks-switch-w);
  height: var(--sks-switch-h);
  margin: 0;
  background-color: var(--sks-switch-off-bg);
  border-color: var(--sks-switch-off-border);
  cursor: pointer;
  transition:
    background-color var(--sks-motion),
    border-color var(--sks-motion),
    box-shadow var(--sks-motion);
}

.form-switch .form-check-input:hover {
  background-color: var(--sks-switch-off-hover-bg);
  border-color: var(--sks-border-strong, var(--sks-switch-off-border));
}

.form-switch .form-check-input:checked {
  background-color: var(--sks-switch-on-bg, var(--bs-success));
  border-color: var(--sks-switch-on-border, var(--bs-success));
}

.form-switch .form-check-input:checked:hover {
  background-color: var(--sks-switch-on-bg, var(--bs-success));
  border-color: var(--sks-switch-on-border, var(--bs-success));
}

.form-switch .form-check-input:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.form-check-label {
  display: flex;
  align-items: center;
  min-height: var(--sks-switch-h);
  margin: 0;
  color: var(--bs-body-color);
  font-weight: 600;
  line-height: 1.2;
}

.dropdown-menu,
.popover,
.toast {
  background-color: var(--sks-surface-overlay, var(--sks-surface, var(--bs-body-bg)));
  border-color: var(--sks-border, var(--bs-border-color));
  box-shadow: var(--sks-shadow-md);
  border-radius: var(--sks-radius);
  backdrop-filter: blur(var(--sks-backdrop-blur-lg));
}

.popover {
  --bs-popover-header-bg: var(--sks-surface-2);
  --bs-popover-header-color: var(--sks-text-default, var(--bs-body-color));
}

.popover-body,
.tooltip-inner {
  font-size: var(--sks-font-ui-md);
  line-height: 1.35;
}

.tooltip,
.popover {
  z-index: var(--sks-z-popover);
}

.popover.sks-card-popover {
  position: fixed;
  display: none;
  max-width: min(18rem, calc(100vw - 1.5rem));
  pointer-events: none;
  transform: none !important;
}

.popover.sks-card-popover.show {
  display: block;
}

body.media-lightbox-open .tooltip,
body.media-lightbox-open .popover {
  z-index: var(--sks-z-lightbox-popover);
}

.dropdown-item {
  transition: background-color var(--sks-motion), color var(--sks-motion);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--sks-accent-soft);
  color: var(--bs-body-color);
}

.page-link {
  transition: background-color var(--sks-motion), border-color var(--sks-motion), color var(--sks-motion);
}

.page-link:hover,
.page-link:focus {
  background-color: var(--sks-accent-soft);
  border-color: var(--sks-accent-border);
  color: var(--sks-accent);
  box-shadow: 0 0 0 .2rem rgba(var(--sks-primary-text-rgb), .22);
}

.alert {
  border-radius: var(--sks-radius);
  border-width: 1px;
}

.invalid-feedback {
  font-size: var(--sks-font-table);
  border-left: 3px solid var(--sks-accent);
  background: var(--sks-accent-soft);
  border-radius: var(--sks-radius-sm);
  margin-top: var(--sks-space-1);
  padding: var(--sks-space-1) var(--sks-space-2);
}

.btn-group .btn + .btn {
  margin-left: -1px;
}

.btn-group .btn:last-child {
  border-left: none;
  border-right-width: 1px;
}

/* ============================================================================
   MODALS
   ========================================================================== */

/* Bootstrap sperrt den body. In Layouts mit eigenem Root-Scroller muss auch
   das html-Element blockiert werden, damit Wheel-/Touch-Scroll ausserhalb des
   offenen Dialogs nicht an die Seite weitergereicht wird. */
html:has(body.modal-open),
body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.modal-open .modal.show,
body.modal-open .modal.show .modal-body {
  overscroll-behavior: contain;
}

html .modal:not(#confirmModal).show {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

html .modal:not(#confirmModal) > .modal-dialog {
  width: min(calc(100% - 2rem), 68rem);
  max-width: 68rem;
  min-height: 0;
  height: min(52rem, calc(100dvh - 2rem));
  margin: 0 auto;
  align-items: stretch;
}

html .modal:not(#confirmModal) > .modal-dialog > .modal-content {
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

html .modal:not(#confirmModal) > .modal-dialog > .modal-content > .modal-body {
  min-height: 0;
  overflow-y: auto;
}

html #confirmModal > .modal-dialog {
  display: flex;
  min-height: 100%;
  margin: 0 auto;
  align-items: center;
}

.modal .modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--sks-glass-edge);
  min-height: calc(var(--control-h) + var(--sks-space-4));
  padding: 1rem 1.25rem;
  color: var(--bs-body-color);
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-sks-theme="porcelain"] .modal-header .btn-close {
  filter: none;
}

.toast .btn-close {
  filter: none;
}

.modal-content {
  position: relative;
  color: var(--bs-body-color);
  overflow: hidden;
}

.modal-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--sks-line-accent-h);
  pointer-events: none;
  z-index: 3;
}

.modal-body {
  padding: 1.25rem;
  scrollbar-gutter: stable;
}

.modal-footer {
  border-top: 1px solid var(--sks-glass-edge);
  gap: var(--sks-space-2);
  padding: 1rem 1.25rem;
}

.modal-footer > :is(.btn, .btn-group) {
  margin: 0 !important;
}

.modal-footer > .btn {
  min-width: 6.75rem;
}

.modal-footer > .btn.me-auto {
  margin-inline-end: auto !important;
}

/* Shared compact switch row for modal forms. The switch communicates state;
   the surrounding field deliberately stays neutral. */
.modal .modal-flag-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  margin: 0;
  padding: .55rem .75rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
}

.modal .modal-flag-control .form-check-input {
  order: 2;
  float: none;
  margin: 0;
  cursor: pointer;
}

.modal .modal-flag-control .form-check-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .5rem;
  min-height: 0;
  margin: 0;
  color: var(--sks-text-default);
  font-size: var(--sks-font-body-sm);
  font-weight: 600;
  cursor: pointer;
}

.modal .modal-flag-control .form-check-label > i {
  flex: 0 0 auto;
  color: var(--sks-text-muted);
}

.modal .modal-flag-control .form-check-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One modal rhythm across modules. Module CSS may arrange content, but it must
   not redefine the shell, typography or control density. */
html body .modal.sks-modal .modal-header,
html body .modal.sks-modal .modal-footer {
  padding: 1rem 1.25rem;
}

html body .modal.sks-modal .modal-body {
  padding: 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
}

html body .modal.sks-modal .modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}

html body .modal.sks-modal .form-label,
html body .modal.sks-modal legend {
  margin-bottom: .375rem;
  color: var(--sks-text-default);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
}

html body .modal.sks-modal :is(.form-control, .form-select, .input-group-text) {
  min-height: 2.75rem;
  padding-top: .55rem;
  padding-bottom: .55rem;
  font-size: 1rem;
}

html body .modal.sks-modal .input-group > .input-group-text:first-child {
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  padding-inline: .625rem;
  color: var(--sks-text-muted);
  background: transparent;
}

html body .modal.sks-modal form .row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

html body .modal.sks-modal .input-group > .btn {
  min-height: 2.75rem;
}

html body .modal.sks-modal :is(.form-text, .invalid-feedback, .valid-feedback) {
  margin-top: .375rem;
  font-size: .875rem;
  line-height: 1.4;
}

html body .modal.sks-modal :is(.modal-title, legend, .modal-section-title) i {
  display: none !important;
}

html body .modal.sks-modal .form-check-input[type="checkbox"] {
  cursor: pointer;
}

html body .modal.sks-modal .form-check.form-switch .form-check-input {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 1.25rem;
}

.modal-footer [data-modal-action-button][aria-busy="true"] {
  cursor: progress;
}

.modal-footer .modal-action-feedback-spinner {
  flex: 0 0 auto;
}

@media (max-width: 575.98px) {
  html .modal:not(#confirmModal) > .modal-dialog {
    width: calc(100% - 1rem);
    height: calc(100dvh - 1rem);
  }

  html body .modal.sks-modal :is(.modal-header, .modal-body, .modal-footer) {
    padding-inline: 1rem;
  }

  .modal-footer > .btn:not(.me-auto) {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.modal {
  z-index: var(--sks-z-modal);
}

.modal-backdrop {
  z-index: var(--sks-z-modal-backdrop);
}

#confirmModal.confirm-modal--over-lightbox {
  z-index: var(--sks-z-confirm-lightbox);
}

.modal-backdrop.confirm-backdrop--over-lightbox {
  z-index: var(--sks-z-confirm-lightbox-backdrop);
}

#confirmModal.confirm-modal--stacked {
  z-index: var(--sks-z-modal-stacked);
}

.modal-backdrop.confirm-backdrop--stacked {
  z-index: var(--sks-z-modal-stacked-backdrop);
}

/* Modal Backdrop */

.modal-backdrop {
  --bs-backdrop-bg: var(--sks-ci-black);
  --bs-backdrop-opacity: .85;
}

/* Busy Overlays */

.modal-spinner-overlay,
#loadingOverlay {
  position: absolute;
  inset: 0;
  z-index: var(--sks-z-base-overlay);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
}

.modal-spinner-overlay {
  background-color: var(--sks-busy-overlay-bg);
}

#loadingOverlay {
  position: fixed;
  z-index: var(--sks-z-loading);
  background-color: var(--sks-loading-overlay-bg);
}

[data-bs-theme="dark"] .modal-spinner-overlay {
  background-color: var(--sks-busy-overlay-bg);
}

[data-bs-theme="dark"] #loadingOverlay {
  background-color: var(--sks-loading-overlay-bg);
}

.modal-spinner-overlay .spinner-border,
#loadingOverlay .spinner-border {
  display: none;
}

.modal-spinner-overlay::before,
.modal-spinner-overlay::after,
#loadingOverlay::before,
#loadingOverlay::after {
  content: "";
  position: absolute;
  top: 0;
  height: var(--sks-busy-bar-h);
  pointer-events: none;
}

.modal-spinner-overlay::before,
#loadingOverlay::before {
  right: 0;
  left: 0;
  background: var(--sks-busy-track-bg);
}

.modal-spinner-overlay::after,
#loadingOverlay::after {
  left: -42%;
  width: 42%;
  background: var(--sks-busy-bar-bg);
  animation: sks-busy-progress 1.15s ease-in-out infinite;
}

.modal-spinner-overlay:not(.is-busy)::after,
#loadingOverlay:not(.is-busy)::after {
  animation-play-state: paused;
}

.sks-top-loading-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--sks-z-top-loading);
  height: var(--sks-busy-bar-h);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}

.sks-top-loading-bar.is-busy {
  opacity: 1;
}

.sks-top-loading-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sks-busy-track-bg);
}

.sks-top-loading-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -42%;
  width: 42%;
  height: var(--sks-busy-bar-h);
  background: var(--sks-busy-bar-bg);
  animation: sks-busy-progress 1.15s ease-in-out infinite;
}

@keyframes sks-busy-progress {
  0% {
    transform: translateX(0);
  }

  52% {
    transform: translateX(180%);
  }

  100% {
    transform: translateX(338%);
  }
}

/* ============================================================================
   SHARED GLASS SYSTEM – SMOKED GLASS / FROSTED GLASS
   The page background connects modules; cards use translucent fills.
   Only overlays carry blur. Headers and toolbars remain open.
   Keep fixed dialogs outside a transformed/filtered ancestor.
   ========================================================================== */

html .card,
html .card.shadow-sm,
html .kpi-tile {
  --sks-card-current-bg: var(--sks-glass-card);
  background: linear-gradient(145deg, var(--sks-glass-highlight), transparent 58%), linear-gradient(315deg, var(--sks-glass-reflection), transparent 48%), var(--sks-card-current-bg, var(--sks-glass-card));
  border: 1px solid var(--sks-card-edge);
  border-radius: var(--sks-radius-panel);
  transition: background-color var(--sks-motion), border-color var(--sks-motion), box-shadow var(--sks-motion);
  --sks-card-current-shadow: var(--sks-card-shadow);
  box-shadow: var(--sks-card-current-shadow);
}

html .card:hover,
html .card.shadow-sm:hover,
html .kpi-tile:hover {
  --sks-card-current-bg: var(--sks-card-hover-bg);
  border-color: var(--sks-card-hover-edge);
  --sks-card-current-shadow: var(--sks-card-hover-shadow);
  box-shadow: var(--sks-card-current-shadow);
}

html .card .card,
html .card .table-responsive {
  --sks-card-current-shadow: none;
  box-shadow: none;
}

html :is(.chart-panel-title, .modal-title, .card-title) {
  color: var(--sks-text-default);
  font-weight: 700;
  letter-spacing: -.015em;
}

html :is(.btn-secondary, .btn-outline-secondary, .page-link) {
  --bs-btn-color: var(--sks-text-default);
  --bs-btn-bg: var(--sks-button-bg);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--sks-text-default);
  --bs-btn-hover-bg: var(--sks-button-hover-bg);
  --bs-btn-hover-border-color: var(--sks-control-edge);
  --bs-btn-active-color: var(--sks-text-default);
  --bs-btn-active-bg: var(--sks-button-hover-bg);
  --bs-btn-active-border-color: var(--sks-control-edge);
  --bs-btn-disabled-color: var(--sks-text-muted);
  --bs-btn-disabled-bg: var(--sks-control-muted-bg);
  --bs-btn-disabled-border-color: transparent;
  color: var(--sks-text-default);
  background: var(--sks-button-bg);
  border-color: transparent;
  box-shadow: var(--sks-control-shadow);
}

html :is(.btn-secondary, .btn-outline-secondary, .page-link):hover {
  color: var(--sks-text-default);
  background: var(--sks-button-hover-bg);
  border-color: var(--sks-control-edge);
}

html :is(.btn-secondary, .btn-outline-secondary):is(.active, .show, :active),
html .btn-check:checked + :is(.btn-secondary, .btn-outline-secondary),
html .page-item.active > .page-link {
  color: var(--sks-text-default);
  background: var(--sks-button-hover-bg);
  border-color: var(--sks-control-edge);
}

html :is(.btn-secondary, .btn-outline-secondary):is(:disabled, .disabled) {
  color: var(--bs-btn-disabled-color);
  background: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  box-shadow: none;
}

html .btn:focus-visible,
html .page-link:focus-visible {
  outline: 2px solid var(--sks-primary-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 .2rem rgba(var(--sks-primary-text-rgb), .22);
}

html .dropdown-menu {
  padding: var(--sks-space-2);
}

html .dropdown-item {
  border-radius: var(--sks-radius-sm);
  padding: var(--sks-space-2) var(--sks-space-3);
}

html .dropdown-item:is(.active, :active),
html .nav-link.active {
  color: var(--sks-text-default);
  background: var(--sks-button-hover-bg);
  box-shadow: inset 3px 0 0 var(--sks-accent);
}

html :is(.form-control, .form-select) {
  background-color: var(--sks-control-bg);
  color: var(--sks-text-default);
  border-color: var(--sks-control-border);
  box-shadow: var(--sks-control-shadow);
}

html:is([data-sks-theme="light"], [data-sks-theme="dark"], [data-sks-theme="purple"]) .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html :is(.form-control, .form-select):focus {
  background-color: var(--sks-surface);
  border-color: var(--sks-control-border-hover);
  box-shadow: 0 0 0 .2rem rgba(var(--sks-primary-text-rgb), .22);
}

html :is(.form-control, .form-select):disabled,
html .form-control[readonly],
html .input-group-text,
html .form-check.form-switch {
  background-color: var(--sks-control-muted-bg);
}

/* Prefix icons belong to the field instead of forming another boxed control. */
html :is(.filter-panel-card, [id$="FiltersCard"]) .input-group-text {
  color: var(--sks-text-muted);
  background-color: var(--sks-control-bg);
  border-color: var(--sks-control-edge);
  border-inline-end: 0;
}

html :is(.filter-panel-card, [id$="FiltersCard"]) .input-group-text + :is(.form-control, .form-select) {
  border-inline-start: 0;
}

html .form-control::placeholder {
  color: var(--sks-placeholder-color, var(--sks-text-muted));
  opacity: 1;
}

html .form-label {
  color: var(--sks-text-default);
  font-weight: 500;
}

html .modal-content,
html .card.login-card,
html .card.login-card:hover {
  --sks-card-current-shadow: var(--sks-shadow-md);
  background: var(--sks-surface-overlay);
  border: 1px solid var(--sks-glass-edge);
  border-radius: var(--sks-radius-overlay);
  box-shadow: var(--sks-shadow-md);
}

html .card.login-card {
  -webkit-backdrop-filter: blur(var(--sks-glass-blur));
  backdrop-filter: blur(var(--sks-glass-blur));
}

html :is(.modal-header, .modal-footer, .card-header) {
  background: var(--sks-glass-toolbar);
  border-color: var(--sks-glass-edge);
}

html .modal-body {
  background: transparent;
}

html .modal-title {
  font-size: var(--sks-font-heading-md);
}

html .modal-content::before {
  background: linear-gradient(90deg, transparent, var(--sks-accent-border), transparent);
}

html .modal-body :is(.bg-body-tertiary, .bg-light) {
  background: var(--sks-control-muted-bg) !important;
}

/* Bootstrap shadow-sm is important; adapt that utility through the card token. */
html .card.shadow-sm {
  box-shadow: var(--sks-card-current-shadow) !important;
}

/* Shared component owner. !important is limited to Bootstrap utility adapters
   (shadow, text color, font size/weight, spacing) and accessibility/overlay guards. */
/* ============================================================================
   APP SHELL / TOOLBARS / FILTER SURFACES
   ========================================================================== */

.sks-main {
  width: min(calc(100% - clamp(1rem, 3.5vw, 4rem)), var(--sks-layout-max-width));
  max-width: var(--sks-layout-max-width);
}

.sks-app-header,
.sks-main > .sks-toolbar-actions {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--sks-module-header-pt) 0 0;
  backdrop-filter: none;
}

[data-bs-theme="dark"] .sks-app-header,
[data-bs-theme="dark"] .sks-main > .sks-toolbar-actions {
  background: transparent;
}

.sks-app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sks-space-4);
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: var(--sks-space-5) !important;
  padding: var(--sks-space-3) 0;
  backdrop-filter: none;
}

[data-bs-theme="dark"] .sks-app-header {
  background: transparent;
}

.sks-app-header .logo-stack {
  min-width: 0;
}

.sks-app-header-actions {
  display: flex;
  gap: var(--sks-toolbar-gap);
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.sks-app-header-actions > .btn,
.sks-app-header-actions > .dropdown > .btn {
  display: inline-flex;
  min-width: var(--control-h);
  min-height: var(--control-h);
  align-items: center;
  justify-content: center;
}

.sks-app-header-actions-mobile {
  display: none;
}

.sks-mobile-navigation .dropdown-menu {
  max-height: min(38rem, calc(100vh - 5rem));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sks-main > .sks-toolbar-actions {
  margin-bottom: var(--sks-space-6) !important;
}

.sks-main > .sks-toolbar-actions > .sks-toolbar-actions {
  min-height: var(--control-h);
}

.sks-main > .sks-toolbar-actions > .sks-toolbar-actions > .btn:has(> .bi:only-child),
.toolbar-icon-btn,
.sks-main [data-global-card-content-toggle] {
  display: inline-flex;
  width: var(--control-h);
  min-width: var(--control-h);
  min-height: var(--control-h);
  align-items: center;
  justify-content: center;
  padding-inline: 0;
}

.sks-main > .sks-toolbar-actions > .sks-toolbar-actions > .btn:has(> .bi:only-child) > .bi,
.toolbar-icon-btn > .bi,
.sks-main [data-global-card-content-toggle] > .bi {
  display: block;
  line-height: 1;
}

.sks-app-header .btn-group,
.sks-main > .sks-toolbar-actions .btn-group,
.filter-panel-card .btn-group,
[id$="FiltersCard"] .btn-group,
.stock-panel-card .btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sks-space-2);
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sks-app-header .btn-group > .btn,
.sks-main > .sks-toolbar-actions .btn-group > .btn,
.filter-panel-card .btn-group > .btn,
[id$="FiltersCard"] .btn-group > .btn,
.stock-panel-card .btn-group > .btn {
  display: inline-flex;
  min-height: var(--sks-control-icon);
  align-items: center;
  justify-content: center;
  gap: var(--sks-inline-gap-sm);
  margin-left: 0 !important;
  border-radius: var(--sks-radius-sm) !important;
}

.sks-app-header .btn-group > .btn + .btn,
.sks-main > .sks-toolbar-actions .btn-group > .btn + .btn,
.filter-panel-card .btn-group > .btn + .btn,
[id$="FiltersCard"] .btn-group > .btn + .btn,
.stock-panel-card .btn-group > .btn + .btn {
  margin-left: 0 !important;
}

.sks-app-header .btn-group > .btn:last-child,
.sks-main > .sks-toolbar-actions .btn-group > .btn:last-child,
.filter-panel-card .btn-group > .btn:last-child,
[id$="FiltersCard"] .btn-group > .btn:last-child,
.stock-panel-card .btn-group > .btn:last-child {
  border-left-width: 1px !important;
}

.toolbar-button-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sks-space-2);
  align-items: center;
}

.toolbar-button-row > .btn {
  display: inline-flex;
  min-height: var(--sks-control-icon);
  align-items: center;
  justify-content: center;
  gap: var(--sks-inline-gap-sm);
}

.sks-main :is(
  #customersList,
  #representivesList,
  #suppliersList,
  #suppliersProductsList,
  #employeesList,
  #userList,
  #wheelchairsList,
  #warehouseList,
  #productionList,
  #tradingOrdersList,
  #repairsList,
  #qualityList,
  #sonderbauList,
  #colorsList,
  #messagesList
) {
  min-height: var(--sks-module-list-min-h);
}

.infinite-sentinel {
  min-height: var(--sks-infinite-sentinel-min-h);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

.toolbar-text-label {
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1.15;
  color: var(--bs-body-color);
  white-space: nowrap;
}

.page-subtitle {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-body-sm);
  font-weight: 600;
}

/* Keep module content aligned when a page has a toolbar but no filter panel. */
.sks-module-content-after-toolbar {
  margin-top: var(--sks-space-6);
}

.filter-panel-card,
[id$="FiltersCard"] {
  margin-top: 0 !important;
  margin-bottom: var(--sks-space-6) !important;
}

.filter-panel-grid {
  --bs-gutter-x: var(--sks-space-4);
  --bs-gutter-y: var(--sks-space-4);
}

.filter-panel-row + .filter-panel-row {
  margin-top: 0;
}

.filter-panel-card .form-label,
[id$="FiltersCard"] .form-label {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-body-sm);
}

.filter-panel-status-group {
  display: flex;
  min-height: var(--control-h);
  flex-wrap: wrap;
  align-content: stretch;
  align-items: center;
  justify-content: center;
  gap: var(--sks-space-3);
}

.filter-panel-status-group > .btn {
  height: var(--control-h);
  min-height: var(--control-h);
  max-height: var(--control-h);
  line-height: 1;
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Status filters retain their semantic tone when selected. */
html .filter-panel-status-group > .btn-check:checked + .btn-outline-secondary {
  color: var(--bs-white);
  background: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.filter-panel-actions {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sks-space-3);
}

.filter-panel-actions > .btn {
  display: inline-flex;
  flex: 0 0 var(--control-h);
  width: var(--control-h);
  min-width: var(--control-h);
  min-height: var(--control-h);
  align-items: center;
  justify-content: center;
  padding: 0;
}

.filter-panel-active-summary {
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
  gap: var(--sks-space-2);
  order: 99;
  margin-inline-start: auto;
  color: var(--sks-primary-text);
  font-size: var(--sks-font-body-sm);
  font-weight: 600;
  white-space: nowrap;
}

.filter-panel-active-summary > .bi {
  color: inherit;
}

.filter-panel-actions > .filter-panel-action-button {
  order: var(--sks-filter-action-order, 4);
}

/* Reset and search deliberately use the same compact secondary treatment. */
.filter-panel-actions > .filter-panel-action-button.btn-outline-secondary {
  color: var(--sks-text-default);
  background: var(--sks-button-bg);
  border-color: transparent;
}

.filter-panel-actions > .filter-panel-action-button.btn-outline-secondary:hover,
.filter-panel-actions > .filter-panel-action-button.btn-outline-secondary:focus-visible {
  color: var(--sks-text-default);
  background: var(--sks-button-hover-bg);
  border-color: transparent;
}

.modal-stepper > .modal-step-btn,
.modal-stepper > .production-step-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .625rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border-color: var(--sks-control-edge);
  background: var(--sks-button-bg);
  color: var(--sks-text-default);
  font-size: .9375rem;
  font-weight: 700;
}

.modal-stepper {
  display: grid;
  grid-template-columns: repeat(var(--modal-step-count, 4), minmax(0, 1fr));
  gap: .75rem;
}

.modal-stepper--2 { --modal-step-count: 2; }
.modal-stepper--3 { --modal-step-count: 3; }
.modal-stepper--4 { --modal-step-count: 4; }
.modal-stepper--5 { --modal-step-count: 5; }
.modal-stepper--6 { --modal-step-count: 6; }

.modal-stepper > :is(.modal-step-btn, .production-step-btn).is-active {
  border-color: rgba(var(--sks-semantic-primary-rgb), .72);
  background: rgba(var(--sks-semantic-primary-rgb), .16);
  color: var(--sks-primary-text);
  box-shadow: inset 0 -3px 0 rgb(var(--sks-semantic-primary-rgb));
}

.modal-stepper .modal-step-index,
.modal-stepper .production-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--sks-control-muted-bg);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  line-height: 1;
}

.modal-stepper > :is(.modal-step-btn, .production-step-btn).is-active :is(.modal-step-index, .production-step-index) {
  background: rgb(var(--sks-semantic-primary-rgb));
  color: var(--sks-semantic-primary-on);
}

.modal-stepper > :is(.modal-step-btn, .production-step-btn).is-complete {
  border-color: color-mix(in srgb, var(--sks-chart-success) 58%, var(--sks-control-edge));
  color: var(--sks-text-default);
}

.modal-stepper > :is(.modal-step-btn, .production-step-btn).is-complete :is(.modal-step-index, .production-step-index) {
  background: var(--sks-chart-success);
  color: var(--sks-on-success, #0f291d);
}

.repair-product-composer-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 7.25rem;
  justify-content: center;
}

.repair-product-composer-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 220ms ease, opacity 160ms ease;
}

.repair-product-composer-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.repair-product-composer-inner {
  min-height: 0;
  overflow: hidden;
}

.repair-activity-choice {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-color: var(--sks-border-strong);
  background: var(--sks-surface-1);
  color: var(--sks-text-default);
  font-weight: 600;
  box-shadow: none;
}

.repair-activity-choice .repair-activity-check {
  display: none;
}

.repair-activity-choices .btn-check:focus-visible + .repair-activity-choice {
  outline: 2px solid rgb(var(--sks-semantic-primary-rgb));
  outline-offset: 2px;
}

.repair-activity-choices .btn-check:checked + .repair-activity-choice {
  border-color: rgb(var(--sks-semantic-primary-rgb));
  background: rgba(var(--sks-semantic-primary-rgb), .18);
  color: var(--sks-primary-text);
  box-shadow: inset 0 -3px 0 rgb(var(--sks-semantic-primary-rgb));
}

.repair-activity-choices .btn-check:checked + .repair-activity-choice .repair-activity-check {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .repair-product-composer-panel {
    transition: none;
  }
}

/* Production: compact five-step order editor. */
#productionForm .production-step {
  min-height: 0;
}

.production-wheelchair-preview {
  overflow: hidden;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.production-wheelchair-preview-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
  padding: var(--sks-space-2) var(--sks-space-3);
  border-bottom: 1px solid var(--sks-border, var(--bs-border-color));
  font-size: var(--sks-font-sm);
  font-weight: 700;
}

.production-wheelchair-preview-head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-wheelchair-preview-visual {
  display: grid;
  min-height: 13rem;
  place-items: center;
  padding: var(--sks-space-3);
}

.production-wheelchair-preview-visual img {
  display: block;
  width: 100%;
  height: 13rem;
  object-fit: contain;
}

#productionForm .production-editor-card {
  overflow: hidden;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius);
  background: color-mix(in srgb, var(--sks-surface-1) 88%, transparent);
  box-shadow: var(--sks-shadow-sm);
}

#productionForm .production-editor-card-header {
  display: flex;
  align-items: center;
  min-height: 2.35rem;
  padding: .45rem .7rem;
  border-bottom: 1px solid var(--sks-border);
  background: linear-gradient(90deg, rgba(var(--sks-semantic-primary-rgb), .14), transparent 58%);
  color: var(--bs-body-color);
  font-size: var(--sks-font-body-sm);
  font-weight: 700;
}

#productionForm .production-editor-card-body {
  padding: .7rem;
}

@media (max-width: 575.98px) {
  .modal-stepper > :is(.modal-step-btn, .production-step-btn) {
    justify-content: center;
    padding-inline: .35rem;
  }

  .modal-stepper .modal-step-label {
    display: none;
  }

}

.production-quality-overview,
.production-quality-step-card {
  border-color: var(--sks-control-edge) !important;
}

.production-quality-fact {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  padding: .6rem .7rem;
  border: 1px solid var(--sks-control-edge);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
}

.production-quality-fact > .bi {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(var(--sks-semantic-primary-rgb), .12);
  color: var(--sks-primary-text);
}

.production-quality-check-category > .accordion-header .accordion-button {
  min-height: 2.55rem;
  padding: .45rem .65rem;
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--sks-control-muted-bg));
  box-shadow: none;
}

.production-quality-check-category > .accordion-header .accordion-button:not(.collapsed) {
  color: var(--sks-primary-text);
  background: rgba(var(--sks-semantic-primary-rgb), .08);
}

.production-quality-check-category > .accordion-header .accordion-button::after {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-left: .65rem;
  background-size: 1rem;
  opacity: .72;
}

.production-quality-category-heading {
  min-width: 0;
  overflow: hidden;
  font-size: .95rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-quality-category-pills {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
}

.production-quality-category-pills .badge {
  padding: .28rem .48rem;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

.production-quality-check-category .accordion-body {
  padding: .4rem;
  background: var(--bs-body-bg);
}

.production-quality-check-item {
  border-color: var(--sks-control-edge) !important;
  transition: border-color var(--sks-transition-fast), background-color var(--sks-transition-fast);
}

.production-quality-check-item:not(.bg-danger-subtle) {
  background: color-mix(in srgb, var(--bs-body-bg) 96%, var(--sks-control-muted-bg));
}

.production-quality-check-item .btn-sm {
  min-height: 2rem;
  padding-block: .25rem;
}

.production-quality-employee-box {
  flex: 1 1 17rem;
}

.production-quality-error-box {
  flex: 2 1 28rem;
}

.production-quality-item-details :is(.form-control, .form-select, .input-group-text) {
  min-height: 2rem;
  padding-block: .22rem;
  font-size: var(--sks-font-sm);
}

.production-quality-error-label {
  color: var(--sks-danger-text);
  background: rgba(var(--sks-semantic-danger-rgb), .1);
}

.production-quality-signature {
  border-color: var(--sks-control-edge) !important;
  background: color-mix(in srgb, var(--bs-body-bg) 94%, var(--sks-control-muted-bg));
}

.production-quality-signature-pad {
  display: block;
  height: 6.55rem;
  border: 1px solid var(--sks-control-edge);
  cursor: crosshair;
  touch-action: none;
}

.production-quality-check-item:hover {
  border-color: rgba(var(--sks-semantic-primary-rgb), .42) !important;
}

.production-quality-footer-progress {
  flex: 0 0 100%;
  width: 100%;
  padding: 0 0 .65rem;
  border-bottom: 1px solid var(--sks-control-edge);
}

.production-quality-progress-strip {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
}

.production-quality-progress-copy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: .45rem;
  white-space: nowrap;
}

.production-quality-progress-value {
  color: var(--sks-primary-text);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.production-quality-progress-metrics {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  font-size: var(--sks-font-sm);
  font-weight: 600;
}

.production-quality-progress-metric {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--sks-text-muted);
}

.production-quality-progress-metric.is-error {
  color: var(--sks-danger-text);
}

.production-quality-progress-metric.is-complete {
  color: var(--sks-status-success-text);
}

.production-quality-progress-track {
  flex: 1 1 12rem;
  min-width: 7rem;
  width: 100%;
  height: .42rem;
  margin: 0;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  --sks-progress-track: var(--sks-control-muted-bg);
}

@media (max-width: 767.98px) {
  .production-quality-progress-strip {
    flex-wrap: wrap;
    gap: .45rem .7rem;
  }

  .production-quality-progress-track {
    order: 3;
    flex-basis: 100%;
  }
}

.sks-sort-field .input-group {
  flex-wrap: nowrap;
}

.sks-sort-menu-btn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sks-sort-menu-btn::after {
  flex: 0 0 auto;
  margin-left: auto;
}

.sks-sort-menu {
  min-width: min(18rem, calc(100vw - 2rem));
}

.sks-sort-field .sks-sort-dir-btn {
  flex: 0 0 var(--sks-control-h);
  width: var(--sks-control-h);
  min-width: var(--sks-control-h);
  padding-inline: 0;
}

.btn-check:checked + .btn {
  box-shadow: var(--sks-shadow-sm);
}

.title-weight {
  color: var(--bs-emphasis-color);
}

.card-text,
.card .text-muted {
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

.card[data-id],
.media-card {
  overflow: hidden;
}

.card .btn-group,
.card .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sks-card-action-gap);
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.card .btn-group .btn,
.card .card-actions .btn {
  display: inline-flex;
  width: var(--sks-card-action-size);
  min-width: var(--sks-card-action-size);
  height: var(--sks-card-action-size);
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--sks-radius-sm) !important;
  box-shadow: none;
  flex: 0 0 auto;
}

.card .btn-group .btn i,
.card .card-actions .btn i {
  margin: 0 !important;
  font-size: var(--sks-font-title-sm) !important;
  line-height: 1;
}

.card .btn-group .btn + .btn,
.card .card-actions .btn + .btn {
  margin-left: 0;
}

.card .btn-group .btn:last-child,
.card .card-actions .btn:last-child {
  border-left-width: 1px;
}

.card .btn-group .btn-outline-danger,
.card .btn-group .btn-outline-secondary,
.card .btn-group .btn-outline-success,
.card .card-actions .btn-outline-danger,
.card .card-actions .btn-outline-secondary,
.card .card-actions .btn-outline-success,
.card .btn-group .btn-danger,
.card .btn-group .btn-success,
.card .card-actions .btn-danger,
.card .card-actions .btn-success {
  background: transparent;
  border-color: var(--sks-border, transparent);
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

.card .btn-group .btn-warning {
  color: var(--sks-status-warning-contrast);
  background: var(--bs-warning);
  border-color: var(--bs-warning);
}

.production-card .btn-group .btn-outline-success[data-action="export-pulverei-pdf"] {
  color: var(--sks-status-success-text);
  border-color: var(--sks-status-success-border);
  background: var(--sks-status-success-bg);
}

.production-card .btn-group .btn-outline-success[data-action="export-pulverei-pdf"]:hover,
.production-card .btn-group .btn-outline-success[data-action="export-pulverei-pdf"]:focus-visible {
  color: var(--sks-status-success-text);
  border-color: var(--sks-status-success-border);
  background: var(--sks-status-success-bg);
  box-shadow: 0 0 0 .2rem rgba(var(--sks-primary-text-rgb), .22);
}

.card .btn-group .btn-outline-danger:hover,
.card .btn-group .btn-outline-danger:focus-visible,
.card .btn-group .btn-outline-secondary:hover,
.card .btn-group .btn-outline-secondary:focus-visible,
.card .btn-group .btn-outline-success:hover,
.card .btn-group .btn-outline-success:focus-visible,
.card .card-actions .btn-outline-danger:hover,
.card .card-actions .btn-outline-danger:focus-visible,
.card .card-actions .btn-outline-secondary:hover,
.card .card-actions .btn-outline-secondary:focus-visible,
.card .card-actions .btn-outline-success:hover,
.card .card-actions .btn-outline-success:focus-visible,
.card .btn-group .btn-danger:hover,
.card .btn-group .btn-danger:focus-visible,
.card .btn-group .btn-success:hover,
.card .btn-group .btn-success:focus-visible,
.card .card-actions .btn-danger:hover,
.card .card-actions .btn-danger:focus-visible,
.card .card-actions .btn-success:hover,
.card .card-actions .btn-success:focus-visible {
  color: var(--bs-body-color);
  background: var(--sks-hover);
  border-color: var(--sks-border-strong, var(--sks-border));
  box-shadow: none;
}

.card .btn-group .btn-warning:hover,
.card .btn-group .btn-warning:focus-visible,
.card .btn-group .btn-warning.active {
  color: var(--sks-status-warning-contrast);
  background: var(--bs-warning);
  border-color: var(--bs-warning);
}

.card-actions {
  justify-content: flex-start;
  align-items: center;
}

.card-actions .btn {
  margin-left: 0 !important;
}

.entity-card .card-body {
  min-height: 0;
}

.entity-card-main {
  min-height: 0;
  gap: var(--sks-space-1);
}

.entity-card-head {
  min-width: 0;
}

.entity-card-title-stack {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .1rem;
  overflow: hidden;
}

.entity-card-head .title-weight {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sks-text-default);
  font-size: var(--sks-font-lg);
  line-height: 1.25;
}

.entity-card-subtitle {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 600;
  line-height: 1.25;
}

.entity-card-avatar {
  box-shadow: inset 0 0 0 1px rgba(var(--sks-primary-text-rgb), .18);
}

.entity-card-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--sks-space-1);
}

.entity-card-summary-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-button-bg);
}

.entity-card-summary-label {
  flex: 0 0 auto;
  color: var(--sks-text-muted);
  font-size: var(--sks-card-label-size);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.configurator-card-label-hint {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-1);
  cursor: help;
}

.configurator-card-label-hint .bi {
  flex: 0 0 auto;
  color: rgb(var(--sks-semantic-info-rgb));
  font-size: .8rem;
}

.entity-card-summary-value {
  min-width: 0;
  color: var(--sks-text-default);
  font-size: var(--sks-card-text-size);
  font-weight: 700;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.configurator-admin-country-setup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-2);
  padding-top: var(--sks-space-2);
  border-top: 1px solid var(--sks-border);
  color: var(--sks-text-muted);
  font-size: var(--sks-card-label-size);
  cursor: help;
}

.configurator-admin-country-setup strong {
  color: var(--sks-text-default);
}

.configurator-admin-country-setup__steps {
  display: inline-flex;
  margin-inline-start: auto;
  gap: var(--sks-space-1);
}

.configurator-admin-country-setup__steps .is-ready {
  color: rgb(var(--sks-semantic-success-rgb));
}

.entity-card-meta {
  min-height: 1.45em;
  min-width: 0;
}

.sks-card-hint-trigger {
  width: fit-content;
  max-width: 100%;
  min-height: 1.85rem;
  margin-inline-start: calc(var(--sks-space-1) * -1);
  padding: .125rem var(--sks-space-1);
  border-radius: var(--sks-radius-sm);
  cursor: default;
  outline: 0;
}

.sks-card-hint-trigger:focus-visible {
  box-shadow: 0 0 0 .18rem rgba(var(--sks-focus-rgb, 13, 110, 253), .28);
}

.entity-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-card-content,
.module-card-content,
.production-card-content,
.quality-card-content {
  min-width: 0;
  gap: var(--sks-space-1);
}

[data-card-content] {
  transition: opacity var(--sks-motion);
}

[data-card-content].d-none {
  opacity: 0;
}

[data-card-content] .entity-card-meta,
[data-card-content] .quality-card-line {
  margin-bottom: var(--sks-space-1);
}

[data-card-content] .list-group,
[data-card-content] .d-flex.flex-column {
  gap: var(--sks-space-1);
}

[data-card-content] .border.rounded,
[data-card-content] .bg-body-tertiary {
  border-color: var(--sks-border, var(--bs-border-color)) !important;
}

.entity-card-description {
  display: -webkit-box;
  min-height: var(--sks-entity-description-min-h);
  overflow: hidden;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Structured metadata rows are complete records, not a two-line teaser. */
.entity-card-description:has(.entity-card-meta) {
  display: block;
  min-height: 0;
  -webkit-line-clamp: unset;
}

.entity-card-extra {
  display: flex;
  min-height: var(--sks-entity-extra-min-h);
  align-content: flex-start;
  flex-wrap: wrap;
  gap: var(--sks-space-2);
}

.entity-card-extra .badge {
  margin: 0 !important;
}

.entity-card-audit {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-3);
  color: var(--sks-text-muted);
  font-size: var(--sks-card-label-size);
  font-weight: 600;
}

.entity-card-audit-item {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: var(--sks-space-1);
  opacity: .74;
}

.entity-card-audit-item i {
  flex: 0 0 auto;
  color: currentColor;
}

.entity-card-audit-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-card .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sks-card-action-gap);
  justify-content: flex-start;
}

.entity-card .card-actions > .btn {
  margin-left: 0 !important;
  border-radius: var(--sks-radius-sm);
}

.entity-card-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--sks-border, var(--bs-border-color));
}

.entity-card-footer .card-actions {
  justify-content: flex-start;
}

.messages-card .entity-card-head .title-weight,
.messages-card .entity-card-subtitle {
  white-space: normal;
  overflow-wrap: anywhere;
}

.messages-card .entity-card-subtitle {
  line-height: 1.4;
}

.messages-read-state {
  display: flex;
  align-items: center;
  gap: var(--sks-space-1);
  min-height: 1.5rem;
  margin-top: auto;
  padding-top: var(--sks-space-2);
  padding-bottom: var(--sks-space-3);
  color: var(--sks-text-muted);
  font-size: var(--sks-card-label-size);
}

.msg-unseen .messages-read-state {
  color: var(--sks-primary-text);
  font-weight: 700;
}

.messages-unread-dot {
  flex: 0 0 .45rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor;
}

.messages-card-preview {
  -webkit-line-clamp: 3;
}

.messages-card .messages-card-date {
  min-height: var(--sks-module-line-min-h);
  color: inherit;
  font-size: var(--sks-card-text-size);
  font-weight: 400;
}

.messages-card .messages-card-date .entity-card-audit-item {
  opacity: 1;
}

.work-card {
  height: 100%;
  border-color: var(--sks-border, var(--bs-border-color));
  background: var(--sks-surface, var(--bs-body-bg));
}

[data-bs-theme="dark"] .work-card {
  background: var(--sks-surface, var(--bs-body-bg));
}

.work-card .card-body {
  min-height: 0;
  gap: var(--sks-space-1);
}

.work-card .card-body > :not(.mt-auto) {
  min-width: 0;
}

.work-card .fs-3,
.work-card .fs-5 {
  color: var(--bs-emphasis-color);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-card .card-text {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-card .card-body > .fw-normal,
.work-card .card-body > .mb-1,
.work-card .card-body > .mb-2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-card .card-body > .mt-auto {
  flex: 0 0 auto;
  border-top: 1px solid var(--sks-border, var(--bs-border-color));
  margin-top: auto !important;
  padding-top: var(--sks-space-3) !important;
  min-width: 0;
}

.work-card .card-body > .mt-auto .fw-normal,
.work-card .card-body > .mt-auto .card-text {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-body-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-card .btn-group {
  max-width: 100%;
}

.work-card .card-body > .mt-auto > .d-flex {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.module-card-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.module-card-line,
.module-card-order {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-card-line {
  min-height: var(--sks-module-line-min-h);
  line-height: 1.55;
}

.module-card-order {
  min-height: var(--sks-module-order-min-h);
}

.production-card .production-card-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.production-card .production-card-content,
.module-card-content,
.quality-card-content {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.production-card .production-card-line,
.production-card .production-card-order {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-card .production-card-line {
  min-height: var(--sks-module-line-min-h);
  line-height: 1.55;
}

.production-card .production-card-order {
  min-height: 1.25em;
}

.production-card .production-card-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .1rem;
}

.production-card .production-card-customer {
  color: var(--sks-text-default);
  font-size: var(--sks-font-lg);
  font-weight: 700;
  line-height: 1.25;
}

.production-card .production-card-commission {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 600;
  line-height: 1.25;
}

.production-card .production-card-product {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--sks-space-1);
  padding: var(--sks-space-2);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: rgba(var(--sks-primary-text-rgb), .055);
}

.production-card .production-card-product-title,
.production-card .production-card-components {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-2);
  line-height: 1.35;
}

.production-card .production-card-product-title {
  color: var(--sks-text-default);
  font-weight: 700;
}

.production-card .production-card-components {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 600;
}

.production-card .production-card-product-title > span,
.production-card .production-card-components > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-card .production-card-product .bi {
  flex: 0 0 auto;
  color: var(--sks-text-muted);
}

.production-card .production-card-color {
  flex: 0 1 auto;
  color: var(--sks-text-muted);
  font-weight: 600;
}

.production-card .production-card-note,
.production-card .production-card-note-placeholder {
  min-height: var(--sks-production-note-min-h);
  line-height: 1.35;
}

.production-card .production-card-note {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  color: var(--sks-status-warning-text);
  background: var(--sks-status-warning-bg);
  border-color: var(--sks-status-warning-border);
  font-weight: 700;
}

.production-card .production-card-note span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-card .production-card-progress-circle {
  position: absolute;
  z-index: 4;
  top: var(--sks-space-3);
  right: var(--sks-space-3);
  display: grid;
  width: 2.25rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  box-shadow: var(--sks-shadow-sm);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
}

.production-card .production-card-progress-circle:is(.production-progress-tone-p40, .production-progress-tone-p50, .production-progress-tone-p60, .production-progress-tone-p70, .production-progress-tone-p80, .production-progress-tone-p90, .production-progress-tone-p100) {
  color: #102417;
}

.production-card .production-card-footer {
  border-top: 1px solid var(--sks-border);
}

.production-card .production-card-date {
  min-height: var(--sks-module-line-min-h);
}

:is(.production-card :is(.production-card-details-dropdown, .production-card-media-dropdown), .repairs-card .repairs-card-details-dropdown) > .btn {
  border-radius: var(--sks-radius-sm);
}

:is(.production-card :is(.production-card-details-dropdown, .production-card-media-dropdown), .repairs-card .repairs-card-details-dropdown) .dropdown-menu {
  min-width: 12rem;
}

.trading-card .trading-card-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .1rem;
}

.trading-card .trading-card-customer {
  color: var(--sks-text-default);
  font-size: var(--sks-font-lg);
  font-weight: 700;
  line-height: 1.25;
}

.trading-card .trading-card-representative {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 600;
  line-height: 1.25;
}

.trading-card .trading-card-product {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--sks-space-1);
  padding: var(--sks-space-2);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: rgba(var(--sks-primary-text-rgb), .055);
}

.trading-card .trading-card-product-title,
.trading-card .trading-card-product-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-2);
  line-height: 1.35;
}

.trading-card .trading-card-product-title {
  color: var(--sks-text-default);
  font-weight: 700;
}

.trading-card .trading-card-product-meta {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 600;
}

.trading-card .trading-card-product-title > span,
.trading-card .trading-card-product-meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trading-card .trading-card-product .bi {
  flex: 0 0 auto;
  color: var(--sks-text-muted);
}

.trading-card .trading-card-quantity,
.trading-card .trading-card-type {
  flex: 0 1 auto;
  color: var(--sks-text-muted);
  font-weight: 600;
}

.trading-card .trading-card-note {
  display: flex;
  min-height: var(--sks-production-note-min-h);
  align-items: center;
  gap: var(--sks-space-2);
  color: var(--sks-status-warning-text);
  background: var(--sks-status-warning-bg);
  border-color: var(--sks-status-warning-border);
  font-weight: 700;
  line-height: 1.35;
}

.trading-card .trading-card-note .bi {
  flex: 0 0 auto;
  color: currentColor;
}

.trading-card .trading-card-note span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trading-card .trading-card-footer {
  border-top: 1px solid var(--sks-border);
}

.trading-card .trading-card-date {
  min-height: var(--sks-module-line-min-h);
}

.repairs-card .repairs-card-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .1rem;
}

.repairs-card .repairs-card-customer {
  color: var(--sks-text-default);
  font-size: var(--sks-font-lg);
  font-weight: 700;
  line-height: 1.25;
}

.repairs-card .repairs-card-company {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 600;
  line-height: 1.25;
}

.repairs-card .repairs-card-object {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--sks-space-1);
  padding: var(--sks-space-2);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: rgba(var(--sks-primary-text-rgb), .055);
}

.repairs-card .repairs-card-object-title,
.repairs-card .repairs-card-object-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-2);
  line-height: 1.35;
}

.repairs-card .repairs-card-object-title {
  color: var(--sks-text-default);
  font-weight: 700;
}

.repairs-card .repairs-card-object-meta {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 600;
}

.repairs-card .repairs-card-object-title > span,
.repairs-card .repairs-card-object-meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repairs-card .repairs-card-object .bi {
  flex: 0 0 auto;
  color: var(--sks-text-muted);
}

.repairs-card .repairs-card-place {
  flex: 0 1 auto;
  color: var(--sks-text-muted);
  font-weight: 600;
}

.repairs-card .repairs-card-note {
  display: flex;
  min-height: var(--sks-production-note-min-h);
  align-items: center;
  gap: var(--sks-space-2);
  color: var(--sks-status-warning-text);
  background: var(--sks-status-warning-bg);
  border-color: var(--sks-status-warning-border);
  font-weight: 700;
  line-height: 1.35;
}

.repairs-card .repairs-card-note .bi {
  flex: 0 0 auto;
  color: currentColor;
}

.repairs-card .repairs-card-note span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repairs-card .repairs-card-footer {
  border-top: 1px solid var(--sks-border);
}

.repairs-card .repairs-card-date {
  min-height: var(--sks-module-line-min-h);
}

.warehouse-kanban-order-ribbon {
  z-index: 2;
}

.warehouse-kanban-order-head {
  padding-top: 2.75rem;
}

.warehouse-kanban-order-card .production-card-meta {
  flex: 1 1 auto;
}

.warehouse-kanban-order-card .production-card-customer {
  display: block;
}

.warehouse-kanban-order-product .bi,
.warehouse-kanban-order-note .bi {
  flex: 0 0 auto;
}

.warehouse-kanban-order-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--sks-space-1);
}

.warehouse-kanban-order-meta-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-2);
  padding: 0;
}

.warehouse-kanban-order-meta-line .bi {
  flex: 0 0 auto;
  color: var(--sks-text-muted);
}

.warehouse-kanban-order-meta-label {
  flex: 0 0 auto;
  color: var(--sks-text-muted);
  font-size: var(--sks-card-label-size);
  font-weight: 500;
  letter-spacing: 0;
}

.warehouse-kanban-order-meta-value {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 500;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-kanban-order-footer {
  border-top: 1px solid var(--sks-border);
}

.warehouse-kanban-order-actions.btn-group {
  flex-wrap: wrap;
  gap: var(--sks-space-2);
}

.warehouse-kanban-order-actions.btn-group > .btn {
  border-radius: var(--sks-radius-sm);
}

.warehouse-kanban-order-done {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-1);
  color: var(--sks-status-success-text);
  font-size: var(--sks-font-sm);
  font-weight: 800;
}

.production-quality-progress,
.sks-upload-progress {
  display: block;
  width: 100%;
  height: var(--sks-progress-h-md);
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--sks-progress-track, var(--bs-border-color));
}

.production-quality-progress {
  accent-color: var(--bs-success);
}

.sks-upload-progress {
  accent-color: var(--bs-primary);
}

/* End-control templates: compact category navigation and question list. */
.production-quality-search-field {
  grid-column: span 3;
}

.production-quality-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

.production-quality-category {
  min-width: 0;
  min-height: 7rem;
}

.production-quality-category .metric-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--sks-card-local-body-padding, var(--sks-space-3));
}

.production-quality-category-select {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sks-text-default);
  text-align: left;
}

.production-quality-category-select .metric-card-heading {
  width: 100%;
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-1);
  padding-inline-end: 6.5rem;
}

.production-quality-category-select .metric-card-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-quality-category-select .metric-card-value {
  font-size: clamp(1.5rem, 2vw, 2.25rem);
}

.production-quality-category-controls {
  position: absolute;
  z-index: 2;
  top: var(--sks-card-local-body-padding, var(--sks-space-3));
  right: var(--sks-card-local-body-padding, var(--sks-space-3));
  display: flex;
  align-items: center;
  gap: var(--sks-space-1);
}

.production-quality-category-inactive {
  display: inline-flex;
  width: 1.875rem;
  height: 1.875rem;
  align-items: center;
  justify-content: center;
  color: var(--sks-status-danger-text);
  font-size: .55rem;
}

.production-quality-category-select:focus-visible {
  outline: 2px solid var(--sks-primary-text);
  outline-offset: 3px;
  border-radius: var(--sks-radius-sm);
}

.production-quality-actions {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sks-space-1);
}

:is(#productionQualityCategories, #productionQualityQuestions) :is(.production-quality-actions .btn, .production-quality-drag-handle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  min-height: 1.875rem;
  padding: 0;
  font-size: var(--sks-font-ui-sm);
}

:is(#productionQualityCategories, #productionQualityQuestions) .production-quality-drag-handle {
  flex-shrink: 0;
  cursor: grab;
}

@media (max-width: 1199.98px) {
  .production-quality-filter-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .production-quality-filter-layout .compact-filter-actions {
    grid-column: 1 / -1;
  }

  .production-quality-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .production-quality-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 399.98px) {
  .production-quality-category-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .production-quality-filter-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .production-quality-filter-layout .production-quality-search-field,
  .production-quality-filter-layout .compact-filter-actions {
    grid-column: 1;
  }
}

.production-quality-table {
  min-width: 28rem;
}

.production-quality-table > thead > tr > th {
  font-size: var(--sks-font-ui-sm);
  font-weight: 500;
  color: var(--sks-text-muted);
  border-bottom: 1px solid var(--sks-border-strong);
}

.production-quality-table > tbody > tr > td {
  padding: var(--sks-space-2);
  border-bottom-color: var(--sks-border);
}

.production-quality-table > tbody > tr:last-child > td {
  border-bottom: 0;
}

.production-quality-table .production-quality-col-drag { width: 2rem; }
.production-quality-table .production-quality-col-models { width: 12rem; }
.production-quality-table .production-quality-col-status { width: 5.5rem; }
.production-quality-table .production-quality-col-actions { width: 4.5rem; }

.production-quality-question-title {
  font-size: var(--sks-font-body-sm);
  font-weight: 600;
  line-height: 1.4;
}

.production-quality-question-description {
  font-size: var(--sks-font-ui-sm);
  line-height: 1.4;
  color: var(--sks-text-muted);
  margin-top: .125rem;
}

.production-quality-model-summary {
  display: block;
  max-width: 18rem;
  overflow: hidden;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-quality-model-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  width: 100%;
}

.production-quality-model-choice {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: .6rem;
  min-height: 3.75rem;
  margin: 0;
  padding: .55rem .65rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
  color: var(--sks-text-default);
  cursor: pointer;
  transition: border-color var(--sks-transition-fast), background-color var(--sks-transition-fast), box-shadow var(--sks-transition-fast);
}

.production-quality-model-choice:hover {
  border-color: var(--sks-accent-border);
  background: var(--sks-hover);
}

.production-quality-model-mode .btn-check:focus-visible + .production-quality-model-choice {
  outline: 2px solid rgb(var(--sks-semantic-primary-rgb));
  outline-offset: 2px;
}

.production-quality-model-mode .btn-check:checked + .production-quality-model-choice {
  border-color: var(--sks-accent-border);
  background: var(--sks-active);
  box-shadow: inset 3px 0 0 rgb(var(--sks-semantic-primary-rgb));
}

.production-quality-model-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-muted-bg);
  color: var(--sks-text-muted);
}

.production-quality-model-mode .btn-check:checked + .production-quality-model-choice .production-quality-model-choice-icon {
  background: rgba(var(--sks-semantic-primary-rgb), .16);
  color: var(--sks-primary-text);
}

.production-quality-model-choice-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.production-quality-model-choice-copy strong {
  font-size: var(--sks-font-body-sm);
  font-weight: 650;
  line-height: 1.25;
}

.production-quality-model-choice-copy small {
  margin-top: .1rem;
  overflow: hidden;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-quality-model-choice-check {
  color: rgb(var(--sks-semantic-primary-rgb));
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--sks-transition-fast), transform var(--sks-transition-fast);
}

.production-quality-model-mode .btn-check:checked + .production-quality-model-choice .production-quality-model-choice-check {
  opacity: 1;
  transform: scale(1);
}

.production-quality-model-count {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  font-weight: 500;
}

.production-quality-status-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  margin: 0;
  padding: .5rem .75rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-muted-bg);
}

.production-quality-status-control .form-check-input {
  order: 2;
  float: none;
  margin: 0;
}

.production-quality-status-control .form-check-label {
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: var(--sks-text-default);
  font-size: var(--sks-font-body-sm);
  font-weight: 600;
}

.production-quality-status-control .form-check-label small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  font-weight: 400;
}

.production-quality-model-selection {
  padding: var(--sks-space-2);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-muted-bg);
}

.production-quality-model-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-2);
}

.production-quality-model-search {
  flex: 1 1 12rem;
}

.production-quality-model-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
  max-height: 11rem;
  overflow-y: auto;
  padding: 1px;
}

.production-quality-model-option.form-switch {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  min-width: 0;
  min-height: 2rem;
  margin: 0;
  padding: .35rem .5rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
  box-shadow: none;
}

.production-quality-model-option.form-switch:has(.form-check-input:checked) {
  border-color: var(--sks-accent-border);
  background: var(--sks-active);
}

.production-quality-model-option.form-switch .form-check-input {
  order: 2;
  flex: 0 0 var(--sks-switch-w);
  width: var(--sks-switch-w);
  height: var(--sks-switch-h);
  margin: 0 0 0 auto;
  border-width: 1px;
}

.production-quality-model-option .form-check-label {
  order: 1;
  flex: 1 1 auto;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--sks-text-default);
  font-size: var(--sks-font-ui-sm);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-quality-active-switch.form-switch {
  width: fit-content;
  min-height: 2rem;
  padding: .3rem .6rem;
  border-radius: var(--sks-radius-sm);
  font-size: var(--sks-font-ui-sm);
}

@media (max-width: 575.98px) {
  .production-quality-model-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .production-quality-model-mode {
    grid-template-columns: 1fr;
  }

  .production-quality-model-list {
    grid-template-columns: 1fr;
  }
}

.production-quality-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--sks-font-ui-sm);
  color: var(--sks-text-muted);
  white-space: nowrap;
}

.production-quality-status .bi { font-size: .45rem; }
.production-quality-status.is-active .bi { color: var(--sks-status-success-text); }

.production-quality-col-drag {
  width: var(--sks-production-quality-drag-col-w);
}

.production-quality-col-status {
  width: var(--sks-production-quality-status-col-w);
}

.production-quality-col-actions {
  width: var(--sks-production-quality-actions-col-w);
}

.production-quality-progress::-webkit-progress-bar,
.sks-upload-progress::-webkit-progress-bar {
  border-radius: 999px;
  background-color: var(--sks-progress-track, var(--bs-border-color));
}

.production-quality-progress::-webkit-progress-value,
.sks-upload-progress::-webkit-progress-value {
  border-radius: 999px;
}

.production-quality-progress::-webkit-progress-value {
  background-color: rgb(var(--sks-semantic-primary-rgb));
}

.sks-upload-progress::-webkit-progress-value {
  background-color: var(--bs-primary);
}

.production-quality-progress::-moz-progress-bar,
.sks-upload-progress::-moz-progress-bar {
  border-radius: 999px;
}

.production-quality-progress::-moz-progress-bar {
  background-color: rgb(var(--sks-semantic-primary-rgb));
}

.sks-upload-progress::-moz-progress-bar {
  background-color: var(--bs-primary);
}

.workload-progress-p0 { width: 0%; background-color: hsl(0, 72%, 42%); }
.workload-progress-p10 { width: 10%; background-color: hsl(12, 72%, 42%); }
.workload-progress-p20 { width: 20%; background-color: hsl(24, 72%, 42%); }
.workload-progress-p30 { width: 30%; background-color: hsl(36, 72%, 42%); }
.workload-progress-p40 { width: 40%; background-color: hsl(48, 72%, 42%); }
.workload-progress-p50 { width: 50%; background-color: hsl(60, 72%, 42%); }
.workload-progress-p60 { width: 60%; background-color: hsl(72, 72%, 42%); }
.workload-progress-p70 { width: 70%; background-color: hsl(84, 72%, 42%); }
.workload-progress-p80 { width: 80%; background-color: hsl(96, 72%, 42%); }
.workload-progress-p90 { width: 90%; background-color: hsl(108, 72%, 42%); }
.workload-progress-p100 { width: 100%; background-color: hsl(120, 72%, 42%); }

.production-progress-tone-p0 { background-color: hsl(0, 72%, 42%); }
.production-progress-tone-p10 { background-color: hsl(12, 72%, 42%); }
.production-progress-tone-p20 { background-color: hsl(24, 72%, 42%); }
.production-progress-tone-p30 { background-color: hsl(36, 72%, 42%); }
.production-progress-tone-p40 { background-color: hsl(48, 72%, 42%); }
.production-progress-tone-p50 { background-color: hsl(60, 72%, 42%); }
.production-progress-tone-p60 { background-color: hsl(72, 72%, 42%); }
.production-progress-tone-p70 { background-color: hsl(84, 72%, 42%); }
.production-progress-tone-p80 { background-color: hsl(96, 72%, 42%); }
.production-progress-tone-p90 { background-color: hsl(108, 72%, 42%); }
.production-progress-tone-p100 { background-color: hsl(120, 72%, 42%); }

.production-card .card-body > .mt-auto {
  width: 100%;
}

.work-card[data-status="Closed"],
.work-card[data-status="Pickup"] {
  opacity: .9;
}

.work-card[data-status="Planning"]::before {
  background: var(--bs-warning);
  opacity: .65;
}

.production-card::before {
  background: var(--bs-danger);
}

.configurator-configuration-card[data-status="draft"]::before {
  background: var(--bs-primary);
}

.configurator-configuration-card[data-status="submitted"]::before {
  background: var(--bs-warning);
}

.configurator-configuration-card[data-status="quoted"]::before {
  background: var(--bs-secondary);
}

.configurator-configuration-card[data-status="ordered"]::before {
  background: var(--bs-success);
}

html .work-card.configurator-configuration-card .production-card-order {
  font-family: inherit;
  font-size: 1.25rem !important;
  line-height: 1.3;
}

.configurator-worklist-action {
  width: min(100%, 32rem);
}

.configurator-worklist-action > .form-control {
  min-width: 10rem;
}

:is(#configuratorWorklistSummary, #configuratorDraftSummary) .configurator-worklist-kpi {
  min-height: 4.5rem;
  transition: border-color var(--sks-motion), box-shadow var(--sks-motion), transform var(--sks-motion), background-color var(--sks-motion);
}

.configurator-worklist-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

.configurator-worklist-summary-item {
  min-width: 0;
}

:is(#configuratorWorklistSummary, #configuratorDraftSummary) .metric-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "heading value";
  align-items: center;
  gap: var(--sks-card-gap);
  padding: var(--sks-card-local-body-padding);
}

:is(#configuratorWorklistSummary, #configuratorDraftSummary) .metric-card-heading {
  grid-area: heading;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sks-space-2);
  min-width: 0;
  min-height: 0;
  margin: 0;
}

:is(#configuratorWorklistSummary, #configuratorDraftSummary) .metric-card-heading .metric-card-title {
  overflow: visible;
  padding: 0;
  font-size: var(--sks-font-base);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

:is(#configuratorWorklistSummary, #configuratorDraftSummary) .metric-card-icon {
  order: -1;
  flex-basis: 2rem;
  width: 2rem;
  height: 2rem;
  font-size: var(--sks-font-base);
}

:is(#configuratorWorklistSummary, #configuratorDraftSummary) .metric-card-value {
  grid-area: value;
  min-height: 0;
  font-size: clamp(1.35rem, 1.7vw, 2rem);
}

#configuratorDraftSummary .configurator-worklist-kpi.is-empty {
  cursor: not-allowed;
  opacity: .48;
}

#configuratorDraftSummary .configurator-worklist-kpi.is-empty.is-active {
  opacity: .62;
}

#configuratorWorklistSummary .configurator-worklist-kpi.is-empty {
  cursor: not-allowed;
  opacity: .48;
}

#configuratorWorklistSummary .configurator-worklist-kpi.is-empty.is-active {
  opacity: .62;
}

.configurator-worklist-kpi-state {
  position: absolute;
  right: var(--sks-space-1);
  bottom: var(--sks-space-1);
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  color: var(--sks-surface, var(--bs-body-bg));
  background: var(--sks-metric-accent, var(--sks-primary-text));
  border-radius: 50%;
  font-size: .625rem;
}

@media (max-width: 991.98px) {
  .configurator-worklist-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .configurator-worklist-summary-grid {
    grid-template-columns: 1fr;
  }
}

.configurator-worklist-card .production-card-meta {
  display: grid;
  gap: var(--sks-space-1);
}

.trading-card::before {
  background: var(--bs-info);
}

.repairs-card::before {
  background: var(--bs-success);
}

.signature-pad {
  display: block;
  width: 100%;
  height: var(--sks-signature-h);
  min-height: var(--sks-signature-h);
  max-height: var(--sks-signature-h);
  border: 1px solid var(--sks-border, var(--bs-border-color)) !important;
  border-radius: var(--sks-radius-sm) !important;
  background: var(--sks-surface, var(--bs-body-bg)) !important;
  box-shadow: none;
  touch-action: none;
}

.production-color-stripe {
  display: inline-block;
  width: var(--sks-color-stripe-w);
  height: var(--sks-color-stripe-h);
}

/* ============================================================================
   WORKLOAD TABLE
   ========================================================================== */

.workload-table {
  border-collapse: collapse;
  border: 0 !important;
  box-shadow: none;
}

.workload-table tbody th,
.workload-table tbody td {
  border: 1px solid var(--sks-border, var(--bs-border-color));
  background: inherit;
  color: inherit;
  font-weight: normal;
  padding: var(--sks-space-2) var(--sks-space-3);
}

.workload-table thead th,
.workload-table thead td {
  background: var(--bs-table-bg);
  color: var(--bs-body-color);
  border: 0 !important;
  padding: var(--sks-space-2) var(--sks-space-3);
  font-weight: normal;
}

.workload-table .table-total-row th,
.workload-table .table-total-row td {
  background: var(--bs-table-bg) !important;
  color: var(--bs-body-color);
  font-weight: 500;
  border: 0 !important;
  padding: var(--sks-space-3);
}

.workload-table.table-bordered {
  border: 0 !important;
}

.workload-table.table-bordered > :not(caption) > * {
  border-width: 0 !important;
}

.workload-chart-canvas-frame {
  position: relative;
  width: 100%;
  height: var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
  min-height: var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
  flex: 1 1 var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
}

.metric-card-sub .workload-absence-entry {
  background: transparent;
  white-space: nowrap;
}

.workload-chart-canvas-frame > .workload-chart-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.workload-chart-canvas.is-clickable {
  cursor: pointer;
}

/* Compact weekly orders: identifier, customer, model, progress and note. */
.workload-orders-table {
  table-layout: fixed;
  min-width: 43rem;
}

.workload-orders-table > thead > tr > th {
  padding: var(--sks-space-2) var(--sks-space-3);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  font-weight: 500;
  border-bottom: 1px solid var(--sks-border-strong);
}

.workload-orders-table > tbody > tr > td {
  padding: var(--sks-space-2) var(--sks-space-3);
  border-bottom-color: var(--sks-border);
  font-size: var(--sks-font-body-sm);
}

.workload-orders-table th:nth-child(1) { width: 16%; }
.workload-orders-table th:nth-child(2) { width: 30%; }
.workload-orders-table th:nth-child(3) { width: 12%; }
.workload-orders-table th:nth-child(4) { width: 19%; }
.workload-orders-table th:nth-child(5) { width: 23%; }

.workload-orders-table > tbody > tr:last-child > td {
  border-bottom: 0;
}

.workload-order-number {
  font-family: var(--sks-font-numeric);
  font-weight: 600;
  white-space: nowrap;
}

.workload-order-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-2);
  border: 0;
  padding: var(--sks-space-1) 0;
  background: transparent;
  color: var(--sks-text-default);
  font-family: var(--sks-font-numeric);
  font-size: var(--sks-font-body-sm);
  font-weight: 600;
  white-space: nowrap;
}

.workload-order-link .bi {
  color: var(--sks-text-muted);
  font-size: 1em;
}

.workload-order-link:hover {
  color: var(--sks-primary-text);
}

.workload-order-link:focus-visible {
  outline: 2px solid var(--sks-primary-text);
  outline-offset: 3px;
  border-radius: var(--sks-radius-sm);
}

.workload-order-customer,
.workload-order-commission,
.workload-order-note {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.workload-order-customer {
  font-weight: 600;
}

.workload-order-commission,
.workload-order-note {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
}

.workload-orders-table .workload-progress-wrap {
  min-width: 0;
}

.workload-progress-wrap {
  min-width: var(--sks-workload-progress-min-w);
}

.workload-progress-track {
  height: var(--sks-progress-h-sm);
}

.workload-progress-input-group {
  flex: 0 0 var(--sks-workload-input-w);
  width: var(--sks-workload-input-w);
}

.workload-progress-input-group .form-control {
  min-width: 4rem;
}

.workload-progress-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sks-workload-input-w);
  gap: var(--sks-space-3);
  align-items: center;
}

@media (max-width: 575.98px) {
  .workload-progress-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .workload-progress-input-group {
    width: 100%;
  }
}

/* Skills Header Vertical */

.skills-header-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  padding: var(--sks-space-1) 0;
  display: inline-block;
}

.skills-empty-cell {
  min-height: var(--sks-empty-state-min-h);
}

.skills-empty-icon {
  font-size: var(--sks-empty-state-icon);
  line-height: 1;
}

.skills-kpi-values {
  line-height: 1.1;
  gap: var(--sks-space-1);
}

.stats-period-label {
  display: inline-flex;
  min-height: var(--control-h);
  pointer-events: none;
  min-width: var(--sks-stats-period-label-min-w);
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  color: var(--bs-body-color);
}

.stats-cards-grid {
  align-content: flex-start;
}

.stats-cards-grid .chart-panel-card {
  min-height: var(--sks-dashboard-card-visual-min-h);
}

.stats-chart-canvas-frame {
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

.stats-chart-canvas-frame--md {
  height: var(--sks-chart-h-md);
}

.stats-chart-canvas-frame--lg {
  height: var(--sks-chart-h-lg);
}

.stats-chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.stats-kpi-row-break {
  height: 0;
  min-height: 0;
}

.stats-period-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sks-space-3) var(--sks-space-4);
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 767.98px) {
  .stats-cards-grid .chart-panel-card {
    min-height: calc(var(--sks-chart-h-sm) + var(--sks-dashboard-summary-h) + var(--sks-dashboard-footer-h) + 5rem);
  }

  .stats-chart-canvas-frame--md,
  .stats-chart-canvas-frame--lg {
    height: var(--sks-chart-h-sm);
  }
}

.stats-period-type {
  flex: 0 1 var(--sks-stats-period-type-w);
}

.stats-period-nav {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
  padding-right: var(--sks-space-1);
}

.stats-period-nav-inner {
  display: inline-flex;
  align-items: center;
}

.stats-period-nav .btn {
  min-width: var(--sks-control-icon);
}

@media (max-width: 575.98px) {
  .stats-period-type,
  .stats-period-nav {
    flex: 1 1 100%;
    width: 100%;
  }

  .stats-period-nav-inner {
    width: 100%;
    justify-content: space-between;
  }

  .stats-period-label {
    flex: 1 1 auto;
  }
}

#qualityForm .quality-form-section {
  padding: 1rem;
  border-radius: var(--sks-radius-sm);
}

#qualityForm .quality-section-heading {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .75rem;
}

#qualityForm .quality-section-heading > i {
  font-size: 1.15rem;
}

#qualityForm textarea.form-control {
  line-height: 1.45;
  resize: vertical;
}

.quality-textarea {
  line-height: 1.5;
  resize: vertical;
}

.quality-textarea--medium {
  min-height: 8rem;
}

.quality-textarea--large {
  min-height: 12rem;
}

#qualityForm .quality-attachments {
  margin-top: 0;
}

#warehouseForm .warehouse-editor-intro {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--sks-space-3);
  padding: 0 0 .65rem;
}

#warehouseForm .warehouse-required-hint {
  margin-left: auto;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  white-space: nowrap;
}

#warehouseForm .warehouse-editor-section {
  min-height: 15rem;
  padding: .2rem 0 .4rem;
}

#warehouseForm .warehouse-editor-stepper {
  margin-inline: 0;
}

#warehouseForm .warehouse-editor-section-title {
  margin: 0 0 .65rem;
  color: var(--sks-text-default);
  font-size: var(--sks-font-body);
  font-weight: 650;
}

#warehouseForm .warehouse-editor-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sks-space-4);
  min-height: 2.5rem;
  margin-bottom: .8rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--sks-border);
}

#warehouseForm .warehouse-editor-section-heading .warehouse-editor-section-title {
  margin-bottom: .15rem;
}

#warehouseForm .warehouse-editor-section-heading p {
  align-self: center;
  margin: 0;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
}

#warehouseForm .warehouse-storage-hint {
  color: var(--sks-text-muted);
  line-height: 1.2;
}

#warehouseForm .warehouse-stock-control {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 2rem;
  padding-top: .1rem;
}

#warehouseForm .warehouse-stock-label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--sks-text-default);
  font-size: var(--sks-font-body-sm);
  font-weight: 500;
  cursor: pointer;
}

#warehouseForm .warehouse-stock-control .form-check-input {
  float: none;
  margin: 0;
  cursor: pointer;
}

#warehouseForm .warehouse-minimum-quantity-field {
  transition: opacity var(--sks-transition-fast);
}

#warehouseForm .warehouse-minimum-quantity-field.is-disabled {
  opacity: .5;
}

#warehouseForm #warehouse_description {
  min-height: 7rem;
  resize: vertical;
}

#warehouseAssignModal .warehouse-assign-list {
  border-top: 1px solid var(--sks-border);
  border-bottom: 1px solid var(--sks-border);
}

#warehouseAssignForm .warehouse-assign-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sks-space-3);
}

#warehouseAssignForm .warehouse-assign-search {
  min-width: 0;
  flex: 1 1 auto;
}

#warehouseAssignForm .warehouse-assign-count {
  flex: 0 0 auto;
}

#warehouseAssignForm .warehouse-assign-hint {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  margin: var(--sks-space-2) 0 var(--sks-space-3);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
}

#warehouseAssignForm .warehouse-assign-columns {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(7rem, .36fr) minmax(8rem, .36fr);
  gap: var(--sks-space-3);
  padding: .45rem .75rem;
  border: 1px solid var(--sks-border);
  border-bottom: 0;
  border-radius: var(--sks-radius-sm) var(--sks-radius-sm) 0 0;
  background: var(--sks-control-muted-bg);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  font-weight: 650;
}

#warehouseAssignForm .warehouse-assign-item {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(17rem, .72fr);
  gap: var(--sks-space-3);
  align-items: center;
  min-height: 3.5rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--sks-border);
  transition:
    background-color var(--sks-motion);
}

#warehouseAssignForm .assign-row:nth-last-child(2) .warehouse-assign-item {
  border-bottom: 0;
}

#warehouseAssignForm .warehouse-assign-item:hover {
  background: var(--sks-control-muted-bg);
}

#warehouseAssignForm .warehouse-assign-item-head {
  display: flex;
  min-width: 0;
  align-items: center;
}

#warehouseAssignForm .warehouse-assign-model-toggle {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-3);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#warehouseAssignForm .warehouse-assign-model-toggle:hover,
#warehouseAssignForm .warehouse-assign-model-toggle:focus-within {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#warehouseAssignForm .warehouse-assign-model-toggle .form-check-input {
  position: static;
  flex: 0 0 auto;
  float: none;
  margin: 0;
}

#warehouseAssignForm .warehouse-assign-model-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-2);
  color: var(--sks-text-default);
  font-size: var(--sks-font-body-sm);
  font-weight: 650;
  line-height: 1.35;
  cursor: pointer;
}

#warehouseAssignForm .warehouse-assign-number {
  flex: 0 0 auto;
}

#warehouseAssignForm .warehouse-assign-controls {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 1fr);
  gap: var(--sks-space-3);
  align-items: center;
}

#warehouseAssignForm .warehouse-assign-quantity {
  display: flex;
  align-items: center;
}

#warehouseAssignForm .warehouse-assign-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#warehouseAssignForm .warehouse-assign-quantity .form-control {
  width: 100%;
  max-width: 6.5rem;
}

#warehouseAssignForm .warehouse-assign-standard {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 2.25rem;
  gap: var(--sks-space-2);
  padding: 0;
}

#warehouseAssignForm .warehouse-assign-standard .form-label {
  margin: 0;
  color: var(--sks-text-default);
  cursor: pointer;
}

#warehouseAssignForm .warehouse-assign-standard .form-check-input {
  float: none;
  margin: 0;
}

#warehouseAssignForm .warehouse-assign-standard .form-check.form-switch {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#warehouseAssignForm :is(.js-asg-qty, .js-asg-std):disabled {
  cursor: not-allowed;
  opacity: .5;
}

#warehouseAssignForm .warehouse-assign-no-results > * {
  margin: var(--sks-space-3) 0;
}

@media (max-width: 575.98px) {
  #warehouseForm .warehouse-editor-intro,
  #warehouseForm .warehouse-editor-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  #warehouseForm .warehouse-required-hint {
    margin-left: 0;
    white-space: normal;
  }

  #warehouseForm .warehouse-editor-section {
    min-height: 0;
  }

  #warehouseAssignForm .warehouse-assign-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #warehouseAssignForm .warehouse-assign-count {
    align-self: flex-start;
  }

  #warehouseAssignForm .warehouse-assign-item {
    grid-template-columns: 1fr;
    gap: var(--sks-space-2);
    padding-block: .75rem;
  }

  #warehouseAssignForm .warehouse-assign-controls {
    padding-inline-start: 2.4rem;
  }

  #warehouseAssignForm .warehouse-assign-columns {
    display: none;
  }

  #warehouseAssignForm .warehouse-assign-field-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  #warehouseAssignForm .warehouse-assign-quantity,
  #warehouseAssignForm .warehouse-assign-standard {
    justify-content: space-between;
    gap: var(--sks-space-2);
  }
}

@media (max-width: 420px) {
  #warehouseAssignForm .warehouse-assign-controls {
    grid-template-columns: 1fr;
  }
}

.warehouse-qr-render-host {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 256px;
  height: 256px;
  overflow: hidden;
}

.employee-chart-scroll {
  height: var(--sks-employee-chart-scroll-h);
  overflow-y: auto;
}

/* ============================================================================
   EMPLOYEE DOTS (COLORED CIRCLES)
   ========================================================================== */

.emp-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sks-chip-min-w);
  max-width: var(--sks-chip-max-w);
  height: var(--sks-chip-h);
  padding: 0 var(--sks-space-2);
  overflow: hidden;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  line-height: 1;
  font-size: var(--sks-font-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 9999px;
  box-shadow: none;
  user-select: none;
}

.emp-dot-orange {
  border-color: var(--sks-status-warning-border);
  background-color: var(--sks-status-warning-bg);
  color: var(--sks-status-warning-text);
  text-shadow: none;
}

.emp-dot-red {
  border-color: var(--sks-accent-border);
  background-color: var(--sks-accent-soft);
  color: var(--sks-danger-text, var(--sks-accent));
  text-shadow: none;
}

.emp-dot-green {
  border-color: var(--sks-status-success-border);
  background-color: var(--sks-status-success-bg);
  color: var(--sks-status-success-text);
  text-shadow: none;
}

.emp-dot-secondary {
  border-color: var(--sks-border-strong, var(--bs-border-color));
  background-color: var(--sks-surface-2, var(--bs-tertiary-bg));
  color: var(--sks-text-muted, var(--bs-secondary-color));
  text-shadow: none;
}

.calendar-legend-dot,
.calendar-legend-swatch {
  width: var(--sks-swatch-size);
  height: var(--sks-swatch-size);
}

.calendar-legend-swatch {
  display: inline-block;
}

.calendar-legend-dot.emp-dot {
  min-width: var(--sks-swatch-size);
  max-width: var(--sks-swatch-size);
  height: var(--sks-swatch-size);
  padding: 0;
  font-size: 0;
}

.calendar-legend {
  padding-top: var(--sks-space-1);
  font-size: var(--sks-font-sm);
}

.calendar-day-holiday,
.calendar-legend-holiday {
  background-color: var(--sks-status-success-bg) !important;
  border-color: var(--sks-status-success-border) !important;
}

.calendar-day-compensation,
.calendar-legend-compensation {
  background-color: var(--sks-status-info-bg) !important;
  border-color: var(--sks-status-info-border) !important;
}

#calendarForm .calendar-scope-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

#calendarForm .calendar-scope-choice {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: .6rem;
  min-height: 3.75rem;
  margin: 0;
  padding: .55rem .65rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
  color: var(--sks-text-default);
  cursor: pointer;
  transition: border-color var(--sks-transition-fast), background-color var(--sks-transition-fast), box-shadow var(--sks-transition-fast);
}

#calendarForm .calendar-scope-choice:hover {
  border-color: var(--sks-accent-border);
  background: var(--sks-hover);
}

#calendarForm .calendar-scope-mode .btn-check:focus-visible + .calendar-scope-choice {
  outline: 2px solid rgb(var(--sks-semantic-primary-rgb));
  outline-offset: 2px;
}

#calendarForm .calendar-scope-mode .btn-check:checked + .calendar-scope-choice {
  border-color: var(--sks-accent-border);
  background: var(--sks-active);
  box-shadow: inset 3px 0 0 rgb(var(--sks-semantic-primary-rgb));
}

#calendarForm .calendar-scope-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-muted-bg);
  color: var(--sks-text-muted);
}

#calendarForm .calendar-scope-mode .btn-check:checked + .calendar-scope-choice .calendar-scope-choice-icon {
  background: rgba(var(--sks-semantic-primary-rgb), .16);
  color: var(--sks-primary-text);
}

#calendarForm .calendar-scope-choice-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#calendarForm .calendar-scope-choice-copy strong {
  font-size: var(--sks-font-body-sm);
  font-weight: 650;
  line-height: 1.25;
}

#calendarForm .calendar-scope-choice-copy small {
  margin-top: .1rem;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  line-height: 1.25;
}

#calendarForm .calendar-scope-choice-check {
  color: rgb(var(--sks-semantic-primary-rgb));
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--sks-transition-fast), transform var(--sks-transition-fast);
}

#calendarForm .calendar-scope-mode .btn-check:checked + .calendar-scope-choice .calendar-scope-choice-check {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 575.98px) {
  #calendarForm .calendar-scope-mode {
    grid-template-columns: 1fr;
  }
}

.calendar-day-weekend {
  background-color: var(--sks-surface-2, var(--bs-tertiary-bg)) !important;
}

.calendar-popover-row {
  display: grid;
  gap: var(--sks-space-1);
  width: 100%;
  min-width: 0;
  padding: var(--sks-space-2) 0;
  border-bottom: 1px solid var(--sks-border, var(--bs-border-color));
}

.calendar-popover-row:first-child {
  padding-top: 0;
}

.calendar-popover-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.calendar-popover-main {
  min-width: 0;
}

.calendar-popover-type {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-popover-person {
  min-width: 0;
  overflow: hidden;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-base);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-popover-meta {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-sm);
  line-height: 1.35;
}

.calendar-popover-separator {
  display: inline-block;
  margin: 0 var(--sks-space-2);
  color: var(--sks-border, var(--bs-border-color));
}

.calendar-popover-note {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: var(--bs-body-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-grid-header {
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sks-space-1);
}

.calendar-grid-days {
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sks-space-2);
}

.calendar-month-placeholder,
.calendar-month-day {
  min-height: var(--sks-empty-state-min-h);
}

.calendar-week-day {
  min-height: var(--sks-calendar-week-day-min-h);
}

.calendar-day-clickable {
  cursor: pointer;
  transition: border-color var(--sks-motion), background-color var(--sks-motion), box-shadow var(--sks-motion);
}

.calendar-day-clickable:hover {
  border-color: var(--sks-border-strong, var(--bs-border-color)) !important;
  background-color: var(--sks-hover);
  box-shadow: none;
}

.day-cell.calendar-day-glass {
  overflow: hidden;
  border-color: var(--sks-border, var(--bs-border-color)) !important;
  box-shadow: none;
  backdrop-filter: none;
}

.day-cell.calendar-day-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}

.day-cell.calendar-day-glass > * {
  position: relative;
  z-index: 1;
}

.day-cell.calendar-day-glass.bg-warning {
  background-color: var(--sks-status-warning-bg) !important;
  border-color: var(--sks-status-warning-border) !important;
}

.day-cell.calendar-day-glass.bg-primary {
  background-color: var(--sks-status-info-bg) !important;
  border-color: var(--sks-status-info-border) !important;
}

.day-cell.calendar-day-glass.bg-info {
  background-color: var(--sks-status-info-bg) !important;
  border-color: var(--sks-status-info-border) !important;
}

.day-cell.calendar-day-glass.bg-secondary {
  background-color: var(--sks-surface-2, var(--bs-tertiary-bg)) !important;
  border-color: var(--sks-border, var(--bs-border-color)) !important;
}

.day-cell.is-drop-target {
  outline: 2px dashed var(--sks-status-info-border);
  outline-offset: -2px;
}

.calendar-week-number {
  font-size: var(--sks-font-xs);
  line-height: 1;
}

.calendar-drag-handle {
  cursor: grab;
}

#sonderbauTagPreset.is-invalid,
#sonderbauEditTagPreset.is-invalid {
  border: 1px solid var(--bs-form-invalid-border-color);
  border-radius: var(--sks-radius-sm);
  padding: var(--sks-space-2);
}

.sonderbau-card-ribbon {
  max-width: calc(100% - var(--sks-space-4));
  min-width: 0;
}

.sonderbau-card-ribbon-title {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sonderbau-tag-pill {
  --bs-btn-padding-y: calc(var(--sks-space-1) / 2);
  --bs-btn-padding-x: calc(var(--sks-space-3) / 2);
  --bs-btn-font-size: var(--sks-font-sm);
  line-height: 1.15;
}

.sonderbau-tag-pill .bi {
  font-size: var(--sks-font-xs);
}

.representives-email-toggle-btn {
  min-width: 3rem;
  padding-inline: var(--sks-space-2);
}

.card .card-actions .representives-email-toggle-btn.btn-outline-secondary,
.card .btn-group .representives-email-toggle-btn.btn-outline-secondary {
  color: var(--bs-secondary-color);
  border-color: var(--sks-border-strong);
  background: transparent;
}

.card .card-actions .representives-email-toggle-btn.btn-outline-secondary:hover,
.card .card-actions .representives-email-toggle-btn.btn-outline-secondary:focus-visible,
.card .btn-group .representives-email-toggle-btn.btn-outline-secondary:hover,
.card .btn-group .representives-email-toggle-btn.btn-outline-secondary:focus-visible {
  color: var(--bs-body-color);
  border-color: var(--sks-border-strong, var(--bs-border-color));
  background: var(--sks-hover);
}

.representives-email-toggle-visual {
  position: relative;
  display: inline-flex;
  width: var(--sks-mini-switch-w);
  height: var(--sks-mini-switch-h);
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.representives-email-toggle-visual.is-on {
  color: var(--sks-status-success-text);
  border-color: var(--sks-status-success-border);
  background: var(--sks-status-success-bg);
}

.representives-email-toggle-visual.is-off {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  border-color: var(--sks-border-strong, var(--bs-border-color));
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.representives-email-toggle-visual__knob {
  width: var(--sks-mini-switch-knob);
  height: var(--sks-mini-switch-knob);
  margin-inline: calc((var(--sks-mini-switch-h) - var(--sks-mini-switch-knob)) / 2);
  border-radius: 50%;
  background: currentColor;
  transition: transform var(--sks-motion);
}

.representives-email-toggle-visual.is-on .representives-email-toggle-visual__knob {
  transform: translateX(calc(var(--sks-mini-switch-w) - var(--sks-mini-switch-h)));
}

.wheelchair-feature-chart {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 1 1 100%;
  gap: var(--sks-space-2);
  margin-top: 0;
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.wheelchair-card-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: var(--sks-space-3);
  overflow: hidden;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.wheelchair-card-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.wheelchair-card-photo.entity-card-media--placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sks-space-2);
  color: var(--sks-text-muted, var(--bs-secondary-color));
  text-align: center;
}

.wheelchair-card-photo.entity-card-media--placeholder .bi {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  opacity: 0.55;
}

.wheelchair-card-photo.entity-card-media--placeholder span {
  font-size: var(--sks-font-body-sm);
  font-weight: 600;
}

.wheelchair-photo-editor {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  gap: var(--sks-space-3);
  align-items: stretch;
}

.wheelchair-photo-preview {
  display: grid;
  min-height: 9rem;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.wheelchair-photo-preview img {
  width: 100%;
  height: 100%;
  min-height: 9rem;
  display: block;
  object-fit: contain;
}

.wheelchair-photo-empty {
  display: grid;
  gap: var(--sks-space-1);
  justify-items: center;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-body-sm);
}

.wheelchair-photo-empty .bi {
  font-size: 1.75rem;
}

.wheelchair-photo-controls {
  display: grid;
  gap: var(--sks-space-2);
}

@media (max-width: 575.98px) {
  .wheelchair-photo-editor {
    grid-template-columns: 1fr;
  }

  .wheelchair-photo-preview,
  .wheelchair-photo-preview img {
    height: 12rem;
    min-height: 12rem;
  }
}

.wheelchair-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sks-feature-value-col) var(--sks-control-icon);
  gap: var(--sks-space-2);
  align-items: center;
  min-width: 0;
  font-size: var(--sks-font-table);
  line-height: 1.2;
}

.employees-feature-chart .wheelchair-feature-row {
  grid-template-columns: minmax(0, 1fr) var(--sks-feature-value-col-sm) var(--sks-feature-note-col);
}

#employeesForm .employees-workload-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

#employeesForm .employees-workload-choice {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: .6rem;
  min-height: 3.75rem;
  margin: 0;
  padding: .55rem .65rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
  color: var(--sks-text-default);
  cursor: pointer;
  transition: border-color var(--sks-transition-fast), background-color var(--sks-transition-fast), box-shadow var(--sks-transition-fast);
}

#employeesForm .employees-workload-choice:hover {
  border-color: var(--sks-accent-border);
  background: var(--sks-hover);
}

#employeesForm .employees-workload-mode .btn-check:focus-visible + .employees-workload-choice {
  outline: 2px solid rgb(var(--sks-semantic-primary-rgb));
  outline-offset: 2px;
}

#employeesForm .employees-workload-mode .btn-check:checked + .employees-workload-choice {
  border-color: var(--sks-accent-border);
  background: var(--sks-active);
  box-shadow: inset 3px 0 0 rgb(var(--sks-semantic-primary-rgb));
}

#employeesForm .employees-workload-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-muted-bg);
  color: var(--sks-text-muted);
}

#employeesForm .employees-workload-mode .btn-check:checked + .employees-workload-choice .employees-workload-choice-icon {
  background: rgba(var(--sks-semantic-primary-rgb), .16);
  color: var(--sks-primary-text);
}

#employeesForm .employees-workload-choice-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#employeesForm .employees-workload-choice-copy strong {
  font-size: var(--sks-font-body-sm);
  font-weight: 650;
  line-height: 1.25;
}

#employeesForm .employees-workload-choice-copy small {
  margin-top: .1rem;
  overflow: hidden;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#employeesForm .employees-workload-choice-check {
  color: rgb(var(--sks-semantic-primary-rgb));
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--sks-transition-fast), transform var(--sks-transition-fast);
}

#employeesForm .employees-workload-mode .btn-check:checked + .employees-workload-choice .employees-workload-choice-check {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 575.98px) {
  #employeesForm .employees-workload-mode {
    grid-template-columns: 1fr;
  }
}

.wheelchair-feature-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

.wheelchair-feature-meter {
  display: block;
  overflow: hidden;
  height: var(--sks-meter-h);
  border-radius: 999px;
  background: var(--sks-progress-track, var(--bs-border-color));
}

.wheelchair-feature-meter > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.wheelchair-feature-row.is-on {
  color: rgb(var(--bs-success-rgb));
}

.wheelchair-feature-row.is-on .wheelchair-feature-meter > span,
.wheelchair-feature-row.is-note .wheelchair-feature-meter > span {
  width: 100%;
}

.wheelchair-feature-row.is-off {
  color: rgb(var(--bs-secondary-rgb));
}

.wheelchair-feature-row.is-note {
  color: rgb(var(--bs-primary-rgb));
}

.wheelchair-feature-value {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--sks-font-sm);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.calendar-events-date {
  width: 30%;
}

.calendar-events-type {
  width: 20%;
}

.calendar-events-employee {
  width: 40%;
}

.calendar-events-action {
  width: 10%;
}

/* Order dates share the saturated semantic colors used by status ribbons. */
html .order-date-value.text-primary {
  color: rgb(var(--bs-primary-rgb)) !important;
}

html .order-date-value.text-warning {
  color: rgb(var(--bs-warning-rgb)) !important;
}

html .order-date-value.text-success {
  color: rgb(var(--bs-success-rgb)) !important;
}

html .card:is(.filter-panel-card, [id$="FiltersCard"]),
html .card:is(.filter-panel-card, [id$="FiltersCard"]):hover {
  position: relative;
  isolation: isolate;
  z-index: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  --sks-card-current-shadow: none;
  box-shadow: none;
}

html .card:is(.filter-panel-card, [id$="FiltersCard"]):has(.dropdown-menu.show),
html .card:is(.filter-panel-card, [id$="FiltersCard"]):has(.compact-filter-more[open]) {
  z-index: var(--sks-z-base-overlay);
}

html .card:is(.filter-panel-card, [id$="FiltersCard"]) > .card-body {
  padding: var(--sks-space-2) 0;
}

/* Compact controls share a row; secondary options expand below it. */
html .compact-filter-layout {
  display: grid;
  grid-template-columns:
    repeat(var(--sks-filter-primary-columns, 3), minmax(0, 1fr))
    minmax(max-content, auto);
  align-items: flex-end;
  gap: var(--sks-space-3);
}

html .compact-filter-layout > .compact-filter-row {
  display: contents;
}

html .compact-filter-layout .compact-filter-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

html .compact-filter-layout .compact-filter-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

html .compact-filter-actions > .compact-filter-more {
  order: 3;
}

html .compact-filter-more {
  flex: 0 0 auto;
  max-width: 100%;
}

html .compact-filter-more[open] {
  position: relative;
  z-index: 2;
}

html .compact-filter-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-2);
  min-height: var(--control-h);
  padding: var(--sks-space-2) var(--sks-space-3);
  color: var(--sks-text-muted);
  border-radius: var(--sks-radius-control);
  list-style: none;
  cursor: pointer;
}

html .compact-filter-more > summary::-webkit-details-marker {
  display: none;
}

html .compact-filter-more > summary::before {
  content: "\203A";
  font-size: 1.3em;
  line-height: 1;
}

html .compact-filter-more[open] > summary::before {
  transform: rotate(90deg);
}

html .compact-filter-more > summary:hover,
html .compact-filter-more[open] > summary {
  color: var(--sks-text-default);
  background: var(--sks-button-bg);
}

html .compact-filter-more > summary:focus-visible {
  outline: 2px solid var(--sks-primary-text);
  outline-offset: 2px;
}

html .stats-kpi-more-control {
  display: flex;
  align-items: center;
}

html .stats-kpi-more-toggle {
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2) var(--sks-space-3);
  color: var(--sks-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--sks-radius-control);
}

html .stats-kpi-more-toggle:hover,
html .stats-kpi-more-toggle.is-open {
  color: var(--sks-text-default);
  background: var(--sks-button-bg);
}

html .stats-kpi-more-toggle:focus-visible {
  outline: 2px solid var(--sks-primary-text);
  outline-offset: 2px;
}

html .stats-kpi-more-toggle .bi {
  transition: transform var(--sks-motion);
}

html .stats-kpi-more-toggle.is-open .bi {
  transform: rotate(90deg);
}

html .stats-kpi-more-contents {
  min-width: 0;
}

html .compact-filter-extra {
  display: grid;
  grid-column: 1 / -1;
  width: 100%;
  grid-template-columns: repeat(var(--sks-filter-primary-columns, 3), minmax(0, 1fr));
  gap: var(--sks-space-3);
  margin-top: var(--sks-space-3);
  padding-top: var(--sks-space-3);
  border-top: 1px solid var(--sks-control-edge);
}

html .compact-filter-extra > .compact-filter-field {
  width: 100%;
  max-width: none;
}

html .compact-filter-extra.is-collapsed {
  display: none;
}

html .configurator-worklist-price-summary {
  display: grid;
  width: 100%;
  gap: var(--sks-space-2);
  margin-bottom: 0;
  color: var(--sks-text-default);
  font-size: var(--sks-font-body);
  font-weight: 400;
}

html .configurator-worklist-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, auto);
  align-items: baseline;
  gap: var(--sks-space-3);
}

html .configurator-worklist-price-row > dt,
html .configurator-worklist-price-row > dd {
  min-width: 0;
  color: inherit;
  font: inherit;
}

html .configurator-worklist-price-row > dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

html .configurator-worklist-price-reason {
  color: inherit;
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

html .configurator-worklist-price-reason:focus-visible {
  border-radius: var(--sks-radius-sm);
  outline: 2px solid var(--sks-focus-ring);
  outline-offset: 2px;
}

html .configurator-card-document-actions {
  display: grid;
  gap: var(--sks-space-3);
  margin-top: var(--sks-space-3);
}

html .configurator-card-document-actions .btn {
  min-height: 2.75rem;
}

html .configurator-worklist-detail-content {
  height: min(92dvh, 72rem);
}

html .configurator-worklist-detail-body {
  min-height: 0;
  overflow: hidden;
  background: var(--sks-body-bg);
}

html .configurator-worklist-detail-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--sks-body-bg);
}

.configurator-worklist-action-modal .configurator-document-upload .production-media-upload-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

.configurator-worklist-action-modal .configurator-document-upload .production-media-upload-option {
  min-height: 3.75rem;
  padding-block: var(--sks-space-2);
}

.configurator-worklist-document-modal .production-media-upload-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

.configurator-worklist-document-modal .production-media-upload-option {
  min-height: 3.75rem;
  padding-block: var(--sks-space-2);
}

.configurator-worklist-document-current {
  display: grid;
  gap: var(--sks-space-2);
  min-width: 0;
}

.configurator-worklist-document-current .btn {
  min-height: 3rem;
}

.configurator-worklist-document-section {
  padding-top: var(--sks-space-4);
  border-top: 1px solid var(--sks-border-color);
}

.configurator-worklist-email-control {
  min-width: 0;
}

.configurator-worklist-primary-action {
  min-height: 3rem;
  font-weight: 700;
  white-space: normal;
}

.configurator-worklist-card .dropdown-menu {
  min-width: 15rem;
}

.configurator-worklist-card:has(.dropdown-menu.show) {
  z-index: var(--sks-z-base-overlay);
  overflow: visible !important;
}

.configurator-worklist-unmapped-list {
  border: 1px solid var(--sks-border-color);
  border-top: 0;
  border-radius: 0 0 var(--sks-radius-sm) var(--sks-radius-sm);
  overflow: hidden;
}

.configurator-worklist-unmapped-list .list-group-item {
  color: var(--sks-text-default);
  background: var(--sks-control-muted-bg);
}

html .modal > .modal-dialog.configurator-worklist-request-dialog {
  height: auto;
  max-height: calc(100dvh - 2rem);
  align-items: center;
}

html .modal > .modal-dialog.configurator-worklist-request-dialog > .configurator-worklist-request-content {
  height: auto;
  max-height: calc(100dvh - 2rem);
}

.configurator-worklist-request-body {
  display: grid;
  gap: var(--sks-space-4);
}

@media (max-width: 575.98px) {
  html .modal > .modal-dialog.configurator-worklist-request-dialog {
    width: calc(100% - 1rem);
    height: auto;
  }
}

@media (max-width: 575.98px) {
  .configurator-worklist-action-modal .configurator-document-upload .production-media-upload-options,
  .configurator-worklist-document-modal .production-media-upload-options {
    grid-template-columns: 1fr;
  }
}

html .configurator-audit-sections {
  gap: var(--sks-space-5) !important;
}

html .configurator-audit-section-title {
  margin: 0 0 var(--sks-space-4);
  padding: 0 0 var(--sks-space-3);
  border-bottom: 1px solid var(--sks-border-color);
}

html .configurator-document-history {
  display: grid;
}

html .configurator-document-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sks-space-3);
  padding-block: var(--sks-space-3);
  border-bottom: 1px solid var(--sks-border-color);
}

html .configurator-document-history-row:first-child {
  padding-top: 0;
}

html .configurator-document-history-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

html .configurator-document-history-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: var(--sks-radius-sm);
  color: var(--bs-info);
  background: color-mix(in srgb, var(--bs-info) 12%, transparent);
}

html .configurator-document-history-icon.is-quote {
  color: var(--bs-warning);
  background: color-mix(in srgb, var(--bs-warning) 14%, transparent);
}

html .configurator-document-history-content {
  min-width: 0;
}

html .configurator-document-history-preview {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-2);
}

@media (max-width: 575.98px) {
  html .configurator-document-history-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  html .configurator-document-history-preview {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

html .configurator-revision-comparison {
  margin-top: var(--sks-space-5);
}

html .configurator-revision-groups {
  display: grid;
  gap: var(--sks-space-5);
}

html .configurator-revision-group {
  min-width: 0;
}

html .configurator-revision-group .table-responsive {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html .configurator-revision-group-title {
  margin: 0;
  padding: 0 0 var(--sks-space-2);
  border-bottom: 1px solid var(--sks-border-color);
  font-size: 0.875rem;
  font-weight: 600;
}

html .configurator-revision-table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  border: 0 !important;
  border-color: var(--sks-border-color);
}

html .configurator-revision-table > :not(caption) > * > * {
  padding: var(--sks-space-3) var(--sks-space-2);
  background: transparent;
  box-shadow: none;
}

html .configurator-revision-table > thead > tr > * {
  color: var(--sks-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

html .configurator-revision-table > tbody > tr:last-child > * {
  border-bottom: 0;
}

html .configurator-audit-embedded {
  padding: var(--sks-space-4);
}

body.configurator-audit-embedded-view {
  padding-block: 0 !important;
  background: transparent;
}

body.configurator-audit-embedded-view #main-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
}

body.configurator-audit-embedded-view #configuratorRoot {
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 767.98px) {
  html .configurator-audit-embedded {
    padding: var(--sks-space-3);
  }
}

@media (max-width: 575.98px) {
  html .card-body.compact-filter-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html .compact-filter-layout .compact-filter-field {
    max-width: none;
  }

  html .compact-filter-layout .compact-filter-actions,
  html .compact-filter-extra {
    grid-column: 1;
  }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  html .card-body.compact-filter-layout {
    grid-template-columns: repeat(var(--sks-filter-primary-columns, 3), minmax(0, 1fr));
  }

  html .compact-filter-layout .compact-filter-actions,
  html .compact-filter-extra {
    grid-column: 1 / -1;
  }
}

html :is(.filter-panel-card, [id$="FiltersCard"]) .form-label {
  font-weight: 500;
}

@media (max-width: 767.98px) {
  html .sks-app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sks-space-2) var(--sks-toolbar-gap) !important;
    align-items: center;
  }

  html .sks-app-header .logo-stack {
    display: contents;
  }

  html .sks-app-header .logo-sksroltec-svg {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, 12rem);
    margin: 0;
  }

  html .sks-app-header .page-subtitle {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    margin-top: 0;
    overflow-wrap: anywhere;
  }

  .sks-app-header-actions-desktop {
    display: none;
  }

  .sks-app-header-actions-mobile {
    display: flex;
    grid-column: 2;
    grid-row: 1;
  }

  .sks-app-header-actions-mobile > .btn,
  .sks-app-header-actions-mobile > .dropdown > .btn {
    width: var(--sks-touch-target, 2.75rem);
    min-width: var(--sks-touch-target, 2.75rem);
    min-height: var(--sks-touch-target, 2.75rem);
    padding-inline: 0;
  }

  .sks-mobile-navigation .dropdown-menu {
    width: min(19rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
  }

  .sks-mobile-navigation .dropdown-item {
    min-height: var(--sks-touch-target, 2.75rem);
    white-space: normal;
  }
}

/* Large business identifiers share the numeric typeface across work cards. */
html :is(.production-card-order, .quality-card-number, .module-card-order) {
  font-family: var(--sks-font-numeric);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

html :is(.production-card-order, .quality-card-number, .module-card-order > .fs-3) {
  font-size: 2.125rem !important;
  line-height: 1.2;
}

html .sks-app-header .page-subtitle {
  font-family: var(--sks-font-numeric);
  font-weight: 600;
  letter-spacing: .015em;
}

/* Shared metric hierarchy and compact, unframed action groups. */
.sks-toolbar-actions {
  column-gap: var(--sks-toolbar-gap) !important;
  row-gap: var(--sks-toolbar-row-gap) !important;
}

/* Module toolbars use one rhythm on every page. The semantic group classes are
   attached by app-ui so the existing PHP toolbar partials keep their behavior. */
.sks-module-toolbar {
  width: 100%;
  align-items: center !important;
}

.sks-module-toolbar-primary,
.sks-module-toolbar-secondary {
  min-width: 0;
  flex-wrap: nowrap;
}

.sks-module-toolbar-secondary {
  flex: 0 0 auto !important;
}

.sks-toolbar-more {
  display: none;
}

.sks-toolbar-more.is-empty {
  display: none !important;
}

@media (max-width: 575.98px) {
  .sks-main > .sks-module-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sks-toolbar-gap) !important;
    align-items: center !important;
  }

  .sks-module-toolbar-primary,
  .sks-module-toolbar-secondary {
    display: flex !important;
    width: auto;
    min-height: var(--sks-touch-target, 2.75rem) !important;
    margin: 0 !important;
  }

  .sks-module-toolbar-primary {
    overflow: hidden;
    flex: 1 1 auto !important;
  }

  .sks-module-toolbar-secondary {
    justify-content: flex-end !important;
  }

  .sks-module-toolbar .btn,
  .sks-module-toolbar .toolbar-icon-btn,
  .sks-module-toolbar .dropdown > .btn {
    width: var(--sks-touch-target, 2.75rem);
    min-width: var(--sks-touch-target, 2.75rem);
    min-height: var(--sks-touch-target, 2.75rem);
    padding-inline: 0;
  }

  .sks-module-toolbar .sks-toolbar-overflow-source {
    display: none !important;
  }

  .sks-module-toolbar-primary > .btn > span:not(.visually-hidden),
  .sks-module-toolbar-primary > a.btn > span:not(.visually-hidden) {
    display: none;
  }

  .sks-toolbar-more {
    display: block;
  }

  .sks-toolbar-more .dropdown-menu {
    width: max-content;
    min-width: min(16rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
  }

  .sks-toolbar-more .dropdown-item {
    width: 100%;
    min-width: 0;
    min-height: var(--sks-touch-target, 2.75rem);
    justify-content: flex-start;
    white-space: normal;
  }
}

/* Center toolbar glyphs independently of the font baseline. */
.sks-toolbar-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sks-inline-gap-sm);
}

.sks-toolbar-actions .btn > .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sks-toolbar-actions .btn > .bi::before {
  vertical-align: 0;
}

/* Compact user permissions matrix. */
.user-permissions-scroll {
  max-height: min(58vh, 32rem);
}

.user-permissions-table {
  min-width: 34rem;
  table-layout: fixed;
}

.user-permissions-table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sks-surface-overlay);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  font-weight: 500;
  border-bottom: 1px solid var(--sks-border-strong);
}

.user-permissions-table th:first-child { width: 32%; }

.user-permissions-table > :is(thead, tbody) > tr > :is(th, td) {
  padding: .45rem var(--sks-space-2);
  vertical-align: middle;
}

.user-permissions-table > tbody > tr > th {
  font-size: var(--sks-font-ui-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.user-permissions-table > tbody > tr > :is(th, td) {
  border-bottom-color: var(--sks-border);
}

.user-permissions-table .user-permission-admin-row > :is(th, td) {
  background: var(--sks-control-muted-bg);
  border-bottom-color: var(--sks-border-strong);
}

.user-permission-admin-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sks-space-3);
  font-size: var(--sks-font-ui-sm);
}

.user-permission-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1.5rem;
  margin: 0;
  padding: 0;
}

.user-permission-switch .form-check-input {
  float: none;
  flex-shrink: 0;
  margin: 0;
  width: var(--sks-switch-w);
  height: var(--sks-switch-h);
  cursor: pointer;
}

#userForm .user-editor-divider {
  border-top: 1px solid var(--sks-border);
  margin-top: var(--sks-space-3);
}

#userForm:not([data-mode="create"]) .user-editor-divider {
  display: none;
}

#userForm .user-editor-auto {
  position: relative;
  margin: 0;
  padding: .75rem .875rem .75rem 3.5rem;
  background: var(--sks-control-muted-bg);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
}

#userForm .user-editor-auto > .form-check-input {
  margin-left: -2.5rem;
  margin-top: .2rem;
}

#userForm .user-editor-auto > .form-check-label {
  min-height: 0;
  font-size: var(--sks-font-body-sm);
  font-weight: 500;
}

#userForm .user-editor-password-hint {
  margin-top: 0;
  color: var(--sks-text-muted);
}

/* Settings: compact dashboard navigation, file previews and system tables. */
.settings-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

#settingsSummary .settings-section-kpi {
  min-width: 0;
  min-height: 7rem;
  padding: 0;
  color: var(--sks-text-default);
  transition: border-color var(--sks-motion), background-color var(--sks-motion), box-shadow var(--sks-motion), transform var(--sks-motion);
}

#settingsSummary .settings-section-kpi[aria-selected="false"]:hover {
  transform: translateY(-1px);
}

#settingsSummary .metric-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "heading value"
    "meta meta";
  align-items: center;
  gap: var(--sks-space-2) var(--sks-card-gap);
  padding: var(--sks-card-local-body-padding);
}

#settingsSummary .metric-card-heading {
  grid-area: heading;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sks-space-2);
  min-height: 0;
  margin: 0;
}

#settingsSummary .metric-card-icon {
  order: -1;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  font-size: var(--sks-font-base);
}

#settingsSummary .metric-card-title {
  min-height: 0;
  padding: 0;
  font-size: var(--sks-font-body-sm);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#settingsSummary .metric-card-value {
  grid-area: value;
  min-height: 0;
  font-size: clamp(1.35rem, 1.8vw, 2rem);
  font-weight: 700;
}

#settingsSummary .metric-card-sub {
  grid-area: meta;
  min-height: 2.7em;
  margin: 0;
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.settings-section-content {
  min-height: 14rem;
}

.settings-loader {
  display: flex;
  min-height: 12rem;
  align-items: center;
  justify-content: center;
  gap: var(--sks-space-3);
  color: var(--sks-text-muted);
  border: 1px dashed var(--sks-border-strong);
  border-radius: var(--sks-radius);
  background: var(--sks-control-muted-bg);
}

.settings-file-card .card-body {
  min-height: 19rem;
}

.settings-file-layout {
  grid-template-columns: minmax(13.5rem, 16rem) minmax(0, 1fr);
}

.settings-file-nav-indicator {
  color: var(--sks-text-muted);
  font-size: .75rem;
  opacity: 0;
}

.settings-file-nav-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .1rem;
}

.settings-file-nav-primary,
.settings-file-nav-secondary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-file-nav-primary {
  color: rgb(var(--sks-semantic-primary-rgb));
  font-size: var(--sks-font-xs);
  font-weight: 400;
  line-height: 1.25;
}

.settings-file-nav-secondary {
  color: var(--sks-text-default);
  font-size: var(--sks-font-ui-sm);
  font-weight: 600;
  line-height: 1.25;
}

.settings-checks-nav-button.active .settings-file-nav-indicator {
  color: rgb(var(--sks-semantic-primary-rgb));
  opacity: 1;
}

.settings-file-detail .card-body {
  min-height: 36rem;
}

#settingsRoot .settings-file-editor {
  min-height: 29rem;
  padding: var(--sks-space-3);
  color: var(--sks-text-default);
  background: var(--sks-control-muted-bg);
  border-color: var(--sks-border);
  line-height: 1.5;
  resize: vertical;
}

#settingsRoot .settings-file-editor:read-only {
  cursor: text;
}

.settings-file-icon {
  display: inline-flex;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sks-control-muted-bg);
  border: 1px solid var(--sks-border);
  font-size: 1.1rem;
}

.settings-file-preview {
  min-height: 10rem;
  max-height: 15rem;
  overflow: hidden;
  padding: var(--sks-space-3);
  color: var(--sks-text-muted);
  background: var(--sks-control-muted-bg);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  font-family: var(--bs-font-monospace);
  font-size: var(--sks-font-ui-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.settings-file-actions {
  border-top: 1px solid var(--sks-border);
}

#settingsLogModal .settings-content-editor {
  min-height: min(72vh, 48rem);
  padding: var(--sks-space-3);
  color: var(--sks-text-default);
  background: var(--sks-control-muted-bg);
  border-color: var(--sks-border);
  line-height: 1.55;
  resize: none;
}

@media (max-width: 1199.98px) {
  .settings-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .settings-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settingsSummary .settings-section-kpi { min-height: 7.75rem; }

  .settings-file-detail .card-body {
    min-height: 29rem;
  }

  #settingsRoot .settings-file-editor {
    min-height: 22rem;
  }
}

#settingsRoot :is(.card-header, .card-body) {
  padding: var(--sks-space-3);
}

#settingsRoot .card-header {
  border-bottom-color: var(--sks-border);
}

#settingsRoot .settings-card-title {
  font-size: var(--sks-font-body-sm);
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

#settingsRoot .card-header .small {
  font-size: var(--sks-card-meta-size);
}

#settingsRoot textarea {
  font-size: var(--sks-font-ui-sm);
  line-height: 1.5;
  padding: .65rem .75rem;
  resize: vertical;
  min-height: 10rem;
}

#settingsRoot .settings-system-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#settingsRoot .settings-system-card > .card-header {
  padding: 0 0 var(--sks-space-2);
  background: transparent;
  border-bottom: 1px solid var(--sks-border);
}

#settingsRoot .settings-system-card > .card-body {
  padding: var(--sks-space-2) 0 0;
}

.settings-checks-layout {
  display: grid;
  grid-template-columns: minmax(13.5rem, 16rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--sks-space-4);
}

.settings-checks-nav {
  display: grid;
  gap: var(--sks-space-1);
}

.settings-checks-nav-button {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sks-space-2);
  width: 100%;
  min-height: 2.65rem;
  padding: .45rem .6rem;
  color: var(--sks-text-muted);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sks-radius-sm);
  transition: color var(--sks-motion), background-color var(--sks-motion), border-color var(--sks-motion);
}

.settings-checks-nav-button:hover {
  color: var(--sks-text-default);
  background: var(--sks-hover);
}

.settings-checks-nav-button.active {
  color: var(--sks-text-default);
  background: rgba(var(--sks-semantic-primary-rgb), .09);
  border-color: rgba(var(--sks-semantic-primary-rgb), .28);
}

.settings-checks-nav-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.settings-checks-nav-title {
  display: block;
  font-size: var(--sks-font-body-sm);
  font-weight: 600;
  line-height: 1.25;
}

.settings-checks-nav-count {
  min-width: 1.5rem;
  padding: .1rem .35rem;
  color: var(--sks-text-muted);
  text-align: center;
  background: var(--sks-control-muted-bg);
  border-radius: 999px;
  font-size: var(--sks-font-ui-sm);
  line-height: 1.25;
}

.settings-checks-nav-button.active .settings-checks-nav-count {
  color: rgb(var(--sks-semantic-primary-rgb));
  background: rgba(var(--sks-semantic-primary-rgb), .12);
}

.settings-checks-content,
.settings-checks-panel {
  min-width: 0;
}

#settingsRoot .settings-table-wrap {
  overflow: auto;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius);
  background: var(--sks-surface-1);
}

#settingsRoot .settings-data-table {
  min-width: 46rem;
}

#settingsChecksGrid .settings-data-table {
  min-width: 40rem;
}

#settingsChecksGrid .settings-data-table > :is(thead, tbody) > tr > :first-child {
  width: 48%;
}

#settingsRoot .settings-data-table code {
  padding: 0;
  color: var(--sks-text-default);
  background: transparent;
  border: 0;
  font-size: .95em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

html[data-sks-theme="porcelain"] #settingsRoot .settings-data-table code {
  color: var(--sks-primary-text);
}

#settingsRoot .settings-table-main {
  min-width: 12rem;
}

#settingsRoot .settings-table-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .5rem;
  margin-top: .15rem;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  font-weight: 400;
  line-height: 1.3;
}

#settingsRoot .settings-table-meta code {
  color: inherit;
  font-weight: 500;
}

#settingsRoot .settings-check-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .12rem;
  width: 100%;
  margin-top: .2rem;
}

#settingsRoot .settings-check-path .settings-check-path-line {
  display: block;
  width: 100%;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[data-sks-theme="porcelain"] #settingsRoot .settings-check-path .settings-check-path-line {
  color: var(--sks-primary-text);
}

html[data-sks-theme="porcelain"] #settingsRoot .settings-table-meta code {
  color: var(--sks-primary-text);
}

#settingsRoot .settings-permission-pair {
  display: inline-grid;
  grid-template-columns: minmax(2.5rem, auto) 1rem minmax(2.5rem, auto);
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}

#settingsRoot .settings-permission-pair > i {
  color: var(--sks-text-muted);
  font-size: .75rem;
  text-align: center;
}

#settingsRoot .settings-state-list {
  display: grid;
  gap: .15rem;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-ui-sm);
  line-height: 1.3;
}

#settingsRoot .settings-state-list span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

#settingsRoot .settings-tree-name .btn-link {
  color: var(--sks-text-default) !important;
}

html[data-sks-theme="porcelain"] #settingsRoot .settings-tree-name .btn-link {
  color: var(--sks-primary-text) !important;
}

#settingsRoot .table > thead > tr > th {
  padding: .58rem .6rem;
  font-size: var(--sks-font-ui-sm);
  font-weight: 600;
  color: var(--sks-text-muted);
  background: var(--sks-control-muted-bg);
  border-bottom: 1px solid var(--sks-border);
  white-space: nowrap;
}

#settingsRoot .table > tbody > tr > td {
  padding: .52rem .6rem;
  font-size: var(--sks-font-ui-sm);
  border-bottom-color: var(--sks-border);
  vertical-align: middle;
}

#settingsRoot .table > tbody > tr:hover > td {
  background: var(--sks-hover);
}

#settingsRoot .table > tbody > tr:last-child > td {
  border-bottom: 0;
}

@media (max-width: 991.98px) {
  .settings-checks-layout {
    grid-template-columns: 1fr;
    gap: var(--sks-space-3);
  }

  .settings-checks-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .settings-checks-nav {
    display: flex;
    overflow-x: auto;
  }

  .settings-checks-nav-button {
    flex: 0 0 11rem;
  }
}

:is(.sonderbau-tag-summary, .warehouse-type-summary) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

:is(.sonderbau-tag-summary-item, .warehouse-type-summary-item) {
  min-width: 0;
}

:is(#sonderbauTagSummary, #warehouseTypeSummary) :is(.sonderbau-tag-kpi, .warehouse-type-kpi) {
  min-height: 7rem;
  transition: border-color var(--sks-motion), box-shadow var(--sks-motion), transform var(--sks-motion), background-color var(--sks-motion);
}

:is(#sonderbauTagSummary, #warehouseTypeSummary) .metric-card-body {
  padding: var(--sks-space-3);
}

:is(#sonderbauTagSummary, #warehouseTypeSummary) .metric-card-heading {
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-1);
}

:is(#sonderbauTagSummary, #warehouseTypeSummary) .metric-card-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#sonderbauTagSummary, #warehouseTypeSummary) .metric-card-value {
  font-size: clamp(1.5rem, 2vw, 2.25rem);
}

@media (max-width: 1199.98px) {
  :is(.sonderbau-tag-summary, .warehouse-type-summary) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  :is(.sonderbau-tag-summary, .warehouse-type-summary) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 399.98px) {
  :is(.sonderbau-tag-summary, .warehouse-type-summary) {
    grid-template-columns: 1fr;
  }
}

.employee-absence-scroll {
  overflow: hidden;
  height: var(--sks-employee-chart-scroll-h);
}

.employee-absence-chart-frame {
  position: relative;
  width: 100%;
  height: var(--sks-employee-chart-scroll-h);
}

.employee-absence-chart-frame > canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.compact-editor-modal-content textarea.form-control {
  min-height: 4.5rem;
  resize: vertical;
}

.compact-editor-modal-content :is(.border.rounded.p-3, .border.rounded-3.p-3) {
  padding: .875rem !important;
}

/* Configurator administration keeps short editors compact while complex
   catalog/access forms remain scrollable within the shared modal shell. */
.configurator-catalog-section {
  min-width: 0;
}

.configurator-catalog-family-card .card-body {
  padding: var(--sks-space-3);
}

.configurator-catalog-version-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--sks-border);
  border-bottom: 1px solid var(--sks-border);
}

.configurator-catalog-version-row {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2) 0;
  border: 0;
  border-top: 1px solid var(--sks-border);
  border-radius: 0;
  background: transparent;
  color: var(--sks-text-default);
  text-align: start;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.configurator-catalog-version-row:first-child {
  border-top: 0;
}

.configurator-catalog-version-row:hover,
.configurator-catalog-version-row:focus-visible {
  border-color: rgb(var(--sks-semantic-primary-rgb));
  background: rgba(var(--sks-semantic-primary-rgb), .08);
  transform: none;
}

.configurator-catalog-version-row.is-active {
  padding-inline: var(--sks-space-2);
  background: rgba(var(--sks-semantic-primary-rgb), .1);
  box-shadow: inset .18rem 0 0 rgb(var(--sks-semantic-primary-rgb));
}

.configurator-catalog-version-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .1rem;
}

.configurator-catalog-version-main > span {
  overflow: hidden;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-catalog-library-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sks-space-3);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-sm);
  font-weight: 700;
}

/* Configurator: guided entry, progress and clearly labelled primary actions. */
#configuratorRoot .configurator-empty-start {
  display: grid;
  max-width: 44rem;
  justify-items: center;
  gap: var(--sks-space-2);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px dashed var(--sks-border);
  border-radius: var(--sks-radius-lg);
  background: var(--sks-surface-1, var(--bs-body-bg));
}

#configuratorRoot .configurator-empty-start p {
  max-width: 34rem;
  margin-bottom: var(--sks-space-3);
}

#configuratorRoot .configurator-empty-start-icon {
  display: inline-flex;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--sks-semantic-primary-rgb), .1);
  color: rgb(var(--sks-semantic-primary-rgb));
  font-size: 1.65rem;
}

/* Configurator: compact, independently collapsible configuration panels. */
body.configurator-booting #configuratorFiltersCard,
body.configurator-booting #configuratorRoot {
  visibility: hidden;
}

body.configurator-booting #configuratorFiltersCard {
  min-height: 5.75rem;
}

#configuratorRoot.configurator-loading-shell {
  min-height: max(32rem, calc(100dvh - 24rem));
}

#configuratorRoot .configurator-panel {
  overflow: hidden;
}

#configuratorRoot .configurator-panel-header {
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

#configuratorRoot .configurator-panel.is-open .configurator-panel-header {
  border-bottom: 1px solid var(--sks-border);
}

#configuratorRoot .configurator-panel-toggle {
  display: flex;
  width: 100%;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3);
  border: 0;
  background: transparent;
  color: var(--sks-text-default);
  font: inherit;
  text-align: start;
}

#configuratorRoot .configurator-panel-toggle:hover,
#configuratorRoot .configurator-panel-toggle:focus-visible {
  background: rgba(var(--sks-semantic-primary-rgb), .08);
}

#configuratorRoot .configurator-panel-toggle .bi {
  flex: 0 0 auto;
  transition: transform .18s ease;
}

#configuratorRoot :is([data-required-badge], [data-missing-badge], [data-group-missing-badge]) {
  display: inline-flex;
  min-height: 0;
  align-items: center;
  padding: .12rem .38rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: .08em;
}

#configuratorRoot :is([data-required-badge], [data-missing-badge], [data-group-missing-badge]).d-none {
  display: none;
}

#configuratorRoot .configurator-panel.is-open .configurator-panel-toggle .bi {
  transform: rotate(180deg);
}

#configuratorRoot .configurator-category-group > .configurator-panel-body {
  padding: var(--sks-space-3);
}

/* Configurator: compact customer and commission pickers. */
#configuratorPartiesBody {
  padding: var(--sks-space-3);
}

#configuratorCustomerField {
  --bs-gutter-y: .85rem;
}

#configuratorCustomerField .form-label {
  margin-bottom: .35rem;
}

#configuratorRoot .configurator-party-picker {
  min-width: 0;
}

#configuratorRoot .configurator-party-input {
  min-width: 0;
}

#configuratorRoot .configurator-party-input .input-group-text {
  min-width: 2.7rem;
  justify-content: center;
  border-color: var(--sks-border);
  background: color-mix(in srgb, var(--sks-surface-muted) 82%, transparent);
  color: var(--sks-text-muted);
}

#configuratorRoot .configurator-party-input:has(.form-control:focus) .input-group-text {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

#configuratorRoot .configurator-party-change-btn {
  min-width: 2.7rem;
  padding-inline: .65rem;
}

#configuratorRoot .configurator-party-new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.7rem;
  width: 2.7rem;
  padding-inline: 0;
}

#configuratorRoot .configurator-group-sections {
  display: grid;
  gap: var(--sks-space-4);
}

#configuratorRoot .configurator-group-section {
  min-width: 0;
  padding-bottom: var(--sks-space-4);
  border-bottom: 1px solid var(--sks-border);
}

#configuratorRoot .configurator-group-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#configuratorRoot .configurator-group-section-head {
  padding-inline: .125rem;
}

#configuratorRoot .configurator-choice {
  position: relative;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

#configuratorRoot .configurator-choice-card {
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  padding: 0;
}

#configuratorRoot .configurator-choice-content {
  display: block;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  padding: var(--sks-space-3);
}

#configuratorRoot .configurator-choice-footer {
  display: flex;
  width: 100%;
  min-height: 2.65rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
  margin-top: auto;
  padding: .6rem var(--sks-space-3);
  border-top: 1px solid var(--sks-border);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  font-size: var(--sks-font-sm);
}

#configuratorRoot .configurator-choice-footer-label {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 700;
  text-transform: uppercase;
}

#configuratorRoot .configurator-choice-footer-value {
  margin-inline-start: auto;
  color: var(--sks-text-default);
  font-weight: 700;
  text-align: end;
}

#configuratorRoot .configurator-choice:has(.configurator-choice-input:checked) .configurator-choice-footer {
  border-top-color: rgba(var(--sks-semantic-primary-rgb), .3);
  background: rgba(var(--sks-semantic-primary-rgb), .08);
}

#configuratorRoot .configurator-choice:hover {
  border-color: rgba(var(--sks-semantic-primary-rgb), .55) !important;
  background: rgba(var(--sks-semantic-primary-rgb), .06);
}

#configuratorRoot .configurator-choice:has(.configurator-choice-input:checked) {
  border-color: rgb(var(--sks-semantic-primary-rgb)) !important;
  background: rgba(var(--sks-semantic-primary-rgb), .12);
  box-shadow: inset .22rem 0 0 rgb(var(--sks-semantic-primary-rgb));
}

#configuratorRoot .configurator-choice:has(.configurator-choice-input:focus-visible) {
  outline: .2rem solid rgba(var(--sks-semantic-primary-rgb), .28);
  outline-offset: .12rem;
}

#configuratorRoot .configurator-colour-palette {
  padding: var(--sks-space-3);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

#configuratorRoot .configurator-colour-palette .input-group-text {
  padding: .25rem .4rem;
  background: var(--sks-control-bg);
}

#configuratorRoot .configurator-colour-palette-swatch {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: .15rem;
  border: 0;
}

@media (min-width: 1200px) {
  #configuratorRoot .configurator-summary-sticky {
    position: sticky;
    z-index: 2;
    top: var(--sks-space-3);
    max-height: calc(100dvh - (2 * var(--sks-space-3)));
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  body.configurator-embedded-preview #configuratorRoot .configurator-summary-sticky.is-following-preview {
    position: sticky;
    top: var(--sks-space-3);
    width: 100%;
    max-height: calc(100dvh - (2 * var(--sks-space-3)));
  }

  #configuratorRoot.configurator-capture-mode .configurator-summary-sticky,
  body.configurator-embedded-preview #configuratorRoot.configurator-capture-mode .configurator-summary-sticky.is-following-preview {
    position: static !important;
    z-index: auto;
    inset: auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto;
  }

  /* Full-page capture tools assemble several scrolled viewports. A sticky
     sidebar and a two-column workspace can otherwise be composited over the
     preceding model section. Keep every capture block in normal document flow. */
  #configuratorRoot.configurator-capture-mode #configuratorWorkspace {
    display: block;
  }

  #configuratorRoot.configurator-capture-mode #configuratorWorkspace > [class*="col-"] {
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }

  #configuratorRoot.configurator-capture-mode #configuratorWorkspace > [class*="col-"] + [class*="col-"] {
    margin-top: var(--sks-space-4);
  }

}

#configuratorRoot .configurator-summary-model,
#configuratorRoot .configurator-summary-totals {
  padding-block: var(--sks-space-3);
}

#configuratorRoot .configurator-summary-model,
#configuratorRoot .configurator-summary-options {
  border-bottom: 1px solid var(--sks-border);
}

#configuratorRoot .configurator-summary-section-label {
  display: block;
  margin-bottom: .2rem;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

#configuratorRoot .configurator-summary-options-toggle {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2) 0;
  border: 0;
  background: transparent;
  color: var(--sks-text-default);
  font-weight: 700;
  text-align: start;
}

#configuratorRoot .configurator-summary-options-toggle:hover,
#configuratorRoot .configurator-summary-options-toggle:focus-visible {
  color: rgb(var(--sks-semantic-primary-rgb));
}

#configuratorRoot .configurator-summary-options-toggle .bi {
  transition: transform var(--sks-transition-fast);
}

#configuratorRoot .configurator-summary-options-toggle[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

#configuratorRoot .configurator-summary-totals {
  display: grid;
  gap: var(--sks-space-2);
}

#configuratorRoot .configurator-summary-primary-actions,
#configuratorRoot .configurator-summary-secondary-actions {
  display: flex;
  gap: var(--sks-space-2);
}

#configuratorRoot .configurator-summary-secondary-actions:not(:has(> .btn:not(.d-none))) {
  display: none;
}

#configuratorRoot .configurator-summary-primary-actions > .btn:not(.d-none),
#configuratorRoot .configurator-summary-secondary-actions > .btn:not(.d-none) {
  min-width: 0;
  flex: 1 1 0;
}

#configuratorRoot .configurator-summary-primary-actions > .btn {
  padding-inline: var(--sks-space-2);
  white-space: normal;
}

#configuratorRoot .configurator-summary-icon-action {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
}

#configuratorRoot .configurator-summary-icon-action .bi {
  font-size: 1.05rem;
}

#configuratorRoot .configurator-price-notice {
  margin: var(--sks-space-1) 0 0;
  padding-top: var(--sks-space-2);
  border-top: 1px solid var(--sks-border);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  line-height: 1.45;
}

.configurator-model-avatar {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  line-height: 1;
}

.configurator-model-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .2rem var(--sks-space-3);
  margin-top: var(--sks-space-2);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
}

.configurator-model-facts > span {
  min-width: 0;
}

.configurator-model-facts strong {
  color: var(--sks-text-default);
  font-weight: 700;
}

.configurator-choice-description {
  min-height: 1.25em;
}

.configurator-choice-description.is-placeholder {
  visibility: hidden;
}

.configurator-equipment-list {
  columns: 2;
  column-gap: 2rem;
  padding-left: 1.25rem;
}

.configurator-equipment-layout.has-photo {
  display: grid;
  grid-template-columns: minmax(9rem, .55fr) minmax(0, 2fr);
  gap: var(--sks-space-4);
  align-items: start;
}

.configurator-equipment-photo {
  --configurator-equipment-photo-inset: .75rem;
  position: relative;
  display: grid;
  place-items: center;
  height: 14rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-lg);
  background: var(--sks-control-muted-bg);
}

.configurator-equipment-photo img {
  position: absolute;
  inset: var(--configurator-equipment-photo-inset);
  width: calc(100% - 1.5rem);
  height: calc(100% - 1.5rem);
  opacity: 0;
  object-fit: contain;
  object-position: center;
  transition: opacity var(--sks-transition-fast);
}

.configurator-equipment-photo.is-loaded img {
  opacity: 1;
}

.configurator-category-content.has-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sks-space-4);
  align-items: start;
}

.configurator-category-image {
  display: block;
  width: 100%;
  max-height: 38rem;
  object-fit: contain;
}

.configurator-category-content.has-image > .configurator-category-image {
  position: static;
  width: 100%;
  height: clamp(10rem, 24vw, 16rem);
  max-height: 16rem;
  background: var(--sks-control-muted-bg);
}

.configurator-category-content.has-image .row {
  --bs-gutter-y: .65rem;
}

.configurator-range-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sks-space-2);
  margin-bottom: .15rem;
}

.configurator-range-head .form-label {
  margin-bottom: 0;
}

.configurator-range-head output {
  flex: 0 0 auto;
  font-size: inherit;
}

.configurator-range-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  min-width: 5.5rem;
  min-height: 1.5rem;
}

.configurator-range-value output {
  min-width: 3.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.configurator-range-value .btn {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1;
}

.configurator-range-control .configurator-range {
  --configurator-range-progress: 0%;
  display: block;
  height: .5rem;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--bs-primary) 0%,
    var(--bs-primary) var(--configurator-range-progress),
    var(--bs-secondary) var(--configurator-range-progress),
    var(--bs-secondary) 100%
  );
}

.configurator-range-control .configurator-range::-webkit-slider-runnable-track {
  height: .5rem;
  border-radius: 999px;
  background: transparent;
}

.configurator-range-control .configurator-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -.25rem;
  border: 0;
  background: var(--bs-primary);
}

.configurator-range-control .configurator-range[data-range-empty="1"]::-webkit-slider-thumb {
  opacity: 0;
}

.configurator-range-control .configurator-range::-moz-range-track {
  height: .5rem;
  border-radius: 999px;
  background: var(--bs-secondary);
}

.configurator-range-control .configurator-range::-moz-range-progress {
  height: .5rem;
  border-radius: 999px;
  background: var(--bs-primary);
}

.configurator-range-control .configurator-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 0;
  background: var(--bs-primary);
}

.configurator-range-control .configurator-range[data-range-empty="1"]::-moz-range-thumb {
  opacity: 0;
}

.configurator-category-image--svg,
.configurator-category-image--measurement {
  filter: none;
  transition: filter var(--sks-transition-fast);
}

html:not([data-sks-theme="porcelain"]) .configurator-category-image--svg,
html:not([data-sks-theme="porcelain"]) .configurator-category-image--measurement {
  filter: invert(1) grayscale(1) brightness(1.15);
}

.configurator-category-image-preview {
  max-width: 36rem;
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-lg);
  background: var(--sks-control-muted-bg);
}

.configurator-equipment-list > li {
  break-inside: avoid;
  margin-bottom: .35rem;
}

@media (max-width: 1199.98px) {
  .configurator-category-content.has-image > .configurator-category-image {
    max-height: 13rem;
  }
}

@media (max-width: 767.98px) {
  .configurator-equipment-layout.has-photo {
    grid-template-columns: minmax(0, 1fr);
  }

  .configurator-equipment-list {
    columns: 1;
  }
}

@media (max-width: 575.98px) {
  .configurator-model-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

.configurator-catalog-resource-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sks-space-2);
}

.configurator-catalog-resource-nav .btn {
  display: inline-flex;
  flex: 1 1 10rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
  min-height: 2.75rem;
  padding-inline: var(--sks-space-3);
  font-weight: 700;
}

.configurator-catalog-color-avatar {
  padding: 0;
  border: 1px solid var(--sks-border-strong);
  background: transparent;
  overflow: hidden;
  box-shadow: none;
}

.configurator-catalog-color-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.configurator-catalog-color-avatar text {
  font-family: var(--sks-font-numeric);
  font-size: 0.66rem;
  font-weight: 700;
  dominant-baseline: middle;
  text-anchor: middle;
}

.configurator-color-policy-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sks-space-2);
  max-height: 18rem;
  padding: var(--sks-space-2);
  overflow-y: auto;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-muted-bg);
}

.configurator-color-policy-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-3);
}

.configurator-color-policy-metrics > div {
  display: flex;
  min-width: 0;
  min-height: 4rem;
  flex-direction: column;
  justify-content: center;
  padding: var(--sks-space-2) var(--sks-space-3);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-muted-bg);
}

.configurator-color-policy-metrics strong {
  color: rgb(var(--bs-info-rgb));
  font-family: var(--sks-font-numeric);
  font-size: 1.35rem;
  line-height: 1;
}

.configurator-color-policy-metrics span {
  margin-top: var(--sks-space-1);
  color: var(--sks-text-muted);
  font-size: var(--sks-card-label-size);
  font-weight: 700;
}

.configurator-color-policy-availability-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-2);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 700;
}

.configurator-color-policy-availability-actions .btn {
  min-width: 3.25rem;
}

.configurator-color-policy-option {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 4.75rem 5.5rem;
  align-items: center;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2);
  border: 1px solid transparent;
  border-radius: var(--sks-radius-sm);
  cursor: pointer;
}

.configurator-color-policy-option:has([name="included_color_ids"]:checked) {
  border-color: rgba(var(--bs-primary-rgb), .45);
  background: rgba(var(--bs-primary-rgb), .1);
}

.configurator-color-policy-option.is-unavailable {
  opacity: .62;
}

.configurator-color-policy-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-color-policy-toggle {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: .15rem;
  color: var(--sks-text-muted);
  cursor: pointer;
}

.configurator-color-policy-toggle small {
  font-size: var(--sks-font-2xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.configurator-color-policy-switch.form-switch {
  min-height: auto;
  flex: 0 0 var(--sks-switch-w);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.configurator-color-policy-switch.form-switch:hover,
.configurator-color-policy-switch.form-switch:focus-within {
  border: 0;
  box-shadow: none;
}

.configurator-color-policy-switch.form-switch .form-check-input {
  float: none;
  width: var(--sks-switch-w);
  height: var(--sks-switch-h);
  margin: 0;
}

.configurator-color-policy-switch.form-switch .form-check-input:disabled {
  filter: none;
  opacity: 1;
}

.configurator-color-policy-switch.form-switch .form-check-input:focus,
.configurator-color-policy-switch.form-switch .form-check-input:focus-visible {
  outline: 0;
  box-shadow: none;
}

.configurator-color-policy-toggle.is-locked {
  cursor: default;
}

.configurator-color-policy-option .configurator-catalog-color-avatar {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
}

@media (max-width: 575.98px) {
  .configurator-color-policy-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .configurator-color-policy-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .configurator-color-policy-option {
    grid-template-columns: minmax(0, 1fr) 4.5rem 5.25rem;
  }
}

.configurator-catalog-drag-handle {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--sks-text-muted);
  cursor: grab;
  touch-action: none;
}

.configurator-catalog-drag-handle:active {
  cursor: grabbing;
}

.configurator-builder-root {
  overflow: hidden;
  border-width: 1px;
  border-color: rgba(var(--sks-semantic-primary-rgb), .42);
  box-shadow: inset .22rem 0 0 rgba(var(--sks-semantic-primary-rgb), .72), var(--sks-shadow-sm) !important;
}

[data-category-root-canvas] {
  --bs-gutter-y: var(--sks-space-4);
}

.configurator-builder-device-guard {
  display: none;
}
.configurator-builder-assistant {
  overflow: hidden;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-lg);
  background: var(--sks-surface-1);
  box-shadow: var(--sks-shadow-sm);
}

.configurator-builder-assistant.is-collapsed .configurator-builder-assistant-content {
  display: none;
}

.configurator-builder-assistant.is-collapsed {
  width: 100%;
}

.configurator-builder-assistant.is-collapsed .configurator-builder-next {
  justify-content: space-between;
  border-top: 0;
}

.configurator-builder-assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-4);
  padding: var(--sks-space-3) var(--sks-space-4);
}

.configurator-builder-eyebrow {
  color: rgb(var(--sks-semantic-primary-rgb));
  font-size: var(--sks-font-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.configurator-builder-catalog-code {
  overflow: hidden;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-builder-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sks-space-2);
  padding: 0 var(--sks-space-4) var(--sks-space-4);
}

.configurator-builder-step {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sks-space-2);
  min-height: 3.5rem;
  padding: var(--sks-space-2) var(--sks-space-3);
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-md);
  background: var(--sks-surface-1);
  color: var(--sks-text-default);
  text-align: start;
}

.configurator-builder-step:hover,
.configurator-builder-step:focus-visible,
.configurator-builder-step.is-active {
  border-color: rgba(var(--sks-semantic-primary-rgb), .65);
  background: rgba(var(--sks-semantic-primary-rgb), .08);
}

.configurator-builder-step-number {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: rgb(var(--sks-semantic-primary-rgb));
  background: rgba(var(--sks-semantic-primary-rgb), .14);
  font-weight: 800;
}

.configurator-builder-step.is-complete .configurator-builder-step-number {
  color: rgb(var(--sks-semantic-success-rgb));
  background: rgba(var(--sks-semantic-success-rgb), .14);
}

.configurator-builder-step strong {
  display: block;
}

.configurator-builder-step-count {
  color: rgb(var(--sks-semantic-primary-rgb));
  font-family: var(--sks-font-numeric);
  font-size: var(--sks-font-lg);
  line-height: 1;
}

.configurator-builder-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
  padding: var(--sks-space-2) var(--sks-space-4);
  border-top: 1px solid var(--sks-border-subtle);
  background: transparent;
}

.configurator-builder-next > span,
.configurator-builder-next .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-builder-next-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-inline-start: auto;
  gap: var(--sks-space-2);
}

.configurator-builder-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-1);
}

.configurator-builder-next .configurator-builder-icon-action {
  display: inline-grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  place-items: center;
  border-color: var(--sks-border-subtle);
  border-radius: var(--sks-radius-sm);
  background: transparent;
  color: var(--sks-text-muted);
  box-shadow: none;
}

.configurator-builder-next .configurator-builder-icon-action:hover,
.configurator-builder-next .configurator-builder-icon-action:focus-visible {
  border-color: var(--sks-border-strong);
  background: var(--sks-hover);
  color: var(--sks-text-default);
}

.configurator-builder-next .configurator-builder-preview-action {
  display: inline-grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--sks-text-muted);
  box-shadow: none;
  text-decoration: none;
}

.configurator-builder-next .configurator-builder-preview-action:hover,
.configurator-builder-next .configurator-builder-preview-action:focus-visible {
  background: transparent;
  color: var(--sks-text-muted);
  text-decoration: none;
}

.configurator-toolbar-add {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-modal-beginner-hint {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2) var(--sks-space-3);
  border: 0;
  border-inline-start: .2rem solid rgba(var(--sks-semantic-info-rgb), .6);
  border-radius: var(--sks-radius-sm);
  background: color-mix(in srgb, var(--sks-surface-2) 78%, transparent);
}

.configurator-modal-beginner-hint > .bi {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  place-items: center;
  border-radius: 50%;
  color: rgb(var(--sks-semantic-info-rgb));
  background: rgba(var(--sks-semantic-info-rgb), .14);
}

.configurator-modal-beginner-hint strong,
.configurator-modal-beginner-hint small {
  display: block;
}

.configurator-modal-beginner-hint strong {
  font-size: var(--sks-font-sm);
}

.configurator-modal-beginner-hint small {
  margin-top: .15rem;
  color: var(--sks-text-muted);
  line-height: 1.4;
}

.configurator-builder-item-card .configurator-builder-edit-action {
  width: var(--sks-card-action-size);
  min-width: var(--sks-card-action-size);
  height: var(--sks-card-action-size);
  justify-content: center;
  padding: 0;
}

.configurator-builder-facts > span:first-child:not(.configurator-builder-count) {
  display: none;
}

.configurator-builder-facts > span:not(.configurator-builder-count) + span:not(.configurator-builder-count)::before {
  content: none;
}

.configurator-builder-edit-action {
  width: var(--sks-card-action-size) !important;
  min-width: var(--sks-card-action-size) !important;
  height: var(--sks-card-action-size);
  justify-content: center;
  padding: 0 !important;
}

@media (max-width: 991.98px) {
  .configurator-builder-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .configurator-builder-next {
    align-items: flex-start;
    flex-direction: column;
  }

  .configurator-builder-assistant.is-collapsed .configurator-builder-next {
    align-items: center;
    flex-direction: row;
  }
}

.configurator-builder-summary-actions {
  display: flex;
  align-items: center;
}

.configurator-builder-kind.is-rule {
  background: rgba(var(--sks-semantic-warning-rgb), .16);
  color: rgb(var(--sks-semantic-warning-rgb));
}

.configurator-builder-group-head,
.configurator-builder-category-head {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(11rem, 1fr) max-content;
  align-items: center;
  column-gap: var(--sks-space-4);
  row-gap: var(--sks-space-2);
  padding-inline-end: 3.25rem;
}

.configurator-builder-group-head,
.configurator-builder-category-head {
  cursor: pointer;
  list-style: none;
}

.configurator-builder-group-head::-webkit-details-marker,
.configurator-builder-category-head::-webkit-details-marker {
  display: none;
}

.configurator-builder-header-dropzone {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(var(--sks-semantic-primary-rgb), .72);
  border-radius: inherit;
  background: rgba(var(--sks-semantic-primary-rgb), .14);
  color: rgb(var(--sks-semantic-primary-rgb));
  pointer-events: none;
}

.configurator-builder-header-dropzone::after {
  padding: .35rem .7rem;
  border: 1px solid rgba(var(--sks-semantic-primary-rgb), .38);
  border-radius: var(--sks-radius-pill);
  background: var(--sks-surface-overlay);
  content: attr(data-drop-label);
  font-size: var(--sks-font-xs);
  font-weight: 800;
  line-height: 1.2;
}

[data-list="category"].is-builder-dragging-option
  .configurator-builder-category:not([open]) > .configurator-builder-category-head
  > [data-builder-header-dropzone="option"],
[data-list="category"].is-builder-dragging-field
  .configurator-builder-category:not([open]) > .configurator-builder-category-head
  > [data-builder-header-dropzone="field"] {
  display: flex;
  pointer-events: auto;
}

.configurator-builder-summary-actions {
  display: flex;
  width: auto;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  gap: var(--sks-space-2);
  justify-self: end;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.configurator-builder-category-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .3rem;
}

.configurator-builder-title-line,
.configurator-builder-facts {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
}

.configurator-builder-title-line {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  flex-wrap: nowrap;
  gap: var(--sks-space-3);
}

.configurator-builder-title-line > .configurator-builder-kind.sks-card-hint-trigger {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  margin-inline-start: 0;
  padding: 0;
  flex: 0 0 2rem;
  overflow: visible;
}

.configurator-builder-title-line > .configurator-builder-kind.is-group.sks-card-hint-trigger {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  flex-basis: 2.25rem;
}

.configurator-builder-title-line :is(h2, h3) {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--sks-text-default);
  font-size: var(--sks-font-base);
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-builder-facts {
  gap: var(--sks-space-1);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
}

.configurator-builder-indicator-line {
  width: 100%;
  min-height: 2rem;
  flex-wrap: nowrap;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
  justify-content: flex-start;
  column-gap: var(--sks-space-3);
  row-gap: var(--sks-space-2);
  padding-top: var(--sks-space-2);
  border-top: 1px solid var(--sks-border-subtle);
}

.configurator-builder-indicator-line > .configurator-builder-availability-state {
  gap: var(--sks-space-3);
  flex-wrap: nowrap;
}

.configurator-builder-facts > span:not(.configurator-builder-count) + span:not(.configurator-builder-count)::before {
  margin-inline: .35rem;
  content: "·";
}

.configurator-builder-count {
  display: inline-flex;
  min-height: 1.25rem;
  align-items: center;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--sks-control-muted-bg);
  color: var(--sks-text-default);
  font-weight: 700;
}

.configurator-builder-chevron {
  display: inline-grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.25rem;
  place-items: center;
  color: var(--sks-text-muted);
  transition: transform .18s ease;
}

details[open] > summary .configurator-builder-chevron {
  transform: rotate(180deg);
}

.configurator-builder-group-tools,
.configurator-builder-category-tools {
  display: flex;
  align-items: center;
  gap: var(--sks-space-3);
  justify-content: space-between;
  min-height: 2.5rem;
  padding: var(--sks-space-1) var(--sks-space-2);
  border-top: 1px solid var(--sks-border-subtle);
  border-bottom: 1px solid var(--sks-border-subtle);
  background: color-mix(in srgb, var(--sks-surface-2) 72%, transparent);
}

.configurator-builder-group-tools > .card-actions,
.configurator-builder-category-tools > .card-actions {
  min-width: max-content;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.configurator-builder-group-tools .configurator-builder-edit-action,
.configurator-builder-category-tools .configurator-builder-edit-action {
  overflow: hidden;
}

.configurator-builder-tools-label,
.configurator-builder-tools-label > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-builder-tools-label {
  min-width: 0;
  flex-wrap: wrap;
}

.configurator-builder-tools-label > span {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 700;
}

.card .configurator-builder-tools-label .configurator-builder-catalog-actions .btn {
  width: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
}

.card .configurator-builder-tools-label .configurator-builder-catalog-actions .btn i {
  font-size: var(--sks-card-label-size) !important;
}

.configurator-builder-rule-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: var(--sks-font-xs);
  cursor: pointer;
}

.configurator-builder-pill,
.configurator-builder-rule-link {
  display: inline-flex;
  min-height: 1.45rem;
  align-items: center;
  padding: .18rem .5rem;
  border: 1px solid transparent;
  border-radius: var(--sks-radius-pill);
  font-size: .68rem;
  font-weight: 750;
  line-height: 1;
}

button.configurator-builder-pill {
  appearance: none;
  font-family: inherit;
  cursor: help;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}

button.configurator-builder-pill:hover,
button.configurator-builder-pill:focus-visible {
  border-color: var(--sks-border-strong);
  filter: brightness(1.04);
}

#configuratorCatalogRoot :is(.configurator-builder-pill, .badge.rounded-pill) {
  letter-spacing: .01em;
  box-shadow: none;
}

#configuratorCatalogRoot .configurator-builder-pill.is-icon {
  display: inline-grid;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  place-items: center;
  border-radius: var(--sks-radius-sm);
  font-size: .72rem;
  line-height: 1;
}

#configuratorCatalogRoot .configurator-builder-pill.is-icon:focus-visible {
  outline: 2px solid rgba(var(--sks-semantic-primary-rgb), .55);
  outline-offset: 2px;
}

#configuratorCatalogRoot .configurator-builder-pill.is-count {
  gap: .28rem;
  min-width: 2.65rem;
  min-height: 2rem;
  justify-content: center;
  padding-inline: .45rem;
  border-radius: var(--sks-radius-sm);
  font-size: .72rem;
  cursor: help;
}

#configuratorCatalogRoot .configurator-builder-indicator-line > :is(.configurator-builder-pill, .configurator-builder-rule-link),
#configuratorCatalogRoot .configurator-builder-indicator-line > .configurator-builder-availability-state > :is(.configurator-builder-pill, .configurator-icon-action) {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.25rem;
  min-height: 2.25rem;
  flex: 0 0 2.75rem;
  padding: 0;
  justify-content: center;
  border-radius: var(--sks-radius-sm);
}

#configuratorCatalogRoot .configurator-builder-indicator-line > .configurator-builder-rule-link,
#configuratorCatalogRoot .configurator-builder-indicator-line > .configurator-builder-availability-state > .configurator-icon-action {
  cursor: pointer !important;
}

#configuratorCatalogRoot .configurator-builder-indicator-line .configurator-builder-rule-link > .configurator-builder-pill {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  cursor: pointer !important;
}

#configuratorCatalogRoot .configurator-builder-indicator-line [data-builder-indicator] {
  cursor: help !important;
}

#configuratorCatalogRoot .configurator-builder-pill.is-count i {
  font-size: .72rem;
}

#configuratorCatalogRoot .configurator-builder-pill.is-count:focus-visible {
  outline: 2px solid rgba(var(--sks-semantic-primary-rgb), .55);
  outline-offset: 2px;
}

#configuratorCatalogRoot :is(.configurator-builder-pill, .badge.rounded-pill).text-bg-success {
  border-color: rgba(var(--sks-semantic-success-rgb), .28);
  background: rgba(var(--sks-semantic-success-rgb), .11) !important;
  color: var(--sks-status-success-text) !important;
}

#configuratorCatalogRoot :is(.configurator-builder-pill, .badge.rounded-pill).text-bg-primary {
  border-color: rgba(var(--sks-semantic-primary-rgb), .28);
  background: rgba(var(--sks-semantic-primary-rgb), .1) !important;
  color: rgb(var(--sks-semantic-primary-rgb)) !important;
}

#configuratorCatalogRoot :is(.configurator-builder-pill, .badge.rounded-pill).text-bg-info {
  border-color: rgba(var(--sks-semantic-info-rgb), .28);
  background: rgba(var(--sks-semantic-info-rgb), .1) !important;
  color: rgb(var(--sks-semantic-info-rgb)) !important;
}

#configuratorCatalogRoot :is(.configurator-builder-pill, .badge.rounded-pill).text-bg-warning {
  border-color: rgba(var(--sks-semantic-warning-rgb), .34);
  background: rgba(var(--sks-semantic-warning-rgb), .13) !important;
  color: var(--sks-status-warning-text) !important;
}

#configuratorCatalogRoot :is(.configurator-builder-pill, .badge.rounded-pill).text-bg-danger {
  border-color: rgba(var(--sks-semantic-danger-rgb), .3);
  background: rgba(var(--sks-semantic-danger-rgb), .1) !important;
  color: var(--bs-danger-text-emphasis) !important;
}

#configuratorCatalogRoot :is(.configurator-builder-pill, .badge.rounded-pill).text-bg-secondary {
  border-color: var(--sks-border-strong);
  background: var(--sks-control-muted-bg) !important;
  color: var(--sks-text-muted) !important;
}

html #configuratorCatalogRoot .configurator-builder-pill.is-inactive {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: .82;
}

#configuratorCatalogRoot .configurator-builder-pill.is-inactive.configurator-tone-danger {
  border-color: rgba(var(--sks-semantic-danger-rgb), .58) !important;
  color: rgb(var(--sks-semantic-danger-rgb)) !important;
}

#configuratorCatalogRoot .configurator-builder-pill.is-inactive.configurator-tone-info {
  border-color: rgba(var(--sks-semantic-info-rgb), .58) !important;
  color: rgb(var(--sks-semantic-info-rgb)) !important;
}

#configuratorCatalogRoot .configurator-builder-pill.is-inactive.configurator-tone-success {
  border-color: rgba(var(--sks-semantic-success-rgb), .58) !important;
  color: rgb(var(--sks-semantic-success-rgb)) !important;
}

#configuratorCatalogRoot .configurator-builder-pill.is-inactive.configurator-tone-warning {
  border-color: rgba(var(--sks-semantic-warning-rgb), .58) !important;
  color: rgb(var(--sks-semantic-warning-rgb)) !important;
}

#configuratorCatalogRoot .configurator-builder-pill.is-inactive.configurator-tone-secondary {
  border-color: var(--sks-border-strong) !important;
  color: var(--sks-text-muted) !important;
}

#configuratorCatalogRoot .configurator-icon-action,
#configuratorCatalogModal .configurator-modal-delete {
  display: inline-grid;
  width: var(--sks-card-action-size);
  min-width: var(--sks-card-action-size);
  height: var(--sks-card-action-size);
  min-height: var(--sks-card-action-size);
  padding: 0;
  place-items: center;
  border-color: var(--sks-border-subtle);
  border-radius: var(--sks-radius-sm);
  background: transparent;
  color: var(--sks-text-muted);
  box-shadow: none;
}

#configuratorCatalogRoot .configurator-icon-action:hover,
#configuratorCatalogRoot .configurator-icon-action:focus-visible,
#configuratorCatalogModal .configurator-modal-delete:hover,
#configuratorCatalogModal .configurator-modal-delete:focus-visible {
  border-color: var(--sks-border-strong);
  background: var(--sks-hover);
  color: var(--sks-text-default);
}

.configurator-builder-availability {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-1);
}

.configurator-builder-availability-state,
.configurator-builder-catalog-actions,
.configurator-builder-catalog-state,
.configurator-builder-catalog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sks-space-1);
}

#configuratorCatalogRoot .configurator-builder-catalog-state > .configurator-builder-pill {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.25rem;
  min-height: 2.25rem;
  justify-content: center;
  padding: 0;
  border-radius: var(--sks-radius-sm);
}

.configurator-builder-catalog-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-1);
  white-space: nowrap;
}

.configurator-builder-catalog-meta {
  justify-content: space-between;
  gap: var(--sks-space-2);
  margin: auto var(--sks-space-2) 0;
  padding: var(--sks-space-1) 0;
  border-top: 1px solid var(--sks-border-subtle);
  background: transparent;
}

.configurator-builder-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sks-space-1);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
}

.configurator-builder-price strong {
  color: var(--sks-text);
}

.configurator-color-specials {
  display: grid;
  gap: var(--sks-space-2);
}

.configurator-color-specials > header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sks-space-2);
}

.configurator-color-specials .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-1);
}

.configurator-builder-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--sks-space-4);
}

.configurator-builder-layout.has-palette {
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
}

.configurator-builder-main {
  min-width: 0;
}

.configurator-block-palette-rail {
  position: relative;
  min-width: 0;
  min-height: 100%;
  align-self: stretch;
}

.configurator-builder-layout:not(.has-palette) > .configurator-block-palette-rail {
  display: none;
}

.configurator-block-palette {
  --configurator-palette-follow-gap: var(--sks-space-3);
  position: sticky;
  z-index: 5;
  top: var(--configurator-palette-follow-gap);
  display: flex;
  width: 100%;
  height: fit-content;
  align-self: start;
  max-height: calc(100dvh - (2 * var(--sks-space-3)));
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-lg);
  background: var(--sks-surface-1);
  box-shadow: var(--sks-shadow-sm);
}

#configuratorCatalogRoot.is-builder-scrolling :is([data-bs-toggle="tooltip"], [data-bs-toggle="popover"]) {
  pointer-events: none;
}

.configurator-block-palette-header {
  display: flex;
  min-height: 3.75rem;
  align-items: center;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3) var(--sks-space-4);
  border-bottom: 1px solid var(--sks-border-subtle);
  background: var(--sks-surface-2);
  user-select: none;
}

.configurator-block-palette-header > div {
  min-width: 0;
  flex: 1 1 auto;
}

.configurator-block-palette-header h2,
.configurator-block-palette-header small {
  display: block;
  margin: 0;
}

.configurator-block-palette-header h2 {
  font-size: var(--sks-font-base);
  font-weight: 800;
}

.configurator-block-palette-header small {
  overflow: hidden;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-block-palette-header .btn {
  width: var(--sks-control-icon);
  min-width: var(--sks-control-icon);
  height: var(--sks-control-icon);
  padding: 0;
  cursor: pointer;
}

.configurator-block-palette-help,
.configurator-block-palette-close {
  margin-inline-start: auto;
}

.configurator-block-palette-body {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3);
  overflow: hidden;
}

.configurator-block-palette-info {
  display: flex;
  align-items: flex-start;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2);
  border: 1px solid rgba(var(--sks-semantic-info-rgb), .28);
  border-radius: var(--sks-radius-sm);
  background: rgba(var(--sks-semantic-info-rgb), .08);
  color: var(--sks-text-muted);
}

.configurator-block-palette-info > i {
  flex: 0 0 auto;
  color: var(--sks-semantic-info);
}

.configurator-block-palette-info strong,
.configurator-block-palette-info small {
  display: block;
}

.configurator-block-palette-info strong {
  margin-block-end: .1rem;
  color: var(--sks-text);
  font-size: var(--sks-font-xs);
}

.configurator-block-palette-info small {
  font-size: .72rem;
  line-height: 1.35;
}

.configurator-block-palette-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sks-space-1);
  padding: .2rem;
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-sm);
  background: color-mix(in srgb, var(--sks-surface-2) 88%, transparent);
}

.configurator-block-palette-filters .btn {
  display: flex;
  min-height: var(--sks-control-h-sm);
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sks-space-2);
  padding: .4rem .65rem;
  border: 0;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-base);
  font-weight: 600;
  text-align: left;
}

.configurator-block-palette-filters .btn > span:not(.badge) {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-block-palette-filters .btn.active {
  color: var(--sks-text);
  background: var(--sks-surface-1);
  box-shadow: var(--sks-shadow-sm);
}

html:not([data-sks-theme="porcelain"]) .configurator-block-palette-filters .btn-primary,
html:not([data-sks-theme="porcelain"]) .configurator-block-palette-filters .btn-primary:hover,
html:not([data-sks-theme="porcelain"]) .configurator-block-palette-filters .btn-primary:focus-visible,
html:not([data-sks-theme="porcelain"]) .configurator-block-palette-filters .btn-primary:active {
  color: #102333;
}

.configurator-block-palette-filters .badge {
  display: inline-grid;
  min-width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  padding: .2rem .4rem;
  place-items: center;
  font-size: var(--sks-font-base);
  line-height: 1;
}

.configurator-block-palette-create {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

.configurator-block-palette-create .btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sks-space-2);
  text-align: left;
}

.configurator-block-palette-create .btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-block-palette-footnote {
  display: none;
}

.configurator-media-palette-item { cursor: grab; grid-template-columns: auto 3rem minmax(0, 1fr); }
.configurator-media-palette-item:active { cursor: grabbing; }
.configurator-media-palette-thumb {
    align-items: center;
    background: var(--app-surface-muted, rgba(255,255,255,.04));
    border: 1px solid var(--app-border-color, rgba(255,255,255,.12));
    border-radius: .55rem;
    display: flex;
    flex: 0 0 3rem;
    height: 3rem;
    justify-content: center;
    overflow: hidden;
}
.configurator-media-palette-thumb img { height: 100%; object-fit: contain; width: 100%; }
.configurator-builder-category.is-media-drop-target {
    box-shadow: inset 0 0 0 2px var(--bs-info);
    background: color-mix(in srgb, var(--bs-info) 10%, transparent);
}

.configurator-block-palette-list {
  display: grid;
  min-height: 4rem;
  gap: var(--sks-space-2);
  overflow: auto;
  overscroll-behavior: contain;
}

.configurator-block-palette-preset-group {
  display: grid;
  gap: var(--sks-space-2);
}

.configurator-block-palette-preset-group + .configurator-block-palette-preset-group {
  margin-block-start: var(--sks-space-2);
  padding-block-start: var(--sks-space-3);
  border-block-start: 1px solid var(--sks-border-subtle);
}

.configurator-block-palette-preset-group h3 {
  margin: 0;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.configurator-block-palette-preset {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: start;
}

.configurator-block-palette-preset:hover,
.configurator-block-palette-preset:focus-visible {
  border-color: rgba(var(--sks-semantic-primary-rgb), .55);
  background: rgba(var(--sks-semantic-primary-rgb), .08);
  outline: 0;
}

.is-preset-drop-target {
  position: relative;
  outline: 2px dashed rgba(var(--sks-semantic-primary-rgb), .72);
  outline-offset: .2rem;
  background: rgba(var(--sks-semantic-primary-rgb), .08);
  box-shadow: inset 0 0 0 1px rgba(var(--sks-semantic-primary-rgb), .2);
}

.is-preset-drop-target::after {
  position: absolute;
  z-index: 25;
  top: var(--sks-space-2);
  right: var(--sks-space-2);
  max-width: calc(100% - (2 * var(--sks-space-2)));
  padding: .28rem .6rem;
  overflow: hidden;
  border: 1px solid rgba(var(--sks-semantic-primary-rgb), .48);
  border-radius: var(--sks-radius-pill);
  color: rgb(var(--sks-semantic-primary-rgb));
  background: color-mix(in srgb, var(--sks-surface-1) 94%, transparent);
  box-shadow: var(--sks-shadow-sm);
  content: attr(data-palette-drop-label);
  font-size: var(--sks-font-xs);
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-block-palette-item {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2);
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
}

.configurator-block-palette-item.configurator-block-palette-preset {
  grid-template-columns: 2.25rem minmax(0, 1fr);
  min-height: 5rem;
  row-gap: var(--sks-space-2);
  column-gap: var(--sks-space-3);
  padding: var(--sks-space-3) var(--sks-space-4);
  border-color: rgba(var(--sks-semantic-primary-rgb), .28);
  background: rgba(var(--sks-semantic-primary-rgb), .07);
}

.configurator-block-palette-item.configurator-media-palette-item {
  grid-template-columns: 3rem minmax(0, 1fr) 2.75rem;
}

.configurator-media-palette-action {
  position: relative;
  z-index: 2;
  align-self: start;
  cursor: pointer;
}

.configurator-media-palette-action.is-locked {
  cursor: help;
}

.configurator-block-palette-preset .configurator-block-palette-copy {
  display: contents;
}

.configurator-block-palette-preset .configurator-block-palette-copy strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: var(--sks-font-body-sm);
  line-height: 1.2;
}

.configurator-block-palette-preset .configurator-block-palette-copy small {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  padding-block-start: var(--sks-space-2);
  border-top: 1px solid var(--sks-border-subtle);
  font-size: var(--sks-font-2xs);
  line-height: 1.35;
  white-space: normal;
}

.configurator-block-palette-preset .configurator-builder-kind {
  grid-column: 1;
  grid-row: 1;
  width: 2.25rem;
  height: 2.25rem;
  flex-basis: 2.25rem;
  font-size: var(--sks-font-body-sm);
  line-height: 1;
}

.configurator-block-palette-preset .configurator-builder-kind > .bi {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  font-size: inherit;
  line-height: 1;
}

.configurator-block-palette-item[draggable="true"] {
  cursor: grab;
}

.configurator-block-palette-item[draggable="true"]:active {
  cursor: grabbing;
}

.configurator-block-palette-item.is-used {
  border-color: rgba(var(--sks-semantic-success-rgb), .3);
}

.configurator-block-palette-item.is-available:hover {
  border-color: rgba(var(--sks-semantic-primary-rgb), .5);
  background: rgba(var(--sks-semantic-primary-rgb), .08);
}

.configurator-block-palette-copy {
  min-width: 0;
}

.configurator-block-palette-copy strong,
.configurator-block-palette-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-block-palette-copy small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
}

.configurator-block-palette-copy .configurator-block-palette-meta {
  margin-block-start: .15rem;
  font-size: .68rem;
  opacity: .84;
}

.configurator-block-palette-item.is-available {
  cursor: grab;
}

.configurator-block-palette-item.is-available:active {
  cursor: grabbing;
}

.configurator-block-palette-item.is-available :is(button, a, input) {
  cursor: pointer;
}

.configurator-advanced-settings {
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-md);
  background: var(--sks-surface-2);
}

.configurator-advanced-settings > summary {
  cursor: pointer;
  font-weight: 700;
}

.configurator-builder-palette-ghost {
  opacity: .45;
}

.configurator-builder-palette-chosen {
  border-color: rgb(var(--sks-semantic-primary-rgb));
  box-shadow: 0 0 0 .2rem rgba(var(--sks-semantic-primary-rgb), .14);
}

.configurator-builder-scope-context-host {
  width: 100%;
  margin-bottom: var(--sks-space-4);
}

.configurator-builder-scope-context {
  display: flex;
  width: 100%;
  min-height: 4rem;
  align-items: center;
  gap: var(--sks-space-3);
  padding: 0 var(--sks-space-1) var(--sks-space-3);
  border: 0;
  border-bottom: 1px solid var(--sks-border-subtle);
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.configurator-builder-scope-copy {
  display: grid;
  min-width: 0;
  gap: .05rem;
}

.configurator-builder-scope-context .configurator-builder-focus-chip {
  display: flex;
  min-width: 0;
  max-width: 28rem;
  align-items: center;
  gap: var(--sks-space-2);
  margin-inline-start: auto;
  padding: .4rem .45rem .4rem .75rem;
  border: 1px solid rgba(var(--sks-semantic-primary-rgb), .3);
  border-radius: var(--sks-radius-pill);
  background: rgba(var(--sks-semantic-primary-rgb), .08);
}

.configurator-builder-focus-chip > span {
  display: grid;
  min-width: 0;
}

.configurator-builder-focus-chip strong {
  overflow: hidden;
  font-size: var(--sks-font-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-builder-focus-chip .btn {
  display: inline-grid;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
}

.configurator-builder-scope-context small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-2xs);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.configurator-builder-scope-context strong {
  color: var(--sks-text);
  font-size: var(--sks-font-body-sm);
  line-height: 1.25;
}

.configurator-builder-scope-context > span:last-child > span {
  overflow: hidden;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-builder-scope-model {
  display: inline-grid;
  min-width: 2.25rem;
  min-height: 2.25rem;
  flex: 0 0 auto;
  padding: .3rem;
  place-items: center;
  border-radius: var(--sks-radius-pill);
  font-size: var(--sks-font-2xs);
  font-weight: 800;
}

.configurator-builder-dropzone.is-palette-target,
[data-category-children].is-palette-target,
[data-category-root-canvas].is-palette-target {
  position: relative;
  outline: 2px dashed rgba(var(--sks-semantic-primary-rgb), .6);
  outline-offset: .2rem;
}

[data-category-children].is-palette-target {
  min-height: 4.5rem;
  background: rgba(var(--sks-semantic-primary-rgb), .06);
}

[data-category-children].is-palette-target::before,
[data-category-root-canvas].is-palette-target::before {
  position: absolute;
  z-index: 20;
  top: var(--sks-space-2);
  right: var(--sks-space-2);
  padding: .28rem .6rem;
  border: 1px solid rgba(var(--sks-semantic-primary-rgb), .45);
  border-radius: 999px;
  color: rgb(var(--sks-semantic-primary-rgb));
  background: color-mix(in srgb, var(--sks-surface-1) 92%, transparent);
  box-shadow: var(--sks-shadow-sm);
  content: attr(data-palette-drop-label);
  font-size: var(--sks-font-xs);
  font-weight: 800;
  pointer-events: none;
}

.configurator-color-specials {
  margin-top: var(--sks-space-3);
  padding-top: var(--sks-space-3);
  border-top: 1px solid var(--sks-border-subtle);
}

.configurator-color-specials > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
  min-height: 2.25rem;
  cursor: pointer;
  list-style: none;
}

.configurator-color-specials > summary::-webkit-details-marker {
  display: none;
}

.configurator-color-specials > summary > span,
.configurator-color-specials-actions {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-color-specials > summary > .bi {
  transition: transform .2s ease;
}

.configurator-color-specials[open] > summary > .bi {
  transform: rotate(180deg);
}

.configurator-color-specials-body {
  display: grid;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2) 0 var(--sks-space-3);
}

.configurator-color-specials-actions {
  justify-content: flex-end;
}

.configurator-color-special-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2);
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.configurator-color-special-row .entity-card-avatar {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 !important;
  font-size: .7rem;
}

.configurator-assortment-workspace {
  display: grid;
  grid-template-columns: minmax(10rem, .7fr) minmax(18rem, 1.3fr);
  gap: var(--sks-space-4);
  align-items: center;
  margin-bottom: var(--sks-space-4);
  padding: var(--sks-space-3) var(--sks-space-4);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-lg);
  background: var(--sks-surface-1);
}

.configurator-assortment-workspace > div:first-child {
  display: grid;
  gap: .125rem;
  padding-inline-end: var(--sks-space-4);
  border-inline-end: 1px solid var(--sks-border-subtle);
}

.configurator-assortment-workspace small,
.configurator-assortment-kind {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.configurator-assortment-workspace > div:first-child > span {
  font-weight: 700;
}

.configurator-assortment-copy h2,
.configurator-assortment-copy p {
  margin: 0;
}

.configurator-assortment-copy h2 {
  font-size: var(--sks-font-lg);
}

.configurator-assortment-copy p {
  margin-top: var(--sks-space-1);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-sm);
}

.configurator-assortment-mode {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: var(--sks-space-2);
  padding-top: var(--sks-space-3);
  border-top: 1px solid var(--sks-border-subtle);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-sm);
}

.configurator-assortment-mode .bi {
  color: rgb(var(--sks-semantic-info-rgb));
}

.configurator-assortment-kind {
  display: block;
  margin-bottom: .125rem;
}

.entity-card-head .configurator-assortment-card-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

@media (max-width: 767.98px) {
  .configurator-assortment-workspace {
    grid-template-columns: 1fr;
  }

  .configurator-assortment-workspace > div:first-child {
    padding-inline-end: 0;
    padding-bottom: var(--sks-space-3);
    border-inline-end: 0;
    border-bottom: 1px solid var(--sks-border-subtle);
  }
}

.configurator-builder-group-head {
  min-height: 5rem;
  padding: var(--sks-space-3) var(--sks-space-4);
  padding-inline-end: var(--sks-space-4);
  background: var(--sks-glass-toolbar);
}

.configurator-builder-group-body {
  display: grid;
  gap: var(--sks-space-1);
  padding: var(--sks-space-2);
  background: color-mix(in srgb, var(--sks-surface-2) 78%, rgba(var(--sks-semantic-primary-rgb), .08));
}

.configurator-builder-category {
  min-width: 0;
}

.configurator-builder-group-body > .configurator-builder-category + .configurator-builder-category {
  border-top: 0;
}

.configurator-builder-group-body > .configurator-builder-category {
  overflow: hidden;
  border: 1px solid var(--sks-border);
  border-inline-start: .22rem solid rgba(var(--sks-semantic-info-rgb), .65);
  border-radius: var(--sks-radius-md);
  background: var(--sks-surface-1);
}

.configurator-builder-category-head {
  min-height: 4rem;
  padding: var(--sks-space-3);
  padding-inline-end: var(--sks-space-3);
  background: var(--sks-surface-1);
}

.configurator-builder-group-body > .configurator-builder-category > .configurator-builder-category-head {
  min-height: 4rem;
  background: linear-gradient(90deg, rgba(var(--sks-semantic-info-rgb), .075), transparent 68%);
}

.configurator-builder-category-body {
  display: grid;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2);
  border-top: 1px solid var(--sks-border-subtle);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.configurator-builder-collection {
  min-width: 0;
  padding: var(--sks-space-2);
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-md);
  background: var(--sks-surface-1);
}

.configurator-builder-collection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-1);
}

.configurator-builder-collection-head > span,
.configurator-builder-collection-head > span > span {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-builder-collection-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sks-space-2);
}

#configuratorCatalogRoot .configurator-builder-collection-actions > .configurator-builder-pill {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.25rem;
  min-height: 2.25rem;
  flex: 0 0 2.75rem;
  justify-content: center;
  padding: 0;
}

.configurator-builder-collection-head > span > i {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--sks-semantic-primary-rgb), .1);
  color: rgb(var(--sks-semantic-primary-rgb));
}

.configurator-builder-collection-head > span > span {
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.configurator-builder-collection-head strong,
.configurator-builder-collection-head small {
  display: block;
}

.configurator-builder-collection-head strong {
  font-size: var(--sks-font-sm);
  font-weight: 800;
}

.configurator-builder-collection-head small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 400;
}

.configurator-builder-dropzone {
  min-height: 3.25rem;
}

.configurator-builder-empty {
  display: grid;
  min-height: 3rem;
  place-items: center;
  padding: var(--sks-space-2);
  border: 1px dashed var(--sks-border-strong);
  border-radius: var(--sks-radius-sm);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  text-align: center;
}

.configurator-builder-item-card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
  box-shadow: 0 1px 0 rgba(var(--sks-semantic-primary-rgb), .04);
}

.configurator-builder-item-card > header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2);
}

.configurator-builder-item-heading {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .12rem;
}

.configurator-builder-item-heading small {
  color: rgb(var(--sks-semantic-primary-rgb));
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
}

.configurator-builder-item-heading strong {
  display: block;
  color: var(--sks-text-default);
  line-height: 1.3;
}

.configurator-builder-item-heading > span {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
}

.configurator-builder-item-copy,
.configurator-builder-item-meta {
  padding: 0 var(--sks-space-2) var(--sks-space-1);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
}

.configurator-builder-item-copy {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.configurator-builder-item-meta {
  display: flex;
  min-height: 0;
  flex-wrap: wrap;
  gap: var(--sks-space-1);
}

.configurator-builder-item-meta > span {
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--sks-control-muted-bg);
}

.configurator-builder-item-commercial {
  display: flex;
  min-height: 0;
  align-items: center;
  padding: 0 var(--sks-space-2) var(--sks-space-2);
}

.configurator-builder-item-commercial:empty {
  display: none;
}

.configurator-builder-item-copy.is-empty,
.configurator-builder-item-meta.is-empty {
  display: none;
}

.configurator-builder-item-card > footer {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
  margin-top: auto;
  padding: var(--sks-space-2);
  border-top: 1px solid var(--sks-border-subtle);
  background: transparent;
}

.configurator-builder-card-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sks-card-action-gap);
  margin-inline-start: auto;
}

.configurator-builder-card-actions .btn {
  width: var(--sks-card-action-size);
  min-width: var(--sks-card-action-size);
  height: var(--sks-card-action-size);
  padding: 0;
}

.configurator-builder-card-status {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-1);
  flex-wrap: wrap;
}

.configurator-builder-card-status > .configurator-builder-catalog-meta {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.configurator-builder-card-rule-row {
  display: flex;
  justify-content: flex-start;
}

.configurator-builder-card-rule-row:empty {
  display: none;
}

#configuratorCatalogRoot .configurator-builder-card-rule-row > .configurator-builder-rule-link {
  width: var(--sks-card-action-size);
  min-width: var(--sks-card-action-size);
  height: var(--sks-card-action-size);
  min-height: var(--sks-card-action-size);
  justify-content: center;
  padding: 0;
  border-radius: var(--sks-radius-sm);
}

#configuratorCatalogRoot .configurator-builder-card-rule-row .configurator-builder-rule-link > .configurator-builder-pill {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  justify-content: center;
  padding: 0;
}

#configuratorCatalogRoot .configurator-builder-card-action {
  position: static;
  width: var(--sks-card-action-size);
  min-width: var(--sks-card-action-size);
  height: var(--sks-card-action-size);
  padding: 0;
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-sm);
  background: transparent;
  color: var(--sks-text-muted);
}

#configuratorCatalogRoot .configurator-builder-card-action:hover,
#configuratorCatalogRoot .configurator-builder-card-action:focus-visible {
  border-color: var(--sks-border-strong);
  background: var(--sks-hover);
  color: var(--sks-text-default);
}

.configurator-builder-option-fields {
  margin: var(--sks-space-1) var(--sks-space-2) var(--sks-space-2);
  padding: var(--sks-space-1);
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.configurator-builder-option-fields-head,
.configurator-builder-option-fields-head > span {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-builder-option-fields-head {
  justify-content: space-between;
  margin-bottom: var(--sks-space-2);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 800;
}

.configurator-builder-dropzone.is-compact {
  min-height: 2.75rem;
}

.configurator-builder-dropzone.is-latent {
  min-height: 0;
  height: .35rem;
  margin: 0 var(--sks-space-3);
  overflow: hidden;
  border: 0;
  opacity: 0;
  transition: min-height var(--sks-transition-fast), opacity var(--sks-transition-fast);
}

.configurator-builder-dropzone.is-latent.is-sort-target {
  min-height: 3.25rem;
  height: auto;
  margin-block: var(--sks-space-2);
  border: 2px dashed rgba(var(--sks-semantic-primary-rgb), .55);
  border-radius: var(--sks-radius-sm);
  background: rgba(var(--sks-semantic-primary-rgb), .07);
  opacity: 1;
}

.configurator-builder-dropzone.is-latent.is-sort-target::before {
  display: grid;
  width: 100%;
  min-height: 2.75rem;
  place-items: center;
  color: rgb(var(--sks-semantic-primary-rgb));
  content: attr(aria-label);
  font-size: var(--sks-font-xs);
  font-weight: 700;
}

.configurator-builder-dropzone.is-compact .configurator-builder-empty {
  min-height: 2.5rem;
  padding: var(--sks-space-2);
  font-size: var(--sks-font-xs);
}

.configurator-builder-dropzone.is-compact .configurator-builder-item-card > header {
  padding: var(--sks-space-2);
}

.configurator-builder-dropzone.is-compact .configurator-builder-item-card > footer {
  padding: var(--sks-space-1) var(--sks-space-2);
}

.configurator-builder-item.is-compact-row .configurator-builder-item-card {
  display: flex;
  flex-direction: column;
  min-height: 3.25rem;
  border-color: var(--sks-border-subtle);
  background: var(--sks-surface-1);
}

.configurator-builder-item.is-compact-row .configurator-builder-item-card > header {
  grid-column: 1;
  padding: var(--sks-space-2);
  padding-inline-end: var(--sks-space-2);
}

.configurator-builder-item.is-compact-row .configurator-builder-drag {
  position: static;
  order: -1;
  padding: .25rem;
}

.configurator-builder-item.is-compact-row .configurator-builder-item-heading small {
  font-size: .58rem;
}

.configurator-builder-item.is-compact-row .configurator-builder-item-heading strong {
  font-size: var(--sks-font-sm);
}

.configurator-builder-item.is-compact-row .configurator-builder-item-copy,
.configurator-builder-item.is-compact-row .configurator-builder-item-meta,
.configurator-builder-item.is-compact-row .configurator-builder-item-commercial {
  grid-column: 1;
  padding: 0 var(--sks-space-2) var(--sks-space-2);
}

.configurator-builder-item.is-compact-row .configurator-builder-item-card > footer {
  width: 100%;
  margin-top: auto;
  padding: var(--sks-space-2);
  border-top: 1px solid var(--sks-border-subtle);
  border-inline-start: 0;
  background: transparent;
}

@media (max-width: 575.98px) {
  .configurator-builder-item-card > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .configurator-builder-card-actions {
    width: 100%;
    margin-inline-start: 0;
  }
}

@media (max-width: 767.98px) {
  .card,
  .configurator-builder-card-actions {
    --sks-card-action-size: var(--sks-touch-target);
  }

  .card .btn-group .btn,
  .card .card-actions .btn,
  .configurator-builder-card-actions .btn {
    width: var(--sks-touch-target);
    min-width: var(--sks-touch-target);
    height: var(--sks-touch-target);
  }
}

.configurator-builder-kind {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--sks-semantic-primary-rgb), .12);
  color: rgb(var(--sks-semantic-primary-rgb));
}

.configurator-builder-kind.is-field {
  background: rgba(var(--sks-semantic-info-rgb), .13);
  color: rgb(var(--sks-semantic-info-rgb));
}

.configurator-builder-kind:is(.is-preset-main, .is-preset-text) {
  --configurator-builder-kind-rgb: var(--sks-semantic-primary-rgb);
}

.configurator-builder-kind:is(.is-preset-category, .is-preset-measurement, .is-preset-color) {
  --configurator-builder-kind-rgb: var(--sks-semantic-info-rgb);
}

.configurator-builder-kind:is(.is-preset-multiple_choice, .is-preset-slider) {
  --configurator-builder-kind-rgb: var(--sks-semantic-success-rgb);
}

.configurator-builder-kind:is(.is-preset-toggle, .is-preset-article_option) {
  --configurator-builder-kind-rgb: var(--sks-semantic-warning-rgb);
}

.configurator-builder-kind:is(.is-preset-media, .is-preset-upload) {
  --configurator-builder-kind-rgb: var(--sks-semantic-danger-rgb);
}

.configurator-builder-kind:is(.is-preset-text_option, .is-preset-dropdown, .is-preset-textarea) {
  --configurator-builder-kind-rgb: var(--sks-semantic-secondary-rgb);
}

.configurator-builder-kind[class*="is-preset-"] {
  border: 1px solid rgba(var(--configurator-builder-kind-rgb), .3);
  background: rgba(var(--configurator-builder-kind-rgb), .15);
  color: rgb(var(--configurator-builder-kind-rgb));
}

.configurator-builder-kind.is-group {
  width: 2.5rem;
  height: 2.5rem;
  flex-basis: 2.5rem;
}

.configurator-builder-drag {
  position: absolute;
  z-index: 2;
  top: var(--sks-space-2);
  right: var(--sks-space-2);
  padding: .35rem;
}

.configurator-builder-summary-actions .configurator-builder-drag {
  position: static;
  display: inline-grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.25rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-sm);
  color: var(--sks-text-muted);
}

.configurator-builder-root > .configurator-builder-category > .configurator-builder-category-head {
  min-height: 5rem;
  padding: var(--sks-space-3) var(--sks-space-4);
  background: var(--sks-glass-toolbar);
}

.configurator-rule-group {
  width: 100%;
  overflow: hidden;
}

[data-list="rule"] > .col {
  display: flex;
}

.configurator-rule-group:not([open]) > summary {
  height: 100%;
}

.configurator-rule-group > summary {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  gap: var(--sks-space-3);
  cursor: pointer;
  list-style: none;
}

.configurator-rule-group > summary::-webkit-details-marker {
  display: none;
}

.configurator-rule-trigger-icon,
.configurator-rule-action-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
}

.configurator-rule-trigger-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(var(--sks-semantic-success-rgb), .13);
  color: rgb(var(--sks-semantic-success-rgb));
  font-size: 1.1rem;
}

.configurator-rule-trigger-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: .125rem;
}

.configurator-rule-trigger-copy > small,
.configurator-rule-action-copy > small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.configurator-rule-trigger-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.configurator-rule-trigger-copy > span,
.configurator-rule-action-copy > span {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
}

.configurator-rule-group-meta,
.configurator-rule-action-controls {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-rule-group-meta > .bi {
  color: var(--sks-text-muted);
  transition: transform .2s ease;
}

.configurator-rule-group[open] .configurator-rule-group-meta > .bi {
  transform: rotate(180deg);
}

.configurator-rule-actions {
  display: grid;
  gap: var(--sks-space-2);
  padding: var(--sks-space-3);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.configurator-rule-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border-subtle);
  border-inline-start: .25rem solid currentColor;
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
}

.configurator-rule-action.is-incomplete {
  border-color: rgba(var(--sks-semantic-danger-rgb), .55);
}

.configurator-rule-action.is-visible { color: rgb(var(--sks-semantic-primary-rgb)); }
.configurator-rule-action.is-required { color: rgb(var(--sks-semantic-info-rgb)); }
.configurator-rule-action.is-automatic { color: rgb(var(--sks-semantic-warning-rgb)); }
.configurator-rule-action.is-blocking { color: rgb(var(--sks-semantic-danger-rgb)); }

.configurator-rule-action-icon {
  width: 2rem;
  height: 2rem;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.configurator-rule-action-copy {
  display: grid;
  min-width: 0;
  gap: .125rem;
}

.configurator-rule-action-copy > strong {
  color: var(--sks-text-default);
}

.configurator-rule-action-controls {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: var(--sks-space-2);
  border-top: 1px solid var(--sks-border-subtle);
}

.configurator-rule-workspace-head,
.configurator-rule-focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
}

.configurator-rule-workspace-head {
  margin-bottom: var(--sks-space-2);
}

.configurator-rule-workspace-head h2,
.configurator-rule-workspace-head p {
  margin: 0;
}

.configurator-rule-workspace-head h2 {
  font-size: var(--sks-font-lg);
}

.configurator-rule-workspace-head p {
  margin-top: .125rem;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-sm);
}

.configurator-rule-workspace-actions,
.configurator-rule-focus > span:first-child,
.configurator-rule-legend {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-rule-workspace-actions .btn {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: var(--sks-space-2);
  white-space: nowrap;
}

.configurator-catalog-audit {
  display: flex;
  align-items: flex-start;
  gap: var(--sks-space-3);
  margin: 0 0 var(--sks-space-3);
  padding: var(--sks-space-3);
  border: 1px solid color-mix(in srgb, currentColor 30%, var(--sks-border));
  border-radius: var(--sks-radius-sm);
  background: color-mix(in srgb, currentColor 7%, var(--sks-surface-1));
}

.configurator-catalog-audit.is-valid { color: var(--bs-success-text-emphasis); }
.configurator-catalog-audit.is-warning { color: var(--bs-warning-text-emphasis); }
.configurator-catalog-audit strong,
.configurator-catalog-audit span { display: block; }
.configurator-catalog-audit ul { margin: var(--sks-space-1) 0 0; padding-left: 1.15rem; }

.configurator-compatibility-list {
  display: grid;
  max-height: 20rem;
  gap: var(--sks-space-3);
  overflow: auto;
}

.configurator-inline-section-head {
  display: grid;
  gap: .125rem;
  margin-bottom: var(--sks-space-3);
  padding-top: var(--sks-space-1);
}

.configurator-inline-section-head small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-sm);
}

.configurator-compatibility-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.configurator-compatibility-group legend {
  width: 100%;
  margin: 0 0 var(--sks-space-2);
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 700;
}

.configurator-compatibility-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

.configurator-compatibility-option,
.configurator-option-automation {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2) var(--sks-space-3);
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-bg);
  color: var(--sks-text-default);
}

.configurator-compatibility-option { cursor: pointer; }
.configurator-compatibility-option span,
.configurator-option-automation span { overflow: hidden; text-overflow: ellipsis; }

.configurator-option-automations { display: grid; gap: var(--sks-space-2); }
.configurator-option-automation {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

.configurator-rule-context {
  display: grid;
  gap: var(--sks-space-1);
  padding: var(--sks-space-3);
  border-left: .2rem solid var(--bs-primary);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-bg);
}

.configurator-rule-context span { color: var(--sks-text-muted); font-size: var(--sks-font-xs); }
.configurator-rule-flat-details:has(.row:empty) { display: none; }

@media (max-width: 767.98px) {
  .configurator-compatibility-options { grid-template-columns: 1fr; }
}

.configurator-rule-legend {
  flex-wrap: wrap;
  margin-bottom: var(--sks-space-4);
}

.configurator-rule-legend > span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--sks-font-xs);
  font-weight: 700;
}

.configurator-rule-legend .is-visible { color: rgb(var(--sks-semantic-primary-rgb)); }
.configurator-rule-legend .is-required { color: rgb(var(--sks-semantic-info-rgb)); }
.configurator-rule-legend .is-automatic { color: rgb(var(--sks-semantic-warning-rgb)); }
.configurator-rule-legend .is-blocking { color: rgb(var(--sks-semantic-danger-rgb)); }

.configurator-rule-preview-btn {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
}

.configurator-rule-preview {
  display: grid;
  gap: var(--sks-space-3);
}

.configurator-rule-preview-hint {
  margin: 0;
  color: var(--sks-text-muted);
}

.configurator-rule-preview-group {
  display: grid;
  gap: var(--sks-space-3);
}

.configurator-rule-preview-group + .configurator-rule-preview-group {
  padding-top: var(--sks-space-4);
  border-top: 1px solid var(--sks-border);
}

.configurator-rule-preview-flow {
  display: grid;
  height: 1.25rem;
  color: var(--sks-text-muted);
  place-items: center;
}

.configurator-rule-preview-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-2);
  font-weight: 700;
}

.configurator-rule-preview-effects {
  display: grid;
  gap: var(--sks-space-2);
}

.configurator-rule-simulation-category {
  overflow: hidden;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
}

.configurator-rule-simulation-category.is-trigger {
  border-color: rgba(var(--sks-semantic-success-rgb), .4);
}

.configurator-rule-simulation-category > summary {
  display: flex;
  min-height: 4rem;
  align-items: center;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3);
  cursor: pointer;
  list-style: none;
}

.configurator-rule-simulation-category > summary::-webkit-details-marker {
  display: none;
}

.configurator-rule-simulation-category > summary > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: .125rem;
}

.configurator-rule-simulation-category > summary small,
.configurator-rule-simulation-effect small,
.configurator-rule-simulation-trigger small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.configurator-rule-simulation-count {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-rule-simulation-category > summary > .bi,
.configurator-rule-simulation-count > .bi {
  color: var(--sks-text-muted);
  transition: transform .2s ease;
}

.configurator-rule-simulation-category[open] > summary > .bi,
.configurator-rule-simulation-category[open] .configurator-rule-simulation-count > .bi {
  transform: rotate(180deg);
}

.configurator-rule-simulation-trigger-body,
.configurator-rule-simulation-effects {
  padding: var(--sks-space-3);
  border-top: 1px solid var(--sks-border-subtle);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.configurator-rule-simulation-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
  color: var(--sks-text-default);
  text-align: start;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.configurator-rule-simulation-trigger:not(:disabled):hover {
  border-color: rgba(var(--sks-semantic-primary-rgb), .65);
}

.configurator-rule-simulation-trigger[aria-pressed="true"] {
  border-color: rgb(var(--sks-semantic-success-rgb));
  background: rgba(var(--sks-semantic-success-rgb), .1);
  box-shadow: 0 0 0 .16rem rgba(var(--sks-semantic-success-rgb), .12);
}

.configurator-rule-simulation-trigger > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: .125rem;
}

.configurator-rule-simulation-trigger > span:nth-child(2) > span:last-child:not(.configurator-rule-preview-entity) {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
}

.configurator-rule-simulation-control {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(var(--sks-semantic-primary-rgb), .14);
  color: rgb(var(--sks-semantic-primary-rgb));
  place-items: center;
}

.configurator-rule-simulation-trigger[aria-pressed="true"] .configurator-rule-simulation-control {
  background: rgb(var(--sks-semantic-success-rgb));
  color: var(--sks-on-accent, #fff);
}

.configurator-rule-simulation-toggle-label,
.configurator-rule-simulation-state {
  flex: 0 0 auto;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--sks-surface-3, var(--bs-secondary-bg));
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 700;
}

.configurator-rule-simulation-effects {
  display: grid;
  gap: var(--sks-space-2);
}

.configurator-rule-simulation-effect {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border-subtle);
  border-inline-start: .25rem solid transparent;
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
  opacity: .68;
  transition: border-color .2s ease, background-color .2s ease, opacity .2s ease, transform .2s ease;
}

.configurator-rule-simulation-effect > div {
  display: grid;
  min-width: 0;
  gap: .125rem;
}

.configurator-rule-simulation-effect > div > span {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
}

.configurator-rule-simulation-controls {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-rule-preview-edit {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
}

#configuratorRulePreviewModal .configurator-rule-preview-group {
  padding-bottom: var(--sks-space-4);
  border-bottom: 1px solid var(--sks-border-subtle);
}

#configuratorRulePreviewModal .configurator-rule-preview-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#configuratorRulePreviewModal .configurator-rule-simulation-category {
  border: 0;
  border-radius: 0;
  background: transparent;
}

#configuratorRulePreviewModal .configurator-rule-simulation-category > summary {
  min-height: 3rem;
  padding: var(--sks-space-2) 0;
}

#configuratorRulePreviewModal :is(.configurator-rule-simulation-trigger-body, .configurator-rule-simulation-effects) {
  padding: var(--sks-space-3) 0 0;
  background: transparent;
}

#configuratorRulePreviewModal .configurator-rule-simulation-effect {
  border-width: 0 0 0 .2rem;
  border-radius: 0;
  background: transparent;
}

.configurator-rule-preview-entity {
  display: grid;
  min-width: 0;
  gap: .2rem;
  color: var(--sks-text-default);
}

.configurator-rule-preview-entity > span,
.configurator-rule-preview-entity small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
}

.configurator-rule-preview-choice {
  overflow: hidden;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
}

.configurator-rule-preview-choice .configurator-choice-content {
  display: grid;
  min-width: 0;
  gap: .2rem;
  padding: var(--sks-space-3);
}

.configurator-rule-preview-choice .configurator-choice-footer {
  display: flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
  padding: .6rem var(--sks-space-3);
  border-top: 1px solid var(--sks-border);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  font-size: var(--sks-font-sm);
}

.configurator-rule-preview-choice .configurator-choice-footer-label {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.configurator-rule-preview-choice .configurator-choice-footer-value {
  margin-inline-start: auto;
  color: var(--sks-text-default);
  font-weight: 700;
  text-align: end;
}

.configurator-rule-preview-field {
  grid-template-columns: minmax(0, 1fr) minmax(7rem, auto);
  align-items: center;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-1);
}

.configurator-rule-preview-field > span:first-child {
  display: grid;
  gap: .2rem;
}

.configurator-rule-preview-field-control {
  padding: .55rem .75rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-xs, .4rem);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  color: var(--sks-text-default) !important;
  text-align: end;
}

.configurator-rule-simulation-effect.is-reacting {
  border-inline-start-color: currentColor;
  opacity: 1;
  transform: translateX(.2rem);
}

.configurator-rule-simulation-trigger[aria-pressed="true"] .configurator-rule-preview-choice,
.configurator-rule-simulation-effect.is-reacting .configurator-rule-preview-choice,
.configurator-rule-simulation-effect.is-reacting .configurator-rule-preview-field {
  border-color: color-mix(in srgb, currentColor 45%, var(--sks-border));
  box-shadow: inset .2rem 0 currentColor;
}

.configurator-rule-simulation-effect.is-reacting.is-visible { color: rgb(var(--sks-semantic-primary-rgb)); background: rgba(var(--sks-semantic-primary-rgb), .06); }
.configurator-rule-simulation-effect.is-reacting.is-required { color: rgb(var(--sks-semantic-info-rgb)); background: rgba(var(--sks-semantic-info-rgb), .07); }
.configurator-rule-simulation-effect.is-reacting.is-automatic { color: rgb(var(--sks-semantic-warning-rgb)); background: rgba(var(--sks-semantic-warning-rgb), .08); }
.configurator-rule-simulation-effect.is-reacting.is-blocking { color: rgb(var(--sks-semantic-danger-rgb)); background: rgba(var(--sks-semantic-danger-rgb), .07); }

.configurator-rule-simulation-effect.is-reacting .configurator-rule-simulation-state {
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: currentColor;
}

.configurator-rule-simulation-badges {
  display: flex;
  grid-column: 2 / -1;
  flex-wrap: wrap;
  gap: var(--sks-space-2);
}

.configurator-rule-focus {
  margin-bottom: var(--sks-space-3);
  border-color: rgba(var(--sks-semantic-warning-rgb), .45);
  background: rgba(var(--sks-semantic-warning-rgb), .08);
}

.configurator-rule-focus > span:first-child > i {
  color: rgb(var(--sks-semantic-warning-rgb));
  font-size: 1.15rem;
}

.configurator-rule-focus > span:first-child > span {
  display: flex;
  flex-direction: column;
}

.configurator-rule-focus small {
  color: var(--sks-text-muted);
}

.configurator-rule-editor-block {
  border-width: 2px;
}

.configurator-rule-editor-block.is-condition {
  border-color: rgba(var(--sks-semantic-success-rgb), .4);
}

.configurator-rule-editor-block.is-action.is-visible {
  border-color: rgba(var(--sks-semantic-primary-rgb), .4);
}

.configurator-rule-editor-block.is-action.is-automatic {
  border-color: rgba(var(--sks-semantic-warning-rgb), .48);
}

.configurator-rule-editor-block.is-action.is-required {
  border-color: rgba(var(--sks-semantic-info-rgb), .48);
}

.configurator-rule-editor-block.is-action.is-blocking {
  border-color: rgba(var(--sks-semantic-danger-rgb), .44);
}

.configurator-rule-editor-block > header {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-rule-editor-block > header > span {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  background: rgb(var(--sks-semantic-primary-rgb));
  color: #fff;
  font-weight: 800;
}

.configurator-rule-editor-block.is-condition > header > span {
  background: rgb(var(--sks-semantic-success-rgb));
}

.configurator-rule-editor-block.is-action.is-automatic > header > span {
  background: rgb(var(--sks-semantic-warning-rgb));
  color: var(--sks-text-on-warning, #17202a);
}

.configurator-rule-editor-block.is-action.is-required > header > span {
  background: rgb(var(--sks-semantic-info-rgb));
}

.configurator-rule-editor-block.is-action.is-blocking > header > span {
  background: rgb(var(--sks-semantic-danger-rgb));
}

.configurator-rule-editor-block > header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.configurator-rule-editor-block > header small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 400;
}

@media (max-width: 767.98px) {
  .configurator-rule-workspace-head,
  .configurator-rule-focus {
    align-items: stretch;
    flex-direction: column;
  }

  .configurator-rule-workspace-actions {
    flex-wrap: wrap;
  }

  .configurator-rule-simulation-trigger,
  .configurator-rule-simulation-effect {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .configurator-rule-simulation-trigger {
    flex-wrap: wrap;
  }

  .configurator-rule-simulation-toggle-label,
  .configurator-rule-simulation-state {
    grid-column: 2;
    justify-self: start;
  }

  .configurator-builder-category-head,
  .configurator-builder-group-head {
    flex-wrap: wrap;
  }

  .configurator-builder-category-head .card-actions,
  .configurator-builder-group-head .card-actions {
    width: 100%;
  }

}

@media (max-width: 991.98px) {
  .configurator-rule-action {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .configurator-rule-action-controls {
    grid-column: 1 / -1;
    padding-top: var(--sks-space-2);
    border-top: 1px solid var(--sks-border-subtle);
  }
}

@media (max-width: 1023.98px), (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #configuratorCatalogRoot #configuratorCatalogLibrary,
  #configuratorCatalogRoot #configuratorCatalogWorkspace,
  #configuratorCatalogRoot #configuratorCatalogFiltersCard,
  #configuratorCatalogRoot #configuratorCatalogToggleFiltersBtn,
  #configuratorCatalogRoot #configuratorCatalogAddBtn,
  #configuratorCatalogRoot #configuratorCatalogChangeBtn,
  #configuratorCatalogRoot #configuratorCatalogRefreshBtn {
    display: none !important;
  }

  #configuratorCatalogRoot .configurator-builder-device-guard {
    display: flex;
    max-width: 34rem;
    align-items: center;
    gap: var(--sks-space-4);
    padding: var(--sks-space-4);
    margin: clamp(2rem, 8vh, 5rem) auto;
    border: 1px solid rgba(var(--sks-semantic-primary-rgb), .3);
    border-radius: var(--sks-radius-lg);
    background: linear-gradient(135deg, rgba(var(--sks-semantic-primary-rgb), .1), var(--sks-surface-1));
  }

  .configurator-builder-device-icon {
    display: inline-grid;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--sks-semantic-primary-rgb), .16);
    color: rgb(var(--sks-semantic-primary-rgb));
    font-size: 1.5rem;
  }

  .configurator-builder-device-guard h2 {
    margin: 0 0 var(--sks-space-1);
    font-size: var(--sks-font-lg);
  }

  .configurator-builder-device-guard p {
    margin: 0;
    color: var(--sks-text-muted);
  }
}

.configurator-catalog-sort-ghost {
  opacity: 0.45;
}

.configurator-catalog-item-card .card-body {
  min-height: 9rem;
  padding: var(--sks-space-3);
}

.configurator-catalog-item-card:has(.configurator-catalog-drag-handle) .entity-card-head {
  padding-inline-end: 1.5rem;
}

.configurator-catalog-item-card .entity-card-extra {
  gap: var(--sks-space-1);
}

.configurator-catalog-item-card .card-actions:empty {
  display: none;
}

#configuratorCatalogRoot [data-list="category"] > .configurator-category-group-sort {
  flex: 0 0 100%;
  width: 100%;
}

.configurator-category-child-sort .configurator-catalog-item-card {
  box-shadow: none !important;
}

.configurator-admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sks-space-3);
}

.configurator-admin-summary-item {
  min-width: 0;
}

.users-status-summary-grid,
.customers-status-summary-grid,
.representives-status-summary-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

.customers-status-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.representives-status-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.users-status-summary-item,
.customers-status-summary-item,
.representives-status-summary-item {
  min-width: 0;
}

:is(#usersStatusSummary .users-status-kpi, #customersStatusSummary .customers-status-kpi, #representivesStatusSummary .representives-status-kpi) {
  min-height: 7rem;
}

:is(#usersStatusSummary, #customersStatusSummary, #representivesStatusSummary) .metric-card-body {
  padding: var(--sks-space-3);
}

:is(#usersStatusSummary, #customersStatusSummary, #representivesStatusSummary) .metric-card-heading {
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-1);
}

:is(#usersStatusSummary, #customersStatusSummary, #representivesStatusSummary) .metric-card-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#usersStatusSummary, #customersStatusSummary, #representivesStatusSummary) .metric-card-icon {
  flex-basis: 2rem;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

:is(#usersStatusSummary, #customersStatusSummary, #representivesStatusSummary) .metric-card-value {
  font-size: clamp(1.6rem, 2vw, 2.25rem);
}

#users-grid .users-card-email,
#representivesList .representives-card-email {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

@media (max-width: 1399.98px) {
  .users-status-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .users-status-summary-grid,
  .customers-status-summary-grid,
  .representives-status-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 399.98px) {
  .users-status-summary-grid,
  .customers-status-summary-grid,
  .representives-status-summary-grid {
    grid-template-columns: 1fr;
  }
}

:is(#configuratorAdminSummary, #productionStatusSummary, #qualityStatusSummary, #tradingStatusSummary, #warehouseKanbanStatusSummary, #repairStatusSummary, #accessReviewsSummary, #warehouseDispositionKpis) .metric-card-body {
  padding: var(--sks-card-local-body-padding);
}

:is(#configuratorAdminSummary, #productionStatusSummary, #qualityStatusSummary, #tradingStatusSummary, #warehouseKanbanStatusSummary, #repairStatusSummary, #accessReviewsSummary, #warehouseDispositionKpis) .metric-card-heading {
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-1);
}

:is(#configuratorAdminSummary, #productionStatusSummary, #qualityStatusSummary, #tradingStatusSummary, #warehouseKanbanStatusSummary, #repairStatusSummary, #accessReviewsSummary, #warehouseDispositionKpis) .metric-card-value {
  font-size: clamp(1.5rem, 2vw, 2.25rem);
}

:is(#productionStatusSummary .production-status-kpi, #qualityStatusSummary .quality-status-kpi, #tradingStatusSummary .trading-status-kpi, #warehouseKanbanStatusSummary .warehouse-kanban-status-kpi, #repairStatusSummary .repair-status-kpi, #accessReviewsSummary .access-review-status-kpi, #warehouseDispositionKpis .warehouse-disposition-kpi) {
  min-height: 7rem;
  transition: border-color var(--sks-motion), box-shadow var(--sks-motion), transform var(--sks-motion), background-color var(--sks-motion);
}

#productionStatusSummary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#accessReviewsSummary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#qualityStatusSummary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#tradingStatusSummary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#warehouseKanbanStatusSummary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#repairStatusSummary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
  .configurator-admin-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :is(#productionStatusSummary, #qualityStatusSummary, #tradingStatusSummary, #warehouseKanbanStatusSummary, #repairStatusSummary, #accessReviewsSummary) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  #accessReviewsSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .configurator-admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(#productionStatusSummary, #qualityStatusSummary, #tradingStatusSummary, #warehouseKanbanStatusSummary, #repairStatusSummary) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 399.98px) {
  .configurator-admin-summary-grid {
    grid-template-columns: 1fr;
  }

  :is(#productionStatusSummary, #qualityStatusSummary, #tradingStatusSummary, #warehouseKanbanStatusSummary, #repairStatusSummary) {
    grid-template-columns: 1fr;
  }
}

#configuratorCatalogModal .configurator-modal-delete {
  min-width: 2.5rem;
}

#configuratorCatalogModal .compact-editor-modal-footer > :not(#configuratorCatalogSaveBtn) {
  display: none !important;
}

#configuratorCatalogModal .configurator-catalog-modal-body,
#configuratorCatalogModal .configurator-catalog-fields {
  gap: var(--sks-space-2);
}

.configurator-modal-flat-group {
  min-width: 0;
  padding: 0 0 var(--sks-space-3);
  border-bottom: 1px solid var(--sks-border-subtle);
}

.configurator-modal-flat-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.configurator-modal-flat-group > .row {
  margin: 0;
}

.configurator-modal-flat-details > summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
  cursor: pointer;
  list-style: none;
}

.configurator-modal-flat-details > summary::-webkit-details-marker {
  display: none;
}

.configurator-modal-flat-details[open] > summary .configurator-modal-section-chevron {
  transform: rotate(180deg);
}

.configurator-modal-flat-details-body {
  padding-top: var(--sks-space-2);
}

#configuratorCatalogModal .configurator-modal-context-card {
  padding: 0 0 var(--sks-space-3);
  border: 0;
  border-bottom: 1px solid var(--sks-border-subtle);
  border-radius: 0;
  background: transparent;
}

.configurator-catalog-modal-body,
.configurator-catalog-fields {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--sks-space-3);
}

.configurator-catalog-fields > .row {
  margin: 0;
  padding: 0 0 var(--sks-space-3);
  border-bottom: 1px solid var(--sks-border);
}

.configurator-catalog-fields > .d-grid {
  margin-top: 0 !important;
}

.configurator-catalog-fields .compact-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sks-space-2);
}

.configurator-catalog-fields .compact-alert > i {
  flex: 0 0 auto;
  margin-top: .15em;
}

.configurator-catalog-translation-card {
  overflow: hidden;
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-md);
  background: var(--sks-surface-1);
}

.configurator-catalog-translation-card > header {
  padding: var(--sks-space-2) var(--sks-space-3);
  border-bottom: 1px solid var(--sks-border);
  color: var(--sks-text-default);
  font-size: var(--sks-card-meta-size);
  font-weight: 700;
}

.configurator-catalog-translation-card > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sks-space-3);
  min-height: 2.75rem;
  padding: var(--sks-space-2) var(--sks-space-3);
  cursor: pointer;
  list-style: none;
}

.configurator-catalog-translation-card > summary::-webkit-details-marker,
.configurator-translation-more > summary::-webkit-details-marker,
.configurator-advanced-settings > summary::-webkit-details-marker {
  display: none;
}

.configurator-catalog-translation-card[open] > summary {
  border-bottom: 1px solid var(--sks-border);
}

.configurator-catalog-translation-card > summary > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-2);
  min-width: 0;
}

.configurator-catalog-translation-card > summary strong {
  display: inline-grid;
  min-width: 2rem;
  min-height: 1.5rem;
  place-items: center;
  border-radius: 999px;
  background: var(--sks-control-bg);
  color: var(--sks-text-muted);
  font-size: var(--sks-card-label-size);
}

.configurator-catalog-translation-card.is-complete > summary strong {
  background: color-mix(in srgb, var(--bs-success) 18%, var(--sks-control-bg));
  color: var(--bs-success-text-emphasis);
}

.configurator-catalog-translation-card > summary small {
  overflow: hidden;
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-catalog-translation-card > summary > i {
  color: var(--sks-text-muted);
  transition: transform var(--sks-transition-fast);
}

.configurator-catalog-translation-card[open] > summary > i {
  transform: rotate(180deg);
}

.configurator-catalog-translation-card > .row {
  margin: 0;
  padding: var(--sks-space-3);
}

.configurator-translation-more {
  margin-top: var(--sks-space-1);
  border-top: 1px solid var(--sks-border);
}

.configurator-translation-more > summary {
  padding: var(--sks-space-2) 0 0;
  color: var(--sks-text-muted);
  cursor: pointer;
  font-size: var(--sks-font-xs);
  font-weight: 700;
  list-style: none;
}

#configuratorCatalogModalTitleText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-modal-context-card {
  display: flex;
  align-items: center;
  gap: var(--sks-space-3);
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-muted-bg);
}

.configurator-modal-context-card > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.configurator-modal-context-card strong,
.configurator-modal-context-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-modal-context-card small {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
}

.configurator-template-usage {
  align-items: center;
  gap: var(--sks-space-3);
  padding: var(--sks-space-2) var(--sks-space-3);
}

.configurator-template-usage > span:last-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-template-usage > span:last-child > small {
  color: inherit;
  opacity: .85;
}

@media (max-width: 767.98px) {
  .configurator-template-usage {
    align-items: flex-start;
  }

  .configurator-template-usage > span:last-child {
    grid-template-columns: 1fr;
    gap: .125rem;
  }

}

.configurator-modal-form-section {
  overflow: hidden;
  border: 1px solid var(--sks-border-subtle);
  border-radius: var(--sks-radius-md);
  background: var(--sks-surface-1);
  box-shadow: 0 1px 0 rgba(var(--sks-semantic-primary-rgb), .035);
}

.configurator-modal-form-section > header {
  display: flex;
  align-items: center;
  gap: var(--sks-space-3);
  padding: var(--sks-space-2) var(--sks-space-3);
  border-bottom: 1px solid var(--sks-border);
}

.configurator-modal-form-section > summary {
  display: flex;
  align-items: center;
  gap: var(--sks-space-3);
  min-height: 3.5rem;
  padding: var(--sks-space-2) var(--sks-space-3);
  cursor: pointer;
  list-style: none;
}

.configurator-modal-form-section > summary::-webkit-details-marker {
  display: none;
}

.configurator-modal-form-section > summary > i:first-child {
  color: var(--bs-primary);
  font-size: 1.1rem;
}

.configurator-modal-form-section > summary > span {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.configurator-modal-form-section > summary small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 400;
}

.configurator-modal-form-section.is-collapsible[open] > summary {
  border-bottom: 1px solid var(--sks-border-subtle);
  background: color-mix(in srgb, var(--sks-surface-2) 68%, transparent);
}

.configurator-modal-section-chevron {
  color: var(--sks-text-muted);
  transition: transform var(--sks-transition-fast);
}

.configurator-modal-form-section[open] > summary .configurator-modal-section-chevron {
  transform: rotate(180deg);
}

.configurator-modal-form-section > header > i {
  color: var(--bs-primary);
  font-size: 1.1rem;
}

.configurator-modal-form-section > header > span {
  display: flex;
  flex-direction: column;
}

.configurator-modal-form-section > header small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 400;
}

.configurator-modal-form-section > .row {
  margin: 0;
  padding: var(--sks-space-3);
}

.configurator-modal-form-section-body {
  padding: var(--sks-space-4);
}

.configurator-modal-form-section-body > .row {
  margin: 0;
}

.configurator-category-editor {
  display: grid;
  gap: var(--sks-space-3);
}

.configurator-category-translations {
  padding-bottom: var(--sks-space-3);
  border-bottom: 1px solid var(--sks-border-subtle);
}

.configurator-category-translations .configurator-catalog-translation-card > .row {
  padding-top: var(--sks-space-2);
}

.configurator-category-flat-settings {
  margin: 0;
}

.configurator-category-flat-settings > :is(.col-md-4, .col-md-6) {
  width: 50%;
}

.configurator-category-flat-settings > :first-child {
  width: 100%;
}

.configurator-category-flat-settings .configurator-form-switch {
  min-height: 2.25rem;
  padding: .4rem .65rem;
  font-size: var(--sks-font-body-sm);
}

@media (max-width: 767.98px) {
  .configurator-category-flat-settings > :is(.col-md-4, .col-md-6) {
    width: 100%;
  }
}

.configurator-form-switch {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
  padding: var(--sks-space-2) var(--sks-space-3);
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm);
  background: var(--sks-control-bg);
  color: var(--sks-text-default);
  font-size: var(--sks-font-sm);
  font-weight: 700;
  transition: border-color var(--sks-transition-fast), background-color var(--sks-transition-fast);
}

.configurator-form-switch-copy,
.configurator-form-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-1);
}

.configurator-field-help {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sks-text-muted);
  cursor: pointer;
  font-size: var(--sks-font-xs);
}

.configurator-field-help:hover,
.configurator-field-help:focus-visible {
  color: rgb(var(--sks-semantic-info-rgb));
  background: rgba(var(--sks-semantic-info-rgb), .12);
  outline: none;
}

.configurator-form-switch:hover,
.configurator-form-switch:focus-within {
  border-color: color-mix(in srgb, var(--bs-primary) 58%, var(--sks-border));
  background: color-mix(in srgb, var(--bs-primary) 6%, var(--sks-control-bg));
}

.configurator-form-switch > .form-switch {
  min-height: auto;
  margin: 0;
  padding-left: 2.5em;
}

.configurator-form-switch .form-check-input {
  margin-top: 0;
  cursor: pointer;
}

.configurator-modal-form-section-body > .d-grid + .configurator-advanced-settings {
  margin-top: var(--sks-space-3) !important;
}

.configurator-catalog-fields > .configurator-advanced-settings {
  margin-top: 0 !important;
}

.configurator-advanced-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
}

.configurator-advanced-settings > summary small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-xs);
  font-weight: 500;
}

#configuratorAdminModalTitleText {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-admin-modal-body {
  display: block;
}

.configurator-admin-modal-body > [data-form-section]:not(.d-none) {
  display: grid;
  gap: .75rem;
}

.configurator-admin-form-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.configurator-admin-form-group.is-untitled > .compact-editor-grid {
  padding-top: 0;
}

.configurator-admin-field-control {
  flex-wrap: nowrap;
}

.configurator-admin-field-control > .input-group-text {
  flex: 0 0 auto;
}

.configurator-admin-field-control > .form-control,
.configurator-admin-field-control > .form-select {
  min-width: 0;
}

.configurator-admin-field-control > .form-control[readonly],
.configurator-admin-field-control > .form-control:disabled,
.configurator-admin-field-control > .form-select:disabled {
  color: var(--sks-text-muted);
}

.configurator-admin-user-picker {
  display: grid;
  gap: var(--sks-space-2);
}

.configurator-admin-user-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sks-space-3);
}

.configurator-admin-user-count {
  flex: 0 0 auto;
  color: var(--bs-primary);
  font-size: var(--sks-font-meta);
  font-weight: 600;
  white-space: nowrap;
}

.configurator-admin-user-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sks-space-4);
  max-height: 21rem;
  overflow-y: auto;
  border-top: 1px solid var(--sks-border-subtle, var(--sks-border));
}

.configurator-admin-user-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
  min-width: 0;
  min-height: 3.5rem;
  padding: var(--sks-space-2);
  border-bottom: 1px solid var(--sks-border-subtle, var(--sks-border));
  background: transparent;
  transition: background-color .15s ease, color .15s ease;
}

.configurator-admin-user-option:hover,
.configurator-admin-user-option:focus-within,
.configurator-admin-user-option.is-selected {
  background: color-mix(in srgb, var(--bs-primary) 7%, transparent);
}

.configurator-admin-user-option.is-disabled {
  opacity: .58;
}

.configurator-admin-user-identity {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.configurator-admin-user-option.is-disabled .configurator-admin-user-identity {
  cursor: not-allowed;
}

.configurator-admin-user-icon {
  flex: 0 0 auto;
  color: var(--sks-text-muted);
  font-size: var(--sks-font-base);
}

.configurator-admin-user-option.is-selected .configurator-admin-user-icon {
  color: var(--bs-primary);
}

.configurator-admin-user-copy {
  display: grid;
  gap: .125rem;
  min-width: 0;
}

.configurator-admin-user-copy strong,
.configurator-admin-user-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.configurator-admin-user-copy strong {
  color: var(--sks-text-default);
  font-size: var(--sks-font-body-sm);
  font-weight: 700;
}

.configurator-admin-user-copy small {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-meta);
}

.configurator-admin-user-switch {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.configurator-admin-user-switch .form-check-input {
  float: none;
  margin: 0;
  cursor: pointer;
}

.configurator-admin-user-switch .form-check-input:disabled {
  cursor: not-allowed;
}

.configurator-admin-user-empty {
  margin: 0;
  padding: var(--sks-space-3) var(--sks-space-2);
  text-align: center;
}

@media (max-width: 767.98px) {
  .configurator-admin-user-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.configurator-admin-icon-label {
  display: inline-flex !important;
  align-items: center;
  gap: var(--sks-space-2);
}

.configurator-admin-auto-details {
  padding-top: var(--sks-space-3);
  border-top: 1px solid var(--sks-border-subtle, var(--sks-border));
}

.configurator-admin-auto-details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sks-space-2);
  padding: 0;
  cursor: pointer;
  list-style: none;
}

.configurator-admin-auto-details > summary::-webkit-details-marker {
  display: none;
}

.configurator-admin-auto-details > summary > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sks-space-2);
  font-size: var(--sks-font-sm);
  font-weight: 700;
}

.configurator-admin-auto-details > summary > span i {
  color: var(--bs-info);
}

.configurator-admin-auto-details > summary > i:last-child {
  color: var(--sks-text-muted);
  transition: transform var(--sks-transition-fast);
}

.configurator-admin-auto-details[open] > summary {
  margin-bottom: var(--sks-space-2);
}

.configurator-admin-auto-details[open] > summary > i:last-child {
  transform: rotate(180deg);
}

.configurator-admin-auto-body {
  padding: var(--sks-space-2) 0 0;
}

#cfgMarketLanguages,
#cfgAccessMarkets {
  max-height: 12rem;
  overflow-y: auto;
}

.configurator-admin-active-row {
  margin-top: .75rem;
}

.configurator-admin-translation {
  padding-top: var(--sks-space-2);
}

.configurator-admin-translation.is-separated {
  margin-top: var(--sks-space-3);
  padding-top: var(--sks-space-3);
  border-top: 1px solid var(--sks-border-subtle, var(--sks-border));
}

.configurator-admin-translation-heading {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-2);
}

.configurator-admin-translation-heading > i {
  color: var(--bs-primary);
}

.configurator-admin-translation-heading > strong {
  font-size: var(--sks-font-base);
}

.configurator-admin-translation-heading > .small {
  font-size: var(--sks-font-body-sm);
}

body.configurator-embedded-preview {
  min-height: auto !important;
  padding-block: var(--sks-space-3) !important;
}

body.configurator-embedded-preview .sks-app-header {
  display: none !important;
}

body.configurator-embedded-preview footer {
  display: none !important;
}

body.configurator-embedded-preview #main-content {
  max-width: none;
  padding-inline: var(--sks-space-3) !important;
}

body.configurator-embedded-preview.configurator-audit-embedded-view {
  padding-block: 0 !important;
}

body.configurator-embedded-preview.configurator-audit-embedded-view #main-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
}

body.configurator-embedded-preview.configurator-audit-embedded-view #configuratorRoot {
  margin: 0 !important;
  padding: 0 !important;
}

body.configurator-embedded-preview #configuratorDrafts,
body.configurator-embedded-preview #configuratorDraftsCard {
  display: none !important;
}

body.configurator-preview #configuratorDraftsCard,
body.configurator-preview #configuratorNewBtn {
  display: none !important;
}

body.configurator-editor-view #configuratorNewBtn {
  display: none !important;
}

body.configurator-editor-view [data-global-card-content-toggle] {
  display: none !important;
}

body.configurator-embedded-preview .compact-filter-more {
  display: none !important;
}

#configuratorRoot .configurator-panel.is-incomplete,
#configuratorRoot .configurator-group-section.is-incomplete {
  border-color: color-mix(in srgb, var(--bs-danger) 58%, var(--bs-border-color));
}

#configuratorRoot .configurator-field.is-incomplete :is(.form-control, .form-select, .form-range) {
  border-color: var(--bs-danger);
}

#configuratorRoot .configurator-party-field.is-incomplete > .border,
#configuratorRoot .configurator-party-field.is-incomplete > .form-control,
#configuratorRoot .configurator-party-field.is-incomplete > label + .form-control,
#configuratorRoot #configuratorCustomerField.is-incomplete > :first-child .form-control {
  border-color: var(--bs-danger) !important;
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0 0 1px var(--bs-danger);
}

#configuratorRoot .configurator-completeness {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .5rem;
  padding: .625rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius-lg);
  font-size: .875rem;
}

#configuratorRoot .configurator-completeness.is-complete {
  color: var(--bs-success-text-emphasis);
  background: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
}

#configuratorRoot .configurator-completeness.is-incomplete {
  display: block;
  color: var(--bs-danger-text-emphasis);
  background: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle);
}

#configuratorRoot .configurator-missing-list {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  margin-top: .35rem;
}

#configuratorRoot .configurator-missing-list button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}

#configuratorRoot [data-media-gallery] > [data-media-item] {
  min-width: 0;
}

#configuratorRoot .configurator-uploaded-media-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius, var(--bs-border-radius-lg));
  background: var(--sks-surface-1, var(--bs-body-bg));
  color: var(--bs-body-color);
}

#configuratorRoot .configurator-uploaded-media-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(10rem, 18vw, 13rem);
  overflow: hidden;
  border-bottom: 1px solid var(--sks-border, var(--bs-border-color));
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  color: var(--bs-body-color);
}

#configuratorRoot .configurator-uploaded-media-preview.is-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#configuratorRoot .configurator-uploaded-media-preview.is-document {
  flex-direction: column;
  gap: var(--sks-space-2, .5rem);
  color: var(--bs-danger-text-emphasis);
  text-decoration: none;
  transition: background-color var(--sks-motion, 150ms ease), color var(--sks-motion, 150ms ease);
}

#configuratorRoot .configurator-uploaded-media-preview.is-document:hover,
#configuratorRoot .configurator-uploaded-media-preview.is-document:focus-visible {
  background: var(--sks-hover, var(--bs-secondary-bg));
  color: var(--bs-danger);
}

#configuratorRoot .configurator-uploaded-media-preview.is-document:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

#configuratorRoot .configurator-uploaded-media-preview.is-document i {
  font-size: 2.25rem;
  line-height: 1;
}

#configuratorRoot .configurator-uploaded-media-preview.is-document span {
  font-size: var(--sks-font-ui-sm, .875rem);
  font-weight: 600;
}

#configuratorRoot .configurator-uploaded-media-name {
  display: -webkit-box;
  min-height: 3.25rem;
  padding: var(--sks-space-3, .75rem);
  overflow: hidden;
  color: var(--bs-body-color);
  font-size: var(--sks-font-ui-sm, .875rem);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#configuratorRoot .configurator-uploaded-media-actions {
  margin-top: auto;
  padding: var(--sks-space-3, .75rem);
  border-top: 1px solid var(--sks-border, var(--bs-border-color));
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

@media (max-width: 575.98px) {
  .configurator-catalog-resource-nav .btn {
    flex-basis: 100%;
  }

  #cfgAccessMarkets {
    grid-template-columns: 1fr;
  }
}

.audit-json {
  min-height: 22rem;
  padding: 1rem;
  overflow: auto;
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--bs-body-bg) 84%, var(--bs-secondary-bg));
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

.audit-module-kpi {
  width: 100%;
  min-width: 0;
  min-height: 7rem;
  color: inherit;
}

.audit-module-kpi .metric-card-body {
  gap: var(--sks-space-1);
  padding: var(--sks-space-3);
}

.audit-module-kpi .metric-card-heading {
  min-height: 2rem;
  margin-bottom: var(--sks-space-1);
  gap: var(--sks-space-2);
}

.audit-module-kpi .metric-card-icon {
  flex-basis: 2rem;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

html .audit-module-kpi .metric-card-value {
  font-size: clamp(1.75rem, 2.2vw, 2.5rem);
}

@media (max-width: 991.98px) {
  .audit-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .audit-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.audit-event-card {
  --sks-audit-accent: var(--sks-chart-secondary);
}

.audit-event-card.is-tone-primary { --sks-audit-accent: var(--sks-chart-primary); }
.audit-event-card.is-tone-danger { --sks-audit-accent: var(--sks-chart-danger); }
.audit-event-card.is-tone-success { --sks-audit-accent: var(--sks-chart-success); }
.audit-event-card.is-tone-warning { --sks-audit-accent: var(--sks-chart-warning); }
.audit-event-card.is-tone-info { --sks-audit-accent: var(--sks-chart-info); }
.audit-event-card.is-tone-secondary { --sks-audit-accent: var(--sks-chart-secondary); }

.audit-event-card .entity-card-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--sks-audit-accent), transparent 55%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sks-audit-accent) 16%, transparent);
  color: color-mix(in srgb, var(--sks-audit-accent), white var(--sks-metric-text-tint, 0%));
}

.audit-card-request {
  flex: 1 1 auto;
  max-width: calc(100% - 4rem);
}

.audit-card-request code {
  color: inherit;
  font-size: var(--sks-card-meta-size);
}

.audit-infinite-sentinel {
  min-height: 3rem;
  color: var(--bs-secondary-color);
}

/* Shared component owner. !important is limited to Bootstrap utility adapters
   (shadow, text color, font size/weight, spacing) and accessibility/overlay guards. */
/* ============================================================================
   CALENDAR PAGE EXCEPTIONS
   ========================================================================== */

#calendarContainer .card .card-body {
  justify-content: flex-start !important;
}

#calendarContainer .card .card-body .mt-auto {
  margin-top: auto !important;
}

#empChartSick {
  max-height: var(--sks-dashboard-chart-max-h);
}

/* ============================================================================
   KPI TILES
   ========================================================================== */

.kpi-tile {
  padding: var(--sks-space-4);
}

.kpi-tile .kpi-title {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-meta);
  line-height: 1.2;
}

.kpi-tile .kpi-value {
  color: var(--bs-emphasis-color);
  font-size: var(--sks-font-xl);
}

.kpi-tile .kpi-sub {
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-meta);
}

.metric-card {
  min-height: 100%;
}

.metric-card-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.metric-card-title {
  min-height: 2.75em;
  overflow: hidden;
  line-height: 1.35;
}

.metric-card-value {
  display: flex;
  min-height: 1.2em;
  align-items: center;
  overflow: hidden;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card-sub {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.chart-panel-card .card-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.chart-panel-title {
  min-height: 1.7em;
  min-width: 0;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-panel-card canvas,
.chart-panel-card .table-responsive {
  flex: 1 1 auto;
}

/* ============================================================================
   DASHBOARD
   ========================================================================== */

.dashboard-layout-controls {
  position: absolute;
  z-index: 4;
  top: var(--sks-space-3);
  right: var(--sks-space-3);
  display: none;
  align-items: center;
  gap: var(--sks-space-2);
  padding: var(--sks-space-2);
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: color-mix(in srgb, var(--sks-surface, var(--bs-body-bg)) 94%, transparent);
  box-shadow: var(--sks-shadow-sm);
}

.dashboard-card-grid.is-layout-editing .dashboard-layout-controls {
  display: flex;
}

.dashboard-card-grid.is-layout-editing .card-dashboard {
  outline: 2px dashed color-mix(in srgb, var(--bs-primary) 58%, transparent);
  outline-offset: -.2rem;
}

.dashboard-layout-handle,
.dashboard-admin-handle {
  cursor: grab;
}

.dashboard-layout-ghost {
  opacity: .38;
}

.dashboard-admin-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sks-space-4);
  align-items: stretch;
}

.dashboard-admin-card-col {
  min-width: 0;
}

.dashboard-admin-card-col[data-width="1"] {
  grid-column: span 2;
}

.dashboard-admin-card-col[data-width="2"] {
  grid-column: span 4;
}

.dashboard-admin-card-col[data-width="3"] {
  grid-column: span 6;
}

.dashboard-admin-card-col[data-width="4"] {
  grid-column: span 3;
}

.dashboard-admin-card.is-unavailable {
  opacity: .58;
}

.dashboard-admin-title {
  min-width: 0;
  flex: 1 1 auto;
}

.dashboard-admin-heading-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--sks-space-2);
  align-items: center;
}

.dashboard-admin-handle {
  display: inline-flex;
  width: var(--sks-control-icon);
  height: var(--sks-control-icon);
  min-width: var(--sks-control-icon);
  padding: 0;
  align-items: center;
  justify-content: center;
}

.dashboard-admin-settings {
  display: grid;
  gap: var(--sks-space-2);
  margin-top: auto;
  padding-top: var(--sks-space-3);
  border-top: 1px solid var(--sks-border-subtle, var(--sks-border));
}

.dashboard-admin-size {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-2);
}

.dashboard-admin-setting-label {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 600;
}

.dashboard-admin-lock.form-switch {
  display: flex;
  width: 100%;
  min-height: 4rem;
  margin: 0;
  padding: var(--sks-space-2) var(--sks-space-3);
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
  box-sizing: border-box;
  cursor: pointer;
}

.dashboard-admin-lock.form-switch .form-check-input {
  float: none;
  order: 2;
  margin: 0 0 0 auto;
  flex: 0 0 auto;
}

.dashboard-admin-lock.form-switch .form-check-label {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  order: 1;
  min-width: 0;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  line-height: 1.25;
}

.dashboard-admin-lock.form-switch .form-check-label > span,
.dashboard-admin-lock.form-switch .form-check-label > small {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
}

.dashboard-admin-lock.form-switch .form-check-label small {
  margin-top: var(--sks-space-1);
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 400;
}

.dashboard-admin-lock-state {
  display: flex;
  min-height: 2.75rem;
  padding: var(--sks-space-2) 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .dashboard-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-admin-card-col[data-width="1"],
  .dashboard-admin-card-col[data-width="4"] {
    grid-column: span 1;
  }

  .dashboard-admin-card-col[data-width="2"],
  .dashboard-admin-card-col[data-width="3"] {
    grid-column: span 2;
  }
}

@media (max-width: 575.98px) {
  .dashboard-layout-controls {
    position: static;
    margin: var(--sks-space-3);
    justify-content: space-between;
  }

  .dashboard-layout-controls .btn {
    min-width: 2.5rem;
  }

  .dashboard-admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-admin-card-col[data-width] {
    grid-column: span 1;
  }
}

.dashboard-graph-wrapper {
  position: relative;
  flex: 1 1 var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
  min-height: var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
  height: var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
}

.dashboard-graph-area {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.dashboard-production-calculator {
  display: flex;
  width: min(100%, 28rem);
  margin: auto;
  gap: var(--sks-space-3);
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.dashboard-production-calculator-lines {
  display: grid;
  padding: var(--sks-space-2) var(--sks-space-3);
  overflow: hidden;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sks-surface-2, var(--bs-tertiary-bg)) 86%, transparent),
    color-mix(in srgb, var(--sks-surface, var(--bs-body-bg)) 96%, transparent)
  );
}

.dashboard-production-calculator-row {
  display: grid;
  grid-template-columns: minmax(6.75rem, .9fr) minmax(0, 1.1fr);
  gap: var(--sks-space-4);
  align-items: center;
}

.dashboard-production-calculator-lines .dashboard-production-calculator-row {
  min-height: 4.35rem;
  padding: var(--sks-space-2) 0;
}

.dashboard-production-calculator-lines .dashboard-production-calculator-row + .dashboard-production-calculator-row {
  border-top: 1px solid color-mix(in srgb, var(--sks-border, var(--bs-border-color)) 70%, transparent);
}

.dashboard-production-calculator-number-wrap {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: var(--sks-space-2);
  align-items: baseline;
  justify-items: end;
}

.dashboard-production-calculator-operator {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  color: var(--sks-text-muted);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sks-border-strong, var(--bs-border-color)) 30%, transparent);
  font-size: var(--sks-font-sm);
  font-weight: 700;
  line-height: 1;
}

.dashboard-production-calculator-operator:empty {
  visibility: hidden;
}

.dashboard-production-calculator-value {
  color: var(--sks-text-default);
  font-size: clamp(2.35rem, 3.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dashboard-production-calculator-label {
  color: var(--sks-text-muted);
  font-size: var(--sks-font-meta);
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.25;
}

.dashboard-production-calculator-total {
  position: relative;
  padding: var(--sks-space-3);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sks-chart-success) 24%, var(--sks-border, var(--bs-border-color)));
  border-radius: var(--sks-radius);
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--sks-chart-success) 10%, var(--sks-surface, var(--bs-body-bg))),
    color-mix(in srgb, var(--sks-chart-success) 3%, var(--sks-surface, var(--bs-body-bg)))
  );
  box-shadow: 0 .45rem 1.2rem color-mix(in srgb, var(--sks-chart-success) 10%, transparent);
}

.dashboard-production-calculator-total::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: .24rem;
  background: var(--sks-chart-success);
  content: "";
}

.dashboard-production-calculator-total .dashboard-production-calculator-value {
  font-size: clamp(2.8rem, 3.8vw, 3.75rem);
}

.dashboard-production-calculator--dense {
  gap: var(--sks-space-2);
}

.dashboard-production-calculator--dense .dashboard-production-calculator-lines {
  padding-top: var(--sks-space-1);
  padding-bottom: var(--sks-space-1);
}

.dashboard-production-calculator--dense .dashboard-production-calculator-lines .dashboard-production-calculator-row {
  min-height: 3.55rem;
  padding-top: var(--sks-space-1);
  padding-bottom: var(--sks-space-1);
}

.dashboard-production-calculator--dense .dashboard-production-calculator-value {
  font-size: clamp(2rem, 2.7vw, 2.65rem);
}

.dashboard-production-calculator--dense .dashboard-production-calculator-total {
  padding-top: var(--sks-space-2);
  padding-bottom: var(--sks-space-2);
}

.dashboard-production-calculator--dense .dashboard-production-calculator-total .dashboard-production-calculator-value {
  font-size: clamp(2.55rem, 3.4vw, 3.35rem);
}

#dashProductionFiscalKpi {
  display: flex;
  /* The KPI cells and filters are injected after the API response. Reserving
     their final footprint keeps the surrounding dashboard row stationary. */
  min-height: 17rem;
  flex: 1 1 auto;
  flex-direction: column;
}

#dashProductionFiscalKpi[aria-busy="true"] {
  opacity: .68;
  pointer-events: none;
}

.dashboard-fiscal-kpi-filters {
  display: grid;
  margin-top: var(--sks-space-2);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sks-space-2);
  text-align: left;
}

.dashboard-fiscal-kpi-filter {
  min-width: 0;
}

.dashboard-fiscal-kpi-filter .form-select {
  border-color: var(--sks-border, var(--bs-border-color));
  background-color: transparent;
  color: var(--bs-body-color);
  min-width: 0;
  min-height: 2rem;
  padding-top: var(--sks-space-1);
  padding-bottom: var(--sks-space-1);
  font-size: var(--sks-font-table);
  line-height: 1.15;
}

.dashboard-fiscal-kpi-grid {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 0;
}

.dashboard-fiscal-kpi-item {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 7.25rem;
  padding: clamp(.75rem, 1.2vw, 1rem);
  flex-direction: column;
  justify-content: center;
}

.dashboard-fiscal-kpi-item:nth-child(odd) {
  border-right: 1px solid var(--sks-border, var(--bs-border-color));
}

.dashboard-fiscal-kpi-item:nth-child(-n + 2) {
  border-bottom: 1px solid var(--sks-border, var(--bs-border-color));
}

.dashboard-fiscal-kpi-title {
  position: absolute;
  top: clamp(.65rem, 1vw, .85rem);
  right: clamp(.65rem, 1vw, .85rem);
  left: clamp(.65rem, 1vw, .85rem);
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--sks-space-2);
  color: var(--sks-text-default);
  font-size: var(--sks-font-meta);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.dashboard-fiscal-kpi-title .bi {
  display: grid;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border-radius: var(--sks-radius-control);
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: 1rem;
}

.dashboard-fiscal-kpi-value {
  margin-top: 0;
  transform: translateY(var(--sks-space-1));
  font-family: var(--sks-font-numeric);
  font-size: clamp(2.15rem, 3vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.dashboard-fiscal-kpi-suffix {
  margin-left: .12em;
  font-size: .55em;
}

@media (max-width: 575.98px) {
  #dashProductionFiscalKpi {
    min-height: 19.5rem;
  }

  .dashboard-fiscal-kpi-filters {
    grid-template-columns: 1fr;
  }

  .dashboard-fiscal-kpi-item {
    min-height: 7.25rem;
    padding: var(--sks-space-2);
  }

  .dashboard-fiscal-kpi-title .bi {
    width: 1.85rem;
    height: 1.85rem;
  }
}

.dashboard-graph-wrapper .chartjs-legend,
.dashboard-graph-wrapper .chart-legend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  z-index: 1;
}

.card-dashboard-footer {
  position: relative;
  z-index: 2;
}

#dashWarehouseRandomStock {
  max-height: var(--sks-dashboard-stock-max-h);
}

.dashboard-graph-wrapper--warehouse {
  box-sizing: border-box;
  padding-top: calc(var(--control-h) + var(--sks-space-1));
}

.dashboard-graph-wrapper--warehouse #dashWarehouseRandomStock {
  height: 100% !important;
  max-height: none;
}

.dashboard-warehouse-chart-link {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.dashboard-warehouse-chart-link:hover,
.dashboard-warehouse-chart-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.dashboard-graph-wrapper--warehouse .dashboard-warehouse-chart-link {
  height: 100%;
}

.dashboard-graph-wrapper--warehouse[aria-busy="true"] {
  opacity: .68;
  pointer-events: none;
}

.dashboard-canvas-kpi {
  display: flex;
  min-height: var(--sks-chart-h-md);
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: stretch;
}

.dashboard-card-main--with-summary {
  min-height: calc(var(--dash-kpi-visual-h, var(--sks-chart-h-md)) + var(--sks-dashboard-summary-h));
}

.dashboard-canvas-kpi > a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.card-dashboard-body {
  display: flex;
  flex-direction: column;
}

.card-dashboard-footer {
  border-top: 1px solid var(--sks-border, var(--bs-border-color));
  display: flex;
  min-height: var(--sks-dashboard-footer-h);
  flex-direction: column;
  justify-content: flex-end;
  padding-top: var(--sks-space-3);
  margin-top: auto;
}

#dashClockToolbar {
  min-height: var(--sks-dashboard-clock-toolbar-min-h);
  white-space: nowrap;
}

#dashClockToolbarDate {
  color: var(--bs-body-color);
  display: flex;
  align-items: center;
  min-height: var(--sks-dashboard-clock-pill-min-h);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--sks-dashboard-clock-pill-py) 0;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.card-dashboard {
  --dash-kpi-visual-h: var(--sks-kpi-visual-h);
  min-height: 100%;
}

.card-dashboard--page {
  min-height: var(--sks-dashboard-card-page-min-h);
}

.card-dashboard--graph,
.card-dashboard--kpi {
  min-height: var(--sks-dashboard-card-visual-min-h);
}

.card-dashboard--list {
  min-height: var(--sks-dashboard-card-list-min-h);
}

.card-dashboard-body {
  min-height: 0;
}

.card-dashboard-content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.dashboard-card-main {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  margin-top: var(--sks-space-3);
  margin-bottom: var(--sks-dashboard-chart-footer-gap);
}

.card-dashboard-content > .d-flex:first-child {
  min-width: 0;
}

.card-dashboard-content > .d-flex:first-child .fw-semibold {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-dynamic-title {
  display: inline-flex;
  width: 100%;
  height: var(--sks-dashboard-title-slot-h);
  min-height: var(--sks-dashboard-title-slot-h);
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  overflow: hidden;
  line-height: var(--sks-dashboard-title-slot-h);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-dynamic-title-spinner {
  width: 0.875rem;
  height: 0.875rem;
  border-width: 0.125rem;
}

.dashboard-description {
  display: -webkit-box;
  min-height: 2.8em;
  overflow: hidden;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sks-card-action-gap);
  align-items: center;
}

.dashboard-card-action {
  min-height: var(--sks-card-action-size);
  max-width: 100%;
  gap: var(--sks-card-action-gap);
  justify-content: center;
  border-radius: var(--sks-radius-sm) !important;
}

.dashboard-card-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-card-action-icon-only {
  width: var(--sks-card-action-size);
  min-width: var(--sks-card-action-size);
  padding-right: 0;
  padding-left: 0;
}

.dashboard-card-action-icon {
  margin: 0 !important;
  font-size: var(--sks-font-title-sm);
  line-height: 1;
}

@media (max-width: 767.98px) {
  .dashboard-card-action {
    min-height: var(--sks-touch-target);
  }

  .dashboard-card-action-icon-only {
    width: var(--sks-touch-target);
    min-width: var(--sks-touch-target);
  }
}

.dashboard-card-summary:empty {
  display: none;
}

.dashboard-card-summary {
  display: flex;
  min-height: var(--sks-dashboard-summary-h);
  flex: 0 0 var(--sks-dashboard-summary-h);
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  padding: var(--sks-space-3) 0;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.dashboard-graph-area .dashboard-card-summary:empty {
  display: none;
}

.dashboard-card-summary {
  margin-top: auto;
}

.dashboard-employee-events {
  align-items: stretch;
}

.dashboard-employee-overview {
  align-items: stretch;
}

.dashboard-employee-chart-panel {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

[data-bs-theme="dark"] .dashboard-employee-chart-panel {
  background: transparent;
}

.dashboard-employee-stat-grid {
  display: grid;
  gap: var(--sks-space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-employee-stat {
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: var(--sks-space-1) var(--sks-space-2);
  align-items: center;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  padding: var(--sks-space-2);
}

.dashboard-employee-stat i {
  grid-row: 1 / span 2;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: 1rem;
}

.dashboard-employee-stat-value {
  color: var(--bs-emphasis-color);
  font-size: var(--sks-font-lg);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dashboard-employee-stat-label {
  min-width: 0;
  overflow: hidden;
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-compact);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-employee-chart-wrap {
  position: relative;
  min-height: var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
  height: var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
  flex: 1 1 auto;
}

.dashboard-event-panel {
  min-height: 100%;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
  background: var(--sks-surface, var(--bs-body-bg));
  box-shadow: none;
  padding: var(--sks-space-4);
}

[data-bs-theme="dark"] .dashboard-event-panel {
  background: var(--sks-surface, var(--bs-body-bg));
}

.dashboard-event-panel .fw-semibold {
  color: var(--bs-emphasis-color);
}

.dashboard-event-panel li {
  border-radius: var(--sks-radius-sm);
}

.dashboard-event-panel > .list-unstyled > li,
.dashboard-event-panel > ul > li {
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  border: 1px solid var(--sks-border, var(--bs-border-color));
  padding: var(--sks-space-2) var(--sks-space-3);
}

@media (max-width: 575.98px) {
  .dashboard-employee-stat-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-employee-chart-wrap {
    min-height: var(--sks-kpi-visual-h-sm);
    height: var(--sks-kpi-visual-h-sm);
  }
}

/* Flex-Layout stabilisieren: Content darf schrumpfen, Footer bleibt sauber unten */
/* optional: ein klein wenig Luft zwischen Content und Footer */
.card-dashboard-footer {
  flex: 0 0 auto;
}

/* Default (lg/desktop) */
#dashMediaActiveKpi,
#dashSonderbauActiveKpi,
#dashTradingOpenPickupKpi,
#dashRepairsStatusKpi,
#dashConfiguratorKpi,
#dashConfiguratorAdminKpi,
#dashWheelchairModelKpi {
  --dash-media-h: var(--sks-kpi-visual-h);
}

#dashMediaActiveKpi {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.dashboard-media-kpi-shell {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

#dashTradingOpenPickupKpi,
#dashRepairsStatusKpi,
#dashConfiguratorKpi,
#dashConfiguratorAdminKpi,
#dashWheelchairModelKpi,
#dashQualityKpi,
#dashEmployeeEventsKpi,
#dashSonderbauActiveKpi {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.dashboard-repairs-summary {
  min-height: var(--sks-chip-h);
  margin-top: var(--sks-space-1);
  line-height: 1.25;
  text-align: center;
}

.quality-dashboard-kpi,
.dashboard-kpi-stack {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
}

.dashboard-kpi-visual {
  position: relative;
  display: flex;
  width: 100%;
  height: var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
  min-height: var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
  flex: 1 1 var(--dash-kpi-visual-h, var(--sks-kpi-visual-h));
  align-items: center;
  justify-content: center;
}

.dashboard-employee-chart-wrap > canvas,
.dashboard-kpi-visual > canvas,
.dashboard-graph-wrapper:not(.dashboard-graph-wrapper--warehouse) > .dashboard-canvas-graph {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Circular charts have no axis labels to provide visual breathing room. */
.dashboard-kpi-visual--circular > .dashboard-circular-chart-frame {
  position: absolute;
  inset: var(--sks-dashboard-circular-chart-inset) 0;
}

.dashboard-circular-chart-frame > canvas {
  width: 100% !important;
  height: 100% !important;
}

.dashboard-number-kpi-shell {
  overflow: hidden;
}

.dashboard-number-kpi {
  display: flex;
  width: 100%;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--sks-accent);
  font-size: var(--sks-dashboard-number-kpi-size);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dashboard-number-kpi-trading {
  transform: translateY(.08em);
}

.dashboard-media-kpi {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

.dashboard-media-frame {
  align-items: stretch;
  min-height: calc(var(--dash-media-h, var(--sks-dashboard-media-h)) - var(--sks-dashboard-media-chrome-offset));
  flex-basis: calc(var(--dash-media-h, var(--sks-dashboard-media-h)) - var(--sks-dashboard-media-chrome-offset));
  margin-top: var(--sks-space-1);
  margin-bottom: var(--sks-space-3);
}

.dashboard-sonderbau-tag-cloud {
  align-content: center;
  align-items: center;
  justify-content: center;
  overflow: auto;
  gap: var(--sks-space-2);
  padding: var(--sks-space-3) var(--sks-space-1);
  flex-wrap: wrap;
}

#dashSonderbauActiveKpi .dashboard-media-kpi {
  justify-content: center;
}

#dashSonderbauActiveKpi .dashboard-kpi-visual {
  min-height: var(--dash-kpi-visual-h, var(--sks-dashboard-kpi-visual-h));
  flex-basis: var(--dash-kpi-visual-h, var(--sks-dashboard-kpi-visual-h));
}

.dashboard-sonderbau-chart-panel {
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  padding: 0;
}

.dashboard-sonderbau-chart-scroll {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.dashboard-sonderbau-chart-canvas {
  height: 100%;
  min-width: var(--sks-dashboard-chart-min-w-sm);
  width: 100%;
}

.dashboard-configurator-chart-canvas {
  min-width: 0;
}

.dashboard-sonderbau-chart-canvas--md {
  min-width: var(--sks-dashboard-chart-min-w-md);
}

.dashboard-sonderbau-chart-canvas--lg {
  min-width: var(--sks-dashboard-chart-min-w-lg);
}

.dashboard-sonderbau-chart-canvas--xl {
  min-width: var(--sks-dashboard-chart-min-w-xl);
}

.dashboard-sonderbau-chart-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

.dashboard-sonderbau-chart-canvas canvas.is-clickable {
  cursor: pointer;
}

.dashboard-sonderbau-tag {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius-sm);
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  color: var(--bs-body-color);
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  box-shadow: none;
  backdrop-filter: none;
  transition: background-color var(--sks-motion), border-color var(--sks-motion), color var(--sks-motion), box-shadow var(--sks-motion);
}

.dashboard-sonderbau-tag:hover,
.dashboard-sonderbau-tag:focus-visible {
  border-color: var(--sks-border-strong, var(--bs-border-color));
  background: var(--sks-hover);
  color: var(--bs-emphasis-color);
  box-shadow: none;
}

.dashboard-sonderbau-tag span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-tag-xs {
  padding: var(--sks-space-1) var(--sks-space-2);
  font-size: var(--sks-font-2xs);
  font-weight: 800;
}

.dashboard-tag-sm {
  padding: var(--sks-space-1) var(--sks-space-2);
  font-size: var(--sks-font-xs);
  font-weight: 700;
}

.dashboard-tag-md {
  padding: var(--sks-space-2) var(--sks-space-3);
  font-size: var(--sks-font-compact);
  font-weight: 600;
}

.dashboard-tag-lg {
  padding: var(--sks-space-2) var(--sks-space-3);
  font-size: var(--sks-font-ui-md);
  font-weight: 400;
}

.dashboard-tag-red {
  background: var(--sks-accent-soft);
  border-color: var(--sks-accent-border);
  color: var(--sks-accent);
}

.dashboard-tag-amber {
  background: var(--sks-status-warning-bg);
  border-color: var(--sks-status-warning-border);
  color: var(--sks-status-warning-text);
}

.dashboard-tag-blue {
  background: var(--sks-status-info-bg);
  border-color: var(--sks-status-info-border);
  color: var(--sks-status-info-text);
}

.dashboard-tag-green {
  background: var(--sks-status-success-bg);
  border-color: var(--sks-status-success-border);
  color: var(--sks-status-success-text);
}

.dashboard-tag-violet {
  background: var(--sks-status-violet-bg);
  border-color: var(--sks-status-violet-border);
  color: var(--sks-status-violet-text);
}

.dashboard-tag-cyan {
  background: var(--sks-status-info-bg);
  border-color: var(--sks-status-info-border);
  color: var(--sks-status-info-text);
}

.dashboard-tag-pink {
  background: var(--sks-status-pink-bg);
  border-color: var(--sks-status-pink-border);
  color: var(--sks-status-pink-text);
}

.dashboard-tag-slate {
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  border-color: var(--sks-border, var(--bs-border-color));
  color: var(--sks-text-muted, var(--bs-secondary-color));
}

/* xs/sm: kleiner */
@media (max-width: 575.98px) {
  .card-dashboard {
    --dash-kpi-visual-h: var(--sks-kpi-visual-h-sm);
  }

  .card-dashboard--graph,
  .card-dashboard--kpi {
    min-height: calc(var(--sks-chart-h-sm) + var(--sks-dashboard-summary-h) + var(--sks-dashboard-footer-h) + 5rem);
  }

  #dashMediaActiveKpi,
  #dashSonderbauActiveKpi,
  #dashWheelchairModelKpi {
    --dash-media-h: var(--sks-kpi-visual-h-sm);
  }
}

/* optional: md etwas grösser als xs */
@media (min-width: 576px) and (max-width: 767.98px) {
  .card-dashboard {
    --dash-kpi-visual-h: var(--sks-kpi-visual-h-sm);
  }

  .card-dashboard--graph,
  .card-dashboard--kpi {
    min-height: calc(var(--sks-chart-h-sm) + var(--sks-dashboard-summary-h) + var(--sks-dashboard-footer-h) + 5rem);
  }

  #dashMediaActiveKpi,
  #dashSonderbauActiveKpi,
  #dashWheelchairModelKpi {
    --dash-media-h: var(--sks-kpi-visual-h-sm);
  }
}

.dashboard-placeholder-media {
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  color: var(--sks-text-muted, var(--bs-secondary-color));
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-radius: var(--sks-radius);
}

.dashboard-warehouse-picker {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  margin-bottom: var(--sks-space-2);
}

.dashboard-warehouse-picker .form-select {
  border-color: var(--sks-border, var(--bs-border-color));
  background-color: transparent;
  color: var(--bs-body-color);
  min-height: var(--sks-dashboard-picker-min-h);
  padding-top: var(--sks-space-1);
  padding-bottom: var(--sks-space-1);
  padding-left: var(--sks-space-2);
  font-size: var(--sks-font-md);
  line-height: 1.2;
}

@media (max-width: 575.98px) {
  #dashWarehouseRandomStock {
    max-height: var(--sks-dashboard-stock-max-h-sm);
  }
}

.dashboard-kpi-media {
  height: calc(var(--dash-media-h, var(--sks-dashboard-media-h)) - var(--sks-dashboard-media-chrome-offset));
  object-fit: cover;
}

.dashboard-media-collage {
  display: grid;
  width: 100%;
  height: calc(var(--dash-media-h, var(--sks-dashboard-media-h)) - var(--sks-dashboard-media-chrome-offset));
  overflow: hidden;
  gap: var(--sks-space-2);
  grid-template-columns: 1.25fr .85fr .8fr;
  grid-template-rows: .95fr .75fr .75fr;
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
  cursor: pointer;
}

.dashboard-media-collage-tile {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--sks-surface-2, var(--bs-tertiary-bg));
}

.dashboard-media-collage-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sks-motion);
}

.dashboard-media-collage:hover .dashboard-media-collage-tile img {
  transform: scale(1.025);
}

.dashboard-media-collage-tile-1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.dashboard-media-collage-tile-2 {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.dashboard-media-collage-tile-3 {
  grid-column: 2;
  grid-row: 2;
}

.dashboard-media-collage-tile-4 {
  grid-column: 3;
  grid-row: 2;
}

.dashboard-media-collage-tile-5 {
  grid-column: 2 / span 2;
  grid-row: 3;
}

.dashboard-media-count {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  gap: var(--sks-space-1);
  margin-top: 0;
}

[data-bs-theme="dark"] .dashboard-placeholder-media,
body.dark .dashboard-placeholder-media {
  background: var(--sks-surface-2);
  color: var(--sks-text-muted);
  border-color: var(--sks-border);
}

html :is(.metric-card-title, .kpi-title) {
  color: var(--sks-text-muted);
  font-weight: 500;
}

html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi) {
  font-family: var(--sks-font-numeric);
  font-weight: 600;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

/* Chart and KPI semantics share the same visualization tokens. */
html .metric-card-value {
  font-size: var(--sks-metric-value-size);
  flex-wrap: wrap;
  row-gap: .1em;
}

html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi).text-primary,
html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi) .text-primary {
  color: color-mix(in srgb, var(--sks-chart-primary), white var(--sks-metric-text-tint, 0%)) !important;
}

html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi).text-danger,
html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi) .text-danger {
  color: color-mix(in srgb, var(--sks-chart-danger), white var(--sks-metric-text-tint, 0%)) !important;
}

html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi).text-success,
html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi) .text-success {
  color: color-mix(in srgb, var(--sks-chart-success), white var(--sks-metric-text-tint, 0%)) !important;
}

html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi).text-warning,
html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi) .text-warning {
  color: color-mix(in srgb, var(--sks-chart-warning), white var(--sks-metric-text-tint, 0%)) !important;
}

html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi).text-info,
html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi) .text-info {
  color: color-mix(in srgb, var(--sks-chart-info), white var(--sks-metric-text-tint, 0%)) !important;
}

html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi).text-secondary,
html :is(.metric-card-value, .kpi-value, .dashboard-number-kpi) .text-secondary {
  color: color-mix(in srgb, var(--sks-chart-secondary), white var(--sks-metric-text-tint, 0%)) !important;
}

html :is(.metric-card, .kpi-tile):has(:is(.metric-card-value, .kpi-value).text-primary, :is(.metric-card-value, .kpi-value) .text-primary) {
  --sks-metric-accent: var(--sks-chart-primary);
}

html :is(.metric-card, .kpi-tile):has(:is(.metric-card-value, .kpi-value).text-success, :is(.metric-card-value, .kpi-value) .text-success) {
  --sks-metric-accent: var(--sks-chart-success);
}

html :is(.metric-card, .kpi-tile):has(:is(.metric-card-value, .kpi-value).text-warning, :is(.metric-card-value, .kpi-value) .text-warning) {
  --sks-metric-accent: var(--sks-chart-warning);
}

html :is(.metric-card, .kpi-tile):has(:is(.metric-card-value, .kpi-value).text-danger, :is(.metric-card-value, .kpi-value) .text-danger) {
  --sks-metric-accent: var(--sks-chart-danger);
}

html :is(.metric-card, .kpi-tile):has(:is(.metric-card-value, .kpi-value).text-info, :is(.metric-card-value, .kpi-value) .text-info) {
  --sks-metric-accent: var(--sks-chart-info);
}

html :is(.metric-card, .kpi-tile):has(:is(.metric-card-value, .kpi-value).text-secondary, :is(.metric-card-value, .kpi-value) .text-secondary) {
  --sks-metric-accent: var(--sks-chart-secondary);
}

html .metric-card--featured {
  border-color: var(--sks-card-hover-edge);
}

/* One global interaction contract for every selectable filter KPI. */
html .metric-card:is([aria-pressed], [aria-selected], [data-kpi-selected]) {
  position: relative;
  transition: border-color var(--sks-motion), box-shadow var(--sks-motion), transform var(--sks-motion), background-color var(--sks-motion);
}

html .metric-card:is([aria-pressed="true"], [aria-selected="true"], [data-kpi-selected="true"]) {
  border-color: var(--sks-metric-accent, var(--sks-primary-text));
  background: color-mix(in srgb, var(--sks-metric-accent, var(--sks-primary-text)) 9%, var(--sks-surface, var(--bs-body-bg)));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sks-metric-accent, var(--sks-primary-text)) 34%, transparent), var(--sks-shadow-sm);
  transform: translateY(-2px);
}

html .metric-card:is([aria-pressed="true"], [aria-selected="true"], [data-kpi-selected="true"]):not(:has(.configurator-worklist-kpi-state))::after {
  position: absolute;
  right: var(--sks-space-1);
  bottom: var(--sks-space-1);
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  color: var(--sks-surface, var(--bs-body-bg));
  background: var(--sks-metric-accent, var(--sks-primary-text));
  border-radius: 50%;
  content: "✓";
  font-size: .625rem;
  font-weight: 700;
}

.metric-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sks-space-3);
  min-height: var(--sks-control-icon);
  margin-bottom: var(--sks-space-2);
}

html .metric-card-heading .metric-card-title {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding-top: var(--sks-space-1);
  font-size: var(--sks-font-meta);
  font-weight: 500;
  line-height: 1.4;
}

.metric-card-icon {
  display: inline-flex;
  flex: 0 0 var(--sks-control-icon);
  width: var(--sks-control-icon);
  height: var(--sks-control-icon);
  align-items: center;
  justify-content: center;
  border-radius: var(--sks-radius-sm);
  background: var(--sks-metric-icon-bg, color-mix(in srgb, var(--sks-metric-accent, var(--sks-chart-primary)) 16%, transparent));
  color: var(--sks-metric-foreground, color-mix(in srgb, var(--sks-metric-accent, var(--sks-chart-primary)), white var(--sks-metric-text-tint, 0%)));
  font-size: 1.125rem;
}

.metric-sparkline {
  display: block;
  flex: 0 0 2.5rem;
  width: 100%;
  height: 2.5rem;
  margin-top: var(--sks-space-2);
  color: var(--sks-metric-foreground, color-mix(in srgb, var(--sks-metric-accent, var(--sks-chart-primary)), white var(--sks-metric-text-tint, 0%)));
  fill: currentColor;
}

/* ============================================================================
   WAREHOUSE
   ========================================================================== */

.warehouseStock-canvas-graph {
  min-height: var(--sks-chart-h-lg);
  height: var(--sks-chart-h-lg) !important;
}

.warehouse-stock-chart-subtitle {
  margin-top: var(--sks-space-2);
  color: var(--bs-secondary-color, var(--sks-text-muted));
  font-size: var(--sks-font-md);
  line-height: 1.35;
  text-align: center;
}

.warehouse-stock-chart-subtitle-line {
  display: block;
}

.warehouse-stock-calculation {
  min-width: 0;
}

.warehouse-stock-calculation__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sks-space-3);
  margin-bottom: var(--sks-space-3);
}

.warehouse-stock-calculation__heading > div {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  color: rgb(var(--sks-semantic-info-rgb));
}

.warehouse-stock-calculation__date,
.warehouse-stock-calculation__intro {
  color: var(--bs-secondary-color, var(--sks-text-muted));
}

.warehouse-stock-calculation__intro {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--sks-font-base);
}

.warehouse-stock-calculation__date {
  flex: 0 0 auto;
  white-space: nowrap;
}

.warehouse-stock-calculation__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sks-space-2);
}

.warehouse-stock-calculation__kpi {
  width: 100%;
  min-width: 0;
  min-height: 7rem;
  color: inherit;
}

.warehouse-stock-calculation__kpi .metric-card-body {
  gap: var(--sks-space-1);
  padding: var(--sks-space-3);
}

.warehouse-stock-calculation__kpi .metric-card-heading {
  min-height: 2rem;
  margin-bottom: var(--sks-space-1);
  gap: var(--sks-space-2);
}

.warehouse-stock-calculation__kpi .metric-card-icon {
  flex-basis: 2rem;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

html .warehouse-stock-calculation__kpi .metric-card-value {
  font-size: clamp(1.75rem, 2.2vw, 2.5rem);
}

.warehouse-stock-calculation__kpi--orange {
  --sks-metric-accent: var(--sks-chart-orange);
}

.warehouse-stock-calculation__kpi--purple {
  --sks-metric-accent: var(--sks-chart-purple);
}

html .warehouse-stock-calculation__kpi--orange :is(.metric-card-value, .metric-card-icon) {
  color: var(--sks-chart-orange) !important;
}

html .warehouse-stock-calculation__kpi--purple :is(.metric-card-value, .metric-card-icon) {
  color: var(--sks-chart-purple) !important;
}

.warehouse-stock-calculation__detail {
  --warehouse-calculation-accent: var(--bs-secondary-color);
  margin-top: var(--sks-space-3);
  padding: var(--sks-space-3);
  border: 1px solid var(--sks-border, var(--bs-border-color));
  border-left: 3px solid var(--warehouse-calculation-accent);
  border-radius: var(--sks-radius-sm, .375rem);
  background: var(--sks-surface-1, var(--bs-body-bg));
}

.warehouse-stock-calculation__detail--primary { --warehouse-calculation-accent: rgb(var(--sks-semantic-primary-rgb)); }
.warehouse-stock-calculation__detail--warning { --warehouse-calculation-accent: rgb(var(--sks-semantic-warning-rgb)); }
.warehouse-stock-calculation__detail--success { --warehouse-calculation-accent: rgb(var(--sks-semantic-success-rgb)); }
.warehouse-stock-calculation__detail--info { --warehouse-calculation-accent: rgb(var(--sks-semantic-info-rgb)); }
.warehouse-stock-calculation__detail--secondary { --warehouse-calculation-accent: var(--sks-chart-secondary); }
.warehouse-stock-calculation__detail--danger { --warehouse-calculation-accent: rgb(var(--sks-semantic-danger-rgb)); }
.warehouse-stock-calculation__detail--orange { --warehouse-calculation-accent: var(--sks-chart-orange); }
.warehouse-stock-calculation__detail--purple { --warehouse-calculation-accent: var(--sks-chart-purple); }

.warehouse-stock-calculation__detail-title {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-3);
  color: var(--warehouse-calculation-accent);
  font-size: var(--sks-font-lg);
}

.warehouse-stock-calculation__detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sks-space-3);
}

.warehouse-stock-calculation__detail-section--calculation {
  grid-column: 1 / -1;
}

.warehouse-stock-calculation__detail-label {
  display: block;
  margin-bottom: var(--sks-space-1);
  color: var(--warehouse-calculation-accent);
  font-size: var(--sks-font-sm);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.warehouse-stock-calculation__detail p {
  margin: 0;
  font-size: var(--sks-font-base);
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .warehouse-stock-calculation__kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .warehouse-stock-calculation__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .warehouse-stock-calculation__detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .warehouse-stock-calculation__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.warehouse-stock-kpi-row .metric-card {
  min-height: 7rem;
}

.warehouse-stock-kpi-row .metric-card-body {
  padding: var(--sks-space-3);
}

.warehouse-stock-kpi-row .metric-card-heading {
  margin-bottom: var(--sks-space-1);
}

.warehouse-stock-kpi-row .metric-card-value {
  font-size: clamp(1.5rem, 2vw, 2.25rem);
}

.stock-panel-card .card-header,
.stock-panel-header {
  background: transparent;
  border-bottom-color: var(--sks-border, var(--bs-border-color));
  color: var(--bs-emphasis-color);
  letter-spacing: 0;
}

.stock-panel-header strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-stock-booking-guide {
  margin-top: var(--sks-space-4);
  padding-top: var(--sks-space-3);
  border-top: 1px solid var(--sks-border);
  color: var(--sks-text-default);
}

.warehouse-stock-booking-guide__title {
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-space-3);
  color: rgb(var(--sks-semantic-info-rgb));
  font-weight: 700;
}

.warehouse-stock-booking-guide__items {
  display: grid;
  gap: var(--sks-space-2);
}

@media (min-width: 1200px) {
  .warehouse-stock-booking-guide__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.warehouse-stock-booking-guide__item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--sks-space-2);
  align-items: start;
  padding: .7rem .8rem;
  border: 1px solid var(--sks-border);
  border-radius: var(--sks-radius-sm, .5rem);
  background: var(--sks-bg-surface-muted);
  transition: border-color var(--sks-motion), background-color var(--sks-motion), box-shadow var(--sks-motion), transform var(--sks-motion);
}

.warehouse-stock-booking-guide__item.is-active {
  transform: translateY(-1px);
}

.warehouse-stock-booking-guide__item.is-incoming.is-active {
  border-color: rgb(var(--sks-semantic-success-rgb));
  background: rgba(var(--sks-semantic-success-rgb), .1);
  box-shadow: inset .2rem 0 0 rgb(var(--sks-semantic-success-rgb));
}

.warehouse-stock-booking-guide__item.is-outgoing.is-active {
  border-color: rgb(var(--sks-semantic-danger-rgb));
  background: rgba(var(--sks-semantic-danger-rgb), .1);
  box-shadow: inset .2rem 0 0 rgb(var(--sks-semantic-danger-rgb));
}

.warehouse-stock-booking-guide__item.is-adjustment.is-active {
  border-color: rgb(var(--sks-semantic-info-rgb));
  background: rgba(var(--sks-semantic-info-rgb), .1);
  box-shadow: inset .2rem 0 0 rgb(var(--sks-semantic-info-rgb));
}

.warehouse-stock-booking-guide__item > i {
  margin-top: .08rem;
  color: rgb(var(--sks-semantic-info-rgb));
  font-size: 1.05rem;
  text-align: center;
}

.warehouse-stock-booking-guide__item.is-incoming > i {
  color: rgb(var(--sks-semantic-success-rgb));
}

.warehouse-stock-booking-guide__item.is-outgoing > i {
  color: rgb(var(--sks-semantic-danger-rgb));
}

.warehouse-stock-booking-guide__item strong,
.warehouse-stock-booking-guide__item span {
  display: block;
}

.warehouse-stock-booking-guide__item strong {
  margin-bottom: .1rem;
  color: var(--sks-text-default);
  font-size: var(--sks-card-meta-size);
}

.warehouse-stock-booking-guide__item span {
  color: var(--sks-text-subtle);
  font-size: var(--sks-card-meta-size);
  line-height: 1.4;
}

.warehouse-stock-booking-guide__rule {
  display: flex;
  align-items: flex-start;
  gap: var(--sks-space-2);
  margin-top: var(--sks-space-2);
  padding: .65rem .8rem;
  border: 1px solid var(--bs-warning-border-subtle);
  border-radius: var(--sks-radius-sm, .5rem);
  background: var(--bs-warning-bg-subtle);
  color: var(--sks-text-default);
  font-size: var(--sks-card-meta-size);
  line-height: 1.4;
}

.warehouse-stock-booking-guide__rule i {
  color: rgb(var(--sks-semantic-warning-rgb));
}

/* ============================================================================
   MEDIA
   ========================================================================== */

.media-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--sks-radius);
  min-height: var(--sks-media-card-min-h);
}

.media-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: inherit;
  transform: scale(1.02);
  z-index: 0;
  pointer-events: none;
}

.media-card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sks-media-card-gradient);
}

.media-viewer-error-title {
  font-weight: 700;
  margin-bottom: var(--sks-space-2);
}

.media-card .card-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.media-card .btn-group {
  background: transparent;
  padding: 0;
  backdrop-filter: none;
}

.media-card .btn-group .btn {
  color: var(--sks-media-text);
  background: var(--sks-media-control-bg);
  border-color: var(--sks-media-control-border);
  backdrop-filter: blur(var(--sks-backdrop-blur-sm));
}

.media-card .btn-group .btn:hover,
.media-card .btn-group .btn:focus-visible {
  color: var(--sks-media-text);
  background: var(--sks-media-control-hover);
  border-color: var(--sks-media-control-border);
  box-shadow: none;
}

.media-card-bg-video,
.media-card-bg-img {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.media-card-bg-video video,
.media-card-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.media-card-bg-video::after,
.media-card-bg-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sks-media-card-gradient);
}

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--sks-z-lightbox);
  display: none;
  background: var(--sks-media-overlay, rgba(0, 0, 0, .9));
}

.media-lightbox.is-open {
  display: block;
}

.media-lightbox__wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sks-space-4);
}

.media-lightbox--with-footer .media-lightbox__wrap {
  padding-bottom: calc(var(--sks-space-4) + var(--sks-media-footer-offset));
}

.media-lightbox__content {
  width: min(var(--sks-media-viewport-w), var(--sks-media-content-max-w));
  height: min(var(--sks-media-content-h), var(--sks-media-content-max-h));
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-lightbox__content img,
.media-lightbox__content video,
.media-lightbox__content iframe {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  background: var(--sks-ci-black);
  border-radius: var(--sks-radius);
}

.media-lightbox__document {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--sks-surface, #fff);
}

.media-lightbox__close,
.media-lightbox__action,
.media-lightbox__nav {
  display: grid;
  place-items: center;
  border: 1px solid var(--sks-media-control-border);
  background: var(--sks-media-control-bg);
  color: var(--sks-media-text);
  cursor: pointer;
  font-size: var(--sks-font-ui-md);
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(var(--sks-backdrop-blur-sm));
  transition:
    background-color var(--sks-motion),
    border-color var(--sks-motion),
    box-shadow var(--sks-motion);
}

.media-lightbox__close:hover,
.media-lightbox__action:hover,
.media-lightbox__nav:hover,
.media-lightbox__close:focus-visible,
.media-lightbox__action:focus-visible,
.media-lightbox__nav:focus-visible {
  background: var(--sks-media-control-hover);
  border-color: var(--sks-media-control-border);
  box-shadow: 0 0 0 .2rem rgba(var(--sks-primary-text-rgb), .22);
  outline: 0;
}

.media-lightbox__close {
  position: fixed;
  top: var(--sks-space-4);
  right: var(--sks-space-4);
  z-index: var(--sks-z-lightbox-control);
  width: var(--sks-media-control-size);
  height: var(--sks-media-control-size);
  border-radius: var(--sks-radius-control);
}

.media-lightbox__actions {
  position: fixed;
  top: var(--sks-space-4);
  right: calc(var(--sks-media-control-size) + var(--sks-space-4) + var(--sks-space-2));
  z-index: var(--sks-z-lightbox-ui);
  display: flex;
  align-items: center;
  gap: var(--sks-space-2);
}

.media-lightbox__counter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--sks-media-control-size) * 1.35);
  height: var(--sks-media-control-size);
  padding: 0 var(--sks-space-3);
  border: 1px solid var(--sks-media-control-border);
  border-radius: var(--sks-radius-control);
  background: var(--sks-media-control-bg);
  color: var(--sks-media-text);
  font-size: var(--sks-font-ui-md);
  font-weight: var(--sks-font-weight-bold);
  line-height: 1;
  letter-spacing: 0;
  user-select: none;
  backdrop-filter: blur(var(--sks-backdrop-blur-sm));
}

.media-lightbox__action {
  width: var(--sks-media-control-size);
  height: var(--sks-media-control-size);
  border-radius: var(--sks-radius-control);
}

.media-lightbox__action--danger:hover {
  background: var(--sks-accent);
}

.media-lightbox__error {
  color: var(--sks-media-text);
  font-size: var(--sks-font-title-sm);
  line-height: 1.35;
  text-align: center;
  max-width: var(--sks-media-error-w);
}

.media-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--sks-z-lightbox-ui);
  width: var(--sks-media-nav-size);
  height: var(--sks-media-nav-size);
  border-radius: var(--sks-radius-control);
}
.media-lightbox__nav i {
  font-size: var(--sks-media-nav-icon-size);
  line-height: 1;
}

.media-lightbox__nav--prev {
  left: var(--sks-space-4);
}

.media-lightbox__nav--next {
  right: var(--sks-space-4);
}

.media-lightbox__footer {
  position: fixed;
  left: 50%;
  bottom: var(--sks-space-4);
  transform: translateX(-50%);
  z-index: var(--sks-z-lightbox-ui);
  width: min(var(--sks-media-viewport-w), var(--sks-media-footer-w));
  max-width: var(--sks-media-footer-w);
  color: var(--sks-media-text);
}

.media-lightbox-footer {
  width: 100%;
  max-width: 100%;
  background: var(--sks-media-panel-bg, rgba(0, 0, 0, .72));
  color: var(--sks-media-text);
  border: 1px solid var(--sks-media-control-border);
  border-radius: var(--sks-radius);
  padding: var(--sks-space-3) var(--sks-space-4);
  backdrop-filter: blur(var(--sks-backdrop-blur-md));
}

.media-lightbox-footer__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sks-space-3);
  align-items: center;
  width: 100%;
}

.media-lightbox-footer__text {
  min-width: 0;
  width: 100%;
}

.media-lightbox-footer__title,
.media-lightbox-footer__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-lightbox-footer__title {
  font-weight: 700;
}

.media-lightbox-footer__meta {
  font-size: var(--sks-font-table);
  color: var(--sks-media-text-muted);
  opacity: 1;
}

.media-lightbox-footer__actions {
  display: flex;
  gap: var(--sks-space-2);
  flex-shrink: 0;
}

.media-lightbox-footer__details {
  width: 100%;
  margin-top: var(--sks-space-2);
  padding-top: var(--sks-space-2);
  border-top: 1px solid var(--sks-media-divider);
}

@media (max-width: 575.98px) {
  .media-lightbox__nav {
    width: var(--sks-media-nav-size-sm);
    height: var(--sks-media-nav-size-sm);
  }

  .media-lightbox--with-footer .media-lightbox__wrap {
    padding-bottom: calc(var(--sks-space-4) + var(--sks-media-footer-offset-sm));
  }

  .media-lightbox--with-footer .media-lightbox__counter {
    bottom: calc(var(--sks-space-4) + var(--sks-media-counter-offset-sm));
  }

  .media-lightbox-footer__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-lightbox-footer__actions {
    justify-content: flex-end;
  }
}

.media-lightbox__content img {
  cursor: pointer;
}

/* ============================================================================
   TABLE TRANSPARENT
   ========================================================================== */

.table-transparent {
  --bs-table-bg: transparent;
  background-color: transparent !important;
}

.table {
  --bs-table-bg: transparent;
}

.table-responsive > .table {
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: var(--sks-space-3) var(--sks-space-4);
  border-bottom-color: var(--sks-border, var(--bs-border-color));
  vertical-align: middle;
}

.table-transparent td {
  background-color: transparent;
  border-color: var(--sks-border, var(--bs-border-color));
}

.table-transparent tbody tr:hover {
  background-color: var(--sks-hover);
}

.table-transparent thead th {
  border-bottom: 1px solid var(--sks-border-strong, var(--bs-border-color));
  color: var(--sks-text-muted, var(--bs-secondary-color));
  font-size: var(--sks-font-table);
  letter-spacing: 0;
}

.table-hover > tbody > tr {
  transition: background-color var(--sks-motion);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--sks-hover);
}

.table .alert {
  margin: var(--sks-space-1) 0;
}

.alert-danger {
  --bs-alert-bg: var(--sks-surface-2, var(--bs-tertiary-bg));
  --bs-alert-border-color: var(--sks-border, var(--bs-border-color));
  --bs-alert-color: var(--bs-body-color);
  box-shadow: inset 2px 0 0 var(--sks-accent);
}

.alert-danger::before {
  content: "";
  display: inline-block;
  width: var(--sks-alert-dot-size);
  height: var(--sks-alert-dot-size);
  margin-right: var(--sks-space-2);
  border-radius: 999px;
  background: var(--sks-accent);
  vertical-align: var(--sks-baseline-shift-xs);
}

.badge {
  letter-spacing: 0;
  font-weight: 700;
}

/* ============================================================================
   DARK MODE – WORKLOAD INFO MODAL
   ========================================================================== */

html[data-bs-theme="dark"] #workloadInfoModal pre {
  background: var(--sks-code-bg) !important;
  border-color: var(--sks-code-border) !important;
  color: var(--sks-code-color) !important;
}

html[data-bs-theme="dark"] #workloadInfoModal p code {
  background: var(--sks-code-bg) !important;
  color: var(--sks-code-color) !important;
}

.js-used,
.js-stock,
.js-standard {
  cursor: default !important;
  pointer-events: auto; /* Popover bleibt möglich */
}

.js-used:hover,
.js-stock:hover,
.js-standard:hover {
  text-decoration: none;
}

html .table-responsive {
  border: 1px solid var(--sks-glass-edge);
  background: var(--sks-glass-card);
  border-color: var(--sks-glass-edge);
  border-radius: var(--sks-radius);
  box-shadow: var(--sks-shadow-sm);
}

html .table {
  --bs-table-color: var(--sks-text-default);
  --bs-table-border-color: var(--sks-border);
  --bs-table-striped-bg: var(--sks-glass-highlight);
  --bs-table-striped-color: var(--sks-text-default);
  --bs-table-hover-color: var(--sks-text-default);
}

html .table > thead > tr > th {
  --bs-table-bg: var(--sks-control-muted-bg);
  color: var(--sks-text-muted);
  font-weight: 500;
}

html .table-transparent thead th {
  background-color: var(--sks-control-muted-bg);
  text-transform: none;
}

/* ============================================================================
   GLOBAL CARD CONTRACT

   Five visual families share one typographic and spacing system:
   1. panel cards, 2. metric cards, 3. entity cards,
   4. workflow cards, 5. choice/editor cards.
   Module CSS may define content layout, but not shrink the shared rhythm.
   ========================================================================== */

html .card {
  --sks-card-local-body-padding: var(--sks-card-body-padding);
  --sks-card-local-header-padding: var(--sks-card-header-padding);
  --sks-card-local-footer-padding: var(--sks-card-footer-padding);
  --sks-card-local-gap: var(--sks-card-gap);
  color: var(--sks-text-default);
  font-size: var(--sks-card-text-size);
  line-height: var(--sks-card-line-height);
}

html .card > .card-header {
  padding: var(--sks-card-local-header-padding);
  font-size: var(--sks-card-title-size);
  font-weight: 700;
  line-height: 1.3;
}

html .card > .card-body {
  padding: var(--sks-card-local-body-padding);
}

html .card > .card-footer {
  padding: var(--sks-card-local-footer-padding);
}

html .card :is(.card-title, .title-weight) {
  color: var(--sks-text-default);
  font-size: var(--sks-card-title-size);
  font-weight: 700;
  line-height: 1.3;
}

html .card :is(small, .small) {
  font-size: var(--sks-card-meta-size) !important;
  line-height: 1.4;
}

html .card :is(.card-text, .entity-card-description) {
  font-size: var(--sks-card-text-size);
  line-height: var(--sks-card-line-height);
}

/* 1. Panels: filters, charts and system panels keep a calm content surface. */
html .card:is(.filter-panel-card, .chart-panel-card, .stock-panel-card, .settings-system-card) {
  --sks-card-local-body-padding: var(--sks-card-body-padding);
}

/* 2. KPI cards: compact enough for dashboards, but never use micro type. */
html .card.metric-card {
  --sks-card-local-body-padding: 1rem;
}

html .metric-card-body {
  gap: var(--sks-card-gap);
}

html .metric-card-title {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  font-weight: 600;
  line-height: 1.35;
}

html .metric-card-sub {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  line-height: 1.4;
}

/* 3. Entity cards: title, facts and actions use one predictable rhythm. */
html .card.entity-card {
  --sks-card-local-body-padding: var(--sks-card-body-padding);
}

html .entity-card .card-body {
  gap: var(--sks-card-gap);
}

html .entity-card-head {
  gap: var(--sks-card-gap) !important;
  margin-bottom: var(--sks-card-section-gap) !important;
}

html .entity-card-head .title-weight {
  font-size: var(--sks-card-title-size);
  line-height: 1.3;
}

html .entity-card-subtitle {
  font-size: var(--sks-card-meta-size);
  line-height: 1.4;
}

/* Configurator administration uses the exact semantic accents of its KPIs. */
html .configurator-admin-card {
  --sks-card-accent: var(--sks-chart-secondary);
}

html .configurator-admin-card.is-tone-primary { --sks-card-accent: var(--sks-chart-primary); }
html .configurator-admin-card.is-tone-success { --sks-card-accent: var(--sks-chart-success); }
html .configurator-admin-card.is-tone-warning { --sks-card-accent: var(--sks-chart-warning); }
html .configurator-admin-card.is-tone-info { --sks-card-accent: var(--sks-chart-info); }
html .configurator-admin-card.is-tone-secondary { --sks-card-accent: var(--sks-chart-secondary); }

html .configurator-admin-card .entity-card-avatar {
  border: 1px solid color-mix(in srgb, var(--sks-card-accent), transparent 55%);
  background: color-mix(in srgb, var(--sks-card-accent) 18%, transparent);
  color: color-mix(in srgb, var(--sks-card-accent), white var(--sks-metric-text-tint, 0%));
  box-shadow: none;
}

html .configurator-admin-card .entity-card-avatar > i {
  font-size: 1.125rem;
  line-height: 1;
}

html .configurator-admin-catalog-details {
  display: flex;
  flex-direction: column;
  gap: var(--sks-space-2);
  margin-top: var(--sks-card-section-gap);
  padding-top: var(--sks-card-section-gap);
  border-top: 1px solid var(--sks-border-subtle, var(--sks-border));
}

html .configurator-admin-catalog-counts {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  line-height: 1.4;
}

html .configurator-admin-catalog-identifier {
  color: var(--sks-text-muted);
  font-size: var(--sks-card-meta-size);
  line-height: 1.4;
}

html .configurator-admin-catalog-identifier-value {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  text-align: start;
}

html .entity-card-summary {
  gap: var(--sks-space-2);
  margin-bottom: var(--sks-card-section-gap) !important;
}

html .entity-card-summary-row {
  gap: var(--sks-card-gap);
  min-height: 2.75rem;
  padding: var(--sks-card-row-padding);
}

html .entity-card-summary-label {
  font-size: var(--sks-card-label-size);
  font-weight: 700;
  line-height: 1.3;
}

html .entity-card-summary-value {
  font-size: var(--sks-card-text-size);
  line-height: 1.35;
}

html :is(.entity-card-audit, .configurator-admin-country-setup) {
  font-size: var(--sks-card-label-size);
  line-height: 1.4;
}

html .entity-card-footer {
  margin-top: var(--sks-card-section-gap) !important;
  padding-top: var(--sks-card-section-gap) !important;
}

/* 4. Workflow cards: production, trading, repairs and worklists. */
html .card.work-card {
  --sks-card-local-body-padding: var(--sks-card-body-padding);
}

html .work-card .card-body {
  gap: var(--sks-card-gap);
}

html :is(.production-card, .trading-card, .repairs-card) :is(
  .production-card-commission,
  .production-card-components,
  .trading-card-representative,
  .trading-card-product-meta,
  .repairs-card-company,
  .repairs-card-object-meta
) {
  font-size: var(--sks-card-meta-size);
  line-height: 1.4;
}

html :is(.production-card-product, .trading-card-product, .repairs-card-object) {
  gap: var(--sks-space-2);
  padding: var(--sks-card-row-padding);
}

html :is(.production-card-footer, .trading-card-footer, .repairs-card-footer) {
  margin-top: var(--sks-card-section-gap) !important;
  padding-top: var(--sks-card-section-gap) !important;
}

/* 5. Choice/editor cards: content-specific layout, shared readable type. */
html :is(
  .configurator-choice-card,
  .configurator-builder-item-card,
  .configurator-catalog-translation-card,
  .production-editor-card
) {
  font-size: var(--sks-card-text-size);
  line-height: var(--sks-card-line-height);
}

html :is(
  .configurator-choice-card,
  .configurator-builder-item-card,
  .configurator-catalog-translation-card,
  .production-editor-card
) :is(small, .small) {
  font-size: var(--sks-card-meta-size) !important;
}

@media (max-width: 575.98px) {
  html .card {
    --sks-card-local-body-padding: 1rem;
    --sks-card-local-header-padding: .875rem 1rem;
    --sks-card-local-footer-padding: .875rem 1rem;
  }
}

/* ============================================================================
   REDUCED MOTION
   ========================================================================== */

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

  .modal-spinner-overlay::after,
  #loadingOverlay::after,
  .sks-top-loading-bar::after {
    left: 0;
    width: 100%;
    opacity: .65;
    animation: none !important;
  }
}

/* ============================================================================
   TOOLTIP THEME OVERRIDES
   ========================================================================== */

.tooltip .tooltip-inner {
  background-color: var(--sks-tooltip-bg);
  color: var(--sks-tooltip-color);
  font-weight: 500;
  font-size: var(--sks-font-body-sm);
  padding: var(--sks-space-2) var(--sks-space-3);
  border-radius: var(--sks-radius);
  border: 1px solid var(--sks-border);
  box-shadow: var(--sks-shadow-md);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--sks-tooltip-bg);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--sks-tooltip-bg);
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--sks-tooltip-bg);
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--sks-tooltip-bg);
}

/* ============================================================================
   WHEELCHAIR COLOR UTILITIES
   ========================================================================== */

.wc_txt_black { color: #000 !important; }
.wc_txt_white { color: #fff !important; }

.wc_bg_white           { background: var(--wc-bg-white, #f4f4f4) !important; }
.wc_bg_yellow          { background: var(--wc-bg-yellow, #f7ba0b) !important; }
.wc_bg_curry           { background: var(--wc-bg-curry, #a38c15) !important; }
.wc_bg_orange          { background: var(--wc-bg-orange, #ed760e) !important; }
.wc_bg_red             { background: var(--wc-bg-red, #cc0605) !important; }
.wc_bg_lightpink       { background: var(--wc-bg-lightpink, #ea899a) !important; }
.wc_bg_oldpink         { background: var(--wc-bg-oldpink, #d36e70) !important; }
.wc_bg_winered         { background: var(--wc-bg-winered, #5e2129) !important; }
.wc_bg_lightlila       { background: var(--wc-bg-lightlila, #a38995) !important; }
.wc_bg_darklila        { background: var(--wc-bg-darklila, #83639d) !important; }
.wc_bg_purpleviolet    { background: var(--wc-bg-purpleviolet, #4a203b) !important; }
.wc_bg_bordeauxviolet  { background: var(--wc-bg-bordeauxviolet, #691639) !important; }
.wc_bg_lightblue       { background: var(--wc-bg-lightblue, #3b83bd) !important; }
.wc_bg_waterblue       { background: var(--wc-bg-waterblue, #007577) !important; }
.wc_bg_oceanblue       { background: var(--wc-bg-oceanblue, #003b49) !important; }
.wc_bg_darkblue        { background: var(--wc-bg-darkblue, #1d1f2a) !important; }
.wc_bg_lightgreen      { background: var(--wc-bg-lightgreen, #bdecb6) !important; }
.wc_bg_darkgreen       { background: var(--wc-bg-darkgreen, #114232) !important; }
.wc_bg_greyolive       { background: var(--wc-bg-greyolive, #3c392e) !important; }
.wc_bg_olivegreen      { background: var(--wc-bg-olivegreen, #50533c) !important; }
.wc_bg_lightbrown      { background: var(--wc-bg-lightbrown, #af8a54) !important; }
.wc_bg_darkbrown       { background: var(--wc-bg-darkbrown, #45322e) !important; }
.wc_bg_lightgrey       { background: var(--wc-bg-lightgrey, #cbd0cc) !important; }
.wc_bg_middlegrey      { background: var(--wc-bg-middlegrey, #969992) !important; }
.wc_bg_darkgrey        { background: var(--wc-bg-darkgrey, #474a50) !important; }
.wc_bg_black           { background: var(--wc-bg-black, #18171c) !important; }

/* Distinct model swatches tuned to each theme's surface and Bootstrap palette. */
html[data-sks-theme="light"] {
  --wc-bg-white: #f0f4f6;
  --wc-bg-yellow: #f2bd32;
  --wc-bg-curry: #938a40;
  --wc-bg-orange: #db8640;
  --wc-bg-red: #b93842;
  --wc-bg-lightpink: #efacc0;
  --wc-bg-oldpink: #c45d74;
  --wc-bg-winered: #8a3540;
  --wc-bg-lightlila: #b5a1b9;
  --wc-bg-darklila: #9576a1;
  --wc-bg-purpleviolet: #553c72;
  --wc-bg-bordeauxviolet: #76324f;
  --wc-bg-lightblue: #77b5e2;
  --wc-bg-waterblue: #168f80;
  --wc-bg-oceanblue: #1c5a70;
  --wc-bg-darkblue: #35468a;
  --wc-bg-lightgreen: #67ca9e;
  --wc-bg-darkgreen: #207a58;
  --wc-bg-greyolive: #898568;
  --wc-bg-olivegreen: #596e32;
  --wc-bg-lightbrown: #b69a71;
  --wc-bg-darkbrown: #785945;
  --wc-bg-lightgrey: #bac6cc;
  --wc-bg-middlegrey: #91a0a8;
  --wc-bg-darkgrey: #606b71;
  --wc-bg-black: #20252b;
}

html[data-sks-theme="porcelain"] {
  --wc-bg-white: #eff3f5;
  --wc-bg-yellow: #e4a921;
  --wc-bg-curry: #918332;
  --wc-bg-orange: #d87b31;
  --wc-bg-red: #b82e3b;
  --wc-bg-lightpink: #e8a0b3;
  --wc-bg-oldpink: #b94e69;
  --wc-bg-winered: #88313e;
  --wc-bg-lightlila: #ac98ad;
  --wc-bg-darklila: #80658c;
  --wc-bg-purpleviolet: #50336e;
  --wc-bg-bordeauxviolet: #732c50;
  --wc-bg-lightblue: #6aadd8;
  --wc-bg-waterblue: #087b70;
  --wc-bg-oceanblue: #154b60;
  --wc-bg-darkblue: #283a78;
  --wc-bg-lightgreen: #4fb78b;
  --wc-bg-darkgreen: #176948;
  --wc-bg-greyolive: #89816a;
  --wc-bg-olivegreen: #526a2b;
  --wc-bg-lightbrown: #ae9065;
  --wc-bg-darkbrown: #704f3d;
  --wc-bg-lightgrey: #b7c4cb;
  --wc-bg-middlegrey: #84949d;
  --wc-bg-darkgrey: #606b71;
  --wc-bg-black: #20252b;
}

/* Keep model colors recognizable against both the dark and bright card surfaces. */
:root {
  --sks-wheelchair-swatch-edge: rgba(236, 247, 252, .45);
}

html[data-sks-theme="porcelain"] {
  --sks-wheelchair-swatch-edge: rgba(37, 52, 65, .34);
}

html [class*="wc_bg_"]:not(:focus-visible) {
  outline: 1px solid var(--sks-wheelchair-swatch-edge);
  outline-offset: -1px;
}

@media (prefers-reduced-transparency: reduce) {
  html:not([data-bs-theme="dark"]),
  html[data-bs-theme="dark"] {
    --sks-glass-card: var(--sks-surface);
    --sks-card-hover-bg: var(--sks-surface-3);
    --sks-glass-toolbar: var(--sks-surface-2);
    --sks-glass-highlight: transparent;
    --sks-glass-reflection: transparent;
    --sks-button-bg: var(--sks-surface-2);
    --sks-button-hover-bg: var(--sks-surface-3);
    --sks-control-bg: var(--sks-surface);
    --sks-control-muted-bg: var(--sks-surface-2);
  }

  html[data-bs-theme="dark"] {
    --sks-card-hover-bg: rgba(218, 238, 250, .055);
    --sks-card-hover-edge: rgba(233, 251, 255, .14);
    --sks-card-hover-shadow: 0 8px 20px rgba(0, 10, 15, .18);
  }

  html .card,
  html .card.shadow-sm,
  html .card.login-card,
  html .kpi-tile,
  html .table-responsive,
  html .modal-content,
  html .dropdown-menu,
  html .popover,
  html .toast {
    background: var(--sks-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}