html {
  --mat-sys-on-surface: initial;
}

.mat-app-background {
  background-color: var(--mat-app-background-color, var(--mat-sys-background, transparent));
  color: var(--mat-app-text-color, var(--mat-sys-on-background, inherit));
}

.mat-elevation-z0, .mat-mdc-elevation-specific.mat-elevation-z0 {
  box-shadow: var(--mat-app-elevation-shadow-level-0, 0px 0px 0px 0px --mat-sys-shadow, 0px 0px 0px 0px --mat-sys-shadow, 0px 0px 0px 0px --mat-sys-shadow);
}

.mat-elevation-z1, .mat-mdc-elevation-specific.mat-elevation-z1 {
  box-shadow: var(--mat-app-elevation-shadow-level-1, 0px 2px 1px -1px --mat-sys-shadow, 0px 1px 1px 0px --mat-sys-shadow, 0px 1px 3px 0px --mat-sys-shadow);
}

.mat-elevation-z2, .mat-mdc-elevation-specific.mat-elevation-z2 {
  box-shadow: var(--mat-app-elevation-shadow-level-2, 0px 3px 1px -2px --mat-sys-shadow, 0px 2px 2px 0px --mat-sys-shadow, 0px 1px 5px 0px --mat-sys-shadow);
}

.mat-elevation-z3, .mat-mdc-elevation-specific.mat-elevation-z3 {
  box-shadow: var(--mat-app-elevation-shadow-level-3, 0px 3px 3px -2px --mat-sys-shadow, 0px 3px 4px 0px --mat-sys-shadow, 0px 1px 8px 0px --mat-sys-shadow);
}

.mat-elevation-z4, .mat-mdc-elevation-specific.mat-elevation-z4 {
  box-shadow: var(--mat-app-elevation-shadow-level-4, 0px 2px 4px -1px --mat-sys-shadow, 0px 4px 5px 0px --mat-sys-shadow, 0px 1px 10px 0px --mat-sys-shadow);
}

.mat-elevation-z5, .mat-mdc-elevation-specific.mat-elevation-z5 {
  box-shadow: var(--mat-app-elevation-shadow-level-5, 0px 3px 5px -1px --mat-sys-shadow, 0px 5px 8px 0px --mat-sys-shadow, 0px 1px 14px 0px --mat-sys-shadow);
}

.mat-elevation-z6, .mat-mdc-elevation-specific.mat-elevation-z6 {
  box-shadow: var(--mat-app-elevation-shadow-level-6, 0px 3px 5px -1px --mat-sys-shadow, 0px 6px 10px 0px --mat-sys-shadow, 0px 1px 18px 0px --mat-sys-shadow);
}

.mat-elevation-z7, .mat-mdc-elevation-specific.mat-elevation-z7 {
  box-shadow: var(--mat-app-elevation-shadow-level-7, 0px 4px 5px -2px --mat-sys-shadow, 0px 7px 10px 1px --mat-sys-shadow, 0px 2px 16px 1px --mat-sys-shadow);
}

.mat-elevation-z8, .mat-mdc-elevation-specific.mat-elevation-z8 {
  box-shadow: var(--mat-app-elevation-shadow-level-8, 0px 5px 5px -3px --mat-sys-shadow, 0px 8px 10px 1px --mat-sys-shadow, 0px 3px 14px 2px --mat-sys-shadow);
}

.mat-elevation-z9, .mat-mdc-elevation-specific.mat-elevation-z9 {
  box-shadow: var(--mat-app-elevation-shadow-level-9, 0px 5px 6px -3px --mat-sys-shadow, 0px 9px 12px 1px --mat-sys-shadow, 0px 3px 16px 2px --mat-sys-shadow);
}

.mat-elevation-z10, .mat-mdc-elevation-specific.mat-elevation-z10 {
  box-shadow: var(--mat-app-elevation-shadow-level-10, 0px 6px 6px -3px --mat-sys-shadow, 0px 10px 14px 1px --mat-sys-shadow, 0px 4px 18px 3px --mat-sys-shadow);
}

.mat-elevation-z11, .mat-mdc-elevation-specific.mat-elevation-z11 {
  box-shadow: var(--mat-app-elevation-shadow-level-11, 0px 6px 7px -4px --mat-sys-shadow, 0px 11px 15px 1px --mat-sys-shadow, 0px 4px 20px 3px --mat-sys-shadow);
}

.mat-elevation-z12, .mat-mdc-elevation-specific.mat-elevation-z12 {
  box-shadow: var(--mat-app-elevation-shadow-level-12, 0px 7px 8px -4px --mat-sys-shadow, 0px 12px 17px 2px --mat-sys-shadow, 0px 5px 22px 4px --mat-sys-shadow);
}

.mat-elevation-z13, .mat-mdc-elevation-specific.mat-elevation-z13 {
  box-shadow: var(--mat-app-elevation-shadow-level-13, 0px 7px 8px -4px --mat-sys-shadow, 0px 13px 19px 2px --mat-sys-shadow, 0px 5px 24px 4px --mat-sys-shadow);
}

.mat-elevation-z14, .mat-mdc-elevation-specific.mat-elevation-z14 {
  box-shadow: var(--mat-app-elevation-shadow-level-14, 0px 7px 9px -4px --mat-sys-shadow, 0px 14px 21px 2px --mat-sys-shadow, 0px 5px 26px 4px --mat-sys-shadow);
}

.mat-elevation-z15, .mat-mdc-elevation-specific.mat-elevation-z15 {
  box-shadow: var(--mat-app-elevation-shadow-level-15, 0px 8px 9px -5px --mat-sys-shadow, 0px 15px 22px 2px --mat-sys-shadow, 0px 6px 28px 5px --mat-sys-shadow);
}

.mat-elevation-z16, .mat-mdc-elevation-specific.mat-elevation-z16 {
  box-shadow: var(--mat-app-elevation-shadow-level-16, 0px 8px 10px -5px --mat-sys-shadow, 0px 16px 24px 2px --mat-sys-shadow, 0px 6px 30px 5px --mat-sys-shadow);
}

.mat-elevation-z17, .mat-mdc-elevation-specific.mat-elevation-z17 {
  box-shadow: var(--mat-app-elevation-shadow-level-17, 0px 8px 11px -5px --mat-sys-shadow, 0px 17px 26px 2px --mat-sys-shadow, 0px 6px 32px 5px --mat-sys-shadow);
}

.mat-elevation-z18, .mat-mdc-elevation-specific.mat-elevation-z18 {
  box-shadow: var(--mat-app-elevation-shadow-level-18, 0px 9px 11px -5px --mat-sys-shadow, 0px 18px 28px 2px --mat-sys-shadow, 0px 7px 34px 6px --mat-sys-shadow);
}

.mat-elevation-z19, .mat-mdc-elevation-specific.mat-elevation-z19 {
  box-shadow: var(--mat-app-elevation-shadow-level-19, 0px 9px 12px -6px --mat-sys-shadow, 0px 19px 29px 2px --mat-sys-shadow, 0px 7px 36px 6px --mat-sys-shadow);
}

.mat-elevation-z20, .mat-mdc-elevation-specific.mat-elevation-z20 {
  box-shadow: var(--mat-app-elevation-shadow-level-20, 0px 10px 13px -6px --mat-sys-shadow, 0px 20px 31px 3px --mat-sys-shadow, 0px 8px 38px 7px --mat-sys-shadow);
}

.mat-elevation-z21, .mat-mdc-elevation-specific.mat-elevation-z21 {
  box-shadow: var(--mat-app-elevation-shadow-level-21, 0px 10px 13px -6px --mat-sys-shadow, 0px 21px 33px 3px --mat-sys-shadow, 0px 8px 40px 7px --mat-sys-shadow);
}

.mat-elevation-z22, .mat-mdc-elevation-specific.mat-elevation-z22 {
  box-shadow: var(--mat-app-elevation-shadow-level-22, 0px 10px 14px -6px --mat-sys-shadow, 0px 22px 35px 3px --mat-sys-shadow, 0px 8px 42px 7px --mat-sys-shadow);
}

.mat-elevation-z23, .mat-mdc-elevation-specific.mat-elevation-z23 {
  box-shadow: var(--mat-app-elevation-shadow-level-23, 0px 11px 14px -7px --mat-sys-shadow, 0px 23px 36px 3px --mat-sys-shadow, 0px 9px 44px 8px --mat-sys-shadow);
}

.mat-elevation-z24, .mat-mdc-elevation-specific.mat-elevation-z24 {
  box-shadow: var(--mat-app-elevation-shadow-level-24, 0px 11px 15px -7px --mat-sys-shadow, 0px 24px 38px 3px --mat-sys-shadow, 0px 9px 46px 8px --mat-sys-shadow);
}

html {
  --mat-app-background-color: #fafafa;
  --mat-app-text-color: rgba(0, 0, 0, 0.87);
  --mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  --mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-label-text-color: #3f51b5;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}

.mat-accent {
  --mat-option-selected-state-label-text-color: #ff4081;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}

.mat-warn {
  --mat-option-selected-state-label-text-color: #f44336;
  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}

html {
  --mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-pseudo-checkbox-full-selected-icon-color: #ff4081;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ff4081;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

.mat-primary {
  --mat-pseudo-checkbox-full-selected-icon-color: #3f51b5;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #3f51b5;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

.mat-accent {
  --mat-pseudo-checkbox-full-selected-icon-color: #ff4081;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #ff4081;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

.mat-warn {
  --mat-pseudo-checkbox-full-selected-icon-color: #f44336;
  --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f44336;
  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

html {
  --mat-option-label-text-font: Roboto, sans-serif;
  --mat-option-label-text-line-height: 24px;
  --mat-option-label-text-size: 16px;
  --mat-option-label-text-tracking: 0.03125em;
  --mat-option-label-text-weight: 400;
  --mat-optgroup-label-text-font: Roboto, sans-serif;
  --mat-optgroup-label-text-line-height: 24px;
  --mat-optgroup-label-text-size: 16px;
  --mat-optgroup-label-text-tracking: 0.03125em;
  --mat-optgroup-label-text-weight: 400;
  --mat-card-elevated-container-shape: 4px;
  --mat-card-outlined-container-shape: 4px;
  --mat-card-filled-container-shape: 4px;
  --mat-card-outlined-outline-width: 1px;
  --mat-card-elevated-container-color: white;
  --mat-card-elevated-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-container-color: white;
  --mat-card-outlined-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
  --mat-card-filled-container-color: white;
  --mat-card-filled-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-title-text-font: Roboto, sans-serif;
  --mat-card-title-text-line-height: 32px;
  --mat-card-title-text-size: 20px;
  --mat-card-title-text-tracking: 0.0125em;
  --mat-card-title-text-weight: 500;
  --mat-card-subtitle-text-font: Roboto, sans-serif;
  --mat-card-subtitle-text-line-height: 22px;
  --mat-card-subtitle-text-size: 14px;
  --mat-card-subtitle-text-tracking: 0.0071428571em;
  --mat-card-subtitle-text-weight: 500;
  --mat-progress-bar-active-indicator-height: 4px;
  --mat-progress-bar-track-height: 4px;
  --mat-progress-bar-track-shape: 0;
}

.mat-mdc-progress-bar {
  --mat-progress-bar-active-indicator-color: #3f51b5;
  --mat-progress-bar-track-color: rgba(63, 81, 181, 0.25);
}
.mat-mdc-progress-bar.mat-accent {
  --mat-progress-bar-active-indicator-color: #ff4081;
  --mat-progress-bar-track-color: rgba(255, 64, 129, 0.25);
}
.mat-mdc-progress-bar.mat-warn {
  --mat-progress-bar-active-indicator-color: #f44336;
  --mat-progress-bar-track-color: rgba(244, 67, 54, 0.25);
}

html {
  --mat-tooltip-container-shape: 4px;
  --mat-tooltip-supporting-text-line-height: 16px;
  --mat-tooltip-container-color: #424242;
  --mat-tooltip-supporting-text-color: white;
  --mat-tooltip-supporting-text-font: Roboto, sans-serif;
  --mat-tooltip-supporting-text-size: 12px;
  --mat-tooltip-supporting-text-weight: 400;
  --mat-tooltip-supporting-text-tracking: 0.0333333333em;
  --mat-form-field-filled-active-indicator-height: 1px;
  --mat-form-field-filled-focus-active-indicator-height: 2px;
  --mat-form-field-filled-container-shape: 4px;
  --mat-form-field-outlined-outline-width: 1px;
  --mat-form-field-outlined-focus-outline-width: 2px;
  --mat-form-field-outlined-container-shape: 4px;
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #3f51b5 87%, transparent);
  --mat-form-field-filled-caret-color: #3f51b5;
  --mat-form-field-filled-focus-active-indicator-color: #3f51b5;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #3f51b5 87%, transparent);
  --mat-form-field-outlined-caret-color: #3f51b5;
  --mat-form-field-outlined-focus-outline-color: #3f51b5;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #3f51b5 87%, transparent);
  --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-error-text-color: #f44336;
  --mat-form-field-select-option-text-color: inherit;
  --mat-form-field-select-disabled-option-text-color: GrayText;
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-hover-state-layer-opacity: 0.04;
  --mat-form-field-focus-state-layer-opacity: 0.12;
  --mat-form-field-filled-container-color: #f6f6f6;
  --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-error-hover-label-text-color: #f44336;
  --mat-form-field-filled-error-focus-label-text-color: #f44336;
  --mat-form-field-filled-error-label-text-color: #f44336;
  --mat-form-field-filled-error-caret-color: #f44336;
  --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-filled-error-active-indicator-color: #f44336;
  --mat-form-field-filled-error-focus-active-indicator-color: #f44336;
  --mat-form-field-filled-error-hover-active-indicator-color: #f44336;
  --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
  --mat-form-field-outlined-error-caret-color: #f44336;
  --mat-form-field-outlined-error-focus-label-text-color: #f44336;
  --mat-form-field-outlined-error-label-text-color: #f44336;
  --mat-form-field-outlined-error-hover-label-text-color: #f44336;
  --mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-outlined-error-focus-outline-color: #f44336;
  --mat-form-field-outlined-error-hover-outline-color: #f44336;
  --mat-form-field-outlined-error-outline-color: #f44336;
}

.mat-mdc-form-field.mat-accent {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #ff4081 87%, transparent);
  --mat-form-field-filled-caret-color: #ff4081;
  --mat-form-field-filled-focus-active-indicator-color: #ff4081;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #ff4081 87%, transparent);
  --mat-form-field-outlined-caret-color: #ff4081;
  --mat-form-field-outlined-focus-outline-color: #ff4081;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #ff4081 87%, transparent);
}

.mat-mdc-form-field.mat-warn {
  --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f44336 87%, transparent);
  --mat-form-field-filled-caret-color: #f44336;
  --mat-form-field-filled-focus-active-indicator-color: #f44336;
  --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f44336 87%, transparent);
  --mat-form-field-outlined-caret-color: #f44336;
  --mat-form-field-outlined-focus-outline-color: #f44336;
  --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f44336 87%, transparent);
}

html {
  --mat-form-field-container-height: 56px;
  --mat-form-field-filled-label-display: block;
  --mat-form-field-container-vertical-padding: 16px;
  --mat-form-field-filled-with-label-container-padding-top: 24px;
  --mat-form-field-filled-with-label-container-padding-bottom: 8px;
  --mat-form-field-container-text-font: Roboto, sans-serif;
  --mat-form-field-container-text-line-height: 24px;
  --mat-form-field-container-text-size: 16px;
  --mat-form-field-container-text-tracking: 0.03125em;
  --mat-form-field-container-text-weight: 400;
  --mat-form-field-outlined-label-text-populated-size: 16px;
  --mat-form-field-subscript-text-font: Roboto, sans-serif;
  --mat-form-field-subscript-text-line-height: 20px;
  --mat-form-field-subscript-text-size: 12px;
  --mat-form-field-subscript-text-tracking: 0.0333333333em;
  --mat-form-field-subscript-text-weight: 400;
  --mat-form-field-filled-label-text-font: Roboto, sans-serif;
  --mat-form-field-filled-label-text-size: 16px;
  --mat-form-field-filled-label-text-tracking: 0.03125em;
  --mat-form-field-filled-label-text-weight: 400;
  --mat-form-field-outlined-label-text-font: Roboto, sans-serif;
  --mat-form-field-outlined-label-text-size: 16px;
  --mat-form-field-outlined-label-text-tracking: 0.03125em;
  --mat-form-field-outlined-label-text-weight: 400;
  --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #3f51b5;
  --mat-select-invalid-arrow-color: #f44336;
}

.mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #ff4081;
  --mat-select-invalid-arrow-color: #f44336;
}

.mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: white;
  --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
  --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
  --mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
  --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-select-focused-arrow-color: #f44336;
  --mat-select-invalid-arrow-color: #f44336;
}

html {
  --mat-select-arrow-transform: translateY(-8px);
  --mat-select-trigger-text-font: Roboto, sans-serif;
  --mat-select-trigger-text-line-height: 24px;
  --mat-select-trigger-text-size: 16px;
  --mat-select-trigger-text-tracking: 0.03125em;
  --mat-select-trigger-text-weight: 400;
  --mat-autocomplete-container-shape: 4px;
  --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-autocomplete-background-color: white;
  --mat-dialog-container-shape: 4px;
  --mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-dialog-container-max-width: 80vw;
  --mat-dialog-container-small-max-width: 80vw;
  --mat-dialog-container-min-width: 0;
  --mat-dialog-actions-alignment: start;
  --mat-dialog-actions-padding: 8px;
  --mat-dialog-content-padding: 20px 24px;
  --mat-dialog-with-actions-content-padding: 20px 24px;
  --mat-dialog-headline-padding: 0 24px 9px;
  --mat-dialog-container-color: white;
  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-dialog-subhead-font: Roboto, sans-serif;
  --mat-dialog-subhead-line-height: 32px;
  --mat-dialog-subhead-size: 20px;
  --mat-dialog-subhead-weight: 500;
  --mat-dialog-subhead-tracking: 0.0125em;
  --mat-dialog-supporting-text-font: Roboto, sans-serif;
  --mat-dialog-supporting-text-line-height: 24px;
  --mat-dialog-supporting-text-size: 16px;
  --mat-dialog-supporting-text-weight: 400;
  --mat-dialog-supporting-text-tracking: 0.03125em;
}

.mat-mdc-standard-chip {
  --mat-chip-container-shape-radius: 16px;
  --mat-chip-disabled-container-opacity: 0.4;
  --mat-chip-disabled-outline-color: transparent;
  --mat-chip-flat-selected-outline-width: 0;
  --mat-chip-focus-outline-color: transparent;
  --mat-chip-hover-state-layer-opacity: 0.04;
  --mat-chip-outline-color: transparent;
  --mat-chip-outline-width: 0;
  --mat-chip-selected-hover-state-layer-opacity: 0.04;
  --mat-chip-selected-trailing-action-state-layer-color: transparent;
  --mat-chip-trailing-action-focus-opacity: 1;
  --mat-chip-trailing-action-focus-state-layer-opacity: 0;
  --mat-chip-trailing-action-hover-state-layer-opacity: 0;
  --mat-chip-trailing-action-opacity: 0.54;
  --mat-chip-trailing-action-state-layer-color: transparent;
  --mat-chip-with-avatar-avatar-shape-radius: 14px;
  --mat-chip-with-avatar-avatar-size: 28px;
  --mat-chip-with-avatar-disabled-avatar-opacity: 1;
  --mat-chip-with-icon-disabled-icon-opacity: 1;
  --mat-chip-with-icon-icon-size: 18px;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;
  --mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: #3f51b5;
  --mat-chip-elevated-disabled-container-color: #3f51b5;
  --mat-chip-elevated-selected-container-color: #3f51b5;
  --mat-chip-flat-disabled-selected-container-color: #3f51b5;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: #ff4081;
  --mat-chip-elevated-disabled-container-color: #ff4081;
  --mat-chip-elevated-selected-container-color: #ff4081;
  --mat-chip-flat-disabled-selected-container-color: #ff4081;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mat-chip-disabled-label-text-color: white;
  --mat-chip-elevated-container-color: #f44336;
  --mat-chip-elevated-disabled-container-color: #f44336;
  --mat-chip-elevated-selected-container-color: #f44336;
  --mat-chip-flat-disabled-selected-container-color: #f44336;
  --mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-focus-state-layer-opacity: 0.12;
  --mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-chip-label-text-color: white;
  --mat-chip-selected-disabled-trailing-icon-color: white;
  --mat-chip-selected-focus-state-layer-color: 0.12;
  --mat-chip-selected-focus-state-layer-opacity: 0.12;
  --mat-chip-selected-hover-state-layer-color: 0.04;
  --mat-chip-selected-label-text-color: white;
  --mat-chip-selected-trailing-icon-color: white;
  --mat-chip-with-icon-disabled-icon-color: white;
  --mat-chip-with-icon-icon-color: white;
  --mat-chip-with-icon-selected-icon-color: white;
  --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mat-chip-with-trailing-icon-trailing-icon-color: white;
}

.mat-mdc-chip.mat-mdc-standard-chip {
  --mat-chip-container-height: 32px;
}

.mat-mdc-standard-chip {
  --mat-chip-label-text-font: Roboto, sans-serif;
  --mat-chip-label-text-line-height: 20px;
  --mat-chip-label-text-size: 14px;
  --mat-chip-label-text-tracking: 0.0178571429em;
  --mat-chip-label-text-weight: 400;
}

html {
  --mat-slide-toggle-disabled-handle-opacity: 0.38;
  --mat-slide-toggle-disabled-selected-handle-opacity: 0.38;
  --mat-slide-toggle-disabled-selected-icon-opacity: 0.38;
  --mat-slide-toggle-disabled-track-opacity: 0.12;
  --mat-slide-toggle-disabled-unselected-handle-opacity: 0.38;
  --mat-slide-toggle-disabled-unselected-icon-opacity: 0.38;
  --mat-slide-toggle-disabled-unselected-track-outline-color: transparent;
  --mat-slide-toggle-disabled-unselected-track-outline-width: 1px;
  --mat-slide-toggle-handle-height: 20px;
  --mat-slide-toggle-handle-shape: 10px;
  --mat-slide-toggle-handle-width: 20px;
  --mat-slide-toggle-hidden-track-opacity: 1;
  --mat-slide-toggle-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  --mat-slide-toggle-pressed-handle-size: 20px;
  --mat-slide-toggle-selected-focus-state-layer-opacity: 0.12;
  --mat-slide-toggle-selected-handle-horizontal-margin: 0;
  --mat-slide-toggle-selected-handle-size: 20px;
  --mat-slide-toggle-selected-hover-state-layer-opacity: 0.04;
  --mat-slide-toggle-selected-icon-size: 18px;
  --mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0;
  --mat-slide-toggle-selected-pressed-state-layer-opacity: 0.12;
  --mat-slide-toggle-selected-track-outline-color: transparent;
  --mat-slide-toggle-selected-track-outline-width: 1px;
  --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0;
  --mat-slide-toggle-track-height: 14px;
  --mat-slide-toggle-track-outline-color: transparent;
  --mat-slide-toggle-track-outline-width: 1px;
  --mat-slide-toggle-track-shape: 7px;
  --mat-slide-toggle-track-width: 36px;
  --mat-slide-toggle-unselected-focus-state-layer-opacity: 0.12;
  --mat-slide-toggle-unselected-handle-horizontal-margin: 0;
  --mat-slide-toggle-unselected-handle-size: 20px;
  --mat-slide-toggle-unselected-hover-state-layer-opacity: 0.12;
  --mat-slide-toggle-unselected-icon-size: 18px;
  --mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0;
  --mat-slide-toggle-unselected-pressed-state-layer-opacity: 0.1;
  --mat-slide-toggle-unselected-with-icon-handle-horizontal-margin: 0;
  --mat-slide-toggle-visible-track-opacity: 1;
  --mat-slide-toggle-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  --mat-slide-toggle-with-icon-handle-size: 20px;
  --mat-slide-toggle-touch-target-size: 48px;
  --mat-slide-toggle-selected-icon-color: white;
  --mat-slide-toggle-disabled-selected-icon-color: white;
  --mat-slide-toggle-selected-focus-state-layer-color: #3f51b5;
  --mat-slide-toggle-selected-handle-color: #3f51b5;
  --mat-slide-toggle-selected-hover-state-layer-color: #3f51b5;
  --mat-slide-toggle-selected-pressed-state-layer-color: #3f51b5;
  --mat-slide-toggle-selected-focus-handle-color: #3f51b5;
  --mat-slide-toggle-selected-hover-handle-color: #3f51b5;
  --mat-slide-toggle-selected-pressed-handle-color: #3f51b5;
  --mat-slide-toggle-selected-focus-track-color: #7986cb;
  --mat-slide-toggle-selected-hover-track-color: #7986cb;
  --mat-slide-toggle-selected-pressed-track-color: #7986cb;
  --mat-slide-toggle-selected-track-color: #7986cb;
  --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-slide-toggle-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-handle-surface-color: white;
  --mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-handle-color: #424242;
  --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-icon-color: #f6f6f6;
  --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
  --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-handle-color: #424242;
  --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
  --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}

.mat-mdc-slide-toggle.mat-accent {
  --mat-slide-toggle-selected-icon-color: white;
  --mat-slide-toggle-disabled-selected-icon-color: white;
  --mat-slide-toggle-selected-focus-state-layer-color: #ff4081;
  --mat-slide-toggle-selected-handle-color: #ff4081;
  --mat-slide-toggle-selected-hover-state-layer-color: #ff4081;
  --mat-slide-toggle-selected-pressed-state-layer-color: #ff4081;
  --mat-slide-toggle-selected-focus-handle-color: #ff4081;
  --mat-slide-toggle-selected-hover-handle-color: #ff4081;
  --mat-slide-toggle-selected-pressed-handle-color: #ff4081;
  --mat-slide-toggle-selected-focus-track-color: #f06292;
  --mat-slide-toggle-selected-hover-track-color: #f06292;
  --mat-slide-toggle-selected-pressed-track-color: #f06292;
  --mat-slide-toggle-selected-track-color: #f06292;
}
.mat-mdc-slide-toggle.mat-warn {
  --mat-slide-toggle-selected-icon-color: white;
  --mat-slide-toggle-disabled-selected-icon-color: white;
  --mat-slide-toggle-selected-focus-state-layer-color: #f44336;
  --mat-slide-toggle-selected-handle-color: #f44336;
  --mat-slide-toggle-selected-hover-state-layer-color: #f44336;
  --mat-slide-toggle-selected-pressed-state-layer-color: #f44336;
  --mat-slide-toggle-selected-focus-handle-color: #f44336;
  --mat-slide-toggle-selected-hover-handle-color: #f44336;
  --mat-slide-toggle-selected-pressed-handle-color: #f44336;
  --mat-slide-toggle-selected-focus-track-color: #e57373;
  --mat-slide-toggle-selected-hover-track-color: #e57373;
  --mat-slide-toggle-selected-pressed-track-color: #e57373;
  --mat-slide-toggle-selected-track-color: #e57373;
}

html {
  --mat-slide-toggle-state-layer-size: 40px;
  --mat-slide-toggle-touch-target-display: block;
  --mat-slide-toggle-label-text-font: Roboto, sans-serif;
  --mat-slide-toggle-label-text-line-height: 20px;
  --mat-slide-toggle-label-text-size: 14px;
  --mat-slide-toggle-label-text-tracking: 0.0178571429em;
  --mat-slide-toggle-label-text-weight: 400;
}
html .mat-mdc-slide-toggle {
  --mat-slide-toggle-label-text-font: Roboto, sans-serif;
  --mat-slide-toggle-label-text-line-height: 20px;
  --mat-slide-toggle-label-text-size: 14px;
  --mat-slide-toggle-label-text-tracking: 0.0178571429em;
  --mat-slide-toggle-label-text-weight: 400;
}

html {
  --mat-radio-disabled-selected-icon-opacity: 0.38;
  --mat-radio-disabled-unselected-icon-opacity: 0.38;
  --mat-radio-state-layer-size: 40px;
  --mat-radio-touch-target-size: 48px;
}

.mat-mdc-radio-button.mat-primary {
  --mat-radio-checked-ripple-color: #3f51b5;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #3f51b5;
  --mat-radio-selected-hover-icon-color: #3f51b5;
  --mat-radio-selected-icon-color: #3f51b5;
  --mat-radio-selected-pressed-icon-color: #3f51b5;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-radio-button.mat-accent {
  --mat-radio-checked-ripple-color: #ff4081;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ff4081;
  --mat-radio-selected-hover-icon-color: #ff4081;
  --mat-radio-selected-icon-color: #ff4081;
  --mat-radio-selected-pressed-icon-color: #ff4081;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-radio-button.mat-warn {
  --mat-radio-checked-ripple-color: #f44336;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f44336;
  --mat-radio-selected-hover-icon-color: #f44336;
  --mat-radio-selected-icon-color: #f44336;
  --mat-radio-selected-pressed-icon-color: #f44336;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-radio-state-layer-size: 40px;
  --mat-radio-touch-target-display: block;
  --mat-radio-label-text-font: Roboto, sans-serif;
  --mat-radio-label-text-line-height: 20px;
  --mat-radio-label-text-size: 14px;
  --mat-radio-label-text-tracking: 0.0178571429em;
  --mat-radio-label-text-weight: 400;
  --mat-slider-active-track-height: 6px;
  --mat-slider-active-track-shape: 9999px;
  --mat-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slider-handle-height: 20px;
  --mat-slider-handle-shape: 50%;
  --mat-slider-handle-width: 20px;
  --mat-slider-inactive-track-height: 4px;
  --mat-slider-inactive-track-shape: 9999px;
  --mat-slider-value-indicator-border-radius: 4px;
  --mat-slider-value-indicator-caret-display: block;
  --mat-slider-value-indicator-container-transform: translateX(-50%);
  --mat-slider-value-indicator-height: 32px;
  --mat-slider-value-indicator-padding: 0 12px;
  --mat-slider-value-indicator-text-transform: none;
  --mat-slider-value-indicator-width: auto;
  --mat-slider-with-overlap-handle-outline-width: 1px;
  --mat-slider-with-tick-marks-active-container-opacity: 0.6;
  --mat-slider-with-tick-marks-container-shape: 50%;
  --mat-slider-with-tick-marks-container-size: 2px;
  --mat-slider-with-tick-marks-inactive-container-opacity: 0.6;
  --mat-slider-value-indicator-transform-origin: bottom;
  --mat-slider-active-track-color: #3f51b5;
  --mat-slider-focus-handle-color: #3f51b5;
  --mat-slider-handle-color: #3f51b5;
  --mat-slider-hover-handle-color: #3f51b5;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #3f51b5 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #3f51b5 4%, transparent);
  --mat-slider-inactive-track-color: #3f51b5;
  --mat-slider-ripple-color: #3f51b5;
  --mat-slider-with-tick-marks-active-container-color: white;
  --mat-slider-with-tick-marks-inactive-container-color: #3f51b5;
  --mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
  --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
  --mat-slider-label-container-color: #424242;
  --mat-slider-label-label-text-color: white;
  --mat-slider-value-indicator-opacity: 1;
  --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
  --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}

.mat-accent {
  --mat-slider-active-track-color: #ff4081;
  --mat-slider-focus-handle-color: #ff4081;
  --mat-slider-handle-color: #ff4081;
  --mat-slider-hover-handle-color: #ff4081;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #ff4081 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #ff4081 4%, transparent);
  --mat-slider-inactive-track-color: #ff4081;
  --mat-slider-ripple-color: #ff4081;
  --mat-slider-with-tick-marks-active-container-color: white;
  --mat-slider-with-tick-marks-inactive-container-color: #ff4081;
}

.mat-warn {
  --mat-slider-active-track-color: #f44336;
  --mat-slider-focus-handle-color: #f44336;
  --mat-slider-handle-color: #f44336;
  --mat-slider-hover-handle-color: #f44336;
  --mat-slider-focus-state-layer-color: color-mix(in srgb, #f44336 12%, transparent);
  --mat-slider-hover-state-layer-color: color-mix(in srgb, #f44336 4%, transparent);
  --mat-slider-inactive-track-color: #f44336;
  --mat-slider-ripple-color: #f44336;
  --mat-slider-with-tick-marks-active-container-color: white;
  --mat-slider-with-tick-marks-inactive-container-color: #f44336;
}

html {
  --mat-slider-label-label-text-font: Roboto, sans-serif;
  --mat-slider-label-label-text-size: 14px;
  --mat-slider-label-label-text-line-height: 22px;
  --mat-slider-label-label-text-tracking: 0.0071428571em;
  --mat-slider-label-label-text-weight: 500;
  --mat-menu-container-shape: 4px;
  --mat-menu-divider-bottom-spacing: 0;
  --mat-menu-divider-top-spacing: 0;
  --mat-menu-item-spacing: 16px;
  --mat-menu-item-icon-size: 24px;
  --mat-menu-item-leading-spacing: 16px;
  --mat-menu-item-trailing-spacing: 16px;
  --mat-menu-item-with-icon-leading-spacing: 16px;
  --mat-menu-item-with-icon-trailing-spacing: 16px;
  --mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
  --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-menu-container-color: white;
  --mat-menu-divider-color: rgba(0, 0, 0, 0.12);
  --mat-menu-item-label-text-font: Roboto, sans-serif;
  --mat-menu-item-label-text-size: 16px;
  --mat-menu-item-label-text-tracking: 0.03125em;
  --mat-menu-item-label-text-line-height: 24px;
  --mat-menu-item-label-text-weight: 400;
  --mat-list-active-indicator-color: transparent;
  --mat-list-active-indicator-shape: 4px;
  --mat-list-list-item-container-shape: 0;
  --mat-list-list-item-leading-avatar-shape: 50%;
  --mat-list-list-item-container-color: transparent;
  --mat-list-list-item-selected-container-color: transparent;
  --mat-list-list-item-leading-avatar-color: transparent;
  --mat-list-list-item-leading-icon-size: 24px;
  --mat-list-list-item-leading-avatar-size: 40px;
  --mat-list-list-item-trailing-icon-size: 24px;
  --mat-list-list-item-disabled-state-layer-color: transparent;
  --mat-list-list-item-disabled-state-layer-opacity: 0;
  --mat-list-list-item-disabled-label-text-opacity: 0.38;
  --mat-list-list-item-disabled-leading-icon-opacity: 0.38;
  --mat-list-list-item-disabled-trailing-icon-opacity: 0.38;
  --mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-hover-state-layer-opacity: 0.04;
  --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
  --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-list-list-item-focus-state-layer-opacity: 0.12;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mat-radio-checked-ripple-color: #3f51b5;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #3f51b5;
  --mat-radio-selected-hover-icon-color: #3f51b5;
  --mat-radio-selected-icon-color: #3f51b5;
  --mat-radio-selected-pressed-icon-color: #3f51b5;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}

.mat-accent .mdc-list-item__start,
.mat-accent .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #ff4081;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #ff4081;
  --mat-radio-selected-hover-icon-color: #ff4081;
  --mat-radio-selected-icon-color: #ff4081;
  --mat-radio-selected-pressed-icon-color: #ff4081;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}

.mat-warn .mdc-list-item__start,
.mat-warn .mdc-list-item__end {
  --mat-radio-checked-ripple-color: #f44336;
  --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
  --mat-radio-selected-focus-icon-color: #f44336;
  --mat-radio-selected-hover-icon-color: #f44336;
  --mat-radio-selected-icon-color: #f44336;
  --mat-radio-selected-pressed-icon-color: #f44336;
  --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-list-option {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-icon-color: #3f51b5;
  --mat-checkbox-selected-hover-icon-color: #3f51b5;
  --mat-checkbox-selected-icon-color: #3f51b5;
  --mat-checkbox-selected-pressed-icon-color: #3f51b5;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #3f51b5;
  --mat-checkbox-selected-hover-state-layer-color: #3f51b5;
  --mat-checkbox-selected-pressed-state-layer-color: #3f51b5;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-list-option.mat-accent {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-icon-color: #ff4081;
  --mat-checkbox-selected-hover-icon-color: #ff4081;
  --mat-checkbox-selected-icon-color: #ff4081;
  --mat-checkbox-selected-pressed-icon-color: #ff4081;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ff4081;
  --mat-checkbox-selected-hover-state-layer-color: #ff4081;
  --mat-checkbox-selected-pressed-state-layer-color: #ff4081;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-list-option.mat-warn {
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-icon-color: #f44336;
  --mat-checkbox-selected-hover-icon-color: #f44336;
  --mat-checkbox-selected-icon-color: #f44336;
  --mat-checkbox-selected-pressed-icon-color: #f44336;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f44336;
  --mat-checkbox-selected-hover-state-layer-color: #f44336;
  --mat-checkbox-selected-pressed-state-layer-color: #f44336;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
  color: #3f51b5;
}

.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}

html {
  --mat-list-list-item-leading-icon-start-space: 16px;
  --mat-list-list-item-leading-icon-end-space: 32px;
  --mat-list-list-item-one-line-container-height: 48px;
  --mat-list-list-item-two-line-container-height: 64px;
  --mat-list-list-item-three-line-container-height: 88px;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mat-radio-state-layer-size: 40px;
  --mat-radio-touch-target-display: block;
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
  height: 56px;
}
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
  height: 72px;
}

html {
  --mat-list-list-item-label-text-font: Roboto, sans-serif;
  --mat-list-list-item-label-text-line-height: 24px;
  --mat-list-list-item-label-text-size: 16px;
  --mat-list-list-item-label-text-tracking: 0.03125em;
  --mat-list-list-item-label-text-weight: 400;
  --mat-list-list-item-supporting-text-font: Roboto, sans-serif;
  --mat-list-list-item-supporting-text-line-height: 20px;
  --mat-list-list-item-supporting-text-size: 14px;
  --mat-list-list-item-supporting-text-tracking: 0.0178571429em;
  --mat-list-list-item-supporting-text-weight: 400;
  --mat-list-list-item-trailing-supporting-text-font: Roboto, sans-serif;
  --mat-list-list-item-trailing-supporting-text-line-height: 20px;
  --mat-list-list-item-trailing-supporting-text-size: 12px;
  --mat-list-list-item-trailing-supporting-text-tracking: 0.0333333333em;
  --mat-list-list-item-trailing-supporting-text-weight: 400;
}

.mdc-list-group__subheader {
  font: 400 16px / 28px Roboto, sans-serif;
  letter-spacing: 0.009375em;
}

html {
  --mat-paginator-page-size-select-width: 84px;
  --mat-paginator-page-size-select-touch-target-height: 48px;
  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-paginator-container-background-color: white;
  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
  --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-paginator-container-size: 56px;
  --mat-paginator-form-field-container-height: 40px;
  --mat-paginator-form-field-container-vertical-padding: 8px;
  --mat-paginator-touch-target-display: block;
  --mat-paginator-container-text-font: Roboto, sans-serif;
  --mat-paginator-container-text-line-height: 20px;
  --mat-paginator-container-text-size: 12px;
  --mat-paginator-container-text-tracking: 0.0333333333em;
  --mat-paginator-container-text-weight: 400;
  --mat-paginator-select-trigger-text-size: 12px;
  --mat-tab-container-height: 48px;
  --mat-tab-divider-color: transparent;
  --mat-tab-divider-height: 0;
  --mat-tab-active-indicator-height: 2px;
  --mat-tab-active-indicator-shape: 0;
}

.mat-mdc-tab-group,
.mat-mdc-tab-nav-bar {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #3f51b5;
  --mat-tab-active-ripple-color: #3f51b5;
  --mat-tab-inactive-ripple-color: #3f51b5;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #3f51b5;
  --mat-tab-active-hover-label-text-color: #3f51b5;
  --mat-tab-active-focus-indicator-color: #3f51b5;
  --mat-tab-active-hover-indicator-color: #3f51b5;
  --mat-tab-active-indicator-color: #3f51b5;
}
.mat-mdc-tab-group.mat-accent,
.mat-mdc-tab-nav-bar.mat-accent {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #ff4081;
  --mat-tab-active-ripple-color: #ff4081;
  --mat-tab-inactive-ripple-color: #ff4081;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #ff4081;
  --mat-tab-active-hover-label-text-color: #ff4081;
  --mat-tab-active-focus-indicator-color: #ff4081;
  --mat-tab-active-hover-indicator-color: #ff4081;
  --mat-tab-active-indicator-color: #ff4081;
}
.mat-mdc-tab-group.mat-warn,
.mat-mdc-tab-nav-bar.mat-warn {
  --mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
  --mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
  --mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-label-text-color: #f44336;
  --mat-tab-active-ripple-color: #f44336;
  --mat-tab-inactive-ripple-color: #f44336;
  --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-tab-active-focus-label-text-color: #f44336;
  --mat-tab-active-hover-label-text-color: #f44336;
  --mat-tab-active-focus-indicator-color: #f44336;
  --mat-tab-active-hover-indicator-color: #f44336;
  --mat-tab-active-indicator-color: #f44336;
}
.mat-mdc-tab-group.mat-background-primary,
.mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-background-color: #3f51b5;
  --mat-tab-foreground-color: white;
}
.mat-mdc-tab-group.mat-background-accent,
.mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-background-color: #ff4081;
  --mat-tab-foreground-color: white;
}
.mat-mdc-tab-group.mat-background-warn,
.mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-background-color: #f44336;
  --mat-tab-foreground-color: white;
}

.mat-mdc-tab-header {
  --mat-tab-container-height: 48px;
  --mat-tab-label-text-font: Roboto, sans-serif;
  --mat-tab-label-text-size: 14px;
  --mat-tab-label-text-tracking: 0.0892857143em;
  --mat-tab-label-text-line-height: 36px;
  --mat-tab-label-text-weight: 500;
}

html {
  --mat-checkbox-disabled-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-state-layer-opacity: 0.12;
  --mat-checkbox-selected-hover-state-layer-opacity: 0.04;
  --mat-checkbox-selected-pressed-state-layer-opacity: 0.12;
  --mat-checkbox-unselected-focus-state-layer-opacity: 0.12;
  --mat-checkbox-unselected-hover-state-layer-opacity: 0.04;
  --mat-checkbox-unselected-pressed-state-layer-opacity: 0.12;
  --mat-checkbox-touch-target-size: 48px;
  --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-icon-color: #ff4081;
  --mat-checkbox-selected-hover-icon-color: #ff4081;
  --mat-checkbox-selected-icon-color: #ff4081;
  --mat-checkbox-selected-pressed-icon-color: #ff4081;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #ff4081;
  --mat-checkbox-selected-hover-state-layer-color: #ff4081;
  --mat-checkbox-selected-pressed-state-layer-color: #ff4081;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-checkbox.mat-primary {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-icon-color: #3f51b5;
  --mat-checkbox-selected-hover-icon-color: #3f51b5;
  --mat-checkbox-selected-icon-color: #3f51b5;
  --mat-checkbox-selected-pressed-icon-color: #3f51b5;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #3f51b5;
  --mat-checkbox-selected-hover-state-layer-color: #3f51b5;
  --mat-checkbox-selected-pressed-state-layer-color: #3f51b5;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-checkbox.mat-warn {
  --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-checkbox-selected-checkmark-color: white;
  --mat-checkbox-selected-focus-icon-color: #f44336;
  --mat-checkbox-selected-hover-icon-color: #f44336;
  --mat-checkbox-selected-icon-color: #f44336;
  --mat-checkbox-selected-pressed-icon-color: #f44336;
  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
  --mat-checkbox-selected-focus-state-layer-color: #f44336;
  --mat-checkbox-selected-hover-state-layer-color: #f44336;
  --mat-checkbox-selected-pressed-state-layer-color: #f44336;
  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}

html {
  --mat-checkbox-touch-target-display: block;
  --mat-checkbox-state-layer-size: 40px;
  --mat-checkbox-label-text-font: Roboto, sans-serif;
  --mat-checkbox-label-text-line-height: 20px;
  --mat-checkbox-label-text-size: 14px;
  --mat-checkbox-label-text-tracking: 0.0178571429em;
  --mat-checkbox-label-text-weight: 400;
  --mat-button-filled-container-shape: 4px;
  --mat-button-filled-horizontal-padding: 16px;
  --mat-button-filled-icon-offset: -4px;
  --mat-button-filled-icon-spacing: 8px;
  --mat-button-filled-touch-target-size: 48px;
  --mat-button-outlined-container-shape: 4px;
  --mat-button-outlined-horizontal-padding: 15px;
  --mat-button-outlined-icon-offset: -4px;
  --mat-button-outlined-icon-spacing: 8px;
  --mat-button-outlined-keep-touch-target: false;
  --mat-button-outlined-outline-width: 1px;
  --mat-button-outlined-touch-target-size: 48px;
  --mat-button-protected-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-container-shape: 4px;
  --mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-horizontal-padding: 16px;
  --mat-button-protected-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-button-protected-icon-offset: -4px;
  --mat-button-protected-icon-spacing: 8px;
  --mat-button-protected-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-button-protected-touch-target-size: 48px;
  --mat-button-text-container-shape: 4px;
  --mat-button-text-horizontal-padding: 8px;
  --mat-button-text-icon-offset: 0;
  --mat-button-text-icon-spacing: 8px;
  --mat-button-text-with-icon-horizontal-padding: 8px;
  --mat-button-text-touch-target-size: 48px;
  --mat-button-tonal-container-shape: 4px;
  --mat-button-tonal-horizontal-padding: 16px;
  --mat-button-tonal-icon-offset: -4px;
  --mat-button-tonal-icon-spacing: 8px;
  --mat-button-tonal-touch-target-size: 48px;
  --mat-button-filled-container-color: white;
  --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-filled-focus-state-layer-opacity: 0.12;
  --mat-button-filled-hover-state-layer-opacity: 0.04;
  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-filled-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-outlined-focus-state-layer-opacity: 0.12;
  --mat-button-outlined-hover-state-layer-opacity: 0.04;
  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
  --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-container-color: white;
  --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-protected-focus-state-layer-opacity: 0.12;
  --mat-button-protected-hover-state-layer-opacity: 0.04;
  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-protected-pressed-state-layer-opacity: 0.12;
  --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-text-focus-state-layer-opacity: 0.12;
  --mat-button-text-hover-state-layer-opacity: 0.04;
  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-text-pressed-state-layer-opacity: 0.12;
  --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-container-color: white;
  --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-button-tonal-focus-state-layer-opacity: 0.12;
  --mat-button-tonal-hover-state-layer-opacity: 0.04;
  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
  --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-raised-button.mat-primary,
.mat-mdc-outlined-button.mat-primary,
.mat-tonal-button.mat-primary {
  --mat-button-filled-container-color: #3f51b5;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-label-text-color: #3f51b5;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #3f51b5 12%, transparent);
  --mat-button-outlined-state-layer-color: #3f51b5;
  --mat-button-protected-container-color: #3f51b5;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-label-text-color: #3f51b5;
  --mat-button-text-ripple-color: color-mix(in srgb, #3f51b5 12%, transparent);
  --mat-button-text-state-layer-color: #3f51b5;
  --mat-button-tonal-container-color: #3f51b5;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.mat-mdc-button.mat-accent,
.mat-mdc-unelevated-button.mat-accent,
.mat-mdc-raised-button.mat-accent,
.mat-mdc-outlined-button.mat-accent,
.mat-tonal-button.mat-accent {
  --mat-button-filled-container-color: #ff4081;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-label-text-color: #ff4081;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #ff4081 12%, transparent);
  --mat-button-outlined-state-layer-color: #ff4081;
  --mat-button-protected-container-color: #ff4081;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-label-text-color: #ff4081;
  --mat-button-text-ripple-color: color-mix(in srgb, #ff4081 12%, transparent);
  --mat-button-text-state-layer-color: #ff4081;
  --mat-button-tonal-container-color: #ff4081;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}
.mat-mdc-button.mat-warn,
.mat-mdc-unelevated-button.mat-warn,
.mat-mdc-raised-button.mat-warn,
.mat-mdc-outlined-button.mat-warn,
.mat-tonal-button.mat-warn {
  --mat-button-filled-container-color: #f44336;
  --mat-button-filled-label-text-color: white;
  --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-filled-state-layer-color: white;
  --mat-button-outlined-label-text-color: #f44336;
  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
  --mat-button-outlined-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
  --mat-button-outlined-state-layer-color: #f44336;
  --mat-button-protected-container-color: #f44336;
  --mat-button-protected-label-text-color: white;
  --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-protected-state-layer-color: white;
  --mat-button-text-label-text-color: #f44336;
  --mat-button-text-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
  --mat-button-text-state-layer-color: #f44336;
  --mat-button-tonal-container-color: #f44336;
  --mat-button-tonal-label-text-color: white;
  --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-button-tonal-state-layer-color: white;
}

html {
  --mat-button-filled-container-height: 36px;
  --mat-button-filled-touch-target-display: block;
  --mat-button-outlined-container-height: 36px;
  --mat-button-outlined-touch-target-display: block;
  --mat-button-protected-container-height: 36px;
  --mat-button-protected-touch-target-display: block;
  --mat-button-text-container-height: 36px;
  --mat-button-text-touch-target-display: block;
  --mat-button-tonal-container-height: 36px;
  --mat-button-tonal-touch-target-display: block;
  --mat-button-filled-label-text-font: Roboto, sans-serif;
  --mat-button-filled-label-text-size: 14px;
  --mat-button-filled-label-text-tracking: 0.0892857143em;
  --mat-button-filled-label-text-transform: none;
  --mat-button-filled-label-text-weight: 500;
  --mat-button-outlined-label-text-font: Roboto, sans-serif;
  --mat-button-outlined-label-text-size: 14px;
  --mat-button-outlined-label-text-tracking: 0.0892857143em;
  --mat-button-outlined-label-text-transform: none;
  --mat-button-outlined-label-text-weight: 500;
  --mat-button-protected-label-text-font: Roboto, sans-serif;
  --mat-button-protected-label-text-size: 14px;
  --mat-button-protected-label-text-tracking: 0.0892857143em;
  --mat-button-protected-label-text-transform: none;
  --mat-button-protected-label-text-weight: 500;
  --mat-button-text-label-text-font: Roboto, sans-serif;
  --mat-button-text-label-text-size: 14px;
  --mat-button-text-label-text-tracking: 0.0892857143em;
  --mat-button-text-label-text-transform: none;
  --mat-button-text-label-text-weight: 500;
  --mat-button-tonal-label-text-font: Roboto, sans-serif;
  --mat-button-tonal-label-text-size: 14px;
  --mat-button-tonal-label-text-tracking: 0.0892857143em;
  --mat-button-tonal-label-text-transform: none;
  --mat-button-tonal-label-text-weight: 500;
  --mat-icon-button-icon-size: 24px;
  --mat-icon-button-container-shape: 50%;
  --mat-icon-button-touch-target-size: 48px;
  --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-icon-button-focus-state-layer-opacity: 0.12;
  --mat-icon-button-hover-state-layer-opacity: 0.04;
  --mat-icon-button-icon-color: inherit;
  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-icon-button.mat-primary {
  --mat-icon-button-icon-color: #3f51b5;
  --mat-icon-button-state-layer-color: #3f51b5;
  --mat-icon-button-ripple-color: color-mix(in srgb, #3f51b5 12%, transparent);
}
.mat-mdc-icon-button.mat-accent {
  --mat-icon-button-icon-color: #ff4081;
  --mat-icon-button-state-layer-color: #ff4081;
  --mat-icon-button-ripple-color: color-mix(in srgb, #ff4081 12%, transparent);
}
.mat-mdc-icon-button.mat-warn {
  --mat-icon-button-icon-color: #f44336;
  --mat-icon-button-state-layer-color: #f44336;
  --mat-icon-button-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
}

html {
  --mat-icon-button-touch-target-display: block;
}

.mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 48px;
  --mat-icon-button-state-layer-size: 48px;
  width: var(--mat-icon-button-state-layer-size);
  height: var(--mat-icon-button-state-layer-size);
  padding: 12px;
}

html {
  --mat-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-container-shape: 50%;
  --mat-fab-touch-target-size: 48px;
  --mat-fab-extended-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-container-height: 48px;
  --mat-fab-extended-container-shape: 24px;
  --mat-fab-extended-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-extended-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-fab-small-container-shape: 50%;
  --mat-fab-small-touch-target-size: 48px;
  --mat-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-fab-container-color: white;
  --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-focus-state-layer-opacity: 0.12;
  --mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-hover-state-layer-opacity: 0.04;
  --mat-fab-pressed-state-layer-opacity: 0.12;
  --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-container-color: white;
  --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
  --mat-fab-small-focus-state-layer-opacity: 0.12;
  --mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
  --mat-fab-small-hover-state-layer-opacity: 0.04;
  --mat-fab-small-pressed-state-layer-opacity: 0.12;
  --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-fab.mat-primary, .mat-mdc-mini-fab.mat-primary {
  --mat-fab-container-color: #3f51b5;
  --mat-fab-foreground-color: white;
  --mat-fab-ripple-color: color-mix(in srgb, #3f51b5 12%, transparent);
  --mat-fab-small-container-color: #3f51b5;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.mat-mdc-fab.mat-accent, .mat-mdc-mini-fab.mat-accent {
  --mat-fab-container-color: #ff4081;
  --mat-fab-foreground-color: white;
  --mat-fab-ripple-color: color-mix(in srgb, #ff4081 12%, transparent);
  --mat-fab-small-container-color: #ff4081;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}
.mat-mdc-fab.mat-warn, .mat-mdc-mini-fab.mat-warn {
  --mat-fab-container-color: #f44336;
  --mat-fab-foreground-color: white;
  --mat-fab-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
  --mat-fab-small-container-color: #f44336;
  --mat-fab-small-foreground-color: white;
  --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
  --mat-fab-small-state-layer-color: white;
  --mat-fab-state-layer-color: white;
}

html {
  --mat-fab-small-touch-target-display: block;
  --mat-fab-touch-target-display: block;
  --mat-fab-extended-label-text-font: Roboto, sans-serif;
  --mat-fab-extended-label-text-size: 14px;
  --mat-fab-extended-label-text-tracking: 0.0892857143em;
  --mat-fab-extended-label-text-weight: 500;
  --mat-snack-bar-container-shape: 4px;
  --mat-snack-bar-container-color: #424242;
  --mat-snack-bar-supporting-text-color: white;
  --mat-snack-bar-button-color: #7986cb;
  --mat-snack-bar-supporting-text-font: Roboto, sans-serif;
  --mat-snack-bar-supporting-text-line-height: 20px;
  --mat-snack-bar-supporting-text-size: 14px;
  --mat-snack-bar-supporting-text-weight: 400;
  --mat-table-row-item-outline-width: 1px;
  --mat-table-background-color: white;
  --mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
  --mat-table-header-container-height: 56px;
  --mat-table-footer-container-height: 52px;
  --mat-table-row-item-container-height: 52px;
  --mat-table-header-headline-font: Roboto, sans-serif;
  --mat-table-header-headline-line-height: 22px;
  --mat-table-header-headline-size: 14px;
  --mat-table-header-headline-weight: 500;
  --mat-table-header-headline-tracking: 0.0071428571em;
  --mat-table-row-item-label-text-font: Roboto, sans-serif;
  --mat-table-row-item-label-text-line-height: 20px;
  --mat-table-row-item-label-text-size: 14px;
  --mat-table-row-item-label-text-weight: 400;
  --mat-table-row-item-label-text-tracking: 0.0178571429em;
  --mat-table-footer-supporting-text-font: Roboto, sans-serif;
  --mat-table-footer-supporting-text-line-height: 20px;
  --mat-table-footer-supporting-text-size: 14px;
  --mat-table-footer-supporting-text-weight: 400;
  --mat-table-footer-supporting-text-tracking: 0.0178571429em;
  --mat-progress-spinner-active-indicator-width: 4px;
  --mat-progress-spinner-size: 48px;
  --mat-progress-spinner-active-indicator-color: #3f51b5;
}

.mat-accent {
  --mat-progress-spinner-active-indicator-color: #ff4081;
}

.mat-warn {
  --mat-progress-spinner-active-indicator-color: #f44336;
}

html {
  --mat-badge-container-shape: 50%;
  --mat-badge-container-size: unset;
  --mat-badge-small-size-container-size: unset;
  --mat-badge-large-size-container-size: unset;
  --mat-badge-legacy-container-size: 22px;
  --mat-badge-legacy-small-size-container-size: 16px;
  --mat-badge-legacy-large-size-container-size: 28px;
  --mat-badge-container-offset: -11px 0;
  --mat-badge-small-size-container-offset: -8px 0;
  --mat-badge-large-size-container-offset: -14px 0;
  --mat-badge-container-overlap-offset: -11px;
  --mat-badge-small-size-container-overlap-offset: -8px;
  --mat-badge-large-size-container-overlap-offset: -14px;
  --mat-badge-container-padding: 0;
  --mat-badge-small-size-container-padding: 0;
  --mat-badge-large-size-container-padding: 0;
  --mat-badge-background-color: #3f51b5;
  --mat-badge-text-color: white;
  --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}

.mat-badge-accent {
  --mat-badge-background-color: #ff4081;
  --mat-badge-text-color: white;
}

.mat-badge-warn {
  --mat-badge-background-color: #f44336;
  --mat-badge-text-color: white;
}

html {
  --mat-badge-text-font: Roboto, sans-serif;
  --mat-badge-line-height: 22px;
  --mat-badge-text-size: 12px;
  --mat-badge-text-weight: 600;
  --mat-badge-small-size-text-size: 9px;
  --mat-badge-small-size-line-height: 16px;
  --mat-badge-large-size-text-size: 24px;
  --mat-badge-large-size-line-height: 28px;
  --mat-bottom-sheet-container-shape: 4px;
  --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-bottom-sheet-container-background-color: white;
  --mat-bottom-sheet-container-text-font: Roboto, sans-serif;
  --mat-bottom-sheet-container-text-line-height: 20px;
  --mat-bottom-sheet-container-text-size: 14px;
  --mat-bottom-sheet-container-text-tracking: 0.0178571429em;
  --mat-bottom-sheet-container-text-weight: 400;
  --mat-button-toggle-focus-state-layer-opacity: 0.12;
  --mat-button-toggle-hover-state-layer-opacity: 0.04;
  --mat-button-toggle-legacy-focus-state-layer-opacity: 1;
  --mat-button-toggle-legacy-height: 36px;
  --mat-button-toggle-legacy-shape: 2px;
  --mat-button-toggle-shape: 4px;
  --mat-button-toggle-background-color: white;
  --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-disabled-state-background-color: white;
  --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
  --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-disabled-state-background-color: white;
  --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
  --mat-button-toggle-height: 48px;
  --mat-button-toggle-label-text-font: Roboto, sans-serif;
  --mat-button-toggle-label-text-line-height: 24px;
  --mat-button-toggle-label-text-size: 16px;
  --mat-button-toggle-label-text-tracking: 0.03125em;
  --mat-button-toggle-label-text-weight: 400;
  --mat-button-toggle-legacy-label-text-font: Roboto, sans-serif;
  --mat-button-toggle-legacy-label-text-line-height: 24px;
  --mat-button-toggle-legacy-label-text-size: 16px;
  --mat-button-toggle-legacy-label-text-tracking: 0.03125em;
  --mat-button-toggle-legacy-label-text-weight: 400;
  --mat-datepicker-calendar-container-shape: 4px;
  --mat-datepicker-calendar-container-touch-shape: 4px;
  --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #3f51b5 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #ff4081 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #3f51b5;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #3f51b5 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #3f51b5 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #3f51b5 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #3f51b5;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-datepicker-content.mat-accent, .mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #ff4081 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #ff4081 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #ff4081;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #ff4081 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #ff4081 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #ff4081 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #ff4081;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.mat-datepicker-content.mat-warn, .mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f44336 20%, transparent);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #ff4081 20%, transparent);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #f44336;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f44336 38%, transparent);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f44336 12%, transparent);
  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f44336 4%, transparent);
  --mat-datepicker-toggle-active-state-icon-color: #f44336;
  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-datepicker-calendar-container-background-color: white;
  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-calendar-controls {
  --mat-icon-button-touch-target-display: none;
}
.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  --mat-icon-button-state-layer-size: 40px;
  width: var(--mat-icon-button-state-layer-size);
  height: var(--mat-icon-button-state-layer-size);
  padding: 8px;
}

html {
  --mat-datepicker-calendar-text-font: Roboto, sans-serif;
  --mat-datepicker-calendar-text-size: 13px;
  --mat-datepicker-calendar-body-label-text-size: 14px;
  --mat-datepicker-calendar-body-label-text-weight: 500;
  --mat-datepicker-calendar-period-button-text-size: 14px;
  --mat-datepicker-calendar-period-button-text-weight: 500;
  --mat-datepicker-calendar-header-text-size: 11px;
  --mat-datepicker-calendar-header-text-weight: 400;
  --mat-divider-width: 1px;
  --mat-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-container-shape: 4px;
  --mat-expansion-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mat-expansion-legacy-header-indicator-display: inline-block;
  --mat-expansion-header-indicator-display: none;
  --mat-expansion-container-background-color: white;
  --mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
  --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
  --mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
  --mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
  --mat-expansion-header-collapsed-state-height: 48px;
  --mat-expansion-header-expanded-state-height: 64px;
  --mat-expansion-header-text-font: Roboto, sans-serif;
  --mat-expansion-header-text-size: 14px;
  --mat-expansion-header-text-weight: 500;
  --mat-expansion-header-text-line-height: inherit;
  --mat-expansion-header-text-tracking: inherit;
  --mat-expansion-container-text-font: Roboto, sans-serif;
  --mat-expansion-container-text-line-height: 20px;
  --mat-expansion-container-text-size: 14px;
  --mat-expansion-container-text-tracking: 0.0178571429em;
  --mat-expansion-container-text-weight: 400;
  --mat-grid-list-tile-header-primary-text-size: 14px;
  --mat-grid-list-tile-header-secondary-text-size: 12px;
  --mat-grid-list-tile-footer-primary-text-size: 14px;
  --mat-grid-list-tile-footer-secondary-text-size: 12px;
  --mat-icon-color: inherit;
}

.mat-icon.mat-primary {
  --mat-icon-color: #3f51b5;
}
.mat-icon.mat-accent {
  --mat-icon-color: #ff4081;
}
.mat-icon.mat-warn {
  --mat-icon-color: #f44336;
}

html {
  --mat-sidenav-container-shape: 0;
  --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-width: auto;
  --mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-background-color: white;
  --mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-content-background-color: #fafafa;
  --mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
  --mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
  --mat-stepper-header-focus-state-layer-shape: 0;
  --mat-stepper-header-hover-state-layer-shape: 0;
  --mat-stepper-header-icon-foreground-color: white;
  --mat-stepper-header-selected-state-icon-background-color: #3f51b5;
  --mat-stepper-header-selected-state-icon-foreground-color: white;
  --mat-stepper-header-done-state-icon-background-color: #3f51b5;
  --mat-stepper-header-done-state-icon-foreground-color: white;
  --mat-stepper-header-edit-state-icon-background-color: #3f51b5;
  --mat-stepper-header-edit-state-icon-foreground-color: white;
  --mat-stepper-container-color: white;
  --mat-stepper-line-color: rgba(0, 0, 0, 0.12);
  --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
  --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
  --mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
  --mat-stepper-header-error-state-label-text-color: #f44336;
  --mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
  --mat-stepper-header-error-state-icon-foreground-color: #f44336;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}

.mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: white;
  --mat-stepper-header-selected-state-icon-background-color: #ff4081;
  --mat-stepper-header-selected-state-icon-foreground-color: white;
  --mat-stepper-header-done-state-icon-background-color: #ff4081;
  --mat-stepper-header-done-state-icon-foreground-color: white;
  --mat-stepper-header-edit-state-icon-background-color: #ff4081;
  --mat-stepper-header-edit-state-icon-foreground-color: white;
}

.mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: white;
  --mat-stepper-header-selected-state-icon-background-color: #f44336;
  --mat-stepper-header-selected-state-icon-foreground-color: white;
  --mat-stepper-header-done-state-icon-background-color: #f44336;
  --mat-stepper-header-done-state-icon-foreground-color: white;
  --mat-stepper-header-edit-state-icon-background-color: #f44336;
  --mat-stepper-header-edit-state-icon-foreground-color: white;
}

html {
  --mat-stepper-header-height: 72px;
  --mat-stepper-container-text-font: Roboto, sans-serif;
  --mat-stepper-header-label-text-font: Roboto, sans-serif;
  --mat-stepper-header-label-text-size: 14px;
  --mat-stepper-header-label-text-weight: 400;
  --mat-stepper-header-error-state-label-text-size: 16px;
  --mat-stepper-header-selected-state-label-text-size: 16px;
  --mat-stepper-header-selected-state-label-text-weight: 400;
  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
  --mat-toolbar-container-background-color: white;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}

.mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #3f51b5;
  --mat-toolbar-container-text-color: white;
}
.mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #ff4081;
  --mat-toolbar-container-text-color: white;
}
.mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #f44336;
  --mat-toolbar-container-text-color: white;
}

html {
  --mat-toolbar-standard-height: 64px;
  --mat-toolbar-mobile-height: 56px;
  --mat-toolbar-title-text-font: Roboto, sans-serif;
  --mat-toolbar-title-text-line-height: 32px;
  --mat-toolbar-title-text-size: 20px;
  --mat-toolbar-title-text-tracking: 0.0125em;
  --mat-toolbar-title-text-weight: 500;
  --mat-tree-container-background-color: white;
  --mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
  --mat-tree-node-min-height: 48px;
  --mat-tree-node-text-font: Roboto, sans-serif;
  --mat-tree-node-text-size: 14px;
  --mat-tree-node-text-weight: 400;
  --mat-timepicker-container-shape: 4px;
  --mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-timepicker-container-background-color: white;
}

.mat-h1,
.mat-headline-5,
.mat-typography .mat-h1,
.mat-typography .mat-headline-5,
.mat-typography h1 {
  font: 400 24px / 32px Roboto, sans-serif;
  letter-spacing: normal;
  margin: 0 0 16px;
}

.mat-h2,
.mat-headline-6,
.mat-typography .mat-h2,
.mat-typography .mat-headline-6,
.mat-typography h2 {
  font: 500 20px / 32px Roboto, sans-serif;
  letter-spacing: 0.0125em;
  margin: 0 0 16px;
}

.mat-h3,
.mat-subtitle-1,
.mat-typography .mat-h3,
.mat-typography .mat-subtitle-1,
.mat-typography h3 {
  font: 400 16px / 28px Roboto, sans-serif;
  letter-spacing: 0.009375em;
  margin: 0 0 16px;
}

.mat-h4,
.mat-body-1,
.mat-typography .mat-h4,
.mat-typography .mat-body-1,
.mat-typography h4 {
  font: 400 16px / 24px Roboto, sans-serif;
  letter-spacing: 0.03125em;
  margin: 0 0 16px;
}

.mat-h5,
.mat-typography .mat-h5,
.mat-typography h5 {
  font: 400 calc(14px * 0.83) / 20px Roboto, sans-serif;
  margin: 0 0 12px;
}

.mat-h6,
.mat-typography .mat-h6,
.mat-typography h6 {
  font: 400 calc(14px * 0.67) / 20px Roboto, sans-serif;
  margin: 0 0 12px;
}

.mat-body-strong,
.mat-subtitle-2,
.mat-typography .mat-body-strong,
.mat-typography .mat-subtitle-2 {
  font: 500 14px / 22px Roboto, sans-serif;
  letter-spacing: 0.0071428571em;
}

.mat-body,
.mat-body-2,
.mat-typography .mat-body,
.mat-typography .mat-body-2,
.mat-typography {
  font: 400 14px / 20px Roboto, sans-serif;
  letter-spacing: 0.0178571429em;
}
.mat-body p,
.mat-body-2 p,
.mat-typography .mat-body p,
.mat-typography .mat-body-2 p,
.mat-typography p {
  margin: 0 0 12px;
}

.mat-small,
.mat-caption,
.mat-typography .mat-small,
.mat-typography .mat-caption {
  font: 400 12px / 20px Roboto, sans-serif;
  letter-spacing: 0.0333333333em;
}

.mat-headline-1,
.mat-typography .mat-headline-1 {
  font: 300 96px / 96px Roboto, sans-serif;
  letter-spacing: -0.015625em;
  margin: 0 0 56px;
}

.mat-headline-2,
.mat-typography .mat-headline-2 {
  font: 300 60px / 60px Roboto, sans-serif;
  letter-spacing: -0.0083333333em;
  margin: 0 0 64px;
}

.mat-headline-3,
.mat-typography .mat-headline-3 {
  font: 400 48px / 50px Roboto, sans-serif;
  letter-spacing: normal;
  margin: 0 0 64px;
}

.mat-headline-4,
.mat-typography .mat-headline-4 {
  font: 400 34px / 40px Roboto, sans-serif;
  letter-spacing: 0.0073529412em;
  margin: 0 0 64px;
}

/* Snackbar Success Style - Green */
.mat-mdc-snack-bar-container.snackbar-success {
  --mdc-snackbar-container-color: #4caf50;
  --mdc-snackbar-supporting-text-color: #ffffff;
  --mat-snack-bar-button-color: #ffffff;
}

.mat-mdc-snack-bar-container.snackbar-success .mdc-snackbar__surface {
  background-color: #2e7d32 !important;
  color: #ffffff !important;
}

/* Snackbar Error Style - Red */
.mat-mdc-snack-bar-container.snackbar-error {
  --mdc-snackbar-container-color: #f44336;
  --mdc-snackbar-supporting-text-color: #ffffff;
  --mat-snack-bar-button-color: #ffffff;
}

.mat-mdc-snack-bar-container.snackbar-error .mdc-snackbar__surface {
  background-color: #c62828 !important;
  color: #ffffff !important;
}

/* Snackbar Info Style - Blue */
.mat-mdc-snack-bar-container.snackbar-info {
  --mdc-snackbar-container-color: #2196f3;
  --mdc-snackbar-supporting-text-color: #ffffff;
  --mat-snack-bar-button-color: #ffffff;
}

.mat-mdc-snack-bar-container.snackbar-info .mdc-snackbar__surface {
  background-color: #1565c0 !important;
  color: #ffffff !important;
}

/* Snackbar Warning Style - Orange */
.mat-mdc-snack-bar-container.snackbar-warning {
  --mdc-snackbar-container-color: #ff9800;
  --mdc-snackbar-supporting-text-color: #ffffff;
  --mat-snack-bar-button-color: #ffffff;
}

.mat-mdc-snack-bar-container.snackbar-warning .mdc-snackbar__surface {
  background-color: #ef6c00 !important;
  color: #ffffff !important;
}

.mat-mdc-snack-bar-container.snackbar-success .mdc-button,
.mat-mdc-snack-bar-container.snackbar-error .mdc-button,
.mat-mdc-snack-bar-container.snackbar-info .mdc-button,
.mat-mdc-snack-bar-container.snackbar-warning .mdc-button {
  color: #ffffff !important;
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  }
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  }
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  }
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  }
  .container{
    max-width: 1536px;
  }
}
.visible{
  visibility: visible;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.block{
  display: block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.table{
  display: table;
}
.table-row{
  display: table-row;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.flex-shrink{
  flex-shrink: 1;
}
.border-collapse{
  border-collapse: collapse;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.flex-wrap{
  flex-wrap: wrap;
}
.border{
  border-width: 1px;
}
.text-right{
  text-align: right;
}
.font-bold{
  font-weight: 700;
}
.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.italic{
  font-style: italic;
}
.text-primary{
  --tw-text-opacity: 1;
  color: rgb(63 81 181 / var(--tw-text-opacity, 1));
}
.outline{
  outline-style: solid;
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-filter{
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
:root,
html[data-theme=light],
html.theme-light,
body[data-theme=light],
body.theme-light {
  --font-family-base: "Inter", "Segoe UI", Arial, sans-serif;
  --font-family-display: "Outfit", "Inter", sans-serif;
  --font-size-base: 14px;
  --line-height-base: 1.45;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --control-height: 40px;
  --control-min-width: 140px;
  --input-min-width: 220px;
  --page-max-width: 1400px;
  --color-bg: #f3f6fb;
  --color-surface: #ffffff;
  --color-surface-soft: #f8fbff;
  --color-border: #d7e2f0;
  --color-border-strong: #c3d3e8;
  --color-text: #16263d;
  --color-text-muted: #44566f;
  --color-text-secondary: #44566f;
  --color-primary: #1666c5;
  --color-primary-strong: #0f4f9a;
  --color-primary-soft: #e8f1ff;
  --color-primary-light: #e8f1ff;
  --color-on-primary: #ffffff;
  --color-accent: #7c3aed;
  --color-accent-strong: #5b21b6;
  --color-on-accent: #ffffff;
  --color-success: #1f8a4d;
  --color-on-success: #ffffff;
  --color-danger: #c53d3d;
  --color-on-danger: #ffffff;
  --color-warning: #d2871a;
  --color-warning-light: #fff4e2;
  --color-on-warning: #16263d;
  --color-surface-elevated: #f3f7fd;
  --icon-color-1: #1f8a4d;
  --icon-color-2: #1666c5;
  --icon-color-3: #8b5cf6;
  --icon-color-4: #d2871a;
  --icon-color-5: #06b6d4;
  --icon-color-6: #ef4444;
  --icon-color-7: #0ea5e9;
  --icon-color-8: #7c3aed;
  --shadow-1: 0 2px 8px rgba(13, 31, 56, 0.08);
  --shadow-2: 0 10px 26px rgba(13, 31, 56, 0.1);
  --chip-bg-opacity: 16%;
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-muted: var(--color-text-muted);
  --color-text-primary: var(--color-text);
  --surface-card: var(--color-surface);
  --surface-ground: var(--color-surface-soft);
  --primary-color: var(--color-primary);
  --border-color: var(--color-border);
}

html[data-theme=dark] {
  color-scheme: dark;
  --color-bg: #0b1120;
  --color-surface: #141f36;
  --color-surface-soft: #1e2c48;
  --color-surface-elevated: #243656;
  --color-border: #3b5073;
  --color-border-strong: #5a77a3;
  --color-control-border: #6d8db8;
  --color-text: #f8fafc;
  --color-text-muted: #cbd5e1;
  --color-text-secondary: #cbd5e1;
  --color-text-light: #94a3b8;
  --color-primary: #60a5fa;
  --color-primary-strong: #93c5fd;
  --color-primary-soft: rgba(96, 165, 250, 0.22);
  --color-primary-light: rgba(96, 165, 250, 0.22);
  --color-on-primary: #061224;
  --color-accent: #c084fc;
  --color-accent-strong: #d8b4fe;
  --color-on-accent: #160829;
  --color-success: #34d399;
  --color-on-success: #022013;
  --color-danger: #f87171;
  --color-on-danger: #230505;
  --color-warning: #fbbf24;
  --color-warning-light: rgba(251, 191, 36, 0.20);
  --color-on-warning: #211400;
  --icon-color-1: #4ade80;
  --icon-color-2: #60a5fa;
  --icon-color-3: #c084fc;
  --icon-color-4: #fbbf24;
  --icon-color-5: #22d3ee;
  --icon-color-6: #f87171;
  --icon-color-7: #38bdf8;
  --icon-color-8: #a78bfa;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 12px 26px rgba(0, 0, 0, 0.50);
  --chip-bg-opacity: 24%;
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-muted: var(--color-text-light);
  --color-text-primary: var(--color-text);
  --surface-card: var(--color-surface);
  --surface-ground: var(--color-surface-soft);
  --primary-color: var(--color-primary);
  --border-color: var(--color-border);
}

@media (prefers-color-scheme: dark) {
  html[data-theme=system] {
    color-scheme: dark;
    --color-bg: #0b1120;
    --color-surface: #141f36;
    --color-surface-soft: #1e2c48;
    --color-surface-elevated: #243656;
    --color-border: #3b5073;
    --color-border-strong: #5a77a3;
    --color-control-border: #6d8db8;
    --color-text: #f8fafc;
    --color-text-muted: #cbd5e1;
    --color-text-secondary: #cbd5e1;
    --color-text-light: #94a3b8;
    --color-primary: #60a5fa;
    --color-primary-strong: #93c5fd;
    --color-primary-soft: rgba(96, 165, 250, 0.22);
    --color-primary-light: rgba(96, 165, 250, 0.22);
    --color-on-primary: #061224;
    --color-accent: #c084fc;
    --color-accent-strong: #d8b4fe;
    --color-on-accent: #160829;
    --color-success: #34d399;
    --color-on-success: #022013;
    --color-danger: #f87171;
    --color-on-danger: #230505;
    --color-warning: #fbbf24;
    --color-warning-light: rgba(251, 191, 36, 0.20);
    --color-on-warning: #211400;
    --icon-color-1: #4ade80;
    --icon-color-2: #60a5fa;
    --icon-color-3: #c084fc;
    --icon-color-4: #fbbf24;
    --icon-color-5: #22d3ee;
    --icon-color-6: #f87171;
    --icon-color-7: #38bdf8;
    --icon-color-8: #a78bfa;
    --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 12px 26px rgba(0, 0, 0, 0.50);
    --chip-bg-opacity: 24%;
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --text-muted: var(--color-text-light);
    --color-text-primary: var(--color-text);
    --surface-card: var(--color-surface);
    --surface-ground: var(--color-surface-soft);
    --primary-color: var(--color-primary);
    --border-color: var(--color-border);
  }
}
/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) var(--color-bg);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}

app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-container {
  width: min(100%, var(--page-max-width));
  min-height: calc(100dvh - 120px);
  margin: 0 auto;
  padding: var(--space-6);
}

.page-header,
.module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

/* Standardize quotation-style header only for pages that include a back button. */
.page-header:has(app-back-button),
.page-header:has(.back-button),
.module-header:has(app-back-button),
.module-header:has(.back-button) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
}

.page-header:has(app-back-button) > .header-left,
.page-header:has(.back-button) > .header-left,
.page-header:has(app-back-button) > .header-section,
.page-header:has(.back-button) > .header-section,
.page-header:has(app-back-button) > div:not(.header-actions),
.page-header:has(.back-button) > div:not(.header-actions),
.module-header:has(app-back-button) > .header-left,
.module-header:has(.back-button) > .header-left,
.module-header:has(app-back-button) > .header-section,
.module-header:has(.back-button) > .header-section,
.module-header:has(app-back-button) > div:not(.header-actions),
.module-header:has(.back-button) > div:not(.header-actions) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.page-header:has(app-back-button) .header-title-row,
.page-header:has(.back-button) .header-title-row,
.module-header:has(app-back-button) .header-title-row,
.module-header:has(.back-button) .header-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  flex-wrap: wrap;
}

.page-header:has(app-back-button) .header-title-row .header-left,
.page-header:has(.back-button) .header-title-row .header-left,
.module-header:has(app-back-button) .header-title-row .header-left,
.module-header:has(.back-button) .header-title-row .header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.page-header:has(app-back-button) .page-title,
.page-header:has(.back-button) .page-title,
.module-header:has(app-back-button) .page-title,
.module-header:has(.back-button) .page-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.page-header:has(app-back-button) .header-actions,
.page-header:has(.back-button) .header-actions,
.module-header:has(app-back-button) .header-actions,
.module-header:has(.back-button) .header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Preview screens use card headers but still need the same two-row structure. */
.mat-mdc-card-header .header-left:has(app-back-button),
.mat-mdc-card-header .header-left:has(.back-button),
.mat-mdc-card-header .header-section:has(app-back-button),
.mat-mdc-card-header .header-section:has(.back-button) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.page-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-family-display, inherit);
  font-size: clamp(1.25rem, 1.2rem + 0.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}

.page-subtitle,
.subtitle,
.form-intro,
.kicker {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 600;
}

.header-actions,
.form-actions,
.step-actions,
.panel-nav,
.inline-actions,
.app-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.page-header .header-actions,
.module-header .header-actions,
.header-title-row .header-actions {
  margin-left: auto;
  justify-content: flex-end;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.section-head h3 {
  margin: 0;
  color: var(--color-text);
  font-size: 1.08rem;
  font-weight: 600;
}

.module-card,
.wizard-card,
.table-card,
.search-card,
.mat-mdc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.app-grid-shell {
  position: relative;
}

.app-grid-loading-overlay {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  border-radius: var(--radius-md);
  z-index: 1;
  min-height: 180px;
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.app-grid-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(var(--color-primary-rgb), 0.25);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .app-grid-spinner {
    border: 3px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
}
.app-grid-spinner {
  border-top-color: var(--color-primary);
  animation: app-grid-spin 0.85s linear infinite;
}

@keyframes app-grid-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ============================================================================
   MATERIAL CHIP STANDARDIZATION - GLOBAL STYLES
   ============================================================================
   Consistent chip styling across the entire application for both light and dark modes
   ============================================================================ */
mat-chip,
mat-chip-option {
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
}

/* Status-based chips - using semantic color variables */
mat-chip.chip-status-active,
mat-chip.chip-active,
mat-chip.status-active {
  background-color: color-mix(in srgb, var(--color-success) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-success) !important;
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent) !important;
}

mat-chip.chip-status-inactive,
mat-chip.chip-inactive,
mat-chip.status-inactive {
  background-color: color-mix(in srgb, var(--color-danger) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-danger) !important;
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent) !important;
}

mat-chip.chip-status-suspended,
mat-chip.status-suspended,
mat-chip.status-pending {
  background-color: color-mix(in srgb, var(--color-warning) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-warning) !important;
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent) !important;
}

mat-chip.chip-status-approved,
mat-chip.status-approved {
  background-color: color-mix(in srgb, var(--color-success) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-success) !important;
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent) !important;
}

mat-chip.chip-status-rejected,
mat-chip.status-rejected {
  background-color: color-mix(in srgb, var(--color-danger) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-danger) !important;
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent) !important;
}

/* Role-based chips */
mat-chip.chip-role-admin {
  background-color: color-mix(in srgb, var(--color-primary) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-primary) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

mat-chip.chip-role-manager,
mat-chip.chip-role-supervisor {
  background-color: color-mix(in srgb, var(--color-warning) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-warning) !important;
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent) !important;
}

mat-chip.chip-role-user {
  background-color: color-mix(in srgb, var(--color-text-muted) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-text-muted) !important;
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent) !important;
}

/* Severity-based chips */
mat-chip.chip-severity-info {
  background-color: color-mix(in srgb, var(--color-primary) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-primary) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

mat-chip.chip-severity-warning {
  background-color: color-mix(in srgb, var(--color-warning) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-warning) !important;
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent) !important;
}

mat-chip.chip-severity-danger,
mat-chip.chip-severity-error {
  background-color: color-mix(in srgb, var(--color-danger) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-danger) !important;
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent) !important;
}

/* Material color-based chips (for backward compatibility) */
mat-chip[color=primary] {
  background-color: color-mix(in srgb, var(--color-primary) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-primary) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

mat-chip[color=accent],
mat-chip[color=warn] {
  background-color: color-mix(in srgb, var(--color-warning) var(--chip-bg-opacity), transparent) !important;
  color: var(--color-warning) !important;
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent) !important;
}

/* Outlined appearance chips */
mat-chip[appearance=outlined] {
  background-color: transparent !important;
  border-width: 1px !important;
}

mat-chip[appearance=outlined].chip-status-active {
  border-color: var(--color-success) !important;
  color: var(--color-success) !important;
}

mat-chip[appearance=outlined].chip-status-inactive {
  border-color: var(--color-danger) !important;
  color: var(--color-danger) !important;
}

mat-chip[appearance=outlined].chip-status-suspended {
  border-color: var(--color-warning) !important;
  color: var(--color-warning) !important;
}

/* Disabled chips */
mat-chip[disabled] {
  opacity: 0.6 !important;
}

/* Ensure text labels are always readable */
mat-chip .mdc-evolution-chip__text-label,
mat-chip-option .mdc-evolution-chip__text-label {
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
}

/* Chip hover states */
mat-chip:not([disabled]):hover {
  opacity: 0.8 !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* ============================================================================
   END MATERIAL CHIP STANDARDIZATION
   ============================================================================ */
.form-card,
.chart-card,
.expense-chart-card,
.history-summary-card,
.history-table-card,
.attendance-table-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}

/* ============================================================================
   KPI & SUMMARY CARD STYLING & ANIMATIONS
   ============================================================================ */
.kpi-card,
.summary-card,
.financial-card,
.stat-card,
.balance-card,
.preview-kpi-card {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-1) !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  overflow: hidden !important;
}
.kpi-card:hover,
.summary-card:hover,
.financial-card:hover,
.stat-card:hover,
.balance-card:hover,
.preview-kpi-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-2) !important;
}
.kpi-card.primary, .kpi-card.info, .kpi-card.bank, .kpi-card.run, .kpi-card.approved, .kpi-card.approved-card, .kpi-card.tone-bank, .kpi-card.transactions, .kpi-card.total-revenue, .kpi-card.blue,
.summary-card.primary,
.summary-card.info,
.summary-card.bank,
.summary-card.run,
.summary-card.approved,
.summary-card.approved-card,
.summary-card.tone-bank,
.summary-card.transactions,
.summary-card.total-revenue,
.summary-card.blue,
.financial-card.primary,
.financial-card.info,
.financial-card.bank,
.financial-card.run,
.financial-card.approved,
.financial-card.approved-card,
.financial-card.tone-bank,
.financial-card.transactions,
.financial-card.total-revenue,
.financial-card.blue,
.stat-card.primary,
.stat-card.info,
.stat-card.bank,
.stat-card.run,
.stat-card.approved,
.stat-card.approved-card,
.stat-card.tone-bank,
.stat-card.transactions,
.stat-card.total-revenue,
.stat-card.blue,
.balance-card.primary,
.balance-card.info,
.balance-card.bank,
.balance-card.run,
.balance-card.approved,
.balance-card.approved-card,
.balance-card.tone-bank,
.balance-card.transactions,
.balance-card.total-revenue,
.balance-card.blue,
.preview-kpi-card.primary,
.preview-kpi-card.info,
.preview-kpi-card.bank,
.preview-kpi-card.run,
.preview-kpi-card.approved,
.preview-kpi-card.approved-card,
.preview-kpi-card.tone-bank,
.preview-kpi-card.transactions,
.preview-kpi-card.total-revenue,
.preview-kpi-card.blue {
  border-top: 4px solid var(--color-primary) !important;
  border-left: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
.kpi-card.primary .kpi-icon,
.kpi-card.primary .card-icon,
.kpi-card.primary .balance-icon,
.kpi-card.primary .stat-icon mat-icon, .kpi-card.info .kpi-icon,
.kpi-card.info .card-icon,
.kpi-card.info .balance-icon,
.kpi-card.info .stat-icon mat-icon, .kpi-card.bank .kpi-icon,
.kpi-card.bank .card-icon,
.kpi-card.bank .balance-icon,
.kpi-card.bank .stat-icon mat-icon, .kpi-card.run .kpi-icon,
.kpi-card.run .card-icon,
.kpi-card.run .balance-icon,
.kpi-card.run .stat-icon mat-icon, .kpi-card.approved .kpi-icon,
.kpi-card.approved .card-icon,
.kpi-card.approved .balance-icon,
.kpi-card.approved .stat-icon mat-icon, .kpi-card.approved-card .kpi-icon,
.kpi-card.approved-card .card-icon,
.kpi-card.approved-card .balance-icon,
.kpi-card.approved-card .stat-icon mat-icon, .kpi-card.tone-bank .kpi-icon,
.kpi-card.tone-bank .card-icon,
.kpi-card.tone-bank .balance-icon,
.kpi-card.tone-bank .stat-icon mat-icon, .kpi-card.transactions .kpi-icon,
.kpi-card.transactions .card-icon,
.kpi-card.transactions .balance-icon,
.kpi-card.transactions .stat-icon mat-icon, .kpi-card.total-revenue .kpi-icon,
.kpi-card.total-revenue .card-icon,
.kpi-card.total-revenue .balance-icon,
.kpi-card.total-revenue .stat-icon mat-icon, .kpi-card.blue .kpi-icon,
.kpi-card.blue .card-icon,
.kpi-card.blue .balance-icon,
.kpi-card.blue .stat-icon mat-icon,
.summary-card.primary .kpi-icon,
.summary-card.primary .card-icon,
.summary-card.primary .balance-icon,
.summary-card.primary .stat-icon mat-icon,
.summary-card.info .kpi-icon,
.summary-card.info .card-icon,
.summary-card.info .balance-icon,
.summary-card.info .stat-icon mat-icon,
.summary-card.bank .kpi-icon,
.summary-card.bank .card-icon,
.summary-card.bank .balance-icon,
.summary-card.bank .stat-icon mat-icon,
.summary-card.run .kpi-icon,
.summary-card.run .card-icon,
.summary-card.run .balance-icon,
.summary-card.run .stat-icon mat-icon,
.summary-card.approved .kpi-icon,
.summary-card.approved .card-icon,
.summary-card.approved .balance-icon,
.summary-card.approved .stat-icon mat-icon,
.summary-card.approved-card .kpi-icon,
.summary-card.approved-card .card-icon,
.summary-card.approved-card .balance-icon,
.summary-card.approved-card .stat-icon mat-icon,
.summary-card.tone-bank .kpi-icon,
.summary-card.tone-bank .card-icon,
.summary-card.tone-bank .balance-icon,
.summary-card.tone-bank .stat-icon mat-icon,
.summary-card.transactions .kpi-icon,
.summary-card.transactions .card-icon,
.summary-card.transactions .balance-icon,
.summary-card.transactions .stat-icon mat-icon,
.summary-card.total-revenue .kpi-icon,
.summary-card.total-revenue .card-icon,
.summary-card.total-revenue .balance-icon,
.summary-card.total-revenue .stat-icon mat-icon,
.summary-card.blue .kpi-icon,
.summary-card.blue .card-icon,
.summary-card.blue .balance-icon,
.summary-card.blue .stat-icon mat-icon,
.financial-card.primary .kpi-icon,
.financial-card.primary .card-icon,
.financial-card.primary .balance-icon,
.financial-card.primary .stat-icon mat-icon,
.financial-card.info .kpi-icon,
.financial-card.info .card-icon,
.financial-card.info .balance-icon,
.financial-card.info .stat-icon mat-icon,
.financial-card.bank .kpi-icon,
.financial-card.bank .card-icon,
.financial-card.bank .balance-icon,
.financial-card.bank .stat-icon mat-icon,
.financial-card.run .kpi-icon,
.financial-card.run .card-icon,
.financial-card.run .balance-icon,
.financial-card.run .stat-icon mat-icon,
.financial-card.approved .kpi-icon,
.financial-card.approved .card-icon,
.financial-card.approved .balance-icon,
.financial-card.approved .stat-icon mat-icon,
.financial-card.approved-card .kpi-icon,
.financial-card.approved-card .card-icon,
.financial-card.approved-card .balance-icon,
.financial-card.approved-card .stat-icon mat-icon,
.financial-card.tone-bank .kpi-icon,
.financial-card.tone-bank .card-icon,
.financial-card.tone-bank .balance-icon,
.financial-card.tone-bank .stat-icon mat-icon,
.financial-card.transactions .kpi-icon,
.financial-card.transactions .card-icon,
.financial-card.transactions .balance-icon,
.financial-card.transactions .stat-icon mat-icon,
.financial-card.total-revenue .kpi-icon,
.financial-card.total-revenue .card-icon,
.financial-card.total-revenue .balance-icon,
.financial-card.total-revenue .stat-icon mat-icon,
.financial-card.blue .kpi-icon,
.financial-card.blue .card-icon,
.financial-card.blue .balance-icon,
.financial-card.blue .stat-icon mat-icon,
.stat-card.primary .kpi-icon,
.stat-card.primary .card-icon,
.stat-card.primary .balance-icon,
.stat-card.primary .stat-icon mat-icon,
.stat-card.info .kpi-icon,
.stat-card.info .card-icon,
.stat-card.info .balance-icon,
.stat-card.info .stat-icon mat-icon,
.stat-card.bank .kpi-icon,
.stat-card.bank .card-icon,
.stat-card.bank .balance-icon,
.stat-card.bank .stat-icon mat-icon,
.stat-card.run .kpi-icon,
.stat-card.run .card-icon,
.stat-card.run .balance-icon,
.stat-card.run .stat-icon mat-icon,
.stat-card.approved .kpi-icon,
.stat-card.approved .card-icon,
.stat-card.approved .balance-icon,
.stat-card.approved .stat-icon mat-icon,
.stat-card.approved-card .kpi-icon,
.stat-card.approved-card .card-icon,
.stat-card.approved-card .balance-icon,
.stat-card.approved-card .stat-icon mat-icon,
.stat-card.tone-bank .kpi-icon,
.stat-card.tone-bank .card-icon,
.stat-card.tone-bank .balance-icon,
.stat-card.tone-bank .stat-icon mat-icon,
.stat-card.transactions .kpi-icon,
.stat-card.transactions .card-icon,
.stat-card.transactions .balance-icon,
.stat-card.transactions .stat-icon mat-icon,
.stat-card.total-revenue .kpi-icon,
.stat-card.total-revenue .card-icon,
.stat-card.total-revenue .balance-icon,
.stat-card.total-revenue .stat-icon mat-icon,
.stat-card.blue .kpi-icon,
.stat-card.blue .card-icon,
.stat-card.blue .balance-icon,
.stat-card.blue .stat-icon mat-icon,
.balance-card.primary .kpi-icon,
.balance-card.primary .card-icon,
.balance-card.primary .balance-icon,
.balance-card.primary .stat-icon mat-icon,
.balance-card.info .kpi-icon,
.balance-card.info .card-icon,
.balance-card.info .balance-icon,
.balance-card.info .stat-icon mat-icon,
.balance-card.bank .kpi-icon,
.balance-card.bank .card-icon,
.balance-card.bank .balance-icon,
.balance-card.bank .stat-icon mat-icon,
.balance-card.run .kpi-icon,
.balance-card.run .card-icon,
.balance-card.run .balance-icon,
.balance-card.run .stat-icon mat-icon,
.balance-card.approved .kpi-icon,
.balance-card.approved .card-icon,
.balance-card.approved .balance-icon,
.balance-card.approved .stat-icon mat-icon,
.balance-card.approved-card .kpi-icon,
.balance-card.approved-card .card-icon,
.balance-card.approved-card .balance-icon,
.balance-card.approved-card .stat-icon mat-icon,
.balance-card.tone-bank .kpi-icon,
.balance-card.tone-bank .card-icon,
.balance-card.tone-bank .balance-icon,
.balance-card.tone-bank .stat-icon mat-icon,
.balance-card.transactions .kpi-icon,
.balance-card.transactions .card-icon,
.balance-card.transactions .balance-icon,
.balance-card.transactions .stat-icon mat-icon,
.balance-card.total-revenue .kpi-icon,
.balance-card.total-revenue .card-icon,
.balance-card.total-revenue .balance-icon,
.balance-card.total-revenue .stat-icon mat-icon,
.balance-card.blue .kpi-icon,
.balance-card.blue .card-icon,
.balance-card.blue .balance-icon,
.balance-card.blue .stat-icon mat-icon,
.preview-kpi-card.primary .kpi-icon,
.preview-kpi-card.primary .card-icon,
.preview-kpi-card.primary .balance-icon,
.preview-kpi-card.primary .stat-icon mat-icon,
.preview-kpi-card.info .kpi-icon,
.preview-kpi-card.info .card-icon,
.preview-kpi-card.info .balance-icon,
.preview-kpi-card.info .stat-icon mat-icon,
.preview-kpi-card.bank .kpi-icon,
.preview-kpi-card.bank .card-icon,
.preview-kpi-card.bank .balance-icon,
.preview-kpi-card.bank .stat-icon mat-icon,
.preview-kpi-card.run .kpi-icon,
.preview-kpi-card.run .card-icon,
.preview-kpi-card.run .balance-icon,
.preview-kpi-card.run .stat-icon mat-icon,
.preview-kpi-card.approved .kpi-icon,
.preview-kpi-card.approved .card-icon,
.preview-kpi-card.approved .balance-icon,
.preview-kpi-card.approved .stat-icon mat-icon,
.preview-kpi-card.approved-card .kpi-icon,
.preview-kpi-card.approved-card .card-icon,
.preview-kpi-card.approved-card .balance-icon,
.preview-kpi-card.approved-card .stat-icon mat-icon,
.preview-kpi-card.tone-bank .kpi-icon,
.preview-kpi-card.tone-bank .card-icon,
.preview-kpi-card.tone-bank .balance-icon,
.preview-kpi-card.tone-bank .stat-icon mat-icon,
.preview-kpi-card.transactions .kpi-icon,
.preview-kpi-card.transactions .card-icon,
.preview-kpi-card.transactions .balance-icon,
.preview-kpi-card.transactions .stat-icon mat-icon,
.preview-kpi-card.total-revenue .kpi-icon,
.preview-kpi-card.total-revenue .card-icon,
.preview-kpi-card.total-revenue .balance-icon,
.preview-kpi-card.total-revenue .stat-icon mat-icon,
.preview-kpi-card.blue .kpi-icon,
.preview-kpi-card.blue .card-icon,
.preview-kpi-card.blue .balance-icon,
.preview-kpi-card.blue .stat-icon mat-icon {
  color: var(--color-primary) !important;
}
.kpi-card.success, .kpi-card.positive, .kpi-card.total, .kpi-card.income, .kpi-card.profit, .kpi-card.bonus, .kpi-card.tone-total, .kpi-card.total-card, .kpi-card.paid-amount, .kpi-card.healthy, .kpi-card.green,
.summary-card.success,
.summary-card.positive,
.summary-card.total,
.summary-card.income,
.summary-card.profit,
.summary-card.bonus,
.summary-card.tone-total,
.summary-card.total-card,
.summary-card.paid-amount,
.summary-card.healthy,
.summary-card.green,
.financial-card.success,
.financial-card.positive,
.financial-card.total,
.financial-card.income,
.financial-card.profit,
.financial-card.bonus,
.financial-card.tone-total,
.financial-card.total-card,
.financial-card.paid-amount,
.financial-card.healthy,
.financial-card.green,
.stat-card.success,
.stat-card.positive,
.stat-card.total,
.stat-card.income,
.stat-card.profit,
.stat-card.bonus,
.stat-card.tone-total,
.stat-card.total-card,
.stat-card.paid-amount,
.stat-card.healthy,
.stat-card.green,
.balance-card.success,
.balance-card.positive,
.balance-card.total,
.balance-card.income,
.balance-card.profit,
.balance-card.bonus,
.balance-card.tone-total,
.balance-card.total-card,
.balance-card.paid-amount,
.balance-card.healthy,
.balance-card.green,
.preview-kpi-card.success,
.preview-kpi-card.positive,
.preview-kpi-card.total,
.preview-kpi-card.income,
.preview-kpi-card.profit,
.preview-kpi-card.bonus,
.preview-kpi-card.tone-total,
.preview-kpi-card.total-card,
.preview-kpi-card.paid-amount,
.preview-kpi-card.healthy,
.preview-kpi-card.green {
  border-top: 4px solid var(--color-success) !important;
  border-left: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 14%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
.kpi-card.success .kpi-icon,
.kpi-card.success .card-icon,
.kpi-card.success .balance-icon,
.kpi-card.success .stat-icon mat-icon, .kpi-card.positive .kpi-icon,
.kpi-card.positive .card-icon,
.kpi-card.positive .balance-icon,
.kpi-card.positive .stat-icon mat-icon, .kpi-card.total .kpi-icon,
.kpi-card.total .card-icon,
.kpi-card.total .balance-icon,
.kpi-card.total .stat-icon mat-icon, .kpi-card.income .kpi-icon,
.kpi-card.income .card-icon,
.kpi-card.income .balance-icon,
.kpi-card.income .stat-icon mat-icon, .kpi-card.profit .kpi-icon,
.kpi-card.profit .card-icon,
.kpi-card.profit .balance-icon,
.kpi-card.profit .stat-icon mat-icon, .kpi-card.bonus .kpi-icon,
.kpi-card.bonus .card-icon,
.kpi-card.bonus .balance-icon,
.kpi-card.bonus .stat-icon mat-icon, .kpi-card.tone-total .kpi-icon,
.kpi-card.tone-total .card-icon,
.kpi-card.tone-total .balance-icon,
.kpi-card.tone-total .stat-icon mat-icon, .kpi-card.total-card .kpi-icon,
.kpi-card.total-card .card-icon,
.kpi-card.total-card .balance-icon,
.kpi-card.total-card .stat-icon mat-icon, .kpi-card.paid-amount .kpi-icon,
.kpi-card.paid-amount .card-icon,
.kpi-card.paid-amount .balance-icon,
.kpi-card.paid-amount .stat-icon mat-icon, .kpi-card.healthy .kpi-icon,
.kpi-card.healthy .card-icon,
.kpi-card.healthy .balance-icon,
.kpi-card.healthy .stat-icon mat-icon, .kpi-card.green .kpi-icon,
.kpi-card.green .card-icon,
.kpi-card.green .balance-icon,
.kpi-card.green .stat-icon mat-icon,
.summary-card.success .kpi-icon,
.summary-card.success .card-icon,
.summary-card.success .balance-icon,
.summary-card.success .stat-icon mat-icon,
.summary-card.positive .kpi-icon,
.summary-card.positive .card-icon,
.summary-card.positive .balance-icon,
.summary-card.positive .stat-icon mat-icon,
.summary-card.total .kpi-icon,
.summary-card.total .card-icon,
.summary-card.total .balance-icon,
.summary-card.total .stat-icon mat-icon,
.summary-card.income .kpi-icon,
.summary-card.income .card-icon,
.summary-card.income .balance-icon,
.summary-card.income .stat-icon mat-icon,
.summary-card.profit .kpi-icon,
.summary-card.profit .card-icon,
.summary-card.profit .balance-icon,
.summary-card.profit .stat-icon mat-icon,
.summary-card.bonus .kpi-icon,
.summary-card.bonus .card-icon,
.summary-card.bonus .balance-icon,
.summary-card.bonus .stat-icon mat-icon,
.summary-card.tone-total .kpi-icon,
.summary-card.tone-total .card-icon,
.summary-card.tone-total .balance-icon,
.summary-card.tone-total .stat-icon mat-icon,
.summary-card.total-card .kpi-icon,
.summary-card.total-card .card-icon,
.summary-card.total-card .balance-icon,
.summary-card.total-card .stat-icon mat-icon,
.summary-card.paid-amount .kpi-icon,
.summary-card.paid-amount .card-icon,
.summary-card.paid-amount .balance-icon,
.summary-card.paid-amount .stat-icon mat-icon,
.summary-card.healthy .kpi-icon,
.summary-card.healthy .card-icon,
.summary-card.healthy .balance-icon,
.summary-card.healthy .stat-icon mat-icon,
.summary-card.green .kpi-icon,
.summary-card.green .card-icon,
.summary-card.green .balance-icon,
.summary-card.green .stat-icon mat-icon,
.financial-card.success .kpi-icon,
.financial-card.success .card-icon,
.financial-card.success .balance-icon,
.financial-card.success .stat-icon mat-icon,
.financial-card.positive .kpi-icon,
.financial-card.positive .card-icon,
.financial-card.positive .balance-icon,
.financial-card.positive .stat-icon mat-icon,
.financial-card.total .kpi-icon,
.financial-card.total .card-icon,
.financial-card.total .balance-icon,
.financial-card.total .stat-icon mat-icon,
.financial-card.income .kpi-icon,
.financial-card.income .card-icon,
.financial-card.income .balance-icon,
.financial-card.income .stat-icon mat-icon,
.financial-card.profit .kpi-icon,
.financial-card.profit .card-icon,
.financial-card.profit .balance-icon,
.financial-card.profit .stat-icon mat-icon,
.financial-card.bonus .kpi-icon,
.financial-card.bonus .card-icon,
.financial-card.bonus .balance-icon,
.financial-card.bonus .stat-icon mat-icon,
.financial-card.tone-total .kpi-icon,
.financial-card.tone-total .card-icon,
.financial-card.tone-total .balance-icon,
.financial-card.tone-total .stat-icon mat-icon,
.financial-card.total-card .kpi-icon,
.financial-card.total-card .card-icon,
.financial-card.total-card .balance-icon,
.financial-card.total-card .stat-icon mat-icon,
.financial-card.paid-amount .kpi-icon,
.financial-card.paid-amount .card-icon,
.financial-card.paid-amount .balance-icon,
.financial-card.paid-amount .stat-icon mat-icon,
.financial-card.healthy .kpi-icon,
.financial-card.healthy .card-icon,
.financial-card.healthy .balance-icon,
.financial-card.healthy .stat-icon mat-icon,
.financial-card.green .kpi-icon,
.financial-card.green .card-icon,
.financial-card.green .balance-icon,
.financial-card.green .stat-icon mat-icon,
.stat-card.success .kpi-icon,
.stat-card.success .card-icon,
.stat-card.success .balance-icon,
.stat-card.success .stat-icon mat-icon,
.stat-card.positive .kpi-icon,
.stat-card.positive .card-icon,
.stat-card.positive .balance-icon,
.stat-card.positive .stat-icon mat-icon,
.stat-card.total .kpi-icon,
.stat-card.total .card-icon,
.stat-card.total .balance-icon,
.stat-card.total .stat-icon mat-icon,
.stat-card.income .kpi-icon,
.stat-card.income .card-icon,
.stat-card.income .balance-icon,
.stat-card.income .stat-icon mat-icon,
.stat-card.profit .kpi-icon,
.stat-card.profit .card-icon,
.stat-card.profit .balance-icon,
.stat-card.profit .stat-icon mat-icon,
.stat-card.bonus .kpi-icon,
.stat-card.bonus .card-icon,
.stat-card.bonus .balance-icon,
.stat-card.bonus .stat-icon mat-icon,
.stat-card.tone-total .kpi-icon,
.stat-card.tone-total .card-icon,
.stat-card.tone-total .balance-icon,
.stat-card.tone-total .stat-icon mat-icon,
.stat-card.total-card .kpi-icon,
.stat-card.total-card .card-icon,
.stat-card.total-card .balance-icon,
.stat-card.total-card .stat-icon mat-icon,
.stat-card.paid-amount .kpi-icon,
.stat-card.paid-amount .card-icon,
.stat-card.paid-amount .balance-icon,
.stat-card.paid-amount .stat-icon mat-icon,
.stat-card.healthy .kpi-icon,
.stat-card.healthy .card-icon,
.stat-card.healthy .balance-icon,
.stat-card.healthy .stat-icon mat-icon,
.stat-card.green .kpi-icon,
.stat-card.green .card-icon,
.stat-card.green .balance-icon,
.stat-card.green .stat-icon mat-icon,
.balance-card.success .kpi-icon,
.balance-card.success .card-icon,
.balance-card.success .balance-icon,
.balance-card.success .stat-icon mat-icon,
.balance-card.positive .kpi-icon,
.balance-card.positive .card-icon,
.balance-card.positive .balance-icon,
.balance-card.positive .stat-icon mat-icon,
.balance-card.total .kpi-icon,
.balance-card.total .card-icon,
.balance-card.total .balance-icon,
.balance-card.total .stat-icon mat-icon,
.balance-card.income .kpi-icon,
.balance-card.income .card-icon,
.balance-card.income .balance-icon,
.balance-card.income .stat-icon mat-icon,
.balance-card.profit .kpi-icon,
.balance-card.profit .card-icon,
.balance-card.profit .balance-icon,
.balance-card.profit .stat-icon mat-icon,
.balance-card.bonus .kpi-icon,
.balance-card.bonus .card-icon,
.balance-card.bonus .balance-icon,
.balance-card.bonus .stat-icon mat-icon,
.balance-card.tone-total .kpi-icon,
.balance-card.tone-total .card-icon,
.balance-card.tone-total .balance-icon,
.balance-card.tone-total .stat-icon mat-icon,
.balance-card.total-card .kpi-icon,
.balance-card.total-card .card-icon,
.balance-card.total-card .balance-icon,
.balance-card.total-card .stat-icon mat-icon,
.balance-card.paid-amount .kpi-icon,
.balance-card.paid-amount .card-icon,
.balance-card.paid-amount .balance-icon,
.balance-card.paid-amount .stat-icon mat-icon,
.balance-card.healthy .kpi-icon,
.balance-card.healthy .card-icon,
.balance-card.healthy .balance-icon,
.balance-card.healthy .stat-icon mat-icon,
.balance-card.green .kpi-icon,
.balance-card.green .card-icon,
.balance-card.green .balance-icon,
.balance-card.green .stat-icon mat-icon,
.preview-kpi-card.success .kpi-icon,
.preview-kpi-card.success .card-icon,
.preview-kpi-card.success .balance-icon,
.preview-kpi-card.success .stat-icon mat-icon,
.preview-kpi-card.positive .kpi-icon,
.preview-kpi-card.positive .card-icon,
.preview-kpi-card.positive .balance-icon,
.preview-kpi-card.positive .stat-icon mat-icon,
.preview-kpi-card.total .kpi-icon,
.preview-kpi-card.total .card-icon,
.preview-kpi-card.total .balance-icon,
.preview-kpi-card.total .stat-icon mat-icon,
.preview-kpi-card.income .kpi-icon,
.preview-kpi-card.income .card-icon,
.preview-kpi-card.income .balance-icon,
.preview-kpi-card.income .stat-icon mat-icon,
.preview-kpi-card.profit .kpi-icon,
.preview-kpi-card.profit .card-icon,
.preview-kpi-card.profit .balance-icon,
.preview-kpi-card.profit .stat-icon mat-icon,
.preview-kpi-card.bonus .kpi-icon,
.preview-kpi-card.bonus .card-icon,
.preview-kpi-card.bonus .balance-icon,
.preview-kpi-card.bonus .stat-icon mat-icon,
.preview-kpi-card.tone-total .kpi-icon,
.preview-kpi-card.tone-total .card-icon,
.preview-kpi-card.tone-total .balance-icon,
.preview-kpi-card.tone-total .stat-icon mat-icon,
.preview-kpi-card.total-card .kpi-icon,
.preview-kpi-card.total-card .card-icon,
.preview-kpi-card.total-card .balance-icon,
.preview-kpi-card.total-card .stat-icon mat-icon,
.preview-kpi-card.paid-amount .kpi-icon,
.preview-kpi-card.paid-amount .card-icon,
.preview-kpi-card.paid-amount .balance-icon,
.preview-kpi-card.paid-amount .stat-icon mat-icon,
.preview-kpi-card.healthy .kpi-icon,
.preview-kpi-card.healthy .card-icon,
.preview-kpi-card.healthy .balance-icon,
.preview-kpi-card.healthy .stat-icon mat-icon,
.preview-kpi-card.green .kpi-icon,
.preview-kpi-card.green .card-icon,
.preview-kpi-card.green .balance-icon,
.preview-kpi-card.green .stat-icon mat-icon {
  color: var(--color-success) !important;
}
.kpi-card.warning, .kpi-card.cash, .kpi-card.outstanding, .kpi-card.unpaid, .kpi-card.pending, .kpi-card.pending-card, .kpi-card.overdue-risk, .kpi-card.tone-cash, .kpi-card.watch, .kpi-card.amber,
.summary-card.warning,
.summary-card.cash,
.summary-card.outstanding,
.summary-card.unpaid,
.summary-card.pending,
.summary-card.pending-card,
.summary-card.overdue-risk,
.summary-card.tone-cash,
.summary-card.watch,
.summary-card.amber,
.financial-card.warning,
.financial-card.cash,
.financial-card.outstanding,
.financial-card.unpaid,
.financial-card.pending,
.financial-card.pending-card,
.financial-card.overdue-risk,
.financial-card.tone-cash,
.financial-card.watch,
.financial-card.amber,
.stat-card.warning,
.stat-card.cash,
.stat-card.outstanding,
.stat-card.unpaid,
.stat-card.pending,
.stat-card.pending-card,
.stat-card.overdue-risk,
.stat-card.tone-cash,
.stat-card.watch,
.stat-card.amber,
.balance-card.warning,
.balance-card.cash,
.balance-card.outstanding,
.balance-card.unpaid,
.balance-card.pending,
.balance-card.pending-card,
.balance-card.overdue-risk,
.balance-card.tone-cash,
.balance-card.watch,
.balance-card.amber,
.preview-kpi-card.warning,
.preview-kpi-card.cash,
.preview-kpi-card.outstanding,
.preview-kpi-card.unpaid,
.preview-kpi-card.pending,
.preview-kpi-card.pending-card,
.preview-kpi-card.overdue-risk,
.preview-kpi-card.tone-cash,
.preview-kpi-card.watch,
.preview-kpi-card.amber {
  border-top: 4px solid var(--color-warning) !important;
  border-left: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
.kpi-card.warning .kpi-icon,
.kpi-card.warning .card-icon,
.kpi-card.warning .balance-icon,
.kpi-card.warning .stat-icon mat-icon, .kpi-card.cash .kpi-icon,
.kpi-card.cash .card-icon,
.kpi-card.cash .balance-icon,
.kpi-card.cash .stat-icon mat-icon, .kpi-card.outstanding .kpi-icon,
.kpi-card.outstanding .card-icon,
.kpi-card.outstanding .balance-icon,
.kpi-card.outstanding .stat-icon mat-icon, .kpi-card.unpaid .kpi-icon,
.kpi-card.unpaid .card-icon,
.kpi-card.unpaid .balance-icon,
.kpi-card.unpaid .stat-icon mat-icon, .kpi-card.pending .kpi-icon,
.kpi-card.pending .card-icon,
.kpi-card.pending .balance-icon,
.kpi-card.pending .stat-icon mat-icon, .kpi-card.pending-card .kpi-icon,
.kpi-card.pending-card .card-icon,
.kpi-card.pending-card .balance-icon,
.kpi-card.pending-card .stat-icon mat-icon, .kpi-card.overdue-risk .kpi-icon,
.kpi-card.overdue-risk .card-icon,
.kpi-card.overdue-risk .balance-icon,
.kpi-card.overdue-risk .stat-icon mat-icon, .kpi-card.tone-cash .kpi-icon,
.kpi-card.tone-cash .card-icon,
.kpi-card.tone-cash .balance-icon,
.kpi-card.tone-cash .stat-icon mat-icon, .kpi-card.watch .kpi-icon,
.kpi-card.watch .card-icon,
.kpi-card.watch .balance-icon,
.kpi-card.watch .stat-icon mat-icon, .kpi-card.amber .kpi-icon,
.kpi-card.amber .card-icon,
.kpi-card.amber .balance-icon,
.kpi-card.amber .stat-icon mat-icon,
.summary-card.warning .kpi-icon,
.summary-card.warning .card-icon,
.summary-card.warning .balance-icon,
.summary-card.warning .stat-icon mat-icon,
.summary-card.cash .kpi-icon,
.summary-card.cash .card-icon,
.summary-card.cash .balance-icon,
.summary-card.cash .stat-icon mat-icon,
.summary-card.outstanding .kpi-icon,
.summary-card.outstanding .card-icon,
.summary-card.outstanding .balance-icon,
.summary-card.outstanding .stat-icon mat-icon,
.summary-card.unpaid .kpi-icon,
.summary-card.unpaid .card-icon,
.summary-card.unpaid .balance-icon,
.summary-card.unpaid .stat-icon mat-icon,
.summary-card.pending .kpi-icon,
.summary-card.pending .card-icon,
.summary-card.pending .balance-icon,
.summary-card.pending .stat-icon mat-icon,
.summary-card.pending-card .kpi-icon,
.summary-card.pending-card .card-icon,
.summary-card.pending-card .balance-icon,
.summary-card.pending-card .stat-icon mat-icon,
.summary-card.overdue-risk .kpi-icon,
.summary-card.overdue-risk .card-icon,
.summary-card.overdue-risk .balance-icon,
.summary-card.overdue-risk .stat-icon mat-icon,
.summary-card.tone-cash .kpi-icon,
.summary-card.tone-cash .card-icon,
.summary-card.tone-cash .balance-icon,
.summary-card.tone-cash .stat-icon mat-icon,
.summary-card.watch .kpi-icon,
.summary-card.watch .card-icon,
.summary-card.watch .balance-icon,
.summary-card.watch .stat-icon mat-icon,
.summary-card.amber .kpi-icon,
.summary-card.amber .card-icon,
.summary-card.amber .balance-icon,
.summary-card.amber .stat-icon mat-icon,
.financial-card.warning .kpi-icon,
.financial-card.warning .card-icon,
.financial-card.warning .balance-icon,
.financial-card.warning .stat-icon mat-icon,
.financial-card.cash .kpi-icon,
.financial-card.cash .card-icon,
.financial-card.cash .balance-icon,
.financial-card.cash .stat-icon mat-icon,
.financial-card.outstanding .kpi-icon,
.financial-card.outstanding .card-icon,
.financial-card.outstanding .balance-icon,
.financial-card.outstanding .stat-icon mat-icon,
.financial-card.unpaid .kpi-icon,
.financial-card.unpaid .card-icon,
.financial-card.unpaid .balance-icon,
.financial-card.unpaid .stat-icon mat-icon,
.financial-card.pending .kpi-icon,
.financial-card.pending .card-icon,
.financial-card.pending .balance-icon,
.financial-card.pending .stat-icon mat-icon,
.financial-card.pending-card .kpi-icon,
.financial-card.pending-card .card-icon,
.financial-card.pending-card .balance-icon,
.financial-card.pending-card .stat-icon mat-icon,
.financial-card.overdue-risk .kpi-icon,
.financial-card.overdue-risk .card-icon,
.financial-card.overdue-risk .balance-icon,
.financial-card.overdue-risk .stat-icon mat-icon,
.financial-card.tone-cash .kpi-icon,
.financial-card.tone-cash .card-icon,
.financial-card.tone-cash .balance-icon,
.financial-card.tone-cash .stat-icon mat-icon,
.financial-card.watch .kpi-icon,
.financial-card.watch .card-icon,
.financial-card.watch .balance-icon,
.financial-card.watch .stat-icon mat-icon,
.financial-card.amber .kpi-icon,
.financial-card.amber .card-icon,
.financial-card.amber .balance-icon,
.financial-card.amber .stat-icon mat-icon,
.stat-card.warning .kpi-icon,
.stat-card.warning .card-icon,
.stat-card.warning .balance-icon,
.stat-card.warning .stat-icon mat-icon,
.stat-card.cash .kpi-icon,
.stat-card.cash .card-icon,
.stat-card.cash .balance-icon,
.stat-card.cash .stat-icon mat-icon,
.stat-card.outstanding .kpi-icon,
.stat-card.outstanding .card-icon,
.stat-card.outstanding .balance-icon,
.stat-card.outstanding .stat-icon mat-icon,
.stat-card.unpaid .kpi-icon,
.stat-card.unpaid .card-icon,
.stat-card.unpaid .balance-icon,
.stat-card.unpaid .stat-icon mat-icon,
.stat-card.pending .kpi-icon,
.stat-card.pending .card-icon,
.stat-card.pending .balance-icon,
.stat-card.pending .stat-icon mat-icon,
.stat-card.pending-card .kpi-icon,
.stat-card.pending-card .card-icon,
.stat-card.pending-card .balance-icon,
.stat-card.pending-card .stat-icon mat-icon,
.stat-card.overdue-risk .kpi-icon,
.stat-card.overdue-risk .card-icon,
.stat-card.overdue-risk .balance-icon,
.stat-card.overdue-risk .stat-icon mat-icon,
.stat-card.tone-cash .kpi-icon,
.stat-card.tone-cash .card-icon,
.stat-card.tone-cash .balance-icon,
.stat-card.tone-cash .stat-icon mat-icon,
.stat-card.watch .kpi-icon,
.stat-card.watch .card-icon,
.stat-card.watch .balance-icon,
.stat-card.watch .stat-icon mat-icon,
.stat-card.amber .kpi-icon,
.stat-card.amber .card-icon,
.stat-card.amber .balance-icon,
.stat-card.amber .stat-icon mat-icon,
.balance-card.warning .kpi-icon,
.balance-card.warning .card-icon,
.balance-card.warning .balance-icon,
.balance-card.warning .stat-icon mat-icon,
.balance-card.cash .kpi-icon,
.balance-card.cash .card-icon,
.balance-card.cash .balance-icon,
.balance-card.cash .stat-icon mat-icon,
.balance-card.outstanding .kpi-icon,
.balance-card.outstanding .card-icon,
.balance-card.outstanding .balance-icon,
.balance-card.outstanding .stat-icon mat-icon,
.balance-card.unpaid .kpi-icon,
.balance-card.unpaid .card-icon,
.balance-card.unpaid .balance-icon,
.balance-card.unpaid .stat-icon mat-icon,
.balance-card.pending .kpi-icon,
.balance-card.pending .card-icon,
.balance-card.pending .balance-icon,
.balance-card.pending .stat-icon mat-icon,
.balance-card.pending-card .kpi-icon,
.balance-card.pending-card .card-icon,
.balance-card.pending-card .balance-icon,
.balance-card.pending-card .stat-icon mat-icon,
.balance-card.overdue-risk .kpi-icon,
.balance-card.overdue-risk .card-icon,
.balance-card.overdue-risk .balance-icon,
.balance-card.overdue-risk .stat-icon mat-icon,
.balance-card.tone-cash .kpi-icon,
.balance-card.tone-cash .card-icon,
.balance-card.tone-cash .balance-icon,
.balance-card.tone-cash .stat-icon mat-icon,
.balance-card.watch .kpi-icon,
.balance-card.watch .card-icon,
.balance-card.watch .balance-icon,
.balance-card.watch .stat-icon mat-icon,
.balance-card.amber .kpi-icon,
.balance-card.amber .card-icon,
.balance-card.amber .balance-icon,
.balance-card.amber .stat-icon mat-icon,
.preview-kpi-card.warning .kpi-icon,
.preview-kpi-card.warning .card-icon,
.preview-kpi-card.warning .balance-icon,
.preview-kpi-card.warning .stat-icon mat-icon,
.preview-kpi-card.cash .kpi-icon,
.preview-kpi-card.cash .card-icon,
.preview-kpi-card.cash .balance-icon,
.preview-kpi-card.cash .stat-icon mat-icon,
.preview-kpi-card.outstanding .kpi-icon,
.preview-kpi-card.outstanding .card-icon,
.preview-kpi-card.outstanding .balance-icon,
.preview-kpi-card.outstanding .stat-icon mat-icon,
.preview-kpi-card.unpaid .kpi-icon,
.preview-kpi-card.unpaid .card-icon,
.preview-kpi-card.unpaid .balance-icon,
.preview-kpi-card.unpaid .stat-icon mat-icon,
.preview-kpi-card.pending .kpi-icon,
.preview-kpi-card.pending .card-icon,
.preview-kpi-card.pending .balance-icon,
.preview-kpi-card.pending .stat-icon mat-icon,
.preview-kpi-card.pending-card .kpi-icon,
.preview-kpi-card.pending-card .card-icon,
.preview-kpi-card.pending-card .balance-icon,
.preview-kpi-card.pending-card .stat-icon mat-icon,
.preview-kpi-card.overdue-risk .kpi-icon,
.preview-kpi-card.overdue-risk .card-icon,
.preview-kpi-card.overdue-risk .balance-icon,
.preview-kpi-card.overdue-risk .stat-icon mat-icon,
.preview-kpi-card.tone-cash .kpi-icon,
.preview-kpi-card.tone-cash .card-icon,
.preview-kpi-card.tone-cash .balance-icon,
.preview-kpi-card.tone-cash .stat-icon mat-icon,
.preview-kpi-card.watch .kpi-icon,
.preview-kpi-card.watch .card-icon,
.preview-kpi-card.watch .balance-icon,
.preview-kpi-card.watch .stat-icon mat-icon,
.preview-kpi-card.amber .kpi-icon,
.preview-kpi-card.amber .card-icon,
.preview-kpi-card.amber .balance-icon,
.preview-kpi-card.amber .stat-icon mat-icon {
  color: var(--color-warning) !important;
}
.kpi-card.danger, .kpi-card.negative, .kpi-card.expense, .kpi-card.advances, .kpi-card.overdue, .kpi-card.critical, .kpi-card.degraded, .kpi-card.red,
.summary-card.danger,
.summary-card.negative,
.summary-card.expense,
.summary-card.advances,
.summary-card.overdue,
.summary-card.critical,
.summary-card.degraded,
.summary-card.red,
.financial-card.danger,
.financial-card.negative,
.financial-card.expense,
.financial-card.advances,
.financial-card.overdue,
.financial-card.critical,
.financial-card.degraded,
.financial-card.red,
.stat-card.danger,
.stat-card.negative,
.stat-card.expense,
.stat-card.advances,
.stat-card.overdue,
.stat-card.critical,
.stat-card.degraded,
.stat-card.red,
.balance-card.danger,
.balance-card.negative,
.balance-card.expense,
.balance-card.advances,
.balance-card.overdue,
.balance-card.critical,
.balance-card.degraded,
.balance-card.red,
.preview-kpi-card.danger,
.preview-kpi-card.negative,
.preview-kpi-card.expense,
.preview-kpi-card.advances,
.preview-kpi-card.overdue,
.preview-kpi-card.critical,
.preview-kpi-card.degraded,
.preview-kpi-card.red {
  border-top: 4px solid var(--color-danger) !important;
  border-left: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 14%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
.kpi-card.danger .kpi-icon,
.kpi-card.danger .card-icon,
.kpi-card.danger .balance-icon,
.kpi-card.danger .stat-icon mat-icon, .kpi-card.negative .kpi-icon,
.kpi-card.negative .card-icon,
.kpi-card.negative .balance-icon,
.kpi-card.negative .stat-icon mat-icon, .kpi-card.expense .kpi-icon,
.kpi-card.expense .card-icon,
.kpi-card.expense .balance-icon,
.kpi-card.expense .stat-icon mat-icon, .kpi-card.advances .kpi-icon,
.kpi-card.advances .card-icon,
.kpi-card.advances .balance-icon,
.kpi-card.advances .stat-icon mat-icon, .kpi-card.overdue .kpi-icon,
.kpi-card.overdue .card-icon,
.kpi-card.overdue .balance-icon,
.kpi-card.overdue .stat-icon mat-icon, .kpi-card.critical .kpi-icon,
.kpi-card.critical .card-icon,
.kpi-card.critical .balance-icon,
.kpi-card.critical .stat-icon mat-icon, .kpi-card.degraded .kpi-icon,
.kpi-card.degraded .card-icon,
.kpi-card.degraded .balance-icon,
.kpi-card.degraded .stat-icon mat-icon, .kpi-card.red .kpi-icon,
.kpi-card.red .card-icon,
.kpi-card.red .balance-icon,
.kpi-card.red .stat-icon mat-icon,
.summary-card.danger .kpi-icon,
.summary-card.danger .card-icon,
.summary-card.danger .balance-icon,
.summary-card.danger .stat-icon mat-icon,
.summary-card.negative .kpi-icon,
.summary-card.negative .card-icon,
.summary-card.negative .balance-icon,
.summary-card.negative .stat-icon mat-icon,
.summary-card.expense .kpi-icon,
.summary-card.expense .card-icon,
.summary-card.expense .balance-icon,
.summary-card.expense .stat-icon mat-icon,
.summary-card.advances .kpi-icon,
.summary-card.advances .card-icon,
.summary-card.advances .balance-icon,
.summary-card.advances .stat-icon mat-icon,
.summary-card.overdue .kpi-icon,
.summary-card.overdue .card-icon,
.summary-card.overdue .balance-icon,
.summary-card.overdue .stat-icon mat-icon,
.summary-card.critical .kpi-icon,
.summary-card.critical .card-icon,
.summary-card.critical .balance-icon,
.summary-card.critical .stat-icon mat-icon,
.summary-card.degraded .kpi-icon,
.summary-card.degraded .card-icon,
.summary-card.degraded .balance-icon,
.summary-card.degraded .stat-icon mat-icon,
.summary-card.red .kpi-icon,
.summary-card.red .card-icon,
.summary-card.red .balance-icon,
.summary-card.red .stat-icon mat-icon,
.financial-card.danger .kpi-icon,
.financial-card.danger .card-icon,
.financial-card.danger .balance-icon,
.financial-card.danger .stat-icon mat-icon,
.financial-card.negative .kpi-icon,
.financial-card.negative .card-icon,
.financial-card.negative .balance-icon,
.financial-card.negative .stat-icon mat-icon,
.financial-card.expense .kpi-icon,
.financial-card.expense .card-icon,
.financial-card.expense .balance-icon,
.financial-card.expense .stat-icon mat-icon,
.financial-card.advances .kpi-icon,
.financial-card.advances .card-icon,
.financial-card.advances .balance-icon,
.financial-card.advances .stat-icon mat-icon,
.financial-card.overdue .kpi-icon,
.financial-card.overdue .card-icon,
.financial-card.overdue .balance-icon,
.financial-card.overdue .stat-icon mat-icon,
.financial-card.critical .kpi-icon,
.financial-card.critical .card-icon,
.financial-card.critical .balance-icon,
.financial-card.critical .stat-icon mat-icon,
.financial-card.degraded .kpi-icon,
.financial-card.degraded .card-icon,
.financial-card.degraded .balance-icon,
.financial-card.degraded .stat-icon mat-icon,
.financial-card.red .kpi-icon,
.financial-card.red .card-icon,
.financial-card.red .balance-icon,
.financial-card.red .stat-icon mat-icon,
.stat-card.danger .kpi-icon,
.stat-card.danger .card-icon,
.stat-card.danger .balance-icon,
.stat-card.danger .stat-icon mat-icon,
.stat-card.negative .kpi-icon,
.stat-card.negative .card-icon,
.stat-card.negative .balance-icon,
.stat-card.negative .stat-icon mat-icon,
.stat-card.expense .kpi-icon,
.stat-card.expense .card-icon,
.stat-card.expense .balance-icon,
.stat-card.expense .stat-icon mat-icon,
.stat-card.advances .kpi-icon,
.stat-card.advances .card-icon,
.stat-card.advances .balance-icon,
.stat-card.advances .stat-icon mat-icon,
.stat-card.overdue .kpi-icon,
.stat-card.overdue .card-icon,
.stat-card.overdue .balance-icon,
.stat-card.overdue .stat-icon mat-icon,
.stat-card.critical .kpi-icon,
.stat-card.critical .card-icon,
.stat-card.critical .balance-icon,
.stat-card.critical .stat-icon mat-icon,
.stat-card.degraded .kpi-icon,
.stat-card.degraded .card-icon,
.stat-card.degraded .balance-icon,
.stat-card.degraded .stat-icon mat-icon,
.stat-card.red .kpi-icon,
.stat-card.red .card-icon,
.stat-card.red .balance-icon,
.stat-card.red .stat-icon mat-icon,
.balance-card.danger .kpi-icon,
.balance-card.danger .card-icon,
.balance-card.danger .balance-icon,
.balance-card.danger .stat-icon mat-icon,
.balance-card.negative .kpi-icon,
.balance-card.negative .card-icon,
.balance-card.negative .balance-icon,
.balance-card.negative .stat-icon mat-icon,
.balance-card.expense .kpi-icon,
.balance-card.expense .card-icon,
.balance-card.expense .balance-icon,
.balance-card.expense .stat-icon mat-icon,
.balance-card.advances .kpi-icon,
.balance-card.advances .card-icon,
.balance-card.advances .balance-icon,
.balance-card.advances .stat-icon mat-icon,
.balance-card.overdue .kpi-icon,
.balance-card.overdue .card-icon,
.balance-card.overdue .balance-icon,
.balance-card.overdue .stat-icon mat-icon,
.balance-card.critical .kpi-icon,
.balance-card.critical .card-icon,
.balance-card.critical .balance-icon,
.balance-card.critical .stat-icon mat-icon,
.balance-card.degraded .kpi-icon,
.balance-card.degraded .card-icon,
.balance-card.degraded .balance-icon,
.balance-card.degraded .stat-icon mat-icon,
.balance-card.red .kpi-icon,
.balance-card.red .card-icon,
.balance-card.red .balance-icon,
.balance-card.red .stat-icon mat-icon,
.preview-kpi-card.danger .kpi-icon,
.preview-kpi-card.danger .card-icon,
.preview-kpi-card.danger .balance-icon,
.preview-kpi-card.danger .stat-icon mat-icon,
.preview-kpi-card.negative .kpi-icon,
.preview-kpi-card.negative .card-icon,
.preview-kpi-card.negative .balance-icon,
.preview-kpi-card.negative .stat-icon mat-icon,
.preview-kpi-card.expense .kpi-icon,
.preview-kpi-card.expense .card-icon,
.preview-kpi-card.expense .balance-icon,
.preview-kpi-card.expense .stat-icon mat-icon,
.preview-kpi-card.advances .kpi-icon,
.preview-kpi-card.advances .card-icon,
.preview-kpi-card.advances .balance-icon,
.preview-kpi-card.advances .stat-icon mat-icon,
.preview-kpi-card.overdue .kpi-icon,
.preview-kpi-card.overdue .card-icon,
.preview-kpi-card.overdue .balance-icon,
.preview-kpi-card.overdue .stat-icon mat-icon,
.preview-kpi-card.critical .kpi-icon,
.preview-kpi-card.critical .card-icon,
.preview-kpi-card.critical .balance-icon,
.preview-kpi-card.critical .stat-icon mat-icon,
.preview-kpi-card.degraded .kpi-icon,
.preview-kpi-card.degraded .card-icon,
.preview-kpi-card.degraded .balance-icon,
.preview-kpi-card.degraded .stat-icon mat-icon,
.preview-kpi-card.red .kpi-icon,
.preview-kpi-card.red .card-icon,
.preview-kpi-card.red .balance-icon,
.preview-kpi-card.red .stat-icon mat-icon {
  color: var(--color-danger) !important;
}
.kpi-card.average, .kpi-card.accent, .kpi-card.concentration, .kpi-card.purple,
.summary-card.average,
.summary-card.accent,
.summary-card.concentration,
.summary-card.purple,
.financial-card.average,
.financial-card.accent,
.financial-card.concentration,
.financial-card.purple,
.stat-card.average,
.stat-card.accent,
.stat-card.concentration,
.stat-card.purple,
.balance-card.average,
.balance-card.accent,
.balance-card.concentration,
.balance-card.purple,
.preview-kpi-card.average,
.preview-kpi-card.accent,
.preview-kpi-card.concentration,
.preview-kpi-card.purple {
  border-top: 4px solid var(--color-accent) !important;
  border-left: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
.kpi-card.average .kpi-icon,
.kpi-card.average .card-icon,
.kpi-card.average .balance-icon,
.kpi-card.average .stat-icon mat-icon, .kpi-card.accent .kpi-icon,
.kpi-card.accent .card-icon,
.kpi-card.accent .balance-icon,
.kpi-card.accent .stat-icon mat-icon, .kpi-card.concentration .kpi-icon,
.kpi-card.concentration .card-icon,
.kpi-card.concentration .balance-icon,
.kpi-card.concentration .stat-icon mat-icon, .kpi-card.purple .kpi-icon,
.kpi-card.purple .card-icon,
.kpi-card.purple .balance-icon,
.kpi-card.purple .stat-icon mat-icon,
.summary-card.average .kpi-icon,
.summary-card.average .card-icon,
.summary-card.average .balance-icon,
.summary-card.average .stat-icon mat-icon,
.summary-card.accent .kpi-icon,
.summary-card.accent .card-icon,
.summary-card.accent .balance-icon,
.summary-card.accent .stat-icon mat-icon,
.summary-card.concentration .kpi-icon,
.summary-card.concentration .card-icon,
.summary-card.concentration .balance-icon,
.summary-card.concentration .stat-icon mat-icon,
.summary-card.purple .kpi-icon,
.summary-card.purple .card-icon,
.summary-card.purple .balance-icon,
.summary-card.purple .stat-icon mat-icon,
.financial-card.average .kpi-icon,
.financial-card.average .card-icon,
.financial-card.average .balance-icon,
.financial-card.average .stat-icon mat-icon,
.financial-card.accent .kpi-icon,
.financial-card.accent .card-icon,
.financial-card.accent .balance-icon,
.financial-card.accent .stat-icon mat-icon,
.financial-card.concentration .kpi-icon,
.financial-card.concentration .card-icon,
.financial-card.concentration .balance-icon,
.financial-card.concentration .stat-icon mat-icon,
.financial-card.purple .kpi-icon,
.financial-card.purple .card-icon,
.financial-card.purple .balance-icon,
.financial-card.purple .stat-icon mat-icon,
.stat-card.average .kpi-icon,
.stat-card.average .card-icon,
.stat-card.average .balance-icon,
.stat-card.average .stat-icon mat-icon,
.stat-card.accent .kpi-icon,
.stat-card.accent .card-icon,
.stat-card.accent .balance-icon,
.stat-card.accent .stat-icon mat-icon,
.stat-card.concentration .kpi-icon,
.stat-card.concentration .card-icon,
.stat-card.concentration .balance-icon,
.stat-card.concentration .stat-icon mat-icon,
.stat-card.purple .kpi-icon,
.stat-card.purple .card-icon,
.stat-card.purple .balance-icon,
.stat-card.purple .stat-icon mat-icon,
.balance-card.average .kpi-icon,
.balance-card.average .card-icon,
.balance-card.average .balance-icon,
.balance-card.average .stat-icon mat-icon,
.balance-card.accent .kpi-icon,
.balance-card.accent .card-icon,
.balance-card.accent .balance-icon,
.balance-card.accent .stat-icon mat-icon,
.balance-card.concentration .kpi-icon,
.balance-card.concentration .card-icon,
.balance-card.concentration .balance-icon,
.balance-card.concentration .stat-icon mat-icon,
.balance-card.purple .kpi-icon,
.balance-card.purple .card-icon,
.balance-card.purple .balance-icon,
.balance-card.purple .stat-icon mat-icon,
.preview-kpi-card.average .kpi-icon,
.preview-kpi-card.average .card-icon,
.preview-kpi-card.average .balance-icon,
.preview-kpi-card.average .stat-icon mat-icon,
.preview-kpi-card.accent .kpi-icon,
.preview-kpi-card.accent .card-icon,
.preview-kpi-card.accent .balance-icon,
.preview-kpi-card.accent .stat-icon mat-icon,
.preview-kpi-card.concentration .kpi-icon,
.preview-kpi-card.concentration .card-icon,
.preview-kpi-card.concentration .balance-icon,
.preview-kpi-card.concentration .stat-icon mat-icon,
.preview-kpi-card.purple .kpi-icon,
.preview-kpi-card.purple .card-icon,
.preview-kpi-card.purple .balance-icon,
.preview-kpi-card.purple .stat-icon mat-icon {
  color: var(--color-accent) !important;
}
.kpi-card.staff, .kpi-card.cyan, .kpi-card.collection-rate, .kpi-card.payment-metric, .kpi-card.next-due,
.summary-card.staff,
.summary-card.cyan,
.summary-card.collection-rate,
.summary-card.payment-metric,
.summary-card.next-due,
.financial-card.staff,
.financial-card.cyan,
.financial-card.collection-rate,
.financial-card.payment-metric,
.financial-card.next-due,
.stat-card.staff,
.stat-card.cyan,
.stat-card.collection-rate,
.stat-card.payment-metric,
.stat-card.next-due,
.balance-card.staff,
.balance-card.cyan,
.balance-card.collection-rate,
.balance-card.payment-metric,
.balance-card.next-due,
.preview-kpi-card.staff,
.preview-kpi-card.cyan,
.preview-kpi-card.collection-rate,
.preview-kpi-card.payment-metric,
.preview-kpi-card.next-due {
  border-top: 4px solid #00b4d8 !important;
  border-left: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, #00b4d8 14%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
.kpi-card.staff .kpi-icon,
.kpi-card.staff .card-icon,
.kpi-card.staff .balance-icon,
.kpi-card.staff .stat-icon mat-icon, .kpi-card.cyan .kpi-icon,
.kpi-card.cyan .card-icon,
.kpi-card.cyan .balance-icon,
.kpi-card.cyan .stat-icon mat-icon, .kpi-card.collection-rate .kpi-icon,
.kpi-card.collection-rate .card-icon,
.kpi-card.collection-rate .balance-icon,
.kpi-card.collection-rate .stat-icon mat-icon, .kpi-card.payment-metric .kpi-icon,
.kpi-card.payment-metric .card-icon,
.kpi-card.payment-metric .balance-icon,
.kpi-card.payment-metric .stat-icon mat-icon, .kpi-card.next-due .kpi-icon,
.kpi-card.next-due .card-icon,
.kpi-card.next-due .balance-icon,
.kpi-card.next-due .stat-icon mat-icon,
.summary-card.staff .kpi-icon,
.summary-card.staff .card-icon,
.summary-card.staff .balance-icon,
.summary-card.staff .stat-icon mat-icon,
.summary-card.cyan .kpi-icon,
.summary-card.cyan .card-icon,
.summary-card.cyan .balance-icon,
.summary-card.cyan .stat-icon mat-icon,
.summary-card.collection-rate .kpi-icon,
.summary-card.collection-rate .card-icon,
.summary-card.collection-rate .balance-icon,
.summary-card.collection-rate .stat-icon mat-icon,
.summary-card.payment-metric .kpi-icon,
.summary-card.payment-metric .card-icon,
.summary-card.payment-metric .balance-icon,
.summary-card.payment-metric .stat-icon mat-icon,
.summary-card.next-due .kpi-icon,
.summary-card.next-due .card-icon,
.summary-card.next-due .balance-icon,
.summary-card.next-due .stat-icon mat-icon,
.financial-card.staff .kpi-icon,
.financial-card.staff .card-icon,
.financial-card.staff .balance-icon,
.financial-card.staff .stat-icon mat-icon,
.financial-card.cyan .kpi-icon,
.financial-card.cyan .card-icon,
.financial-card.cyan .balance-icon,
.financial-card.cyan .stat-icon mat-icon,
.financial-card.collection-rate .kpi-icon,
.financial-card.collection-rate .card-icon,
.financial-card.collection-rate .balance-icon,
.financial-card.collection-rate .stat-icon mat-icon,
.financial-card.payment-metric .kpi-icon,
.financial-card.payment-metric .card-icon,
.financial-card.payment-metric .balance-icon,
.financial-card.payment-metric .stat-icon mat-icon,
.financial-card.next-due .kpi-icon,
.financial-card.next-due .card-icon,
.financial-card.next-due .balance-icon,
.financial-card.next-due .stat-icon mat-icon,
.stat-card.staff .kpi-icon,
.stat-card.staff .card-icon,
.stat-card.staff .balance-icon,
.stat-card.staff .stat-icon mat-icon,
.stat-card.cyan .kpi-icon,
.stat-card.cyan .card-icon,
.stat-card.cyan .balance-icon,
.stat-card.cyan .stat-icon mat-icon,
.stat-card.collection-rate .kpi-icon,
.stat-card.collection-rate .card-icon,
.stat-card.collection-rate .balance-icon,
.stat-card.collection-rate .stat-icon mat-icon,
.stat-card.payment-metric .kpi-icon,
.stat-card.payment-metric .card-icon,
.stat-card.payment-metric .balance-icon,
.stat-card.payment-metric .stat-icon mat-icon,
.stat-card.next-due .kpi-icon,
.stat-card.next-due .card-icon,
.stat-card.next-due .balance-icon,
.stat-card.next-due .stat-icon mat-icon,
.balance-card.staff .kpi-icon,
.balance-card.staff .card-icon,
.balance-card.staff .balance-icon,
.balance-card.staff .stat-icon mat-icon,
.balance-card.cyan .kpi-icon,
.balance-card.cyan .card-icon,
.balance-card.cyan .balance-icon,
.balance-card.cyan .stat-icon mat-icon,
.balance-card.collection-rate .kpi-icon,
.balance-card.collection-rate .card-icon,
.balance-card.collection-rate .balance-icon,
.balance-card.collection-rate .stat-icon mat-icon,
.balance-card.payment-metric .kpi-icon,
.balance-card.payment-metric .card-icon,
.balance-card.payment-metric .balance-icon,
.balance-card.payment-metric .stat-icon mat-icon,
.balance-card.next-due .kpi-icon,
.balance-card.next-due .card-icon,
.balance-card.next-due .balance-icon,
.balance-card.next-due .stat-icon mat-icon,
.preview-kpi-card.staff .kpi-icon,
.preview-kpi-card.staff .card-icon,
.preview-kpi-card.staff .balance-icon,
.preview-kpi-card.staff .stat-icon mat-icon,
.preview-kpi-card.cyan .kpi-icon,
.preview-kpi-card.cyan .card-icon,
.preview-kpi-card.cyan .balance-icon,
.preview-kpi-card.cyan .stat-icon mat-icon,
.preview-kpi-card.collection-rate .kpi-icon,
.preview-kpi-card.collection-rate .card-icon,
.preview-kpi-card.collection-rate .balance-icon,
.preview-kpi-card.collection-rate .stat-icon mat-icon,
.preview-kpi-card.payment-metric .kpi-icon,
.preview-kpi-card.payment-metric .card-icon,
.preview-kpi-card.payment-metric .balance-icon,
.preview-kpi-card.payment-metric .stat-icon mat-icon,
.preview-kpi-card.next-due .kpi-icon,
.preview-kpi-card.next-due .card-icon,
.preview-kpi-card.next-due .balance-icon,
.preview-kpi-card.next-due .stat-icon mat-icon {
  color: #00b4d8 !important;
}
.kpi-card.neutral,
.summary-card.neutral,
.financial-card.neutral,
.stat-card.neutral,
.balance-card.neutral,
.preview-kpi-card.neutral {
  border-top: 4px solid var(--color-text-muted) !important;
  border-left: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-text-muted) 8%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
.kpi-card.neutral .kpi-icon,
.kpi-card.neutral .card-icon,
.kpi-card.neutral .balance-icon,
.kpi-card.neutral .stat-icon mat-icon,
.summary-card.neutral .kpi-icon,
.summary-card.neutral .card-icon,
.summary-card.neutral .balance-icon,
.summary-card.neutral .stat-icon mat-icon,
.financial-card.neutral .kpi-icon,
.financial-card.neutral .card-icon,
.financial-card.neutral .balance-icon,
.financial-card.neutral .stat-icon mat-icon,
.stat-card.neutral .kpi-icon,
.stat-card.neutral .card-icon,
.stat-card.neutral .balance-icon,
.stat-card.neutral .stat-icon mat-icon,
.balance-card.neutral .kpi-icon,
.balance-card.neutral .card-icon,
.balance-card.neutral .balance-icon,
.balance-card.neutral .stat-icon mat-icon,
.preview-kpi-card.neutral .kpi-icon,
.preview-kpi-card.neutral .card-icon,
.preview-kpi-card.neutral .balance-icon,
.preview-kpi-card.neutral .stat-icon mat-icon {
  color: var(--color-text-muted) !important;
}

.wizard-card,
.module-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
}

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-muted);
}

.empty-state mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  opacity: 0.4;
  margin: 0 auto 8px;
}

.empty-state p {
  margin: 0;
}

.app-grid-empty-row .app-grid-empty-cell {
  padding: 48px 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-weight: 500;
  border-bottom: 0;
  background: transparent;
}

/* Hide full grid chrome when there are no rows and only matNoDataRow remains. */
.mat-mdc-table:has(.app-grid-empty-row) .mat-mdc-header-row,
.mat-mdc-table:has(.app-grid-empty-row) .mdc-data-table__header-row,
.mat-mdc-table:has(.app-grid-empty-row) .mat-mdc-row:not(.app-grid-empty-row),
.mat-mdc-table:has(.app-grid-empty-row) .mdc-data-table__row:not(.app-grid-empty-row) {
  display: none;
}

.mat-mdc-table:has(.app-grid-empty-row) {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.modern-form-content,
.linear-accordion {
  display: grid;
  gap: var(--space-3);
}

.linear-accordion .mat-expansion-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: hidden;
  background: var(--color-surface);
}

.linear-accordion .mat-expansion-panel-header {
  background: var(--color-surface-soft);
}

.linear-accordion .mat-expansion-panel-body {
  padding: var(--space-4);
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.full-width {
  grid-column: 1/-1;
}

.checkbox-row {
  display: flex;
  align-items: center;
}

.sheet-cards-container {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.sheet-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--space-3);
  background: var(--color-surface-soft);
}

.sheet-card mat-card-header {
  border-bottom: 1px solid var(--color-border);
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0;
  padding: 0 0 var(--space-3);
}

.sheet-card mat-card-content {
  padding: var(--space-3) 0 0;
}

/* Employee module layout consistency */
.employee-page-shell {
  width: min(100%, var(--page-max-width));
  min-height: calc(100vh - 120px);
  margin: 0 auto;
  padding: var(--space-6);
  --employee-card-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
  --employee-surface-muted: color-mix(
    in srgb,
    var(--color-surface-soft) 82%,
    var(--color-surface)
  );
  --employee-row-weekoff: color-mix(
    in srgb,
    var(--color-warning) 14%,
    var(--color-surface)
  );
  --employee-row-absent: color-mix(
    in srgb,
    var(--color-danger) 14%,
    var(--color-surface)
  );
  --employee-row-leave: color-mix(
    in srgb,
    var(--color-primary) 14%,
    var(--color-surface)
  );
  --employee-row-halfday: color-mix(
    in srgb,
    var(--color-warning) 10%,
    var(--color-surface)
  );
}

.employee-page-shell .page-header {
  margin-bottom: 20px;
}

.employee-page-shell .page-header .header-left,
.employee-page-shell .page-header .header-section,
.employee-page-shell .page-header > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.employee-page-shell app-back-button .back-button-text {
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 28px;
  border-radius: 6px;
}

.employee-page-shell app-back-button .back-button-text mat-icon {
  font-size: 14px;
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.employee-page-shell .page-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.employee-page-shell .page-title:not(:has(mat-icon))::before {
  content: "badge";
  font-family: "Material Icons";
  font-size: 20px;
  line-height: 1;
  color: #1976d2;
}

.employee-page-shell .form-card,
.employee-page-shell .table-card,
.employee-page-shell .module-card,
.employee-page-shell .search-card {
  width: 100%;
  max-width: none;
}

.employee-page-shell .page-subtitle,
.employee-page-shell .record-count,
.employee-page-shell .muted-text {
  color: var(--color-text-muted);
}

.employee-page-shell .selection-card,
.employee-page-shell .summary-card,
.employee-page-shell .attendance-table-card,
.employee-page-shell .employee-selection-card,
.employee-page-shell .history-summary-card,
.employee-page-shell .history-table-card,
.employee-page-shell .empty-state-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--employee-card-shadow);
}

.employee-page-shell .table-wrapper,
.employee-page-shell .table-wrap,
.employee-page-shell .calendar-popup {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--employee-card-shadow);
}

.employee-page-shell .attendance-table,
.employee-page-shell .salary-history-table {
  background: transparent;
}

.employee-page-shell .attendance-table th,
.employee-page-shell .attendance-table td,
.employee-page-shell .salary-history-table th,
.employee-page-shell .salary-history-table td {
  color: var(--color-text);
}

.employee-page-shell .attendance-table th,
.employee-page-shell .salary-history-table th {
  background: var(--employee-surface-muted);
  border-bottom: 1px solid var(--color-border);
}

.employee-page-shell .attendance-table td,
.employee-page-shell .salary-history-table td {
  border-bottom: 1px solid var(--color-border);
}

.employee-page-shell .time-input,
.employee-page-shell .notes-input {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.employee-page-shell .actions-footer {
  background: var(--employee-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.employee-page-shell .empty-state mat-icon {
  color: var(--color-text-muted);
}

.employee-page-shell .empty-state p {
  color: var(--color-text-muted);
}

.employee-page-shell .sunday-row {
  background: var(--employee-row-weekoff) !important;
}

.employee-page-shell .absent-row {
  background: var(--employee-row-absent) !important;
}

.employee-page-shell .leave-row {
  background: var(--employee-row-leave) !important;
}

.employee-page-shell .halfday-row {
  background: var(--employee-row-halfday) !important;
}

/* Avoid placeholder and floating label overlap in Material form fields */
.mat-mdc-form-field:has(.mdc-floating-label) .mdc-text-field__input::placeholder,
.mat-mdc-form-field:has(.mdc-floating-label) textarea.mdc-text-field__input::placeholder {
  opacity: 0;
}

.mat-mdc-form-field:has(.mdc-floating-label).mat-focused .mdc-text-field__input::placeholder,
.mat-mdc-form-field:has(.mdc-floating-label).mat-focused textarea.mdc-text-field__input::placeholder {
  opacity: 0;
}

.mat-mdc-form-field .mdc-floating-label {
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .employee-page-shell {
    padding: 16px;
    min-height: calc(100vh - 90px);
  }
  .page-container {
    padding: 16px;
  }
  .form-card,
  .table-card,
  .chart-card,
  .search-card,
  .summary-card,
  .financial-card,
  .kpi-card,
  .stat-card,
  .expense-chart-card,
  .history-summary-card,
  .history-table-card,
  .attendance-table-card {
    border-radius: var(--radius-md);
  }
  .mat-mdc-card-header {
    padding: 10px 12px 0;
  }
  .mat-mdc-card-content {
    padding: 12px;
  }
}
.sheet-row-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: var(--space-3);
}

.done-panel {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, var(--color-primary-soft) 0%, var(--color-surface-soft) 100%);
  border: 1px solid var(--color-border);
}

.table-wrap,
.table-wrapper,
.table-shell {
  overflow-x: auto;
}

.mat-mdc-table,
table[mat-table] {
  width: 100%;
  background: transparent;
}

.mat-mdc-header-cell,
.mat-mdc-cell,
th,
td {
  white-space: nowrap;
}

.mat-mdc-header-cell,
th {
  color: var(--color-text);
  font-weight: 700;
}

.mat-mdc-cell,
td {
  color: var(--color-text);
}

.mat-mdc-button-base:not(.mat-mdc-icon-button):not(.mat-mdc-fab):not(.mat-mdc-mini-fab) {
  min-height: var(--control-height);
  min-width: var(--control-min-width);
  border-radius: var(--radius-sm);
}

/* Override Material default min-width for fetch-price-button suffix */
button.fetch-price-button {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
}

.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-icon-suffix {
  color: var(--color-primary) !important;
}

.mat-mdc-row,
tr[mat-row] {
  transition: background-color 0.2s ease;
}

.mat-mdc-row:hover,
tr[mat-row]:hover {
  background: color-mix(in srgb, var(--color-primary-soft) 45%, transparent);
}

.mat-mdc-cell .mat-mdc-icon-button,
td .mat-mdc-icon-button {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center center;
}
.mat-mdc-cell .mat-mdc-icon-button:hover:not([disabled]),
td .mat-mdc-icon-button:hover:not([disabled]) {
  transform: scale(1.08);
}

/* Prevent icon button hover scaling on bottom rows from triggering container vertical scrollbar */
tr:last-child td .mat-mdc-icon-button:hover,
tr.mat-mdc-row:last-of-type td .mat-mdc-icon-button:hover,
tbody tr:last-child td .mat-mdc-icon-button:hover {
  transform: scale(1.08);
  transform-origin: center top !important;
}

tr:last-child td,
tr.mat-mdc-row:last-of-type td,
tbody tr:last-child td {
  padding-bottom: 8px;
}

.delete-popover-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: visible;
  z-index: auto;
}

.delete-popover-anchor:has(.delete-popover) {
  z-index: 1150 !important;
}

.delete-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 2200;
  min-width: 220px;
  max-width: min(280px, 100vw - 32px);
  width: max-content;
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  opacity: 1 !important;
  color: var(--color-text);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--color-border);
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate;
}

/* When delete is clicked from bottom/last rows of a table, pop UP above the row/table so it is always accessible without scrolling */
tr:last-child .delete-popover,
tr:nth-last-child(-n+2) .delete-popover,
tr.mat-mdc-row:last-of-type .delete-popover,
tr.mat-mdc-row:nth-last-of-type(-n+2) .delete-popover,
tbody tr:last-child .delete-popover,
tbody tr:nth-last-child(-n+2) .delete-popover {
  top: auto !important;
  bottom: calc(100% + 4px) !important;
}

body.theme-light .delete-popover {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

html[data-theme=dark] .delete-popover {
  background: #19263d !important;
  background-color: #19263d !important;
}

.delete-popover p {
  margin: 0 0 6px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
}

.delete-popover small {
  display: block;
  margin-bottom: 8px;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
}

.delete-popover-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
}

.delete-popover-actions .mat-mdc-button-base {
  min-height: 28px !important;
  min-width: 54px !important;
  height: 28px;
  padding: 0 10px !important;
  font-size: 11px !important;
  line-height: 1;
  flex-shrink: 0;
}

.delete-popover-actions .delete-popover-no:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Ensure confirmation popovers are elevated over other rows and never clipped inside Material data-table cells. */
tr:has(.delete-popover-anchor:has(.delete-popover)),
tr:has(.delete-popover),
.mat-mdc-row:has(.delete-popover-anchor:has(.delete-popover)),
.mat-mdc-row:has(.delete-popover),
tbody tr:has(.delete-popover) {
  position: relative !important;
  z-index: 1100 !important;
}

.mat-mdc-cell:has(.delete-popover-anchor),
.mat-mdc-header-cell:has(.delete-popover-anchor),
td:has(.delete-popover-anchor),
th:has(.delete-popover-anchor) {
  overflow: visible !important;
  position: relative;
}

td:has(.delete-popover),
.mat-mdc-cell:has(.delete-popover) {
  position: relative !important;
  z-index: 1110 !important;
}

/* Ensure buttons and icons do not punch through the popover */
.mat-mdc-cell .mat-mdc-icon-button,
td .mat-mdc-icon-button {
  z-index: 1;
}

.mat-mdc-cell:has(.delete-popover) .delete-popover-anchor:has(.delete-popover),
td:has(.delete-popover) .delete-popover-anchor:has(.delete-popover) {
  z-index: 1150 !important;
}

/* Keep horizontal scroll while allowing popover visibility around action columns. */
.table-wrap,
.table-wrapper,
.table-shell,
.table-container {
  overflow-x: auto;
  overflow-y: visible;
}

.mat-mdc-form-field,
.mdc-text-field,
.filter-field,
.search-field,
.app-filter-field {
  width: 100%;
}

.mat-mdc-form-field {
  --mdc-filled-text-field-container-color: var(--color-surface-soft);
  --mdc-filled-text-field-input-text-color: var(--color-text);
  --mdc-filled-text-field-label-text-color: var(--color-text-muted);
  --mdc-filled-text-field-focus-label-text-color: var(--color-primary-strong);
  --mdc-filled-text-field-hover-label-text-color: var(--color-text);
  --mdc-filled-text-field-active-indicator-color: var(--color-border-strong);
  --mdc-filled-text-field-hover-active-indicator-color: var(--color-primary);
  --mdc-filled-text-field-focus-active-indicator-color: var(
    --color-primary-strong
  );
  --mdc-filled-text-field-caret-color: var(--color-primary-strong);
  --mdc-outlined-text-field-input-text-color: var(--color-text);
  --mdc-outlined-text-field-label-text-color: var(--color-text-muted);
  --mdc-outlined-text-field-focus-label-text-color: var(--color-primary-strong);
  --mdc-outlined-text-field-hover-label-text-color: var(--color-text);
  --mdc-outlined-text-field-outline-color: var(--color-border-strong);
  --mdc-outlined-text-field-hover-outline-color: var(--color-primary);
  --mdc-outlined-text-field-focus-outline-color: var(--color-primary-strong);
  --mdc-outlined-text-field-caret-color: var(--color-primary-strong);
}

.mdc-text-field--filled,
.mdc-text-field--outlined,
.mat-mdc-text-field-wrapper,
.mat-mdc-form-field-focus-overlay {
  background: var(--color-surface-soft) !important;
}

.mat-mdc-select-panel,
.mat-datepicker-content,
.mat-mdc-autocomplete-panel,
.mat-mdc-menu-panel,
.mat-mdc-dialog-surface {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-2) !important;
}

.mat-mdc-option,
.mat-mdc-menu-item,
.mat-calendar,
.mat-calendar-table-header,
.mat-calendar-body,
.mat-calendar-body-cell,
.mat-calendar-body-label,
.mat-mdc-select-value,
.mat-mdc-select-value-text,
.mat-mdc-option .mdc-list-item__primary-text,
.mat-mdc-menu-item .mat-mdc-menu-item-text {
  color: var(--color-text) !important;
}

.mat-mdc-option:hover:not(.mdc-list-item--disabled),
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled),
.mat-mdc-menu-item:hover:not([disabled]) {
  background: color-mix(in srgb, var(--color-primary-soft) 70%, var(--color-surface)) !important;
}

.mat-expansion-panel {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

.mat-expansion-panel-header {
  background: var(--color-surface-elevated) !important;
}

.mat-expansion-panel-header-title,
.mat-expansion-panel-header-description,
.mat-expansion-panel-body {
  color: var(--color-text) !important;
}

.mat-expansion-indicator::after {
  color: var(--color-text-muted) !important;
}

.mat-divider,
.mat-mdc-divider {
  border-top-color: var(--color-border) !important;
  border-color: var(--color-border) !important;
}

.mat-mdc-checkbox {
  --mdc-checkbox-unselected-icon-color: var(--color-border-strong);
  --mdc-checkbox-unselected-hover-icon-color: var(--color-primary);
  --mdc-checkbox-unselected-focus-icon-color: var(--color-primary);
  --mdc-checkbox-selected-icon-color: var(--color-primary);
  --mdc-checkbox-selected-hover-icon-color: var(--color-primary-strong);
  --mdc-checkbox-selected-focus-icon-color: var(--color-primary-strong);
  --mdc-checkbox-selected-checkmark-color: var(--color-surface);
  --mdc-checkbox-unselected-pressed-icon-color: var(--color-primary);
  --mdc-checkbox-selected-pressed-icon-color: var(--color-primary-strong);
}

.mat-mdc-checkbox .mdc-form-field,
.mat-mdc-checkbox .mdc-label,
.mat-mdc-radio-button .mdc-label {
  color: var(--color-text) !important;
}

.mat-mdc-radio-button {
  --mdc-radio-unselected-icon-color: var(--color-border-strong);
  --mdc-radio-unselected-hover-icon-color: var(--color-primary);
  --mdc-radio-unselected-focus-icon-color: var(--color-primary);
  --mdc-radio-selected-icon-color: var(--color-primary);
  --mdc-radio-selected-hover-icon-color: var(--color-primary-strong);
  --mdc-radio-selected-focus-icon-color: var(--color-primary-strong);
}

.mat-mdc-slide-toggle {
  --mdc-switch-selected-track-color: var(--color-primary);
  --mdc-switch-selected-handle-color: var(--color-surface);
  --mdc-switch-unselected-track-color: var(--color-border-strong);
  --mdc-switch-unselected-handle-color: var(--color-surface);
}

.mat-calendar-body-selected {
  background-color: var(--color-primary) !important;
  color: var(--color-surface) !important;
}

.mat-calendar-body-today:not(.mat-calendar-body-selected) {
  border-color: var(--color-primary) !important;
  background: color-mix(in srgb, var(--color-primary-soft) 75%, var(--color-surface)) !important;
}

.header-actions .filter-field,
.header-actions .search-field,
.app-filter-field {
  min-width: var(--input-min-width);
  width: min(320px, 100%);
}

/* Shared section spacing and visual separators across pages. */
.page-container .form-section,
.page-container .table-section,
.page-container .grid-section,
.page-container .filter-section,
.page-container .controls-section {
  margin-top: var(--space-4);
}

.page-container .form-section,
.page-container .filter-section,
.page-container .controls-section {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.page-container .table-section .table-container,
.page-container .grid-section .table-container,
.page-container .table-section .table-wrapper,
.page-container .grid-section .table-wrapper {
  margin-top: var(--space-3);
}

/*
 * Application-wide form/grid composition pattern
 * 1) Keep add/edit form visually separate from grid/list section.
 * 2) Keep Save/Cancel actions right-aligned.
 * 3) Add a horizontal separator above form actions.
 */
.page-container .form-card,
.page-container .table-card,
.page-container .grid-card,
.page-container .list-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.page-container .form-card + .table-card,
.page-container .form-card + .grid-card,
.page-container .form-card + .list-card,
.page-container .form-section + .table-section,
.page-container .form-section + .grid-section {
  margin-top: var(--space-5);
}

.page-container .form-card .mat-mdc-card-content,
.page-container .table-card .mat-mdc-card-content,
.page-container .grid-card .mat-mdc-card-content,
.page-container .list-card .mat-mdc-card-content {
  padding: var(--space-4);
}

.page-container .form-card form,
.page-container .form-card .form-grid,
.page-container .form-section form,
.page-container .form-section .form-grid {
  row-gap: var(--space-4);
}

.page-container .form-card .actions,
.page-container .form-card .form-actions,
.page-container .form-card .action-buttons,
.page-container .form-card .footer-actions,
.page-container .form-section .actions,
.page-container .form-section .form-actions,
.page-container .form-section .action-buttons,
.page-container .form-section .footer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Ensure action rows in grid forms don't stay in the middle column. */
.page-container .form-card .form-grid > .actions,
.page-container .form-card .form-grid > .form-actions,
.page-container .form-card .form-grid > .action-buttons,
.page-container .form-card .form-grid > .footer-actions,
.page-container .form-section .form-grid > .actions,
.page-container .form-section .form-grid > .form-actions,
.page-container .form-section .form-grid > .action-buttons,
.page-container .form-section .form-grid > .footer-actions {
  grid-column: 1/-1;
  width: 100%;
  margin-left: 0;
  justify-content: flex-end;
}

/* Also support non-direct nesting used by a few forms. */
.page-container .form-card .form-grid .actions,
.page-container .form-card .form-grid .form-actions,
.page-container .form-card .form-grid .action-buttons,
.page-container .form-card .form-grid .footer-actions,
.page-container .form-section .form-grid .actions,
.page-container .form-section .form-grid .form-actions,
.page-container .form-section .form-grid .action-buttons,
.page-container .form-section .form-grid .footer-actions {
  width: 100%;
  justify-content: flex-end;
}

/* Hard override for submit/save rows inside forms (handles component-level overrides). */
.page-container form .actions,
.page-container form .form-actions,
.page-container form .action-buttons,
.page-container form .footer-actions {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: var(--space-4) !important;
  margin-left: 0 !important;
  padding-top: var(--space-3) !important;
  border-top: 1px solid var(--color-border) !important;
  text-align: right !important;
}

.page-container form .form-grid > .actions,
.page-container form .form-grid > .form-actions,
.page-container form .form-grid > .action-buttons,
.page-container form .form-grid > .footer-actions {
  grid-column: 1/-1 !important;
  justify-self: stretch !important;
}

/* Fallback for any form outside .page-container or custom module wrappers. */
form .actions,
form .form-actions,
form .action-buttons,
form .footer-actions {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: var(--space-4) !important;
  margin-left: 0 !important;
  padding-top: var(--space-3) !important;
  border-top: 1px solid var(--color-border) !important;
  text-align: right !important;
}

form .form-grid > .actions,
form .form-grid > .form-actions,
form .form-grid > .action-buttons,
form .form-grid > .footer-actions {
  grid-column: 1/-1 !important;
  justify-self: stretch !important;
}

.page-container .form-card hr,
.page-container .form-section hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

@media (max-width: 768px) {
  .page-container .form-card .mat-mdc-card-content,
  .page-container .table-card .mat-mdc-card-content,
  .page-container .grid-card .mat-mdc-card-content,
  .page-container .list-card .mat-mdc-card-content {
    padding: var(--space-3);
  }
  .page-container .form-card .actions,
  .page-container .form-card .form-actions,
  .page-container .form-card .action-buttons,
  .page-container .form-card .footer-actions,
  .page-container .form-section .actions,
  .page-container .form-section .form-actions,
  .page-container .form-section .action-buttons,
  .page-container .form-section .footer-actions {
    justify-content: flex-end;
  }
}
.mat-mdc-form-field-subscript-wrapper {
  margin-top: 2px;
}

.mat-mdc-card-title,
mat-card-title {
  color: var(--color-text);
}

.mat-mdc-form-field .mdc-floating-label,
.mat-mdc-form-field .mat-mdc-form-field-hint,
.mat-mdc-form-field .mat-mdc-form-field-error,
.mat-mdc-select-placeholder {
  color: var(--color-text-muted) !important;
}

.mat-mdc-input-element,
.mat-mdc-select-value-text,
.mat-mdc-form-field .mat-mdc-input-element::placeholder {
  color: var(--color-text) !important;
}

.mat-mdc-input-element,
.mat-mdc-select-value-text {
  opacity: 1 !important;
}

.mat-mdc-form-field .mat-mdc-input-element::placeholder {
  opacity: 0;
}

/* Prevent label/placeholder overlap: reveal placeholder only when label is floating or field is focused */
.mat-mdc-form-field.mat-focused .mat-mdc-input-element::placeholder,
.mat-mdc-form-field.mat-form-field-should-float .mat-mdc-input-element::placeholder {
  opacity: 1;
}

.mat-mdc-select-arrow {
  color: var(--color-text-muted);
}

.mat-mdc-form-field .mat-icon[matPrefix],
.mat-mdc-form-field .mat-icon[matSuffix],
.amount-prefix-icon {
  color: var(--color-primary);
}

.module-navbar .module-link mat-icon,
.mat-mdc-list-item mat-icon,
.admin-cards-grid .admin-nav-card mat-icon,
.sidenav mat-icon,
.page-title mat-icon,
.mat-mdc-card-title mat-icon {
  color: var(--icon-color-1);
}

/* Button/icon contrast standardization.
   Icons inherit the button foreground so filled buttons keep readable contrast. */
.mat-mdc-button-base {
  --app-button-role-color: currentColor;
  --app-button-role-foreground: currentColor;
}

.mat-mdc-button-base[color=primary] {
  --app-button-role-color: var(--color-primary);
  --app-button-role-foreground: var(--color-on-primary);
}

.mat-mdc-button-base[color=accent] {
  --app-button-role-color: var(--color-accent);
  --app-button-role-foreground: var(--color-on-accent);
}

.mat-mdc-button-base[color=warn] {
  --app-button-role-color: var(--color-danger);
  --app-button-role-foreground: var(--color-on-danger);
}

.mat-mdc-button-base[color=success],
.mat-mdc-button-base.success,
.mat-mdc-button-base.btn-success {
  --app-button-role-color: var(--color-success);
  --app-button-role-foreground: var(--color-on-success);
}

.mat-mdc-button-base.warning,
.mat-mdc-button-base.btn-warning {
  --app-button-role-color: var(--color-warning);
  --app-button-role-foreground: var(--color-on-warning);
}

.mat-mdc-raised-button[color],
.mat-mdc-unelevated-button[color],
.mat-mdc-flat-button[color],
.mat-mdc-fab[color],
.mat-mdc-mini-fab[color],
.mat-mdc-button-base.success,
.mat-mdc-button-base.btn-success,
.mat-mdc-button-base.warning,
.mat-mdc-button-base.btn-warning {
  --mdc-protected-button-container-color: var(--app-button-role-color);
  --mdc-protected-button-label-text-color: var(--app-button-role-foreground);
  --mdc-filled-button-container-color: var(--app-button-role-color);
  --mdc-filled-button-label-text-color: var(--app-button-role-foreground);
  --mdc-fab-container-color: var(--app-button-role-color);
  --mat-fab-foreground-color: var(--app-button-role-foreground);
  --mat-fab-state-layer-color: var(--app-button-role-foreground);
  background-color: var(--app-button-role-color) !important;
  color: var(--app-button-role-foreground) !important;
}

.mat-mdc-button,
.mat-mdc-outlined-button,
.mat-mdc-stroked-button,
.mat-mdc-icon-button {
  --mdc-text-button-label-text-color: var(--app-button-role-color);
  --mdc-outlined-button-label-text-color: var(--app-button-role-color);
  --mdc-outlined-button-outline-color: color-mix(
    in srgb,
    var(--app-button-role-color) 46%,
    var(--color-border)
  );
  --mdc-icon-button-icon-color: var(--app-button-role-color);
  color: var(--app-button-role-color);
}

.mat-mdc-button:not(:disabled):hover,
.mat-mdc-outlined-button:not(:disabled):hover,
.mat-mdc-stroked-button:not(:disabled):hover,
.mat-mdc-icon-button:not(:disabled):hover {
  background-color: color-mix(in srgb, var(--app-button-role-color) 12%, transparent);
}

.mat-mdc-button-base mat-icon,
.mat-mdc-button-base .mat-icon,
.action-button mat-icon {
  color: currentColor !important;
  transition: color 120ms ease-in-out;
}

.mat-mdc-button-base:disabled,
.mat-mdc-button-base[disabled] {
  --app-button-role-color: var(--color-text-muted);
  --app-button-role-foreground: color-mix(
    in srgb,
    var(--color-text-muted) 78%,
    var(--color-surface)
  );
  background-color: color-mix(in srgb, var(--color-text-muted) 18%, var(--color-surface)) !important;
  color: var(--app-button-role-foreground) !important;
  border-color: color-mix(in srgb, var(--color-text-muted) 24%, var(--color-border)) !important;
}

.module-navbar .module-link,
.module-navbar .module-link .mdc-button__label,
.module-navbar .module-link span {
  color: var(--color-text-muted) !important;
}

.module-navbar .module-link.active-link,
.module-navbar .module-link.active-link .mdc-button__label,
.module-navbar .module-link.active-link span {
  color: var(--color-primary) !important;
}

.module-navbar .module-link.nav-tone-1 mat-icon,
mat-nav-list a.nav-tone-1 mat-icon,
.mat-mdc-nav-list a.nav-tone-1 mat-icon,
.admin-cards-grid .admin-nav-card:nth-child(8n+1) mat-icon {
  color: var(--icon-color-1) !important;
}

.module-navbar .module-link.nav-tone-2 mat-icon,
mat-nav-list a.nav-tone-2 mat-icon,
.mat-mdc-nav-list a.nav-tone-2 mat-icon,
.admin-cards-grid .admin-nav-card:nth-child(8n+2) mat-icon {
  color: var(--icon-color-2) !important;
}

.module-navbar .module-link.nav-tone-3 mat-icon,
mat-nav-list a.nav-tone-3 mat-icon,
.mat-mdc-nav-list a.nav-tone-3 mat-icon,
.admin-cards-grid .admin-nav-card:nth-child(8n+3) mat-icon {
  color: var(--icon-color-3) !important;
}

.module-navbar .module-link.nav-tone-4 mat-icon,
mat-nav-list a.nav-tone-4 mat-icon,
.mat-mdc-nav-list a.nav-tone-4 mat-icon,
.admin-cards-grid .admin-nav-card:nth-child(8n+4) mat-icon {
  color: var(--icon-color-4) !important;
}

.module-navbar .module-link.nav-tone-5 mat-icon,
mat-nav-list a.nav-tone-5 mat-icon,
.mat-mdc-nav-list a.nav-tone-5 mat-icon,
.admin-cards-grid .admin-nav-card:nth-child(8n+5) mat-icon {
  color: var(--icon-color-5) !important;
}

.module-navbar .module-link.nav-tone-6 mat-icon,
mat-nav-list a.nav-tone-6 mat-icon,
.mat-mdc-nav-list a.nav-tone-6 mat-icon,
.admin-cards-grid .admin-nav-card:nth-child(8n+6) mat-icon {
  color: var(--icon-color-6) !important;
}

.module-navbar .module-link.nav-tone-7 mat-icon,
mat-nav-list a.nav-tone-7 mat-icon,
.mat-mdc-nav-list a.nav-tone-7 mat-icon,
.admin-cards-grid .admin-nav-card:nth-child(8n+7) mat-icon {
  color: var(--icon-color-7) !important;
}

.module-navbar .module-link.nav-tone-8 mat-icon,
mat-nav-list a.nav-tone-8 mat-icon,
.mat-mdc-nav-list a.nav-tone-8 mat-icon,
.admin-cards-grid .admin-nav-card:nth-child(8n+8) mat-icon {
  color: var(--icon-color-8) !important;
}

html[data-theme=dark] {
  color: var(--color-text);
}
html[data-theme=dark] body,
html[data-theme=dark] .mat-typography,
html[data-theme=dark] .mat-mdc-card-content,
html[data-theme=dark] .mat-mdc-card-subtitle,
html[data-theme=dark] .mat-mdc-list-item-title,
html[data-theme=dark] .mat-mdc-list-item-line,
html[data-theme=dark] .mat-expansion-panel-header-title,
html[data-theme=dark] .mat-expansion-panel-header-description,
html[data-theme=dark] .mat-mdc-tab-label,
html[data-theme=dark] .mdc-tab__text-label,
html[data-theme=dark] .mat-mdc-paginator,
html[data-theme=dark] .mat-mdc-paginator-page-size-label,
html[data-theme=dark] .mat-mdc-paginator-range-label,
html[data-theme=dark] .mat-sort-header-content,
html[data-theme=dark] .mat-mdc-header-cell,
html[data-theme=dark] .mat-mdc-cell,
html[data-theme=dark] .mdc-list-item__primary-text,
html[data-theme=dark] .mdc-list-item__secondary-text {
  color: var(--color-text) !important;
}
html[data-theme=dark] .page-subtitle,
html[data-theme=dark] .subtitle,
html[data-theme=dark] .form-intro,
html[data-theme=dark] .kicker,
html[data-theme=dark] .mat-mdc-card-subtitle,
html[data-theme=dark] .mdc-list-item__secondary-text {
  color: var(--color-text-muted) !important;
}
html[data-theme=dark] body {
  background-color: var(--color-bg) !important;
}
html[data-theme=dark] .mat-mdc-card,
html[data-theme=dark] .module-card,
html[data-theme=dark] .wizard-card,
html[data-theme=dark] .table-card,
html[data-theme=dark] .search-card,
html[data-theme=dark] .form-card,
html[data-theme=dark] .grid-card {
  background-color: var(--color-surface);
  color: var(--color-text) !important;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
}
html[data-theme=dark] .mat-mdc-dialog-surface,
html[data-theme=dark] .mat-mdc-menu-panel,
html[data-theme=dark] .mat-mdc-select-panel,
html[data-theme=dark] .mat-datepicker-content,
html[data-theme=dark] .mat-mdc-autocomplete-panel,
html[data-theme=dark] .mat-mdc-tooltip {
  background: var(--color-surface-elevated) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme=dark] .kpi-card.primary, html[data-theme=dark] .kpi-card.info, html[data-theme=dark] .kpi-card.bank, html[data-theme=dark] .kpi-card.run, html[data-theme=dark] .kpi-card.approved, html[data-theme=dark] .kpi-card.approved-card, html[data-theme=dark] .kpi-card.tone-bank, html[data-theme=dark] .kpi-card.transactions, html[data-theme=dark] .kpi-card.total-revenue, html[data-theme=dark] .kpi-card.blue,
html[data-theme=dark] .summary-card.primary,
html[data-theme=dark] .summary-card.info,
html[data-theme=dark] .summary-card.bank,
html[data-theme=dark] .summary-card.run,
html[data-theme=dark] .summary-card.approved,
html[data-theme=dark] .summary-card.approved-card,
html[data-theme=dark] .summary-card.tone-bank,
html[data-theme=dark] .summary-card.transactions,
html[data-theme=dark] .summary-card.total-revenue,
html[data-theme=dark] .summary-card.blue,
html[data-theme=dark] .financial-card.primary,
html[data-theme=dark] .financial-card.info,
html[data-theme=dark] .financial-card.bank,
html[data-theme=dark] .financial-card.run,
html[data-theme=dark] .financial-card.approved,
html[data-theme=dark] .financial-card.approved-card,
html[data-theme=dark] .financial-card.tone-bank,
html[data-theme=dark] .financial-card.transactions,
html[data-theme=dark] .financial-card.total-revenue,
html[data-theme=dark] .financial-card.blue,
html[data-theme=dark] .stat-card.primary,
html[data-theme=dark] .stat-card.info,
html[data-theme=dark] .stat-card.bank,
html[data-theme=dark] .stat-card.run,
html[data-theme=dark] .stat-card.approved,
html[data-theme=dark] .stat-card.approved-card,
html[data-theme=dark] .stat-card.tone-bank,
html[data-theme=dark] .stat-card.transactions,
html[data-theme=dark] .stat-card.total-revenue,
html[data-theme=dark] .stat-card.blue,
html[data-theme=dark] .balance-card.primary,
html[data-theme=dark] .balance-card.info,
html[data-theme=dark] .balance-card.bank,
html[data-theme=dark] .balance-card.run,
html[data-theme=dark] .balance-card.approved,
html[data-theme=dark] .balance-card.approved-card,
html[data-theme=dark] .balance-card.tone-bank,
html[data-theme=dark] .balance-card.transactions,
html[data-theme=dark] .balance-card.total-revenue,
html[data-theme=dark] .balance-card.blue,
html[data-theme=dark] .preview-kpi-card.primary,
html[data-theme=dark] .preview-kpi-card.info,
html[data-theme=dark] .preview-kpi-card.bank,
html[data-theme=dark] .preview-kpi-card.run,
html[data-theme=dark] .preview-kpi-card.approved,
html[data-theme=dark] .preview-kpi-card.approved-card,
html[data-theme=dark] .preview-kpi-card.tone-bank,
html[data-theme=dark] .preview-kpi-card.transactions,
html[data-theme=dark] .preview-kpi-card.total-revenue,
html[data-theme=dark] .preview-kpi-card.blue,
html[data-theme=dark] .mat-mdc-card.primary,
html[data-theme=dark] .mat-mdc-card.info,
html[data-theme=dark] .mat-mdc-card.bank,
html[data-theme=dark] .mat-mdc-card.run,
html[data-theme=dark] .mat-mdc-card.approved,
html[data-theme=dark] .mat-mdc-card.approved-card,
html[data-theme=dark] .mat-mdc-card.tone-bank,
html[data-theme=dark] .mat-mdc-card.transactions,
html[data-theme=dark] .mat-mdc-card.total-revenue,
html[data-theme=dark] .mat-mdc-card.blue {
  border-top: 4px solid var(--color-primary) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
html[data-theme=dark] .kpi-card.primary .kpi-icon,
html[data-theme=dark] .kpi-card.primary .card-icon,
html[data-theme=dark] .kpi-card.primary .balance-icon,
html[data-theme=dark] .kpi-card.primary .stat-icon mat-icon, html[data-theme=dark] .kpi-card.info .kpi-icon,
html[data-theme=dark] .kpi-card.info .card-icon,
html[data-theme=dark] .kpi-card.info .balance-icon,
html[data-theme=dark] .kpi-card.info .stat-icon mat-icon, html[data-theme=dark] .kpi-card.bank .kpi-icon,
html[data-theme=dark] .kpi-card.bank .card-icon,
html[data-theme=dark] .kpi-card.bank .balance-icon,
html[data-theme=dark] .kpi-card.bank .stat-icon mat-icon, html[data-theme=dark] .kpi-card.run .kpi-icon,
html[data-theme=dark] .kpi-card.run .card-icon,
html[data-theme=dark] .kpi-card.run .balance-icon,
html[data-theme=dark] .kpi-card.run .stat-icon mat-icon, html[data-theme=dark] .kpi-card.approved .kpi-icon,
html[data-theme=dark] .kpi-card.approved .card-icon,
html[data-theme=dark] .kpi-card.approved .balance-icon,
html[data-theme=dark] .kpi-card.approved .stat-icon mat-icon, html[data-theme=dark] .kpi-card.approved-card .kpi-icon,
html[data-theme=dark] .kpi-card.approved-card .card-icon,
html[data-theme=dark] .kpi-card.approved-card .balance-icon,
html[data-theme=dark] .kpi-card.approved-card .stat-icon mat-icon, html[data-theme=dark] .kpi-card.tone-bank .kpi-icon,
html[data-theme=dark] .kpi-card.tone-bank .card-icon,
html[data-theme=dark] .kpi-card.tone-bank .balance-icon,
html[data-theme=dark] .kpi-card.tone-bank .stat-icon mat-icon, html[data-theme=dark] .kpi-card.transactions .kpi-icon,
html[data-theme=dark] .kpi-card.transactions .card-icon,
html[data-theme=dark] .kpi-card.transactions .balance-icon,
html[data-theme=dark] .kpi-card.transactions .stat-icon mat-icon, html[data-theme=dark] .kpi-card.total-revenue .kpi-icon,
html[data-theme=dark] .kpi-card.total-revenue .card-icon,
html[data-theme=dark] .kpi-card.total-revenue .balance-icon,
html[data-theme=dark] .kpi-card.total-revenue .stat-icon mat-icon, html[data-theme=dark] .kpi-card.blue .kpi-icon,
html[data-theme=dark] .kpi-card.blue .card-icon,
html[data-theme=dark] .kpi-card.blue .balance-icon,
html[data-theme=dark] .kpi-card.blue .stat-icon mat-icon,
html[data-theme=dark] .summary-card.primary .kpi-icon,
html[data-theme=dark] .summary-card.primary .card-icon,
html[data-theme=dark] .summary-card.primary .balance-icon,
html[data-theme=dark] .summary-card.primary .stat-icon mat-icon,
html[data-theme=dark] .summary-card.info .kpi-icon,
html[data-theme=dark] .summary-card.info .card-icon,
html[data-theme=dark] .summary-card.info .balance-icon,
html[data-theme=dark] .summary-card.info .stat-icon mat-icon,
html[data-theme=dark] .summary-card.bank .kpi-icon,
html[data-theme=dark] .summary-card.bank .card-icon,
html[data-theme=dark] .summary-card.bank .balance-icon,
html[data-theme=dark] .summary-card.bank .stat-icon mat-icon,
html[data-theme=dark] .summary-card.run .kpi-icon,
html[data-theme=dark] .summary-card.run .card-icon,
html[data-theme=dark] .summary-card.run .balance-icon,
html[data-theme=dark] .summary-card.run .stat-icon mat-icon,
html[data-theme=dark] .summary-card.approved .kpi-icon,
html[data-theme=dark] .summary-card.approved .card-icon,
html[data-theme=dark] .summary-card.approved .balance-icon,
html[data-theme=dark] .summary-card.approved .stat-icon mat-icon,
html[data-theme=dark] .summary-card.approved-card .kpi-icon,
html[data-theme=dark] .summary-card.approved-card .card-icon,
html[data-theme=dark] .summary-card.approved-card .balance-icon,
html[data-theme=dark] .summary-card.approved-card .stat-icon mat-icon,
html[data-theme=dark] .summary-card.tone-bank .kpi-icon,
html[data-theme=dark] .summary-card.tone-bank .card-icon,
html[data-theme=dark] .summary-card.tone-bank .balance-icon,
html[data-theme=dark] .summary-card.tone-bank .stat-icon mat-icon,
html[data-theme=dark] .summary-card.transactions .kpi-icon,
html[data-theme=dark] .summary-card.transactions .card-icon,
html[data-theme=dark] .summary-card.transactions .balance-icon,
html[data-theme=dark] .summary-card.transactions .stat-icon mat-icon,
html[data-theme=dark] .summary-card.total-revenue .kpi-icon,
html[data-theme=dark] .summary-card.total-revenue .card-icon,
html[data-theme=dark] .summary-card.total-revenue .balance-icon,
html[data-theme=dark] .summary-card.total-revenue .stat-icon mat-icon,
html[data-theme=dark] .summary-card.blue .kpi-icon,
html[data-theme=dark] .summary-card.blue .card-icon,
html[data-theme=dark] .summary-card.blue .balance-icon,
html[data-theme=dark] .summary-card.blue .stat-icon mat-icon,
html[data-theme=dark] .financial-card.primary .kpi-icon,
html[data-theme=dark] .financial-card.primary .card-icon,
html[data-theme=dark] .financial-card.primary .balance-icon,
html[data-theme=dark] .financial-card.primary .stat-icon mat-icon,
html[data-theme=dark] .financial-card.info .kpi-icon,
html[data-theme=dark] .financial-card.info .card-icon,
html[data-theme=dark] .financial-card.info .balance-icon,
html[data-theme=dark] .financial-card.info .stat-icon mat-icon,
html[data-theme=dark] .financial-card.bank .kpi-icon,
html[data-theme=dark] .financial-card.bank .card-icon,
html[data-theme=dark] .financial-card.bank .balance-icon,
html[data-theme=dark] .financial-card.bank .stat-icon mat-icon,
html[data-theme=dark] .financial-card.run .kpi-icon,
html[data-theme=dark] .financial-card.run .card-icon,
html[data-theme=dark] .financial-card.run .balance-icon,
html[data-theme=dark] .financial-card.run .stat-icon mat-icon,
html[data-theme=dark] .financial-card.approved .kpi-icon,
html[data-theme=dark] .financial-card.approved .card-icon,
html[data-theme=dark] .financial-card.approved .balance-icon,
html[data-theme=dark] .financial-card.approved .stat-icon mat-icon,
html[data-theme=dark] .financial-card.approved-card .kpi-icon,
html[data-theme=dark] .financial-card.approved-card .card-icon,
html[data-theme=dark] .financial-card.approved-card .balance-icon,
html[data-theme=dark] .financial-card.approved-card .stat-icon mat-icon,
html[data-theme=dark] .financial-card.tone-bank .kpi-icon,
html[data-theme=dark] .financial-card.tone-bank .card-icon,
html[data-theme=dark] .financial-card.tone-bank .balance-icon,
html[data-theme=dark] .financial-card.tone-bank .stat-icon mat-icon,
html[data-theme=dark] .financial-card.transactions .kpi-icon,
html[data-theme=dark] .financial-card.transactions .card-icon,
html[data-theme=dark] .financial-card.transactions .balance-icon,
html[data-theme=dark] .financial-card.transactions .stat-icon mat-icon,
html[data-theme=dark] .financial-card.total-revenue .kpi-icon,
html[data-theme=dark] .financial-card.total-revenue .card-icon,
html[data-theme=dark] .financial-card.total-revenue .balance-icon,
html[data-theme=dark] .financial-card.total-revenue .stat-icon mat-icon,
html[data-theme=dark] .financial-card.blue .kpi-icon,
html[data-theme=dark] .financial-card.blue .card-icon,
html[data-theme=dark] .financial-card.blue .balance-icon,
html[data-theme=dark] .financial-card.blue .stat-icon mat-icon,
html[data-theme=dark] .stat-card.primary .kpi-icon,
html[data-theme=dark] .stat-card.primary .card-icon,
html[data-theme=dark] .stat-card.primary .balance-icon,
html[data-theme=dark] .stat-card.primary .stat-icon mat-icon,
html[data-theme=dark] .stat-card.info .kpi-icon,
html[data-theme=dark] .stat-card.info .card-icon,
html[data-theme=dark] .stat-card.info .balance-icon,
html[data-theme=dark] .stat-card.info .stat-icon mat-icon,
html[data-theme=dark] .stat-card.bank .kpi-icon,
html[data-theme=dark] .stat-card.bank .card-icon,
html[data-theme=dark] .stat-card.bank .balance-icon,
html[data-theme=dark] .stat-card.bank .stat-icon mat-icon,
html[data-theme=dark] .stat-card.run .kpi-icon,
html[data-theme=dark] .stat-card.run .card-icon,
html[data-theme=dark] .stat-card.run .balance-icon,
html[data-theme=dark] .stat-card.run .stat-icon mat-icon,
html[data-theme=dark] .stat-card.approved .kpi-icon,
html[data-theme=dark] .stat-card.approved .card-icon,
html[data-theme=dark] .stat-card.approved .balance-icon,
html[data-theme=dark] .stat-card.approved .stat-icon mat-icon,
html[data-theme=dark] .stat-card.approved-card .kpi-icon,
html[data-theme=dark] .stat-card.approved-card .card-icon,
html[data-theme=dark] .stat-card.approved-card .balance-icon,
html[data-theme=dark] .stat-card.approved-card .stat-icon mat-icon,
html[data-theme=dark] .stat-card.tone-bank .kpi-icon,
html[data-theme=dark] .stat-card.tone-bank .card-icon,
html[data-theme=dark] .stat-card.tone-bank .balance-icon,
html[data-theme=dark] .stat-card.tone-bank .stat-icon mat-icon,
html[data-theme=dark] .stat-card.transactions .kpi-icon,
html[data-theme=dark] .stat-card.transactions .card-icon,
html[data-theme=dark] .stat-card.transactions .balance-icon,
html[data-theme=dark] .stat-card.transactions .stat-icon mat-icon,
html[data-theme=dark] .stat-card.total-revenue .kpi-icon,
html[data-theme=dark] .stat-card.total-revenue .card-icon,
html[data-theme=dark] .stat-card.total-revenue .balance-icon,
html[data-theme=dark] .stat-card.total-revenue .stat-icon mat-icon,
html[data-theme=dark] .stat-card.blue .kpi-icon,
html[data-theme=dark] .stat-card.blue .card-icon,
html[data-theme=dark] .stat-card.blue .balance-icon,
html[data-theme=dark] .stat-card.blue .stat-icon mat-icon,
html[data-theme=dark] .balance-card.primary .kpi-icon,
html[data-theme=dark] .balance-card.primary .card-icon,
html[data-theme=dark] .balance-card.primary .balance-icon,
html[data-theme=dark] .balance-card.primary .stat-icon mat-icon,
html[data-theme=dark] .balance-card.info .kpi-icon,
html[data-theme=dark] .balance-card.info .card-icon,
html[data-theme=dark] .balance-card.info .balance-icon,
html[data-theme=dark] .balance-card.info .stat-icon mat-icon,
html[data-theme=dark] .balance-card.bank .kpi-icon,
html[data-theme=dark] .balance-card.bank .card-icon,
html[data-theme=dark] .balance-card.bank .balance-icon,
html[data-theme=dark] .balance-card.bank .stat-icon mat-icon,
html[data-theme=dark] .balance-card.run .kpi-icon,
html[data-theme=dark] .balance-card.run .card-icon,
html[data-theme=dark] .balance-card.run .balance-icon,
html[data-theme=dark] .balance-card.run .stat-icon mat-icon,
html[data-theme=dark] .balance-card.approved .kpi-icon,
html[data-theme=dark] .balance-card.approved .card-icon,
html[data-theme=dark] .balance-card.approved .balance-icon,
html[data-theme=dark] .balance-card.approved .stat-icon mat-icon,
html[data-theme=dark] .balance-card.approved-card .kpi-icon,
html[data-theme=dark] .balance-card.approved-card .card-icon,
html[data-theme=dark] .balance-card.approved-card .balance-icon,
html[data-theme=dark] .balance-card.approved-card .stat-icon mat-icon,
html[data-theme=dark] .balance-card.tone-bank .kpi-icon,
html[data-theme=dark] .balance-card.tone-bank .card-icon,
html[data-theme=dark] .balance-card.tone-bank .balance-icon,
html[data-theme=dark] .balance-card.tone-bank .stat-icon mat-icon,
html[data-theme=dark] .balance-card.transactions .kpi-icon,
html[data-theme=dark] .balance-card.transactions .card-icon,
html[data-theme=dark] .balance-card.transactions .balance-icon,
html[data-theme=dark] .balance-card.transactions .stat-icon mat-icon,
html[data-theme=dark] .balance-card.total-revenue .kpi-icon,
html[data-theme=dark] .balance-card.total-revenue .card-icon,
html[data-theme=dark] .balance-card.total-revenue .balance-icon,
html[data-theme=dark] .balance-card.total-revenue .stat-icon mat-icon,
html[data-theme=dark] .balance-card.blue .kpi-icon,
html[data-theme=dark] .balance-card.blue .card-icon,
html[data-theme=dark] .balance-card.blue .balance-icon,
html[data-theme=dark] .balance-card.blue .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.primary .kpi-icon,
html[data-theme=dark] .preview-kpi-card.primary .card-icon,
html[data-theme=dark] .preview-kpi-card.primary .balance-icon,
html[data-theme=dark] .preview-kpi-card.primary .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.info .kpi-icon,
html[data-theme=dark] .preview-kpi-card.info .card-icon,
html[data-theme=dark] .preview-kpi-card.info .balance-icon,
html[data-theme=dark] .preview-kpi-card.info .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.bank .kpi-icon,
html[data-theme=dark] .preview-kpi-card.bank .card-icon,
html[data-theme=dark] .preview-kpi-card.bank .balance-icon,
html[data-theme=dark] .preview-kpi-card.bank .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.run .kpi-icon,
html[data-theme=dark] .preview-kpi-card.run .card-icon,
html[data-theme=dark] .preview-kpi-card.run .balance-icon,
html[data-theme=dark] .preview-kpi-card.run .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.approved .kpi-icon,
html[data-theme=dark] .preview-kpi-card.approved .card-icon,
html[data-theme=dark] .preview-kpi-card.approved .balance-icon,
html[data-theme=dark] .preview-kpi-card.approved .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.approved-card .kpi-icon,
html[data-theme=dark] .preview-kpi-card.approved-card .card-icon,
html[data-theme=dark] .preview-kpi-card.approved-card .balance-icon,
html[data-theme=dark] .preview-kpi-card.approved-card .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.tone-bank .kpi-icon,
html[data-theme=dark] .preview-kpi-card.tone-bank .card-icon,
html[data-theme=dark] .preview-kpi-card.tone-bank .balance-icon,
html[data-theme=dark] .preview-kpi-card.tone-bank .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.transactions .kpi-icon,
html[data-theme=dark] .preview-kpi-card.transactions .card-icon,
html[data-theme=dark] .preview-kpi-card.transactions .balance-icon,
html[data-theme=dark] .preview-kpi-card.transactions .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.total-revenue .kpi-icon,
html[data-theme=dark] .preview-kpi-card.total-revenue .card-icon,
html[data-theme=dark] .preview-kpi-card.total-revenue .balance-icon,
html[data-theme=dark] .preview-kpi-card.total-revenue .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.blue .kpi-icon,
html[data-theme=dark] .preview-kpi-card.blue .card-icon,
html[data-theme=dark] .preview-kpi-card.blue .balance-icon,
html[data-theme=dark] .preview-kpi-card.blue .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.primary .kpi-icon,
html[data-theme=dark] .mat-mdc-card.primary .card-icon,
html[data-theme=dark] .mat-mdc-card.primary .balance-icon,
html[data-theme=dark] .mat-mdc-card.primary .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.info .kpi-icon,
html[data-theme=dark] .mat-mdc-card.info .card-icon,
html[data-theme=dark] .mat-mdc-card.info .balance-icon,
html[data-theme=dark] .mat-mdc-card.info .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.bank .kpi-icon,
html[data-theme=dark] .mat-mdc-card.bank .card-icon,
html[data-theme=dark] .mat-mdc-card.bank .balance-icon,
html[data-theme=dark] .mat-mdc-card.bank .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.run .kpi-icon,
html[data-theme=dark] .mat-mdc-card.run .card-icon,
html[data-theme=dark] .mat-mdc-card.run .balance-icon,
html[data-theme=dark] .mat-mdc-card.run .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.approved .kpi-icon,
html[data-theme=dark] .mat-mdc-card.approved .card-icon,
html[data-theme=dark] .mat-mdc-card.approved .balance-icon,
html[data-theme=dark] .mat-mdc-card.approved .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.approved-card .kpi-icon,
html[data-theme=dark] .mat-mdc-card.approved-card .card-icon,
html[data-theme=dark] .mat-mdc-card.approved-card .balance-icon,
html[data-theme=dark] .mat-mdc-card.approved-card .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.tone-bank .kpi-icon,
html[data-theme=dark] .mat-mdc-card.tone-bank .card-icon,
html[data-theme=dark] .mat-mdc-card.tone-bank .balance-icon,
html[data-theme=dark] .mat-mdc-card.tone-bank .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.transactions .kpi-icon,
html[data-theme=dark] .mat-mdc-card.transactions .card-icon,
html[data-theme=dark] .mat-mdc-card.transactions .balance-icon,
html[data-theme=dark] .mat-mdc-card.transactions .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.total-revenue .kpi-icon,
html[data-theme=dark] .mat-mdc-card.total-revenue .card-icon,
html[data-theme=dark] .mat-mdc-card.total-revenue .balance-icon,
html[data-theme=dark] .mat-mdc-card.total-revenue .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.blue .kpi-icon,
html[data-theme=dark] .mat-mdc-card.blue .card-icon,
html[data-theme=dark] .mat-mdc-card.blue .balance-icon,
html[data-theme=dark] .mat-mdc-card.blue .stat-icon mat-icon {
  color: var(--color-primary) !important;
}
html[data-theme=dark] .kpi-card.primary .stat-icon, html[data-theme=dark] .kpi-card.info .stat-icon, html[data-theme=dark] .kpi-card.bank .stat-icon, html[data-theme=dark] .kpi-card.run .stat-icon, html[data-theme=dark] .kpi-card.approved .stat-icon, html[data-theme=dark] .kpi-card.approved-card .stat-icon, html[data-theme=dark] .kpi-card.tone-bank .stat-icon, html[data-theme=dark] .kpi-card.transactions .stat-icon, html[data-theme=dark] .kpi-card.total-revenue .stat-icon, html[data-theme=dark] .kpi-card.blue .stat-icon,
html[data-theme=dark] .summary-card.primary .stat-icon,
html[data-theme=dark] .summary-card.info .stat-icon,
html[data-theme=dark] .summary-card.bank .stat-icon,
html[data-theme=dark] .summary-card.run .stat-icon,
html[data-theme=dark] .summary-card.approved .stat-icon,
html[data-theme=dark] .summary-card.approved-card .stat-icon,
html[data-theme=dark] .summary-card.tone-bank .stat-icon,
html[data-theme=dark] .summary-card.transactions .stat-icon,
html[data-theme=dark] .summary-card.total-revenue .stat-icon,
html[data-theme=dark] .summary-card.blue .stat-icon,
html[data-theme=dark] .financial-card.primary .stat-icon,
html[data-theme=dark] .financial-card.info .stat-icon,
html[data-theme=dark] .financial-card.bank .stat-icon,
html[data-theme=dark] .financial-card.run .stat-icon,
html[data-theme=dark] .financial-card.approved .stat-icon,
html[data-theme=dark] .financial-card.approved-card .stat-icon,
html[data-theme=dark] .financial-card.tone-bank .stat-icon,
html[data-theme=dark] .financial-card.transactions .stat-icon,
html[data-theme=dark] .financial-card.total-revenue .stat-icon,
html[data-theme=dark] .financial-card.blue .stat-icon,
html[data-theme=dark] .stat-card.primary .stat-icon,
html[data-theme=dark] .stat-card.info .stat-icon,
html[data-theme=dark] .stat-card.bank .stat-icon,
html[data-theme=dark] .stat-card.run .stat-icon,
html[data-theme=dark] .stat-card.approved .stat-icon,
html[data-theme=dark] .stat-card.approved-card .stat-icon,
html[data-theme=dark] .stat-card.tone-bank .stat-icon,
html[data-theme=dark] .stat-card.transactions .stat-icon,
html[data-theme=dark] .stat-card.total-revenue .stat-icon,
html[data-theme=dark] .stat-card.blue .stat-icon,
html[data-theme=dark] .balance-card.primary .stat-icon,
html[data-theme=dark] .balance-card.info .stat-icon,
html[data-theme=dark] .balance-card.bank .stat-icon,
html[data-theme=dark] .balance-card.run .stat-icon,
html[data-theme=dark] .balance-card.approved .stat-icon,
html[data-theme=dark] .balance-card.approved-card .stat-icon,
html[data-theme=dark] .balance-card.tone-bank .stat-icon,
html[data-theme=dark] .balance-card.transactions .stat-icon,
html[data-theme=dark] .balance-card.total-revenue .stat-icon,
html[data-theme=dark] .balance-card.blue .stat-icon,
html[data-theme=dark] .preview-kpi-card.primary .stat-icon,
html[data-theme=dark] .preview-kpi-card.info .stat-icon,
html[data-theme=dark] .preview-kpi-card.bank .stat-icon,
html[data-theme=dark] .preview-kpi-card.run .stat-icon,
html[data-theme=dark] .preview-kpi-card.approved .stat-icon,
html[data-theme=dark] .preview-kpi-card.approved-card .stat-icon,
html[data-theme=dark] .preview-kpi-card.tone-bank .stat-icon,
html[data-theme=dark] .preview-kpi-card.transactions .stat-icon,
html[data-theme=dark] .preview-kpi-card.total-revenue .stat-icon,
html[data-theme=dark] .preview-kpi-card.blue .stat-icon,
html[data-theme=dark] .mat-mdc-card.primary .stat-icon,
html[data-theme=dark] .mat-mdc-card.info .stat-icon,
html[data-theme=dark] .mat-mdc-card.bank .stat-icon,
html[data-theme=dark] .mat-mdc-card.run .stat-icon,
html[data-theme=dark] .mat-mdc-card.approved .stat-icon,
html[data-theme=dark] .mat-mdc-card.approved-card .stat-icon,
html[data-theme=dark] .mat-mdc-card.tone-bank .stat-icon,
html[data-theme=dark] .mat-mdc-card.transactions .stat-icon,
html[data-theme=dark] .mat-mdc-card.total-revenue .stat-icon,
html[data-theme=dark] .mat-mdc-card.blue .stat-icon {
  background: rgba(96, 165, 250, 0.2) !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
}
html[data-theme=dark] .kpi-card.success, html[data-theme=dark] .kpi-card.positive, html[data-theme=dark] .kpi-card.total, html[data-theme=dark] .kpi-card.income, html[data-theme=dark] .kpi-card.profit, html[data-theme=dark] .kpi-card.bonus, html[data-theme=dark] .kpi-card.tone-total, html[data-theme=dark] .kpi-card.total-card, html[data-theme=dark] .kpi-card.paid-amount, html[data-theme=dark] .kpi-card.healthy, html[data-theme=dark] .kpi-card.green,
html[data-theme=dark] .summary-card.success,
html[data-theme=dark] .summary-card.positive,
html[data-theme=dark] .summary-card.total,
html[data-theme=dark] .summary-card.income,
html[data-theme=dark] .summary-card.profit,
html[data-theme=dark] .summary-card.bonus,
html[data-theme=dark] .summary-card.tone-total,
html[data-theme=dark] .summary-card.total-card,
html[data-theme=dark] .summary-card.paid-amount,
html[data-theme=dark] .summary-card.healthy,
html[data-theme=dark] .summary-card.green,
html[data-theme=dark] .financial-card.success,
html[data-theme=dark] .financial-card.positive,
html[data-theme=dark] .financial-card.total,
html[data-theme=dark] .financial-card.income,
html[data-theme=dark] .financial-card.profit,
html[data-theme=dark] .financial-card.bonus,
html[data-theme=dark] .financial-card.tone-total,
html[data-theme=dark] .financial-card.total-card,
html[data-theme=dark] .financial-card.paid-amount,
html[data-theme=dark] .financial-card.healthy,
html[data-theme=dark] .financial-card.green,
html[data-theme=dark] .stat-card.success,
html[data-theme=dark] .stat-card.positive,
html[data-theme=dark] .stat-card.total,
html[data-theme=dark] .stat-card.income,
html[data-theme=dark] .stat-card.profit,
html[data-theme=dark] .stat-card.bonus,
html[data-theme=dark] .stat-card.tone-total,
html[data-theme=dark] .stat-card.total-card,
html[data-theme=dark] .stat-card.paid-amount,
html[data-theme=dark] .stat-card.healthy,
html[data-theme=dark] .stat-card.green,
html[data-theme=dark] .balance-card.success,
html[data-theme=dark] .balance-card.positive,
html[data-theme=dark] .balance-card.total,
html[data-theme=dark] .balance-card.income,
html[data-theme=dark] .balance-card.profit,
html[data-theme=dark] .balance-card.bonus,
html[data-theme=dark] .balance-card.tone-total,
html[data-theme=dark] .balance-card.total-card,
html[data-theme=dark] .balance-card.paid-amount,
html[data-theme=dark] .balance-card.healthy,
html[data-theme=dark] .balance-card.green,
html[data-theme=dark] .preview-kpi-card.success,
html[data-theme=dark] .preview-kpi-card.positive,
html[data-theme=dark] .preview-kpi-card.total,
html[data-theme=dark] .preview-kpi-card.income,
html[data-theme=dark] .preview-kpi-card.profit,
html[data-theme=dark] .preview-kpi-card.bonus,
html[data-theme=dark] .preview-kpi-card.tone-total,
html[data-theme=dark] .preview-kpi-card.total-card,
html[data-theme=dark] .preview-kpi-card.paid-amount,
html[data-theme=dark] .preview-kpi-card.healthy,
html[data-theme=dark] .preview-kpi-card.green,
html[data-theme=dark] .mat-mdc-card.success,
html[data-theme=dark] .mat-mdc-card.positive,
html[data-theme=dark] .mat-mdc-card.total,
html[data-theme=dark] .mat-mdc-card.income,
html[data-theme=dark] .mat-mdc-card.profit,
html[data-theme=dark] .mat-mdc-card.bonus,
html[data-theme=dark] .mat-mdc-card.tone-total,
html[data-theme=dark] .mat-mdc-card.total-card,
html[data-theme=dark] .mat-mdc-card.paid-amount,
html[data-theme=dark] .mat-mdc-card.healthy,
html[data-theme=dark] .mat-mdc-card.green {
  border-top: 4px solid var(--color-success) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
html[data-theme=dark] .kpi-card.success .kpi-icon,
html[data-theme=dark] .kpi-card.success .card-icon,
html[data-theme=dark] .kpi-card.success .balance-icon,
html[data-theme=dark] .kpi-card.success .stat-icon mat-icon, html[data-theme=dark] .kpi-card.positive .kpi-icon,
html[data-theme=dark] .kpi-card.positive .card-icon,
html[data-theme=dark] .kpi-card.positive .balance-icon,
html[data-theme=dark] .kpi-card.positive .stat-icon mat-icon, html[data-theme=dark] .kpi-card.total .kpi-icon,
html[data-theme=dark] .kpi-card.total .card-icon,
html[data-theme=dark] .kpi-card.total .balance-icon,
html[data-theme=dark] .kpi-card.total .stat-icon mat-icon, html[data-theme=dark] .kpi-card.income .kpi-icon,
html[data-theme=dark] .kpi-card.income .card-icon,
html[data-theme=dark] .kpi-card.income .balance-icon,
html[data-theme=dark] .kpi-card.income .stat-icon mat-icon, html[data-theme=dark] .kpi-card.profit .kpi-icon,
html[data-theme=dark] .kpi-card.profit .card-icon,
html[data-theme=dark] .kpi-card.profit .balance-icon,
html[data-theme=dark] .kpi-card.profit .stat-icon mat-icon, html[data-theme=dark] .kpi-card.bonus .kpi-icon,
html[data-theme=dark] .kpi-card.bonus .card-icon,
html[data-theme=dark] .kpi-card.bonus .balance-icon,
html[data-theme=dark] .kpi-card.bonus .stat-icon mat-icon, html[data-theme=dark] .kpi-card.tone-total .kpi-icon,
html[data-theme=dark] .kpi-card.tone-total .card-icon,
html[data-theme=dark] .kpi-card.tone-total .balance-icon,
html[data-theme=dark] .kpi-card.tone-total .stat-icon mat-icon, html[data-theme=dark] .kpi-card.total-card .kpi-icon,
html[data-theme=dark] .kpi-card.total-card .card-icon,
html[data-theme=dark] .kpi-card.total-card .balance-icon,
html[data-theme=dark] .kpi-card.total-card .stat-icon mat-icon, html[data-theme=dark] .kpi-card.paid-amount .kpi-icon,
html[data-theme=dark] .kpi-card.paid-amount .card-icon,
html[data-theme=dark] .kpi-card.paid-amount .balance-icon,
html[data-theme=dark] .kpi-card.paid-amount .stat-icon mat-icon, html[data-theme=dark] .kpi-card.healthy .kpi-icon,
html[data-theme=dark] .kpi-card.healthy .card-icon,
html[data-theme=dark] .kpi-card.healthy .balance-icon,
html[data-theme=dark] .kpi-card.healthy .stat-icon mat-icon, html[data-theme=dark] .kpi-card.green .kpi-icon,
html[data-theme=dark] .kpi-card.green .card-icon,
html[data-theme=dark] .kpi-card.green .balance-icon,
html[data-theme=dark] .kpi-card.green .stat-icon mat-icon,
html[data-theme=dark] .summary-card.success .kpi-icon,
html[data-theme=dark] .summary-card.success .card-icon,
html[data-theme=dark] .summary-card.success .balance-icon,
html[data-theme=dark] .summary-card.success .stat-icon mat-icon,
html[data-theme=dark] .summary-card.positive .kpi-icon,
html[data-theme=dark] .summary-card.positive .card-icon,
html[data-theme=dark] .summary-card.positive .balance-icon,
html[data-theme=dark] .summary-card.positive .stat-icon mat-icon,
html[data-theme=dark] .summary-card.total .kpi-icon,
html[data-theme=dark] .summary-card.total .card-icon,
html[data-theme=dark] .summary-card.total .balance-icon,
html[data-theme=dark] .summary-card.total .stat-icon mat-icon,
html[data-theme=dark] .summary-card.income .kpi-icon,
html[data-theme=dark] .summary-card.income .card-icon,
html[data-theme=dark] .summary-card.income .balance-icon,
html[data-theme=dark] .summary-card.income .stat-icon mat-icon,
html[data-theme=dark] .summary-card.profit .kpi-icon,
html[data-theme=dark] .summary-card.profit .card-icon,
html[data-theme=dark] .summary-card.profit .balance-icon,
html[data-theme=dark] .summary-card.profit .stat-icon mat-icon,
html[data-theme=dark] .summary-card.bonus .kpi-icon,
html[data-theme=dark] .summary-card.bonus .card-icon,
html[data-theme=dark] .summary-card.bonus .balance-icon,
html[data-theme=dark] .summary-card.bonus .stat-icon mat-icon,
html[data-theme=dark] .summary-card.tone-total .kpi-icon,
html[data-theme=dark] .summary-card.tone-total .card-icon,
html[data-theme=dark] .summary-card.tone-total .balance-icon,
html[data-theme=dark] .summary-card.tone-total .stat-icon mat-icon,
html[data-theme=dark] .summary-card.total-card .kpi-icon,
html[data-theme=dark] .summary-card.total-card .card-icon,
html[data-theme=dark] .summary-card.total-card .balance-icon,
html[data-theme=dark] .summary-card.total-card .stat-icon mat-icon,
html[data-theme=dark] .summary-card.paid-amount .kpi-icon,
html[data-theme=dark] .summary-card.paid-amount .card-icon,
html[data-theme=dark] .summary-card.paid-amount .balance-icon,
html[data-theme=dark] .summary-card.paid-amount .stat-icon mat-icon,
html[data-theme=dark] .summary-card.healthy .kpi-icon,
html[data-theme=dark] .summary-card.healthy .card-icon,
html[data-theme=dark] .summary-card.healthy .balance-icon,
html[data-theme=dark] .summary-card.healthy .stat-icon mat-icon,
html[data-theme=dark] .summary-card.green .kpi-icon,
html[data-theme=dark] .summary-card.green .card-icon,
html[data-theme=dark] .summary-card.green .balance-icon,
html[data-theme=dark] .summary-card.green .stat-icon mat-icon,
html[data-theme=dark] .financial-card.success .kpi-icon,
html[data-theme=dark] .financial-card.success .card-icon,
html[data-theme=dark] .financial-card.success .balance-icon,
html[data-theme=dark] .financial-card.success .stat-icon mat-icon,
html[data-theme=dark] .financial-card.positive .kpi-icon,
html[data-theme=dark] .financial-card.positive .card-icon,
html[data-theme=dark] .financial-card.positive .balance-icon,
html[data-theme=dark] .financial-card.positive .stat-icon mat-icon,
html[data-theme=dark] .financial-card.total .kpi-icon,
html[data-theme=dark] .financial-card.total .card-icon,
html[data-theme=dark] .financial-card.total .balance-icon,
html[data-theme=dark] .financial-card.total .stat-icon mat-icon,
html[data-theme=dark] .financial-card.income .kpi-icon,
html[data-theme=dark] .financial-card.income .card-icon,
html[data-theme=dark] .financial-card.income .balance-icon,
html[data-theme=dark] .financial-card.income .stat-icon mat-icon,
html[data-theme=dark] .financial-card.profit .kpi-icon,
html[data-theme=dark] .financial-card.profit .card-icon,
html[data-theme=dark] .financial-card.profit .balance-icon,
html[data-theme=dark] .financial-card.profit .stat-icon mat-icon,
html[data-theme=dark] .financial-card.bonus .kpi-icon,
html[data-theme=dark] .financial-card.bonus .card-icon,
html[data-theme=dark] .financial-card.bonus .balance-icon,
html[data-theme=dark] .financial-card.bonus .stat-icon mat-icon,
html[data-theme=dark] .financial-card.tone-total .kpi-icon,
html[data-theme=dark] .financial-card.tone-total .card-icon,
html[data-theme=dark] .financial-card.tone-total .balance-icon,
html[data-theme=dark] .financial-card.tone-total .stat-icon mat-icon,
html[data-theme=dark] .financial-card.total-card .kpi-icon,
html[data-theme=dark] .financial-card.total-card .card-icon,
html[data-theme=dark] .financial-card.total-card .balance-icon,
html[data-theme=dark] .financial-card.total-card .stat-icon mat-icon,
html[data-theme=dark] .financial-card.paid-amount .kpi-icon,
html[data-theme=dark] .financial-card.paid-amount .card-icon,
html[data-theme=dark] .financial-card.paid-amount .balance-icon,
html[data-theme=dark] .financial-card.paid-amount .stat-icon mat-icon,
html[data-theme=dark] .financial-card.healthy .kpi-icon,
html[data-theme=dark] .financial-card.healthy .card-icon,
html[data-theme=dark] .financial-card.healthy .balance-icon,
html[data-theme=dark] .financial-card.healthy .stat-icon mat-icon,
html[data-theme=dark] .financial-card.green .kpi-icon,
html[data-theme=dark] .financial-card.green .card-icon,
html[data-theme=dark] .financial-card.green .balance-icon,
html[data-theme=dark] .financial-card.green .stat-icon mat-icon,
html[data-theme=dark] .stat-card.success .kpi-icon,
html[data-theme=dark] .stat-card.success .card-icon,
html[data-theme=dark] .stat-card.success .balance-icon,
html[data-theme=dark] .stat-card.success .stat-icon mat-icon,
html[data-theme=dark] .stat-card.positive .kpi-icon,
html[data-theme=dark] .stat-card.positive .card-icon,
html[data-theme=dark] .stat-card.positive .balance-icon,
html[data-theme=dark] .stat-card.positive .stat-icon mat-icon,
html[data-theme=dark] .stat-card.total .kpi-icon,
html[data-theme=dark] .stat-card.total .card-icon,
html[data-theme=dark] .stat-card.total .balance-icon,
html[data-theme=dark] .stat-card.total .stat-icon mat-icon,
html[data-theme=dark] .stat-card.income .kpi-icon,
html[data-theme=dark] .stat-card.income .card-icon,
html[data-theme=dark] .stat-card.income .balance-icon,
html[data-theme=dark] .stat-card.income .stat-icon mat-icon,
html[data-theme=dark] .stat-card.profit .kpi-icon,
html[data-theme=dark] .stat-card.profit .card-icon,
html[data-theme=dark] .stat-card.profit .balance-icon,
html[data-theme=dark] .stat-card.profit .stat-icon mat-icon,
html[data-theme=dark] .stat-card.bonus .kpi-icon,
html[data-theme=dark] .stat-card.bonus .card-icon,
html[data-theme=dark] .stat-card.bonus .balance-icon,
html[data-theme=dark] .stat-card.bonus .stat-icon mat-icon,
html[data-theme=dark] .stat-card.tone-total .kpi-icon,
html[data-theme=dark] .stat-card.tone-total .card-icon,
html[data-theme=dark] .stat-card.tone-total .balance-icon,
html[data-theme=dark] .stat-card.tone-total .stat-icon mat-icon,
html[data-theme=dark] .stat-card.total-card .kpi-icon,
html[data-theme=dark] .stat-card.total-card .card-icon,
html[data-theme=dark] .stat-card.total-card .balance-icon,
html[data-theme=dark] .stat-card.total-card .stat-icon mat-icon,
html[data-theme=dark] .stat-card.paid-amount .kpi-icon,
html[data-theme=dark] .stat-card.paid-amount .card-icon,
html[data-theme=dark] .stat-card.paid-amount .balance-icon,
html[data-theme=dark] .stat-card.paid-amount .stat-icon mat-icon,
html[data-theme=dark] .stat-card.healthy .kpi-icon,
html[data-theme=dark] .stat-card.healthy .card-icon,
html[data-theme=dark] .stat-card.healthy .balance-icon,
html[data-theme=dark] .stat-card.healthy .stat-icon mat-icon,
html[data-theme=dark] .stat-card.green .kpi-icon,
html[data-theme=dark] .stat-card.green .card-icon,
html[data-theme=dark] .stat-card.green .balance-icon,
html[data-theme=dark] .stat-card.green .stat-icon mat-icon,
html[data-theme=dark] .balance-card.success .kpi-icon,
html[data-theme=dark] .balance-card.success .card-icon,
html[data-theme=dark] .balance-card.success .balance-icon,
html[data-theme=dark] .balance-card.success .stat-icon mat-icon,
html[data-theme=dark] .balance-card.positive .kpi-icon,
html[data-theme=dark] .balance-card.positive .card-icon,
html[data-theme=dark] .balance-card.positive .balance-icon,
html[data-theme=dark] .balance-card.positive .stat-icon mat-icon,
html[data-theme=dark] .balance-card.total .kpi-icon,
html[data-theme=dark] .balance-card.total .card-icon,
html[data-theme=dark] .balance-card.total .balance-icon,
html[data-theme=dark] .balance-card.total .stat-icon mat-icon,
html[data-theme=dark] .balance-card.income .kpi-icon,
html[data-theme=dark] .balance-card.income .card-icon,
html[data-theme=dark] .balance-card.income .balance-icon,
html[data-theme=dark] .balance-card.income .stat-icon mat-icon,
html[data-theme=dark] .balance-card.profit .kpi-icon,
html[data-theme=dark] .balance-card.profit .card-icon,
html[data-theme=dark] .balance-card.profit .balance-icon,
html[data-theme=dark] .balance-card.profit .stat-icon mat-icon,
html[data-theme=dark] .balance-card.bonus .kpi-icon,
html[data-theme=dark] .balance-card.bonus .card-icon,
html[data-theme=dark] .balance-card.bonus .balance-icon,
html[data-theme=dark] .balance-card.bonus .stat-icon mat-icon,
html[data-theme=dark] .balance-card.tone-total .kpi-icon,
html[data-theme=dark] .balance-card.tone-total .card-icon,
html[data-theme=dark] .balance-card.tone-total .balance-icon,
html[data-theme=dark] .balance-card.tone-total .stat-icon mat-icon,
html[data-theme=dark] .balance-card.total-card .kpi-icon,
html[data-theme=dark] .balance-card.total-card .card-icon,
html[data-theme=dark] .balance-card.total-card .balance-icon,
html[data-theme=dark] .balance-card.total-card .stat-icon mat-icon,
html[data-theme=dark] .balance-card.paid-amount .kpi-icon,
html[data-theme=dark] .balance-card.paid-amount .card-icon,
html[data-theme=dark] .balance-card.paid-amount .balance-icon,
html[data-theme=dark] .balance-card.paid-amount .stat-icon mat-icon,
html[data-theme=dark] .balance-card.healthy .kpi-icon,
html[data-theme=dark] .balance-card.healthy .card-icon,
html[data-theme=dark] .balance-card.healthy .balance-icon,
html[data-theme=dark] .balance-card.healthy .stat-icon mat-icon,
html[data-theme=dark] .balance-card.green .kpi-icon,
html[data-theme=dark] .balance-card.green .card-icon,
html[data-theme=dark] .balance-card.green .balance-icon,
html[data-theme=dark] .balance-card.green .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.success .kpi-icon,
html[data-theme=dark] .preview-kpi-card.success .card-icon,
html[data-theme=dark] .preview-kpi-card.success .balance-icon,
html[data-theme=dark] .preview-kpi-card.success .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.positive .kpi-icon,
html[data-theme=dark] .preview-kpi-card.positive .card-icon,
html[data-theme=dark] .preview-kpi-card.positive .balance-icon,
html[data-theme=dark] .preview-kpi-card.positive .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.total .kpi-icon,
html[data-theme=dark] .preview-kpi-card.total .card-icon,
html[data-theme=dark] .preview-kpi-card.total .balance-icon,
html[data-theme=dark] .preview-kpi-card.total .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.income .kpi-icon,
html[data-theme=dark] .preview-kpi-card.income .card-icon,
html[data-theme=dark] .preview-kpi-card.income .balance-icon,
html[data-theme=dark] .preview-kpi-card.income .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.profit .kpi-icon,
html[data-theme=dark] .preview-kpi-card.profit .card-icon,
html[data-theme=dark] .preview-kpi-card.profit .balance-icon,
html[data-theme=dark] .preview-kpi-card.profit .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.bonus .kpi-icon,
html[data-theme=dark] .preview-kpi-card.bonus .card-icon,
html[data-theme=dark] .preview-kpi-card.bonus .balance-icon,
html[data-theme=dark] .preview-kpi-card.bonus .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.tone-total .kpi-icon,
html[data-theme=dark] .preview-kpi-card.tone-total .card-icon,
html[data-theme=dark] .preview-kpi-card.tone-total .balance-icon,
html[data-theme=dark] .preview-kpi-card.tone-total .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.total-card .kpi-icon,
html[data-theme=dark] .preview-kpi-card.total-card .card-icon,
html[data-theme=dark] .preview-kpi-card.total-card .balance-icon,
html[data-theme=dark] .preview-kpi-card.total-card .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.paid-amount .kpi-icon,
html[data-theme=dark] .preview-kpi-card.paid-amount .card-icon,
html[data-theme=dark] .preview-kpi-card.paid-amount .balance-icon,
html[data-theme=dark] .preview-kpi-card.paid-amount .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.healthy .kpi-icon,
html[data-theme=dark] .preview-kpi-card.healthy .card-icon,
html[data-theme=dark] .preview-kpi-card.healthy .balance-icon,
html[data-theme=dark] .preview-kpi-card.healthy .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.green .kpi-icon,
html[data-theme=dark] .preview-kpi-card.green .card-icon,
html[data-theme=dark] .preview-kpi-card.green .balance-icon,
html[data-theme=dark] .preview-kpi-card.green .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.success .kpi-icon,
html[data-theme=dark] .mat-mdc-card.success .card-icon,
html[data-theme=dark] .mat-mdc-card.success .balance-icon,
html[data-theme=dark] .mat-mdc-card.success .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.positive .kpi-icon,
html[data-theme=dark] .mat-mdc-card.positive .card-icon,
html[data-theme=dark] .mat-mdc-card.positive .balance-icon,
html[data-theme=dark] .mat-mdc-card.positive .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.total .kpi-icon,
html[data-theme=dark] .mat-mdc-card.total .card-icon,
html[data-theme=dark] .mat-mdc-card.total .balance-icon,
html[data-theme=dark] .mat-mdc-card.total .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.income .kpi-icon,
html[data-theme=dark] .mat-mdc-card.income .card-icon,
html[data-theme=dark] .mat-mdc-card.income .balance-icon,
html[data-theme=dark] .mat-mdc-card.income .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.profit .kpi-icon,
html[data-theme=dark] .mat-mdc-card.profit .card-icon,
html[data-theme=dark] .mat-mdc-card.profit .balance-icon,
html[data-theme=dark] .mat-mdc-card.profit .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.bonus .kpi-icon,
html[data-theme=dark] .mat-mdc-card.bonus .card-icon,
html[data-theme=dark] .mat-mdc-card.bonus .balance-icon,
html[data-theme=dark] .mat-mdc-card.bonus .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.tone-total .kpi-icon,
html[data-theme=dark] .mat-mdc-card.tone-total .card-icon,
html[data-theme=dark] .mat-mdc-card.tone-total .balance-icon,
html[data-theme=dark] .mat-mdc-card.tone-total .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.total-card .kpi-icon,
html[data-theme=dark] .mat-mdc-card.total-card .card-icon,
html[data-theme=dark] .mat-mdc-card.total-card .balance-icon,
html[data-theme=dark] .mat-mdc-card.total-card .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.paid-amount .kpi-icon,
html[data-theme=dark] .mat-mdc-card.paid-amount .card-icon,
html[data-theme=dark] .mat-mdc-card.paid-amount .balance-icon,
html[data-theme=dark] .mat-mdc-card.paid-amount .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.healthy .kpi-icon,
html[data-theme=dark] .mat-mdc-card.healthy .card-icon,
html[data-theme=dark] .mat-mdc-card.healthy .balance-icon,
html[data-theme=dark] .mat-mdc-card.healthy .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.green .kpi-icon,
html[data-theme=dark] .mat-mdc-card.green .card-icon,
html[data-theme=dark] .mat-mdc-card.green .balance-icon,
html[data-theme=dark] .mat-mdc-card.green .stat-icon mat-icon {
  color: var(--color-success) !important;
}
html[data-theme=dark] .kpi-card.success .stat-icon, html[data-theme=dark] .kpi-card.positive .stat-icon, html[data-theme=dark] .kpi-card.total .stat-icon, html[data-theme=dark] .kpi-card.income .stat-icon, html[data-theme=dark] .kpi-card.profit .stat-icon, html[data-theme=dark] .kpi-card.bonus .stat-icon, html[data-theme=dark] .kpi-card.tone-total .stat-icon, html[data-theme=dark] .kpi-card.total-card .stat-icon, html[data-theme=dark] .kpi-card.paid-amount .stat-icon, html[data-theme=dark] .kpi-card.healthy .stat-icon, html[data-theme=dark] .kpi-card.green .stat-icon,
html[data-theme=dark] .summary-card.success .stat-icon,
html[data-theme=dark] .summary-card.positive .stat-icon,
html[data-theme=dark] .summary-card.total .stat-icon,
html[data-theme=dark] .summary-card.income .stat-icon,
html[data-theme=dark] .summary-card.profit .stat-icon,
html[data-theme=dark] .summary-card.bonus .stat-icon,
html[data-theme=dark] .summary-card.tone-total .stat-icon,
html[data-theme=dark] .summary-card.total-card .stat-icon,
html[data-theme=dark] .summary-card.paid-amount .stat-icon,
html[data-theme=dark] .summary-card.healthy .stat-icon,
html[data-theme=dark] .summary-card.green .stat-icon,
html[data-theme=dark] .financial-card.success .stat-icon,
html[data-theme=dark] .financial-card.positive .stat-icon,
html[data-theme=dark] .financial-card.total .stat-icon,
html[data-theme=dark] .financial-card.income .stat-icon,
html[data-theme=dark] .financial-card.profit .stat-icon,
html[data-theme=dark] .financial-card.bonus .stat-icon,
html[data-theme=dark] .financial-card.tone-total .stat-icon,
html[data-theme=dark] .financial-card.total-card .stat-icon,
html[data-theme=dark] .financial-card.paid-amount .stat-icon,
html[data-theme=dark] .financial-card.healthy .stat-icon,
html[data-theme=dark] .financial-card.green .stat-icon,
html[data-theme=dark] .stat-card.success .stat-icon,
html[data-theme=dark] .stat-card.positive .stat-icon,
html[data-theme=dark] .stat-card.total .stat-icon,
html[data-theme=dark] .stat-card.income .stat-icon,
html[data-theme=dark] .stat-card.profit .stat-icon,
html[data-theme=dark] .stat-card.bonus .stat-icon,
html[data-theme=dark] .stat-card.tone-total .stat-icon,
html[data-theme=dark] .stat-card.total-card .stat-icon,
html[data-theme=dark] .stat-card.paid-amount .stat-icon,
html[data-theme=dark] .stat-card.healthy .stat-icon,
html[data-theme=dark] .stat-card.green .stat-icon,
html[data-theme=dark] .balance-card.success .stat-icon,
html[data-theme=dark] .balance-card.positive .stat-icon,
html[data-theme=dark] .balance-card.total .stat-icon,
html[data-theme=dark] .balance-card.income .stat-icon,
html[data-theme=dark] .balance-card.profit .stat-icon,
html[data-theme=dark] .balance-card.bonus .stat-icon,
html[data-theme=dark] .balance-card.tone-total .stat-icon,
html[data-theme=dark] .balance-card.total-card .stat-icon,
html[data-theme=dark] .balance-card.paid-amount .stat-icon,
html[data-theme=dark] .balance-card.healthy .stat-icon,
html[data-theme=dark] .balance-card.green .stat-icon,
html[data-theme=dark] .preview-kpi-card.success .stat-icon,
html[data-theme=dark] .preview-kpi-card.positive .stat-icon,
html[data-theme=dark] .preview-kpi-card.total .stat-icon,
html[data-theme=dark] .preview-kpi-card.income .stat-icon,
html[data-theme=dark] .preview-kpi-card.profit .stat-icon,
html[data-theme=dark] .preview-kpi-card.bonus .stat-icon,
html[data-theme=dark] .preview-kpi-card.tone-total .stat-icon,
html[data-theme=dark] .preview-kpi-card.total-card .stat-icon,
html[data-theme=dark] .preview-kpi-card.paid-amount .stat-icon,
html[data-theme=dark] .preview-kpi-card.healthy .stat-icon,
html[data-theme=dark] .preview-kpi-card.green .stat-icon,
html[data-theme=dark] .mat-mdc-card.success .stat-icon,
html[data-theme=dark] .mat-mdc-card.positive .stat-icon,
html[data-theme=dark] .mat-mdc-card.total .stat-icon,
html[data-theme=dark] .mat-mdc-card.income .stat-icon,
html[data-theme=dark] .mat-mdc-card.profit .stat-icon,
html[data-theme=dark] .mat-mdc-card.bonus .stat-icon,
html[data-theme=dark] .mat-mdc-card.tone-total .stat-icon,
html[data-theme=dark] .mat-mdc-card.total-card .stat-icon,
html[data-theme=dark] .mat-mdc-card.paid-amount .stat-icon,
html[data-theme=dark] .mat-mdc-card.healthy .stat-icon,
html[data-theme=dark] .mat-mdc-card.green .stat-icon {
  background: rgba(52, 211, 153, 0.2) !important;
  border: 1px solid rgba(52, 211, 153, 0.4) !important;
}
html[data-theme=dark] .kpi-card.warning, html[data-theme=dark] .kpi-card.cash, html[data-theme=dark] .kpi-card.outstanding, html[data-theme=dark] .kpi-card.unpaid, html[data-theme=dark] .kpi-card.pending, html[data-theme=dark] .kpi-card.pending-card, html[data-theme=dark] .kpi-card.overdue-risk, html[data-theme=dark] .kpi-card.tone-cash, html[data-theme=dark] .kpi-card.watch, html[data-theme=dark] .kpi-card.amber,
html[data-theme=dark] .summary-card.warning,
html[data-theme=dark] .summary-card.cash,
html[data-theme=dark] .summary-card.outstanding,
html[data-theme=dark] .summary-card.unpaid,
html[data-theme=dark] .summary-card.pending,
html[data-theme=dark] .summary-card.pending-card,
html[data-theme=dark] .summary-card.overdue-risk,
html[data-theme=dark] .summary-card.tone-cash,
html[data-theme=dark] .summary-card.watch,
html[data-theme=dark] .summary-card.amber,
html[data-theme=dark] .financial-card.warning,
html[data-theme=dark] .financial-card.cash,
html[data-theme=dark] .financial-card.outstanding,
html[data-theme=dark] .financial-card.unpaid,
html[data-theme=dark] .financial-card.pending,
html[data-theme=dark] .financial-card.pending-card,
html[data-theme=dark] .financial-card.overdue-risk,
html[data-theme=dark] .financial-card.tone-cash,
html[data-theme=dark] .financial-card.watch,
html[data-theme=dark] .financial-card.amber,
html[data-theme=dark] .stat-card.warning,
html[data-theme=dark] .stat-card.cash,
html[data-theme=dark] .stat-card.outstanding,
html[data-theme=dark] .stat-card.unpaid,
html[data-theme=dark] .stat-card.pending,
html[data-theme=dark] .stat-card.pending-card,
html[data-theme=dark] .stat-card.overdue-risk,
html[data-theme=dark] .stat-card.tone-cash,
html[data-theme=dark] .stat-card.watch,
html[data-theme=dark] .stat-card.amber,
html[data-theme=dark] .balance-card.warning,
html[data-theme=dark] .balance-card.cash,
html[data-theme=dark] .balance-card.outstanding,
html[data-theme=dark] .balance-card.unpaid,
html[data-theme=dark] .balance-card.pending,
html[data-theme=dark] .balance-card.pending-card,
html[data-theme=dark] .balance-card.overdue-risk,
html[data-theme=dark] .balance-card.tone-cash,
html[data-theme=dark] .balance-card.watch,
html[data-theme=dark] .balance-card.amber,
html[data-theme=dark] .preview-kpi-card.warning,
html[data-theme=dark] .preview-kpi-card.cash,
html[data-theme=dark] .preview-kpi-card.outstanding,
html[data-theme=dark] .preview-kpi-card.unpaid,
html[data-theme=dark] .preview-kpi-card.pending,
html[data-theme=dark] .preview-kpi-card.pending-card,
html[data-theme=dark] .preview-kpi-card.overdue-risk,
html[data-theme=dark] .preview-kpi-card.tone-cash,
html[data-theme=dark] .preview-kpi-card.watch,
html[data-theme=dark] .preview-kpi-card.amber,
html[data-theme=dark] .mat-mdc-card.warning,
html[data-theme=dark] .mat-mdc-card.cash,
html[data-theme=dark] .mat-mdc-card.outstanding,
html[data-theme=dark] .mat-mdc-card.unpaid,
html[data-theme=dark] .mat-mdc-card.pending,
html[data-theme=dark] .mat-mdc-card.pending-card,
html[data-theme=dark] .mat-mdc-card.overdue-risk,
html[data-theme=dark] .mat-mdc-card.tone-cash,
html[data-theme=dark] .mat-mdc-card.watch,
html[data-theme=dark] .mat-mdc-card.amber {
  border-top: 4px solid var(--color-warning) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
html[data-theme=dark] .kpi-card.warning .kpi-icon,
html[data-theme=dark] .kpi-card.warning .card-icon,
html[data-theme=dark] .kpi-card.warning .balance-icon,
html[data-theme=dark] .kpi-card.warning .stat-icon mat-icon, html[data-theme=dark] .kpi-card.cash .kpi-icon,
html[data-theme=dark] .kpi-card.cash .card-icon,
html[data-theme=dark] .kpi-card.cash .balance-icon,
html[data-theme=dark] .kpi-card.cash .stat-icon mat-icon, html[data-theme=dark] .kpi-card.outstanding .kpi-icon,
html[data-theme=dark] .kpi-card.outstanding .card-icon,
html[data-theme=dark] .kpi-card.outstanding .balance-icon,
html[data-theme=dark] .kpi-card.outstanding .stat-icon mat-icon, html[data-theme=dark] .kpi-card.unpaid .kpi-icon,
html[data-theme=dark] .kpi-card.unpaid .card-icon,
html[data-theme=dark] .kpi-card.unpaid .balance-icon,
html[data-theme=dark] .kpi-card.unpaid .stat-icon mat-icon, html[data-theme=dark] .kpi-card.pending .kpi-icon,
html[data-theme=dark] .kpi-card.pending .card-icon,
html[data-theme=dark] .kpi-card.pending .balance-icon,
html[data-theme=dark] .kpi-card.pending .stat-icon mat-icon, html[data-theme=dark] .kpi-card.pending-card .kpi-icon,
html[data-theme=dark] .kpi-card.pending-card .card-icon,
html[data-theme=dark] .kpi-card.pending-card .balance-icon,
html[data-theme=dark] .kpi-card.pending-card .stat-icon mat-icon, html[data-theme=dark] .kpi-card.overdue-risk .kpi-icon,
html[data-theme=dark] .kpi-card.overdue-risk .card-icon,
html[data-theme=dark] .kpi-card.overdue-risk .balance-icon,
html[data-theme=dark] .kpi-card.overdue-risk .stat-icon mat-icon, html[data-theme=dark] .kpi-card.tone-cash .kpi-icon,
html[data-theme=dark] .kpi-card.tone-cash .card-icon,
html[data-theme=dark] .kpi-card.tone-cash .balance-icon,
html[data-theme=dark] .kpi-card.tone-cash .stat-icon mat-icon, html[data-theme=dark] .kpi-card.watch .kpi-icon,
html[data-theme=dark] .kpi-card.watch .card-icon,
html[data-theme=dark] .kpi-card.watch .balance-icon,
html[data-theme=dark] .kpi-card.watch .stat-icon mat-icon, html[data-theme=dark] .kpi-card.amber .kpi-icon,
html[data-theme=dark] .kpi-card.amber .card-icon,
html[data-theme=dark] .kpi-card.amber .balance-icon,
html[data-theme=dark] .kpi-card.amber .stat-icon mat-icon,
html[data-theme=dark] .summary-card.warning .kpi-icon,
html[data-theme=dark] .summary-card.warning .card-icon,
html[data-theme=dark] .summary-card.warning .balance-icon,
html[data-theme=dark] .summary-card.warning .stat-icon mat-icon,
html[data-theme=dark] .summary-card.cash .kpi-icon,
html[data-theme=dark] .summary-card.cash .card-icon,
html[data-theme=dark] .summary-card.cash .balance-icon,
html[data-theme=dark] .summary-card.cash .stat-icon mat-icon,
html[data-theme=dark] .summary-card.outstanding .kpi-icon,
html[data-theme=dark] .summary-card.outstanding .card-icon,
html[data-theme=dark] .summary-card.outstanding .balance-icon,
html[data-theme=dark] .summary-card.outstanding .stat-icon mat-icon,
html[data-theme=dark] .summary-card.unpaid .kpi-icon,
html[data-theme=dark] .summary-card.unpaid .card-icon,
html[data-theme=dark] .summary-card.unpaid .balance-icon,
html[data-theme=dark] .summary-card.unpaid .stat-icon mat-icon,
html[data-theme=dark] .summary-card.pending .kpi-icon,
html[data-theme=dark] .summary-card.pending .card-icon,
html[data-theme=dark] .summary-card.pending .balance-icon,
html[data-theme=dark] .summary-card.pending .stat-icon mat-icon,
html[data-theme=dark] .summary-card.pending-card .kpi-icon,
html[data-theme=dark] .summary-card.pending-card .card-icon,
html[data-theme=dark] .summary-card.pending-card .balance-icon,
html[data-theme=dark] .summary-card.pending-card .stat-icon mat-icon,
html[data-theme=dark] .summary-card.overdue-risk .kpi-icon,
html[data-theme=dark] .summary-card.overdue-risk .card-icon,
html[data-theme=dark] .summary-card.overdue-risk .balance-icon,
html[data-theme=dark] .summary-card.overdue-risk .stat-icon mat-icon,
html[data-theme=dark] .summary-card.tone-cash .kpi-icon,
html[data-theme=dark] .summary-card.tone-cash .card-icon,
html[data-theme=dark] .summary-card.tone-cash .balance-icon,
html[data-theme=dark] .summary-card.tone-cash .stat-icon mat-icon,
html[data-theme=dark] .summary-card.watch .kpi-icon,
html[data-theme=dark] .summary-card.watch .card-icon,
html[data-theme=dark] .summary-card.watch .balance-icon,
html[data-theme=dark] .summary-card.watch .stat-icon mat-icon,
html[data-theme=dark] .summary-card.amber .kpi-icon,
html[data-theme=dark] .summary-card.amber .card-icon,
html[data-theme=dark] .summary-card.amber .balance-icon,
html[data-theme=dark] .summary-card.amber .stat-icon mat-icon,
html[data-theme=dark] .financial-card.warning .kpi-icon,
html[data-theme=dark] .financial-card.warning .card-icon,
html[data-theme=dark] .financial-card.warning .balance-icon,
html[data-theme=dark] .financial-card.warning .stat-icon mat-icon,
html[data-theme=dark] .financial-card.cash .kpi-icon,
html[data-theme=dark] .financial-card.cash .card-icon,
html[data-theme=dark] .financial-card.cash .balance-icon,
html[data-theme=dark] .financial-card.cash .stat-icon mat-icon,
html[data-theme=dark] .financial-card.outstanding .kpi-icon,
html[data-theme=dark] .financial-card.outstanding .card-icon,
html[data-theme=dark] .financial-card.outstanding .balance-icon,
html[data-theme=dark] .financial-card.outstanding .stat-icon mat-icon,
html[data-theme=dark] .financial-card.unpaid .kpi-icon,
html[data-theme=dark] .financial-card.unpaid .card-icon,
html[data-theme=dark] .financial-card.unpaid .balance-icon,
html[data-theme=dark] .financial-card.unpaid .stat-icon mat-icon,
html[data-theme=dark] .financial-card.pending .kpi-icon,
html[data-theme=dark] .financial-card.pending .card-icon,
html[data-theme=dark] .financial-card.pending .balance-icon,
html[data-theme=dark] .financial-card.pending .stat-icon mat-icon,
html[data-theme=dark] .financial-card.pending-card .kpi-icon,
html[data-theme=dark] .financial-card.pending-card .card-icon,
html[data-theme=dark] .financial-card.pending-card .balance-icon,
html[data-theme=dark] .financial-card.pending-card .stat-icon mat-icon,
html[data-theme=dark] .financial-card.overdue-risk .kpi-icon,
html[data-theme=dark] .financial-card.overdue-risk .card-icon,
html[data-theme=dark] .financial-card.overdue-risk .balance-icon,
html[data-theme=dark] .financial-card.overdue-risk .stat-icon mat-icon,
html[data-theme=dark] .financial-card.tone-cash .kpi-icon,
html[data-theme=dark] .financial-card.tone-cash .card-icon,
html[data-theme=dark] .financial-card.tone-cash .balance-icon,
html[data-theme=dark] .financial-card.tone-cash .stat-icon mat-icon,
html[data-theme=dark] .financial-card.watch .kpi-icon,
html[data-theme=dark] .financial-card.watch .card-icon,
html[data-theme=dark] .financial-card.watch .balance-icon,
html[data-theme=dark] .financial-card.watch .stat-icon mat-icon,
html[data-theme=dark] .financial-card.amber .kpi-icon,
html[data-theme=dark] .financial-card.amber .card-icon,
html[data-theme=dark] .financial-card.amber .balance-icon,
html[data-theme=dark] .financial-card.amber .stat-icon mat-icon,
html[data-theme=dark] .stat-card.warning .kpi-icon,
html[data-theme=dark] .stat-card.warning .card-icon,
html[data-theme=dark] .stat-card.warning .balance-icon,
html[data-theme=dark] .stat-card.warning .stat-icon mat-icon,
html[data-theme=dark] .stat-card.cash .kpi-icon,
html[data-theme=dark] .stat-card.cash .card-icon,
html[data-theme=dark] .stat-card.cash .balance-icon,
html[data-theme=dark] .stat-card.cash .stat-icon mat-icon,
html[data-theme=dark] .stat-card.outstanding .kpi-icon,
html[data-theme=dark] .stat-card.outstanding .card-icon,
html[data-theme=dark] .stat-card.outstanding .balance-icon,
html[data-theme=dark] .stat-card.outstanding .stat-icon mat-icon,
html[data-theme=dark] .stat-card.unpaid .kpi-icon,
html[data-theme=dark] .stat-card.unpaid .card-icon,
html[data-theme=dark] .stat-card.unpaid .balance-icon,
html[data-theme=dark] .stat-card.unpaid .stat-icon mat-icon,
html[data-theme=dark] .stat-card.pending .kpi-icon,
html[data-theme=dark] .stat-card.pending .card-icon,
html[data-theme=dark] .stat-card.pending .balance-icon,
html[data-theme=dark] .stat-card.pending .stat-icon mat-icon,
html[data-theme=dark] .stat-card.pending-card .kpi-icon,
html[data-theme=dark] .stat-card.pending-card .card-icon,
html[data-theme=dark] .stat-card.pending-card .balance-icon,
html[data-theme=dark] .stat-card.pending-card .stat-icon mat-icon,
html[data-theme=dark] .stat-card.overdue-risk .kpi-icon,
html[data-theme=dark] .stat-card.overdue-risk .card-icon,
html[data-theme=dark] .stat-card.overdue-risk .balance-icon,
html[data-theme=dark] .stat-card.overdue-risk .stat-icon mat-icon,
html[data-theme=dark] .stat-card.tone-cash .kpi-icon,
html[data-theme=dark] .stat-card.tone-cash .card-icon,
html[data-theme=dark] .stat-card.tone-cash .balance-icon,
html[data-theme=dark] .stat-card.tone-cash .stat-icon mat-icon,
html[data-theme=dark] .stat-card.watch .kpi-icon,
html[data-theme=dark] .stat-card.watch .card-icon,
html[data-theme=dark] .stat-card.watch .balance-icon,
html[data-theme=dark] .stat-card.watch .stat-icon mat-icon,
html[data-theme=dark] .stat-card.amber .kpi-icon,
html[data-theme=dark] .stat-card.amber .card-icon,
html[data-theme=dark] .stat-card.amber .balance-icon,
html[data-theme=dark] .stat-card.amber .stat-icon mat-icon,
html[data-theme=dark] .balance-card.warning .kpi-icon,
html[data-theme=dark] .balance-card.warning .card-icon,
html[data-theme=dark] .balance-card.warning .balance-icon,
html[data-theme=dark] .balance-card.warning .stat-icon mat-icon,
html[data-theme=dark] .balance-card.cash .kpi-icon,
html[data-theme=dark] .balance-card.cash .card-icon,
html[data-theme=dark] .balance-card.cash .balance-icon,
html[data-theme=dark] .balance-card.cash .stat-icon mat-icon,
html[data-theme=dark] .balance-card.outstanding .kpi-icon,
html[data-theme=dark] .balance-card.outstanding .card-icon,
html[data-theme=dark] .balance-card.outstanding .balance-icon,
html[data-theme=dark] .balance-card.outstanding .stat-icon mat-icon,
html[data-theme=dark] .balance-card.unpaid .kpi-icon,
html[data-theme=dark] .balance-card.unpaid .card-icon,
html[data-theme=dark] .balance-card.unpaid .balance-icon,
html[data-theme=dark] .balance-card.unpaid .stat-icon mat-icon,
html[data-theme=dark] .balance-card.pending .kpi-icon,
html[data-theme=dark] .balance-card.pending .card-icon,
html[data-theme=dark] .balance-card.pending .balance-icon,
html[data-theme=dark] .balance-card.pending .stat-icon mat-icon,
html[data-theme=dark] .balance-card.pending-card .kpi-icon,
html[data-theme=dark] .balance-card.pending-card .card-icon,
html[data-theme=dark] .balance-card.pending-card .balance-icon,
html[data-theme=dark] .balance-card.pending-card .stat-icon mat-icon,
html[data-theme=dark] .balance-card.overdue-risk .kpi-icon,
html[data-theme=dark] .balance-card.overdue-risk .card-icon,
html[data-theme=dark] .balance-card.overdue-risk .balance-icon,
html[data-theme=dark] .balance-card.overdue-risk .stat-icon mat-icon,
html[data-theme=dark] .balance-card.tone-cash .kpi-icon,
html[data-theme=dark] .balance-card.tone-cash .card-icon,
html[data-theme=dark] .balance-card.tone-cash .balance-icon,
html[data-theme=dark] .balance-card.tone-cash .stat-icon mat-icon,
html[data-theme=dark] .balance-card.watch .kpi-icon,
html[data-theme=dark] .balance-card.watch .card-icon,
html[data-theme=dark] .balance-card.watch .balance-icon,
html[data-theme=dark] .balance-card.watch .stat-icon mat-icon,
html[data-theme=dark] .balance-card.amber .kpi-icon,
html[data-theme=dark] .balance-card.amber .card-icon,
html[data-theme=dark] .balance-card.amber .balance-icon,
html[data-theme=dark] .balance-card.amber .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.warning .kpi-icon,
html[data-theme=dark] .preview-kpi-card.warning .card-icon,
html[data-theme=dark] .preview-kpi-card.warning .balance-icon,
html[data-theme=dark] .preview-kpi-card.warning .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.cash .kpi-icon,
html[data-theme=dark] .preview-kpi-card.cash .card-icon,
html[data-theme=dark] .preview-kpi-card.cash .balance-icon,
html[data-theme=dark] .preview-kpi-card.cash .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.outstanding .kpi-icon,
html[data-theme=dark] .preview-kpi-card.outstanding .card-icon,
html[data-theme=dark] .preview-kpi-card.outstanding .balance-icon,
html[data-theme=dark] .preview-kpi-card.outstanding .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.unpaid .kpi-icon,
html[data-theme=dark] .preview-kpi-card.unpaid .card-icon,
html[data-theme=dark] .preview-kpi-card.unpaid .balance-icon,
html[data-theme=dark] .preview-kpi-card.unpaid .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.pending .kpi-icon,
html[data-theme=dark] .preview-kpi-card.pending .card-icon,
html[data-theme=dark] .preview-kpi-card.pending .balance-icon,
html[data-theme=dark] .preview-kpi-card.pending .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.pending-card .kpi-icon,
html[data-theme=dark] .preview-kpi-card.pending-card .card-icon,
html[data-theme=dark] .preview-kpi-card.pending-card .balance-icon,
html[data-theme=dark] .preview-kpi-card.pending-card .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.overdue-risk .kpi-icon,
html[data-theme=dark] .preview-kpi-card.overdue-risk .card-icon,
html[data-theme=dark] .preview-kpi-card.overdue-risk .balance-icon,
html[data-theme=dark] .preview-kpi-card.overdue-risk .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.tone-cash .kpi-icon,
html[data-theme=dark] .preview-kpi-card.tone-cash .card-icon,
html[data-theme=dark] .preview-kpi-card.tone-cash .balance-icon,
html[data-theme=dark] .preview-kpi-card.tone-cash .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.watch .kpi-icon,
html[data-theme=dark] .preview-kpi-card.watch .card-icon,
html[data-theme=dark] .preview-kpi-card.watch .balance-icon,
html[data-theme=dark] .preview-kpi-card.watch .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.amber .kpi-icon,
html[data-theme=dark] .preview-kpi-card.amber .card-icon,
html[data-theme=dark] .preview-kpi-card.amber .balance-icon,
html[data-theme=dark] .preview-kpi-card.amber .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.warning .kpi-icon,
html[data-theme=dark] .mat-mdc-card.warning .card-icon,
html[data-theme=dark] .mat-mdc-card.warning .balance-icon,
html[data-theme=dark] .mat-mdc-card.warning .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.cash .kpi-icon,
html[data-theme=dark] .mat-mdc-card.cash .card-icon,
html[data-theme=dark] .mat-mdc-card.cash .balance-icon,
html[data-theme=dark] .mat-mdc-card.cash .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.outstanding .kpi-icon,
html[data-theme=dark] .mat-mdc-card.outstanding .card-icon,
html[data-theme=dark] .mat-mdc-card.outstanding .balance-icon,
html[data-theme=dark] .mat-mdc-card.outstanding .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.unpaid .kpi-icon,
html[data-theme=dark] .mat-mdc-card.unpaid .card-icon,
html[data-theme=dark] .mat-mdc-card.unpaid .balance-icon,
html[data-theme=dark] .mat-mdc-card.unpaid .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.pending .kpi-icon,
html[data-theme=dark] .mat-mdc-card.pending .card-icon,
html[data-theme=dark] .mat-mdc-card.pending .balance-icon,
html[data-theme=dark] .mat-mdc-card.pending .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.pending-card .kpi-icon,
html[data-theme=dark] .mat-mdc-card.pending-card .card-icon,
html[data-theme=dark] .mat-mdc-card.pending-card .balance-icon,
html[data-theme=dark] .mat-mdc-card.pending-card .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.overdue-risk .kpi-icon,
html[data-theme=dark] .mat-mdc-card.overdue-risk .card-icon,
html[data-theme=dark] .mat-mdc-card.overdue-risk .balance-icon,
html[data-theme=dark] .mat-mdc-card.overdue-risk .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.tone-cash .kpi-icon,
html[data-theme=dark] .mat-mdc-card.tone-cash .card-icon,
html[data-theme=dark] .mat-mdc-card.tone-cash .balance-icon,
html[data-theme=dark] .mat-mdc-card.tone-cash .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.watch .kpi-icon,
html[data-theme=dark] .mat-mdc-card.watch .card-icon,
html[data-theme=dark] .mat-mdc-card.watch .balance-icon,
html[data-theme=dark] .mat-mdc-card.watch .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.amber .kpi-icon,
html[data-theme=dark] .mat-mdc-card.amber .card-icon,
html[data-theme=dark] .mat-mdc-card.amber .balance-icon,
html[data-theme=dark] .mat-mdc-card.amber .stat-icon mat-icon {
  color: var(--color-warning) !important;
}
html[data-theme=dark] .kpi-card.warning .stat-icon, html[data-theme=dark] .kpi-card.cash .stat-icon, html[data-theme=dark] .kpi-card.outstanding .stat-icon, html[data-theme=dark] .kpi-card.unpaid .stat-icon, html[data-theme=dark] .kpi-card.pending .stat-icon, html[data-theme=dark] .kpi-card.pending-card .stat-icon, html[data-theme=dark] .kpi-card.overdue-risk .stat-icon, html[data-theme=dark] .kpi-card.tone-cash .stat-icon, html[data-theme=dark] .kpi-card.watch .stat-icon, html[data-theme=dark] .kpi-card.amber .stat-icon,
html[data-theme=dark] .summary-card.warning .stat-icon,
html[data-theme=dark] .summary-card.cash .stat-icon,
html[data-theme=dark] .summary-card.outstanding .stat-icon,
html[data-theme=dark] .summary-card.unpaid .stat-icon,
html[data-theme=dark] .summary-card.pending .stat-icon,
html[data-theme=dark] .summary-card.pending-card .stat-icon,
html[data-theme=dark] .summary-card.overdue-risk .stat-icon,
html[data-theme=dark] .summary-card.tone-cash .stat-icon,
html[data-theme=dark] .summary-card.watch .stat-icon,
html[data-theme=dark] .summary-card.amber .stat-icon,
html[data-theme=dark] .financial-card.warning .stat-icon,
html[data-theme=dark] .financial-card.cash .stat-icon,
html[data-theme=dark] .financial-card.outstanding .stat-icon,
html[data-theme=dark] .financial-card.unpaid .stat-icon,
html[data-theme=dark] .financial-card.pending .stat-icon,
html[data-theme=dark] .financial-card.pending-card .stat-icon,
html[data-theme=dark] .financial-card.overdue-risk .stat-icon,
html[data-theme=dark] .financial-card.tone-cash .stat-icon,
html[data-theme=dark] .financial-card.watch .stat-icon,
html[data-theme=dark] .financial-card.amber .stat-icon,
html[data-theme=dark] .stat-card.warning .stat-icon,
html[data-theme=dark] .stat-card.cash .stat-icon,
html[data-theme=dark] .stat-card.outstanding .stat-icon,
html[data-theme=dark] .stat-card.unpaid .stat-icon,
html[data-theme=dark] .stat-card.pending .stat-icon,
html[data-theme=dark] .stat-card.pending-card .stat-icon,
html[data-theme=dark] .stat-card.overdue-risk .stat-icon,
html[data-theme=dark] .stat-card.tone-cash .stat-icon,
html[data-theme=dark] .stat-card.watch .stat-icon,
html[data-theme=dark] .stat-card.amber .stat-icon,
html[data-theme=dark] .balance-card.warning .stat-icon,
html[data-theme=dark] .balance-card.cash .stat-icon,
html[data-theme=dark] .balance-card.outstanding .stat-icon,
html[data-theme=dark] .balance-card.unpaid .stat-icon,
html[data-theme=dark] .balance-card.pending .stat-icon,
html[data-theme=dark] .balance-card.pending-card .stat-icon,
html[data-theme=dark] .balance-card.overdue-risk .stat-icon,
html[data-theme=dark] .balance-card.tone-cash .stat-icon,
html[data-theme=dark] .balance-card.watch .stat-icon,
html[data-theme=dark] .balance-card.amber .stat-icon,
html[data-theme=dark] .preview-kpi-card.warning .stat-icon,
html[data-theme=dark] .preview-kpi-card.cash .stat-icon,
html[data-theme=dark] .preview-kpi-card.outstanding .stat-icon,
html[data-theme=dark] .preview-kpi-card.unpaid .stat-icon,
html[data-theme=dark] .preview-kpi-card.pending .stat-icon,
html[data-theme=dark] .preview-kpi-card.pending-card .stat-icon,
html[data-theme=dark] .preview-kpi-card.overdue-risk .stat-icon,
html[data-theme=dark] .preview-kpi-card.tone-cash .stat-icon,
html[data-theme=dark] .preview-kpi-card.watch .stat-icon,
html[data-theme=dark] .preview-kpi-card.amber .stat-icon,
html[data-theme=dark] .mat-mdc-card.warning .stat-icon,
html[data-theme=dark] .mat-mdc-card.cash .stat-icon,
html[data-theme=dark] .mat-mdc-card.outstanding .stat-icon,
html[data-theme=dark] .mat-mdc-card.unpaid .stat-icon,
html[data-theme=dark] .mat-mdc-card.pending .stat-icon,
html[data-theme=dark] .mat-mdc-card.pending-card .stat-icon,
html[data-theme=dark] .mat-mdc-card.overdue-risk .stat-icon,
html[data-theme=dark] .mat-mdc-card.tone-cash .stat-icon,
html[data-theme=dark] .mat-mdc-card.watch .stat-icon,
html[data-theme=dark] .mat-mdc-card.amber .stat-icon {
  background: rgba(251, 191, 36, 0.2) !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
}
html[data-theme=dark] .kpi-card.danger, html[data-theme=dark] .kpi-card.negative, html[data-theme=dark] .kpi-card.expense, html[data-theme=dark] .kpi-card.advances, html[data-theme=dark] .kpi-card.overdue, html[data-theme=dark] .kpi-card.critical, html[data-theme=dark] .kpi-card.degraded, html[data-theme=dark] .kpi-card.red,
html[data-theme=dark] .summary-card.danger,
html[data-theme=dark] .summary-card.negative,
html[data-theme=dark] .summary-card.expense,
html[data-theme=dark] .summary-card.advances,
html[data-theme=dark] .summary-card.overdue,
html[data-theme=dark] .summary-card.critical,
html[data-theme=dark] .summary-card.degraded,
html[data-theme=dark] .summary-card.red,
html[data-theme=dark] .financial-card.danger,
html[data-theme=dark] .financial-card.negative,
html[data-theme=dark] .financial-card.expense,
html[data-theme=dark] .financial-card.advances,
html[data-theme=dark] .financial-card.overdue,
html[data-theme=dark] .financial-card.critical,
html[data-theme=dark] .financial-card.degraded,
html[data-theme=dark] .financial-card.red,
html[data-theme=dark] .stat-card.danger,
html[data-theme=dark] .stat-card.negative,
html[data-theme=dark] .stat-card.expense,
html[data-theme=dark] .stat-card.advances,
html[data-theme=dark] .stat-card.overdue,
html[data-theme=dark] .stat-card.critical,
html[data-theme=dark] .stat-card.degraded,
html[data-theme=dark] .stat-card.red,
html[data-theme=dark] .balance-card.danger,
html[data-theme=dark] .balance-card.negative,
html[data-theme=dark] .balance-card.expense,
html[data-theme=dark] .balance-card.advances,
html[data-theme=dark] .balance-card.overdue,
html[data-theme=dark] .balance-card.critical,
html[data-theme=dark] .balance-card.degraded,
html[data-theme=dark] .balance-card.red,
html[data-theme=dark] .preview-kpi-card.danger,
html[data-theme=dark] .preview-kpi-card.negative,
html[data-theme=dark] .preview-kpi-card.expense,
html[data-theme=dark] .preview-kpi-card.advances,
html[data-theme=dark] .preview-kpi-card.overdue,
html[data-theme=dark] .preview-kpi-card.critical,
html[data-theme=dark] .preview-kpi-card.degraded,
html[data-theme=dark] .preview-kpi-card.red,
html[data-theme=dark] .mat-mdc-card.danger,
html[data-theme=dark] .mat-mdc-card.negative,
html[data-theme=dark] .mat-mdc-card.expense,
html[data-theme=dark] .mat-mdc-card.advances,
html[data-theme=dark] .mat-mdc-card.overdue,
html[data-theme=dark] .mat-mdc-card.critical,
html[data-theme=dark] .mat-mdc-card.degraded,
html[data-theme=dark] .mat-mdc-card.red {
  border-top: 4px solid var(--color-danger) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
html[data-theme=dark] .kpi-card.danger .kpi-icon,
html[data-theme=dark] .kpi-card.danger .card-icon,
html[data-theme=dark] .kpi-card.danger .balance-icon,
html[data-theme=dark] .kpi-card.danger .stat-icon mat-icon, html[data-theme=dark] .kpi-card.negative .kpi-icon,
html[data-theme=dark] .kpi-card.negative .card-icon,
html[data-theme=dark] .kpi-card.negative .balance-icon,
html[data-theme=dark] .kpi-card.negative .stat-icon mat-icon, html[data-theme=dark] .kpi-card.expense .kpi-icon,
html[data-theme=dark] .kpi-card.expense .card-icon,
html[data-theme=dark] .kpi-card.expense .balance-icon,
html[data-theme=dark] .kpi-card.expense .stat-icon mat-icon, html[data-theme=dark] .kpi-card.advances .kpi-icon,
html[data-theme=dark] .kpi-card.advances .card-icon,
html[data-theme=dark] .kpi-card.advances .balance-icon,
html[data-theme=dark] .kpi-card.advances .stat-icon mat-icon, html[data-theme=dark] .kpi-card.overdue .kpi-icon,
html[data-theme=dark] .kpi-card.overdue .card-icon,
html[data-theme=dark] .kpi-card.overdue .balance-icon,
html[data-theme=dark] .kpi-card.overdue .stat-icon mat-icon, html[data-theme=dark] .kpi-card.critical .kpi-icon,
html[data-theme=dark] .kpi-card.critical .card-icon,
html[data-theme=dark] .kpi-card.critical .balance-icon,
html[data-theme=dark] .kpi-card.critical .stat-icon mat-icon, html[data-theme=dark] .kpi-card.degraded .kpi-icon,
html[data-theme=dark] .kpi-card.degraded .card-icon,
html[data-theme=dark] .kpi-card.degraded .balance-icon,
html[data-theme=dark] .kpi-card.degraded .stat-icon mat-icon, html[data-theme=dark] .kpi-card.red .kpi-icon,
html[data-theme=dark] .kpi-card.red .card-icon,
html[data-theme=dark] .kpi-card.red .balance-icon,
html[data-theme=dark] .kpi-card.red .stat-icon mat-icon,
html[data-theme=dark] .summary-card.danger .kpi-icon,
html[data-theme=dark] .summary-card.danger .card-icon,
html[data-theme=dark] .summary-card.danger .balance-icon,
html[data-theme=dark] .summary-card.danger .stat-icon mat-icon,
html[data-theme=dark] .summary-card.negative .kpi-icon,
html[data-theme=dark] .summary-card.negative .card-icon,
html[data-theme=dark] .summary-card.negative .balance-icon,
html[data-theme=dark] .summary-card.negative .stat-icon mat-icon,
html[data-theme=dark] .summary-card.expense .kpi-icon,
html[data-theme=dark] .summary-card.expense .card-icon,
html[data-theme=dark] .summary-card.expense .balance-icon,
html[data-theme=dark] .summary-card.expense .stat-icon mat-icon,
html[data-theme=dark] .summary-card.advances .kpi-icon,
html[data-theme=dark] .summary-card.advances .card-icon,
html[data-theme=dark] .summary-card.advances .balance-icon,
html[data-theme=dark] .summary-card.advances .stat-icon mat-icon,
html[data-theme=dark] .summary-card.overdue .kpi-icon,
html[data-theme=dark] .summary-card.overdue .card-icon,
html[data-theme=dark] .summary-card.overdue .balance-icon,
html[data-theme=dark] .summary-card.overdue .stat-icon mat-icon,
html[data-theme=dark] .summary-card.critical .kpi-icon,
html[data-theme=dark] .summary-card.critical .card-icon,
html[data-theme=dark] .summary-card.critical .balance-icon,
html[data-theme=dark] .summary-card.critical .stat-icon mat-icon,
html[data-theme=dark] .summary-card.degraded .kpi-icon,
html[data-theme=dark] .summary-card.degraded .card-icon,
html[data-theme=dark] .summary-card.degraded .balance-icon,
html[data-theme=dark] .summary-card.degraded .stat-icon mat-icon,
html[data-theme=dark] .summary-card.red .kpi-icon,
html[data-theme=dark] .summary-card.red .card-icon,
html[data-theme=dark] .summary-card.red .balance-icon,
html[data-theme=dark] .summary-card.red .stat-icon mat-icon,
html[data-theme=dark] .financial-card.danger .kpi-icon,
html[data-theme=dark] .financial-card.danger .card-icon,
html[data-theme=dark] .financial-card.danger .balance-icon,
html[data-theme=dark] .financial-card.danger .stat-icon mat-icon,
html[data-theme=dark] .financial-card.negative .kpi-icon,
html[data-theme=dark] .financial-card.negative .card-icon,
html[data-theme=dark] .financial-card.negative .balance-icon,
html[data-theme=dark] .financial-card.negative .stat-icon mat-icon,
html[data-theme=dark] .financial-card.expense .kpi-icon,
html[data-theme=dark] .financial-card.expense .card-icon,
html[data-theme=dark] .financial-card.expense .balance-icon,
html[data-theme=dark] .financial-card.expense .stat-icon mat-icon,
html[data-theme=dark] .financial-card.advances .kpi-icon,
html[data-theme=dark] .financial-card.advances .card-icon,
html[data-theme=dark] .financial-card.advances .balance-icon,
html[data-theme=dark] .financial-card.advances .stat-icon mat-icon,
html[data-theme=dark] .financial-card.overdue .kpi-icon,
html[data-theme=dark] .financial-card.overdue .card-icon,
html[data-theme=dark] .financial-card.overdue .balance-icon,
html[data-theme=dark] .financial-card.overdue .stat-icon mat-icon,
html[data-theme=dark] .financial-card.critical .kpi-icon,
html[data-theme=dark] .financial-card.critical .card-icon,
html[data-theme=dark] .financial-card.critical .balance-icon,
html[data-theme=dark] .financial-card.critical .stat-icon mat-icon,
html[data-theme=dark] .financial-card.degraded .kpi-icon,
html[data-theme=dark] .financial-card.degraded .card-icon,
html[data-theme=dark] .financial-card.degraded .balance-icon,
html[data-theme=dark] .financial-card.degraded .stat-icon mat-icon,
html[data-theme=dark] .financial-card.red .kpi-icon,
html[data-theme=dark] .financial-card.red .card-icon,
html[data-theme=dark] .financial-card.red .balance-icon,
html[data-theme=dark] .financial-card.red .stat-icon mat-icon,
html[data-theme=dark] .stat-card.danger .kpi-icon,
html[data-theme=dark] .stat-card.danger .card-icon,
html[data-theme=dark] .stat-card.danger .balance-icon,
html[data-theme=dark] .stat-card.danger .stat-icon mat-icon,
html[data-theme=dark] .stat-card.negative .kpi-icon,
html[data-theme=dark] .stat-card.negative .card-icon,
html[data-theme=dark] .stat-card.negative .balance-icon,
html[data-theme=dark] .stat-card.negative .stat-icon mat-icon,
html[data-theme=dark] .stat-card.expense .kpi-icon,
html[data-theme=dark] .stat-card.expense .card-icon,
html[data-theme=dark] .stat-card.expense .balance-icon,
html[data-theme=dark] .stat-card.expense .stat-icon mat-icon,
html[data-theme=dark] .stat-card.advances .kpi-icon,
html[data-theme=dark] .stat-card.advances .card-icon,
html[data-theme=dark] .stat-card.advances .balance-icon,
html[data-theme=dark] .stat-card.advances .stat-icon mat-icon,
html[data-theme=dark] .stat-card.overdue .kpi-icon,
html[data-theme=dark] .stat-card.overdue .card-icon,
html[data-theme=dark] .stat-card.overdue .balance-icon,
html[data-theme=dark] .stat-card.overdue .stat-icon mat-icon,
html[data-theme=dark] .stat-card.critical .kpi-icon,
html[data-theme=dark] .stat-card.critical .card-icon,
html[data-theme=dark] .stat-card.critical .balance-icon,
html[data-theme=dark] .stat-card.critical .stat-icon mat-icon,
html[data-theme=dark] .stat-card.degraded .kpi-icon,
html[data-theme=dark] .stat-card.degraded .card-icon,
html[data-theme=dark] .stat-card.degraded .balance-icon,
html[data-theme=dark] .stat-card.degraded .stat-icon mat-icon,
html[data-theme=dark] .stat-card.red .kpi-icon,
html[data-theme=dark] .stat-card.red .card-icon,
html[data-theme=dark] .stat-card.red .balance-icon,
html[data-theme=dark] .stat-card.red .stat-icon mat-icon,
html[data-theme=dark] .balance-card.danger .kpi-icon,
html[data-theme=dark] .balance-card.danger .card-icon,
html[data-theme=dark] .balance-card.danger .balance-icon,
html[data-theme=dark] .balance-card.danger .stat-icon mat-icon,
html[data-theme=dark] .balance-card.negative .kpi-icon,
html[data-theme=dark] .balance-card.negative .card-icon,
html[data-theme=dark] .balance-card.negative .balance-icon,
html[data-theme=dark] .balance-card.negative .stat-icon mat-icon,
html[data-theme=dark] .balance-card.expense .kpi-icon,
html[data-theme=dark] .balance-card.expense .card-icon,
html[data-theme=dark] .balance-card.expense .balance-icon,
html[data-theme=dark] .balance-card.expense .stat-icon mat-icon,
html[data-theme=dark] .balance-card.advances .kpi-icon,
html[data-theme=dark] .balance-card.advances .card-icon,
html[data-theme=dark] .balance-card.advances .balance-icon,
html[data-theme=dark] .balance-card.advances .stat-icon mat-icon,
html[data-theme=dark] .balance-card.overdue .kpi-icon,
html[data-theme=dark] .balance-card.overdue .card-icon,
html[data-theme=dark] .balance-card.overdue .balance-icon,
html[data-theme=dark] .balance-card.overdue .stat-icon mat-icon,
html[data-theme=dark] .balance-card.critical .kpi-icon,
html[data-theme=dark] .balance-card.critical .card-icon,
html[data-theme=dark] .balance-card.critical .balance-icon,
html[data-theme=dark] .balance-card.critical .stat-icon mat-icon,
html[data-theme=dark] .balance-card.degraded .kpi-icon,
html[data-theme=dark] .balance-card.degraded .card-icon,
html[data-theme=dark] .balance-card.degraded .balance-icon,
html[data-theme=dark] .balance-card.degraded .stat-icon mat-icon,
html[data-theme=dark] .balance-card.red .kpi-icon,
html[data-theme=dark] .balance-card.red .card-icon,
html[data-theme=dark] .balance-card.red .balance-icon,
html[data-theme=dark] .balance-card.red .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.danger .kpi-icon,
html[data-theme=dark] .preview-kpi-card.danger .card-icon,
html[data-theme=dark] .preview-kpi-card.danger .balance-icon,
html[data-theme=dark] .preview-kpi-card.danger .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.negative .kpi-icon,
html[data-theme=dark] .preview-kpi-card.negative .card-icon,
html[data-theme=dark] .preview-kpi-card.negative .balance-icon,
html[data-theme=dark] .preview-kpi-card.negative .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.expense .kpi-icon,
html[data-theme=dark] .preview-kpi-card.expense .card-icon,
html[data-theme=dark] .preview-kpi-card.expense .balance-icon,
html[data-theme=dark] .preview-kpi-card.expense .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.advances .kpi-icon,
html[data-theme=dark] .preview-kpi-card.advances .card-icon,
html[data-theme=dark] .preview-kpi-card.advances .balance-icon,
html[data-theme=dark] .preview-kpi-card.advances .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.overdue .kpi-icon,
html[data-theme=dark] .preview-kpi-card.overdue .card-icon,
html[data-theme=dark] .preview-kpi-card.overdue .balance-icon,
html[data-theme=dark] .preview-kpi-card.overdue .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.critical .kpi-icon,
html[data-theme=dark] .preview-kpi-card.critical .card-icon,
html[data-theme=dark] .preview-kpi-card.critical .balance-icon,
html[data-theme=dark] .preview-kpi-card.critical .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.degraded .kpi-icon,
html[data-theme=dark] .preview-kpi-card.degraded .card-icon,
html[data-theme=dark] .preview-kpi-card.degraded .balance-icon,
html[data-theme=dark] .preview-kpi-card.degraded .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.red .kpi-icon,
html[data-theme=dark] .preview-kpi-card.red .card-icon,
html[data-theme=dark] .preview-kpi-card.red .balance-icon,
html[data-theme=dark] .preview-kpi-card.red .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.danger .kpi-icon,
html[data-theme=dark] .mat-mdc-card.danger .card-icon,
html[data-theme=dark] .mat-mdc-card.danger .balance-icon,
html[data-theme=dark] .mat-mdc-card.danger .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.negative .kpi-icon,
html[data-theme=dark] .mat-mdc-card.negative .card-icon,
html[data-theme=dark] .mat-mdc-card.negative .balance-icon,
html[data-theme=dark] .mat-mdc-card.negative .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.expense .kpi-icon,
html[data-theme=dark] .mat-mdc-card.expense .card-icon,
html[data-theme=dark] .mat-mdc-card.expense .balance-icon,
html[data-theme=dark] .mat-mdc-card.expense .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.advances .kpi-icon,
html[data-theme=dark] .mat-mdc-card.advances .card-icon,
html[data-theme=dark] .mat-mdc-card.advances .balance-icon,
html[data-theme=dark] .mat-mdc-card.advances .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.overdue .kpi-icon,
html[data-theme=dark] .mat-mdc-card.overdue .card-icon,
html[data-theme=dark] .mat-mdc-card.overdue .balance-icon,
html[data-theme=dark] .mat-mdc-card.overdue .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.critical .kpi-icon,
html[data-theme=dark] .mat-mdc-card.critical .card-icon,
html[data-theme=dark] .mat-mdc-card.critical .balance-icon,
html[data-theme=dark] .mat-mdc-card.critical .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.degraded .kpi-icon,
html[data-theme=dark] .mat-mdc-card.degraded .card-icon,
html[data-theme=dark] .mat-mdc-card.degraded .balance-icon,
html[data-theme=dark] .mat-mdc-card.degraded .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.red .kpi-icon,
html[data-theme=dark] .mat-mdc-card.red .card-icon,
html[data-theme=dark] .mat-mdc-card.red .balance-icon,
html[data-theme=dark] .mat-mdc-card.red .stat-icon mat-icon {
  color: var(--color-danger) !important;
}
html[data-theme=dark] .kpi-card.danger .stat-icon, html[data-theme=dark] .kpi-card.negative .stat-icon, html[data-theme=dark] .kpi-card.expense .stat-icon, html[data-theme=dark] .kpi-card.advances .stat-icon, html[data-theme=dark] .kpi-card.overdue .stat-icon, html[data-theme=dark] .kpi-card.critical .stat-icon, html[data-theme=dark] .kpi-card.degraded .stat-icon, html[data-theme=dark] .kpi-card.red .stat-icon,
html[data-theme=dark] .summary-card.danger .stat-icon,
html[data-theme=dark] .summary-card.negative .stat-icon,
html[data-theme=dark] .summary-card.expense .stat-icon,
html[data-theme=dark] .summary-card.advances .stat-icon,
html[data-theme=dark] .summary-card.overdue .stat-icon,
html[data-theme=dark] .summary-card.critical .stat-icon,
html[data-theme=dark] .summary-card.degraded .stat-icon,
html[data-theme=dark] .summary-card.red .stat-icon,
html[data-theme=dark] .financial-card.danger .stat-icon,
html[data-theme=dark] .financial-card.negative .stat-icon,
html[data-theme=dark] .financial-card.expense .stat-icon,
html[data-theme=dark] .financial-card.advances .stat-icon,
html[data-theme=dark] .financial-card.overdue .stat-icon,
html[data-theme=dark] .financial-card.critical .stat-icon,
html[data-theme=dark] .financial-card.degraded .stat-icon,
html[data-theme=dark] .financial-card.red .stat-icon,
html[data-theme=dark] .stat-card.danger .stat-icon,
html[data-theme=dark] .stat-card.negative .stat-icon,
html[data-theme=dark] .stat-card.expense .stat-icon,
html[data-theme=dark] .stat-card.advances .stat-icon,
html[data-theme=dark] .stat-card.overdue .stat-icon,
html[data-theme=dark] .stat-card.critical .stat-icon,
html[data-theme=dark] .stat-card.degraded .stat-icon,
html[data-theme=dark] .stat-card.red .stat-icon,
html[data-theme=dark] .balance-card.danger .stat-icon,
html[data-theme=dark] .balance-card.negative .stat-icon,
html[data-theme=dark] .balance-card.expense .stat-icon,
html[data-theme=dark] .balance-card.advances .stat-icon,
html[data-theme=dark] .balance-card.overdue .stat-icon,
html[data-theme=dark] .balance-card.critical .stat-icon,
html[data-theme=dark] .balance-card.degraded .stat-icon,
html[data-theme=dark] .balance-card.red .stat-icon,
html[data-theme=dark] .preview-kpi-card.danger .stat-icon,
html[data-theme=dark] .preview-kpi-card.negative .stat-icon,
html[data-theme=dark] .preview-kpi-card.expense .stat-icon,
html[data-theme=dark] .preview-kpi-card.advances .stat-icon,
html[data-theme=dark] .preview-kpi-card.overdue .stat-icon,
html[data-theme=dark] .preview-kpi-card.critical .stat-icon,
html[data-theme=dark] .preview-kpi-card.degraded .stat-icon,
html[data-theme=dark] .preview-kpi-card.red .stat-icon,
html[data-theme=dark] .mat-mdc-card.danger .stat-icon,
html[data-theme=dark] .mat-mdc-card.negative .stat-icon,
html[data-theme=dark] .mat-mdc-card.expense .stat-icon,
html[data-theme=dark] .mat-mdc-card.advances .stat-icon,
html[data-theme=dark] .mat-mdc-card.overdue .stat-icon,
html[data-theme=dark] .mat-mdc-card.critical .stat-icon,
html[data-theme=dark] .mat-mdc-card.degraded .stat-icon,
html[data-theme=dark] .mat-mdc-card.red .stat-icon {
  background: rgba(248, 113, 113, 0.2) !important;
  border: 1px solid rgba(248, 113, 113, 0.4) !important;
}
html[data-theme=dark] .kpi-card.average, html[data-theme=dark] .kpi-card.accent, html[data-theme=dark] .kpi-card.concentration, html[data-theme=dark] .kpi-card.purple,
html[data-theme=dark] .summary-card.average,
html[data-theme=dark] .summary-card.accent,
html[data-theme=dark] .summary-card.concentration,
html[data-theme=dark] .summary-card.purple,
html[data-theme=dark] .financial-card.average,
html[data-theme=dark] .financial-card.accent,
html[data-theme=dark] .financial-card.concentration,
html[data-theme=dark] .financial-card.purple,
html[data-theme=dark] .stat-card.average,
html[data-theme=dark] .stat-card.accent,
html[data-theme=dark] .stat-card.concentration,
html[data-theme=dark] .stat-card.purple,
html[data-theme=dark] .balance-card.average,
html[data-theme=dark] .balance-card.accent,
html[data-theme=dark] .balance-card.concentration,
html[data-theme=dark] .balance-card.purple,
html[data-theme=dark] .preview-kpi-card.average,
html[data-theme=dark] .preview-kpi-card.accent,
html[data-theme=dark] .preview-kpi-card.concentration,
html[data-theme=dark] .preview-kpi-card.purple,
html[data-theme=dark] .mat-mdc-card.average,
html[data-theme=dark] .mat-mdc-card.accent,
html[data-theme=dark] .mat-mdc-card.concentration,
html[data-theme=dark] .mat-mdc-card.purple {
  border-top: 4px solid var(--color-accent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
html[data-theme=dark] .kpi-card.average .kpi-icon,
html[data-theme=dark] .kpi-card.average .card-icon,
html[data-theme=dark] .kpi-card.average .balance-icon,
html[data-theme=dark] .kpi-card.average .stat-icon mat-icon, html[data-theme=dark] .kpi-card.accent .kpi-icon,
html[data-theme=dark] .kpi-card.accent .card-icon,
html[data-theme=dark] .kpi-card.accent .balance-icon,
html[data-theme=dark] .kpi-card.accent .stat-icon mat-icon, html[data-theme=dark] .kpi-card.concentration .kpi-icon,
html[data-theme=dark] .kpi-card.concentration .card-icon,
html[data-theme=dark] .kpi-card.concentration .balance-icon,
html[data-theme=dark] .kpi-card.concentration .stat-icon mat-icon, html[data-theme=dark] .kpi-card.purple .kpi-icon,
html[data-theme=dark] .kpi-card.purple .card-icon,
html[data-theme=dark] .kpi-card.purple .balance-icon,
html[data-theme=dark] .kpi-card.purple .stat-icon mat-icon,
html[data-theme=dark] .summary-card.average .kpi-icon,
html[data-theme=dark] .summary-card.average .card-icon,
html[data-theme=dark] .summary-card.average .balance-icon,
html[data-theme=dark] .summary-card.average .stat-icon mat-icon,
html[data-theme=dark] .summary-card.accent .kpi-icon,
html[data-theme=dark] .summary-card.accent .card-icon,
html[data-theme=dark] .summary-card.accent .balance-icon,
html[data-theme=dark] .summary-card.accent .stat-icon mat-icon,
html[data-theme=dark] .summary-card.concentration .kpi-icon,
html[data-theme=dark] .summary-card.concentration .card-icon,
html[data-theme=dark] .summary-card.concentration .balance-icon,
html[data-theme=dark] .summary-card.concentration .stat-icon mat-icon,
html[data-theme=dark] .summary-card.purple .kpi-icon,
html[data-theme=dark] .summary-card.purple .card-icon,
html[data-theme=dark] .summary-card.purple .balance-icon,
html[data-theme=dark] .summary-card.purple .stat-icon mat-icon,
html[data-theme=dark] .financial-card.average .kpi-icon,
html[data-theme=dark] .financial-card.average .card-icon,
html[data-theme=dark] .financial-card.average .balance-icon,
html[data-theme=dark] .financial-card.average .stat-icon mat-icon,
html[data-theme=dark] .financial-card.accent .kpi-icon,
html[data-theme=dark] .financial-card.accent .card-icon,
html[data-theme=dark] .financial-card.accent .balance-icon,
html[data-theme=dark] .financial-card.accent .stat-icon mat-icon,
html[data-theme=dark] .financial-card.concentration .kpi-icon,
html[data-theme=dark] .financial-card.concentration .card-icon,
html[data-theme=dark] .financial-card.concentration .balance-icon,
html[data-theme=dark] .financial-card.concentration .stat-icon mat-icon,
html[data-theme=dark] .financial-card.purple .kpi-icon,
html[data-theme=dark] .financial-card.purple .card-icon,
html[data-theme=dark] .financial-card.purple .balance-icon,
html[data-theme=dark] .financial-card.purple .stat-icon mat-icon,
html[data-theme=dark] .stat-card.average .kpi-icon,
html[data-theme=dark] .stat-card.average .card-icon,
html[data-theme=dark] .stat-card.average .balance-icon,
html[data-theme=dark] .stat-card.average .stat-icon mat-icon,
html[data-theme=dark] .stat-card.accent .kpi-icon,
html[data-theme=dark] .stat-card.accent .card-icon,
html[data-theme=dark] .stat-card.accent .balance-icon,
html[data-theme=dark] .stat-card.accent .stat-icon mat-icon,
html[data-theme=dark] .stat-card.concentration .kpi-icon,
html[data-theme=dark] .stat-card.concentration .card-icon,
html[data-theme=dark] .stat-card.concentration .balance-icon,
html[data-theme=dark] .stat-card.concentration .stat-icon mat-icon,
html[data-theme=dark] .stat-card.purple .kpi-icon,
html[data-theme=dark] .stat-card.purple .card-icon,
html[data-theme=dark] .stat-card.purple .balance-icon,
html[data-theme=dark] .stat-card.purple .stat-icon mat-icon,
html[data-theme=dark] .balance-card.average .kpi-icon,
html[data-theme=dark] .balance-card.average .card-icon,
html[data-theme=dark] .balance-card.average .balance-icon,
html[data-theme=dark] .balance-card.average .stat-icon mat-icon,
html[data-theme=dark] .balance-card.accent .kpi-icon,
html[data-theme=dark] .balance-card.accent .card-icon,
html[data-theme=dark] .balance-card.accent .balance-icon,
html[data-theme=dark] .balance-card.accent .stat-icon mat-icon,
html[data-theme=dark] .balance-card.concentration .kpi-icon,
html[data-theme=dark] .balance-card.concentration .card-icon,
html[data-theme=dark] .balance-card.concentration .balance-icon,
html[data-theme=dark] .balance-card.concentration .stat-icon mat-icon,
html[data-theme=dark] .balance-card.purple .kpi-icon,
html[data-theme=dark] .balance-card.purple .card-icon,
html[data-theme=dark] .balance-card.purple .balance-icon,
html[data-theme=dark] .balance-card.purple .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.average .kpi-icon,
html[data-theme=dark] .preview-kpi-card.average .card-icon,
html[data-theme=dark] .preview-kpi-card.average .balance-icon,
html[data-theme=dark] .preview-kpi-card.average .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.accent .kpi-icon,
html[data-theme=dark] .preview-kpi-card.accent .card-icon,
html[data-theme=dark] .preview-kpi-card.accent .balance-icon,
html[data-theme=dark] .preview-kpi-card.accent .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.concentration .kpi-icon,
html[data-theme=dark] .preview-kpi-card.concentration .card-icon,
html[data-theme=dark] .preview-kpi-card.concentration .balance-icon,
html[data-theme=dark] .preview-kpi-card.concentration .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.purple .kpi-icon,
html[data-theme=dark] .preview-kpi-card.purple .card-icon,
html[data-theme=dark] .preview-kpi-card.purple .balance-icon,
html[data-theme=dark] .preview-kpi-card.purple .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.average .kpi-icon,
html[data-theme=dark] .mat-mdc-card.average .card-icon,
html[data-theme=dark] .mat-mdc-card.average .balance-icon,
html[data-theme=dark] .mat-mdc-card.average .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.accent .kpi-icon,
html[data-theme=dark] .mat-mdc-card.accent .card-icon,
html[data-theme=dark] .mat-mdc-card.accent .balance-icon,
html[data-theme=dark] .mat-mdc-card.accent .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.concentration .kpi-icon,
html[data-theme=dark] .mat-mdc-card.concentration .card-icon,
html[data-theme=dark] .mat-mdc-card.concentration .balance-icon,
html[data-theme=dark] .mat-mdc-card.concentration .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.purple .kpi-icon,
html[data-theme=dark] .mat-mdc-card.purple .card-icon,
html[data-theme=dark] .mat-mdc-card.purple .balance-icon,
html[data-theme=dark] .mat-mdc-card.purple .stat-icon mat-icon {
  color: var(--color-accent) !important;
}
html[data-theme=dark] .kpi-card.average .stat-icon, html[data-theme=dark] .kpi-card.accent .stat-icon, html[data-theme=dark] .kpi-card.concentration .stat-icon, html[data-theme=dark] .kpi-card.purple .stat-icon,
html[data-theme=dark] .summary-card.average .stat-icon,
html[data-theme=dark] .summary-card.accent .stat-icon,
html[data-theme=dark] .summary-card.concentration .stat-icon,
html[data-theme=dark] .summary-card.purple .stat-icon,
html[data-theme=dark] .financial-card.average .stat-icon,
html[data-theme=dark] .financial-card.accent .stat-icon,
html[data-theme=dark] .financial-card.concentration .stat-icon,
html[data-theme=dark] .financial-card.purple .stat-icon,
html[data-theme=dark] .stat-card.average .stat-icon,
html[data-theme=dark] .stat-card.accent .stat-icon,
html[data-theme=dark] .stat-card.concentration .stat-icon,
html[data-theme=dark] .stat-card.purple .stat-icon,
html[data-theme=dark] .balance-card.average .stat-icon,
html[data-theme=dark] .balance-card.accent .stat-icon,
html[data-theme=dark] .balance-card.concentration .stat-icon,
html[data-theme=dark] .balance-card.purple .stat-icon,
html[data-theme=dark] .preview-kpi-card.average .stat-icon,
html[data-theme=dark] .preview-kpi-card.accent .stat-icon,
html[data-theme=dark] .preview-kpi-card.concentration .stat-icon,
html[data-theme=dark] .preview-kpi-card.purple .stat-icon,
html[data-theme=dark] .mat-mdc-card.average .stat-icon,
html[data-theme=dark] .mat-mdc-card.accent .stat-icon,
html[data-theme=dark] .mat-mdc-card.concentration .stat-icon,
html[data-theme=dark] .mat-mdc-card.purple .stat-icon {
  background: rgba(192, 132, 252, 0.2) !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
}
html[data-theme=dark] .kpi-card.staff, html[data-theme=dark] .kpi-card.cyan, html[data-theme=dark] .kpi-card.collection-rate, html[data-theme=dark] .kpi-card.payment-metric, html[data-theme=dark] .kpi-card.next-due,
html[data-theme=dark] .summary-card.staff,
html[data-theme=dark] .summary-card.cyan,
html[data-theme=dark] .summary-card.collection-rate,
html[data-theme=dark] .summary-card.payment-metric,
html[data-theme=dark] .summary-card.next-due,
html[data-theme=dark] .financial-card.staff,
html[data-theme=dark] .financial-card.cyan,
html[data-theme=dark] .financial-card.collection-rate,
html[data-theme=dark] .financial-card.payment-metric,
html[data-theme=dark] .financial-card.next-due,
html[data-theme=dark] .stat-card.staff,
html[data-theme=dark] .stat-card.cyan,
html[data-theme=dark] .stat-card.collection-rate,
html[data-theme=dark] .stat-card.payment-metric,
html[data-theme=dark] .stat-card.next-due,
html[data-theme=dark] .balance-card.staff,
html[data-theme=dark] .balance-card.cyan,
html[data-theme=dark] .balance-card.collection-rate,
html[data-theme=dark] .balance-card.payment-metric,
html[data-theme=dark] .balance-card.next-due,
html[data-theme=dark] .preview-kpi-card.staff,
html[data-theme=dark] .preview-kpi-card.cyan,
html[data-theme=dark] .preview-kpi-card.collection-rate,
html[data-theme=dark] .preview-kpi-card.payment-metric,
html[data-theme=dark] .preview-kpi-card.next-due,
html[data-theme=dark] .mat-mdc-card.staff,
html[data-theme=dark] .mat-mdc-card.cyan,
html[data-theme=dark] .mat-mdc-card.collection-rate,
html[data-theme=dark] .mat-mdc-card.payment-metric,
html[data-theme=dark] .mat-mdc-card.next-due {
  border-top: 4px solid #22d3ee !important;
  background: linear-gradient(180deg, color-mix(in srgb, #22d3ee 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
html[data-theme=dark] .kpi-card.staff .kpi-icon,
html[data-theme=dark] .kpi-card.staff .card-icon,
html[data-theme=dark] .kpi-card.staff .balance-icon,
html[data-theme=dark] .kpi-card.staff .stat-icon mat-icon, html[data-theme=dark] .kpi-card.cyan .kpi-icon,
html[data-theme=dark] .kpi-card.cyan .card-icon,
html[data-theme=dark] .kpi-card.cyan .balance-icon,
html[data-theme=dark] .kpi-card.cyan .stat-icon mat-icon, html[data-theme=dark] .kpi-card.collection-rate .kpi-icon,
html[data-theme=dark] .kpi-card.collection-rate .card-icon,
html[data-theme=dark] .kpi-card.collection-rate .balance-icon,
html[data-theme=dark] .kpi-card.collection-rate .stat-icon mat-icon, html[data-theme=dark] .kpi-card.payment-metric .kpi-icon,
html[data-theme=dark] .kpi-card.payment-metric .card-icon,
html[data-theme=dark] .kpi-card.payment-metric .balance-icon,
html[data-theme=dark] .kpi-card.payment-metric .stat-icon mat-icon, html[data-theme=dark] .kpi-card.next-due .kpi-icon,
html[data-theme=dark] .kpi-card.next-due .card-icon,
html[data-theme=dark] .kpi-card.next-due .balance-icon,
html[data-theme=dark] .kpi-card.next-due .stat-icon mat-icon,
html[data-theme=dark] .summary-card.staff .kpi-icon,
html[data-theme=dark] .summary-card.staff .card-icon,
html[data-theme=dark] .summary-card.staff .balance-icon,
html[data-theme=dark] .summary-card.staff .stat-icon mat-icon,
html[data-theme=dark] .summary-card.cyan .kpi-icon,
html[data-theme=dark] .summary-card.cyan .card-icon,
html[data-theme=dark] .summary-card.cyan .balance-icon,
html[data-theme=dark] .summary-card.cyan .stat-icon mat-icon,
html[data-theme=dark] .summary-card.collection-rate .kpi-icon,
html[data-theme=dark] .summary-card.collection-rate .card-icon,
html[data-theme=dark] .summary-card.collection-rate .balance-icon,
html[data-theme=dark] .summary-card.collection-rate .stat-icon mat-icon,
html[data-theme=dark] .summary-card.payment-metric .kpi-icon,
html[data-theme=dark] .summary-card.payment-metric .card-icon,
html[data-theme=dark] .summary-card.payment-metric .balance-icon,
html[data-theme=dark] .summary-card.payment-metric .stat-icon mat-icon,
html[data-theme=dark] .summary-card.next-due .kpi-icon,
html[data-theme=dark] .summary-card.next-due .card-icon,
html[data-theme=dark] .summary-card.next-due .balance-icon,
html[data-theme=dark] .summary-card.next-due .stat-icon mat-icon,
html[data-theme=dark] .financial-card.staff .kpi-icon,
html[data-theme=dark] .financial-card.staff .card-icon,
html[data-theme=dark] .financial-card.staff .balance-icon,
html[data-theme=dark] .financial-card.staff .stat-icon mat-icon,
html[data-theme=dark] .financial-card.cyan .kpi-icon,
html[data-theme=dark] .financial-card.cyan .card-icon,
html[data-theme=dark] .financial-card.cyan .balance-icon,
html[data-theme=dark] .financial-card.cyan .stat-icon mat-icon,
html[data-theme=dark] .financial-card.collection-rate .kpi-icon,
html[data-theme=dark] .financial-card.collection-rate .card-icon,
html[data-theme=dark] .financial-card.collection-rate .balance-icon,
html[data-theme=dark] .financial-card.collection-rate .stat-icon mat-icon,
html[data-theme=dark] .financial-card.payment-metric .kpi-icon,
html[data-theme=dark] .financial-card.payment-metric .card-icon,
html[data-theme=dark] .financial-card.payment-metric .balance-icon,
html[data-theme=dark] .financial-card.payment-metric .stat-icon mat-icon,
html[data-theme=dark] .financial-card.next-due .kpi-icon,
html[data-theme=dark] .financial-card.next-due .card-icon,
html[data-theme=dark] .financial-card.next-due .balance-icon,
html[data-theme=dark] .financial-card.next-due .stat-icon mat-icon,
html[data-theme=dark] .stat-card.staff .kpi-icon,
html[data-theme=dark] .stat-card.staff .card-icon,
html[data-theme=dark] .stat-card.staff .balance-icon,
html[data-theme=dark] .stat-card.staff .stat-icon mat-icon,
html[data-theme=dark] .stat-card.cyan .kpi-icon,
html[data-theme=dark] .stat-card.cyan .card-icon,
html[data-theme=dark] .stat-card.cyan .balance-icon,
html[data-theme=dark] .stat-card.cyan .stat-icon mat-icon,
html[data-theme=dark] .stat-card.collection-rate .kpi-icon,
html[data-theme=dark] .stat-card.collection-rate .card-icon,
html[data-theme=dark] .stat-card.collection-rate .balance-icon,
html[data-theme=dark] .stat-card.collection-rate .stat-icon mat-icon,
html[data-theme=dark] .stat-card.payment-metric .kpi-icon,
html[data-theme=dark] .stat-card.payment-metric .card-icon,
html[data-theme=dark] .stat-card.payment-metric .balance-icon,
html[data-theme=dark] .stat-card.payment-metric .stat-icon mat-icon,
html[data-theme=dark] .stat-card.next-due .kpi-icon,
html[data-theme=dark] .stat-card.next-due .card-icon,
html[data-theme=dark] .stat-card.next-due .balance-icon,
html[data-theme=dark] .stat-card.next-due .stat-icon mat-icon,
html[data-theme=dark] .balance-card.staff .kpi-icon,
html[data-theme=dark] .balance-card.staff .card-icon,
html[data-theme=dark] .balance-card.staff .balance-icon,
html[data-theme=dark] .balance-card.staff .stat-icon mat-icon,
html[data-theme=dark] .balance-card.cyan .kpi-icon,
html[data-theme=dark] .balance-card.cyan .card-icon,
html[data-theme=dark] .balance-card.cyan .balance-icon,
html[data-theme=dark] .balance-card.cyan .stat-icon mat-icon,
html[data-theme=dark] .balance-card.collection-rate .kpi-icon,
html[data-theme=dark] .balance-card.collection-rate .card-icon,
html[data-theme=dark] .balance-card.collection-rate .balance-icon,
html[data-theme=dark] .balance-card.collection-rate .stat-icon mat-icon,
html[data-theme=dark] .balance-card.payment-metric .kpi-icon,
html[data-theme=dark] .balance-card.payment-metric .card-icon,
html[data-theme=dark] .balance-card.payment-metric .balance-icon,
html[data-theme=dark] .balance-card.payment-metric .stat-icon mat-icon,
html[data-theme=dark] .balance-card.next-due .kpi-icon,
html[data-theme=dark] .balance-card.next-due .card-icon,
html[data-theme=dark] .balance-card.next-due .balance-icon,
html[data-theme=dark] .balance-card.next-due .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.staff .kpi-icon,
html[data-theme=dark] .preview-kpi-card.staff .card-icon,
html[data-theme=dark] .preview-kpi-card.staff .balance-icon,
html[data-theme=dark] .preview-kpi-card.staff .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.cyan .kpi-icon,
html[data-theme=dark] .preview-kpi-card.cyan .card-icon,
html[data-theme=dark] .preview-kpi-card.cyan .balance-icon,
html[data-theme=dark] .preview-kpi-card.cyan .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.collection-rate .kpi-icon,
html[data-theme=dark] .preview-kpi-card.collection-rate .card-icon,
html[data-theme=dark] .preview-kpi-card.collection-rate .balance-icon,
html[data-theme=dark] .preview-kpi-card.collection-rate .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.payment-metric .kpi-icon,
html[data-theme=dark] .preview-kpi-card.payment-metric .card-icon,
html[data-theme=dark] .preview-kpi-card.payment-metric .balance-icon,
html[data-theme=dark] .preview-kpi-card.payment-metric .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.next-due .kpi-icon,
html[data-theme=dark] .preview-kpi-card.next-due .card-icon,
html[data-theme=dark] .preview-kpi-card.next-due .balance-icon,
html[data-theme=dark] .preview-kpi-card.next-due .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.staff .kpi-icon,
html[data-theme=dark] .mat-mdc-card.staff .card-icon,
html[data-theme=dark] .mat-mdc-card.staff .balance-icon,
html[data-theme=dark] .mat-mdc-card.staff .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.cyan .kpi-icon,
html[data-theme=dark] .mat-mdc-card.cyan .card-icon,
html[data-theme=dark] .mat-mdc-card.cyan .balance-icon,
html[data-theme=dark] .mat-mdc-card.cyan .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.collection-rate .kpi-icon,
html[data-theme=dark] .mat-mdc-card.collection-rate .card-icon,
html[data-theme=dark] .mat-mdc-card.collection-rate .balance-icon,
html[data-theme=dark] .mat-mdc-card.collection-rate .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.payment-metric .kpi-icon,
html[data-theme=dark] .mat-mdc-card.payment-metric .card-icon,
html[data-theme=dark] .mat-mdc-card.payment-metric .balance-icon,
html[data-theme=dark] .mat-mdc-card.payment-metric .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.next-due .kpi-icon,
html[data-theme=dark] .mat-mdc-card.next-due .card-icon,
html[data-theme=dark] .mat-mdc-card.next-due .balance-icon,
html[data-theme=dark] .mat-mdc-card.next-due .stat-icon mat-icon {
  color: #22d3ee !important;
}
html[data-theme=dark] .kpi-card.staff .stat-icon, html[data-theme=dark] .kpi-card.cyan .stat-icon, html[data-theme=dark] .kpi-card.collection-rate .stat-icon, html[data-theme=dark] .kpi-card.payment-metric .stat-icon, html[data-theme=dark] .kpi-card.next-due .stat-icon,
html[data-theme=dark] .summary-card.staff .stat-icon,
html[data-theme=dark] .summary-card.cyan .stat-icon,
html[data-theme=dark] .summary-card.collection-rate .stat-icon,
html[data-theme=dark] .summary-card.payment-metric .stat-icon,
html[data-theme=dark] .summary-card.next-due .stat-icon,
html[data-theme=dark] .financial-card.staff .stat-icon,
html[data-theme=dark] .financial-card.cyan .stat-icon,
html[data-theme=dark] .financial-card.collection-rate .stat-icon,
html[data-theme=dark] .financial-card.payment-metric .stat-icon,
html[data-theme=dark] .financial-card.next-due .stat-icon,
html[data-theme=dark] .stat-card.staff .stat-icon,
html[data-theme=dark] .stat-card.cyan .stat-icon,
html[data-theme=dark] .stat-card.collection-rate .stat-icon,
html[data-theme=dark] .stat-card.payment-metric .stat-icon,
html[data-theme=dark] .stat-card.next-due .stat-icon,
html[data-theme=dark] .balance-card.staff .stat-icon,
html[data-theme=dark] .balance-card.cyan .stat-icon,
html[data-theme=dark] .balance-card.collection-rate .stat-icon,
html[data-theme=dark] .balance-card.payment-metric .stat-icon,
html[data-theme=dark] .balance-card.next-due .stat-icon,
html[data-theme=dark] .preview-kpi-card.staff .stat-icon,
html[data-theme=dark] .preview-kpi-card.cyan .stat-icon,
html[data-theme=dark] .preview-kpi-card.collection-rate .stat-icon,
html[data-theme=dark] .preview-kpi-card.payment-metric .stat-icon,
html[data-theme=dark] .preview-kpi-card.next-due .stat-icon,
html[data-theme=dark] .mat-mdc-card.staff .stat-icon,
html[data-theme=dark] .mat-mdc-card.cyan .stat-icon,
html[data-theme=dark] .mat-mdc-card.collection-rate .stat-icon,
html[data-theme=dark] .mat-mdc-card.payment-metric .stat-icon,
html[data-theme=dark] .mat-mdc-card.next-due .stat-icon {
  background: rgba(34, 211, 238, 0.2) !important;
  border: 1px solid rgba(34, 211, 238, 0.4) !important;
}
html[data-theme=dark] .kpi-card.neutral,
html[data-theme=dark] .summary-card.neutral,
html[data-theme=dark] .financial-card.neutral,
html[data-theme=dark] .stat-card.neutral,
html[data-theme=dark] .balance-card.neutral,
html[data-theme=dark] .preview-kpi-card.neutral,
html[data-theme=dark] .mat-mdc-card.neutral {
  border-top: 4px solid var(--color-text-muted) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-text-muted) 8%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
}
html[data-theme=dark] .kpi-card.neutral .kpi-icon,
html[data-theme=dark] .kpi-card.neutral .card-icon,
html[data-theme=dark] .kpi-card.neutral .balance-icon,
html[data-theme=dark] .kpi-card.neutral .stat-icon mat-icon,
html[data-theme=dark] .summary-card.neutral .kpi-icon,
html[data-theme=dark] .summary-card.neutral .card-icon,
html[data-theme=dark] .summary-card.neutral .balance-icon,
html[data-theme=dark] .summary-card.neutral .stat-icon mat-icon,
html[data-theme=dark] .financial-card.neutral .kpi-icon,
html[data-theme=dark] .financial-card.neutral .card-icon,
html[data-theme=dark] .financial-card.neutral .balance-icon,
html[data-theme=dark] .financial-card.neutral .stat-icon mat-icon,
html[data-theme=dark] .stat-card.neutral .kpi-icon,
html[data-theme=dark] .stat-card.neutral .card-icon,
html[data-theme=dark] .stat-card.neutral .balance-icon,
html[data-theme=dark] .stat-card.neutral .stat-icon mat-icon,
html[data-theme=dark] .balance-card.neutral .kpi-icon,
html[data-theme=dark] .balance-card.neutral .card-icon,
html[data-theme=dark] .balance-card.neutral .balance-icon,
html[data-theme=dark] .balance-card.neutral .stat-icon mat-icon,
html[data-theme=dark] .preview-kpi-card.neutral .kpi-icon,
html[data-theme=dark] .preview-kpi-card.neutral .card-icon,
html[data-theme=dark] .preview-kpi-card.neutral .balance-icon,
html[data-theme=dark] .preview-kpi-card.neutral .stat-icon mat-icon,
html[data-theme=dark] .mat-mdc-card.neutral .kpi-icon,
html[data-theme=dark] .mat-mdc-card.neutral .card-icon,
html[data-theme=dark] .mat-mdc-card.neutral .balance-icon,
html[data-theme=dark] .mat-mdc-card.neutral .stat-icon mat-icon {
  color: var(--color-text-muted) !important;
}
html[data-theme=dark] .mat-mdc-form-field {
  --mdc-filled-text-field-container-color: var(--color-surface-soft);
  --mdc-filled-text-field-input-text-color: var(--color-text);
  --mdc-filled-text-field-label-text-color: var(--color-text-muted);
  --mdc-filled-text-field-focus-label-text-color: var(--color-primary-strong);
  --mdc-filled-text-field-caret-color: var(--color-primary-strong);
  --mdc-filled-text-field-active-indicator-color: var(--color-border-strong);
  --mdc-filled-text-field-focus-active-indicator-color: var(--color-primary-strong);
  --mdc-outlined-text-field-input-text-color: var(--color-text);
  --mdc-outlined-text-field-label-text-color: var(--color-text-muted);
  --mdc-outlined-text-field-focus-label-text-color: var(--color-primary-strong);
  --mdc-outlined-text-field-outline-color: var(--color-control-border);
  --mdc-outlined-text-field-hover-outline-color: var(--color-primary);
  --mdc-outlined-text-field-focus-outline-color: var(--color-primary-strong);
  --mdc-outlined-text-field-focus-outline-width: 2px;
  --mdc-outlined-text-field-caret-color: var(--color-primary-strong);
}
html[data-theme=dark] .mdc-text-field--filled,
html[data-theme=dark] .mdc-text-field--outlined,
html[data-theme=dark] .mat-mdc-text-field-wrapper {
  background: var(--color-surface-soft) !important;
  border-radius: var(--radius-md, 8px);
}
html[data-theme=dark] .mat-mdc-form-field .mdc-floating-label,
html[data-theme=dark] .mat-mdc-form-field .mat-mdc-form-field-hint,
html[data-theme=dark] .mat-mdc-form-field .mat-mdc-form-field-required-marker,
html[data-theme=dark] .mat-mdc-select-arrow,
html[data-theme=dark] .mat-mdc-form-field-icon-suffix,
html[data-theme=dark] .mat-mdc-form-field-icon-prefix {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}
html[data-theme=dark] .mat-mdc-input-element {
  color: var(--color-text) !important;
  caret-color: var(--color-primary-strong) !important;
}
html[data-theme=dark] .mat-mdc-input-element::placeholder {
  color: var(--color-text-light) !important;
  opacity: 0.9 !important;
}
html[data-theme=dark] .mat-mdc-checkbox {
  --mdc-checkbox-unselected-icon-color: var(--color-control-border) !important;
  --mdc-checkbox-unselected-hover-icon-color: var(--color-primary) !important;
  --mdc-checkbox-unselected-focus-icon-color: var(--color-primary) !important;
  --mdc-checkbox-selected-icon-color: var(--color-primary) !important;
  --mdc-checkbox-selected-hover-icon-color: var(--color-primary-strong) !important;
  --mdc-checkbox-selected-checkmark-color: var(--color-on-primary) !important;
  --mdc-checkbox-selected-focus-icon-color: var(--color-primary-strong) !important;
}
html[data-theme=dark] .mat-mdc-checkbox .mdc-form-field,
html[data-theme=dark] .mat-mdc-checkbox .mdc-label {
  color: var(--color-text) !important;
}
html[data-theme=dark] .mat-mdc-radio-button {
  --mdc-radio-unselected-icon-color: var(--color-control-border) !important;
  --mdc-radio-unselected-hover-icon-color: var(--color-primary) !important;
  --mdc-radio-selected-icon-color: var(--color-primary) !important;
  --mdc-radio-selected-hover-icon-color: var(--color-primary-strong) !important;
}
html[data-theme=dark] .mat-mdc-radio-button .mdc-label {
  color: var(--color-text) !important;
}
html[data-theme=dark] .mat-mdc-slide-toggle {
  --mdc-switch-selected-track-color: var(--color-primary) !important;
  --mdc-switch-selected-handle-color: var(--color-on-primary) !important;
  --mdc-switch-unselected-track-color: rgba(255, 255, 255, 0.28) !important;
  --mdc-switch-unselected-handle-color: #cbd5e1 !important;
}
html[data-theme=dark] .mat-mdc-outlined-button,
html[data-theme=dark] .mat-mdc-stroked-button {
  --mdc-outlined-button-outline-color: var(--color-control-border);
  --mdc-outlined-button-label-text-color: var(--color-text);
  border-color: var(--color-control-border) !important;
  color: var(--color-text) !important;
}
html[data-theme=dark] .mat-mdc-outlined-button:hover:not(:disabled),
html[data-theme=dark] .mat-mdc-stroked-button:hover:not(:disabled) {
  border-color: var(--color-primary) !important;
  background-color: rgba(96, 165, 250, 0.12) !important;
}
html[data-theme=dark] .mat-mdc-outlined-button[color=primary],
html[data-theme=dark] .mat-mdc-stroked-button[color=primary] {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
html[data-theme=dark] .mat-mdc-outlined-button[color=primary]:hover:not(:disabled),
html[data-theme=dark] .mat-mdc-stroked-button[color=primary]:hover:not(:disabled) {
  background-color: rgba(96, 165, 250, 0.18) !important;
}
html[data-theme=dark] .mat-mdc-button-base:disabled,
html[data-theme=dark] .mat-mdc-button-base[disabled] {
  opacity: 0.55 !important;
  color: var(--color-text-muted) !important;
  border-color: var(--color-border) !important;
}
html[data-theme=dark] .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}
html[data-theme=dark] .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
  color: var(--color-primary-strong) !important;
  font-weight: 700 !important;
}
html[data-theme=dark] .mat-mdc-tab-header {
  border-bottom: 1px solid var(--color-border) !important;
}
html[data-theme=dark] .mat-mdc-tab-header .mdc-tab-indicator__content--underline {
  border-color: var(--color-primary) !important;
  border-top-width: 3px !important;
}
html[data-theme=dark] .mat-mdc-table {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
html[data-theme=dark] .mat-mdc-header-row {
  background: var(--color-surface-soft) !important;
}
html[data-theme=dark] .mat-mdc-header-cell {
  color: var(--color-text) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--color-border-strong) !important;
}
html[data-theme=dark] .mat-mdc-cell {
  color: var(--color-text) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
html[data-theme=dark] .mat-mdc-row:hover {
  background-color: rgba(96, 165, 250, 0.08) !important;
}
html[data-theme=dark] .mat-mdc-paginator {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-top: 1px solid var(--color-border) !important;
}
html[data-theme=dark] .mat-mdc-paginator .mat-mdc-paginator-range-label,
html[data-theme=dark] .mat-mdc-paginator .mat-mdc-paginator-page-size-label {
  color: var(--color-text) !important;
}
html[data-theme=dark] .mat-mdc-paginator .mat-mdc-icon-button {
  color: var(--color-text) !important;
}
html[data-theme=dark] .mat-mdc-paginator .mat-mdc-icon-button:disabled {
  color: rgba(255, 255, 255, 0.3) !important;
}
html[data-theme=dark] .mat-mdc-select-panel,
html[data-theme=dark] .mat-mdc-menu-panel {
  background: var(--color-surface-elevated) !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme=dark] .mat-mdc-option {
  color: var(--color-text) !important;
}
html[data-theme=dark] .mat-mdc-option:hover:not(.mdc-list-item--disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme=dark] .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
  background: rgba(96, 165, 250, 0.2) !important;
}
html[data-theme=dark] .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
  color: var(--color-primary-strong) !important;
  font-weight: 600;
}
html[data-theme=dark] .pill.healthy, html[data-theme=dark] .pill.status-healthy, html[data-theme=dark] .pill.status-favourable, html[data-theme=dark] .pill.metric-good, html[data-theme=dark] .pill.grade-green, html[data-theme=dark] .pill.badge-success,
html[data-theme=dark] .badge.healthy,
html[data-theme=dark] .badge.status-healthy,
html[data-theme=dark] .badge.status-favourable,
html[data-theme=dark] .badge.metric-good,
html[data-theme=dark] .badge.grade-green,
html[data-theme=dark] .badge.badge-success,
html[data-theme=dark] .status-chip.healthy,
html[data-theme=dark] .status-chip.status-healthy,
html[data-theme=dark] .status-chip.status-favourable,
html[data-theme=dark] .status-chip.metric-good,
html[data-theme=dark] .status-chip.grade-green,
html[data-theme=dark] .status-chip.badge-success {
  background: rgba(52, 211, 153, 0.18) !important;
  border: 1px solid rgba(52, 211, 153, 0.5) !important;
  color: #34d399 !important;
  font-weight: 600;
}
html[data-theme=dark] .pill.watch, html[data-theme=dark] .pill.status-watch, html[data-theme=dark] .pill.metric-watch, html[data-theme=dark] .pill.grade-amber, html[data-theme=dark] .pill.revise, html[data-theme=dark] .pill.badge-warning,
html[data-theme=dark] .badge.watch,
html[data-theme=dark] .badge.status-watch,
html[data-theme=dark] .badge.metric-watch,
html[data-theme=dark] .badge.grade-amber,
html[data-theme=dark] .badge.revise,
html[data-theme=dark] .badge.badge-warning,
html[data-theme=dark] .status-chip.watch,
html[data-theme=dark] .status-chip.status-watch,
html[data-theme=dark] .status-chip.metric-watch,
html[data-theme=dark] .status-chip.grade-amber,
html[data-theme=dark] .status-chip.revise,
html[data-theme=dark] .status-chip.badge-warning {
  background: rgba(251, 191, 36, 0.18) !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  color: #fbbf24 !important;
  font-weight: 600;
}
html[data-theme=dark] .pill.critical, html[data-theme=dark] .pill.status-critical, html[data-theme=dark] .pill.metric-risk, html[data-theme=dark] .pill.grade-red, html[data-theme=dark] .pill.defer, html[data-theme=dark] .pill.negative, html[data-theme=dark] .pill.degraded, html[data-theme=dark] .pill.badge-danger,
html[data-theme=dark] .badge.critical,
html[data-theme=dark] .badge.status-critical,
html[data-theme=dark] .badge.metric-risk,
html[data-theme=dark] .badge.grade-red,
html[data-theme=dark] .badge.defer,
html[data-theme=dark] .badge.negative,
html[data-theme=dark] .badge.degraded,
html[data-theme=dark] .badge.badge-danger,
html[data-theme=dark] .status-chip.critical,
html[data-theme=dark] .status-chip.status-critical,
html[data-theme=dark] .status-chip.metric-risk,
html[data-theme=dark] .status-chip.grade-red,
html[data-theme=dark] .status-chip.defer,
html[data-theme=dark] .status-chip.negative,
html[data-theme=dark] .status-chip.degraded,
html[data-theme=dark] .status-chip.badge-danger {
  background: rgba(248, 113, 113, 0.18) !important;
  border: 1px solid rgba(248, 113, 113, 0.5) !important;
  color: #f87171 !important;
  font-weight: 600;
}
html[data-theme=dark] .pill.info, html[data-theme=dark] .pill.status-info, html[data-theme=dark] .pill.badge-info,
html[data-theme=dark] .badge.info,
html[data-theme=dark] .badge.status-info,
html[data-theme=dark] .badge.badge-info,
html[data-theme=dark] .status-chip.info,
html[data-theme=dark] .status-chip.status-info,
html[data-theme=dark] .status-chip.badge-info {
  background: rgba(96, 165, 250, 0.18) !important;
  border: 1px solid rgba(96, 165, 250, 0.5) !important;
  color: #60a5fa !important;
  font-weight: 600;
}
html[data-theme=dark] {
  /* Text elements inside page-container */
  /* prettier-ignore */
}
html[data-theme=dark] .page-container :where(h1, h2, h3, h4, h5, h6, p, span, small, label, td, th, li, a, strong, em) {
  color: var(--color-text);
}
html[data-theme=dark] {
  /* prettier-ignore */
}
html[data-theme=dark] .page-container :where(.page-subtitle, .subtitle, .kicker, .form-intro, .muted, .secondary, small, .hint-text) {
  color: var(--color-text-muted) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme=system] {
    color: var(--color-text);
  }
  html[data-theme=system] body,
  html[data-theme=system] .mat-typography,
  html[data-theme=system] .mat-mdc-card-content,
  html[data-theme=system] .mat-mdc-card-subtitle,
  html[data-theme=system] .mat-mdc-list-item-title,
  html[data-theme=system] .mat-mdc-list-item-line,
  html[data-theme=system] .mat-expansion-panel-header-title,
  html[data-theme=system] .mat-expansion-panel-header-description,
  html[data-theme=system] .mat-mdc-tab-label,
  html[data-theme=system] .mdc-tab__text-label,
  html[data-theme=system] .mat-mdc-paginator,
  html[data-theme=system] .mat-mdc-paginator-page-size-label,
  html[data-theme=system] .mat-mdc-paginator-range-label,
  html[data-theme=system] .mat-sort-header-content,
  html[data-theme=system] .mat-mdc-header-cell,
  html[data-theme=system] .mat-mdc-cell,
  html[data-theme=system] .mdc-list-item__primary-text,
  html[data-theme=system] .mdc-list-item__secondary-text {
    color: var(--color-text) !important;
  }
  html[data-theme=system] .page-subtitle,
  html[data-theme=system] .subtitle,
  html[data-theme=system] .form-intro,
  html[data-theme=system] .kicker,
  html[data-theme=system] .mat-mdc-card-subtitle,
  html[data-theme=system] .mdc-list-item__secondary-text {
    color: var(--color-text-muted) !important;
  }
  html[data-theme=system] body {
    background-color: var(--color-bg) !important;
  }
  html[data-theme=system] .mat-mdc-card,
  html[data-theme=system] .module-card,
  html[data-theme=system] .wizard-card,
  html[data-theme=system] .table-card,
  html[data-theme=system] .search-card,
  html[data-theme=system] .form-card,
  html[data-theme=system] .grid-card {
    background-color: var(--color-surface);
    color: var(--color-text) !important;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-1);
  }
  html[data-theme=system] .mat-mdc-dialog-surface,
  html[data-theme=system] .mat-mdc-menu-panel,
  html[data-theme=system] .mat-mdc-select-panel,
  html[data-theme=system] .mat-datepicker-content,
  html[data-theme=system] .mat-mdc-autocomplete-panel,
  html[data-theme=system] .mat-mdc-tooltip {
    background: var(--color-surface-elevated) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border-strong) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6) !important;
  }
  html[data-theme=system] .kpi-card.primary, html[data-theme=system] .kpi-card.info, html[data-theme=system] .kpi-card.bank, html[data-theme=system] .kpi-card.run, html[data-theme=system] .kpi-card.approved, html[data-theme=system] .kpi-card.approved-card, html[data-theme=system] .kpi-card.tone-bank, html[data-theme=system] .kpi-card.transactions, html[data-theme=system] .kpi-card.total-revenue, html[data-theme=system] .kpi-card.blue,
  html[data-theme=system] .summary-card.primary,
  html[data-theme=system] .summary-card.info,
  html[data-theme=system] .summary-card.bank,
  html[data-theme=system] .summary-card.run,
  html[data-theme=system] .summary-card.approved,
  html[data-theme=system] .summary-card.approved-card,
  html[data-theme=system] .summary-card.tone-bank,
  html[data-theme=system] .summary-card.transactions,
  html[data-theme=system] .summary-card.total-revenue,
  html[data-theme=system] .summary-card.blue,
  html[data-theme=system] .financial-card.primary,
  html[data-theme=system] .financial-card.info,
  html[data-theme=system] .financial-card.bank,
  html[data-theme=system] .financial-card.run,
  html[data-theme=system] .financial-card.approved,
  html[data-theme=system] .financial-card.approved-card,
  html[data-theme=system] .financial-card.tone-bank,
  html[data-theme=system] .financial-card.transactions,
  html[data-theme=system] .financial-card.total-revenue,
  html[data-theme=system] .financial-card.blue,
  html[data-theme=system] .stat-card.primary,
  html[data-theme=system] .stat-card.info,
  html[data-theme=system] .stat-card.bank,
  html[data-theme=system] .stat-card.run,
  html[data-theme=system] .stat-card.approved,
  html[data-theme=system] .stat-card.approved-card,
  html[data-theme=system] .stat-card.tone-bank,
  html[data-theme=system] .stat-card.transactions,
  html[data-theme=system] .stat-card.total-revenue,
  html[data-theme=system] .stat-card.blue,
  html[data-theme=system] .balance-card.primary,
  html[data-theme=system] .balance-card.info,
  html[data-theme=system] .balance-card.bank,
  html[data-theme=system] .balance-card.run,
  html[data-theme=system] .balance-card.approved,
  html[data-theme=system] .balance-card.approved-card,
  html[data-theme=system] .balance-card.tone-bank,
  html[data-theme=system] .balance-card.transactions,
  html[data-theme=system] .balance-card.total-revenue,
  html[data-theme=system] .balance-card.blue,
  html[data-theme=system] .preview-kpi-card.primary,
  html[data-theme=system] .preview-kpi-card.info,
  html[data-theme=system] .preview-kpi-card.bank,
  html[data-theme=system] .preview-kpi-card.run,
  html[data-theme=system] .preview-kpi-card.approved,
  html[data-theme=system] .preview-kpi-card.approved-card,
  html[data-theme=system] .preview-kpi-card.tone-bank,
  html[data-theme=system] .preview-kpi-card.transactions,
  html[data-theme=system] .preview-kpi-card.total-revenue,
  html[data-theme=system] .preview-kpi-card.blue,
  html[data-theme=system] .mat-mdc-card.primary,
  html[data-theme=system] .mat-mdc-card.info,
  html[data-theme=system] .mat-mdc-card.bank,
  html[data-theme=system] .mat-mdc-card.run,
  html[data-theme=system] .mat-mdc-card.approved,
  html[data-theme=system] .mat-mdc-card.approved-card,
  html[data-theme=system] .mat-mdc-card.tone-bank,
  html[data-theme=system] .mat-mdc-card.transactions,
  html[data-theme=system] .mat-mdc-card.total-revenue,
  html[data-theme=system] .mat-mdc-card.blue {
    border-top: 4px solid var(--color-primary) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
  }
  html[data-theme=system] .kpi-card.primary .kpi-icon,
  html[data-theme=system] .kpi-card.primary .card-icon,
  html[data-theme=system] .kpi-card.primary .balance-icon,
  html[data-theme=system] .kpi-card.primary .stat-icon mat-icon, html[data-theme=system] .kpi-card.info .kpi-icon,
  html[data-theme=system] .kpi-card.info .card-icon,
  html[data-theme=system] .kpi-card.info .balance-icon,
  html[data-theme=system] .kpi-card.info .stat-icon mat-icon, html[data-theme=system] .kpi-card.bank .kpi-icon,
  html[data-theme=system] .kpi-card.bank .card-icon,
  html[data-theme=system] .kpi-card.bank .balance-icon,
  html[data-theme=system] .kpi-card.bank .stat-icon mat-icon, html[data-theme=system] .kpi-card.run .kpi-icon,
  html[data-theme=system] .kpi-card.run .card-icon,
  html[data-theme=system] .kpi-card.run .balance-icon,
  html[data-theme=system] .kpi-card.run .stat-icon mat-icon, html[data-theme=system] .kpi-card.approved .kpi-icon,
  html[data-theme=system] .kpi-card.approved .card-icon,
  html[data-theme=system] .kpi-card.approved .balance-icon,
  html[data-theme=system] .kpi-card.approved .stat-icon mat-icon, html[data-theme=system] .kpi-card.approved-card .kpi-icon,
  html[data-theme=system] .kpi-card.approved-card .card-icon,
  html[data-theme=system] .kpi-card.approved-card .balance-icon,
  html[data-theme=system] .kpi-card.approved-card .stat-icon mat-icon, html[data-theme=system] .kpi-card.tone-bank .kpi-icon,
  html[data-theme=system] .kpi-card.tone-bank .card-icon,
  html[data-theme=system] .kpi-card.tone-bank .balance-icon,
  html[data-theme=system] .kpi-card.tone-bank .stat-icon mat-icon, html[data-theme=system] .kpi-card.transactions .kpi-icon,
  html[data-theme=system] .kpi-card.transactions .card-icon,
  html[data-theme=system] .kpi-card.transactions .balance-icon,
  html[data-theme=system] .kpi-card.transactions .stat-icon mat-icon, html[data-theme=system] .kpi-card.total-revenue .kpi-icon,
  html[data-theme=system] .kpi-card.total-revenue .card-icon,
  html[data-theme=system] .kpi-card.total-revenue .balance-icon,
  html[data-theme=system] .kpi-card.total-revenue .stat-icon mat-icon, html[data-theme=system] .kpi-card.blue .kpi-icon,
  html[data-theme=system] .kpi-card.blue .card-icon,
  html[data-theme=system] .kpi-card.blue .balance-icon,
  html[data-theme=system] .kpi-card.blue .stat-icon mat-icon,
  html[data-theme=system] .summary-card.primary .kpi-icon,
  html[data-theme=system] .summary-card.primary .card-icon,
  html[data-theme=system] .summary-card.primary .balance-icon,
  html[data-theme=system] .summary-card.primary .stat-icon mat-icon,
  html[data-theme=system] .summary-card.info .kpi-icon,
  html[data-theme=system] .summary-card.info .card-icon,
  html[data-theme=system] .summary-card.info .balance-icon,
  html[data-theme=system] .summary-card.info .stat-icon mat-icon,
  html[data-theme=system] .summary-card.bank .kpi-icon,
  html[data-theme=system] .summary-card.bank .card-icon,
  html[data-theme=system] .summary-card.bank .balance-icon,
  html[data-theme=system] .summary-card.bank .stat-icon mat-icon,
  html[data-theme=system] .summary-card.run .kpi-icon,
  html[data-theme=system] .summary-card.run .card-icon,
  html[data-theme=system] .summary-card.run .balance-icon,
  html[data-theme=system] .summary-card.run .stat-icon mat-icon,
  html[data-theme=system] .summary-card.approved .kpi-icon,
  html[data-theme=system] .summary-card.approved .card-icon,
  html[data-theme=system] .summary-card.approved .balance-icon,
  html[data-theme=system] .summary-card.approved .stat-icon mat-icon,
  html[data-theme=system] .summary-card.approved-card .kpi-icon,
  html[data-theme=system] .summary-card.approved-card .card-icon,
  html[data-theme=system] .summary-card.approved-card .balance-icon,
  html[data-theme=system] .summary-card.approved-card .stat-icon mat-icon,
  html[data-theme=system] .summary-card.tone-bank .kpi-icon,
  html[data-theme=system] .summary-card.tone-bank .card-icon,
  html[data-theme=system] .summary-card.tone-bank .balance-icon,
  html[data-theme=system] .summary-card.tone-bank .stat-icon mat-icon,
  html[data-theme=system] .summary-card.transactions .kpi-icon,
  html[data-theme=system] .summary-card.transactions .card-icon,
  html[data-theme=system] .summary-card.transactions .balance-icon,
  html[data-theme=system] .summary-card.transactions .stat-icon mat-icon,
  html[data-theme=system] .summary-card.total-revenue .kpi-icon,
  html[data-theme=system] .summary-card.total-revenue .card-icon,
  html[data-theme=system] .summary-card.total-revenue .balance-icon,
  html[data-theme=system] .summary-card.total-revenue .stat-icon mat-icon,
  html[data-theme=system] .summary-card.blue .kpi-icon,
  html[data-theme=system] .summary-card.blue .card-icon,
  html[data-theme=system] .summary-card.blue .balance-icon,
  html[data-theme=system] .summary-card.blue .stat-icon mat-icon,
  html[data-theme=system] .financial-card.primary .kpi-icon,
  html[data-theme=system] .financial-card.primary .card-icon,
  html[data-theme=system] .financial-card.primary .balance-icon,
  html[data-theme=system] .financial-card.primary .stat-icon mat-icon,
  html[data-theme=system] .financial-card.info .kpi-icon,
  html[data-theme=system] .financial-card.info .card-icon,
  html[data-theme=system] .financial-card.info .balance-icon,
  html[data-theme=system] .financial-card.info .stat-icon mat-icon,
  html[data-theme=system] .financial-card.bank .kpi-icon,
  html[data-theme=system] .financial-card.bank .card-icon,
  html[data-theme=system] .financial-card.bank .balance-icon,
  html[data-theme=system] .financial-card.bank .stat-icon mat-icon,
  html[data-theme=system] .financial-card.run .kpi-icon,
  html[data-theme=system] .financial-card.run .card-icon,
  html[data-theme=system] .financial-card.run .balance-icon,
  html[data-theme=system] .financial-card.run .stat-icon mat-icon,
  html[data-theme=system] .financial-card.approved .kpi-icon,
  html[data-theme=system] .financial-card.approved .card-icon,
  html[data-theme=system] .financial-card.approved .balance-icon,
  html[data-theme=system] .financial-card.approved .stat-icon mat-icon,
  html[data-theme=system] .financial-card.approved-card .kpi-icon,
  html[data-theme=system] .financial-card.approved-card .card-icon,
  html[data-theme=system] .financial-card.approved-card .balance-icon,
  html[data-theme=system] .financial-card.approved-card .stat-icon mat-icon,
  html[data-theme=system] .financial-card.tone-bank .kpi-icon,
  html[data-theme=system] .financial-card.tone-bank .card-icon,
  html[data-theme=system] .financial-card.tone-bank .balance-icon,
  html[data-theme=system] .financial-card.tone-bank .stat-icon mat-icon,
  html[data-theme=system] .financial-card.transactions .kpi-icon,
  html[data-theme=system] .financial-card.transactions .card-icon,
  html[data-theme=system] .financial-card.transactions .balance-icon,
  html[data-theme=system] .financial-card.transactions .stat-icon mat-icon,
  html[data-theme=system] .financial-card.total-revenue .kpi-icon,
  html[data-theme=system] .financial-card.total-revenue .card-icon,
  html[data-theme=system] .financial-card.total-revenue .balance-icon,
  html[data-theme=system] .financial-card.total-revenue .stat-icon mat-icon,
  html[data-theme=system] .financial-card.blue .kpi-icon,
  html[data-theme=system] .financial-card.blue .card-icon,
  html[data-theme=system] .financial-card.blue .balance-icon,
  html[data-theme=system] .financial-card.blue .stat-icon mat-icon,
  html[data-theme=system] .stat-card.primary .kpi-icon,
  html[data-theme=system] .stat-card.primary .card-icon,
  html[data-theme=system] .stat-card.primary .balance-icon,
  html[data-theme=system] .stat-card.primary .stat-icon mat-icon,
  html[data-theme=system] .stat-card.info .kpi-icon,
  html[data-theme=system] .stat-card.info .card-icon,
  html[data-theme=system] .stat-card.info .balance-icon,
  html[data-theme=system] .stat-card.info .stat-icon mat-icon,
  html[data-theme=system] .stat-card.bank .kpi-icon,
  html[data-theme=system] .stat-card.bank .card-icon,
  html[data-theme=system] .stat-card.bank .balance-icon,
  html[data-theme=system] .stat-card.bank .stat-icon mat-icon,
  html[data-theme=system] .stat-card.run .kpi-icon,
  html[data-theme=system] .stat-card.run .card-icon,
  html[data-theme=system] .stat-card.run .balance-icon,
  html[data-theme=system] .stat-card.run .stat-icon mat-icon,
  html[data-theme=system] .stat-card.approved .kpi-icon,
  html[data-theme=system] .stat-card.approved .card-icon,
  html[data-theme=system] .stat-card.approved .balance-icon,
  html[data-theme=system] .stat-card.approved .stat-icon mat-icon,
  html[data-theme=system] .stat-card.approved-card .kpi-icon,
  html[data-theme=system] .stat-card.approved-card .card-icon,
  html[data-theme=system] .stat-card.approved-card .balance-icon,
  html[data-theme=system] .stat-card.approved-card .stat-icon mat-icon,
  html[data-theme=system] .stat-card.tone-bank .kpi-icon,
  html[data-theme=system] .stat-card.tone-bank .card-icon,
  html[data-theme=system] .stat-card.tone-bank .balance-icon,
  html[data-theme=system] .stat-card.tone-bank .stat-icon mat-icon,
  html[data-theme=system] .stat-card.transactions .kpi-icon,
  html[data-theme=system] .stat-card.transactions .card-icon,
  html[data-theme=system] .stat-card.transactions .balance-icon,
  html[data-theme=system] .stat-card.transactions .stat-icon mat-icon,
  html[data-theme=system] .stat-card.total-revenue .kpi-icon,
  html[data-theme=system] .stat-card.total-revenue .card-icon,
  html[data-theme=system] .stat-card.total-revenue .balance-icon,
  html[data-theme=system] .stat-card.total-revenue .stat-icon mat-icon,
  html[data-theme=system] .stat-card.blue .kpi-icon,
  html[data-theme=system] .stat-card.blue .card-icon,
  html[data-theme=system] .stat-card.blue .balance-icon,
  html[data-theme=system] .stat-card.blue .stat-icon mat-icon,
  html[data-theme=system] .balance-card.primary .kpi-icon,
  html[data-theme=system] .balance-card.primary .card-icon,
  html[data-theme=system] .balance-card.primary .balance-icon,
  html[data-theme=system] .balance-card.primary .stat-icon mat-icon,
  html[data-theme=system] .balance-card.info .kpi-icon,
  html[data-theme=system] .balance-card.info .card-icon,
  html[data-theme=system] .balance-card.info .balance-icon,
  html[data-theme=system] .balance-card.info .stat-icon mat-icon,
  html[data-theme=system] .balance-card.bank .kpi-icon,
  html[data-theme=system] .balance-card.bank .card-icon,
  html[data-theme=system] .balance-card.bank .balance-icon,
  html[data-theme=system] .balance-card.bank .stat-icon mat-icon,
  html[data-theme=system] .balance-card.run .kpi-icon,
  html[data-theme=system] .balance-card.run .card-icon,
  html[data-theme=system] .balance-card.run .balance-icon,
  html[data-theme=system] .balance-card.run .stat-icon mat-icon,
  html[data-theme=system] .balance-card.approved .kpi-icon,
  html[data-theme=system] .balance-card.approved .card-icon,
  html[data-theme=system] .balance-card.approved .balance-icon,
  html[data-theme=system] .balance-card.approved .stat-icon mat-icon,
  html[data-theme=system] .balance-card.approved-card .kpi-icon,
  html[data-theme=system] .balance-card.approved-card .card-icon,
  html[data-theme=system] .balance-card.approved-card .balance-icon,
  html[data-theme=system] .balance-card.approved-card .stat-icon mat-icon,
  html[data-theme=system] .balance-card.tone-bank .kpi-icon,
  html[data-theme=system] .balance-card.tone-bank .card-icon,
  html[data-theme=system] .balance-card.tone-bank .balance-icon,
  html[data-theme=system] .balance-card.tone-bank .stat-icon mat-icon,
  html[data-theme=system] .balance-card.transactions .kpi-icon,
  html[data-theme=system] .balance-card.transactions .card-icon,
  html[data-theme=system] .balance-card.transactions .balance-icon,
  html[data-theme=system] .balance-card.transactions .stat-icon mat-icon,
  html[data-theme=system] .balance-card.total-revenue .kpi-icon,
  html[data-theme=system] .balance-card.total-revenue .card-icon,
  html[data-theme=system] .balance-card.total-revenue .balance-icon,
  html[data-theme=system] .balance-card.total-revenue .stat-icon mat-icon,
  html[data-theme=system] .balance-card.blue .kpi-icon,
  html[data-theme=system] .balance-card.blue .card-icon,
  html[data-theme=system] .balance-card.blue .balance-icon,
  html[data-theme=system] .balance-card.blue .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.primary .kpi-icon,
  html[data-theme=system] .preview-kpi-card.primary .card-icon,
  html[data-theme=system] .preview-kpi-card.primary .balance-icon,
  html[data-theme=system] .preview-kpi-card.primary .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.info .kpi-icon,
  html[data-theme=system] .preview-kpi-card.info .card-icon,
  html[data-theme=system] .preview-kpi-card.info .balance-icon,
  html[data-theme=system] .preview-kpi-card.info .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.bank .kpi-icon,
  html[data-theme=system] .preview-kpi-card.bank .card-icon,
  html[data-theme=system] .preview-kpi-card.bank .balance-icon,
  html[data-theme=system] .preview-kpi-card.bank .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.run .kpi-icon,
  html[data-theme=system] .preview-kpi-card.run .card-icon,
  html[data-theme=system] .preview-kpi-card.run .balance-icon,
  html[data-theme=system] .preview-kpi-card.run .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.approved .kpi-icon,
  html[data-theme=system] .preview-kpi-card.approved .card-icon,
  html[data-theme=system] .preview-kpi-card.approved .balance-icon,
  html[data-theme=system] .preview-kpi-card.approved .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.approved-card .kpi-icon,
  html[data-theme=system] .preview-kpi-card.approved-card .card-icon,
  html[data-theme=system] .preview-kpi-card.approved-card .balance-icon,
  html[data-theme=system] .preview-kpi-card.approved-card .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.tone-bank .kpi-icon,
  html[data-theme=system] .preview-kpi-card.tone-bank .card-icon,
  html[data-theme=system] .preview-kpi-card.tone-bank .balance-icon,
  html[data-theme=system] .preview-kpi-card.tone-bank .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.transactions .kpi-icon,
  html[data-theme=system] .preview-kpi-card.transactions .card-icon,
  html[data-theme=system] .preview-kpi-card.transactions .balance-icon,
  html[data-theme=system] .preview-kpi-card.transactions .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.total-revenue .kpi-icon,
  html[data-theme=system] .preview-kpi-card.total-revenue .card-icon,
  html[data-theme=system] .preview-kpi-card.total-revenue .balance-icon,
  html[data-theme=system] .preview-kpi-card.total-revenue .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.blue .kpi-icon,
  html[data-theme=system] .preview-kpi-card.blue .card-icon,
  html[data-theme=system] .preview-kpi-card.blue .balance-icon,
  html[data-theme=system] .preview-kpi-card.blue .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.primary .kpi-icon,
  html[data-theme=system] .mat-mdc-card.primary .card-icon,
  html[data-theme=system] .mat-mdc-card.primary .balance-icon,
  html[data-theme=system] .mat-mdc-card.primary .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.info .kpi-icon,
  html[data-theme=system] .mat-mdc-card.info .card-icon,
  html[data-theme=system] .mat-mdc-card.info .balance-icon,
  html[data-theme=system] .mat-mdc-card.info .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.bank .kpi-icon,
  html[data-theme=system] .mat-mdc-card.bank .card-icon,
  html[data-theme=system] .mat-mdc-card.bank .balance-icon,
  html[data-theme=system] .mat-mdc-card.bank .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.run .kpi-icon,
  html[data-theme=system] .mat-mdc-card.run .card-icon,
  html[data-theme=system] .mat-mdc-card.run .balance-icon,
  html[data-theme=system] .mat-mdc-card.run .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.approved .kpi-icon,
  html[data-theme=system] .mat-mdc-card.approved .card-icon,
  html[data-theme=system] .mat-mdc-card.approved .balance-icon,
  html[data-theme=system] .mat-mdc-card.approved .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.approved-card .kpi-icon,
  html[data-theme=system] .mat-mdc-card.approved-card .card-icon,
  html[data-theme=system] .mat-mdc-card.approved-card .balance-icon,
  html[data-theme=system] .mat-mdc-card.approved-card .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.tone-bank .kpi-icon,
  html[data-theme=system] .mat-mdc-card.tone-bank .card-icon,
  html[data-theme=system] .mat-mdc-card.tone-bank .balance-icon,
  html[data-theme=system] .mat-mdc-card.tone-bank .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.transactions .kpi-icon,
  html[data-theme=system] .mat-mdc-card.transactions .card-icon,
  html[data-theme=system] .mat-mdc-card.transactions .balance-icon,
  html[data-theme=system] .mat-mdc-card.transactions .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.total-revenue .kpi-icon,
  html[data-theme=system] .mat-mdc-card.total-revenue .card-icon,
  html[data-theme=system] .mat-mdc-card.total-revenue .balance-icon,
  html[data-theme=system] .mat-mdc-card.total-revenue .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.blue .kpi-icon,
  html[data-theme=system] .mat-mdc-card.blue .card-icon,
  html[data-theme=system] .mat-mdc-card.blue .balance-icon,
  html[data-theme=system] .mat-mdc-card.blue .stat-icon mat-icon {
    color: var(--color-primary) !important;
  }
  html[data-theme=system] .kpi-card.primary .stat-icon, html[data-theme=system] .kpi-card.info .stat-icon, html[data-theme=system] .kpi-card.bank .stat-icon, html[data-theme=system] .kpi-card.run .stat-icon, html[data-theme=system] .kpi-card.approved .stat-icon, html[data-theme=system] .kpi-card.approved-card .stat-icon, html[data-theme=system] .kpi-card.tone-bank .stat-icon, html[data-theme=system] .kpi-card.transactions .stat-icon, html[data-theme=system] .kpi-card.total-revenue .stat-icon, html[data-theme=system] .kpi-card.blue .stat-icon,
  html[data-theme=system] .summary-card.primary .stat-icon,
  html[data-theme=system] .summary-card.info .stat-icon,
  html[data-theme=system] .summary-card.bank .stat-icon,
  html[data-theme=system] .summary-card.run .stat-icon,
  html[data-theme=system] .summary-card.approved .stat-icon,
  html[data-theme=system] .summary-card.approved-card .stat-icon,
  html[data-theme=system] .summary-card.tone-bank .stat-icon,
  html[data-theme=system] .summary-card.transactions .stat-icon,
  html[data-theme=system] .summary-card.total-revenue .stat-icon,
  html[data-theme=system] .summary-card.blue .stat-icon,
  html[data-theme=system] .financial-card.primary .stat-icon,
  html[data-theme=system] .financial-card.info .stat-icon,
  html[data-theme=system] .financial-card.bank .stat-icon,
  html[data-theme=system] .financial-card.run .stat-icon,
  html[data-theme=system] .financial-card.approved .stat-icon,
  html[data-theme=system] .financial-card.approved-card .stat-icon,
  html[data-theme=system] .financial-card.tone-bank .stat-icon,
  html[data-theme=system] .financial-card.transactions .stat-icon,
  html[data-theme=system] .financial-card.total-revenue .stat-icon,
  html[data-theme=system] .financial-card.blue .stat-icon,
  html[data-theme=system] .stat-card.primary .stat-icon,
  html[data-theme=system] .stat-card.info .stat-icon,
  html[data-theme=system] .stat-card.bank .stat-icon,
  html[data-theme=system] .stat-card.run .stat-icon,
  html[data-theme=system] .stat-card.approved .stat-icon,
  html[data-theme=system] .stat-card.approved-card .stat-icon,
  html[data-theme=system] .stat-card.tone-bank .stat-icon,
  html[data-theme=system] .stat-card.transactions .stat-icon,
  html[data-theme=system] .stat-card.total-revenue .stat-icon,
  html[data-theme=system] .stat-card.blue .stat-icon,
  html[data-theme=system] .balance-card.primary .stat-icon,
  html[data-theme=system] .balance-card.info .stat-icon,
  html[data-theme=system] .balance-card.bank .stat-icon,
  html[data-theme=system] .balance-card.run .stat-icon,
  html[data-theme=system] .balance-card.approved .stat-icon,
  html[data-theme=system] .balance-card.approved-card .stat-icon,
  html[data-theme=system] .balance-card.tone-bank .stat-icon,
  html[data-theme=system] .balance-card.transactions .stat-icon,
  html[data-theme=system] .balance-card.total-revenue .stat-icon,
  html[data-theme=system] .balance-card.blue .stat-icon,
  html[data-theme=system] .preview-kpi-card.primary .stat-icon,
  html[data-theme=system] .preview-kpi-card.info .stat-icon,
  html[data-theme=system] .preview-kpi-card.bank .stat-icon,
  html[data-theme=system] .preview-kpi-card.run .stat-icon,
  html[data-theme=system] .preview-kpi-card.approved .stat-icon,
  html[data-theme=system] .preview-kpi-card.approved-card .stat-icon,
  html[data-theme=system] .preview-kpi-card.tone-bank .stat-icon,
  html[data-theme=system] .preview-kpi-card.transactions .stat-icon,
  html[data-theme=system] .preview-kpi-card.total-revenue .stat-icon,
  html[data-theme=system] .preview-kpi-card.blue .stat-icon,
  html[data-theme=system] .mat-mdc-card.primary .stat-icon,
  html[data-theme=system] .mat-mdc-card.info .stat-icon,
  html[data-theme=system] .mat-mdc-card.bank .stat-icon,
  html[data-theme=system] .mat-mdc-card.run .stat-icon,
  html[data-theme=system] .mat-mdc-card.approved .stat-icon,
  html[data-theme=system] .mat-mdc-card.approved-card .stat-icon,
  html[data-theme=system] .mat-mdc-card.tone-bank .stat-icon,
  html[data-theme=system] .mat-mdc-card.transactions .stat-icon,
  html[data-theme=system] .mat-mdc-card.total-revenue .stat-icon,
  html[data-theme=system] .mat-mdc-card.blue .stat-icon {
    background: rgba(96, 165, 250, 0.2) !important;
    border: 1px solid rgba(96, 165, 250, 0.4) !important;
  }
  html[data-theme=system] .kpi-card.success, html[data-theme=system] .kpi-card.positive, html[data-theme=system] .kpi-card.total, html[data-theme=system] .kpi-card.income, html[data-theme=system] .kpi-card.profit, html[data-theme=system] .kpi-card.bonus, html[data-theme=system] .kpi-card.tone-total, html[data-theme=system] .kpi-card.total-card, html[data-theme=system] .kpi-card.paid-amount, html[data-theme=system] .kpi-card.healthy, html[data-theme=system] .kpi-card.green,
  html[data-theme=system] .summary-card.success,
  html[data-theme=system] .summary-card.positive,
  html[data-theme=system] .summary-card.total,
  html[data-theme=system] .summary-card.income,
  html[data-theme=system] .summary-card.profit,
  html[data-theme=system] .summary-card.bonus,
  html[data-theme=system] .summary-card.tone-total,
  html[data-theme=system] .summary-card.total-card,
  html[data-theme=system] .summary-card.paid-amount,
  html[data-theme=system] .summary-card.healthy,
  html[data-theme=system] .summary-card.green,
  html[data-theme=system] .financial-card.success,
  html[data-theme=system] .financial-card.positive,
  html[data-theme=system] .financial-card.total,
  html[data-theme=system] .financial-card.income,
  html[data-theme=system] .financial-card.profit,
  html[data-theme=system] .financial-card.bonus,
  html[data-theme=system] .financial-card.tone-total,
  html[data-theme=system] .financial-card.total-card,
  html[data-theme=system] .financial-card.paid-amount,
  html[data-theme=system] .financial-card.healthy,
  html[data-theme=system] .financial-card.green,
  html[data-theme=system] .stat-card.success,
  html[data-theme=system] .stat-card.positive,
  html[data-theme=system] .stat-card.total,
  html[data-theme=system] .stat-card.income,
  html[data-theme=system] .stat-card.profit,
  html[data-theme=system] .stat-card.bonus,
  html[data-theme=system] .stat-card.tone-total,
  html[data-theme=system] .stat-card.total-card,
  html[data-theme=system] .stat-card.paid-amount,
  html[data-theme=system] .stat-card.healthy,
  html[data-theme=system] .stat-card.green,
  html[data-theme=system] .balance-card.success,
  html[data-theme=system] .balance-card.positive,
  html[data-theme=system] .balance-card.total,
  html[data-theme=system] .balance-card.income,
  html[data-theme=system] .balance-card.profit,
  html[data-theme=system] .balance-card.bonus,
  html[data-theme=system] .balance-card.tone-total,
  html[data-theme=system] .balance-card.total-card,
  html[data-theme=system] .balance-card.paid-amount,
  html[data-theme=system] .balance-card.healthy,
  html[data-theme=system] .balance-card.green,
  html[data-theme=system] .preview-kpi-card.success,
  html[data-theme=system] .preview-kpi-card.positive,
  html[data-theme=system] .preview-kpi-card.total,
  html[data-theme=system] .preview-kpi-card.income,
  html[data-theme=system] .preview-kpi-card.profit,
  html[data-theme=system] .preview-kpi-card.bonus,
  html[data-theme=system] .preview-kpi-card.tone-total,
  html[data-theme=system] .preview-kpi-card.total-card,
  html[data-theme=system] .preview-kpi-card.paid-amount,
  html[data-theme=system] .preview-kpi-card.healthy,
  html[data-theme=system] .preview-kpi-card.green,
  html[data-theme=system] .mat-mdc-card.success,
  html[data-theme=system] .mat-mdc-card.positive,
  html[data-theme=system] .mat-mdc-card.total,
  html[data-theme=system] .mat-mdc-card.income,
  html[data-theme=system] .mat-mdc-card.profit,
  html[data-theme=system] .mat-mdc-card.bonus,
  html[data-theme=system] .mat-mdc-card.tone-total,
  html[data-theme=system] .mat-mdc-card.total-card,
  html[data-theme=system] .mat-mdc-card.paid-amount,
  html[data-theme=system] .mat-mdc-card.healthy,
  html[data-theme=system] .mat-mdc-card.green {
    border-top: 4px solid var(--color-success) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
  }
  html[data-theme=system] .kpi-card.success .kpi-icon,
  html[data-theme=system] .kpi-card.success .card-icon,
  html[data-theme=system] .kpi-card.success .balance-icon,
  html[data-theme=system] .kpi-card.success .stat-icon mat-icon, html[data-theme=system] .kpi-card.positive .kpi-icon,
  html[data-theme=system] .kpi-card.positive .card-icon,
  html[data-theme=system] .kpi-card.positive .balance-icon,
  html[data-theme=system] .kpi-card.positive .stat-icon mat-icon, html[data-theme=system] .kpi-card.total .kpi-icon,
  html[data-theme=system] .kpi-card.total .card-icon,
  html[data-theme=system] .kpi-card.total .balance-icon,
  html[data-theme=system] .kpi-card.total .stat-icon mat-icon, html[data-theme=system] .kpi-card.income .kpi-icon,
  html[data-theme=system] .kpi-card.income .card-icon,
  html[data-theme=system] .kpi-card.income .balance-icon,
  html[data-theme=system] .kpi-card.income .stat-icon mat-icon, html[data-theme=system] .kpi-card.profit .kpi-icon,
  html[data-theme=system] .kpi-card.profit .card-icon,
  html[data-theme=system] .kpi-card.profit .balance-icon,
  html[data-theme=system] .kpi-card.profit .stat-icon mat-icon, html[data-theme=system] .kpi-card.bonus .kpi-icon,
  html[data-theme=system] .kpi-card.bonus .card-icon,
  html[data-theme=system] .kpi-card.bonus .balance-icon,
  html[data-theme=system] .kpi-card.bonus .stat-icon mat-icon, html[data-theme=system] .kpi-card.tone-total .kpi-icon,
  html[data-theme=system] .kpi-card.tone-total .card-icon,
  html[data-theme=system] .kpi-card.tone-total .balance-icon,
  html[data-theme=system] .kpi-card.tone-total .stat-icon mat-icon, html[data-theme=system] .kpi-card.total-card .kpi-icon,
  html[data-theme=system] .kpi-card.total-card .card-icon,
  html[data-theme=system] .kpi-card.total-card .balance-icon,
  html[data-theme=system] .kpi-card.total-card .stat-icon mat-icon, html[data-theme=system] .kpi-card.paid-amount .kpi-icon,
  html[data-theme=system] .kpi-card.paid-amount .card-icon,
  html[data-theme=system] .kpi-card.paid-amount .balance-icon,
  html[data-theme=system] .kpi-card.paid-amount .stat-icon mat-icon, html[data-theme=system] .kpi-card.healthy .kpi-icon,
  html[data-theme=system] .kpi-card.healthy .card-icon,
  html[data-theme=system] .kpi-card.healthy .balance-icon,
  html[data-theme=system] .kpi-card.healthy .stat-icon mat-icon, html[data-theme=system] .kpi-card.green .kpi-icon,
  html[data-theme=system] .kpi-card.green .card-icon,
  html[data-theme=system] .kpi-card.green .balance-icon,
  html[data-theme=system] .kpi-card.green .stat-icon mat-icon,
  html[data-theme=system] .summary-card.success .kpi-icon,
  html[data-theme=system] .summary-card.success .card-icon,
  html[data-theme=system] .summary-card.success .balance-icon,
  html[data-theme=system] .summary-card.success .stat-icon mat-icon,
  html[data-theme=system] .summary-card.positive .kpi-icon,
  html[data-theme=system] .summary-card.positive .card-icon,
  html[data-theme=system] .summary-card.positive .balance-icon,
  html[data-theme=system] .summary-card.positive .stat-icon mat-icon,
  html[data-theme=system] .summary-card.total .kpi-icon,
  html[data-theme=system] .summary-card.total .card-icon,
  html[data-theme=system] .summary-card.total .balance-icon,
  html[data-theme=system] .summary-card.total .stat-icon mat-icon,
  html[data-theme=system] .summary-card.income .kpi-icon,
  html[data-theme=system] .summary-card.income .card-icon,
  html[data-theme=system] .summary-card.income .balance-icon,
  html[data-theme=system] .summary-card.income .stat-icon mat-icon,
  html[data-theme=system] .summary-card.profit .kpi-icon,
  html[data-theme=system] .summary-card.profit .card-icon,
  html[data-theme=system] .summary-card.profit .balance-icon,
  html[data-theme=system] .summary-card.profit .stat-icon mat-icon,
  html[data-theme=system] .summary-card.bonus .kpi-icon,
  html[data-theme=system] .summary-card.bonus .card-icon,
  html[data-theme=system] .summary-card.bonus .balance-icon,
  html[data-theme=system] .summary-card.bonus .stat-icon mat-icon,
  html[data-theme=system] .summary-card.tone-total .kpi-icon,
  html[data-theme=system] .summary-card.tone-total .card-icon,
  html[data-theme=system] .summary-card.tone-total .balance-icon,
  html[data-theme=system] .summary-card.tone-total .stat-icon mat-icon,
  html[data-theme=system] .summary-card.total-card .kpi-icon,
  html[data-theme=system] .summary-card.total-card .card-icon,
  html[data-theme=system] .summary-card.total-card .balance-icon,
  html[data-theme=system] .summary-card.total-card .stat-icon mat-icon,
  html[data-theme=system] .summary-card.paid-amount .kpi-icon,
  html[data-theme=system] .summary-card.paid-amount .card-icon,
  html[data-theme=system] .summary-card.paid-amount .balance-icon,
  html[data-theme=system] .summary-card.paid-amount .stat-icon mat-icon,
  html[data-theme=system] .summary-card.healthy .kpi-icon,
  html[data-theme=system] .summary-card.healthy .card-icon,
  html[data-theme=system] .summary-card.healthy .balance-icon,
  html[data-theme=system] .summary-card.healthy .stat-icon mat-icon,
  html[data-theme=system] .summary-card.green .kpi-icon,
  html[data-theme=system] .summary-card.green .card-icon,
  html[data-theme=system] .summary-card.green .balance-icon,
  html[data-theme=system] .summary-card.green .stat-icon mat-icon,
  html[data-theme=system] .financial-card.success .kpi-icon,
  html[data-theme=system] .financial-card.success .card-icon,
  html[data-theme=system] .financial-card.success .balance-icon,
  html[data-theme=system] .financial-card.success .stat-icon mat-icon,
  html[data-theme=system] .financial-card.positive .kpi-icon,
  html[data-theme=system] .financial-card.positive .card-icon,
  html[data-theme=system] .financial-card.positive .balance-icon,
  html[data-theme=system] .financial-card.positive .stat-icon mat-icon,
  html[data-theme=system] .financial-card.total .kpi-icon,
  html[data-theme=system] .financial-card.total .card-icon,
  html[data-theme=system] .financial-card.total .balance-icon,
  html[data-theme=system] .financial-card.total .stat-icon mat-icon,
  html[data-theme=system] .financial-card.income .kpi-icon,
  html[data-theme=system] .financial-card.income .card-icon,
  html[data-theme=system] .financial-card.income .balance-icon,
  html[data-theme=system] .financial-card.income .stat-icon mat-icon,
  html[data-theme=system] .financial-card.profit .kpi-icon,
  html[data-theme=system] .financial-card.profit .card-icon,
  html[data-theme=system] .financial-card.profit .balance-icon,
  html[data-theme=system] .financial-card.profit .stat-icon mat-icon,
  html[data-theme=system] .financial-card.bonus .kpi-icon,
  html[data-theme=system] .financial-card.bonus .card-icon,
  html[data-theme=system] .financial-card.bonus .balance-icon,
  html[data-theme=system] .financial-card.bonus .stat-icon mat-icon,
  html[data-theme=system] .financial-card.tone-total .kpi-icon,
  html[data-theme=system] .financial-card.tone-total .card-icon,
  html[data-theme=system] .financial-card.tone-total .balance-icon,
  html[data-theme=system] .financial-card.tone-total .stat-icon mat-icon,
  html[data-theme=system] .financial-card.total-card .kpi-icon,
  html[data-theme=system] .financial-card.total-card .card-icon,
  html[data-theme=system] .financial-card.total-card .balance-icon,
  html[data-theme=system] .financial-card.total-card .stat-icon mat-icon,
  html[data-theme=system] .financial-card.paid-amount .kpi-icon,
  html[data-theme=system] .financial-card.paid-amount .card-icon,
  html[data-theme=system] .financial-card.paid-amount .balance-icon,
  html[data-theme=system] .financial-card.paid-amount .stat-icon mat-icon,
  html[data-theme=system] .financial-card.healthy .kpi-icon,
  html[data-theme=system] .financial-card.healthy .card-icon,
  html[data-theme=system] .financial-card.healthy .balance-icon,
  html[data-theme=system] .financial-card.healthy .stat-icon mat-icon,
  html[data-theme=system] .financial-card.green .kpi-icon,
  html[data-theme=system] .financial-card.green .card-icon,
  html[data-theme=system] .financial-card.green .balance-icon,
  html[data-theme=system] .financial-card.green .stat-icon mat-icon,
  html[data-theme=system] .stat-card.success .kpi-icon,
  html[data-theme=system] .stat-card.success .card-icon,
  html[data-theme=system] .stat-card.success .balance-icon,
  html[data-theme=system] .stat-card.success .stat-icon mat-icon,
  html[data-theme=system] .stat-card.positive .kpi-icon,
  html[data-theme=system] .stat-card.positive .card-icon,
  html[data-theme=system] .stat-card.positive .balance-icon,
  html[data-theme=system] .stat-card.positive .stat-icon mat-icon,
  html[data-theme=system] .stat-card.total .kpi-icon,
  html[data-theme=system] .stat-card.total .card-icon,
  html[data-theme=system] .stat-card.total .balance-icon,
  html[data-theme=system] .stat-card.total .stat-icon mat-icon,
  html[data-theme=system] .stat-card.income .kpi-icon,
  html[data-theme=system] .stat-card.income .card-icon,
  html[data-theme=system] .stat-card.income .balance-icon,
  html[data-theme=system] .stat-card.income .stat-icon mat-icon,
  html[data-theme=system] .stat-card.profit .kpi-icon,
  html[data-theme=system] .stat-card.profit .card-icon,
  html[data-theme=system] .stat-card.profit .balance-icon,
  html[data-theme=system] .stat-card.profit .stat-icon mat-icon,
  html[data-theme=system] .stat-card.bonus .kpi-icon,
  html[data-theme=system] .stat-card.bonus .card-icon,
  html[data-theme=system] .stat-card.bonus .balance-icon,
  html[data-theme=system] .stat-card.bonus .stat-icon mat-icon,
  html[data-theme=system] .stat-card.tone-total .kpi-icon,
  html[data-theme=system] .stat-card.tone-total .card-icon,
  html[data-theme=system] .stat-card.tone-total .balance-icon,
  html[data-theme=system] .stat-card.tone-total .stat-icon mat-icon,
  html[data-theme=system] .stat-card.total-card .kpi-icon,
  html[data-theme=system] .stat-card.total-card .card-icon,
  html[data-theme=system] .stat-card.total-card .balance-icon,
  html[data-theme=system] .stat-card.total-card .stat-icon mat-icon,
  html[data-theme=system] .stat-card.paid-amount .kpi-icon,
  html[data-theme=system] .stat-card.paid-amount .card-icon,
  html[data-theme=system] .stat-card.paid-amount .balance-icon,
  html[data-theme=system] .stat-card.paid-amount .stat-icon mat-icon,
  html[data-theme=system] .stat-card.healthy .kpi-icon,
  html[data-theme=system] .stat-card.healthy .card-icon,
  html[data-theme=system] .stat-card.healthy .balance-icon,
  html[data-theme=system] .stat-card.healthy .stat-icon mat-icon,
  html[data-theme=system] .stat-card.green .kpi-icon,
  html[data-theme=system] .stat-card.green .card-icon,
  html[data-theme=system] .stat-card.green .balance-icon,
  html[data-theme=system] .stat-card.green .stat-icon mat-icon,
  html[data-theme=system] .balance-card.success .kpi-icon,
  html[data-theme=system] .balance-card.success .card-icon,
  html[data-theme=system] .balance-card.success .balance-icon,
  html[data-theme=system] .balance-card.success .stat-icon mat-icon,
  html[data-theme=system] .balance-card.positive .kpi-icon,
  html[data-theme=system] .balance-card.positive .card-icon,
  html[data-theme=system] .balance-card.positive .balance-icon,
  html[data-theme=system] .balance-card.positive .stat-icon mat-icon,
  html[data-theme=system] .balance-card.total .kpi-icon,
  html[data-theme=system] .balance-card.total .card-icon,
  html[data-theme=system] .balance-card.total .balance-icon,
  html[data-theme=system] .balance-card.total .stat-icon mat-icon,
  html[data-theme=system] .balance-card.income .kpi-icon,
  html[data-theme=system] .balance-card.income .card-icon,
  html[data-theme=system] .balance-card.income .balance-icon,
  html[data-theme=system] .balance-card.income .stat-icon mat-icon,
  html[data-theme=system] .balance-card.profit .kpi-icon,
  html[data-theme=system] .balance-card.profit .card-icon,
  html[data-theme=system] .balance-card.profit .balance-icon,
  html[data-theme=system] .balance-card.profit .stat-icon mat-icon,
  html[data-theme=system] .balance-card.bonus .kpi-icon,
  html[data-theme=system] .balance-card.bonus .card-icon,
  html[data-theme=system] .balance-card.bonus .balance-icon,
  html[data-theme=system] .balance-card.bonus .stat-icon mat-icon,
  html[data-theme=system] .balance-card.tone-total .kpi-icon,
  html[data-theme=system] .balance-card.tone-total .card-icon,
  html[data-theme=system] .balance-card.tone-total .balance-icon,
  html[data-theme=system] .balance-card.tone-total .stat-icon mat-icon,
  html[data-theme=system] .balance-card.total-card .kpi-icon,
  html[data-theme=system] .balance-card.total-card .card-icon,
  html[data-theme=system] .balance-card.total-card .balance-icon,
  html[data-theme=system] .balance-card.total-card .stat-icon mat-icon,
  html[data-theme=system] .balance-card.paid-amount .kpi-icon,
  html[data-theme=system] .balance-card.paid-amount .card-icon,
  html[data-theme=system] .balance-card.paid-amount .balance-icon,
  html[data-theme=system] .balance-card.paid-amount .stat-icon mat-icon,
  html[data-theme=system] .balance-card.healthy .kpi-icon,
  html[data-theme=system] .balance-card.healthy .card-icon,
  html[data-theme=system] .balance-card.healthy .balance-icon,
  html[data-theme=system] .balance-card.healthy .stat-icon mat-icon,
  html[data-theme=system] .balance-card.green .kpi-icon,
  html[data-theme=system] .balance-card.green .card-icon,
  html[data-theme=system] .balance-card.green .balance-icon,
  html[data-theme=system] .balance-card.green .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.success .kpi-icon,
  html[data-theme=system] .preview-kpi-card.success .card-icon,
  html[data-theme=system] .preview-kpi-card.success .balance-icon,
  html[data-theme=system] .preview-kpi-card.success .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.positive .kpi-icon,
  html[data-theme=system] .preview-kpi-card.positive .card-icon,
  html[data-theme=system] .preview-kpi-card.positive .balance-icon,
  html[data-theme=system] .preview-kpi-card.positive .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.total .kpi-icon,
  html[data-theme=system] .preview-kpi-card.total .card-icon,
  html[data-theme=system] .preview-kpi-card.total .balance-icon,
  html[data-theme=system] .preview-kpi-card.total .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.income .kpi-icon,
  html[data-theme=system] .preview-kpi-card.income .card-icon,
  html[data-theme=system] .preview-kpi-card.income .balance-icon,
  html[data-theme=system] .preview-kpi-card.income .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.profit .kpi-icon,
  html[data-theme=system] .preview-kpi-card.profit .card-icon,
  html[data-theme=system] .preview-kpi-card.profit .balance-icon,
  html[data-theme=system] .preview-kpi-card.profit .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.bonus .kpi-icon,
  html[data-theme=system] .preview-kpi-card.bonus .card-icon,
  html[data-theme=system] .preview-kpi-card.bonus .balance-icon,
  html[data-theme=system] .preview-kpi-card.bonus .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.tone-total .kpi-icon,
  html[data-theme=system] .preview-kpi-card.tone-total .card-icon,
  html[data-theme=system] .preview-kpi-card.tone-total .balance-icon,
  html[data-theme=system] .preview-kpi-card.tone-total .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.total-card .kpi-icon,
  html[data-theme=system] .preview-kpi-card.total-card .card-icon,
  html[data-theme=system] .preview-kpi-card.total-card .balance-icon,
  html[data-theme=system] .preview-kpi-card.total-card .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.paid-amount .kpi-icon,
  html[data-theme=system] .preview-kpi-card.paid-amount .card-icon,
  html[data-theme=system] .preview-kpi-card.paid-amount .balance-icon,
  html[data-theme=system] .preview-kpi-card.paid-amount .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.healthy .kpi-icon,
  html[data-theme=system] .preview-kpi-card.healthy .card-icon,
  html[data-theme=system] .preview-kpi-card.healthy .balance-icon,
  html[data-theme=system] .preview-kpi-card.healthy .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.green .kpi-icon,
  html[data-theme=system] .preview-kpi-card.green .card-icon,
  html[data-theme=system] .preview-kpi-card.green .balance-icon,
  html[data-theme=system] .preview-kpi-card.green .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.success .kpi-icon,
  html[data-theme=system] .mat-mdc-card.success .card-icon,
  html[data-theme=system] .mat-mdc-card.success .balance-icon,
  html[data-theme=system] .mat-mdc-card.success .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.positive .kpi-icon,
  html[data-theme=system] .mat-mdc-card.positive .card-icon,
  html[data-theme=system] .mat-mdc-card.positive .balance-icon,
  html[data-theme=system] .mat-mdc-card.positive .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.total .kpi-icon,
  html[data-theme=system] .mat-mdc-card.total .card-icon,
  html[data-theme=system] .mat-mdc-card.total .balance-icon,
  html[data-theme=system] .mat-mdc-card.total .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.income .kpi-icon,
  html[data-theme=system] .mat-mdc-card.income .card-icon,
  html[data-theme=system] .mat-mdc-card.income .balance-icon,
  html[data-theme=system] .mat-mdc-card.income .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.profit .kpi-icon,
  html[data-theme=system] .mat-mdc-card.profit .card-icon,
  html[data-theme=system] .mat-mdc-card.profit .balance-icon,
  html[data-theme=system] .mat-mdc-card.profit .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.bonus .kpi-icon,
  html[data-theme=system] .mat-mdc-card.bonus .card-icon,
  html[data-theme=system] .mat-mdc-card.bonus .balance-icon,
  html[data-theme=system] .mat-mdc-card.bonus .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.tone-total .kpi-icon,
  html[data-theme=system] .mat-mdc-card.tone-total .card-icon,
  html[data-theme=system] .mat-mdc-card.tone-total .balance-icon,
  html[data-theme=system] .mat-mdc-card.tone-total .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.total-card .kpi-icon,
  html[data-theme=system] .mat-mdc-card.total-card .card-icon,
  html[data-theme=system] .mat-mdc-card.total-card .balance-icon,
  html[data-theme=system] .mat-mdc-card.total-card .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.paid-amount .kpi-icon,
  html[data-theme=system] .mat-mdc-card.paid-amount .card-icon,
  html[data-theme=system] .mat-mdc-card.paid-amount .balance-icon,
  html[data-theme=system] .mat-mdc-card.paid-amount .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.healthy .kpi-icon,
  html[data-theme=system] .mat-mdc-card.healthy .card-icon,
  html[data-theme=system] .mat-mdc-card.healthy .balance-icon,
  html[data-theme=system] .mat-mdc-card.healthy .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.green .kpi-icon,
  html[data-theme=system] .mat-mdc-card.green .card-icon,
  html[data-theme=system] .mat-mdc-card.green .balance-icon,
  html[data-theme=system] .mat-mdc-card.green .stat-icon mat-icon {
    color: var(--color-success) !important;
  }
  html[data-theme=system] .kpi-card.success .stat-icon, html[data-theme=system] .kpi-card.positive .stat-icon, html[data-theme=system] .kpi-card.total .stat-icon, html[data-theme=system] .kpi-card.income .stat-icon, html[data-theme=system] .kpi-card.profit .stat-icon, html[data-theme=system] .kpi-card.bonus .stat-icon, html[data-theme=system] .kpi-card.tone-total .stat-icon, html[data-theme=system] .kpi-card.total-card .stat-icon, html[data-theme=system] .kpi-card.paid-amount .stat-icon, html[data-theme=system] .kpi-card.healthy .stat-icon, html[data-theme=system] .kpi-card.green .stat-icon,
  html[data-theme=system] .summary-card.success .stat-icon,
  html[data-theme=system] .summary-card.positive .stat-icon,
  html[data-theme=system] .summary-card.total .stat-icon,
  html[data-theme=system] .summary-card.income .stat-icon,
  html[data-theme=system] .summary-card.profit .stat-icon,
  html[data-theme=system] .summary-card.bonus .stat-icon,
  html[data-theme=system] .summary-card.tone-total .stat-icon,
  html[data-theme=system] .summary-card.total-card .stat-icon,
  html[data-theme=system] .summary-card.paid-amount .stat-icon,
  html[data-theme=system] .summary-card.healthy .stat-icon,
  html[data-theme=system] .summary-card.green .stat-icon,
  html[data-theme=system] .financial-card.success .stat-icon,
  html[data-theme=system] .financial-card.positive .stat-icon,
  html[data-theme=system] .financial-card.total .stat-icon,
  html[data-theme=system] .financial-card.income .stat-icon,
  html[data-theme=system] .financial-card.profit .stat-icon,
  html[data-theme=system] .financial-card.bonus .stat-icon,
  html[data-theme=system] .financial-card.tone-total .stat-icon,
  html[data-theme=system] .financial-card.total-card .stat-icon,
  html[data-theme=system] .financial-card.paid-amount .stat-icon,
  html[data-theme=system] .financial-card.healthy .stat-icon,
  html[data-theme=system] .financial-card.green .stat-icon,
  html[data-theme=system] .stat-card.success .stat-icon,
  html[data-theme=system] .stat-card.positive .stat-icon,
  html[data-theme=system] .stat-card.total .stat-icon,
  html[data-theme=system] .stat-card.income .stat-icon,
  html[data-theme=system] .stat-card.profit .stat-icon,
  html[data-theme=system] .stat-card.bonus .stat-icon,
  html[data-theme=system] .stat-card.tone-total .stat-icon,
  html[data-theme=system] .stat-card.total-card .stat-icon,
  html[data-theme=system] .stat-card.paid-amount .stat-icon,
  html[data-theme=system] .stat-card.healthy .stat-icon,
  html[data-theme=system] .stat-card.green .stat-icon,
  html[data-theme=system] .balance-card.success .stat-icon,
  html[data-theme=system] .balance-card.positive .stat-icon,
  html[data-theme=system] .balance-card.total .stat-icon,
  html[data-theme=system] .balance-card.income .stat-icon,
  html[data-theme=system] .balance-card.profit .stat-icon,
  html[data-theme=system] .balance-card.bonus .stat-icon,
  html[data-theme=system] .balance-card.tone-total .stat-icon,
  html[data-theme=system] .balance-card.total-card .stat-icon,
  html[data-theme=system] .balance-card.paid-amount .stat-icon,
  html[data-theme=system] .balance-card.healthy .stat-icon,
  html[data-theme=system] .balance-card.green .stat-icon,
  html[data-theme=system] .preview-kpi-card.success .stat-icon,
  html[data-theme=system] .preview-kpi-card.positive .stat-icon,
  html[data-theme=system] .preview-kpi-card.total .stat-icon,
  html[data-theme=system] .preview-kpi-card.income .stat-icon,
  html[data-theme=system] .preview-kpi-card.profit .stat-icon,
  html[data-theme=system] .preview-kpi-card.bonus .stat-icon,
  html[data-theme=system] .preview-kpi-card.tone-total .stat-icon,
  html[data-theme=system] .preview-kpi-card.total-card .stat-icon,
  html[data-theme=system] .preview-kpi-card.paid-amount .stat-icon,
  html[data-theme=system] .preview-kpi-card.healthy .stat-icon,
  html[data-theme=system] .preview-kpi-card.green .stat-icon,
  html[data-theme=system] .mat-mdc-card.success .stat-icon,
  html[data-theme=system] .mat-mdc-card.positive .stat-icon,
  html[data-theme=system] .mat-mdc-card.total .stat-icon,
  html[data-theme=system] .mat-mdc-card.income .stat-icon,
  html[data-theme=system] .mat-mdc-card.profit .stat-icon,
  html[data-theme=system] .mat-mdc-card.bonus .stat-icon,
  html[data-theme=system] .mat-mdc-card.tone-total .stat-icon,
  html[data-theme=system] .mat-mdc-card.total-card .stat-icon,
  html[data-theme=system] .mat-mdc-card.paid-amount .stat-icon,
  html[data-theme=system] .mat-mdc-card.healthy .stat-icon,
  html[data-theme=system] .mat-mdc-card.green .stat-icon {
    background: rgba(52, 211, 153, 0.2) !important;
    border: 1px solid rgba(52, 211, 153, 0.4) !important;
  }
  html[data-theme=system] .kpi-card.warning, html[data-theme=system] .kpi-card.cash, html[data-theme=system] .kpi-card.outstanding, html[data-theme=system] .kpi-card.unpaid, html[data-theme=system] .kpi-card.pending, html[data-theme=system] .kpi-card.pending-card, html[data-theme=system] .kpi-card.overdue-risk, html[data-theme=system] .kpi-card.tone-cash, html[data-theme=system] .kpi-card.watch, html[data-theme=system] .kpi-card.amber,
  html[data-theme=system] .summary-card.warning,
  html[data-theme=system] .summary-card.cash,
  html[data-theme=system] .summary-card.outstanding,
  html[data-theme=system] .summary-card.unpaid,
  html[data-theme=system] .summary-card.pending,
  html[data-theme=system] .summary-card.pending-card,
  html[data-theme=system] .summary-card.overdue-risk,
  html[data-theme=system] .summary-card.tone-cash,
  html[data-theme=system] .summary-card.watch,
  html[data-theme=system] .summary-card.amber,
  html[data-theme=system] .financial-card.warning,
  html[data-theme=system] .financial-card.cash,
  html[data-theme=system] .financial-card.outstanding,
  html[data-theme=system] .financial-card.unpaid,
  html[data-theme=system] .financial-card.pending,
  html[data-theme=system] .financial-card.pending-card,
  html[data-theme=system] .financial-card.overdue-risk,
  html[data-theme=system] .financial-card.tone-cash,
  html[data-theme=system] .financial-card.watch,
  html[data-theme=system] .financial-card.amber,
  html[data-theme=system] .stat-card.warning,
  html[data-theme=system] .stat-card.cash,
  html[data-theme=system] .stat-card.outstanding,
  html[data-theme=system] .stat-card.unpaid,
  html[data-theme=system] .stat-card.pending,
  html[data-theme=system] .stat-card.pending-card,
  html[data-theme=system] .stat-card.overdue-risk,
  html[data-theme=system] .stat-card.tone-cash,
  html[data-theme=system] .stat-card.watch,
  html[data-theme=system] .stat-card.amber,
  html[data-theme=system] .balance-card.warning,
  html[data-theme=system] .balance-card.cash,
  html[data-theme=system] .balance-card.outstanding,
  html[data-theme=system] .balance-card.unpaid,
  html[data-theme=system] .balance-card.pending,
  html[data-theme=system] .balance-card.pending-card,
  html[data-theme=system] .balance-card.overdue-risk,
  html[data-theme=system] .balance-card.tone-cash,
  html[data-theme=system] .balance-card.watch,
  html[data-theme=system] .balance-card.amber,
  html[data-theme=system] .preview-kpi-card.warning,
  html[data-theme=system] .preview-kpi-card.cash,
  html[data-theme=system] .preview-kpi-card.outstanding,
  html[data-theme=system] .preview-kpi-card.unpaid,
  html[data-theme=system] .preview-kpi-card.pending,
  html[data-theme=system] .preview-kpi-card.pending-card,
  html[data-theme=system] .preview-kpi-card.overdue-risk,
  html[data-theme=system] .preview-kpi-card.tone-cash,
  html[data-theme=system] .preview-kpi-card.watch,
  html[data-theme=system] .preview-kpi-card.amber,
  html[data-theme=system] .mat-mdc-card.warning,
  html[data-theme=system] .mat-mdc-card.cash,
  html[data-theme=system] .mat-mdc-card.outstanding,
  html[data-theme=system] .mat-mdc-card.unpaid,
  html[data-theme=system] .mat-mdc-card.pending,
  html[data-theme=system] .mat-mdc-card.pending-card,
  html[data-theme=system] .mat-mdc-card.overdue-risk,
  html[data-theme=system] .mat-mdc-card.tone-cash,
  html[data-theme=system] .mat-mdc-card.watch,
  html[data-theme=system] .mat-mdc-card.amber {
    border-top: 4px solid var(--color-warning) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
  }
  html[data-theme=system] .kpi-card.warning .kpi-icon,
  html[data-theme=system] .kpi-card.warning .card-icon,
  html[data-theme=system] .kpi-card.warning .balance-icon,
  html[data-theme=system] .kpi-card.warning .stat-icon mat-icon, html[data-theme=system] .kpi-card.cash .kpi-icon,
  html[data-theme=system] .kpi-card.cash .card-icon,
  html[data-theme=system] .kpi-card.cash .balance-icon,
  html[data-theme=system] .kpi-card.cash .stat-icon mat-icon, html[data-theme=system] .kpi-card.outstanding .kpi-icon,
  html[data-theme=system] .kpi-card.outstanding .card-icon,
  html[data-theme=system] .kpi-card.outstanding .balance-icon,
  html[data-theme=system] .kpi-card.outstanding .stat-icon mat-icon, html[data-theme=system] .kpi-card.unpaid .kpi-icon,
  html[data-theme=system] .kpi-card.unpaid .card-icon,
  html[data-theme=system] .kpi-card.unpaid .balance-icon,
  html[data-theme=system] .kpi-card.unpaid .stat-icon mat-icon, html[data-theme=system] .kpi-card.pending .kpi-icon,
  html[data-theme=system] .kpi-card.pending .card-icon,
  html[data-theme=system] .kpi-card.pending .balance-icon,
  html[data-theme=system] .kpi-card.pending .stat-icon mat-icon, html[data-theme=system] .kpi-card.pending-card .kpi-icon,
  html[data-theme=system] .kpi-card.pending-card .card-icon,
  html[data-theme=system] .kpi-card.pending-card .balance-icon,
  html[data-theme=system] .kpi-card.pending-card .stat-icon mat-icon, html[data-theme=system] .kpi-card.overdue-risk .kpi-icon,
  html[data-theme=system] .kpi-card.overdue-risk .card-icon,
  html[data-theme=system] .kpi-card.overdue-risk .balance-icon,
  html[data-theme=system] .kpi-card.overdue-risk .stat-icon mat-icon, html[data-theme=system] .kpi-card.tone-cash .kpi-icon,
  html[data-theme=system] .kpi-card.tone-cash .card-icon,
  html[data-theme=system] .kpi-card.tone-cash .balance-icon,
  html[data-theme=system] .kpi-card.tone-cash .stat-icon mat-icon, html[data-theme=system] .kpi-card.watch .kpi-icon,
  html[data-theme=system] .kpi-card.watch .card-icon,
  html[data-theme=system] .kpi-card.watch .balance-icon,
  html[data-theme=system] .kpi-card.watch .stat-icon mat-icon, html[data-theme=system] .kpi-card.amber .kpi-icon,
  html[data-theme=system] .kpi-card.amber .card-icon,
  html[data-theme=system] .kpi-card.amber .balance-icon,
  html[data-theme=system] .kpi-card.amber .stat-icon mat-icon,
  html[data-theme=system] .summary-card.warning .kpi-icon,
  html[data-theme=system] .summary-card.warning .card-icon,
  html[data-theme=system] .summary-card.warning .balance-icon,
  html[data-theme=system] .summary-card.warning .stat-icon mat-icon,
  html[data-theme=system] .summary-card.cash .kpi-icon,
  html[data-theme=system] .summary-card.cash .card-icon,
  html[data-theme=system] .summary-card.cash .balance-icon,
  html[data-theme=system] .summary-card.cash .stat-icon mat-icon,
  html[data-theme=system] .summary-card.outstanding .kpi-icon,
  html[data-theme=system] .summary-card.outstanding .card-icon,
  html[data-theme=system] .summary-card.outstanding .balance-icon,
  html[data-theme=system] .summary-card.outstanding .stat-icon mat-icon,
  html[data-theme=system] .summary-card.unpaid .kpi-icon,
  html[data-theme=system] .summary-card.unpaid .card-icon,
  html[data-theme=system] .summary-card.unpaid .balance-icon,
  html[data-theme=system] .summary-card.unpaid .stat-icon mat-icon,
  html[data-theme=system] .summary-card.pending .kpi-icon,
  html[data-theme=system] .summary-card.pending .card-icon,
  html[data-theme=system] .summary-card.pending .balance-icon,
  html[data-theme=system] .summary-card.pending .stat-icon mat-icon,
  html[data-theme=system] .summary-card.pending-card .kpi-icon,
  html[data-theme=system] .summary-card.pending-card .card-icon,
  html[data-theme=system] .summary-card.pending-card .balance-icon,
  html[data-theme=system] .summary-card.pending-card .stat-icon mat-icon,
  html[data-theme=system] .summary-card.overdue-risk .kpi-icon,
  html[data-theme=system] .summary-card.overdue-risk .card-icon,
  html[data-theme=system] .summary-card.overdue-risk .balance-icon,
  html[data-theme=system] .summary-card.overdue-risk .stat-icon mat-icon,
  html[data-theme=system] .summary-card.tone-cash .kpi-icon,
  html[data-theme=system] .summary-card.tone-cash .card-icon,
  html[data-theme=system] .summary-card.tone-cash .balance-icon,
  html[data-theme=system] .summary-card.tone-cash .stat-icon mat-icon,
  html[data-theme=system] .summary-card.watch .kpi-icon,
  html[data-theme=system] .summary-card.watch .card-icon,
  html[data-theme=system] .summary-card.watch .balance-icon,
  html[data-theme=system] .summary-card.watch .stat-icon mat-icon,
  html[data-theme=system] .summary-card.amber .kpi-icon,
  html[data-theme=system] .summary-card.amber .card-icon,
  html[data-theme=system] .summary-card.amber .balance-icon,
  html[data-theme=system] .summary-card.amber .stat-icon mat-icon,
  html[data-theme=system] .financial-card.warning .kpi-icon,
  html[data-theme=system] .financial-card.warning .card-icon,
  html[data-theme=system] .financial-card.warning .balance-icon,
  html[data-theme=system] .financial-card.warning .stat-icon mat-icon,
  html[data-theme=system] .financial-card.cash .kpi-icon,
  html[data-theme=system] .financial-card.cash .card-icon,
  html[data-theme=system] .financial-card.cash .balance-icon,
  html[data-theme=system] .financial-card.cash .stat-icon mat-icon,
  html[data-theme=system] .financial-card.outstanding .kpi-icon,
  html[data-theme=system] .financial-card.outstanding .card-icon,
  html[data-theme=system] .financial-card.outstanding .balance-icon,
  html[data-theme=system] .financial-card.outstanding .stat-icon mat-icon,
  html[data-theme=system] .financial-card.unpaid .kpi-icon,
  html[data-theme=system] .financial-card.unpaid .card-icon,
  html[data-theme=system] .financial-card.unpaid .balance-icon,
  html[data-theme=system] .financial-card.unpaid .stat-icon mat-icon,
  html[data-theme=system] .financial-card.pending .kpi-icon,
  html[data-theme=system] .financial-card.pending .card-icon,
  html[data-theme=system] .financial-card.pending .balance-icon,
  html[data-theme=system] .financial-card.pending .stat-icon mat-icon,
  html[data-theme=system] .financial-card.pending-card .kpi-icon,
  html[data-theme=system] .financial-card.pending-card .card-icon,
  html[data-theme=system] .financial-card.pending-card .balance-icon,
  html[data-theme=system] .financial-card.pending-card .stat-icon mat-icon,
  html[data-theme=system] .financial-card.overdue-risk .kpi-icon,
  html[data-theme=system] .financial-card.overdue-risk .card-icon,
  html[data-theme=system] .financial-card.overdue-risk .balance-icon,
  html[data-theme=system] .financial-card.overdue-risk .stat-icon mat-icon,
  html[data-theme=system] .financial-card.tone-cash .kpi-icon,
  html[data-theme=system] .financial-card.tone-cash .card-icon,
  html[data-theme=system] .financial-card.tone-cash .balance-icon,
  html[data-theme=system] .financial-card.tone-cash .stat-icon mat-icon,
  html[data-theme=system] .financial-card.watch .kpi-icon,
  html[data-theme=system] .financial-card.watch .card-icon,
  html[data-theme=system] .financial-card.watch .balance-icon,
  html[data-theme=system] .financial-card.watch .stat-icon mat-icon,
  html[data-theme=system] .financial-card.amber .kpi-icon,
  html[data-theme=system] .financial-card.amber .card-icon,
  html[data-theme=system] .financial-card.amber .balance-icon,
  html[data-theme=system] .financial-card.amber .stat-icon mat-icon,
  html[data-theme=system] .stat-card.warning .kpi-icon,
  html[data-theme=system] .stat-card.warning .card-icon,
  html[data-theme=system] .stat-card.warning .balance-icon,
  html[data-theme=system] .stat-card.warning .stat-icon mat-icon,
  html[data-theme=system] .stat-card.cash .kpi-icon,
  html[data-theme=system] .stat-card.cash .card-icon,
  html[data-theme=system] .stat-card.cash .balance-icon,
  html[data-theme=system] .stat-card.cash .stat-icon mat-icon,
  html[data-theme=system] .stat-card.outstanding .kpi-icon,
  html[data-theme=system] .stat-card.outstanding .card-icon,
  html[data-theme=system] .stat-card.outstanding .balance-icon,
  html[data-theme=system] .stat-card.outstanding .stat-icon mat-icon,
  html[data-theme=system] .stat-card.unpaid .kpi-icon,
  html[data-theme=system] .stat-card.unpaid .card-icon,
  html[data-theme=system] .stat-card.unpaid .balance-icon,
  html[data-theme=system] .stat-card.unpaid .stat-icon mat-icon,
  html[data-theme=system] .stat-card.pending .kpi-icon,
  html[data-theme=system] .stat-card.pending .card-icon,
  html[data-theme=system] .stat-card.pending .balance-icon,
  html[data-theme=system] .stat-card.pending .stat-icon mat-icon,
  html[data-theme=system] .stat-card.pending-card .kpi-icon,
  html[data-theme=system] .stat-card.pending-card .card-icon,
  html[data-theme=system] .stat-card.pending-card .balance-icon,
  html[data-theme=system] .stat-card.pending-card .stat-icon mat-icon,
  html[data-theme=system] .stat-card.overdue-risk .kpi-icon,
  html[data-theme=system] .stat-card.overdue-risk .card-icon,
  html[data-theme=system] .stat-card.overdue-risk .balance-icon,
  html[data-theme=system] .stat-card.overdue-risk .stat-icon mat-icon,
  html[data-theme=system] .stat-card.tone-cash .kpi-icon,
  html[data-theme=system] .stat-card.tone-cash .card-icon,
  html[data-theme=system] .stat-card.tone-cash .balance-icon,
  html[data-theme=system] .stat-card.tone-cash .stat-icon mat-icon,
  html[data-theme=system] .stat-card.watch .kpi-icon,
  html[data-theme=system] .stat-card.watch .card-icon,
  html[data-theme=system] .stat-card.watch .balance-icon,
  html[data-theme=system] .stat-card.watch .stat-icon mat-icon,
  html[data-theme=system] .stat-card.amber .kpi-icon,
  html[data-theme=system] .stat-card.amber .card-icon,
  html[data-theme=system] .stat-card.amber .balance-icon,
  html[data-theme=system] .stat-card.amber .stat-icon mat-icon,
  html[data-theme=system] .balance-card.warning .kpi-icon,
  html[data-theme=system] .balance-card.warning .card-icon,
  html[data-theme=system] .balance-card.warning .balance-icon,
  html[data-theme=system] .balance-card.warning .stat-icon mat-icon,
  html[data-theme=system] .balance-card.cash .kpi-icon,
  html[data-theme=system] .balance-card.cash .card-icon,
  html[data-theme=system] .balance-card.cash .balance-icon,
  html[data-theme=system] .balance-card.cash .stat-icon mat-icon,
  html[data-theme=system] .balance-card.outstanding .kpi-icon,
  html[data-theme=system] .balance-card.outstanding .card-icon,
  html[data-theme=system] .balance-card.outstanding .balance-icon,
  html[data-theme=system] .balance-card.outstanding .stat-icon mat-icon,
  html[data-theme=system] .balance-card.unpaid .kpi-icon,
  html[data-theme=system] .balance-card.unpaid .card-icon,
  html[data-theme=system] .balance-card.unpaid .balance-icon,
  html[data-theme=system] .balance-card.unpaid .stat-icon mat-icon,
  html[data-theme=system] .balance-card.pending .kpi-icon,
  html[data-theme=system] .balance-card.pending .card-icon,
  html[data-theme=system] .balance-card.pending .balance-icon,
  html[data-theme=system] .balance-card.pending .stat-icon mat-icon,
  html[data-theme=system] .balance-card.pending-card .kpi-icon,
  html[data-theme=system] .balance-card.pending-card .card-icon,
  html[data-theme=system] .balance-card.pending-card .balance-icon,
  html[data-theme=system] .balance-card.pending-card .stat-icon mat-icon,
  html[data-theme=system] .balance-card.overdue-risk .kpi-icon,
  html[data-theme=system] .balance-card.overdue-risk .card-icon,
  html[data-theme=system] .balance-card.overdue-risk .balance-icon,
  html[data-theme=system] .balance-card.overdue-risk .stat-icon mat-icon,
  html[data-theme=system] .balance-card.tone-cash .kpi-icon,
  html[data-theme=system] .balance-card.tone-cash .card-icon,
  html[data-theme=system] .balance-card.tone-cash .balance-icon,
  html[data-theme=system] .balance-card.tone-cash .stat-icon mat-icon,
  html[data-theme=system] .balance-card.watch .kpi-icon,
  html[data-theme=system] .balance-card.watch .card-icon,
  html[data-theme=system] .balance-card.watch .balance-icon,
  html[data-theme=system] .balance-card.watch .stat-icon mat-icon,
  html[data-theme=system] .balance-card.amber .kpi-icon,
  html[data-theme=system] .balance-card.amber .card-icon,
  html[data-theme=system] .balance-card.amber .balance-icon,
  html[data-theme=system] .balance-card.amber .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.warning .kpi-icon,
  html[data-theme=system] .preview-kpi-card.warning .card-icon,
  html[data-theme=system] .preview-kpi-card.warning .balance-icon,
  html[data-theme=system] .preview-kpi-card.warning .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.cash .kpi-icon,
  html[data-theme=system] .preview-kpi-card.cash .card-icon,
  html[data-theme=system] .preview-kpi-card.cash .balance-icon,
  html[data-theme=system] .preview-kpi-card.cash .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.outstanding .kpi-icon,
  html[data-theme=system] .preview-kpi-card.outstanding .card-icon,
  html[data-theme=system] .preview-kpi-card.outstanding .balance-icon,
  html[data-theme=system] .preview-kpi-card.outstanding .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.unpaid .kpi-icon,
  html[data-theme=system] .preview-kpi-card.unpaid .card-icon,
  html[data-theme=system] .preview-kpi-card.unpaid .balance-icon,
  html[data-theme=system] .preview-kpi-card.unpaid .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.pending .kpi-icon,
  html[data-theme=system] .preview-kpi-card.pending .card-icon,
  html[data-theme=system] .preview-kpi-card.pending .balance-icon,
  html[data-theme=system] .preview-kpi-card.pending .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.pending-card .kpi-icon,
  html[data-theme=system] .preview-kpi-card.pending-card .card-icon,
  html[data-theme=system] .preview-kpi-card.pending-card .balance-icon,
  html[data-theme=system] .preview-kpi-card.pending-card .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.overdue-risk .kpi-icon,
  html[data-theme=system] .preview-kpi-card.overdue-risk .card-icon,
  html[data-theme=system] .preview-kpi-card.overdue-risk .balance-icon,
  html[data-theme=system] .preview-kpi-card.overdue-risk .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.tone-cash .kpi-icon,
  html[data-theme=system] .preview-kpi-card.tone-cash .card-icon,
  html[data-theme=system] .preview-kpi-card.tone-cash .balance-icon,
  html[data-theme=system] .preview-kpi-card.tone-cash .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.watch .kpi-icon,
  html[data-theme=system] .preview-kpi-card.watch .card-icon,
  html[data-theme=system] .preview-kpi-card.watch .balance-icon,
  html[data-theme=system] .preview-kpi-card.watch .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.amber .kpi-icon,
  html[data-theme=system] .preview-kpi-card.amber .card-icon,
  html[data-theme=system] .preview-kpi-card.amber .balance-icon,
  html[data-theme=system] .preview-kpi-card.amber .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.warning .kpi-icon,
  html[data-theme=system] .mat-mdc-card.warning .card-icon,
  html[data-theme=system] .mat-mdc-card.warning .balance-icon,
  html[data-theme=system] .mat-mdc-card.warning .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.cash .kpi-icon,
  html[data-theme=system] .mat-mdc-card.cash .card-icon,
  html[data-theme=system] .mat-mdc-card.cash .balance-icon,
  html[data-theme=system] .mat-mdc-card.cash .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.outstanding .kpi-icon,
  html[data-theme=system] .mat-mdc-card.outstanding .card-icon,
  html[data-theme=system] .mat-mdc-card.outstanding .balance-icon,
  html[data-theme=system] .mat-mdc-card.outstanding .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.unpaid .kpi-icon,
  html[data-theme=system] .mat-mdc-card.unpaid .card-icon,
  html[data-theme=system] .mat-mdc-card.unpaid .balance-icon,
  html[data-theme=system] .mat-mdc-card.unpaid .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.pending .kpi-icon,
  html[data-theme=system] .mat-mdc-card.pending .card-icon,
  html[data-theme=system] .mat-mdc-card.pending .balance-icon,
  html[data-theme=system] .mat-mdc-card.pending .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.pending-card .kpi-icon,
  html[data-theme=system] .mat-mdc-card.pending-card .card-icon,
  html[data-theme=system] .mat-mdc-card.pending-card .balance-icon,
  html[data-theme=system] .mat-mdc-card.pending-card .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.overdue-risk .kpi-icon,
  html[data-theme=system] .mat-mdc-card.overdue-risk .card-icon,
  html[data-theme=system] .mat-mdc-card.overdue-risk .balance-icon,
  html[data-theme=system] .mat-mdc-card.overdue-risk .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.tone-cash .kpi-icon,
  html[data-theme=system] .mat-mdc-card.tone-cash .card-icon,
  html[data-theme=system] .mat-mdc-card.tone-cash .balance-icon,
  html[data-theme=system] .mat-mdc-card.tone-cash .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.watch .kpi-icon,
  html[data-theme=system] .mat-mdc-card.watch .card-icon,
  html[data-theme=system] .mat-mdc-card.watch .balance-icon,
  html[data-theme=system] .mat-mdc-card.watch .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.amber .kpi-icon,
  html[data-theme=system] .mat-mdc-card.amber .card-icon,
  html[data-theme=system] .mat-mdc-card.amber .balance-icon,
  html[data-theme=system] .mat-mdc-card.amber .stat-icon mat-icon {
    color: var(--color-warning) !important;
  }
  html[data-theme=system] .kpi-card.warning .stat-icon, html[data-theme=system] .kpi-card.cash .stat-icon, html[data-theme=system] .kpi-card.outstanding .stat-icon, html[data-theme=system] .kpi-card.unpaid .stat-icon, html[data-theme=system] .kpi-card.pending .stat-icon, html[data-theme=system] .kpi-card.pending-card .stat-icon, html[data-theme=system] .kpi-card.overdue-risk .stat-icon, html[data-theme=system] .kpi-card.tone-cash .stat-icon, html[data-theme=system] .kpi-card.watch .stat-icon, html[data-theme=system] .kpi-card.amber .stat-icon,
  html[data-theme=system] .summary-card.warning .stat-icon,
  html[data-theme=system] .summary-card.cash .stat-icon,
  html[data-theme=system] .summary-card.outstanding .stat-icon,
  html[data-theme=system] .summary-card.unpaid .stat-icon,
  html[data-theme=system] .summary-card.pending .stat-icon,
  html[data-theme=system] .summary-card.pending-card .stat-icon,
  html[data-theme=system] .summary-card.overdue-risk .stat-icon,
  html[data-theme=system] .summary-card.tone-cash .stat-icon,
  html[data-theme=system] .summary-card.watch .stat-icon,
  html[data-theme=system] .summary-card.amber .stat-icon,
  html[data-theme=system] .financial-card.warning .stat-icon,
  html[data-theme=system] .financial-card.cash .stat-icon,
  html[data-theme=system] .financial-card.outstanding .stat-icon,
  html[data-theme=system] .financial-card.unpaid .stat-icon,
  html[data-theme=system] .financial-card.pending .stat-icon,
  html[data-theme=system] .financial-card.pending-card .stat-icon,
  html[data-theme=system] .financial-card.overdue-risk .stat-icon,
  html[data-theme=system] .financial-card.tone-cash .stat-icon,
  html[data-theme=system] .financial-card.watch .stat-icon,
  html[data-theme=system] .financial-card.amber .stat-icon,
  html[data-theme=system] .stat-card.warning .stat-icon,
  html[data-theme=system] .stat-card.cash .stat-icon,
  html[data-theme=system] .stat-card.outstanding .stat-icon,
  html[data-theme=system] .stat-card.unpaid .stat-icon,
  html[data-theme=system] .stat-card.pending .stat-icon,
  html[data-theme=system] .stat-card.pending-card .stat-icon,
  html[data-theme=system] .stat-card.overdue-risk .stat-icon,
  html[data-theme=system] .stat-card.tone-cash .stat-icon,
  html[data-theme=system] .stat-card.watch .stat-icon,
  html[data-theme=system] .stat-card.amber .stat-icon,
  html[data-theme=system] .balance-card.warning .stat-icon,
  html[data-theme=system] .balance-card.cash .stat-icon,
  html[data-theme=system] .balance-card.outstanding .stat-icon,
  html[data-theme=system] .balance-card.unpaid .stat-icon,
  html[data-theme=system] .balance-card.pending .stat-icon,
  html[data-theme=system] .balance-card.pending-card .stat-icon,
  html[data-theme=system] .balance-card.overdue-risk .stat-icon,
  html[data-theme=system] .balance-card.tone-cash .stat-icon,
  html[data-theme=system] .balance-card.watch .stat-icon,
  html[data-theme=system] .balance-card.amber .stat-icon,
  html[data-theme=system] .preview-kpi-card.warning .stat-icon,
  html[data-theme=system] .preview-kpi-card.cash .stat-icon,
  html[data-theme=system] .preview-kpi-card.outstanding .stat-icon,
  html[data-theme=system] .preview-kpi-card.unpaid .stat-icon,
  html[data-theme=system] .preview-kpi-card.pending .stat-icon,
  html[data-theme=system] .preview-kpi-card.pending-card .stat-icon,
  html[data-theme=system] .preview-kpi-card.overdue-risk .stat-icon,
  html[data-theme=system] .preview-kpi-card.tone-cash .stat-icon,
  html[data-theme=system] .preview-kpi-card.watch .stat-icon,
  html[data-theme=system] .preview-kpi-card.amber .stat-icon,
  html[data-theme=system] .mat-mdc-card.warning .stat-icon,
  html[data-theme=system] .mat-mdc-card.cash .stat-icon,
  html[data-theme=system] .mat-mdc-card.outstanding .stat-icon,
  html[data-theme=system] .mat-mdc-card.unpaid .stat-icon,
  html[data-theme=system] .mat-mdc-card.pending .stat-icon,
  html[data-theme=system] .mat-mdc-card.pending-card .stat-icon,
  html[data-theme=system] .mat-mdc-card.overdue-risk .stat-icon,
  html[data-theme=system] .mat-mdc-card.tone-cash .stat-icon,
  html[data-theme=system] .mat-mdc-card.watch .stat-icon,
  html[data-theme=system] .mat-mdc-card.amber .stat-icon {
    background: rgba(251, 191, 36, 0.2) !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
  }
  html[data-theme=system] .kpi-card.danger, html[data-theme=system] .kpi-card.negative, html[data-theme=system] .kpi-card.expense, html[data-theme=system] .kpi-card.advances, html[data-theme=system] .kpi-card.overdue, html[data-theme=system] .kpi-card.critical, html[data-theme=system] .kpi-card.degraded, html[data-theme=system] .kpi-card.red,
  html[data-theme=system] .summary-card.danger,
  html[data-theme=system] .summary-card.negative,
  html[data-theme=system] .summary-card.expense,
  html[data-theme=system] .summary-card.advances,
  html[data-theme=system] .summary-card.overdue,
  html[data-theme=system] .summary-card.critical,
  html[data-theme=system] .summary-card.degraded,
  html[data-theme=system] .summary-card.red,
  html[data-theme=system] .financial-card.danger,
  html[data-theme=system] .financial-card.negative,
  html[data-theme=system] .financial-card.expense,
  html[data-theme=system] .financial-card.advances,
  html[data-theme=system] .financial-card.overdue,
  html[data-theme=system] .financial-card.critical,
  html[data-theme=system] .financial-card.degraded,
  html[data-theme=system] .financial-card.red,
  html[data-theme=system] .stat-card.danger,
  html[data-theme=system] .stat-card.negative,
  html[data-theme=system] .stat-card.expense,
  html[data-theme=system] .stat-card.advances,
  html[data-theme=system] .stat-card.overdue,
  html[data-theme=system] .stat-card.critical,
  html[data-theme=system] .stat-card.degraded,
  html[data-theme=system] .stat-card.red,
  html[data-theme=system] .balance-card.danger,
  html[data-theme=system] .balance-card.negative,
  html[data-theme=system] .balance-card.expense,
  html[data-theme=system] .balance-card.advances,
  html[data-theme=system] .balance-card.overdue,
  html[data-theme=system] .balance-card.critical,
  html[data-theme=system] .balance-card.degraded,
  html[data-theme=system] .balance-card.red,
  html[data-theme=system] .preview-kpi-card.danger,
  html[data-theme=system] .preview-kpi-card.negative,
  html[data-theme=system] .preview-kpi-card.expense,
  html[data-theme=system] .preview-kpi-card.advances,
  html[data-theme=system] .preview-kpi-card.overdue,
  html[data-theme=system] .preview-kpi-card.critical,
  html[data-theme=system] .preview-kpi-card.degraded,
  html[data-theme=system] .preview-kpi-card.red,
  html[data-theme=system] .mat-mdc-card.danger,
  html[data-theme=system] .mat-mdc-card.negative,
  html[data-theme=system] .mat-mdc-card.expense,
  html[data-theme=system] .mat-mdc-card.advances,
  html[data-theme=system] .mat-mdc-card.overdue,
  html[data-theme=system] .mat-mdc-card.critical,
  html[data-theme=system] .mat-mdc-card.degraded,
  html[data-theme=system] .mat-mdc-card.red {
    border-top: 4px solid var(--color-danger) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
  }
  html[data-theme=system] .kpi-card.danger .kpi-icon,
  html[data-theme=system] .kpi-card.danger .card-icon,
  html[data-theme=system] .kpi-card.danger .balance-icon,
  html[data-theme=system] .kpi-card.danger .stat-icon mat-icon, html[data-theme=system] .kpi-card.negative .kpi-icon,
  html[data-theme=system] .kpi-card.negative .card-icon,
  html[data-theme=system] .kpi-card.negative .balance-icon,
  html[data-theme=system] .kpi-card.negative .stat-icon mat-icon, html[data-theme=system] .kpi-card.expense .kpi-icon,
  html[data-theme=system] .kpi-card.expense .card-icon,
  html[data-theme=system] .kpi-card.expense .balance-icon,
  html[data-theme=system] .kpi-card.expense .stat-icon mat-icon, html[data-theme=system] .kpi-card.advances .kpi-icon,
  html[data-theme=system] .kpi-card.advances .card-icon,
  html[data-theme=system] .kpi-card.advances .balance-icon,
  html[data-theme=system] .kpi-card.advances .stat-icon mat-icon, html[data-theme=system] .kpi-card.overdue .kpi-icon,
  html[data-theme=system] .kpi-card.overdue .card-icon,
  html[data-theme=system] .kpi-card.overdue .balance-icon,
  html[data-theme=system] .kpi-card.overdue .stat-icon mat-icon, html[data-theme=system] .kpi-card.critical .kpi-icon,
  html[data-theme=system] .kpi-card.critical .card-icon,
  html[data-theme=system] .kpi-card.critical .balance-icon,
  html[data-theme=system] .kpi-card.critical .stat-icon mat-icon, html[data-theme=system] .kpi-card.degraded .kpi-icon,
  html[data-theme=system] .kpi-card.degraded .card-icon,
  html[data-theme=system] .kpi-card.degraded .balance-icon,
  html[data-theme=system] .kpi-card.degraded .stat-icon mat-icon, html[data-theme=system] .kpi-card.red .kpi-icon,
  html[data-theme=system] .kpi-card.red .card-icon,
  html[data-theme=system] .kpi-card.red .balance-icon,
  html[data-theme=system] .kpi-card.red .stat-icon mat-icon,
  html[data-theme=system] .summary-card.danger .kpi-icon,
  html[data-theme=system] .summary-card.danger .card-icon,
  html[data-theme=system] .summary-card.danger .balance-icon,
  html[data-theme=system] .summary-card.danger .stat-icon mat-icon,
  html[data-theme=system] .summary-card.negative .kpi-icon,
  html[data-theme=system] .summary-card.negative .card-icon,
  html[data-theme=system] .summary-card.negative .balance-icon,
  html[data-theme=system] .summary-card.negative .stat-icon mat-icon,
  html[data-theme=system] .summary-card.expense .kpi-icon,
  html[data-theme=system] .summary-card.expense .card-icon,
  html[data-theme=system] .summary-card.expense .balance-icon,
  html[data-theme=system] .summary-card.expense .stat-icon mat-icon,
  html[data-theme=system] .summary-card.advances .kpi-icon,
  html[data-theme=system] .summary-card.advances .card-icon,
  html[data-theme=system] .summary-card.advances .balance-icon,
  html[data-theme=system] .summary-card.advances .stat-icon mat-icon,
  html[data-theme=system] .summary-card.overdue .kpi-icon,
  html[data-theme=system] .summary-card.overdue .card-icon,
  html[data-theme=system] .summary-card.overdue .balance-icon,
  html[data-theme=system] .summary-card.overdue .stat-icon mat-icon,
  html[data-theme=system] .summary-card.critical .kpi-icon,
  html[data-theme=system] .summary-card.critical .card-icon,
  html[data-theme=system] .summary-card.critical .balance-icon,
  html[data-theme=system] .summary-card.critical .stat-icon mat-icon,
  html[data-theme=system] .summary-card.degraded .kpi-icon,
  html[data-theme=system] .summary-card.degraded .card-icon,
  html[data-theme=system] .summary-card.degraded .balance-icon,
  html[data-theme=system] .summary-card.degraded .stat-icon mat-icon,
  html[data-theme=system] .summary-card.red .kpi-icon,
  html[data-theme=system] .summary-card.red .card-icon,
  html[data-theme=system] .summary-card.red .balance-icon,
  html[data-theme=system] .summary-card.red .stat-icon mat-icon,
  html[data-theme=system] .financial-card.danger .kpi-icon,
  html[data-theme=system] .financial-card.danger .card-icon,
  html[data-theme=system] .financial-card.danger .balance-icon,
  html[data-theme=system] .financial-card.danger .stat-icon mat-icon,
  html[data-theme=system] .financial-card.negative .kpi-icon,
  html[data-theme=system] .financial-card.negative .card-icon,
  html[data-theme=system] .financial-card.negative .balance-icon,
  html[data-theme=system] .financial-card.negative .stat-icon mat-icon,
  html[data-theme=system] .financial-card.expense .kpi-icon,
  html[data-theme=system] .financial-card.expense .card-icon,
  html[data-theme=system] .financial-card.expense .balance-icon,
  html[data-theme=system] .financial-card.expense .stat-icon mat-icon,
  html[data-theme=system] .financial-card.advances .kpi-icon,
  html[data-theme=system] .financial-card.advances .card-icon,
  html[data-theme=system] .financial-card.advances .balance-icon,
  html[data-theme=system] .financial-card.advances .stat-icon mat-icon,
  html[data-theme=system] .financial-card.overdue .kpi-icon,
  html[data-theme=system] .financial-card.overdue .card-icon,
  html[data-theme=system] .financial-card.overdue .balance-icon,
  html[data-theme=system] .financial-card.overdue .stat-icon mat-icon,
  html[data-theme=system] .financial-card.critical .kpi-icon,
  html[data-theme=system] .financial-card.critical .card-icon,
  html[data-theme=system] .financial-card.critical .balance-icon,
  html[data-theme=system] .financial-card.critical .stat-icon mat-icon,
  html[data-theme=system] .financial-card.degraded .kpi-icon,
  html[data-theme=system] .financial-card.degraded .card-icon,
  html[data-theme=system] .financial-card.degraded .balance-icon,
  html[data-theme=system] .financial-card.degraded .stat-icon mat-icon,
  html[data-theme=system] .financial-card.red .kpi-icon,
  html[data-theme=system] .financial-card.red .card-icon,
  html[data-theme=system] .financial-card.red .balance-icon,
  html[data-theme=system] .financial-card.red .stat-icon mat-icon,
  html[data-theme=system] .stat-card.danger .kpi-icon,
  html[data-theme=system] .stat-card.danger .card-icon,
  html[data-theme=system] .stat-card.danger .balance-icon,
  html[data-theme=system] .stat-card.danger .stat-icon mat-icon,
  html[data-theme=system] .stat-card.negative .kpi-icon,
  html[data-theme=system] .stat-card.negative .card-icon,
  html[data-theme=system] .stat-card.negative .balance-icon,
  html[data-theme=system] .stat-card.negative .stat-icon mat-icon,
  html[data-theme=system] .stat-card.expense .kpi-icon,
  html[data-theme=system] .stat-card.expense .card-icon,
  html[data-theme=system] .stat-card.expense .balance-icon,
  html[data-theme=system] .stat-card.expense .stat-icon mat-icon,
  html[data-theme=system] .stat-card.advances .kpi-icon,
  html[data-theme=system] .stat-card.advances .card-icon,
  html[data-theme=system] .stat-card.advances .balance-icon,
  html[data-theme=system] .stat-card.advances .stat-icon mat-icon,
  html[data-theme=system] .stat-card.overdue .kpi-icon,
  html[data-theme=system] .stat-card.overdue .card-icon,
  html[data-theme=system] .stat-card.overdue .balance-icon,
  html[data-theme=system] .stat-card.overdue .stat-icon mat-icon,
  html[data-theme=system] .stat-card.critical .kpi-icon,
  html[data-theme=system] .stat-card.critical .card-icon,
  html[data-theme=system] .stat-card.critical .balance-icon,
  html[data-theme=system] .stat-card.critical .stat-icon mat-icon,
  html[data-theme=system] .stat-card.degraded .kpi-icon,
  html[data-theme=system] .stat-card.degraded .card-icon,
  html[data-theme=system] .stat-card.degraded .balance-icon,
  html[data-theme=system] .stat-card.degraded .stat-icon mat-icon,
  html[data-theme=system] .stat-card.red .kpi-icon,
  html[data-theme=system] .stat-card.red .card-icon,
  html[data-theme=system] .stat-card.red .balance-icon,
  html[data-theme=system] .stat-card.red .stat-icon mat-icon,
  html[data-theme=system] .balance-card.danger .kpi-icon,
  html[data-theme=system] .balance-card.danger .card-icon,
  html[data-theme=system] .balance-card.danger .balance-icon,
  html[data-theme=system] .balance-card.danger .stat-icon mat-icon,
  html[data-theme=system] .balance-card.negative .kpi-icon,
  html[data-theme=system] .balance-card.negative .card-icon,
  html[data-theme=system] .balance-card.negative .balance-icon,
  html[data-theme=system] .balance-card.negative .stat-icon mat-icon,
  html[data-theme=system] .balance-card.expense .kpi-icon,
  html[data-theme=system] .balance-card.expense .card-icon,
  html[data-theme=system] .balance-card.expense .balance-icon,
  html[data-theme=system] .balance-card.expense .stat-icon mat-icon,
  html[data-theme=system] .balance-card.advances .kpi-icon,
  html[data-theme=system] .balance-card.advances .card-icon,
  html[data-theme=system] .balance-card.advances .balance-icon,
  html[data-theme=system] .balance-card.advances .stat-icon mat-icon,
  html[data-theme=system] .balance-card.overdue .kpi-icon,
  html[data-theme=system] .balance-card.overdue .card-icon,
  html[data-theme=system] .balance-card.overdue .balance-icon,
  html[data-theme=system] .balance-card.overdue .stat-icon mat-icon,
  html[data-theme=system] .balance-card.critical .kpi-icon,
  html[data-theme=system] .balance-card.critical .card-icon,
  html[data-theme=system] .balance-card.critical .balance-icon,
  html[data-theme=system] .balance-card.critical .stat-icon mat-icon,
  html[data-theme=system] .balance-card.degraded .kpi-icon,
  html[data-theme=system] .balance-card.degraded .card-icon,
  html[data-theme=system] .balance-card.degraded .balance-icon,
  html[data-theme=system] .balance-card.degraded .stat-icon mat-icon,
  html[data-theme=system] .balance-card.red .kpi-icon,
  html[data-theme=system] .balance-card.red .card-icon,
  html[data-theme=system] .balance-card.red .balance-icon,
  html[data-theme=system] .balance-card.red .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.danger .kpi-icon,
  html[data-theme=system] .preview-kpi-card.danger .card-icon,
  html[data-theme=system] .preview-kpi-card.danger .balance-icon,
  html[data-theme=system] .preview-kpi-card.danger .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.negative .kpi-icon,
  html[data-theme=system] .preview-kpi-card.negative .card-icon,
  html[data-theme=system] .preview-kpi-card.negative .balance-icon,
  html[data-theme=system] .preview-kpi-card.negative .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.expense .kpi-icon,
  html[data-theme=system] .preview-kpi-card.expense .card-icon,
  html[data-theme=system] .preview-kpi-card.expense .balance-icon,
  html[data-theme=system] .preview-kpi-card.expense .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.advances .kpi-icon,
  html[data-theme=system] .preview-kpi-card.advances .card-icon,
  html[data-theme=system] .preview-kpi-card.advances .balance-icon,
  html[data-theme=system] .preview-kpi-card.advances .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.overdue .kpi-icon,
  html[data-theme=system] .preview-kpi-card.overdue .card-icon,
  html[data-theme=system] .preview-kpi-card.overdue .balance-icon,
  html[data-theme=system] .preview-kpi-card.overdue .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.critical .kpi-icon,
  html[data-theme=system] .preview-kpi-card.critical .card-icon,
  html[data-theme=system] .preview-kpi-card.critical .balance-icon,
  html[data-theme=system] .preview-kpi-card.critical .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.degraded .kpi-icon,
  html[data-theme=system] .preview-kpi-card.degraded .card-icon,
  html[data-theme=system] .preview-kpi-card.degraded .balance-icon,
  html[data-theme=system] .preview-kpi-card.degraded .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.red .kpi-icon,
  html[data-theme=system] .preview-kpi-card.red .card-icon,
  html[data-theme=system] .preview-kpi-card.red .balance-icon,
  html[data-theme=system] .preview-kpi-card.red .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.danger .kpi-icon,
  html[data-theme=system] .mat-mdc-card.danger .card-icon,
  html[data-theme=system] .mat-mdc-card.danger .balance-icon,
  html[data-theme=system] .mat-mdc-card.danger .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.negative .kpi-icon,
  html[data-theme=system] .mat-mdc-card.negative .card-icon,
  html[data-theme=system] .mat-mdc-card.negative .balance-icon,
  html[data-theme=system] .mat-mdc-card.negative .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.expense .kpi-icon,
  html[data-theme=system] .mat-mdc-card.expense .card-icon,
  html[data-theme=system] .mat-mdc-card.expense .balance-icon,
  html[data-theme=system] .mat-mdc-card.expense .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.advances .kpi-icon,
  html[data-theme=system] .mat-mdc-card.advances .card-icon,
  html[data-theme=system] .mat-mdc-card.advances .balance-icon,
  html[data-theme=system] .mat-mdc-card.advances .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.overdue .kpi-icon,
  html[data-theme=system] .mat-mdc-card.overdue .card-icon,
  html[data-theme=system] .mat-mdc-card.overdue .balance-icon,
  html[data-theme=system] .mat-mdc-card.overdue .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.critical .kpi-icon,
  html[data-theme=system] .mat-mdc-card.critical .card-icon,
  html[data-theme=system] .mat-mdc-card.critical .balance-icon,
  html[data-theme=system] .mat-mdc-card.critical .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.degraded .kpi-icon,
  html[data-theme=system] .mat-mdc-card.degraded .card-icon,
  html[data-theme=system] .mat-mdc-card.degraded .balance-icon,
  html[data-theme=system] .mat-mdc-card.degraded .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.red .kpi-icon,
  html[data-theme=system] .mat-mdc-card.red .card-icon,
  html[data-theme=system] .mat-mdc-card.red .balance-icon,
  html[data-theme=system] .mat-mdc-card.red .stat-icon mat-icon {
    color: var(--color-danger) !important;
  }
  html[data-theme=system] .kpi-card.danger .stat-icon, html[data-theme=system] .kpi-card.negative .stat-icon, html[data-theme=system] .kpi-card.expense .stat-icon, html[data-theme=system] .kpi-card.advances .stat-icon, html[data-theme=system] .kpi-card.overdue .stat-icon, html[data-theme=system] .kpi-card.critical .stat-icon, html[data-theme=system] .kpi-card.degraded .stat-icon, html[data-theme=system] .kpi-card.red .stat-icon,
  html[data-theme=system] .summary-card.danger .stat-icon,
  html[data-theme=system] .summary-card.negative .stat-icon,
  html[data-theme=system] .summary-card.expense .stat-icon,
  html[data-theme=system] .summary-card.advances .stat-icon,
  html[data-theme=system] .summary-card.overdue .stat-icon,
  html[data-theme=system] .summary-card.critical .stat-icon,
  html[data-theme=system] .summary-card.degraded .stat-icon,
  html[data-theme=system] .summary-card.red .stat-icon,
  html[data-theme=system] .financial-card.danger .stat-icon,
  html[data-theme=system] .financial-card.negative .stat-icon,
  html[data-theme=system] .financial-card.expense .stat-icon,
  html[data-theme=system] .financial-card.advances .stat-icon,
  html[data-theme=system] .financial-card.overdue .stat-icon,
  html[data-theme=system] .financial-card.critical .stat-icon,
  html[data-theme=system] .financial-card.degraded .stat-icon,
  html[data-theme=system] .financial-card.red .stat-icon,
  html[data-theme=system] .stat-card.danger .stat-icon,
  html[data-theme=system] .stat-card.negative .stat-icon,
  html[data-theme=system] .stat-card.expense .stat-icon,
  html[data-theme=system] .stat-card.advances .stat-icon,
  html[data-theme=system] .stat-card.overdue .stat-icon,
  html[data-theme=system] .stat-card.critical .stat-icon,
  html[data-theme=system] .stat-card.degraded .stat-icon,
  html[data-theme=system] .stat-card.red .stat-icon,
  html[data-theme=system] .balance-card.danger .stat-icon,
  html[data-theme=system] .balance-card.negative .stat-icon,
  html[data-theme=system] .balance-card.expense .stat-icon,
  html[data-theme=system] .balance-card.advances .stat-icon,
  html[data-theme=system] .balance-card.overdue .stat-icon,
  html[data-theme=system] .balance-card.critical .stat-icon,
  html[data-theme=system] .balance-card.degraded .stat-icon,
  html[data-theme=system] .balance-card.red .stat-icon,
  html[data-theme=system] .preview-kpi-card.danger .stat-icon,
  html[data-theme=system] .preview-kpi-card.negative .stat-icon,
  html[data-theme=system] .preview-kpi-card.expense .stat-icon,
  html[data-theme=system] .preview-kpi-card.advances .stat-icon,
  html[data-theme=system] .preview-kpi-card.overdue .stat-icon,
  html[data-theme=system] .preview-kpi-card.critical .stat-icon,
  html[data-theme=system] .preview-kpi-card.degraded .stat-icon,
  html[data-theme=system] .preview-kpi-card.red .stat-icon,
  html[data-theme=system] .mat-mdc-card.danger .stat-icon,
  html[data-theme=system] .mat-mdc-card.negative .stat-icon,
  html[data-theme=system] .mat-mdc-card.expense .stat-icon,
  html[data-theme=system] .mat-mdc-card.advances .stat-icon,
  html[data-theme=system] .mat-mdc-card.overdue .stat-icon,
  html[data-theme=system] .mat-mdc-card.critical .stat-icon,
  html[data-theme=system] .mat-mdc-card.degraded .stat-icon,
  html[data-theme=system] .mat-mdc-card.red .stat-icon {
    background: rgba(248, 113, 113, 0.2) !important;
    border: 1px solid rgba(248, 113, 113, 0.4) !important;
  }
  html[data-theme=system] .kpi-card.average, html[data-theme=system] .kpi-card.accent, html[data-theme=system] .kpi-card.concentration, html[data-theme=system] .kpi-card.purple,
  html[data-theme=system] .summary-card.average,
  html[data-theme=system] .summary-card.accent,
  html[data-theme=system] .summary-card.concentration,
  html[data-theme=system] .summary-card.purple,
  html[data-theme=system] .financial-card.average,
  html[data-theme=system] .financial-card.accent,
  html[data-theme=system] .financial-card.concentration,
  html[data-theme=system] .financial-card.purple,
  html[data-theme=system] .stat-card.average,
  html[data-theme=system] .stat-card.accent,
  html[data-theme=system] .stat-card.concentration,
  html[data-theme=system] .stat-card.purple,
  html[data-theme=system] .balance-card.average,
  html[data-theme=system] .balance-card.accent,
  html[data-theme=system] .balance-card.concentration,
  html[data-theme=system] .balance-card.purple,
  html[data-theme=system] .preview-kpi-card.average,
  html[data-theme=system] .preview-kpi-card.accent,
  html[data-theme=system] .preview-kpi-card.concentration,
  html[data-theme=system] .preview-kpi-card.purple,
  html[data-theme=system] .mat-mdc-card.average,
  html[data-theme=system] .mat-mdc-card.accent,
  html[data-theme=system] .mat-mdc-card.concentration,
  html[data-theme=system] .mat-mdc-card.purple {
    border-top: 4px solid var(--color-accent) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
  }
  html[data-theme=system] .kpi-card.average .kpi-icon,
  html[data-theme=system] .kpi-card.average .card-icon,
  html[data-theme=system] .kpi-card.average .balance-icon,
  html[data-theme=system] .kpi-card.average .stat-icon mat-icon, html[data-theme=system] .kpi-card.accent .kpi-icon,
  html[data-theme=system] .kpi-card.accent .card-icon,
  html[data-theme=system] .kpi-card.accent .balance-icon,
  html[data-theme=system] .kpi-card.accent .stat-icon mat-icon, html[data-theme=system] .kpi-card.concentration .kpi-icon,
  html[data-theme=system] .kpi-card.concentration .card-icon,
  html[data-theme=system] .kpi-card.concentration .balance-icon,
  html[data-theme=system] .kpi-card.concentration .stat-icon mat-icon, html[data-theme=system] .kpi-card.purple .kpi-icon,
  html[data-theme=system] .kpi-card.purple .card-icon,
  html[data-theme=system] .kpi-card.purple .balance-icon,
  html[data-theme=system] .kpi-card.purple .stat-icon mat-icon,
  html[data-theme=system] .summary-card.average .kpi-icon,
  html[data-theme=system] .summary-card.average .card-icon,
  html[data-theme=system] .summary-card.average .balance-icon,
  html[data-theme=system] .summary-card.average .stat-icon mat-icon,
  html[data-theme=system] .summary-card.accent .kpi-icon,
  html[data-theme=system] .summary-card.accent .card-icon,
  html[data-theme=system] .summary-card.accent .balance-icon,
  html[data-theme=system] .summary-card.accent .stat-icon mat-icon,
  html[data-theme=system] .summary-card.concentration .kpi-icon,
  html[data-theme=system] .summary-card.concentration .card-icon,
  html[data-theme=system] .summary-card.concentration .balance-icon,
  html[data-theme=system] .summary-card.concentration .stat-icon mat-icon,
  html[data-theme=system] .summary-card.purple .kpi-icon,
  html[data-theme=system] .summary-card.purple .card-icon,
  html[data-theme=system] .summary-card.purple .balance-icon,
  html[data-theme=system] .summary-card.purple .stat-icon mat-icon,
  html[data-theme=system] .financial-card.average .kpi-icon,
  html[data-theme=system] .financial-card.average .card-icon,
  html[data-theme=system] .financial-card.average .balance-icon,
  html[data-theme=system] .financial-card.average .stat-icon mat-icon,
  html[data-theme=system] .financial-card.accent .kpi-icon,
  html[data-theme=system] .financial-card.accent .card-icon,
  html[data-theme=system] .financial-card.accent .balance-icon,
  html[data-theme=system] .financial-card.accent .stat-icon mat-icon,
  html[data-theme=system] .financial-card.concentration .kpi-icon,
  html[data-theme=system] .financial-card.concentration .card-icon,
  html[data-theme=system] .financial-card.concentration .balance-icon,
  html[data-theme=system] .financial-card.concentration .stat-icon mat-icon,
  html[data-theme=system] .financial-card.purple .kpi-icon,
  html[data-theme=system] .financial-card.purple .card-icon,
  html[data-theme=system] .financial-card.purple .balance-icon,
  html[data-theme=system] .financial-card.purple .stat-icon mat-icon,
  html[data-theme=system] .stat-card.average .kpi-icon,
  html[data-theme=system] .stat-card.average .card-icon,
  html[data-theme=system] .stat-card.average .balance-icon,
  html[data-theme=system] .stat-card.average .stat-icon mat-icon,
  html[data-theme=system] .stat-card.accent .kpi-icon,
  html[data-theme=system] .stat-card.accent .card-icon,
  html[data-theme=system] .stat-card.accent .balance-icon,
  html[data-theme=system] .stat-card.accent .stat-icon mat-icon,
  html[data-theme=system] .stat-card.concentration .kpi-icon,
  html[data-theme=system] .stat-card.concentration .card-icon,
  html[data-theme=system] .stat-card.concentration .balance-icon,
  html[data-theme=system] .stat-card.concentration .stat-icon mat-icon,
  html[data-theme=system] .stat-card.purple .kpi-icon,
  html[data-theme=system] .stat-card.purple .card-icon,
  html[data-theme=system] .stat-card.purple .balance-icon,
  html[data-theme=system] .stat-card.purple .stat-icon mat-icon,
  html[data-theme=system] .balance-card.average .kpi-icon,
  html[data-theme=system] .balance-card.average .card-icon,
  html[data-theme=system] .balance-card.average .balance-icon,
  html[data-theme=system] .balance-card.average .stat-icon mat-icon,
  html[data-theme=system] .balance-card.accent .kpi-icon,
  html[data-theme=system] .balance-card.accent .card-icon,
  html[data-theme=system] .balance-card.accent .balance-icon,
  html[data-theme=system] .balance-card.accent .stat-icon mat-icon,
  html[data-theme=system] .balance-card.concentration .kpi-icon,
  html[data-theme=system] .balance-card.concentration .card-icon,
  html[data-theme=system] .balance-card.concentration .balance-icon,
  html[data-theme=system] .balance-card.concentration .stat-icon mat-icon,
  html[data-theme=system] .balance-card.purple .kpi-icon,
  html[data-theme=system] .balance-card.purple .card-icon,
  html[data-theme=system] .balance-card.purple .balance-icon,
  html[data-theme=system] .balance-card.purple .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.average .kpi-icon,
  html[data-theme=system] .preview-kpi-card.average .card-icon,
  html[data-theme=system] .preview-kpi-card.average .balance-icon,
  html[data-theme=system] .preview-kpi-card.average .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.accent .kpi-icon,
  html[data-theme=system] .preview-kpi-card.accent .card-icon,
  html[data-theme=system] .preview-kpi-card.accent .balance-icon,
  html[data-theme=system] .preview-kpi-card.accent .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.concentration .kpi-icon,
  html[data-theme=system] .preview-kpi-card.concentration .card-icon,
  html[data-theme=system] .preview-kpi-card.concentration .balance-icon,
  html[data-theme=system] .preview-kpi-card.concentration .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.purple .kpi-icon,
  html[data-theme=system] .preview-kpi-card.purple .card-icon,
  html[data-theme=system] .preview-kpi-card.purple .balance-icon,
  html[data-theme=system] .preview-kpi-card.purple .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.average .kpi-icon,
  html[data-theme=system] .mat-mdc-card.average .card-icon,
  html[data-theme=system] .mat-mdc-card.average .balance-icon,
  html[data-theme=system] .mat-mdc-card.average .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.accent .kpi-icon,
  html[data-theme=system] .mat-mdc-card.accent .card-icon,
  html[data-theme=system] .mat-mdc-card.accent .balance-icon,
  html[data-theme=system] .mat-mdc-card.accent .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.concentration .kpi-icon,
  html[data-theme=system] .mat-mdc-card.concentration .card-icon,
  html[data-theme=system] .mat-mdc-card.concentration .balance-icon,
  html[data-theme=system] .mat-mdc-card.concentration .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.purple .kpi-icon,
  html[data-theme=system] .mat-mdc-card.purple .card-icon,
  html[data-theme=system] .mat-mdc-card.purple .balance-icon,
  html[data-theme=system] .mat-mdc-card.purple .stat-icon mat-icon {
    color: var(--color-accent) !important;
  }
  html[data-theme=system] .kpi-card.average .stat-icon, html[data-theme=system] .kpi-card.accent .stat-icon, html[data-theme=system] .kpi-card.concentration .stat-icon, html[data-theme=system] .kpi-card.purple .stat-icon,
  html[data-theme=system] .summary-card.average .stat-icon,
  html[data-theme=system] .summary-card.accent .stat-icon,
  html[data-theme=system] .summary-card.concentration .stat-icon,
  html[data-theme=system] .summary-card.purple .stat-icon,
  html[data-theme=system] .financial-card.average .stat-icon,
  html[data-theme=system] .financial-card.accent .stat-icon,
  html[data-theme=system] .financial-card.concentration .stat-icon,
  html[data-theme=system] .financial-card.purple .stat-icon,
  html[data-theme=system] .stat-card.average .stat-icon,
  html[data-theme=system] .stat-card.accent .stat-icon,
  html[data-theme=system] .stat-card.concentration .stat-icon,
  html[data-theme=system] .stat-card.purple .stat-icon,
  html[data-theme=system] .balance-card.average .stat-icon,
  html[data-theme=system] .balance-card.accent .stat-icon,
  html[data-theme=system] .balance-card.concentration .stat-icon,
  html[data-theme=system] .balance-card.purple .stat-icon,
  html[data-theme=system] .preview-kpi-card.average .stat-icon,
  html[data-theme=system] .preview-kpi-card.accent .stat-icon,
  html[data-theme=system] .preview-kpi-card.concentration .stat-icon,
  html[data-theme=system] .preview-kpi-card.purple .stat-icon,
  html[data-theme=system] .mat-mdc-card.average .stat-icon,
  html[data-theme=system] .mat-mdc-card.accent .stat-icon,
  html[data-theme=system] .mat-mdc-card.concentration .stat-icon,
  html[data-theme=system] .mat-mdc-card.purple .stat-icon {
    background: rgba(192, 132, 252, 0.2) !important;
    border: 1px solid rgba(192, 132, 252, 0.4) !important;
  }
  html[data-theme=system] .kpi-card.staff, html[data-theme=system] .kpi-card.cyan, html[data-theme=system] .kpi-card.collection-rate, html[data-theme=system] .kpi-card.payment-metric, html[data-theme=system] .kpi-card.next-due,
  html[data-theme=system] .summary-card.staff,
  html[data-theme=system] .summary-card.cyan,
  html[data-theme=system] .summary-card.collection-rate,
  html[data-theme=system] .summary-card.payment-metric,
  html[data-theme=system] .summary-card.next-due,
  html[data-theme=system] .financial-card.staff,
  html[data-theme=system] .financial-card.cyan,
  html[data-theme=system] .financial-card.collection-rate,
  html[data-theme=system] .financial-card.payment-metric,
  html[data-theme=system] .financial-card.next-due,
  html[data-theme=system] .stat-card.staff,
  html[data-theme=system] .stat-card.cyan,
  html[data-theme=system] .stat-card.collection-rate,
  html[data-theme=system] .stat-card.payment-metric,
  html[data-theme=system] .stat-card.next-due,
  html[data-theme=system] .balance-card.staff,
  html[data-theme=system] .balance-card.cyan,
  html[data-theme=system] .balance-card.collection-rate,
  html[data-theme=system] .balance-card.payment-metric,
  html[data-theme=system] .balance-card.next-due,
  html[data-theme=system] .preview-kpi-card.staff,
  html[data-theme=system] .preview-kpi-card.cyan,
  html[data-theme=system] .preview-kpi-card.collection-rate,
  html[data-theme=system] .preview-kpi-card.payment-metric,
  html[data-theme=system] .preview-kpi-card.next-due,
  html[data-theme=system] .mat-mdc-card.staff,
  html[data-theme=system] .mat-mdc-card.cyan,
  html[data-theme=system] .mat-mdc-card.collection-rate,
  html[data-theme=system] .mat-mdc-card.payment-metric,
  html[data-theme=system] .mat-mdc-card.next-due {
    border-top: 4px solid #22d3ee !important;
    background: linear-gradient(180deg, color-mix(in srgb, #22d3ee 16%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
  }
  html[data-theme=system] .kpi-card.staff .kpi-icon,
  html[data-theme=system] .kpi-card.staff .card-icon,
  html[data-theme=system] .kpi-card.staff .balance-icon,
  html[data-theme=system] .kpi-card.staff .stat-icon mat-icon, html[data-theme=system] .kpi-card.cyan .kpi-icon,
  html[data-theme=system] .kpi-card.cyan .card-icon,
  html[data-theme=system] .kpi-card.cyan .balance-icon,
  html[data-theme=system] .kpi-card.cyan .stat-icon mat-icon, html[data-theme=system] .kpi-card.collection-rate .kpi-icon,
  html[data-theme=system] .kpi-card.collection-rate .card-icon,
  html[data-theme=system] .kpi-card.collection-rate .balance-icon,
  html[data-theme=system] .kpi-card.collection-rate .stat-icon mat-icon, html[data-theme=system] .kpi-card.payment-metric .kpi-icon,
  html[data-theme=system] .kpi-card.payment-metric .card-icon,
  html[data-theme=system] .kpi-card.payment-metric .balance-icon,
  html[data-theme=system] .kpi-card.payment-metric .stat-icon mat-icon, html[data-theme=system] .kpi-card.next-due .kpi-icon,
  html[data-theme=system] .kpi-card.next-due .card-icon,
  html[data-theme=system] .kpi-card.next-due .balance-icon,
  html[data-theme=system] .kpi-card.next-due .stat-icon mat-icon,
  html[data-theme=system] .summary-card.staff .kpi-icon,
  html[data-theme=system] .summary-card.staff .card-icon,
  html[data-theme=system] .summary-card.staff .balance-icon,
  html[data-theme=system] .summary-card.staff .stat-icon mat-icon,
  html[data-theme=system] .summary-card.cyan .kpi-icon,
  html[data-theme=system] .summary-card.cyan .card-icon,
  html[data-theme=system] .summary-card.cyan .balance-icon,
  html[data-theme=system] .summary-card.cyan .stat-icon mat-icon,
  html[data-theme=system] .summary-card.collection-rate .kpi-icon,
  html[data-theme=system] .summary-card.collection-rate .card-icon,
  html[data-theme=system] .summary-card.collection-rate .balance-icon,
  html[data-theme=system] .summary-card.collection-rate .stat-icon mat-icon,
  html[data-theme=system] .summary-card.payment-metric .kpi-icon,
  html[data-theme=system] .summary-card.payment-metric .card-icon,
  html[data-theme=system] .summary-card.payment-metric .balance-icon,
  html[data-theme=system] .summary-card.payment-metric .stat-icon mat-icon,
  html[data-theme=system] .summary-card.next-due .kpi-icon,
  html[data-theme=system] .summary-card.next-due .card-icon,
  html[data-theme=system] .summary-card.next-due .balance-icon,
  html[data-theme=system] .summary-card.next-due .stat-icon mat-icon,
  html[data-theme=system] .financial-card.staff .kpi-icon,
  html[data-theme=system] .financial-card.staff .card-icon,
  html[data-theme=system] .financial-card.staff .balance-icon,
  html[data-theme=system] .financial-card.staff .stat-icon mat-icon,
  html[data-theme=system] .financial-card.cyan .kpi-icon,
  html[data-theme=system] .financial-card.cyan .card-icon,
  html[data-theme=system] .financial-card.cyan .balance-icon,
  html[data-theme=system] .financial-card.cyan .stat-icon mat-icon,
  html[data-theme=system] .financial-card.collection-rate .kpi-icon,
  html[data-theme=system] .financial-card.collection-rate .card-icon,
  html[data-theme=system] .financial-card.collection-rate .balance-icon,
  html[data-theme=system] .financial-card.collection-rate .stat-icon mat-icon,
  html[data-theme=system] .financial-card.payment-metric .kpi-icon,
  html[data-theme=system] .financial-card.payment-metric .card-icon,
  html[data-theme=system] .financial-card.payment-metric .balance-icon,
  html[data-theme=system] .financial-card.payment-metric .stat-icon mat-icon,
  html[data-theme=system] .financial-card.next-due .kpi-icon,
  html[data-theme=system] .financial-card.next-due .card-icon,
  html[data-theme=system] .financial-card.next-due .balance-icon,
  html[data-theme=system] .financial-card.next-due .stat-icon mat-icon,
  html[data-theme=system] .stat-card.staff .kpi-icon,
  html[data-theme=system] .stat-card.staff .card-icon,
  html[data-theme=system] .stat-card.staff .balance-icon,
  html[data-theme=system] .stat-card.staff .stat-icon mat-icon,
  html[data-theme=system] .stat-card.cyan .kpi-icon,
  html[data-theme=system] .stat-card.cyan .card-icon,
  html[data-theme=system] .stat-card.cyan .balance-icon,
  html[data-theme=system] .stat-card.cyan .stat-icon mat-icon,
  html[data-theme=system] .stat-card.collection-rate .kpi-icon,
  html[data-theme=system] .stat-card.collection-rate .card-icon,
  html[data-theme=system] .stat-card.collection-rate .balance-icon,
  html[data-theme=system] .stat-card.collection-rate .stat-icon mat-icon,
  html[data-theme=system] .stat-card.payment-metric .kpi-icon,
  html[data-theme=system] .stat-card.payment-metric .card-icon,
  html[data-theme=system] .stat-card.payment-metric .balance-icon,
  html[data-theme=system] .stat-card.payment-metric .stat-icon mat-icon,
  html[data-theme=system] .stat-card.next-due .kpi-icon,
  html[data-theme=system] .stat-card.next-due .card-icon,
  html[data-theme=system] .stat-card.next-due .balance-icon,
  html[data-theme=system] .stat-card.next-due .stat-icon mat-icon,
  html[data-theme=system] .balance-card.staff .kpi-icon,
  html[data-theme=system] .balance-card.staff .card-icon,
  html[data-theme=system] .balance-card.staff .balance-icon,
  html[data-theme=system] .balance-card.staff .stat-icon mat-icon,
  html[data-theme=system] .balance-card.cyan .kpi-icon,
  html[data-theme=system] .balance-card.cyan .card-icon,
  html[data-theme=system] .balance-card.cyan .balance-icon,
  html[data-theme=system] .balance-card.cyan .stat-icon mat-icon,
  html[data-theme=system] .balance-card.collection-rate .kpi-icon,
  html[data-theme=system] .balance-card.collection-rate .card-icon,
  html[data-theme=system] .balance-card.collection-rate .balance-icon,
  html[data-theme=system] .balance-card.collection-rate .stat-icon mat-icon,
  html[data-theme=system] .balance-card.payment-metric .kpi-icon,
  html[data-theme=system] .balance-card.payment-metric .card-icon,
  html[data-theme=system] .balance-card.payment-metric .balance-icon,
  html[data-theme=system] .balance-card.payment-metric .stat-icon mat-icon,
  html[data-theme=system] .balance-card.next-due .kpi-icon,
  html[data-theme=system] .balance-card.next-due .card-icon,
  html[data-theme=system] .balance-card.next-due .balance-icon,
  html[data-theme=system] .balance-card.next-due .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.staff .kpi-icon,
  html[data-theme=system] .preview-kpi-card.staff .card-icon,
  html[data-theme=system] .preview-kpi-card.staff .balance-icon,
  html[data-theme=system] .preview-kpi-card.staff .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.cyan .kpi-icon,
  html[data-theme=system] .preview-kpi-card.cyan .card-icon,
  html[data-theme=system] .preview-kpi-card.cyan .balance-icon,
  html[data-theme=system] .preview-kpi-card.cyan .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.collection-rate .kpi-icon,
  html[data-theme=system] .preview-kpi-card.collection-rate .card-icon,
  html[data-theme=system] .preview-kpi-card.collection-rate .balance-icon,
  html[data-theme=system] .preview-kpi-card.collection-rate .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.payment-metric .kpi-icon,
  html[data-theme=system] .preview-kpi-card.payment-metric .card-icon,
  html[data-theme=system] .preview-kpi-card.payment-metric .balance-icon,
  html[data-theme=system] .preview-kpi-card.payment-metric .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.next-due .kpi-icon,
  html[data-theme=system] .preview-kpi-card.next-due .card-icon,
  html[data-theme=system] .preview-kpi-card.next-due .balance-icon,
  html[data-theme=system] .preview-kpi-card.next-due .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.staff .kpi-icon,
  html[data-theme=system] .mat-mdc-card.staff .card-icon,
  html[data-theme=system] .mat-mdc-card.staff .balance-icon,
  html[data-theme=system] .mat-mdc-card.staff .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.cyan .kpi-icon,
  html[data-theme=system] .mat-mdc-card.cyan .card-icon,
  html[data-theme=system] .mat-mdc-card.cyan .balance-icon,
  html[data-theme=system] .mat-mdc-card.cyan .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.collection-rate .kpi-icon,
  html[data-theme=system] .mat-mdc-card.collection-rate .card-icon,
  html[data-theme=system] .mat-mdc-card.collection-rate .balance-icon,
  html[data-theme=system] .mat-mdc-card.collection-rate .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.payment-metric .kpi-icon,
  html[data-theme=system] .mat-mdc-card.payment-metric .card-icon,
  html[data-theme=system] .mat-mdc-card.payment-metric .balance-icon,
  html[data-theme=system] .mat-mdc-card.payment-metric .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.next-due .kpi-icon,
  html[data-theme=system] .mat-mdc-card.next-due .card-icon,
  html[data-theme=system] .mat-mdc-card.next-due .balance-icon,
  html[data-theme=system] .mat-mdc-card.next-due .stat-icon mat-icon {
    color: #22d3ee !important;
  }
  html[data-theme=system] .kpi-card.staff .stat-icon, html[data-theme=system] .kpi-card.cyan .stat-icon, html[data-theme=system] .kpi-card.collection-rate .stat-icon, html[data-theme=system] .kpi-card.payment-metric .stat-icon, html[data-theme=system] .kpi-card.next-due .stat-icon,
  html[data-theme=system] .summary-card.staff .stat-icon,
  html[data-theme=system] .summary-card.cyan .stat-icon,
  html[data-theme=system] .summary-card.collection-rate .stat-icon,
  html[data-theme=system] .summary-card.payment-metric .stat-icon,
  html[data-theme=system] .summary-card.next-due .stat-icon,
  html[data-theme=system] .financial-card.staff .stat-icon,
  html[data-theme=system] .financial-card.cyan .stat-icon,
  html[data-theme=system] .financial-card.collection-rate .stat-icon,
  html[data-theme=system] .financial-card.payment-metric .stat-icon,
  html[data-theme=system] .financial-card.next-due .stat-icon,
  html[data-theme=system] .stat-card.staff .stat-icon,
  html[data-theme=system] .stat-card.cyan .stat-icon,
  html[data-theme=system] .stat-card.collection-rate .stat-icon,
  html[data-theme=system] .stat-card.payment-metric .stat-icon,
  html[data-theme=system] .stat-card.next-due .stat-icon,
  html[data-theme=system] .balance-card.staff .stat-icon,
  html[data-theme=system] .balance-card.cyan .stat-icon,
  html[data-theme=system] .balance-card.collection-rate .stat-icon,
  html[data-theme=system] .balance-card.payment-metric .stat-icon,
  html[data-theme=system] .balance-card.next-due .stat-icon,
  html[data-theme=system] .preview-kpi-card.staff .stat-icon,
  html[data-theme=system] .preview-kpi-card.cyan .stat-icon,
  html[data-theme=system] .preview-kpi-card.collection-rate .stat-icon,
  html[data-theme=system] .preview-kpi-card.payment-metric .stat-icon,
  html[data-theme=system] .preview-kpi-card.next-due .stat-icon,
  html[data-theme=system] .mat-mdc-card.staff .stat-icon,
  html[data-theme=system] .mat-mdc-card.cyan .stat-icon,
  html[data-theme=system] .mat-mdc-card.collection-rate .stat-icon,
  html[data-theme=system] .mat-mdc-card.payment-metric .stat-icon,
  html[data-theme=system] .mat-mdc-card.next-due .stat-icon {
    background: rgba(34, 211, 238, 0.2) !important;
    border: 1px solid rgba(34, 211, 238, 0.4) !important;
  }
  html[data-theme=system] .kpi-card.neutral,
  html[data-theme=system] .summary-card.neutral,
  html[data-theme=system] .financial-card.neutral,
  html[data-theme=system] .stat-card.neutral,
  html[data-theme=system] .balance-card.neutral,
  html[data-theme=system] .preview-kpi-card.neutral,
  html[data-theme=system] .mat-mdc-card.neutral {
    border-top: 4px solid var(--color-text-muted) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-text-muted) 8%, var(--color-surface)) 0%, var(--color-surface) 100%) !important;
  }
  html[data-theme=system] .kpi-card.neutral .kpi-icon,
  html[data-theme=system] .kpi-card.neutral .card-icon,
  html[data-theme=system] .kpi-card.neutral .balance-icon,
  html[data-theme=system] .kpi-card.neutral .stat-icon mat-icon,
  html[data-theme=system] .summary-card.neutral .kpi-icon,
  html[data-theme=system] .summary-card.neutral .card-icon,
  html[data-theme=system] .summary-card.neutral .balance-icon,
  html[data-theme=system] .summary-card.neutral .stat-icon mat-icon,
  html[data-theme=system] .financial-card.neutral .kpi-icon,
  html[data-theme=system] .financial-card.neutral .card-icon,
  html[data-theme=system] .financial-card.neutral .balance-icon,
  html[data-theme=system] .financial-card.neutral .stat-icon mat-icon,
  html[data-theme=system] .stat-card.neutral .kpi-icon,
  html[data-theme=system] .stat-card.neutral .card-icon,
  html[data-theme=system] .stat-card.neutral .balance-icon,
  html[data-theme=system] .stat-card.neutral .stat-icon mat-icon,
  html[data-theme=system] .balance-card.neutral .kpi-icon,
  html[data-theme=system] .balance-card.neutral .card-icon,
  html[data-theme=system] .balance-card.neutral .balance-icon,
  html[data-theme=system] .balance-card.neutral .stat-icon mat-icon,
  html[data-theme=system] .preview-kpi-card.neutral .kpi-icon,
  html[data-theme=system] .preview-kpi-card.neutral .card-icon,
  html[data-theme=system] .preview-kpi-card.neutral .balance-icon,
  html[data-theme=system] .preview-kpi-card.neutral .stat-icon mat-icon,
  html[data-theme=system] .mat-mdc-card.neutral .kpi-icon,
  html[data-theme=system] .mat-mdc-card.neutral .card-icon,
  html[data-theme=system] .mat-mdc-card.neutral .balance-icon,
  html[data-theme=system] .mat-mdc-card.neutral .stat-icon mat-icon {
    color: var(--color-text-muted) !important;
  }
  html[data-theme=system] .mat-mdc-form-field {
    --mdc-filled-text-field-container-color: var(--color-surface-soft);
    --mdc-filled-text-field-input-text-color: var(--color-text);
    --mdc-filled-text-field-label-text-color: var(--color-text-muted);
    --mdc-filled-text-field-focus-label-text-color: var(--color-primary-strong);
    --mdc-filled-text-field-caret-color: var(--color-primary-strong);
    --mdc-filled-text-field-active-indicator-color: var(--color-border-strong);
    --mdc-filled-text-field-focus-active-indicator-color: var(--color-primary-strong);
    --mdc-outlined-text-field-input-text-color: var(--color-text);
    --mdc-outlined-text-field-label-text-color: var(--color-text-muted);
    --mdc-outlined-text-field-focus-label-text-color: var(--color-primary-strong);
    --mdc-outlined-text-field-outline-color: var(--color-control-border);
    --mdc-outlined-text-field-hover-outline-color: var(--color-primary);
    --mdc-outlined-text-field-focus-outline-color: var(--color-primary-strong);
    --mdc-outlined-text-field-focus-outline-width: 2px;
    --mdc-outlined-text-field-caret-color: var(--color-primary-strong);
  }
  html[data-theme=system] .mdc-text-field--filled,
  html[data-theme=system] .mdc-text-field--outlined,
  html[data-theme=system] .mat-mdc-text-field-wrapper {
    background: var(--color-surface-soft) !important;
    border-radius: var(--radius-md, 8px);
  }
  html[data-theme=system] .mat-mdc-form-field .mdc-floating-label,
  html[data-theme=system] .mat-mdc-form-field .mat-mdc-form-field-hint,
  html[data-theme=system] .mat-mdc-form-field .mat-mdc-form-field-required-marker,
  html[data-theme=system] .mat-mdc-select-arrow,
  html[data-theme=system] .mat-mdc-form-field-icon-suffix,
  html[data-theme=system] .mat-mdc-form-field-icon-prefix {
    color: var(--color-text-muted) !important;
    opacity: 1 !important;
  }
  html[data-theme=system] .mat-mdc-input-element {
    color: var(--color-text) !important;
    caret-color: var(--color-primary-strong) !important;
  }
  html[data-theme=system] .mat-mdc-input-element::placeholder {
    color: var(--color-text-light) !important;
    opacity: 0.9 !important;
  }
  html[data-theme=system] .mat-mdc-checkbox {
    --mdc-checkbox-unselected-icon-color: var(--color-control-border) !important;
    --mdc-checkbox-unselected-hover-icon-color: var(--color-primary) !important;
    --mdc-checkbox-unselected-focus-icon-color: var(--color-primary) !important;
    --mdc-checkbox-selected-icon-color: var(--color-primary) !important;
    --mdc-checkbox-selected-hover-icon-color: var(--color-primary-strong) !important;
    --mdc-checkbox-selected-checkmark-color: var(--color-on-primary) !important;
    --mdc-checkbox-selected-focus-icon-color: var(--color-primary-strong) !important;
  }
  html[data-theme=system] .mat-mdc-checkbox .mdc-form-field,
  html[data-theme=system] .mat-mdc-checkbox .mdc-label {
    color: var(--color-text) !important;
  }
  html[data-theme=system] .mat-mdc-radio-button {
    --mdc-radio-unselected-icon-color: var(--color-control-border) !important;
    --mdc-radio-unselected-hover-icon-color: var(--color-primary) !important;
    --mdc-radio-selected-icon-color: var(--color-primary) !important;
    --mdc-radio-selected-hover-icon-color: var(--color-primary-strong) !important;
  }
  html[data-theme=system] .mat-mdc-radio-button .mdc-label {
    color: var(--color-text) !important;
  }
  html[data-theme=system] .mat-mdc-slide-toggle {
    --mdc-switch-selected-track-color: var(--color-primary) !important;
    --mdc-switch-selected-handle-color: var(--color-on-primary) !important;
    --mdc-switch-unselected-track-color: rgba(255, 255, 255, 0.28) !important;
    --mdc-switch-unselected-handle-color: #cbd5e1 !important;
  }
  html[data-theme=system] .mat-mdc-outlined-button,
  html[data-theme=system] .mat-mdc-stroked-button {
    --mdc-outlined-button-outline-color: var(--color-control-border);
    --mdc-outlined-button-label-text-color: var(--color-text);
    border-color: var(--color-control-border) !important;
    color: var(--color-text) !important;
  }
  html[data-theme=system] .mat-mdc-outlined-button:hover:not(:disabled),
  html[data-theme=system] .mat-mdc-stroked-button:hover:not(:disabled) {
    border-color: var(--color-primary) !important;
    background-color: rgba(96, 165, 250, 0.12) !important;
  }
  html[data-theme=system] .mat-mdc-outlined-button[color=primary],
  html[data-theme=system] .mat-mdc-stroked-button[color=primary] {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
  }
  html[data-theme=system] .mat-mdc-outlined-button[color=primary]:hover:not(:disabled),
  html[data-theme=system] .mat-mdc-stroked-button[color=primary]:hover:not(:disabled) {
    background-color: rgba(96, 165, 250, 0.18) !important;
  }
  html[data-theme=system] .mat-mdc-button-base:disabled,
  html[data-theme=system] .mat-mdc-button-base[disabled] {
    opacity: 0.55 !important;
    color: var(--color-text-muted) !important;
    border-color: var(--color-border) !important;
  }
  html[data-theme=system] .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label {
    color: var(--color-text-muted) !important;
    opacity: 1 !important;
  }
  html[data-theme=system] .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
    color: var(--color-primary-strong) !important;
    font-weight: 700 !important;
  }
  html[data-theme=system] .mat-mdc-tab-header {
    border-bottom: 1px solid var(--color-border) !important;
  }
  html[data-theme=system] .mat-mdc-tab-header .mdc-tab-indicator__content--underline {
    border-color: var(--color-primary) !important;
    border-top-width: 3px !important;
  }
  html[data-theme=system] .mat-mdc-table {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
  }
  html[data-theme=system] .mat-mdc-header-row {
    background: var(--color-surface-soft) !important;
  }
  html[data-theme=system] .mat-mdc-header-cell {
    color: var(--color-text) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--color-border-strong) !important;
  }
  html[data-theme=system] .mat-mdc-cell {
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--color-border) !important;
  }
  html[data-theme=system] .mat-mdc-row:hover {
    background-color: rgba(96, 165, 250, 0.08) !important;
  }
  html[data-theme=system] .mat-mdc-paginator {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-top: 1px solid var(--color-border) !important;
  }
  html[data-theme=system] .mat-mdc-paginator .mat-mdc-paginator-range-label,
  html[data-theme=system] .mat-mdc-paginator .mat-mdc-paginator-page-size-label {
    color: var(--color-text) !important;
  }
  html[data-theme=system] .mat-mdc-paginator .mat-mdc-icon-button {
    color: var(--color-text) !important;
  }
  html[data-theme=system] .mat-mdc-paginator .mat-mdc-icon-button:disabled {
    color: rgba(255, 255, 255, 0.3) !important;
  }
  html[data-theme=system] .mat-mdc-select-panel,
  html[data-theme=system] .mat-mdc-menu-panel {
    background: var(--color-surface-elevated) !important;
    border: 1px solid var(--color-border-strong) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  }
  html[data-theme=system] .mat-mdc-option {
    color: var(--color-text) !important;
  }
  html[data-theme=system] .mat-mdc-option:hover:not(.mdc-list-item--disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
  }
  html[data-theme=system] .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
    background: rgba(96, 165, 250, 0.2) !important;
  }
  html[data-theme=system] .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
    color: var(--color-primary-strong) !important;
    font-weight: 600;
  }
  html[data-theme=system] .pill.healthy, html[data-theme=system] .pill.status-healthy, html[data-theme=system] .pill.status-favourable, html[data-theme=system] .pill.metric-good, html[data-theme=system] .pill.grade-green, html[data-theme=system] .pill.badge-success,
  html[data-theme=system] .badge.healthy,
  html[data-theme=system] .badge.status-healthy,
  html[data-theme=system] .badge.status-favourable,
  html[data-theme=system] .badge.metric-good,
  html[data-theme=system] .badge.grade-green,
  html[data-theme=system] .badge.badge-success,
  html[data-theme=system] .status-chip.healthy,
  html[data-theme=system] .status-chip.status-healthy,
  html[data-theme=system] .status-chip.status-favourable,
  html[data-theme=system] .status-chip.metric-good,
  html[data-theme=system] .status-chip.grade-green,
  html[data-theme=system] .status-chip.badge-success {
    background: rgba(52, 211, 153, 0.18) !important;
    border: 1px solid rgba(52, 211, 153, 0.5) !important;
    color: #34d399 !important;
    font-weight: 600;
  }
  html[data-theme=system] .pill.watch, html[data-theme=system] .pill.status-watch, html[data-theme=system] .pill.metric-watch, html[data-theme=system] .pill.grade-amber, html[data-theme=system] .pill.revise, html[data-theme=system] .pill.badge-warning,
  html[data-theme=system] .badge.watch,
  html[data-theme=system] .badge.status-watch,
  html[data-theme=system] .badge.metric-watch,
  html[data-theme=system] .badge.grade-amber,
  html[data-theme=system] .badge.revise,
  html[data-theme=system] .badge.badge-warning,
  html[data-theme=system] .status-chip.watch,
  html[data-theme=system] .status-chip.status-watch,
  html[data-theme=system] .status-chip.metric-watch,
  html[data-theme=system] .status-chip.grade-amber,
  html[data-theme=system] .status-chip.revise,
  html[data-theme=system] .status-chip.badge-warning {
    background: rgba(251, 191, 36, 0.18) !important;
    border: 1px solid rgba(251, 191, 36, 0.5) !important;
    color: #fbbf24 !important;
    font-weight: 600;
  }
  html[data-theme=system] .pill.critical, html[data-theme=system] .pill.status-critical, html[data-theme=system] .pill.metric-risk, html[data-theme=system] .pill.grade-red, html[data-theme=system] .pill.defer, html[data-theme=system] .pill.negative, html[data-theme=system] .pill.degraded, html[data-theme=system] .pill.badge-danger,
  html[data-theme=system] .badge.critical,
  html[data-theme=system] .badge.status-critical,
  html[data-theme=system] .badge.metric-risk,
  html[data-theme=system] .badge.grade-red,
  html[data-theme=system] .badge.defer,
  html[data-theme=system] .badge.negative,
  html[data-theme=system] .badge.degraded,
  html[data-theme=system] .badge.badge-danger,
  html[data-theme=system] .status-chip.critical,
  html[data-theme=system] .status-chip.status-critical,
  html[data-theme=system] .status-chip.metric-risk,
  html[data-theme=system] .status-chip.grade-red,
  html[data-theme=system] .status-chip.defer,
  html[data-theme=system] .status-chip.negative,
  html[data-theme=system] .status-chip.degraded,
  html[data-theme=system] .status-chip.badge-danger {
    background: rgba(248, 113, 113, 0.18) !important;
    border: 1px solid rgba(248, 113, 113, 0.5) !important;
    color: #f87171 !important;
    font-weight: 600;
  }
  html[data-theme=system] .pill.info, html[data-theme=system] .pill.status-info, html[data-theme=system] .pill.badge-info,
  html[data-theme=system] .badge.info,
  html[data-theme=system] .badge.status-info,
  html[data-theme=system] .badge.badge-info,
  html[data-theme=system] .status-chip.info,
  html[data-theme=system] .status-chip.status-info,
  html[data-theme=system] .status-chip.badge-info {
    background: rgba(96, 165, 250, 0.18) !important;
    border: 1px solid rgba(96, 165, 250, 0.5) !important;
    color: #60a5fa !important;
    font-weight: 600;
  }
  html[data-theme=system] {
    /* Text elements inside page-container */
    /* prettier-ignore */
  }
  html[data-theme=system] .page-container :where(h1, h2, h3, h4, h5, h6, p, span, small, label, td, th, li, a, strong, em) {
    color: var(--color-text);
  }
  html[data-theme=system] {
    /* prettier-ignore */
  }
  html[data-theme=system] .page-container :where(.page-subtitle, .subtitle, .kicker, .form-intro, .muted, .secondary, small, .hint-text) {
    color: var(--color-text-muted) !important;
  }
}
.mat-mdc-row:hover {
  background: var(--color-primary-soft);
}

.status-active {
  color: var(--color-success);
}

.status-inactive {
  color: var(--color-danger);
}

.content {
  background: var(--color-bg);
}

/* ============================================================================
   ACCOUNTS ENTERPRISE UX SHELL
   ============================================================================
   Shared presentation contract for the accounts module. This intentionally keeps
   behavior inside each routed page unchanged while normalizing the workspace,
   controls, analytics cards, tables, and responsive mobile presentation.
   ============================================================================ */
main.content > *:has(> app-accounts-layout) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

app-accounts-layout {
  color: var(--color-text);
}
app-accounts-layout .workspace-link {
  --workspace-icon: var(--color-primary);
}
app-accounts-layout .workspace-link mat-icon {
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--workspace-icon) 14%, transparent);
  color: var(--workspace-icon);
  font-size: 19px;
}
app-accounts-layout .workspace-link.workspace-tone-command {
  --workspace-icon: #1d4ed8;
}
app-accounts-layout .workspace-link.workspace-tone-money-in {
  --workspace-icon: #047857;
}
app-accounts-layout .workspace-link.workspace-tone-money-out {
  --workspace-icon: #b42318;
}
app-accounts-layout .workspace-link.workspace-tone-banking {
  --workspace-icon: #087f8c;
}
app-accounts-layout .workspace-link.workspace-tone-analytics {
  --workspace-icon: #7c3aed;
}
app-accounts-layout .workspace-link.workspace-tone-system {
  --workspace-icon: #a15c00;
}
app-accounts-layout .mobile-workspace-link {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
app-accounts-layout .mobile-workspace-link > span {
  min-width: 0;
}
app-accounts-layout .mobile-workspace-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
app-accounts-layout .mobile-workspace-link .workspace-expand-icon {
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
}
app-accounts-layout .mobile-workspace-link[aria-expanded=true] .workspace-expand-icon {
  transform: rotate(180deg);
}
app-accounts-layout .accounts-route-skeleton {
  display: grid;
  gap: 12px;
  width: min(100%, var(--page-max-width));
  margin: 0 auto;
}
app-accounts-layout .skeleton-heading,
app-accounts-layout .skeleton-kpi,
app-accounts-layout .skeleton-row {
  border-radius: 8px;
  background: linear-gradient(100deg, var(--color-surface-soft) 20%, var(--color-border) 38%, var(--color-surface-soft) 56%);
  background-size: 220% 100%;
  animation: accounts-route-skeleton 1.2s ease-in-out infinite;
}
app-accounts-layout .skeleton-heading {
  width: min(360px, 72%);
  height: 56px;
}
app-accounts-layout .skeleton-kpis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px) {
  app-accounts-layout .skeleton-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  app-accounts-layout .skeleton-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
app-accounts-layout .skeleton-kpi {
  height: 92px;
}
app-accounts-layout .skeleton-table {
  display: grid;
  gap: 1px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}
app-accounts-layout .skeleton-row {
  height: 42px;
  border-radius: 4px;
}
app-accounts-layout .mobile-workspace-pages {
  display: grid;
  gap: 4px;
  margin: -2px 0 4px 16px;
  padding-left: 10px;
  border-left: 2px solid var(--color-border);
}
app-accounts-layout .mobile-page-link {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
app-accounts-layout .mobile-page-link mat-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}
app-accounts-layout .mobile-page-link:hover, app-accounts-layout .mobile-page-link.mobile-page-link-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
app-accounts-layout .chart-toolbar {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}
app-accounts-layout .chart-toolbar strong {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 850;
}
app-accounts-layout .chart-toolbar .chart-toolbar-spacer {
  flex: 1 1 auto;
}
@media (max-width: 640px) {
  app-accounts-layout .chart-toolbar strong,
  app-accounts-layout .chart-toolbar .chart-toolbar-spacer {
    width: 100%;
  }
  app-accounts-layout .chart-toolbar button {
    flex: 1 1 calc(50% - 4px);
  }
}
app-accounts-layout form.form-grid,
app-accounts-layout form.dialog-form,
app-accounts-layout form.budget-editor,
app-accounts-layout form.assumption-editor,
app-accounts-layout form.capex-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
}
@media (min-width: 720px) {
  app-accounts-layout form.form-grid,
  app-accounts-layout form.dialog-form,
  app-accounts-layout form.budget-editor,
  app-accounts-layout form.assumption-editor,
  app-accounts-layout form.capex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1180px) {
  app-accounts-layout form.form-grid,
  app-accounts-layout form.dialog-form,
  app-accounts-layout form.budget-editor,
  app-accounts-layout form.assumption-editor,
  app-accounts-layout form.capex-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
app-accounts-layout form.form-grid mat-form-field,
app-accounts-layout form.form-grid app-customer-autocomplete,
app-accounts-layout form.form-grid .full-width,
app-accounts-layout form.dialog-form mat-form-field,
app-accounts-layout form.dialog-form app-customer-autocomplete,
app-accounts-layout form.dialog-form .full-width,
app-accounts-layout form.budget-editor mat-form-field,
app-accounts-layout form.budget-editor app-customer-autocomplete,
app-accounts-layout form.budget-editor .full-width,
app-accounts-layout form.assumption-editor mat-form-field,
app-accounts-layout form.assumption-editor app-customer-autocomplete,
app-accounts-layout form.assumption-editor .full-width,
app-accounts-layout form.capex-grid mat-form-field,
app-accounts-layout form.capex-grid app-customer-autocomplete,
app-accounts-layout form.capex-grid .full-width {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
app-accounts-layout form.form-grid .full-width,
app-accounts-layout form.form-grid .form-title,
app-accounts-layout form.form-grid .form-actions,
app-accounts-layout form.dialog-form .full-width,
app-accounts-layout form.dialog-form .form-title,
app-accounts-layout form.dialog-form .form-actions,
app-accounts-layout form.budget-editor .full-width,
app-accounts-layout form.budget-editor .form-title,
app-accounts-layout form.budget-editor .form-actions,
app-accounts-layout form.assumption-editor .full-width,
app-accounts-layout form.assumption-editor .form-title,
app-accounts-layout form.assumption-editor .form-actions,
app-accounts-layout form.capex-grid .full-width,
app-accounts-layout form.capex-grid .form-title,
app-accounts-layout form.capex-grid .form-actions {
  grid-column: 1/-1 !important;
}
app-accounts-layout .action-card mat-card-content,
app-accounts-layout .action-card .mat-mdc-card-content,
app-accounts-layout .form-card mat-card-content,
app-accounts-layout .form-card .mat-mdc-card-content {
  padding: 12px !important;
}
@media (min-width: 720px) {
  app-accounts-layout .action-card mat-card-content,
  app-accounts-layout .action-card .mat-mdc-card-content,
  app-accounts-layout .form-card mat-card-content,
  app-accounts-layout .form-card .mat-mdc-card-content {
    padding: 16px !important;
  }
}
app-accounts-layout .form-title,
app-accounts-layout .form-section-header {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--color-border);
}
app-accounts-layout .form-title h2,
app-accounts-layout .form-title h3,
app-accounts-layout .form-section-header h2,
app-accounts-layout .form-section-header h3 {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.3;
}
app-accounts-layout .form-title p,
app-accounts-layout .form-section-header p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}
app-accounts-layout .form-actions,
app-accounts-layout .dialog-actions,
app-accounts-layout mat-dialog-actions,
app-accounts-layout [mat-dialog-actions] {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-end !important;
  gap: 8px;
  width: 100%;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
app-accounts-layout .mat-mdc-card {
  color: var(--color-text);
}
app-accounts-layout .mat-mdc-card-header-text {
  min-width: 0;
}
app-accounts-layout .mat-mdc-form-field {
  --mdc-outlined-text-field-container-shape: 8px;
  --mdc-filled-text-field-container-shape: 8px;
  --mdc-outlined-text-field-outline-color: var(--color-border);
  --mdc-outlined-text-field-hover-outline-color: var(--color-primary);
  --mdc-outlined-text-field-focus-outline-color: var(--color-primary);
  --mdc-outlined-text-field-label-text-color: var(--color-text-muted);
  --mdc-outlined-text-field-input-text-color: var(--color-text);
  --mdc-filled-text-field-container-color: var(--color-surface-soft);
  --mdc-filled-text-field-input-text-color: var(--color-text);
  --mdc-filled-text-field-label-text-color: var(--color-text-muted);
}
app-accounts-layout .mat-mdc-select-value,
app-accounts-layout .mat-mdc-select-arrow,
app-accounts-layout .mat-mdc-input-element,
app-accounts-layout .mat-mdc-form-field-icon-prefix,
app-accounts-layout .mat-mdc-form-field-icon-suffix {
  color: var(--color-text) !important;
}
app-accounts-layout .mat-mdc-form-field-subscript-wrapper {
  color: var(--color-text-muted);
}
app-accounts-layout .mat-mdc-chip {
  border-radius: 8px !important;
}
app-accounts-layout .kpi-card,
app-accounts-layout .summary-card,
app-accounts-layout .financial-card,
app-accounts-layout .stat-card,
app-accounts-layout .balance-card {
  min-height: 96px !important;
  border-radius: 8px !important;
  border: 1px solid var(--color-border) !important;
  border-top: 4px solid var(--color-primary) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-1) !important;
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}
app-accounts-layout .kpi-card mat-card-content,
app-accounts-layout .kpi-card .mat-mdc-card-content,
app-accounts-layout .summary-card mat-card-content,
app-accounts-layout .summary-card .mat-mdc-card-content,
app-accounts-layout .financial-card mat-card-content,
app-accounts-layout .financial-card .mat-mdc-card-content,
app-accounts-layout .stat-card mat-card-content,
app-accounts-layout .stat-card .mat-mdc-card-content,
app-accounts-layout .balance-card mat-card-content,
app-accounts-layout .balance-card .mat-mdc-card-content {
  display: grid !important;
  min-height: auto !important;
  gap: 4px !important;
  align-content: center !important;
  padding: 9px 11px !important;
  text-align: left !important;
}
app-accounts-layout .kpi-card .kpi-label,
app-accounts-layout .kpi-card .summary-label,
app-accounts-layout .kpi-card .stat-label,
app-accounts-layout .summary-card .kpi-label,
app-accounts-layout .summary-card .summary-label,
app-accounts-layout .summary-card .stat-label,
app-accounts-layout .financial-card .kpi-label,
app-accounts-layout .financial-card .summary-label,
app-accounts-layout .financial-card .stat-label,
app-accounts-layout .stat-card .kpi-label,
app-accounts-layout .stat-card .summary-label,
app-accounts-layout .stat-card .stat-label,
app-accounts-layout .balance-card .kpi-label,
app-accounts-layout .balance-card .summary-label,
app-accounts-layout .balance-card .stat-label {
  color: var(--color-text-muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}
app-accounts-layout .kpi-card .kpi-value,
app-accounts-layout .kpi-card .summary-value,
app-accounts-layout .kpi-card .stat-value,
app-accounts-layout .kpi-card .amount,
app-accounts-layout .summary-card .kpi-value,
app-accounts-layout .summary-card .summary-value,
app-accounts-layout .summary-card .stat-value,
app-accounts-layout .summary-card .amount,
app-accounts-layout .financial-card .kpi-value,
app-accounts-layout .financial-card .summary-value,
app-accounts-layout .financial-card .stat-value,
app-accounts-layout .financial-card .amount,
app-accounts-layout .stat-card .kpi-value,
app-accounts-layout .stat-card .summary-value,
app-accounts-layout .stat-card .stat-value,
app-accounts-layout .stat-card .amount,
app-accounts-layout .balance-card .kpi-value,
app-accounts-layout .balance-card .summary-value,
app-accounts-layout .balance-card .stat-value,
app-accounts-layout .balance-card .amount {
  color: var(--color-text) !important;
  font-size: clamp(1.12rem, 1rem + 0.7vw, 1.55rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}
app-accounts-layout .kpi-card small,
app-accounts-layout .kpi-card .kpi-subtext,
app-accounts-layout .kpi-card .kpi-detail-subtext,
app-accounts-layout .summary-card small,
app-accounts-layout .summary-card .kpi-subtext,
app-accounts-layout .summary-card .kpi-detail-subtext,
app-accounts-layout .financial-card small,
app-accounts-layout .financial-card .kpi-subtext,
app-accounts-layout .financial-card .kpi-detail-subtext,
app-accounts-layout .stat-card small,
app-accounts-layout .stat-card .kpi-subtext,
app-accounts-layout .stat-card .kpi-detail-subtext,
app-accounts-layout .balance-card small,
app-accounts-layout .balance-card .kpi-subtext,
app-accounts-layout .balance-card .kpi-detail-subtext {
  color: var(--color-text-muted) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}
app-accounts-layout .kpi-card.success, app-accounts-layout .kpi-card.positive, app-accounts-layout .kpi-card.rag-good, app-accounts-layout .kpi-card.income, app-accounts-layout .kpi-card.total,
app-accounts-layout .summary-card.success,
app-accounts-layout .summary-card.positive,
app-accounts-layout .summary-card.rag-good,
app-accounts-layout .summary-card.income,
app-accounts-layout .summary-card.total,
app-accounts-layout .financial-card.success,
app-accounts-layout .financial-card.positive,
app-accounts-layout .financial-card.rag-good,
app-accounts-layout .financial-card.income,
app-accounts-layout .financial-card.total,
app-accounts-layout .stat-card.success,
app-accounts-layout .stat-card.positive,
app-accounts-layout .stat-card.rag-good,
app-accounts-layout .stat-card.income,
app-accounts-layout .stat-card.total,
app-accounts-layout .balance-card.success,
app-accounts-layout .balance-card.positive,
app-accounts-layout .balance-card.rag-good,
app-accounts-layout .balance-card.income,
app-accounts-layout .balance-card.total {
  border-top-color: var(--color-success) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 7%, transparent), transparent 58%), var(--color-surface) !important;
}
app-accounts-layout .kpi-card.success .kpi-value,
app-accounts-layout .kpi-card.success .summary-value,
app-accounts-layout .kpi-card.success .stat-value,
app-accounts-layout .kpi-card.success .amount,
app-accounts-layout .kpi-card.success mat-icon, app-accounts-layout .kpi-card.positive .kpi-value,
app-accounts-layout .kpi-card.positive .summary-value,
app-accounts-layout .kpi-card.positive .stat-value,
app-accounts-layout .kpi-card.positive .amount,
app-accounts-layout .kpi-card.positive mat-icon, app-accounts-layout .kpi-card.rag-good .kpi-value,
app-accounts-layout .kpi-card.rag-good .summary-value,
app-accounts-layout .kpi-card.rag-good .stat-value,
app-accounts-layout .kpi-card.rag-good .amount,
app-accounts-layout .kpi-card.rag-good mat-icon, app-accounts-layout .kpi-card.income .kpi-value,
app-accounts-layout .kpi-card.income .summary-value,
app-accounts-layout .kpi-card.income .stat-value,
app-accounts-layout .kpi-card.income .amount,
app-accounts-layout .kpi-card.income mat-icon, app-accounts-layout .kpi-card.total .kpi-value,
app-accounts-layout .kpi-card.total .summary-value,
app-accounts-layout .kpi-card.total .stat-value,
app-accounts-layout .kpi-card.total .amount,
app-accounts-layout .kpi-card.total mat-icon,
app-accounts-layout .summary-card.success .kpi-value,
app-accounts-layout .summary-card.success .summary-value,
app-accounts-layout .summary-card.success .stat-value,
app-accounts-layout .summary-card.success .amount,
app-accounts-layout .summary-card.success mat-icon,
app-accounts-layout .summary-card.positive .kpi-value,
app-accounts-layout .summary-card.positive .summary-value,
app-accounts-layout .summary-card.positive .stat-value,
app-accounts-layout .summary-card.positive .amount,
app-accounts-layout .summary-card.positive mat-icon,
app-accounts-layout .summary-card.rag-good .kpi-value,
app-accounts-layout .summary-card.rag-good .summary-value,
app-accounts-layout .summary-card.rag-good .stat-value,
app-accounts-layout .summary-card.rag-good .amount,
app-accounts-layout .summary-card.rag-good mat-icon,
app-accounts-layout .summary-card.income .kpi-value,
app-accounts-layout .summary-card.income .summary-value,
app-accounts-layout .summary-card.income .stat-value,
app-accounts-layout .summary-card.income .amount,
app-accounts-layout .summary-card.income mat-icon,
app-accounts-layout .summary-card.total .kpi-value,
app-accounts-layout .summary-card.total .summary-value,
app-accounts-layout .summary-card.total .stat-value,
app-accounts-layout .summary-card.total .amount,
app-accounts-layout .summary-card.total mat-icon,
app-accounts-layout .financial-card.success .kpi-value,
app-accounts-layout .financial-card.success .summary-value,
app-accounts-layout .financial-card.success .stat-value,
app-accounts-layout .financial-card.success .amount,
app-accounts-layout .financial-card.success mat-icon,
app-accounts-layout .financial-card.positive .kpi-value,
app-accounts-layout .financial-card.positive .summary-value,
app-accounts-layout .financial-card.positive .stat-value,
app-accounts-layout .financial-card.positive .amount,
app-accounts-layout .financial-card.positive mat-icon,
app-accounts-layout .financial-card.rag-good .kpi-value,
app-accounts-layout .financial-card.rag-good .summary-value,
app-accounts-layout .financial-card.rag-good .stat-value,
app-accounts-layout .financial-card.rag-good .amount,
app-accounts-layout .financial-card.rag-good mat-icon,
app-accounts-layout .financial-card.income .kpi-value,
app-accounts-layout .financial-card.income .summary-value,
app-accounts-layout .financial-card.income .stat-value,
app-accounts-layout .financial-card.income .amount,
app-accounts-layout .financial-card.income mat-icon,
app-accounts-layout .financial-card.total .kpi-value,
app-accounts-layout .financial-card.total .summary-value,
app-accounts-layout .financial-card.total .stat-value,
app-accounts-layout .financial-card.total .amount,
app-accounts-layout .financial-card.total mat-icon,
app-accounts-layout .stat-card.success .kpi-value,
app-accounts-layout .stat-card.success .summary-value,
app-accounts-layout .stat-card.success .stat-value,
app-accounts-layout .stat-card.success .amount,
app-accounts-layout .stat-card.success mat-icon,
app-accounts-layout .stat-card.positive .kpi-value,
app-accounts-layout .stat-card.positive .summary-value,
app-accounts-layout .stat-card.positive .stat-value,
app-accounts-layout .stat-card.positive .amount,
app-accounts-layout .stat-card.positive mat-icon,
app-accounts-layout .stat-card.rag-good .kpi-value,
app-accounts-layout .stat-card.rag-good .summary-value,
app-accounts-layout .stat-card.rag-good .stat-value,
app-accounts-layout .stat-card.rag-good .amount,
app-accounts-layout .stat-card.rag-good mat-icon,
app-accounts-layout .stat-card.income .kpi-value,
app-accounts-layout .stat-card.income .summary-value,
app-accounts-layout .stat-card.income .stat-value,
app-accounts-layout .stat-card.income .amount,
app-accounts-layout .stat-card.income mat-icon,
app-accounts-layout .stat-card.total .kpi-value,
app-accounts-layout .stat-card.total .summary-value,
app-accounts-layout .stat-card.total .stat-value,
app-accounts-layout .stat-card.total .amount,
app-accounts-layout .stat-card.total mat-icon,
app-accounts-layout .balance-card.success .kpi-value,
app-accounts-layout .balance-card.success .summary-value,
app-accounts-layout .balance-card.success .stat-value,
app-accounts-layout .balance-card.success .amount,
app-accounts-layout .balance-card.success mat-icon,
app-accounts-layout .balance-card.positive .kpi-value,
app-accounts-layout .balance-card.positive .summary-value,
app-accounts-layout .balance-card.positive .stat-value,
app-accounts-layout .balance-card.positive .amount,
app-accounts-layout .balance-card.positive mat-icon,
app-accounts-layout .balance-card.rag-good .kpi-value,
app-accounts-layout .balance-card.rag-good .summary-value,
app-accounts-layout .balance-card.rag-good .stat-value,
app-accounts-layout .balance-card.rag-good .amount,
app-accounts-layout .balance-card.rag-good mat-icon,
app-accounts-layout .balance-card.income .kpi-value,
app-accounts-layout .balance-card.income .summary-value,
app-accounts-layout .balance-card.income .stat-value,
app-accounts-layout .balance-card.income .amount,
app-accounts-layout .balance-card.income mat-icon,
app-accounts-layout .balance-card.total .kpi-value,
app-accounts-layout .balance-card.total .summary-value,
app-accounts-layout .balance-card.total .stat-value,
app-accounts-layout .balance-card.total .amount,
app-accounts-layout .balance-card.total mat-icon {
  color: var(--color-success) !important;
}
app-accounts-layout .kpi-card.warning, app-accounts-layout .kpi-card.rag-warn, app-accounts-layout .kpi-card.pending, app-accounts-layout .kpi-card.cash, app-accounts-layout .kpi-card.outstanding,
app-accounts-layout .summary-card.warning,
app-accounts-layout .summary-card.rag-warn,
app-accounts-layout .summary-card.pending,
app-accounts-layout .summary-card.cash,
app-accounts-layout .summary-card.outstanding,
app-accounts-layout .financial-card.warning,
app-accounts-layout .financial-card.rag-warn,
app-accounts-layout .financial-card.pending,
app-accounts-layout .financial-card.cash,
app-accounts-layout .financial-card.outstanding,
app-accounts-layout .stat-card.warning,
app-accounts-layout .stat-card.rag-warn,
app-accounts-layout .stat-card.pending,
app-accounts-layout .stat-card.cash,
app-accounts-layout .stat-card.outstanding,
app-accounts-layout .balance-card.warning,
app-accounts-layout .balance-card.rag-warn,
app-accounts-layout .balance-card.pending,
app-accounts-layout .balance-card.cash,
app-accounts-layout .balance-card.outstanding {
  border-top-color: var(--color-warning) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 8%, transparent), transparent 58%), var(--color-surface) !important;
}
app-accounts-layout .kpi-card.warning .kpi-value,
app-accounts-layout .kpi-card.warning .summary-value,
app-accounts-layout .kpi-card.warning .stat-value,
app-accounts-layout .kpi-card.warning .amount,
app-accounts-layout .kpi-card.warning mat-icon, app-accounts-layout .kpi-card.rag-warn .kpi-value,
app-accounts-layout .kpi-card.rag-warn .summary-value,
app-accounts-layout .kpi-card.rag-warn .stat-value,
app-accounts-layout .kpi-card.rag-warn .amount,
app-accounts-layout .kpi-card.rag-warn mat-icon, app-accounts-layout .kpi-card.pending .kpi-value,
app-accounts-layout .kpi-card.pending .summary-value,
app-accounts-layout .kpi-card.pending .stat-value,
app-accounts-layout .kpi-card.pending .amount,
app-accounts-layout .kpi-card.pending mat-icon, app-accounts-layout .kpi-card.cash .kpi-value,
app-accounts-layout .kpi-card.cash .summary-value,
app-accounts-layout .kpi-card.cash .stat-value,
app-accounts-layout .kpi-card.cash .amount,
app-accounts-layout .kpi-card.cash mat-icon, app-accounts-layout .kpi-card.outstanding .kpi-value,
app-accounts-layout .kpi-card.outstanding .summary-value,
app-accounts-layout .kpi-card.outstanding .stat-value,
app-accounts-layout .kpi-card.outstanding .amount,
app-accounts-layout .kpi-card.outstanding mat-icon,
app-accounts-layout .summary-card.warning .kpi-value,
app-accounts-layout .summary-card.warning .summary-value,
app-accounts-layout .summary-card.warning .stat-value,
app-accounts-layout .summary-card.warning .amount,
app-accounts-layout .summary-card.warning mat-icon,
app-accounts-layout .summary-card.rag-warn .kpi-value,
app-accounts-layout .summary-card.rag-warn .summary-value,
app-accounts-layout .summary-card.rag-warn .stat-value,
app-accounts-layout .summary-card.rag-warn .amount,
app-accounts-layout .summary-card.rag-warn mat-icon,
app-accounts-layout .summary-card.pending .kpi-value,
app-accounts-layout .summary-card.pending .summary-value,
app-accounts-layout .summary-card.pending .stat-value,
app-accounts-layout .summary-card.pending .amount,
app-accounts-layout .summary-card.pending mat-icon,
app-accounts-layout .summary-card.cash .kpi-value,
app-accounts-layout .summary-card.cash .summary-value,
app-accounts-layout .summary-card.cash .stat-value,
app-accounts-layout .summary-card.cash .amount,
app-accounts-layout .summary-card.cash mat-icon,
app-accounts-layout .summary-card.outstanding .kpi-value,
app-accounts-layout .summary-card.outstanding .summary-value,
app-accounts-layout .summary-card.outstanding .stat-value,
app-accounts-layout .summary-card.outstanding .amount,
app-accounts-layout .summary-card.outstanding mat-icon,
app-accounts-layout .financial-card.warning .kpi-value,
app-accounts-layout .financial-card.warning .summary-value,
app-accounts-layout .financial-card.warning .stat-value,
app-accounts-layout .financial-card.warning .amount,
app-accounts-layout .financial-card.warning mat-icon,
app-accounts-layout .financial-card.rag-warn .kpi-value,
app-accounts-layout .financial-card.rag-warn .summary-value,
app-accounts-layout .financial-card.rag-warn .stat-value,
app-accounts-layout .financial-card.rag-warn .amount,
app-accounts-layout .financial-card.rag-warn mat-icon,
app-accounts-layout .financial-card.pending .kpi-value,
app-accounts-layout .financial-card.pending .summary-value,
app-accounts-layout .financial-card.pending .stat-value,
app-accounts-layout .financial-card.pending .amount,
app-accounts-layout .financial-card.pending mat-icon,
app-accounts-layout .financial-card.cash .kpi-value,
app-accounts-layout .financial-card.cash .summary-value,
app-accounts-layout .financial-card.cash .stat-value,
app-accounts-layout .financial-card.cash .amount,
app-accounts-layout .financial-card.cash mat-icon,
app-accounts-layout .financial-card.outstanding .kpi-value,
app-accounts-layout .financial-card.outstanding .summary-value,
app-accounts-layout .financial-card.outstanding .stat-value,
app-accounts-layout .financial-card.outstanding .amount,
app-accounts-layout .financial-card.outstanding mat-icon,
app-accounts-layout .stat-card.warning .kpi-value,
app-accounts-layout .stat-card.warning .summary-value,
app-accounts-layout .stat-card.warning .stat-value,
app-accounts-layout .stat-card.warning .amount,
app-accounts-layout .stat-card.warning mat-icon,
app-accounts-layout .stat-card.rag-warn .kpi-value,
app-accounts-layout .stat-card.rag-warn .summary-value,
app-accounts-layout .stat-card.rag-warn .stat-value,
app-accounts-layout .stat-card.rag-warn .amount,
app-accounts-layout .stat-card.rag-warn mat-icon,
app-accounts-layout .stat-card.pending .kpi-value,
app-accounts-layout .stat-card.pending .summary-value,
app-accounts-layout .stat-card.pending .stat-value,
app-accounts-layout .stat-card.pending .amount,
app-accounts-layout .stat-card.pending mat-icon,
app-accounts-layout .stat-card.cash .kpi-value,
app-accounts-layout .stat-card.cash .summary-value,
app-accounts-layout .stat-card.cash .stat-value,
app-accounts-layout .stat-card.cash .amount,
app-accounts-layout .stat-card.cash mat-icon,
app-accounts-layout .stat-card.outstanding .kpi-value,
app-accounts-layout .stat-card.outstanding .summary-value,
app-accounts-layout .stat-card.outstanding .stat-value,
app-accounts-layout .stat-card.outstanding .amount,
app-accounts-layout .stat-card.outstanding mat-icon,
app-accounts-layout .balance-card.warning .kpi-value,
app-accounts-layout .balance-card.warning .summary-value,
app-accounts-layout .balance-card.warning .stat-value,
app-accounts-layout .balance-card.warning .amount,
app-accounts-layout .balance-card.warning mat-icon,
app-accounts-layout .balance-card.rag-warn .kpi-value,
app-accounts-layout .balance-card.rag-warn .summary-value,
app-accounts-layout .balance-card.rag-warn .stat-value,
app-accounts-layout .balance-card.rag-warn .amount,
app-accounts-layout .balance-card.rag-warn mat-icon,
app-accounts-layout .balance-card.pending .kpi-value,
app-accounts-layout .balance-card.pending .summary-value,
app-accounts-layout .balance-card.pending .stat-value,
app-accounts-layout .balance-card.pending .amount,
app-accounts-layout .balance-card.pending mat-icon,
app-accounts-layout .balance-card.cash .kpi-value,
app-accounts-layout .balance-card.cash .summary-value,
app-accounts-layout .balance-card.cash .stat-value,
app-accounts-layout .balance-card.cash .amount,
app-accounts-layout .balance-card.cash mat-icon,
app-accounts-layout .balance-card.outstanding .kpi-value,
app-accounts-layout .balance-card.outstanding .summary-value,
app-accounts-layout .balance-card.outstanding .stat-value,
app-accounts-layout .balance-card.outstanding .amount,
app-accounts-layout .balance-card.outstanding mat-icon {
  color: var(--color-warning) !important;
}
app-accounts-layout .kpi-card.danger, app-accounts-layout .kpi-card.negative, app-accounts-layout .kpi-card.rag-risk, app-accounts-layout .kpi-card.expense,
app-accounts-layout .summary-card.danger,
app-accounts-layout .summary-card.negative,
app-accounts-layout .summary-card.rag-risk,
app-accounts-layout .summary-card.expense,
app-accounts-layout .financial-card.danger,
app-accounts-layout .financial-card.negative,
app-accounts-layout .financial-card.rag-risk,
app-accounts-layout .financial-card.expense,
app-accounts-layout .stat-card.danger,
app-accounts-layout .stat-card.negative,
app-accounts-layout .stat-card.rag-risk,
app-accounts-layout .stat-card.expense,
app-accounts-layout .balance-card.danger,
app-accounts-layout .balance-card.negative,
app-accounts-layout .balance-card.rag-risk,
app-accounts-layout .balance-card.expense {
  border-top-color: var(--color-danger) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 8%, transparent), transparent 58%), var(--color-surface) !important;
}
app-accounts-layout .kpi-card.danger .kpi-value,
app-accounts-layout .kpi-card.danger .summary-value,
app-accounts-layout .kpi-card.danger .stat-value,
app-accounts-layout .kpi-card.danger .amount,
app-accounts-layout .kpi-card.danger mat-icon, app-accounts-layout .kpi-card.negative .kpi-value,
app-accounts-layout .kpi-card.negative .summary-value,
app-accounts-layout .kpi-card.negative .stat-value,
app-accounts-layout .kpi-card.negative .amount,
app-accounts-layout .kpi-card.negative mat-icon, app-accounts-layout .kpi-card.rag-risk .kpi-value,
app-accounts-layout .kpi-card.rag-risk .summary-value,
app-accounts-layout .kpi-card.rag-risk .stat-value,
app-accounts-layout .kpi-card.rag-risk .amount,
app-accounts-layout .kpi-card.rag-risk mat-icon, app-accounts-layout .kpi-card.expense .kpi-value,
app-accounts-layout .kpi-card.expense .summary-value,
app-accounts-layout .kpi-card.expense .stat-value,
app-accounts-layout .kpi-card.expense .amount,
app-accounts-layout .kpi-card.expense mat-icon,
app-accounts-layout .summary-card.danger .kpi-value,
app-accounts-layout .summary-card.danger .summary-value,
app-accounts-layout .summary-card.danger .stat-value,
app-accounts-layout .summary-card.danger .amount,
app-accounts-layout .summary-card.danger mat-icon,
app-accounts-layout .summary-card.negative .kpi-value,
app-accounts-layout .summary-card.negative .summary-value,
app-accounts-layout .summary-card.negative .stat-value,
app-accounts-layout .summary-card.negative .amount,
app-accounts-layout .summary-card.negative mat-icon,
app-accounts-layout .summary-card.rag-risk .kpi-value,
app-accounts-layout .summary-card.rag-risk .summary-value,
app-accounts-layout .summary-card.rag-risk .stat-value,
app-accounts-layout .summary-card.rag-risk .amount,
app-accounts-layout .summary-card.rag-risk mat-icon,
app-accounts-layout .summary-card.expense .kpi-value,
app-accounts-layout .summary-card.expense .summary-value,
app-accounts-layout .summary-card.expense .stat-value,
app-accounts-layout .summary-card.expense .amount,
app-accounts-layout .summary-card.expense mat-icon,
app-accounts-layout .financial-card.danger .kpi-value,
app-accounts-layout .financial-card.danger .summary-value,
app-accounts-layout .financial-card.danger .stat-value,
app-accounts-layout .financial-card.danger .amount,
app-accounts-layout .financial-card.danger mat-icon,
app-accounts-layout .financial-card.negative .kpi-value,
app-accounts-layout .financial-card.negative .summary-value,
app-accounts-layout .financial-card.negative .stat-value,
app-accounts-layout .financial-card.negative .amount,
app-accounts-layout .financial-card.negative mat-icon,
app-accounts-layout .financial-card.rag-risk .kpi-value,
app-accounts-layout .financial-card.rag-risk .summary-value,
app-accounts-layout .financial-card.rag-risk .stat-value,
app-accounts-layout .financial-card.rag-risk .amount,
app-accounts-layout .financial-card.rag-risk mat-icon,
app-accounts-layout .financial-card.expense .kpi-value,
app-accounts-layout .financial-card.expense .summary-value,
app-accounts-layout .financial-card.expense .stat-value,
app-accounts-layout .financial-card.expense .amount,
app-accounts-layout .financial-card.expense mat-icon,
app-accounts-layout .stat-card.danger .kpi-value,
app-accounts-layout .stat-card.danger .summary-value,
app-accounts-layout .stat-card.danger .stat-value,
app-accounts-layout .stat-card.danger .amount,
app-accounts-layout .stat-card.danger mat-icon,
app-accounts-layout .stat-card.negative .kpi-value,
app-accounts-layout .stat-card.negative .summary-value,
app-accounts-layout .stat-card.negative .stat-value,
app-accounts-layout .stat-card.negative .amount,
app-accounts-layout .stat-card.negative mat-icon,
app-accounts-layout .stat-card.rag-risk .kpi-value,
app-accounts-layout .stat-card.rag-risk .summary-value,
app-accounts-layout .stat-card.rag-risk .stat-value,
app-accounts-layout .stat-card.rag-risk .amount,
app-accounts-layout .stat-card.rag-risk mat-icon,
app-accounts-layout .stat-card.expense .kpi-value,
app-accounts-layout .stat-card.expense .summary-value,
app-accounts-layout .stat-card.expense .stat-value,
app-accounts-layout .stat-card.expense .amount,
app-accounts-layout .stat-card.expense mat-icon,
app-accounts-layout .balance-card.danger .kpi-value,
app-accounts-layout .balance-card.danger .summary-value,
app-accounts-layout .balance-card.danger .stat-value,
app-accounts-layout .balance-card.danger .amount,
app-accounts-layout .balance-card.danger mat-icon,
app-accounts-layout .balance-card.negative .kpi-value,
app-accounts-layout .balance-card.negative .summary-value,
app-accounts-layout .balance-card.negative .stat-value,
app-accounts-layout .balance-card.negative .amount,
app-accounts-layout .balance-card.negative mat-icon,
app-accounts-layout .balance-card.rag-risk .kpi-value,
app-accounts-layout .balance-card.rag-risk .summary-value,
app-accounts-layout .balance-card.rag-risk .stat-value,
app-accounts-layout .balance-card.rag-risk .amount,
app-accounts-layout .balance-card.rag-risk mat-icon,
app-accounts-layout .balance-card.expense .kpi-value,
app-accounts-layout .balance-card.expense .summary-value,
app-accounts-layout .balance-card.expense .stat-value,
app-accounts-layout .balance-card.expense .amount,
app-accounts-layout .balance-card.expense mat-icon {
  color: var(--color-danger) !important;
}
app-accounts-layout .kpi-card.info, app-accounts-layout .kpi-card.bank, app-accounts-layout .kpi-card.neutral,
app-accounts-layout .summary-card.info,
app-accounts-layout .summary-card.bank,
app-accounts-layout .summary-card.neutral,
app-accounts-layout .financial-card.info,
app-accounts-layout .financial-card.bank,
app-accounts-layout .financial-card.neutral,
app-accounts-layout .stat-card.info,
app-accounts-layout .stat-card.bank,
app-accounts-layout .stat-card.neutral,
app-accounts-layout .balance-card.info,
app-accounts-layout .balance-card.bank,
app-accounts-layout .balance-card.neutral {
  border-top-color: var(--color-primary) !important;
}
app-accounts-layout .kpi-card.total-card, app-accounts-layout .kpi-card.total-revenue, app-accounts-layout .kpi-card.unpaid-amount, app-accounts-layout .kpi-card.overdue-risk, app-accounts-layout .kpi-card.summary-card-total,
app-accounts-layout .summary-card.total-card,
app-accounts-layout .summary-card.total-revenue,
app-accounts-layout .summary-card.unpaid-amount,
app-accounts-layout .summary-card.overdue-risk,
app-accounts-layout .summary-card.summary-card-total,
app-accounts-layout .financial-card.total-card,
app-accounts-layout .financial-card.total-revenue,
app-accounts-layout .financial-card.unpaid-amount,
app-accounts-layout .financial-card.overdue-risk,
app-accounts-layout .financial-card.summary-card-total,
app-accounts-layout .stat-card.total-card,
app-accounts-layout .stat-card.total-revenue,
app-accounts-layout .stat-card.unpaid-amount,
app-accounts-layout .stat-card.overdue-risk,
app-accounts-layout .stat-card.summary-card-total,
app-accounts-layout .balance-card.total-card,
app-accounts-layout .balance-card.total-revenue,
app-accounts-layout .balance-card.unpaid-amount,
app-accounts-layout .balance-card.overdue-risk,
app-accounts-layout .balance-card.summary-card-total {
  border-top-color: var(--color-danger) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 8%, transparent), transparent 58%), var(--color-surface) !important;
}
app-accounts-layout .kpi-card.approved-card, app-accounts-layout .kpi-card.paid-amount, app-accounts-layout .kpi-card.collection-rate, app-accounts-layout .kpi-card.summary-card-records,
app-accounts-layout .summary-card.approved-card,
app-accounts-layout .summary-card.paid-amount,
app-accounts-layout .summary-card.collection-rate,
app-accounts-layout .summary-card.summary-card-records,
app-accounts-layout .financial-card.approved-card,
app-accounts-layout .financial-card.paid-amount,
app-accounts-layout .financial-card.collection-rate,
app-accounts-layout .financial-card.summary-card-records,
app-accounts-layout .stat-card.approved-card,
app-accounts-layout .stat-card.paid-amount,
app-accounts-layout .stat-card.collection-rate,
app-accounts-layout .stat-card.summary-card-records,
app-accounts-layout .balance-card.approved-card,
app-accounts-layout .balance-card.paid-amount,
app-accounts-layout .balance-card.collection-rate,
app-accounts-layout .balance-card.summary-card-records {
  border-top-color: var(--color-success) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 7%, transparent), transparent 58%), var(--color-surface) !important;
}
app-accounts-layout .kpi-card.pending-card, app-accounts-layout .kpi-card.payment-metric, app-accounts-layout .kpi-card.concentration, app-accounts-layout .kpi-card.next-due, app-accounts-layout .kpi-card.summary-card-categories,
app-accounts-layout .summary-card.pending-card,
app-accounts-layout .summary-card.payment-metric,
app-accounts-layout .summary-card.concentration,
app-accounts-layout .summary-card.next-due,
app-accounts-layout .summary-card.summary-card-categories,
app-accounts-layout .financial-card.pending-card,
app-accounts-layout .financial-card.payment-metric,
app-accounts-layout .financial-card.concentration,
app-accounts-layout .financial-card.next-due,
app-accounts-layout .financial-card.summary-card-categories,
app-accounts-layout .stat-card.pending-card,
app-accounts-layout .stat-card.payment-metric,
app-accounts-layout .stat-card.concentration,
app-accounts-layout .stat-card.next-due,
app-accounts-layout .stat-card.summary-card-categories,
app-accounts-layout .balance-card.pending-card,
app-accounts-layout .balance-card.payment-metric,
app-accounts-layout .balance-card.concentration,
app-accounts-layout .balance-card.next-due,
app-accounts-layout .balance-card.summary-card-categories {
  border-top-color: var(--color-warning) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 8%, transparent), transparent 58%), var(--color-surface) !important;
}
app-accounts-layout .chart-legend-wrapper {
  gap: 8px !important;
}
app-accounts-layout .chart-legend-wrapper .chart-html-legend {
  justify-content: center;
  gap: 8px !important;
  max-height: 44px !important;
  border-top-color: var(--color-border) !important;
}
app-accounts-layout .chart-legend-wrapper .chart-html-legend.expanded {
  max-height: 112px !important;
}
app-accounts-layout .chart-legend-wrapper .legend-item {
  max-width: 220px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  background: var(--color-surface-soft) !important;
  color: var(--color-text) !important;
  font-weight: 650 !important;
}
app-accounts-layout .chart-legend-wrapper .legend-toggle-btn {
  border-radius: 8px !important;
}
app-accounts-layout .chart-container,
app-accounts-layout .chart-frame,
app-accounts-layout .chart-content,
app-accounts-layout .expense-chart-content {
  min-width: 0;
}
app-accounts-layout .visual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}
@media (min-width: 900px) {
  app-accounts-layout .visual-grid {
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  }
}
app-accounts-layout .legend-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px) {
  app-accounts-layout .legend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
app-accounts-layout .legend-card {
  min-width: 0;
  border-radius: 8px !important;
  background: var(--color-surface-soft) !important;
  color: var(--color-text) !important;
}
app-accounts-layout .pie-chart {
  width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto;
}
app-accounts-layout .pie-hole {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}
app-accounts-layout .table-card mat-card-content,
app-accounts-layout .purchase-table-card mat-card-content {
  padding: 0 !important;
}
app-accounts-layout .table-card .filter-section,
app-accounts-layout .purchase-table-card .filter-section {
  margin: 16px;
}
app-accounts-layout .mat-mdc-table,
app-accounts-layout table[mat-table] {
  min-width: 760px;
}
app-accounts-layout .responsive-table-wrapper + .mobile-card-list {
  margin-top: 12px;
}
app-accounts-layout .mobile-row-card {
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
app-accounts-layout .mobile-row-card .card-header-row {
  border-bottom-color: var(--color-border);
}
app-accounts-layout .mobile-row-card .detail-item .label {
  letter-spacing: 0;
}
app-accounts-layout .empty-state,
app-accounts-layout .empty-chart {
  color: var(--color-text-muted);
}

/* Keep expansion content visually balanced across feature modules. */
.mat-expansion-panel-body {
  padding: 12px 16px 16px !important;
}

/* Workspace navigation already provides parent context and navigation. */
.accounts-layout-wrapper app-back-button,
.accounts-layout-wrapper .back-button,
.accounts-layout-wrapper .back-to-parent,
.admin-layout-wrapper app-back-button,
.admin-layout-wrapper .back-button,
.admin-layout-wrapper .back-to-parent {
  display: none !important;
}

@keyframes accounts-route-skeleton {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}
app-admin-layout .admin-filter-panel {
  margin-bottom: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  overflow: hidden;
}
app-admin-layout .admin-filter-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
app-admin-layout .admin-filter-panel > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
app-admin-layout .admin-filter-panel > summary::-webkit-details-marker {
  display: none;
}
app-admin-layout .admin-filter-panel[open] .admin-filter-chevron {
  transform: rotate(180deg);
}
app-admin-layout .admin-filter-panel .admin-filter-chevron {
  transition: transform var(--transition-base);
}
app-admin-layout .admin-filter-panel > :not(summary) {
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
app-admin-layout .admin-route-skeleton {
  display: grid;
  gap: 10px;
}
app-admin-layout .admin-route-skeleton > div {
  border-radius: 6px;
  background: linear-gradient(100deg, var(--color-surface-soft) 20%, var(--color-border) 38%, var(--color-surface-soft) 56%);
  background-size: 220% 100%;
  animation: accounts-route-skeleton 1.2s ease-in-out infinite;
}
app-admin-layout .admin-route-skeleton .skeleton-title {
  width: min(360px, 72%);
  height: 54px;
}
app-admin-layout .admin-route-skeleton .skeleton-controls {
  height: 48px;
}
app-admin-layout .admin-route-skeleton .skeleton-row {
  height: 44px;
}
app-admin-layout .page-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 !important;
}
app-admin-layout .page-header,
app-admin-layout .header-section,
app-admin-layout .table-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
app-admin-layout .header-actions,
app-admin-layout .form-actions,
app-admin-layout .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
app-admin-layout .table-container,
app-admin-layout .table-wrapper {
  overflow-x: auto;
}
app-admin-layout table {
  width: 100%;
}
app-admin-layout mat-paginator {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-soft) !important;
}
@media (max-width: 640px) {
  app-admin-layout .page-header,
  app-admin-layout .header-section,
  app-admin-layout .table-header {
    align-items: stretch;
    flex-direction: column;
  }
  app-admin-layout .header-actions,
  app-admin-layout .form-actions,
  app-admin-layout .actions {
    width: 100%;
    margin-left: 0;
  }
  app-admin-layout .header-actions button,
  app-admin-layout .form-actions button,
  app-admin-layout .actions button {
    width: 100%;
  }
}

.invoice-order-link-dialog-panel .mat-mdc-dialog-surface {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px !important;
  background: var(--color-surface);
}

.invoice-order-link-dialog-panel .mat-mdc-dialog-content {
  flex: 1 1 auto;
  max-height: none;
}

.inquiry-detail-dialog-panel .mat-mdc-dialog-surface {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px !important;
  padding: 0 !important;
  background: var(--surface-card, #ffffff) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

.inquiry-detail-dialog-panel .mat-mdc-dialog-container {
  padding: 0 !important;
}

/* Cross-module page shell normalization (employee/accounts/inventory/admin) */
.admin-layout-wrapper .main-content > *,
.accounts-layout-wrapper .main-content > *,
.salary-master-history-container,
.salary-calculation-container,
.attendance-monthly-entry-container,
.user-management-container,
.user-groups-container,
.feature-toggle-container,
.audit-logs-container,
.system-settings-container,
.permission-matrix-container {
  width: min(100%, var(--page-max-width));
  margin: 0 auto;
}

.salary-master-history-container,
.salary-calculation-container,
.attendance-monthly-entry-container,
.user-management-container,
.user-groups-container,
.feature-toggle-container,
.audit-logs-container,
.system-settings-container,
.permission-matrix-container {
  padding: var(--space-6);
}

.salary-master-history-container .header-section,
.salary-calculation-container .header-section,
.attendance-monthly-entry-container .header-section,
.user-management-container .header-section,
.feature-toggle-container .header-section,
.audit-logs-container .header-buttons,
.permission-matrix-container .form-actions,
.system-settings-container .form-actions,
.user-groups-container .form-actions {
  margin-bottom: var(--space-4);
}

.salary-master-history-container .table-wrapper,
.salary-calculation-container .table-wrapper,
.attendance-monthly-entry-container .table-wrapper,
.user-management-container .table-container,
.user-groups-container .table-container,
.feature-toggle-container .table-card,
.audit-logs-container .table-wrapper,
.system-settings-container .table-container,
.permission-matrix-container .table-wrapper {
  overflow-x: auto;
}

@media (max-width: 768px) {
  .salary-master-history-container,
  .salary-calculation-container,
  .attendance-monthly-entry-container,
  .user-management-container,
  .user-groups-container,
  .feature-toggle-container,
  .audit-logs-container,
  .system-settings-container,
  .permission-matrix-container {
    padding: var(--space-4);
  }
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

@media (max-width: 992px) {
  .page-container {
    padding: var(--space-4);
  }
  .section-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
  .sheet-row-grid {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }
  .mat-mdc-card-content {
    overflow-x: auto;
  }
  .mat-mdc-table,
  table[mat-table] {
    min-width: 720px;
  }
}
@media (max-width: 600px) {
  .page-container {
    padding: var(--space-3);
  }
  .header-actions,
  .form-actions,
  .step-actions,
  .panel-nav,
  .inline-actions,
  .app-header-actions {
    width: 100%;
  }
  .header-actions .filter-field,
  .header-actions .search-field,
  .app-filter-field {
    width: 100%;
    min-width: 100%;
  }
  .mat-mdc-button-base:not(.mat-mdc-icon-button):not(.mat-mdc-fab):not(.mat-mdc-mini-fab) {
    width: 100%;
  }
  .mat-mdc-form-field [matSuffix].mat-mdc-button-base,
  .mat-mdc-form-field [matPrefix].mat-mdc-button-base {
    width: auto !important;
    min-width: 0 !important;
  }
  .section-grid,
  .sheet-row-grid {
    grid-template-columns: 1fr;
  }
}
.mat-mdc-snack-bar-container.app-snackbar-default {
  --mdc-snackbar-container-color: #1666c5;
  --mdc-snackbar-supporting-text-color: #ffffff;
  --mat-snack-bar-button-color: #ffffff;
}

.mat-mdc-snack-bar-container.crud-snackbar-success {
  --mdc-snackbar-container-color: #1f8a4d;
  --mdc-snackbar-supporting-text-color: #ffffff;
  --mat-snack-bar-button-color: #ffffff;
}

.mat-mdc-snack-bar-container.crud-snackbar-error {
  --mdc-snackbar-container-color: #c53d3d;
  --mdc-snackbar-supporting-text-color: #ffffff;
  --mat-snack-bar-button-color: #ffffff;
}

.mat-mdc-snack-bar-container.crud-snackbar-error-details .mdc-snackbar__label {
  white-space: pre-line;
}

/* ============================================================================
   CURRENCY AMOUNT IN WORDS DIRECTIVE - LABEL STYLING
   ============================================================================
   Prevents label overlap with adjacent controls in grid layouts.
   Ensures proper spacing and text handling for amount-to-words hints.
   ============================================================================ */
.currency-amount-in-words {
  display: block;
  width: 100%;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-style: italic;
  color: var(--color-text-muted);
  text-align: left;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Ensure hint-wrapper maintains proper dimensions */
.mat-mdc-form-field-hint-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.mat-mdc-form-field-hint-wrapper .currency-amount-in-words {
  margin-top: 2px;
  padding: 0;
}

/* Prevent label overlap in grid layouts */
mat-form-field .currency-amount-in-words {
  max-height: 2.6em;
  overflow: hidden;
  flex-shrink: 0;
}

/* Light theme */
html[data-theme=light] .currency-amount-in-words,
:root .currency-amount-in-words {
  color: var(--color-text-muted, #44566f);
}

/* Dark theme */
html[data-theme=dark] .currency-amount-in-words {
  color: var(--color-text-muted, #c8d4e8);
}

/* System theme (dark preference) */
@media (prefers-color-scheme: dark) {
  html[data-theme=system] .currency-amount-in-words {
    color: var(--color-text-muted, #c8d4e8);
  }
}
/* Mobile responsiveness - reduce font size for better fit */
@media (max-width: 600px) {
  .currency-amount-in-words {
    font-size: 0.7rem;
    line-height: 1.2;
    margin-top: 1px;
  }
}
/* Prevent overflow in narrow containers */
.currency-amount-in-words {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* ============================================================================
   RESPONSIVE MOBILE CARD LIST (TABLE ALTERNATIVE)
   ============================================================================ */
.responsive-table-wrapper {
  display: block;
  width: 100%;
  overflow-x: auto;
}
@media (max-width: 768px) {
  .responsive-table-wrapper {
    display: none !important;
  }
}

.mobile-card-list {
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
@media (max-width: 768px) {
  .mobile-card-list {
    display: flex;
  }
}

.mobile-row-card {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.mobile-row-card:active, .mobile-row-card:hover {
  background: var(--color-surface-soft);
  box-shadow: var(--shadow-1);
}
.mobile-row-card .card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.mobile-row-card .card-header-row h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.mobile-row-card .card-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  font-size: 13px;
}
@media (max-width: 480px) {
  .mobile-row-card .card-details {
    grid-template-columns: 1fr;
  }
}
.mobile-row-card .card-details .detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-row-card .card-details .detail-item span.label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mobile-row-card .card-details .detail-item span.value {
  font-weight: 500;
  color: var(--color-text);
}
.mobile-row-card .card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.mobile-row-card .card-actions button {
  min-height: 32px;
  font-size: 12px;
  padding: 0 12px;
}

/* ============================================================================
   ACCOUNT KPI CARD NORMALIZATION
   ============================================================================ */
app-accounts-layout .kpi-grid,
app-accounts-layout .summary-cards,
app-accounts-layout .summary-cards-row,
app-accounts-layout .summary-cards-section,
app-accounts-layout .stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
}
app-accounts-layout .kpi-card,
app-accounts-layout .summary-card,
app-accounts-layout .stat-card,
app-accounts-layout .preview-kpi-card {
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(22, 102, 197, 0.05), transparent 55%), var(--color-surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
app-accounts-layout .kpi-card .mat-mdc-card-content,
app-accounts-layout .kpi-card mat-card-content,
app-accounts-layout .summary-card .mat-mdc-card-content,
app-accounts-layout .summary-card mat-card-content,
app-accounts-layout .stat-card .mat-mdc-card-content,
app-accounts-layout .stat-card mat-card-content,
app-accounts-layout .preview-kpi-card .mat-mdc-card-content,
app-accounts-layout .preview-kpi-card mat-card-content {
  display: grid;
  gap: 6px;
  min-height: 112px;
  align-content: center;
}
app-accounts-layout .kpi-card .kpi-label,
app-accounts-layout .kpi-card .summary-label,
app-accounts-layout .kpi-card .stat-label,
app-accounts-layout .kpi-card mat-card-title,
app-accounts-layout .summary-card .kpi-label,
app-accounts-layout .summary-card .summary-label,
app-accounts-layout .summary-card .stat-label,
app-accounts-layout .summary-card mat-card-title,
app-accounts-layout .stat-card .kpi-label,
app-accounts-layout .stat-card .summary-label,
app-accounts-layout .stat-card .stat-label,
app-accounts-layout .stat-card mat-card-title,
app-accounts-layout .preview-kpi-card .kpi-label,
app-accounts-layout .preview-kpi-card .summary-label,
app-accounts-layout .preview-kpi-card .stat-label,
app-accounts-layout .preview-kpi-card mat-card-title {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
app-accounts-layout .kpi-card .kpi-value,
app-accounts-layout .kpi-card .summary-value,
app-accounts-layout .kpi-card .stat-value,
app-accounts-layout .kpi-card .amount,
app-accounts-layout .summary-card .kpi-value,
app-accounts-layout .summary-card .summary-value,
app-accounts-layout .summary-card .stat-value,
app-accounts-layout .summary-card .amount,
app-accounts-layout .stat-card .kpi-value,
app-accounts-layout .stat-card .summary-value,
app-accounts-layout .stat-card .stat-value,
app-accounts-layout .stat-card .amount,
app-accounts-layout .preview-kpi-card .kpi-value,
app-accounts-layout .preview-kpi-card .summary-value,
app-accounts-layout .preview-kpi-card .stat-value,
app-accounts-layout .preview-kpi-card .amount {
  color: var(--color-primary);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
app-accounts-layout .kpi-card .kpi-subtext,
app-accounts-layout .kpi-card .subtitle,
app-accounts-layout .kpi-card .change,
app-accounts-layout .kpi-card .label,
app-accounts-layout .summary-card .kpi-subtext,
app-accounts-layout .summary-card .subtitle,
app-accounts-layout .summary-card .change,
app-accounts-layout .summary-card .label,
app-accounts-layout .stat-card .kpi-subtext,
app-accounts-layout .stat-card .subtitle,
app-accounts-layout .stat-card .change,
app-accounts-layout .stat-card .label,
app-accounts-layout .preview-kpi-card .kpi-subtext,
app-accounts-layout .preview-kpi-card .subtitle,
app-accounts-layout .preview-kpi-card .change,
app-accounts-layout .preview-kpi-card .label {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}
app-accounts-layout .kpi-card mat-icon,
app-accounts-layout .kpi-card .summary-icon,
app-accounts-layout .kpi-card .card-icon,
app-accounts-layout .summary-card mat-icon,
app-accounts-layout .summary-card .summary-icon,
app-accounts-layout .summary-card .card-icon,
app-accounts-layout .stat-card mat-icon,
app-accounts-layout .stat-card .summary-icon,
app-accounts-layout .stat-card .card-icon,
app-accounts-layout .preview-kpi-card mat-icon,
app-accounts-layout .preview-kpi-card .summary-icon,
app-accounts-layout .preview-kpi-card .card-icon {
  color: var(--color-primary);
}
app-accounts-layout .kpi-card.success, app-accounts-layout .kpi-card.positive, app-accounts-layout .kpi-card.income, app-accounts-layout .kpi-card.cash, app-accounts-layout .kpi-card.paid-amount, app-accounts-layout .kpi-card.collection-rate,
app-accounts-layout .summary-card.success,
app-accounts-layout .summary-card.positive,
app-accounts-layout .summary-card.income,
app-accounts-layout .summary-card.cash,
app-accounts-layout .summary-card.paid-amount,
app-accounts-layout .summary-card.collection-rate,
app-accounts-layout .stat-card.success,
app-accounts-layout .stat-card.positive,
app-accounts-layout .stat-card.income,
app-accounts-layout .stat-card.cash,
app-accounts-layout .stat-card.paid-amount,
app-accounts-layout .stat-card.collection-rate,
app-accounts-layout .preview-kpi-card.success,
app-accounts-layout .preview-kpi-card.positive,
app-accounts-layout .preview-kpi-card.income,
app-accounts-layout .preview-kpi-card.cash,
app-accounts-layout .preview-kpi-card.paid-amount,
app-accounts-layout .preview-kpi-card.collection-rate {
  border-top-color: var(--color-success);
}
app-accounts-layout .kpi-card.success .kpi-value,
app-accounts-layout .kpi-card.success .summary-value,
app-accounts-layout .kpi-card.success .stat-value,
app-accounts-layout .kpi-card.success .amount,
app-accounts-layout .kpi-card.success mat-icon,
app-accounts-layout .kpi-card.success .summary-icon, app-accounts-layout .kpi-card.positive .kpi-value,
app-accounts-layout .kpi-card.positive .summary-value,
app-accounts-layout .kpi-card.positive .stat-value,
app-accounts-layout .kpi-card.positive .amount,
app-accounts-layout .kpi-card.positive mat-icon,
app-accounts-layout .kpi-card.positive .summary-icon, app-accounts-layout .kpi-card.income .kpi-value,
app-accounts-layout .kpi-card.income .summary-value,
app-accounts-layout .kpi-card.income .stat-value,
app-accounts-layout .kpi-card.income .amount,
app-accounts-layout .kpi-card.income mat-icon,
app-accounts-layout .kpi-card.income .summary-icon, app-accounts-layout .kpi-card.cash .kpi-value,
app-accounts-layout .kpi-card.cash .summary-value,
app-accounts-layout .kpi-card.cash .stat-value,
app-accounts-layout .kpi-card.cash .amount,
app-accounts-layout .kpi-card.cash mat-icon,
app-accounts-layout .kpi-card.cash .summary-icon, app-accounts-layout .kpi-card.paid-amount .kpi-value,
app-accounts-layout .kpi-card.paid-amount .summary-value,
app-accounts-layout .kpi-card.paid-amount .stat-value,
app-accounts-layout .kpi-card.paid-amount .amount,
app-accounts-layout .kpi-card.paid-amount mat-icon,
app-accounts-layout .kpi-card.paid-amount .summary-icon, app-accounts-layout .kpi-card.collection-rate .kpi-value,
app-accounts-layout .kpi-card.collection-rate .summary-value,
app-accounts-layout .kpi-card.collection-rate .stat-value,
app-accounts-layout .kpi-card.collection-rate .amount,
app-accounts-layout .kpi-card.collection-rate mat-icon,
app-accounts-layout .kpi-card.collection-rate .summary-icon,
app-accounts-layout .summary-card.success .kpi-value,
app-accounts-layout .summary-card.success .summary-value,
app-accounts-layout .summary-card.success .stat-value,
app-accounts-layout .summary-card.success .amount,
app-accounts-layout .summary-card.success mat-icon,
app-accounts-layout .summary-card.success .summary-icon,
app-accounts-layout .summary-card.positive .kpi-value,
app-accounts-layout .summary-card.positive .summary-value,
app-accounts-layout .summary-card.positive .stat-value,
app-accounts-layout .summary-card.positive .amount,
app-accounts-layout .summary-card.positive mat-icon,
app-accounts-layout .summary-card.positive .summary-icon,
app-accounts-layout .summary-card.income .kpi-value,
app-accounts-layout .summary-card.income .summary-value,
app-accounts-layout .summary-card.income .stat-value,
app-accounts-layout .summary-card.income .amount,
app-accounts-layout .summary-card.income mat-icon,
app-accounts-layout .summary-card.income .summary-icon,
app-accounts-layout .summary-card.cash .kpi-value,
app-accounts-layout .summary-card.cash .summary-value,
app-accounts-layout .summary-card.cash .stat-value,
app-accounts-layout .summary-card.cash .amount,
app-accounts-layout .summary-card.cash mat-icon,
app-accounts-layout .summary-card.cash .summary-icon,
app-accounts-layout .summary-card.paid-amount .kpi-value,
app-accounts-layout .summary-card.paid-amount .summary-value,
app-accounts-layout .summary-card.paid-amount .stat-value,
app-accounts-layout .summary-card.paid-amount .amount,
app-accounts-layout .summary-card.paid-amount mat-icon,
app-accounts-layout .summary-card.paid-amount .summary-icon,
app-accounts-layout .summary-card.collection-rate .kpi-value,
app-accounts-layout .summary-card.collection-rate .summary-value,
app-accounts-layout .summary-card.collection-rate .stat-value,
app-accounts-layout .summary-card.collection-rate .amount,
app-accounts-layout .summary-card.collection-rate mat-icon,
app-accounts-layout .summary-card.collection-rate .summary-icon,
app-accounts-layout .stat-card.success .kpi-value,
app-accounts-layout .stat-card.success .summary-value,
app-accounts-layout .stat-card.success .stat-value,
app-accounts-layout .stat-card.success .amount,
app-accounts-layout .stat-card.success mat-icon,
app-accounts-layout .stat-card.success .summary-icon,
app-accounts-layout .stat-card.positive .kpi-value,
app-accounts-layout .stat-card.positive .summary-value,
app-accounts-layout .stat-card.positive .stat-value,
app-accounts-layout .stat-card.positive .amount,
app-accounts-layout .stat-card.positive mat-icon,
app-accounts-layout .stat-card.positive .summary-icon,
app-accounts-layout .stat-card.income .kpi-value,
app-accounts-layout .stat-card.income .summary-value,
app-accounts-layout .stat-card.income .stat-value,
app-accounts-layout .stat-card.income .amount,
app-accounts-layout .stat-card.income mat-icon,
app-accounts-layout .stat-card.income .summary-icon,
app-accounts-layout .stat-card.cash .kpi-value,
app-accounts-layout .stat-card.cash .summary-value,
app-accounts-layout .stat-card.cash .stat-value,
app-accounts-layout .stat-card.cash .amount,
app-accounts-layout .stat-card.cash mat-icon,
app-accounts-layout .stat-card.cash .summary-icon,
app-accounts-layout .stat-card.paid-amount .kpi-value,
app-accounts-layout .stat-card.paid-amount .summary-value,
app-accounts-layout .stat-card.paid-amount .stat-value,
app-accounts-layout .stat-card.paid-amount .amount,
app-accounts-layout .stat-card.paid-amount mat-icon,
app-accounts-layout .stat-card.paid-amount .summary-icon,
app-accounts-layout .stat-card.collection-rate .kpi-value,
app-accounts-layout .stat-card.collection-rate .summary-value,
app-accounts-layout .stat-card.collection-rate .stat-value,
app-accounts-layout .stat-card.collection-rate .amount,
app-accounts-layout .stat-card.collection-rate mat-icon,
app-accounts-layout .stat-card.collection-rate .summary-icon,
app-accounts-layout .preview-kpi-card.success .kpi-value,
app-accounts-layout .preview-kpi-card.success .summary-value,
app-accounts-layout .preview-kpi-card.success .stat-value,
app-accounts-layout .preview-kpi-card.success .amount,
app-accounts-layout .preview-kpi-card.success mat-icon,
app-accounts-layout .preview-kpi-card.success .summary-icon,
app-accounts-layout .preview-kpi-card.positive .kpi-value,
app-accounts-layout .preview-kpi-card.positive .summary-value,
app-accounts-layout .preview-kpi-card.positive .stat-value,
app-accounts-layout .preview-kpi-card.positive .amount,
app-accounts-layout .preview-kpi-card.positive mat-icon,
app-accounts-layout .preview-kpi-card.positive .summary-icon,
app-accounts-layout .preview-kpi-card.income .kpi-value,
app-accounts-layout .preview-kpi-card.income .summary-value,
app-accounts-layout .preview-kpi-card.income .stat-value,
app-accounts-layout .preview-kpi-card.income .amount,
app-accounts-layout .preview-kpi-card.income mat-icon,
app-accounts-layout .preview-kpi-card.income .summary-icon,
app-accounts-layout .preview-kpi-card.cash .kpi-value,
app-accounts-layout .preview-kpi-card.cash .summary-value,
app-accounts-layout .preview-kpi-card.cash .stat-value,
app-accounts-layout .preview-kpi-card.cash .amount,
app-accounts-layout .preview-kpi-card.cash mat-icon,
app-accounts-layout .preview-kpi-card.cash .summary-icon,
app-accounts-layout .preview-kpi-card.paid-amount .kpi-value,
app-accounts-layout .preview-kpi-card.paid-amount .summary-value,
app-accounts-layout .preview-kpi-card.paid-amount .stat-value,
app-accounts-layout .preview-kpi-card.paid-amount .amount,
app-accounts-layout .preview-kpi-card.paid-amount mat-icon,
app-accounts-layout .preview-kpi-card.paid-amount .summary-icon,
app-accounts-layout .preview-kpi-card.collection-rate .kpi-value,
app-accounts-layout .preview-kpi-card.collection-rate .summary-value,
app-accounts-layout .preview-kpi-card.collection-rate .stat-value,
app-accounts-layout .preview-kpi-card.collection-rate .amount,
app-accounts-layout .preview-kpi-card.collection-rate mat-icon,
app-accounts-layout .preview-kpi-card.collection-rate .summary-icon {
  color: var(--color-success);
}
app-accounts-layout .kpi-card.warning, app-accounts-layout .kpi-card.pending, app-accounts-layout .kpi-card.payment-metric, app-accounts-layout .kpi-card.concentration,
app-accounts-layout .summary-card.warning,
app-accounts-layout .summary-card.pending,
app-accounts-layout .summary-card.payment-metric,
app-accounts-layout .summary-card.concentration,
app-accounts-layout .stat-card.warning,
app-accounts-layout .stat-card.pending,
app-accounts-layout .stat-card.payment-metric,
app-accounts-layout .stat-card.concentration,
app-accounts-layout .preview-kpi-card.warning,
app-accounts-layout .preview-kpi-card.pending,
app-accounts-layout .preview-kpi-card.payment-metric,
app-accounts-layout .preview-kpi-card.concentration {
  border-top-color: var(--color-warning);
}
app-accounts-layout .kpi-card.warning .kpi-value,
app-accounts-layout .kpi-card.warning .summary-value,
app-accounts-layout .kpi-card.warning .stat-value,
app-accounts-layout .kpi-card.warning .amount,
app-accounts-layout .kpi-card.warning mat-icon,
app-accounts-layout .kpi-card.warning .summary-icon, app-accounts-layout .kpi-card.pending .kpi-value,
app-accounts-layout .kpi-card.pending .summary-value,
app-accounts-layout .kpi-card.pending .stat-value,
app-accounts-layout .kpi-card.pending .amount,
app-accounts-layout .kpi-card.pending mat-icon,
app-accounts-layout .kpi-card.pending .summary-icon, app-accounts-layout .kpi-card.payment-metric .kpi-value,
app-accounts-layout .kpi-card.payment-metric .summary-value,
app-accounts-layout .kpi-card.payment-metric .stat-value,
app-accounts-layout .kpi-card.payment-metric .amount,
app-accounts-layout .kpi-card.payment-metric mat-icon,
app-accounts-layout .kpi-card.payment-metric .summary-icon, app-accounts-layout .kpi-card.concentration .kpi-value,
app-accounts-layout .kpi-card.concentration .summary-value,
app-accounts-layout .kpi-card.concentration .stat-value,
app-accounts-layout .kpi-card.concentration .amount,
app-accounts-layout .kpi-card.concentration mat-icon,
app-accounts-layout .kpi-card.concentration .summary-icon,
app-accounts-layout .summary-card.warning .kpi-value,
app-accounts-layout .summary-card.warning .summary-value,
app-accounts-layout .summary-card.warning .stat-value,
app-accounts-layout .summary-card.warning .amount,
app-accounts-layout .summary-card.warning mat-icon,
app-accounts-layout .summary-card.warning .summary-icon,
app-accounts-layout .summary-card.pending .kpi-value,
app-accounts-layout .summary-card.pending .summary-value,
app-accounts-layout .summary-card.pending .stat-value,
app-accounts-layout .summary-card.pending .amount,
app-accounts-layout .summary-card.pending mat-icon,
app-accounts-layout .summary-card.pending .summary-icon,
app-accounts-layout .summary-card.payment-metric .kpi-value,
app-accounts-layout .summary-card.payment-metric .summary-value,
app-accounts-layout .summary-card.payment-metric .stat-value,
app-accounts-layout .summary-card.payment-metric .amount,
app-accounts-layout .summary-card.payment-metric mat-icon,
app-accounts-layout .summary-card.payment-metric .summary-icon,
app-accounts-layout .summary-card.concentration .kpi-value,
app-accounts-layout .summary-card.concentration .summary-value,
app-accounts-layout .summary-card.concentration .stat-value,
app-accounts-layout .summary-card.concentration .amount,
app-accounts-layout .summary-card.concentration mat-icon,
app-accounts-layout .summary-card.concentration .summary-icon,
app-accounts-layout .stat-card.warning .kpi-value,
app-accounts-layout .stat-card.warning .summary-value,
app-accounts-layout .stat-card.warning .stat-value,
app-accounts-layout .stat-card.warning .amount,
app-accounts-layout .stat-card.warning mat-icon,
app-accounts-layout .stat-card.warning .summary-icon,
app-accounts-layout .stat-card.pending .kpi-value,
app-accounts-layout .stat-card.pending .summary-value,
app-accounts-layout .stat-card.pending .stat-value,
app-accounts-layout .stat-card.pending .amount,
app-accounts-layout .stat-card.pending mat-icon,
app-accounts-layout .stat-card.pending .summary-icon,
app-accounts-layout .stat-card.payment-metric .kpi-value,
app-accounts-layout .stat-card.payment-metric .summary-value,
app-accounts-layout .stat-card.payment-metric .stat-value,
app-accounts-layout .stat-card.payment-metric .amount,
app-accounts-layout .stat-card.payment-metric mat-icon,
app-accounts-layout .stat-card.payment-metric .summary-icon,
app-accounts-layout .stat-card.concentration .kpi-value,
app-accounts-layout .stat-card.concentration .summary-value,
app-accounts-layout .stat-card.concentration .stat-value,
app-accounts-layout .stat-card.concentration .amount,
app-accounts-layout .stat-card.concentration mat-icon,
app-accounts-layout .stat-card.concentration .summary-icon,
app-accounts-layout .preview-kpi-card.warning .kpi-value,
app-accounts-layout .preview-kpi-card.warning .summary-value,
app-accounts-layout .preview-kpi-card.warning .stat-value,
app-accounts-layout .preview-kpi-card.warning .amount,
app-accounts-layout .preview-kpi-card.warning mat-icon,
app-accounts-layout .preview-kpi-card.warning .summary-icon,
app-accounts-layout .preview-kpi-card.pending .kpi-value,
app-accounts-layout .preview-kpi-card.pending .summary-value,
app-accounts-layout .preview-kpi-card.pending .stat-value,
app-accounts-layout .preview-kpi-card.pending .amount,
app-accounts-layout .preview-kpi-card.pending mat-icon,
app-accounts-layout .preview-kpi-card.pending .summary-icon,
app-accounts-layout .preview-kpi-card.payment-metric .kpi-value,
app-accounts-layout .preview-kpi-card.payment-metric .summary-value,
app-accounts-layout .preview-kpi-card.payment-metric .stat-value,
app-accounts-layout .preview-kpi-card.payment-metric .amount,
app-accounts-layout .preview-kpi-card.payment-metric mat-icon,
app-accounts-layout .preview-kpi-card.payment-metric .summary-icon,
app-accounts-layout .preview-kpi-card.concentration .kpi-value,
app-accounts-layout .preview-kpi-card.concentration .summary-value,
app-accounts-layout .preview-kpi-card.concentration .stat-value,
app-accounts-layout .preview-kpi-card.concentration .amount,
app-accounts-layout .preview-kpi-card.concentration mat-icon,
app-accounts-layout .preview-kpi-card.concentration .summary-icon {
  color: var(--color-warning);
}
app-accounts-layout .kpi-card.danger, app-accounts-layout .kpi-card.negative, app-accounts-layout .kpi-card.expense, app-accounts-layout .kpi-card.unpaid-amount, app-accounts-layout .kpi-card.overdue-risk,
app-accounts-layout .summary-card.danger,
app-accounts-layout .summary-card.negative,
app-accounts-layout .summary-card.expense,
app-accounts-layout .summary-card.unpaid-amount,
app-accounts-layout .summary-card.overdue-risk,
app-accounts-layout .stat-card.danger,
app-accounts-layout .stat-card.negative,
app-accounts-layout .stat-card.expense,
app-accounts-layout .stat-card.unpaid-amount,
app-accounts-layout .stat-card.overdue-risk,
app-accounts-layout .preview-kpi-card.danger,
app-accounts-layout .preview-kpi-card.negative,
app-accounts-layout .preview-kpi-card.expense,
app-accounts-layout .preview-kpi-card.unpaid-amount,
app-accounts-layout .preview-kpi-card.overdue-risk {
  border-top-color: var(--color-danger);
}
app-accounts-layout .kpi-card.danger .kpi-value,
app-accounts-layout .kpi-card.danger .summary-value,
app-accounts-layout .kpi-card.danger .stat-value,
app-accounts-layout .kpi-card.danger .amount,
app-accounts-layout .kpi-card.danger mat-icon,
app-accounts-layout .kpi-card.danger .summary-icon, app-accounts-layout .kpi-card.negative .kpi-value,
app-accounts-layout .kpi-card.negative .summary-value,
app-accounts-layout .kpi-card.negative .stat-value,
app-accounts-layout .kpi-card.negative .amount,
app-accounts-layout .kpi-card.negative mat-icon,
app-accounts-layout .kpi-card.negative .summary-icon, app-accounts-layout .kpi-card.expense .kpi-value,
app-accounts-layout .kpi-card.expense .summary-value,
app-accounts-layout .kpi-card.expense .stat-value,
app-accounts-layout .kpi-card.expense .amount,
app-accounts-layout .kpi-card.expense mat-icon,
app-accounts-layout .kpi-card.expense .summary-icon, app-accounts-layout .kpi-card.unpaid-amount .kpi-value,
app-accounts-layout .kpi-card.unpaid-amount .summary-value,
app-accounts-layout .kpi-card.unpaid-amount .stat-value,
app-accounts-layout .kpi-card.unpaid-amount .amount,
app-accounts-layout .kpi-card.unpaid-amount mat-icon,
app-accounts-layout .kpi-card.unpaid-amount .summary-icon, app-accounts-layout .kpi-card.overdue-risk .kpi-value,
app-accounts-layout .kpi-card.overdue-risk .summary-value,
app-accounts-layout .kpi-card.overdue-risk .stat-value,
app-accounts-layout .kpi-card.overdue-risk .amount,
app-accounts-layout .kpi-card.overdue-risk mat-icon,
app-accounts-layout .kpi-card.overdue-risk .summary-icon,
app-accounts-layout .summary-card.danger .kpi-value,
app-accounts-layout .summary-card.danger .summary-value,
app-accounts-layout .summary-card.danger .stat-value,
app-accounts-layout .summary-card.danger .amount,
app-accounts-layout .summary-card.danger mat-icon,
app-accounts-layout .summary-card.danger .summary-icon,
app-accounts-layout .summary-card.negative .kpi-value,
app-accounts-layout .summary-card.negative .summary-value,
app-accounts-layout .summary-card.negative .stat-value,
app-accounts-layout .summary-card.negative .amount,
app-accounts-layout .summary-card.negative mat-icon,
app-accounts-layout .summary-card.negative .summary-icon,
app-accounts-layout .summary-card.expense .kpi-value,
app-accounts-layout .summary-card.expense .summary-value,
app-accounts-layout .summary-card.expense .stat-value,
app-accounts-layout .summary-card.expense .amount,
app-accounts-layout .summary-card.expense mat-icon,
app-accounts-layout .summary-card.expense .summary-icon,
app-accounts-layout .summary-card.unpaid-amount .kpi-value,
app-accounts-layout .summary-card.unpaid-amount .summary-value,
app-accounts-layout .summary-card.unpaid-amount .stat-value,
app-accounts-layout .summary-card.unpaid-amount .amount,
app-accounts-layout .summary-card.unpaid-amount mat-icon,
app-accounts-layout .summary-card.unpaid-amount .summary-icon,
app-accounts-layout .summary-card.overdue-risk .kpi-value,
app-accounts-layout .summary-card.overdue-risk .summary-value,
app-accounts-layout .summary-card.overdue-risk .stat-value,
app-accounts-layout .summary-card.overdue-risk .amount,
app-accounts-layout .summary-card.overdue-risk mat-icon,
app-accounts-layout .summary-card.overdue-risk .summary-icon,
app-accounts-layout .stat-card.danger .kpi-value,
app-accounts-layout .stat-card.danger .summary-value,
app-accounts-layout .stat-card.danger .stat-value,
app-accounts-layout .stat-card.danger .amount,
app-accounts-layout .stat-card.danger mat-icon,
app-accounts-layout .stat-card.danger .summary-icon,
app-accounts-layout .stat-card.negative .kpi-value,
app-accounts-layout .stat-card.negative .summary-value,
app-accounts-layout .stat-card.negative .stat-value,
app-accounts-layout .stat-card.negative .amount,
app-accounts-layout .stat-card.negative mat-icon,
app-accounts-layout .stat-card.negative .summary-icon,
app-accounts-layout .stat-card.expense .kpi-value,
app-accounts-layout .stat-card.expense .summary-value,
app-accounts-layout .stat-card.expense .stat-value,
app-accounts-layout .stat-card.expense .amount,
app-accounts-layout .stat-card.expense mat-icon,
app-accounts-layout .stat-card.expense .summary-icon,
app-accounts-layout .stat-card.unpaid-amount .kpi-value,
app-accounts-layout .stat-card.unpaid-amount .summary-value,
app-accounts-layout .stat-card.unpaid-amount .stat-value,
app-accounts-layout .stat-card.unpaid-amount .amount,
app-accounts-layout .stat-card.unpaid-amount mat-icon,
app-accounts-layout .stat-card.unpaid-amount .summary-icon,
app-accounts-layout .stat-card.overdue-risk .kpi-value,
app-accounts-layout .stat-card.overdue-risk .summary-value,
app-accounts-layout .stat-card.overdue-risk .stat-value,
app-accounts-layout .stat-card.overdue-risk .amount,
app-accounts-layout .stat-card.overdue-risk mat-icon,
app-accounts-layout .stat-card.overdue-risk .summary-icon,
app-accounts-layout .preview-kpi-card.danger .kpi-value,
app-accounts-layout .preview-kpi-card.danger .summary-value,
app-accounts-layout .preview-kpi-card.danger .stat-value,
app-accounts-layout .preview-kpi-card.danger .amount,
app-accounts-layout .preview-kpi-card.danger mat-icon,
app-accounts-layout .preview-kpi-card.danger .summary-icon,
app-accounts-layout .preview-kpi-card.negative .kpi-value,
app-accounts-layout .preview-kpi-card.negative .summary-value,
app-accounts-layout .preview-kpi-card.negative .stat-value,
app-accounts-layout .preview-kpi-card.negative .amount,
app-accounts-layout .preview-kpi-card.negative mat-icon,
app-accounts-layout .preview-kpi-card.negative .summary-icon,
app-accounts-layout .preview-kpi-card.expense .kpi-value,
app-accounts-layout .preview-kpi-card.expense .summary-value,
app-accounts-layout .preview-kpi-card.expense .stat-value,
app-accounts-layout .preview-kpi-card.expense .amount,
app-accounts-layout .preview-kpi-card.expense mat-icon,
app-accounts-layout .preview-kpi-card.expense .summary-icon,
app-accounts-layout .preview-kpi-card.unpaid-amount .kpi-value,
app-accounts-layout .preview-kpi-card.unpaid-amount .summary-value,
app-accounts-layout .preview-kpi-card.unpaid-amount .stat-value,
app-accounts-layout .preview-kpi-card.unpaid-amount .amount,
app-accounts-layout .preview-kpi-card.unpaid-amount mat-icon,
app-accounts-layout .preview-kpi-card.unpaid-amount .summary-icon,
app-accounts-layout .preview-kpi-card.overdue-risk .kpi-value,
app-accounts-layout .preview-kpi-card.overdue-risk .summary-value,
app-accounts-layout .preview-kpi-card.overdue-risk .stat-value,
app-accounts-layout .preview-kpi-card.overdue-risk .amount,
app-accounts-layout .preview-kpi-card.overdue-risk mat-icon,
app-accounts-layout .preview-kpi-card.overdue-risk .summary-icon {
  color: var(--color-danger);
}

/* ============================================================================
   RESPONSIVE TABLE TO MOBILE CARD AND OVERFLOW FIT
   ============================================================================ */
@media (max-width: 768px) {
  .responsive-table-wrapper:has(+ .mobile-card-list),
  .table-wrapper:has(+ .mobile-card-list),
  .table-responsive:has(+ .mobile-card-list) {
    display: none !important;
  }
  .mobile-card-list {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .mobile-row-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .mobile-row-card .card-header-row,
  .mobile-row-card .card-details,
  .mobile-row-card .detail-item,
  .mobile-row-card .card-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .mobile-row-card .card-details {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}
@media (max-width: 768px) and (max-width: 520px) {
  .mobile-row-card .card-details {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .mobile-row-card .value {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .mat-mdc-card,
  .mat-mdc-card-content {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}
/* ============================================================================
   GLOBAL DARK MODE CONTRAST & LEGIBILITY ENHANCEMENTS
   Fixes dark black text on dark surfaces across MagizhOps
   ============================================================================ */
html[data-theme=dark],
body[data-theme=dark],
html.theme-dark,
body.theme-dark {
  color: var(--color-text);
}
html[data-theme=dark] .mat-mdc-table,
html[data-theme=dark] table,
body[data-theme=dark] .mat-mdc-table,
body[data-theme=dark] table,
html.theme-dark .mat-mdc-table,
html.theme-dark table,
body.theme-dark .mat-mdc-table,
body.theme-dark table {
  background: transparent;
  color: var(--color-text);
}
html[data-theme=dark] .mat-mdc-table th,
html[data-theme=dark] .mat-mdc-table .mat-mdc-header-cell,
html[data-theme=dark] table th,
html[data-theme=dark] table .mat-mdc-header-cell,
body[data-theme=dark] .mat-mdc-table th,
body[data-theme=dark] .mat-mdc-table .mat-mdc-header-cell,
body[data-theme=dark] table th,
body[data-theme=dark] table .mat-mdc-header-cell,
html.theme-dark .mat-mdc-table th,
html.theme-dark .mat-mdc-table .mat-mdc-header-cell,
html.theme-dark table th,
html.theme-dark table .mat-mdc-header-cell,
body.theme-dark .mat-mdc-table th,
body.theme-dark .mat-mdc-table .mat-mdc-header-cell,
body.theme-dark table th,
body.theme-dark table .mat-mdc-header-cell {
  color: var(--color-text-muted) !important;
  background: var(--color-surface-soft);
  border-bottom-color: var(--color-border);
}
html[data-theme=dark] .mat-mdc-table td,
html[data-theme=dark] .mat-mdc-table .mat-mdc-cell,
html[data-theme=dark] table td,
html[data-theme=dark] table .mat-mdc-cell,
body[data-theme=dark] .mat-mdc-table td,
body[data-theme=dark] .mat-mdc-table .mat-mdc-cell,
body[data-theme=dark] table td,
body[data-theme=dark] table .mat-mdc-cell,
html.theme-dark .mat-mdc-table td,
html.theme-dark .mat-mdc-table .mat-mdc-cell,
html.theme-dark table td,
html.theme-dark table .mat-mdc-cell,
body.theme-dark .mat-mdc-table td,
body.theme-dark .mat-mdc-table .mat-mdc-cell,
body.theme-dark table td,
body.theme-dark table .mat-mdc-cell {
  color: var(--color-text) !important;
  border-bottom-color: var(--color-border);
}
html[data-theme=dark] .mat-mdc-table tr:hover,
html[data-theme=dark] table tr:hover,
body[data-theme=dark] .mat-mdc-table tr:hover,
body[data-theme=dark] table tr:hover,
html.theme-dark .mat-mdc-table tr:hover,
html.theme-dark table tr:hover,
body.theme-dark .mat-mdc-table tr:hover,
body.theme-dark table tr:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 80%, transparent);
}
html[data-theme=dark] .mat-mdc-card,
html[data-theme=dark] .table-card,
html[data-theme=dark] .mobile-row-card,
body[data-theme=dark] .mat-mdc-card,
body[data-theme=dark] .table-card,
body[data-theme=dark] .mobile-row-card,
html.theme-dark .mat-mdc-card,
html.theme-dark .table-card,
html.theme-dark .mobile-row-card,
body.theme-dark .mat-mdc-card,
body.theme-dark .table-card,
body.theme-dark .mobile-row-card {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
html[data-theme=dark] .customer-name,
html[data-theme=dark] .item-name,
html[data-theme=dark] .page-title,
html[data-theme=dark] .section-title,
html[data-theme=dark] h1, html[data-theme=dark] h2, html[data-theme=dark] h3, html[data-theme=dark] h4, html[data-theme=dark] h5, html[data-theme=dark] h6,
body[data-theme=dark] .customer-name,
body[data-theme=dark] .item-name,
body[data-theme=dark] .page-title,
body[data-theme=dark] .section-title,
body[data-theme=dark] h1,
body[data-theme=dark] h2,
body[data-theme=dark] h3,
body[data-theme=dark] h4,
body[data-theme=dark] h5,
body[data-theme=dark] h6,
html.theme-dark .customer-name,
html.theme-dark .item-name,
html.theme-dark .page-title,
html.theme-dark .section-title,
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6,
body.theme-dark .customer-name,
body.theme-dark .item-name,
body.theme-dark .page-title,
body.theme-dark .section-title,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6 {
  color: var(--color-text);
}
html[data-theme=dark] .company-name,
html[data-theme=dark] .page-subtitle,
html[data-theme=dark] .subtitle,
html[data-theme=dark] .text-secondary,
body[data-theme=dark] .company-name,
body[data-theme=dark] .page-subtitle,
body[data-theme=dark] .subtitle,
body[data-theme=dark] .text-secondary,
html.theme-dark .company-name,
html.theme-dark .page-subtitle,
html.theme-dark .subtitle,
html.theme-dark .text-secondary,
body.theme-dark .company-name,
body.theme-dark .page-subtitle,
body.theme-dark .subtitle,
body.theme-dark .text-secondary {
  color: var(--color-text-muted);
}
html[data-theme=dark] [style*="color: #0f172a"],
html[data-theme=dark] [style*="color:#0f172a"],
html[data-theme=dark] [style*="color: #16263d"],
html[data-theme=dark] [style*="color:#16263d"],
html[data-theme=dark] [style*="color: rgb(15, 23, 42)"],
html[data-theme=dark] [style*="color: rgb(22, 38, 61)"],
body[data-theme=dark] [style*="color: #0f172a"],
body[data-theme=dark] [style*="color:#0f172a"],
body[data-theme=dark] [style*="color: #16263d"],
body[data-theme=dark] [style*="color:#16263d"],
body[data-theme=dark] [style*="color: rgb(15, 23, 42)"],
body[data-theme=dark] [style*="color: rgb(22, 38, 61)"],
html.theme-dark [style*="color: #0f172a"],
html.theme-dark [style*="color:#0f172a"],
html.theme-dark [style*="color: #16263d"],
html.theme-dark [style*="color:#16263d"],
html.theme-dark [style*="color: rgb(15, 23, 42)"],
html.theme-dark [style*="color: rgb(22, 38, 61)"],
body.theme-dark [style*="color: #0f172a"],
body.theme-dark [style*="color:#0f172a"],
body.theme-dark [style*="color: #16263d"],
body.theme-dark [style*="color:#16263d"],
body.theme-dark [style*="color: rgb(15, 23, 42)"],
body.theme-dark [style*="color: rgb(22, 38, 61)"] {
  color: var(--color-text) !important;
}
html[data-theme=dark] [style*="color: #64748b"],
html[data-theme=dark] [style*="color:#64748b"],
html[data-theme=dark] [style*="color: #44566f"],
html[data-theme=dark] [style*="color:#44566f"],
html[data-theme=dark] [style*="color: rgb(100, 116, 139)"],
html[data-theme=dark] [style*="color: rgb(68, 86, 111)"],
body[data-theme=dark] [style*="color: #64748b"],
body[data-theme=dark] [style*="color:#64748b"],
body[data-theme=dark] [style*="color: #44566f"],
body[data-theme=dark] [style*="color:#44566f"],
body[data-theme=dark] [style*="color: rgb(100, 116, 139)"],
body[data-theme=dark] [style*="color: rgb(68, 86, 111)"],
html.theme-dark [style*="color: #64748b"],
html.theme-dark [style*="color:#64748b"],
html.theme-dark [style*="color: #44566f"],
html.theme-dark [style*="color:#44566f"],
html.theme-dark [style*="color: rgb(100, 116, 139)"],
html.theme-dark [style*="color: rgb(68, 86, 111)"],
body.theme-dark [style*="color: #64748b"],
body.theme-dark [style*="color:#64748b"],
body.theme-dark [style*="color: #44566f"],
body.theme-dark [style*="color:#44566f"],
body.theme-dark [style*="color: rgb(100, 116, 139)"],
body.theme-dark [style*="color: rgb(68, 86, 111)"] {
  color: var(--color-text-muted) !important;
}