/* DarkDev UI — the blue/light reference, adapted to the existing Bootstrap contracts.
   All on-screen type, colors and component sizes are controlled here.
   No remote font dependency: matches the mockup's Inter / Segoe UI fallback. */
html[data-ui-system="v2"] {
  color-scheme: light;
  --ui-font-body: Inter, "Segoe UI", Arial, sans-serif;
  --ui-font-heading: var(--ui-font-body);
  --ui-font: var(--ui-font-body);
  --ui-font-mono: "JetBrains Mono", Consolas, monospace;
  --ui-type-body: 13px;
  --ui-type-secondary: 12px;
  --ui-type-caption: 11px;
  --ui-type-micro: 10px;
  --ui-type-overline: 9px;
  --ui-table-text-size: 12px;
  --ui-table-heading-size: 10px;
  --ui-type-kpi-value: 25px;
  --ui-type-kpi-label: 10px;
  --ui-type-kpi-meta: 9px;
  --ui-metric-green: #125b42;
  --ui-metric-green-soft: #d8f58b;
  --ui-metric-amber: #84500a;
  --ui-metric-amber-soft: #ffe1a1;
  --ui-metric-amber-tint: #fff2cf;
  --ui-table-heading-bg: #f8f8f8;
  --ui-table-hover: #fafafa;
  --ui-table-selected: #f4f4f4;
  --ui-neutral-soft: #f2f2f2;
  --ui-neutral-border: #dfdfdf;
  --ui-neutral-text: #666666;
  --ui-success-border: #cee5d3;
  --ui-warning-border: #eddcba;
  --ui-danger-border: #efd1d0;
  --ui-info-border: #d1e0f0;
  --ui-violet-border: #e0d9ed;
  --ui-rem: 16px;
  --ui-type-control: 12px;
  --ui-type-button: 11px;
  --ui-type-value: 24px;
  --ui-type-brand: 18px;
  --ui-icon-navigation: 14px;
  --ui-icon-navigation-small: 11px;
  --ui-icon-chevron: 9px;
  --ui-type-h1: 30px;
  --ui-type-h2: 20px;
  --ui-type-h3: 14px;
  --ui-type-h4: 13px;
  --ui-type-h5: 13px;
  --ui-type-h6: 12px;
  --ui-leading-body: 1.5;
  --ui-leading-heading: 1.25;
  --ui-leading-compact: 1.4;
  --ui-text: #242424;
  --ui-text-secondary: #5b5b5b;
  --ui-muted: #737373;
  --ui-border: #e0e4eb;
  --ui-border-strong: #d0d0d0;
  --ui-surface: #ffffff;
  --ui-surface-muted: #fafafa;
  --ui-surface-hover: #f0f3f9;
  --ui-background: #f8f9fb;
  --ui-primary: #635BFF;
  --ui-primary-hover: #123cb2;
  --ui-primary-contrast: #ffffff;
  --ui-primary-soft: #e9efff;
  --ui-success: #287246;
  --ui-success-contrast: #ffffff;
  --ui-success-soft: #edf7ef;
  --ui-warning: #926110;
  --ui-warning-contrast: #ffffff;
  --ui-warning-soft: #fff7e6;
  --ui-danger: #b33f42;
  --ui-danger-soft: #fdf0ef;
  --ui-danger-button: #fdf0ef;
  --ui-danger-button-text: #a7372d;
  --ui-info: #366a9f;
  --ui-info-soft: #eff5fc;
  --ui-violet: #75608f;
  --ui-violet-soft: #f3f0f8;
  --ui-control-accent: var(--ui-primary);
  --ui-radius: 6px;
  --ui-card-radius: 7px;
  --ui-control-height: 35px;
  --ui-control-height-sm: 29px;
  --ui-control-height-lg: 42px;
  --ui-button-height: 34px;
  --ui-shadow: 0 8px 28px #15254412;
  --ui-focus-ring: 0 0 0 3px #164ad81a;
  --ui-chart-1: #164ad8;
  --ui-chart-2: #008c89;
  --ui-chart-3: #7947bd;
  --ui-chart-4: #c34868;
  --ui-chart-5: #ae7000;
  --ui-chart-grid: #e9edf3;
  --ui-chart-label: #798392;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  /* Stable aliases consumed by current page components. */
  --default-font-family: var(--ui-font);
  --default-text-color: var(--ui-text);
  --default-background: var(--ui-surface-muted);
  --default-border: var(--ui-border);
  --body-bg: var(--ui-background);
  --custom-white: var(--ui-surface);
  --text-muted: var(--ui-muted);
  --primary-color: var(--ui-primary);
  --primary-rgb: 22, 74, 216;
  --success-rgb: 18, 91, 66;
  --warning-rgb: 132, 80, 10;
  --danger-rgb: 167, 55, 45;
  --info-rgb: 55, 108, 163;
  --secondary-rgb: 91, 91, 91;
  --primary01: var(--ui-primary-soft);
  --form-control-bg: var(--ui-surface);
  --input-color: var(--ui-text);
  --bs-font-sans-serif: var(--ui-font);
  --bs-body-font-family: var(--ui-font);
  --bs-body-font-size: var(--ui-type-body);
  --bs-body-font-weight: 400;
  --bs-body-line-height: var(--ui-leading-body);
  --bs-body-color: var(--ui-text);
  --bs-body-bg: var(--ui-background);
  --bs-secondary-color: var(--ui-muted);
  --bs-secondary-bg: var(--ui-surface-muted);
  --bs-tertiary-bg: var(--ui-surface-muted);
  --bs-border-color: var(--ui-border);
  --bs-primary: var(--ui-primary);
  --bs-primary-rgb: 22, 74, 216;
  --bs-success-rgb: 18, 91, 66;
  --bs-warning-rgb: 132, 80, 10;
  --bs-danger-rgb: 167, 55, 45;
  --bs-info-rgb: 55, 108, 163;
  --bs-link-color: var(--ui-primary);
  --bs-link-hover-color: var(--ui-primary-hover);
  --bs-border-radius: var(--ui-radius);
  --bs-border-radius-lg: var(--ui-card-radius);
  font-family: var(--ui-font);
  font-size: var(--ui-rem);
}

html[data-ui-system="v2"] body {
  margin: 0;
  font-family: var(--ui-font);
  font-size: var(--ui-type-body);
  line-height: var(--ui-leading-body);
  color: var(--ui-text);
  background: var(--ui-background);
  -webkit-font-smoothing: antialiased;
}

/* Inline code keeps the surrounding text role instead of shrinking it. */
html[data-ui-system="v2"] code { font-size: inherit; }

/* Heading family can be configured independently from body text. */
html[data-ui-system="v2"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .ddv-ui-page-title, .card-title, .modal-title, .heading-title) {
  font-family: var(--ui-font-heading);
}

/* Text in div, p, span and lists inherits its role from the parent. */
html[data-ui-system="v2"] :is(h1, .h1, .ddv-ui-page-title) { font-size: var(--ui-type-h1); }
html[data-ui-system="v2"] :is(h2, .h2) { font-size: var(--ui-type-h2); }
html[data-ui-system="v2"] :is(h3, .h3) { font-size: var(--ui-type-h3); }
html[data-ui-system="v2"] :is(h4, .h4) { font-size: var(--ui-type-h4); }
html[data-ui-system="v2"] :is(h5, .h5) { font-size: var(--ui-type-h5); }
html[data-ui-system="v2"] :is(h6, .h6) { font-size: var(--ui-type-h6); }
html[data-ui-system="v2"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  line-height: var(--ui-leading-heading);
}
html[data-ui-system="v2"] :is(input:not([type="hidden"]), select, textarea, button, output) {
  font-size: var(--ui-type-control);
}
html[data-ui-system="v2"] :is(small, .small, .badge, .tooltip-inner, .progress-bar) {
  font-size: var(--ui-type-caption);
  line-height: var(--ui-leading-compact);
}
html[data-ui-system="v2"] .authentication-cover-main.bg-white {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-card-radius) !important;
  background: var(--ui-surface) !important;
}

html[data-ui-system="v2"] .authentication-cover-main .card.custom-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-ui-system="v2"] .ddv-ui-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-block-end: 1.25rem;
}

html[data-ui-system="v2"] .ddv-ui-page-title {
  margin: 0;
  color: var(--ui-text);
  font-size: var(--ui-type-h1);
  font-weight: 600;
  line-height: var(--ui-leading-heading);
}

html[data-ui-system="v2"] .ddv-ui-card,
html[data-ui-system="v2"] .card.custom-card {
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-card-radius);
  box-shadow: none;
}

html[data-ui-system="v2"] .card.custom-card .card-header .card-title {
  font-size: var(--ui-type-h5);
  line-height: var(--ui-leading-heading);
}

html[data-ui-system="v2"] .card.custom-card .card-footer {
  font-size: var(--ui-type-secondary);
}

html[data-ui-system="v2"] :is(.card.custom-card .card-link, .card.custom-card .card-text, .input-group-text, .toast .toast-body, .popover, .custom-alert1 p) {
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] .heading-title {
  font-size: var(--ui-type-h3);
}

html[data-ui-system="v2"] .ecommerce-more-link {
  font-size: var(--ui-type-secondary);
}

html[data-ui-system="v2"] :is(.ddv-pill, .ddv-btn-chip, .ddv-badge, .ddv-kpi .ddv-kpi-sub, .ribbon-6) {
  font-size: var(--ui-type-caption);
}

html[data-ui-system="v2"] .ddv-kpi .ddv-kpi-title {
  font-size: var(--ui-type-secondary);
}

html[data-ui-system="v2"] .ddv-kpi .ddv-kpi-value {
  font-size: var(--ui-type-value);
}

html[data-ui-system="v2"] :is(.alert, .accordion-button, .accordion-body, .nav-link, .page-link, .list-group-item) {
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] :is(.nav-tabs-header .nav-item .nav-link, .nav-tabs-footer .nav-item .nav-link, .tab-style-3 .nav-item .nav-link, .tab-style-6 .nav-item .nav-link, .tab-style-7 .nav-link) {
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] :is(.pagination-style-1, .pagination-style-2, .pagination-style-3, .pagination-style-4) .pagination .page-item .page-link,
html[data-ui-system="v2"] .dataTables_paginate .pagination .paginate_button .page-link {
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] .app-sidebar :is(.side-menu__item, .side-menu__label, .side-menu__label1) {
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] .app-sidebar .slide__category {
  font-size: var(--ui-type-caption);
}

html[data-ui-system="v2"] :is(.form-group, .ddv-ui-form-group) {
  margin-block-end: 1rem;
}

html[data-ui-system="v2"] :is(.checkbox-button-group .btn-group label, .radio-button-group .btn-group label, .wizard-tab .wizard-nav.tabs .wizard-step, .wizard-tab .wizard-nav.progress .wizard-step) {
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] :is(.form-label, fieldset > legend) {
  margin-block-end: .375rem;
  color: var(--ui-text);
  font-size: var(--ui-type-body);
  font-weight: 600;
  line-height: 1.35;
}

html[data-ui-system="v2"] fieldset > legend {
  float: none;
  width: auto;
  padding: 0;
}

html[data-ui-system="v2"] :is(.form-text, .form-help, .ddv-ui-help) {
  color: var(--ui-muted);
  font-size: var(--ui-type-secondary);
  line-height: var(--ui-leading-compact);
}

html[data-ui-system="v2"] :is(.form-control, .form-select) {
  min-height: var(--ui-control-height);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background-color: var(--ui-surface);
  font-family: var(--ui-font);
  font-size: var(--ui-type-body);
  font-weight: 400;
  line-height: 1.5;
  padding: 7px 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

html[data-ui-system="v2"] :is(.form-control, .form-select):hover:not(:disabled):not([readonly]) {
  border-color: var(--ui-muted);
}

html[data-ui-system="v2"] :is(.form-control, .form-select):focus {
  border-color: var(--ui-primary);
  color: var(--ui-text);
  background-color: var(--ui-surface);
  box-shadow: var(--ui-focus-ring);
  outline: 0;
}

html[data-ui-system="v2"] :is(.form-control, .form-select)::placeholder {
  color: var(--ui-muted);
  font-size: var(--ui-type-body);
  opacity: 1;
}

html[data-ui-system="v2"] .form-floating > .form-control::placeholder {
  color: transparent;
}

html[data-ui-system="v2"] :is(.form-control, .form-select):disabled,
html[data-ui-system="v2"] .form-control[readonly] {
  color: var(--ui-muted);
  background-color: var(--ui-surface-muted);
  opacity: 1;
  cursor: not-allowed;
}

html[data-ui-system="v2"] .form-control-sm,
html[data-ui-system="v2"] .form-select-sm {
  min-height: var(--ui-control-height-sm);
  padding: .3rem .625rem;
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] .form-control-lg,
html[data-ui-system="v2"] .form-select-lg {
  min-height: var(--ui-control-height-lg);
  padding: .7rem .875rem;
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] textarea.form-control,
html[data-ui-system="v2"] select[multiple].form-select,
html[data-ui-system="v2"] .form-control[type="file"] {
  height: auto;
}

html[data-ui-system="v2"] .form-control[type="file"]::file-selector-button {
  margin: -.55rem .75rem -.55rem -.75rem;
  padding: .55rem .75rem;
  border: 0;
  border-inline-end: 1px solid var(--ui-border);
  color: var(--ui-text);
  background: var(--ui-surface-muted);
  font: inherit;
}

html[data-ui-system="v2"] .form-control-color {
  width: 3rem;
  padding: .25rem;
}

html[data-ui-system="v2"] .form-range,
html[data-ui-system="v2"] :is(progress, meter) {
  accent-color: var(--ui-primary);
}

html[data-ui-system="v2"] .form-floating > :is(.form-control, .form-select) {
  min-height: 3.5rem;
  height: 3.5rem;
  padding-block: 1.625rem .625rem;
}

html[data-ui-system="v2"] .form-floating > label {
  color: var(--ui-muted);
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] .form-floating > :is(.form-control, .form-select):focus ~ label,
html[data-ui-system="v2"] .form-floating > :is(.form-control, .form-select):not(:placeholder-shown) ~ label {
  color: var(--ui-muted);
}

html[data-ui-system="v2"] .form-check {
  min-height: 1.25rem;
  padding-inline-start: 1.625rem;
}

/* Match the reserved space to the control width, independent of text size. */
html[data-ui-system="v2"] .form-check > .form-check-input {
  margin-inline-start: -1.625rem;
}

html[data-ui-system="v2"] .form-check.form-switch {
  padding-inline-start: 2.875rem;
}

html[data-ui-system="v2"] .form-switch > .form-check-input {
  margin-inline-start: -2.875rem;
}

html[data-ui-system="v2"] .form-check.form-check-reverse {
  padding-inline: 0 1.625rem;
}

html[data-ui-system="v2"] .form-check-reverse > .form-check-input {
  margin-inline: 0 -1.625rem;
}

html[data-ui-system="v2"] .form-switch.form-check-reverse {
  padding-inline-end: 2.875rem;
}

html[data-ui-system="v2"] .form-switch.form-check-reverse > .form-check-input {
  margin-inline-end: -2.875rem;
}

html[data-ui-system="v2"] .form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: .15rem;
  border: 1px solid var(--ui-border);
  background-color: var(--ui-surface);
  cursor: pointer;
}

html[data-ui-system="v2"] .form-switch .form-check-input {
  width: 2.25rem;
  border-radius: 2rem;
}

html[data-ui-system="v2"] .form-check-input:checked {
  border-color: var(--ui-control-accent);
  background-color: var(--ui-control-accent);
}

html[data-ui-system="v2"] .form-check-input:focus-visible {
  border-color: var(--ui-primary);
  box-shadow: var(--ui-focus-ring);
}

html[data-ui-system="v2"] .form-check-input:disabled {
  opacity: .55;
  cursor: not-allowed;
}

html[data-ui-system="v2"] .form-check-label {
  color: var(--ui-text);
  font-size: var(--ui-type-body);
  line-height: var(--ui-leading-body);
  cursor: pointer;
}

html[data-ui-system="v2"] .authentication .form-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  padding-inline-start: 0;
}

html[data-ui-system="v2"] .authentication .form-check-input {
  float: none;
  margin: 0;
}

html[data-ui-system="v2"] .authentication .form-check .float-end {
  float: none !important;
  margin-inline-start: auto;
}

html[data-ui-system="v2"] :is(.form-control, .form-select).is-invalid,
html[data-ui-system="v2"] .was-validated :is(.form-control, .form-select):invalid {
  border-color: var(--ui-danger);
  background-color: var(--ui-surface);
}

html[data-ui-system="v2"] :is(.form-control, .form-select).is-invalid:focus,
html[data-ui-system="v2"] .was-validated :is(.form-control, .form-select):invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(199, 49, 69, .16);
}

html[data-ui-system="v2"] :is(.invalid-feedback, .form-error, .ddv-ui-error) {
  color: var(--ui-danger);
  font-size: var(--ui-type-secondary);
  line-height: var(--ui-leading-compact);
}

html[data-ui-system="v2"] :is(.form-control, .form-select).is-valid,
html[data-ui-system="v2"] .was-validated :is(.form-control, .form-select):valid {
  border-color: var(--ui-success);
}

html[data-ui-system="v2"] .btn:not(.btn-link):not(.btn-close) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-height: var(--ui-button-height);
  padding: 7px 12px;
  border-radius: var(--ui-radius);
  font-family: var(--ui-font);
  font-size: var(--ui-type-button);
  font-weight: 500;
  line-height: 18px;
}

html[data-ui-system="v2"] .btn-sm:not(.btn-link) {
  min-height: var(--ui-control-height-sm);
  padding: .3rem .625rem;
  font-size: var(--ui-type-button);
}

html[data-ui-system="v2"] .btn-lg:not(.btn-link) {
  min-height: var(--ui-control-height-lg);
  padding: .7rem 1rem;
  font-size: var(--ui-type-button);
}

html[data-ui-system="v2"] .btn-primary {
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary-contrast) !important;
  background-color: var(--ui-primary) !important;
}

html[data-ui-system="v2"] .btn-primary:hover,
html[data-ui-system="v2"] .btn-primary:active {
  border-color: var(--ui-primary-hover) !important;
  color: var(--ui-primary-contrast) !important;
  background-color: var(--ui-primary-hover) !important;
}

html[data-ui-system="v2"] .btn-secondary {
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  background-color: var(--ui-surface-muted) !important;
}

html[data-ui-system="v2"] .btn-secondary:hover {
  border-color: var(--ui-muted) !important;
  color: var(--ui-text) !important;
  background-color: var(--ui-surface) !important;
}

html[data-ui-system="v2"] .btn-danger {
  border-color: #edc6c1 !important;
  color: var(--ui-danger-button-text) !important;
  background-color: var(--ui-danger-button) !important;
}

html[data-ui-system="v2"] .btn-danger:hover {
  filter: brightness(.9);
}

html[data-ui-system="v2"] .btn-outline-primary {
  border-color: var(--ui-primary);
  color: var(--ui-primary);
  background-color: transparent;
}

html[data-ui-system="v2"] .btn-outline-primary:is(:hover, :focus-visible, :active, .active) {
  border-color: var(--ui-primary-hover);
  color: var(--ui-primary-contrast);
  background-color: var(--ui-primary-hover);
}

html[data-ui-system="v2"] .btn-outline-secondary {
  border-color: var(--ui-border);
  color: var(--ui-text);
  background-color: transparent;
}

html[data-ui-system="v2"] .btn-outline-secondary:is(:hover, :focus-visible, :active, .active) {
  border-color: var(--ui-muted);
  color: var(--ui-text);
  background-color: var(--ui-surface-muted);
}

html[data-ui-system="v2"] .btn-outline-danger {
  border-color: var(--ui-danger);
  color: var(--ui-danger);
  background-color: transparent;
}

html[data-ui-system="v2"] .btn-outline-danger:is(:hover, :focus-visible, :active, .active) {
  border-color: var(--ui-danger-button);
  color: var(--ui-danger-button-text);
  background-color: var(--ui-danger-button);
}

html[data-ui-system="v2"] .btn-outline-success {
  border-color: var(--ui-success);
  color: var(--ui-success);
  background-color: transparent;
}

html[data-ui-system="v2"] .btn-outline-success:is(:hover, :focus-visible, :active, .active) {
  border-color: var(--ui-success);
  color: var(--ui-success-contrast);
  background-color: var(--ui-success);
}

html[data-ui-system="v2"] .btn-outline-warning {
  border-color: var(--ui-warning);
  color: var(--ui-warning);
  background-color: transparent;
}

html[data-ui-system="v2"] .btn-outline-warning:is(:hover, :focus-visible, :active, .active) {
  border-color: var(--ui-warning);
  color: var(--ui-warning-contrast);
  background-color: var(--ui-warning);
}

html[data-ui-system="v2"] :is(.btn, .dropdown-item, .page-link):focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
  box-shadow: var(--ui-focus-ring);
}

html[data-ui-system="v2"] .btn:disabled,
html[data-ui-system="v2"] .btn.disabled {
  opacity: .55;
  cursor: not-allowed;
}

html[data-ui-system="v2"] .ddv-ui-table,
html[data-ui-system="v2"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ui-text);
  --bs-table-border-color: var(--ui-border);
  color: var(--ui-text);
  font-size: var(--ui-type-body);
  vertical-align: middle;
}

html[data-ui-system="v2"] :is(.ddv-ui-table, .table) > :not(caption) > * > * {
  padding: .75rem;
  border-bottom-color: var(--ui-border);
}

html[data-ui-system="v2"] :is(.ddv-ui-table, .table) td {
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] :is(.ddv-ui-table, .table) thead th {
  color: var(--ui-muted);
  background: var(--ui-surface-muted);
  font-size: var(--ui-type-secondary);
  font-weight: 600;
  white-space: nowrap;
}

html[data-ui-system="v2"] .table-responsive,
html[data-ui-system="v2"] .ddv-ui-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html[data-ui-system="v2"] .ddv-ui-modal .modal-content,
html[data-ui-system="v2"] .modal-content {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-card-radius);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}

html[data-ui-system="v2"] :is(.modal-header, .modal-footer) {
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

html[data-ui-system="v2"] .modal-body {
  padding: 1.25rem;
}

html[data-ui-system="v2"] .modal-title {
  color: var(--ui-text);
  font-size: var(--ui-type-h3);
  font-weight: 600;
  line-height: 1.4;
}

html[data-ui-system="v2"] .dropdown-menu {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] .dropdown-item {
  padding: .5rem .75rem;
  color: var(--ui-text);
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] .main-header-container .main-profile-user .dropdown-item,
html[data-ui-system="v2"] .btn.header-dashboards-button {
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] .dropdown-item:hover,
html[data-ui-system="v2"] .dropdown-item:focus {
  color: var(--ui-text);
  background: var(--ui-surface-muted);
}

/* Searchable select implementations retain their behavior and share the native control shell. */
html[data-ui-system="v2"] :is(.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .choices__inner) {
  min-height: var(--ui-control-height);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: var(--ui-surface);
  font-family: var(--ui-font);
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] .choices__inner,
html[data-ui-system="v2"] .select2-results__option--selectable {
  font-size: var(--ui-type-body) !important;
}

html[data-ui-system="v2"] .select2-selection--multiple .select2-selection__choice__display {
  font-size: var(--ui-type-caption) !important;
}

/* The legacy theme uses !important on Select2; scope its replacement to v2. */
html[data-ui-system="v2"] .select2-container--default .select2-selection--single,
html[data-ui-system="v2"] .select2-container--default .select2-selection--multiple {
  min-height: var(--ui-control-height) !important;
  height: auto !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background-color: var(--ui-surface) !important;
}

html[data-ui-system="v2"] .select2-container--default .select2-selection--single {
  height: var(--ui-control-height) !important;
}

html[data-ui-system="v2"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ui-text) !important;
  line-height: calc(var(--ui-control-height) - 2px) !important;
  padding-inline: .75rem 1.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
}

html[data-ui-system="v2"] .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--ui-control-height) - 2px) !important;
  inset-inline-end: .25rem;
}

html[data-ui-system="v2"] :is(.select2-container--focus .select2-selection, .choices.is-focused .choices__inner) {
  border-color: var(--ui-primary);
  box-shadow: var(--ui-focus-ring);
}

html[data-ui-system="v2"] :is(.select2-dropdown, .choices__list--dropdown) {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  font-size: var(--ui-type-body);
}

/* Integrated controls keep their behavior while inheriting the shared type scale. */
html[data-ui-system="v2"] :is(.tagify, .tagify__dropdown, .dataTables_wrapper, .dataTables_wrapper .paginate_button) {
  font-family: var(--ui-font);
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] :is(.tags-look .tagify__dropdown__item, .tagify__dropdown.users-list span, .tagify__dropdown.users-list .remove-all-tags) {
  font-size: var(--ui-type-body);
}

html[data-ui-system="v2"] :is(.tagify__dropdown__footer, .tagify__tag > div, .custom-progress-3 .progress-bar .progress-bar-value) {
  font-size: var(--ui-type-caption);
}

html[data-ui-system="v2"] .custom-progress-4.progress .progress-bar-label {
  font-size: var(--ui-type-secondary);
}

html[data-ui-system="v2"] .dataTables_wrapper .dataTables_info {
  font-size: var(--ui-type-secondary);
}

html[data-ui-system="v2"] .dt-button {
  font-size: var(--ui-type-body) !important;
}

html[data-ui-system="v2"] .select2-dropdown {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background-color: var(--ui-surface) !important;
}

html[data-ui-system="v2"] .select2-search__field {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-text) !important;
  background-color: var(--ui-surface) !important;
}

html[data-ui-system="v2"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  color: var(--ui-text) !important;
  background-color: var(--ui-surface-muted) !important;
}

html[data-ui-system="v2"] .select2-container--default .select2-results__option--selected {
  color: var(--ui-primary-contrast) !important;
  background-color: var(--ui-primary) !important;
}

html[data-ui-system="v2"] .ddv-ui-chart {
  min-width: 0;
  color: var(--ui-text);
  background: var(--ui-surface);
  font-family: var(--ui-font);
}

html[data-ui-system="v2"] :is(.apexcharts-tooltip, .apexcharts-xaxistooltip) {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: var(--ui-surface);
  font-family: var(--ui-font);
  box-shadow: var(--ui-shadow);
}

html[data-ui-system="v2"] :is(.apexcharts-menu-item, .swal2-html-container, .swal2-styled, .autoComplete_wrapper > ul > li) {
  font-size: var(--ui-type-body) !important;
}

html[data-ui-system="v2"] .swal2-title {
  font-size: var(--ui-type-h3) !important;
}

html[data-ui-system="v2"] .apexcharts-title-text {
  font-size: var(--ui-type-h5) !important;
}

html[data-ui-system="v2"] :is(.apexcharts-yaxis .apexcharts-text, .apexcharts-text.apexcharts-yaxis-label tspan, .apexcharts-text.apexcharts-xaxis-label tspan) {
  font-size: var(--ui-type-caption) !important;
}

html[data-ui-system="v2"] .autoComplete_wrapper > input {
  font-size: var(--ui-type-body) !important;
}

html[data-ui-system="v2"] :is(.apexcharts-text, .apexcharts-legend-text, .apexcharts-tooltip-text, .apexcharts-xaxistooltip-text, .chartjs-render-monitor) {
  font-size: var(--ui-type-caption);
}


/* Explicit semantic roles take precedence over base component sizes. */
html[data-ui-system="v2"] .ddv-ui-text-secondary { font-size: var(--ui-type-secondary); line-height: var(--ui-leading-compact); }
html[data-ui-system="v2"] .ddv-ui-text-caption { font-size: var(--ui-type-caption); line-height: var(--ui-leading-compact); }
html[data-ui-system="v2"] :is(.ddv-ui-metric, .ddv-client-quickview-stat-value) { font-size: var(--ui-type-value); line-height: var(--ui-leading-heading); }

@media (max-width: 575.98px) {
  html[data-ui-system="v2"] .ddv-ui-page-header {
    align-items: stretch;
  }

  html[data-ui-system="v2"] :is(.modal-header, .modal-footer, .modal-body) {
    padding: 1rem;
  }
}

/* Component geometry is shared by every route; Bootstrap owns the responsive grid. */
html[data-ui-system="v2"] [hidden] { display: none !important; }
html[data-ui-system="v2"] ::selection { background: #d6e1ff; color: #14388d; }
html[data-ui-system="v2"] a { text-decoration: none; }
html[data-ui-system="v2"] :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { color: var(--ui-text); font-weight: 600; }
html[data-ui-system="v2"] :is(h1,.h1,.ddv-ui-page-title) { letter-spacing: -1px; }
html[data-ui-system="v2"] :is(h2,.h2) { letter-spacing: -.45px; }
html[data-ui-system="v2"] :is(code,pre,kbd,.font-monospace) { font-family: var(--ui-font-mono); }
html[data-ui-system="v2"] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 3px; }
html[data-ui-system="v2"] :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--ui-primary); }
html[data-ui-system="v2"] :is(.form-control,.form-select,.select2-container,.choices__inner) { font-size: var(--ui-type-control); }
html[data-ui-system="v2"] :is(.form-label,.form-check-label,fieldset>legend) { font-size: var(--ui-type-caption); font-weight: 500; }
html[data-ui-system="v2"] :is(.form-text,.form-help,.ddv-ui-help,.invalid-feedback) { font-size: var(--ui-type-caption); }
html[data-ui-system="v2"] .form-control::placeholder { font-size: var(--ui-type-control); color: #8b8b8b; }
html[data-ui-system="v2"] :is(.btn,.btn-sm,.btn-lg):not(.btn-close) { font-size: var(--ui-type-button); }
html[data-ui-system="v2"] .btn-icon { width: var(--ui-button-height); padding-inline: 0; flex-shrink: 0; }
html[data-ui-system="v2"] .btn-icon.btn-sm { width: var(--ui-control-height-sm); }
html[data-ui-system="v2"] .btn-list { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
html[data-ui-system="v2"] .btn-light { border-color: var(--ui-border-strong); background: var(--ui-surface-muted); color: var(--ui-text); }
html[data-ui-system="v2"] .btn-light:hover { background: var(--ui-surface-hover); }
html[data-ui-system="v2"] .btn-success { color: white; border-color: var(--ui-success); background: var(--ui-success); }
html[data-ui-system="v2"] .btn-warning { color: var(--ui-warning); border-color: #eccd8d; background: var(--ui-warning-soft); }
html[data-ui-system="v2"] .btn-info { color: var(--ui-info); border-color: #c7d9ed; background: var(--ui-info-soft); }
html[data-ui-system="v2"] .btn-primary-light { color: var(--ui-primary); border-color: #cbd9fa; background: var(--ui-primary-soft); }
html[data-ui-system="v2"] .btn-danger-light { color: var(--ui-danger); border-color: #edc6c1; background: var(--ui-danger-soft); }
html[data-ui-system="v2"] .btn-info-light { color: var(--ui-info); border-color: #c7d9ed; background: var(--ui-info-soft); }
html[data-ui-system="v2"] .btn-purple-light { color: var(--ui-violet); border-color: #d7c7ef; background: var(--ui-violet-soft); }
html[data-ui-system="v2"] :is(.card,.ddv-ui-card) { min-width: 0; margin-bottom: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-card-radius); background: var(--ui-surface); box-shadow: none; }
html[data-ui-system="v2"] .card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; background: transparent; border-bottom: 1px solid var(--ui-border); }
html[data-ui-system="v2"] .card-header:first-child { border-radius: var(--ui-card-radius) var(--ui-card-radius) 0 0; }
html[data-ui-system="v2"] .card-title { margin: 0; font-size: var(--ui-type-h3); font-weight: 600; }
html[data-ui-system="v2"] .card-title::before { content: none; }
html[data-ui-system="v2"] .card-body { padding: 20px; }
html[data-ui-system="v2"] .card-footer { padding: 12px 20px; background: transparent; border-top: 1px solid var(--ui-border); }
html[data-ui-system="v2"] .card-header-tabs { margin-bottom: -16px; }
html[data-ui-system="v2"] .ddv-ui-page-header { position: relative; padding-left: 17px; margin-bottom: 23px; }
html[data-ui-system="v2"] .ddv-ui-page-header::before { content: ""; position: absolute; left: 0; top: 3px; width: 5px; height: calc(100% - 6px); min-height: 32px; border-radius: 2px; background: var(--ui-primary); }
html[data-ui-system="v2"] .heading-description { color: var(--ui-muted); font-size: var(--ui-type-secondary); line-height: var(--ui-leading-body); }
html[data-ui-system="v2"] .ddv-ui-page-header :is(p,.breadcrumb) { margin: 7px 0 0; }
html[data-ui-system="v2"] :is(.table,.ddv-ui-table) { margin-bottom: 0; }
html[data-ui-system="v2"] :is(.table,.ddv-ui-table) { border-collapse: collapse; border: 0; font-variant-numeric: tabular-nums; }
html[data-ui-system="v2"] :is(.table,.ddv-ui-table) > :not(caption) > * { border-width: 0; }
html[data-ui-system="v2"] :is(.table,.ddv-ui-table) > :not(caption) > * > * { box-sizing: border-box; padding: 11px 12px; border-width: 0 0 1px; border-bottom-color: var(--ui-border); box-shadow: none; }
html[data-ui-system="v2"] :is(.table,.ddv-ui-table) > :not(caption) > * > :first-child { padding-left: 17px; }
html[data-ui-system="v2"] :is(.table,.ddv-ui-table) tbody tr:last-child > * { border-bottom-width: 0; }
html[data-ui-system="v2"] :is(.table,.ddv-ui-table) thead th { padding: 10px 12px; font-family: var(--ui-font); font-size: var(--ui-table-heading-size); font-weight: 450; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--ui-muted); background: var(--ui-table-heading-bg); }
html[data-ui-system="v2"] :is(.table,.ddv-ui-table) td { font-size: var(--ui-table-text-size); color: var(--ui-text-secondary); }
html[data-ui-system="v2"] .table-hover tbody tr:hover > * { --bs-table-accent-bg: var(--ui-table-hover); --bs-table-bg-state: var(--ui-table-hover); background-color: var(--ui-table-hover); }
html[data-ui-system="v2"] .dataTables_wrapper { min-width: 0; }
html[data-ui-system="v2"] .dataTables_wrapper :is(.dataTables_filter,.dataTables_length) { margin: 0 0 14px; font-size: var(--ui-type-caption); color: var(--ui-muted); }
html[data-ui-system="v2"] .dataTables_wrapper :is(.dataTables_filter input,.dataTables_length select) { min-height: 31px; border: 1px solid var(--ui-border-strong); border-radius: 5px; background: white; padding: 5px 9px; color: var(--ui-text); font-size: var(--ui-type-caption); }
html[data-ui-system="v2"] .dataTables_wrapper .dataTables_info { padding-top: 16px; }
html[data-ui-system="v2"] .dataTables_wrapper .dataTables_paginate { padding-top: 12px; }
html[data-ui-system="v2"] .page-link { border: 1px solid transparent; border-radius: 4px; color: var(--ui-muted); background: transparent; font-size: var(--ui-type-micro); min-width: 25px; min-height: 25px; padding: 4px 7px; line-height: 16px; box-shadow: none; }
html[data-ui-system="v2"] .active > .page-link { background: #efefef; color: #343434; border-color: #dbdbdb; }
html[data-ui-system="v2"] :is(.nav-tabs,.nav-tabs-header,.nav-tabs-footer) { gap: 18px; border-bottom: 1px solid var(--ui-border); }
html[data-ui-system="v2"] .nav-tabs .nav-link { margin-bottom: -1px; padding: 11px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ui-muted); background: transparent; font-size: var(--ui-type-secondary); }
html[data-ui-system="v2"] .nav-tabs .nav-link:is(.active,:hover) { color: var(--ui-primary); border-bottom-color: var(--ui-primary); background: transparent; }
html[data-ui-system="v2"] .nav-pills .nav-link.active { background: var(--ui-primary); color: white; }
html[data-ui-system="v2"] .nav-link { font-size: var(--ui-type-secondary); }
html[data-ui-system="v2"] .accordion-item { border-color: var(--ui-border); background: white; }
html[data-ui-system="v2"] .accordion-button { color: var(--ui-text); background: white; font-size: var(--ui-type-secondary); padding: 14px 16px; }
html[data-ui-system="v2"] .accordion-button:not(.collapsed) { color: var(--ui-primary); background: var(--ui-primary-soft); box-shadow: none; }
html[data-ui-system="v2"] .accordion-body { padding: 16px; }
html[data-ui-system="v2"] .alert { padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font-size: var(--ui-type-secondary); }
html[data-ui-system="v2"] :is(.alert-primary,.alert-info) { color: var(--ui-primary); background: #f0f4ff; border-color: #cedbfa; }
html[data-ui-system="v2"] .alert-success { color: var(--ui-success); background: #f1f9e5; border-color: #d4e7bd; }
html[data-ui-system="v2"] .alert-warning { color: var(--ui-warning); background: #fff7e7; border-color: #f0ddbb; }
html[data-ui-system="v2"] .alert-danger { color: var(--ui-danger); background: #fff1ed; border-color: #efcfc6; }
html[data-ui-system="v2"] .badge { border: 1px solid var(--ui-neutral-border); border-radius: 4px; padding: 1px 6px; font-size: var(--ui-type-micro); font-weight: 500; line-height: 16px; vertical-align: middle; }
html[data-ui-system="v2"] .badge.bg-success { color: var(--ui-success) !important; background: var(--ui-success-soft) !important; }
html[data-ui-system="v2"] .badge.bg-warning { color: var(--ui-warning) !important; background: var(--ui-warning-soft) !important; }
html[data-ui-system="v2"] .badge.bg-danger { color: var(--ui-danger) !important; background: var(--ui-danger-soft) !important; }
html[data-ui-system="v2"] .badge.bg-secondary { color: var(--ui-text-secondary) !important; background: #edf0f4 !important; }
html[data-ui-system="v2"] .bg-primary-transparent { color: var(--ui-primary); background: var(--ui-primary-soft) !important; }
html[data-ui-system="v2"] .bg-success-transparent { color: var(--ui-success); background: var(--ui-success-soft) !important; }
html[data-ui-system="v2"] .bg-warning-transparent { color: var(--ui-warning); background: var(--ui-warning-soft) !important; }
html[data-ui-system="v2"] .bg-danger-transparent { color: var(--ui-danger); background: var(--ui-danger-soft) !important; }
html[data-ui-system="v2"] .bg-info-transparent { color: var(--ui-info); background: var(--ui-info-soft) !important; }
html[data-ui-system="v2"] .bg-secondary-transparent { color: var(--ui-text-secondary); background: #f0f0f0 !important; }
html[data-ui-system="v2"] .bg-pink-transparent { color: #a33376; background: #f9e3ef !important; }
html[data-ui-system="v2"] :is(.text-default,.text-dark) { color: var(--ui-text) !important; }
html[data-ui-system="v2"] :is(.text-muted,.text-secondary) { color: var(--ui-muted) !important; }
html[data-ui-system="v2"] .text-fixed-white { color: #fff !important; }
html[data-ui-system="v2"] .fw-medium { font-weight: 500 !important; }
html[data-ui-system="v2"] .fw-semibold { font-weight: 600 !important; }
html[data-ui-system="v2"] .avatar { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 34px; line-height: 1; border-radius: 5px; color: var(--ui-text-secondary); background: #f0f0f0; font-size: var(--ui-type-caption); }
html[data-ui-system="v2"] .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
html[data-ui-system="v2"] .avatar-xs { width: 22px; height: 22px; }
html[data-ui-system="v2"] .avatar-sm { width: 27px; height: 27px; }
html[data-ui-system="v2"] .avatar-md { width: 40px; height: 40px; }
html[data-ui-system="v2"] .avatar-lg { width: 48px; height: 48px; }
html[data-ui-system="v2"] .avatar-xl { width: 64px; height: 64px; }
html[data-ui-system="v2"] .avatar-rounded { border-radius: 50%; }
html[data-ui-system="v2"] .avatar-list-stacked .avatar + .avatar { margin-left: -10px; border: 2px solid white; }
html[data-ui-system="v2"] .border-block-end-dashed { border-bottom: 1px dashed var(--ui-border); }
html[data-ui-system="v2"] .border-block-end { border-bottom: 1px solid var(--ui-border); }
html[data-ui-system="v2"] .border-inline-end { border-inline-end: 1px solid var(--ui-border); }
html[data-ui-system="v2"] .border-inline-start { border-inline-start: 1px solid var(--ui-border); }
html[data-ui-system="v2"] .list-unstyled { padding-left: 0; list-style: none; }
html[data-ui-system="v2"] .w-0 { width: 0; }
html[data-ui-system="v2"] .min-w-0 { min-width: 0; }
html[data-ui-system="v2"] .select2-selection__choice { border: 1px solid #cedbfa !important; border-radius: 4px !important; background: var(--ui-primary-soft) !important; color: var(--ui-primary) !important; }
html[data-ui-system="v2"] .select2-container .select2-selection__rendered { font-size: var(--ui-type-control); }
html[data-ui-system="v2"] :is(.choices__list--multiple .choices__item,.tagify__tag) { --tag-bg: var(--ui-primary-soft); --tag-text-color: var(--ui-primary); --tag-border-radius: 4px; --tag-remove-btn-color: var(--ui-primary); }
html[data-ui-system="v2"] .choices__list--multiple .choices__item { background: var(--ui-primary-soft); border-color: #cedbfa; color: var(--ui-primary); }
html[data-ui-system="v2"] .offcanvas { color: var(--ui-text); background: white; border-color: var(--ui-border); }
html[data-ui-system="v2"] .offcanvas-header { padding: 20px 24px; border-bottom: 1px solid var(--ui-border); }
html[data-ui-system="v2"] .offcanvas-body { padding: 20px 24px; }
html[data-ui-system="v2"] .offcanvas-title { font-size: var(--ui-type-h2); }
html[data-ui-system="v2"] :is(.modal-header,.modal-body,.modal-footer) { padding: 20px 24px; }
html[data-ui-system="v2"] .modal-header { align-items: flex-start; }
html[data-ui-system="v2"] .modal-title { font-size: var(--ui-type-h2); font-weight: 600; }
html[data-ui-system="v2"] .modal-footer { padding-block: 14px; background: var(--ui-surface-muted); }
html[data-ui-system="v2"] .modal-backdrop { --bs-backdrop-opacity: .25; }
html[data-ui-system="v2"] .dropdown-menu { padding: 5px; min-width: 190px; }
html[data-ui-system="v2"] .dropdown-item { padding: 8px 10px; border-radius: 4px; font-size: var(--ui-type-secondary); }
html[data-ui-system="v2"] .dropdown-divider { border-color: var(--ui-border); margin: 5px 0; }
html[data-ui-system="v2"] .dropdown-item.active { color: var(--ui-primary); background: var(--ui-primary-soft); }
html[data-ui-system="v2"] .breadcrumb { gap: 6px; color: var(--ui-muted); font-size: var(--ui-type-caption); }
html[data-ui-system="v2"] .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
html[data-ui-system="v2"] .breadcrumb-item + .breadcrumb-item::before { padding-right: 6px; color: #a7afbb; }
html[data-ui-system="v2"] .progress { background: #edf0f5; border-radius: 4px; }
html[data-ui-system="v2"] .progress-bar { background-color: var(--ui-primary); }
html[data-ui-system="v2"] .table-progress { height: 5px; }
html[data-ui-system="v2"] .apexcharts-tooltip { font-size: var(--ui-type-caption); }
html[data-ui-system="v2"] .apexcharts-tooltip-title { background: var(--ui-surface-muted); border-bottom-color: var(--ui-border); font-family: var(--ui-font) !important; }
html[data-ui-system="v2"] .swal2-popup { border: 1px solid var(--ui-border); border-radius: var(--ui-card-radius); box-shadow: var(--ui-shadow); font-family: var(--ui-font); }
html[data-ui-system="v2"] .swal2-styled.swal2-confirm { background: var(--ui-primary); border-radius: var(--ui-radius); }
html[data-ui-system="v2"] .toast { border-color: var(--ui-border); border-radius: var(--ui-card-radius); background: white; box-shadow: var(--ui-shadow); }
html[data-ui-system="v2"] .toast-header { background: white; border-bottom-color: var(--ui-border); color: var(--ui-text); }
html[data-ui-system="v2"] :is(.ddv-ui-metric,.ddv-kpi-value) { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.6px; }
@media (max-width: 700px) {
  html[data-ui-system="v2"] { --ui-control-height: 40px; --ui-button-height: 38px; --ui-type-h1: 28px; }
  html[data-ui-system="v2"] :is(.card-header,.card-body,.card-footer) { padding: 16px; }
  html[data-ui-system="v2"] :is(.modal-header,.modal-body,.modal-footer,.offcanvas-header,.offcanvas-body) { padding: 16px; }
  html[data-ui-system="v2"] .btn:not(.btn-close) { white-space: normal; }
  html[data-ui-system="v2"] .dataTables_wrapper :is(.dataTables_filter,.dataTables_length) { float: none; text-align: left; }
  html[data-ui-system="v2"] .dataTables_wrapper .dataTables_filter input { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui-system="v2"] :is(.form-control,.form-select,.btn,.accordion-button) { transition: none; }
}

/* Reference components: semantic badges stay pastel; saturated colors belong to KPIs. */
html[data-ui-system="v2"] .badge:is(.rounded-pill,.badge-neutral,.bg-light,.bg-secondary,.bg-secondary-transparent) { border-radius: 4px !important; background: var(--ui-neutral-soft) !important; border-color: var(--ui-neutral-border) !important; color: var(--ui-neutral-text) !important; }
html[data-ui-system="v2"] .badge:is(.bg-success,.bg-success-transparent,.bg-outline-success) { background: var(--ui-success-soft) !important; border-color: var(--ui-success-border) !important; color: var(--ui-success) !important; }
html[data-ui-system="v2"] .badge:is(.bg-warning,.bg-warning-transparent,.bg-outline-warning) { background: var(--ui-warning-soft) !important; border-color: var(--ui-warning-border) !important; color: var(--ui-warning) !important; }
html[data-ui-system="v2"] .badge:is(.bg-danger,.bg-danger-transparent,.bg-outline-danger) { background: var(--ui-danger-soft) !important; border-color: var(--ui-danger-border) !important; color: var(--ui-danger) !important; }
html[data-ui-system="v2"] .badge:is(.bg-info,.bg-info-transparent,.bg-primary,.bg-primary-transparent,.bg-outline-info,.bg-outline-primary) { background: var(--ui-info-soft) !important; border-color: var(--ui-info-border) !important; color: var(--ui-info) !important; }
html[data-ui-system="v2"] .badge i { color: inherit !important; }
html[data-ui-system="v2"] .btn.btn-sm:not(.btn-close) { min-height: 28px; padding: 4px 9px; font-size: var(--ui-type-micro); }
html[data-ui-system="v2"] .btn.btn-ghost { color: var(--ui-text-secondary); border-color: transparent; background: transparent; box-shadow: none; }
html[data-ui-system="v2"] .btn.btn-ghost:hover { background: #f0f0f0; border-color: #e3e3e3; }
html[data-ui-system="v2"] .pagination { gap: 4px; margin: 0; }
html[data-ui-system="v2"] .page-item.disabled .page-link { opacity: .45; background: transparent; border-color: transparent; }

/* A data panel has one outer frame; the table is flush with its edges. */
html[data-ui-system="v2"] .card-body:has(> .table-responsive:only-child),
html[data-ui-system="v2"] .card-body:has(> .dataTables_wrapper:only-child) { padding: 0; }
html[data-ui-system="v2"] .card-body > .table-responsive:only-child { border: 0 !important; border-radius: 0; }
html[data-ui-system="v2"] .dataTables_wrapper > .row { --bs-gutter-x: 0; margin-inline: 0; }
html[data-ui-system="v2"] .card .dataTables_wrapper > .row:first-child { padding: 14px 16px; border-bottom: 1px solid var(--ui-border); }
html[data-ui-system="v2"] .card .dataTables_wrapper > .row:last-child { padding: 13px 16px; border-top: 1px solid var(--ui-border); align-items: center; }
html[data-ui-system="v2"] .card .dataTables_wrapper :is(.dataTables_filter,.dataTables_length) { margin: 0; }
html[data-ui-system="v2"] .card .dataTables_wrapper :is(.dataTables_info,.dataTables_paginate) { padding-top: 0; font-size: var(--ui-type-micro); }
html[data-ui-system="v2"] #app-main :is(.card,.ddv-ui-card) :is(.card,.ddv-ui-card) { border: 0 !important; border-radius: 0; box-shadow: none !important; }
html[data-ui-system="v2"] #app-main .card-body > section.border { border: 0 !important; border-radius: 0 !important; background: transparent !important; }

/* Existing floating-label markup follows the reference's label-above-control layout. */
html[data-ui-system="v2"] .form-floating { display: flex; flex-direction: column; gap: 5px; }
html[data-ui-system="v2"] .form-floating > * { order: 1; }
html[data-ui-system="v2"] .form-floating > label { order: 0; }
html[data-ui-system="v2"] .form-floating > :is(.invalid-feedback,.valid-feedback) { order: 2; }
html[data-ui-system="v2"] .form-floating > label { position: static; width: auto; height: auto; padding: 0; border: 0; color: var(--ui-text-secondary); opacity: 1; transform: none !important; font-size: var(--ui-type-secondary); white-space: normal; }
html[data-ui-system="v2"] .form-floating > label::after { display: none; }
html[data-ui-system="v2"] .form-floating > :is(input.form-control,.form-select) { min-height: var(--ui-control-height); height: var(--ui-control-height); padding: 7px 11px; line-height: 1.4; }
html[data-ui-system="v2"] .form-floating > textarea.form-control { padding: 8px 11px; }


/* Panel palettes: keep print documents on the original light token contract. */
@media screen {
  html[data-ui-system="v2"][data-ui-theme="dark"] {
    color-scheme: dark;
    --ui-text: #edf0f7;
    --ui-text-secondary: #c1cada;
    --ui-muted: #a2aec3;
    --ui-border: #344158;
    --ui-border-strong: #61708b;
    --ui-surface: #192233;
    --ui-surface-muted: #202c40;
    --ui-surface-hover: #2b3952;
    --ui-background: #101725;
    --ui-primary: #b0aaff;
    --ui-primary-hover: #d1cdff;
    --ui-primary-contrast: #171329;
    --ui-primary-soft: #302c50;
    --ui-control-accent: #7065ef;
    --ui-success: #88ddae;
    --ui-success-contrast: #10291c;
    --ui-success-soft: #173b2e;
    --ui-success-border: #35694f;
    --ui-warning: #f2c878;
    --ui-warning-soft: #3d301e;
    --ui-warning-border: #78603b;
    --ui-danger: #ff9fa7;
    --ui-danger-soft: #402531;
    --ui-danger-border: #76404f;
    --ui-danger-button: var(--ui-danger-soft);
    --ui-danger-button-text: var(--ui-danger);
    --ui-info: #9acaff;
    --ui-info-soft: #213650;
    --ui-info-border: #416085;
    --ui-violet: #cab0ff;
    --ui-violet-soft: #352c4f;
    --ui-violet-border: #695583;
    --ui-metric-green: #a5e8bb;
    --ui-metric-green-soft: #1d3d31;
    --ui-metric-amber: #ffdc95;
    --ui-metric-amber-soft: #44351f;
    --ui-metric-amber-tint: #514029;
    --ui-table-heading-bg: #202c40;
    --ui-table-hover: #243149;
    --ui-table-selected: #302c50;
    --ui-neutral-soft: #293448;
    --ui-neutral-border: #495873;
    --ui-neutral-text: #c1cada;
    --ui-shadow: 0 8px 28px #00000040;
    --ui-focus-ring: 0 0 0 3px #b0aaff40;
    --ui-chart-1: #b0aaff;
    --ui-chart-2: #63d3ca;
    --ui-chart-3: #d1a6ff;
    --ui-chart-4: #ff9fbd;
    --ui-chart-5: #f2c878;
    --ui-chart-grid: #344158;
    --ui-chart-label: #b4bed0;
    --primary-rgb: 176, 170, 255;
    --bs-primary-rgb: 176, 170, 255;
    --bs-body-color-rgb: 237, 240, 247;
    --bs-body-bg-rgb: 16, 23, 37;
    --bs-emphasis-color: var(--ui-text);
    --bs-emphasis-color-rgb: 237, 240, 247;
    --bs-tertiary-color: var(--ui-muted);
  }
  html[data-ui-system="v2"][data-ui-theme="pink"] {
    color-scheme: light;
    --ui-text: #352430;
    --ui-text-secondary: #654b5a;
    --ui-muted: #806274;
    --ui-border: #ead7e2;
    --ui-border-strong: #bc8da5;
    --ui-surface: #fffafd;
    --ui-surface-muted: #fff0f7;
    --ui-surface-hover: #fce3ef;
    --ui-background: #fff3f8;
    --ui-primary: #ad235e;
    --ui-primary-hover: #851644;
    --ui-primary-contrast: #ffffff;
    --ui-primary-soft: #fbe1ed;
    --ui-table-heading-bg: #fff0f7;
    --ui-table-hover: #fff3f8;
    --ui-table-selected: #fbe1ed;
    --ui-neutral-soft: #f4e8ef;
    --ui-neutral-border: #dfcbd7;
    --ui-neutral-text: #745c6a;
    --ui-focus-ring: 0 0 0 3px #ad235e22;
    --ui-shadow: 0 8px 28px #6d244a14;
    --ui-chart-1: #ad235e;
    --ui-chart-3: #9954b7;
    --ui-chart-4: #bd4865;
    --ui-chart-grid: #ead7e2;
    --ui-chart-label: #806274;
    --primary-rgb: 173, 35, 94;
    --bs-primary-rgb: 173, 35, 94;
    --bs-body-color-rgb: 53, 36, 48;
    --bs-body-bg-rgb: 255, 243, 248;
  }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.bg-white,.bg-light,.bg-body,.offcanvas,.toast,.toast-header,.accordion-item,.accordion-button) { background-color:var(--ui-surface) !important; color:var(--ui-text); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.text-dark,.text-black,.text-body,.text-black-50) { color:var(--ui-text) !important; }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) .dataTables_wrapper :is(.dataTables_filter input,.dataTables_length select) { background:var(--ui-surface); color:var(--ui-text); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.form-control,.form-select)::placeholder { color:var(--ui-muted); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.dropdown-menu,.modal-content,.select2-dropdown,.choices__list--dropdown) { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.dropdown-item,.select2-results__option,.select2-selection__rendered) { color:var(--ui-text); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.dropdown-item:hover,.dropdown-item:focus,.dropdown-item.active,.active>.page-link) { background:var(--ui-primary-soft); color:var(--ui-primary); border-color:var(--ui-border); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.table,.ddv-ui-table) { --bs-table-bg:var(--ui-surface); --bs-table-color:var(--ui-text); --bs-table-striped-bg:var(--ui-surface-muted); --bs-table-striped-color:var(--ui-text); --bs-table-hover-color:var(--ui-text); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.btn-primary,.bg-primary,.nav-pills .nav-link.active) { color:var(--ui-primary-contrast) !important; }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) .btn-success { color:var(--ui-success-contrast); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.alert-primary,.alert-info) { background:var(--ui-primary-soft); color:var(--ui-primary); border-color:var(--ui-border); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) .alert-success { background:var(--ui-success-soft); color:var(--ui-success); border-color:var(--ui-success-border); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) .alert-warning { background:var(--ui-warning-soft); color:var(--ui-warning); border-color:var(--ui-warning-border); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) .alert-danger { background:var(--ui-danger-soft); color:var(--ui-danger); border-color:var(--ui-danger-border); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.avatar,.bg-secondary-transparent,.badge.bg-secondary,.progress) { background:var(--ui-neutral-soft) !important; color:var(--ui-text-secondary) !important; }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) #ordersTable .ddv-order-platform { background:var(--ui-neutral-soft) !important; color:var(--ui-text) !important; }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) #ordersTable .ddv-order-link .badge:not(.ddv-order-platform) { background:var(--ui-info-soft) !important; color:var(--ui-info) !important; }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) :is(.badge.bg-info-transparent,.ddv-payment-card) { background:var(--ui-info-soft) !important; color:var(--ui-info) !important; }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) .ddv-payment-cod { background:var(--ui-warning-soft) !important; color:var(--ui-warning) !important; }
  html[data-ui-system="v2"][data-ui-theme="dark"] .btn-close { filter:invert(1) grayscale(1); }
  html[data-ui-system="v2"][data-ui-theme="dark"] :is(.integration-logo,.mp-market-icon):has(img) { background:#ffffff; }
  html[data-ui-system="v2"][data-ui-theme="dark"] .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='%23c1cada' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
  html[data-ui-system="v2"][data-ui-theme="dark"] .apexcharts-tooltip { background:var(--ui-surface) !important; color:var(--ui-text); border-color:var(--ui-border); }
  html[data-ui-system="v2"][data-ui-theme="dark"] .apexcharts-tooltip-title { background:var(--ui-surface-muted) !important; border-color:var(--ui-border); }
  html[data-ui-system="v2"][data-ui-theme]:not([data-ui-theme="light"]) ::selection { color:var(--ui-text); background:var(--ui-primary-soft); }
}

/* Orders and PPS: table type scale +2px, without changing sidebar typography.
   Adjust --ui-table-text-size here to resize both tables and their secondary text. */
html[data-ui-system="v2"] #ordersTable,
html[data-ui-system="v2"] .pps-workstation-table {
  --ui-table-text-size: 14px;
  --ui-table-heading-size: calc(var(--ui-table-text-size) - 2px);
  --ui-type-body: calc(var(--ui-table-text-size) + 1px);
  --ui-type-secondary: var(--ui-table-text-size);
  --ui-type-caption: calc(var(--ui-table-text-size) - 1px);
  --ui-type-micro: calc(var(--ui-table-text-size) - 2px);
  --ui-type-overline: calc(var(--ui-table-text-size) - 3px);
  --ui-type-control: var(--ui-table-text-size);
  --ui-type-button: calc(var(--ui-table-text-size) - 1px);
}