/* Dark-theme helpers for custom UI bits.
 * Bootstrap 5.3 uses CSS variables keyed off [data-bs-theme].
 */

/* Dashboard hero gradient: adjust for dark so it isn't too bright. */
html[data-bs-theme="dark"] .hero {
  background: linear-gradient(135deg, #0b1220, #2b145a);
  color: #fff;
}

/* Softer shadows in dark mode */
html[data-bs-theme="dark"] .stat-card {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .35);
}

/* Select2 basic dark adjustments (keeps it readable). */
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: rgba(13, 110, 253, .25);
  color: var(--bs-body-color);
}

/* Flatpickr minimal dark adjustments */
html[data-bs-theme="dark"] .flatpickr-calendar {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .35);
}

html[data-bs-theme="dark"] .flatpickr-day,
html[data-bs-theme="dark"] .flatpickr-weekday,
html[data-bs-theme="dark"] .flatpickr-current-month,
html[data-bs-theme="dark"] .flatpickr-time input {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .flatpickr-day:hover {
  background: rgba(13, 110, 253, .2);
}

/* Theme toggle button */
:root,
[data-bs-theme="light"] {
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --erp-inline-action-hover-color: var(--bs-link-hover-color, #0a58ca);
}

.erp-toolbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.erp-toolbar-icon-btn:hover,
.erp-toolbar-icon-btn:focus,
.erp-toolbar-icon-btn:focus-visible,
.erp-toolbar-icon-btn:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.erp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: .5rem;
}

.erp-theme-toggle svg {
  display: block;
}

/* Make sun and auto icons in the theme toggle appear as light icons.
   Targets markup that uses .theme-icon-when-auto and .theme-icon-when-light inside the toggle.
   Uses currentColor for SVG fill so icons follow the color property. */
.erp-theme-toggle .theme-icon-when-auto,
.erp-theme-toggle .theme-icon-when-light,
.erp-theme-toggle .theme-icon-when-auto svg,
.erp-theme-toggle .theme-icon-when-light svg {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: none !important;
  opacity: 1 !important;
}

/* Ensure the outline-light variant keeps the icons light as well */
.btn-outline-light.erp-theme-toggle .theme-icon-when-auto,
.btn-outline-light.erp-theme-toggle .theme-icon-when-light,
.btn-outline-light.erp-theme-toggle .theme-icon-when-auto svg,
.btn-outline-light.erp-theme-toggle .theme-icon-when-light svg {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: none !important;
  opacity: 1 !important;
}

/* Dark-theme specific: keep icons warm/bright on dark background if needed */
html[data-bs-theme="dark"] .erp-theme-toggle .theme-icon-when-auto,
html[data-bs-theme="dark"] .erp-theme-toggle .theme-icon-when-light,
html[data-bs-theme="dark"] .erp-theme-toggle .theme-icon-when-auto svg,
html[data-bs-theme="dark"] .erp-theme-toggle .theme-icon-when-light svg,
html[data-bs-theme="dark"] .btn-outline-light.erp-theme-toggle .theme-icon-when-auto,
html[data-bs-theme="dark"] .btn-outline-light.erp-theme-toggle .theme-icon-when-light {
  color: #ffffff !important;
  fill: currentColor !important;
  opacity: 1 !important;
}

/* ==========================================
   Stronger dark-mode variable overrides
   (loaded after Bootstrap so these values win)
   ========================================== */

html[data-bs-theme="dark"] {
  /* Core color surface + text */
  --erp-surface-0: #0f1724;
  --erp-surface-1: #141d2b;
  --erp-surface-2: #1a2536;
  --erp-surface-3: #223149;
  --erp-border: #314056;
  --erp-text: #e8eef8;
  --erp-text-muted: #9fb0c6;
  --erp-primary-soft: rgba(13, 110, 253, 0.18);
  --erp-success-soft: rgba(25, 135, 84, 0.16);
  --erp-warning-soft: rgba(245, 158, 11, 0.18);
  --erp-info-soft: rgba(14, 165, 233, 0.18);

  --bs-body-bg: var(--erp-surface-0);
  --bs-body-color: var(--erp-text);
  --bs-emphasis-color: #f8fbff;
  --bs-secondary-color: var(--erp-text-muted);
  --bs-secondary-bg: var(--erp-surface-2);
  --bs-tertiary-bg: var(--erp-surface-1);
  --bs-bg: var(--bs-body-bg);
  --bs-border-color: var(--erp-border);

  /* Card / surface */
  --bs-card-bg: var(--erp-surface-1);
  --bs-dropdown-bg: var(--erp-surface-1);
  --bs-modal-bg: var(--erp-surface-1);

  /* Form controls форми вибору */
  --bs-form-control-bg: #101826;
  --bs-form-control-border-color: var(--erp-border);
  --bs-form-control-color: var(--bs-body-color);

  /* Links and interactive */
  --bs-primary: #6ea8fe;
  --bs-primary-rgb: 110, 168, 254;
  --bs-link-color: #9ecbff;
  --bs-link-hover-color: #cfe7ff;
  --erp-inline-action-hover-color: var(--bs-link-hover-color);

  /* Buttons: keep primary but ensure contrast */
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
}

/* Apply base background/text so body doesn't inherit Bootstrap white */
html[data-bs-theme="dark"] body {
  background-color: var(--bs-body-bg) !important;
  color: #ffffff !important;
}

/* Navbar and brand */
html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="dark"] .navbar.navbar-dark.bg-dark {
  background-color: #07102a !important;
  color: var(--bs-body-color) !important;
}
html[data-bs-theme="dark"] .navbar .nav-link,
html[data-bs-theme="dark"] .navbar .navbar-brand,
html[data-bs-theme="dark"] .navbar .dropdown-item {
  color: var(--bs-body-color) !important;
}

/* Dropdowns, menus, toasts, cards, modals */
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .popover,
html[data-bs-theme="dark"] .toast,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}



/* Forms and inputs */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] input.form-control,
html[data-bs-theme="dark"] textarea.form-control,
html[data-bs-theme="dark"] .form-select {
  background-color: var(--bs-form-control-bg) !important;
  color: var(--bs-form-control-color) !important;
  border-color: var(--bs-form-control-border-color) !important;
}

/* Buttons: ensure outline-light looks good on dark */
html[data-bs-theme="dark"] .btn-outline-light {
  color: var(--bs-body-color) !important;
  border-color: rgba(255,255,255,0.08) !important;
}



/* Select2 / dropdown options readability */
html[data-bs-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--bs-body-color) !important;
}

/* Small utility: make disabled-looking elements readable */
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .muted {
  color: #8b95a3 !important;
}

/* Ensure link contrast */

html[data-bs-theme="dark"] a:hover,
html[data-bs-theme="dark"] a:focus {
  color: var(--bs-link-hover-color) !important;
}

html[data-bs-theme="dark"] .bg-light {
    background-color: #0b1220 !important;
}

/* Targeted dark-mode overrides requested by the user */

/* Tables: smaller tables with middle-aligned cells should be readable and not too bright */
html[data-bs-theme="dark"] .table.table-sm.align-middle,
html[data-bs-theme="dark"] .table.table-sm.align-middle thead th,
html[data-bs-theme="dark"] .table.table-sm.align-middle tbody td {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(255,255,255,0.06) !important; /* softer borders */
}

/* table-light (Bootstrap class) tends to be bright; darken it for dark theme */
html[data-bs-theme="dark"] .table.table-light,
html[data-bs-theme="dark"] .table.table-light > thead,
html[data-bs-theme="dark"] .table.table-light > tbody > tr,
html[data-bs-theme="dark"] .table.table-light > tbody > tr > td,
html[data-bs-theme="dark"] .table.table-light > tbody > tr > th {
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Fix: ensure .table-light footers aren't bright in dark theme
   Bootstrap's .table-light can make tfoot white (#f8f9fa). Force a dark surface for footers. */
html[data-bs-theme="dark"] tfoot.table-light,
html[data-bs-theme="dark"] .table.table-light tfoot,
html[data-bs-theme="dark"] .table.table-light tfoot th,
html[data-bs-theme="dark"] .table.table-light tfoot td,
html[data-bs-theme="dark"] tfoot.table-light th,
html[data-bs-theme="dark"] tfoot.table-light td {
  background-color: var(--bs-card-bg) !important; /* dark surface */
  background-image: none !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Also cover cases where .table-light is applied on ancestor elements or via utility classes */
html[data-bs-theme="dark"] [class*="table-light"] tfoot,
html[data-bs-theme="dark"] [class*="table-light"] tfoot th,
html[data-bs-theme="dark"] [class*="table-light"] tfoot td {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
}

/* End tfoot.table-light dark-mode fixes */

/* Fix: ensure .table-light headers aren't bright in dark theme
   Similar to tfoot fixes above — override Bootstrap's bright .table-light thead background (#f8f9fa) */
html[data-bs-theme="dark"] thead.table-light,
html[data-bs-theme="dark"] .table.table-light thead,
html[data-bs-theme="dark"] .table.table-light thead th,
html[data-bs-theme="dark"] thead.table-light th,
html[data-bs-theme="dark"] .table.table-sm.table-bordered thead,
html[data-bs-theme="dark"] .table.table-sm.table-bordered thead th,
html[data-bs-theme="dark"] [class*="table-light"] thead,
html[data-bs-theme="dark"] [class*="table-light"] thead th {
  background-color: var(--bs-card-bg) !important; /* dark surface */
  background-image: none !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Also make sure standalone thead elements inside bordered small tables inherit dark background */
html[data-bs-theme="dark"] table.table.table-sm.table-bordered thead th,
html[data-bs-theme="dark"] table.table.table-sm thead th {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
}

/* End thead.table-light dark-mode fixes */

/* Theme toggle button when used with outline-light: make the moon (svg) visually 'light' */
html[data-bs-theme="dark"] .btn-outline-light.erp-theme-toggle {
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: rgba(255,236,179,1) !important; /* warm light for the moon */
}
html[data-bs-theme="dark"] .btn-outline-light.erp-theme-toggle svg,
html[data-bs-theme="dark"] .erp-theme-toggle svg {
  fill: currentColor;
  stroke: none;
}

/* Utility: make small muted elements slightly brighter on dark cards for legibility */
html[data-bs-theme="dark"] .card .small,
html[data-bs-theme="dark"] .card .text-muted {
  color: #9aa6bb !important;
}

/* End of targeted overrides */

/* Force Select2 dropdown to be opaque and use card background in dark theme.
   Some Select2 builds append dropdowns to body or use specific modifiers; this
   set of selectors aims to cover common variants and uses !important to override
   inline or library styles that set transparency. */
html[data-bs-theme="dark"] .select2-container--default .select2-dropdown,
html[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-dropdown,
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown,
html[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--bs-card-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
  opacity: 1 !important;
  z-index: 2100 !important; /* above modals */
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.5) !important;
}

/* Ensure the results/options list itself is solid and readable */
html[data-bs-theme="dark"] .select2-container--default .select2-results__options,
html[data-bs-theme="dark"] .select2-container--open .select2-results__options {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Search field inside the dropdown should use form control background for readability */
html[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-bs-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
  background-color: var(--bs-form-control-bg) !important;
  color: var(--bs-form-control-color) !important;
  border-color: var(--bs-form-control-border-color) !important;
}

/* Selected result highlight should remain visible */
html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: rgba(13,110,253,0.22) !important;
  color: var(--bs-body-color) !important;
}

/* Ensure the selection element itself is opaque when dropdown is open */
html[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple {
  background-color: var(--bs-form-control-bg) !important;
  color: var(--bs-form-control-color) !important;
}

/* Extra aggressive overrides for Select2 variants that may still be transparent. */
html[data-bs-theme="dark"] body > .select2-container--open .select2-dropdown,
html[data-bs-theme="dark"] body .select2-container--open .select2-dropdown,
html[data-bs-theme="dark"] .select2-dropdown[style],
html[data-bs-theme="dark"] .select2-dropdown[style] *,
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown[style],
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown[style] * {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
  opacity: 1 !important;
}

/* Also cover pseudo-elements (some themes use ::before/::after for backdrops) */
html[data-bs-theme="dark"] .select2-dropdown::before,
html[data-bs-theme="dark"] .select2-dropdown::after,
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown::before,
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown::after {
  background-color: var(--bs-card-bg) !important;
  content: none !important;
}

/* If a parent element has opacity set, try isolating the dropdown as fully opaque via will-change */
html[data-bs-theme="dark"] .select2-dropdown,
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown {
  will-change: opacity, transform !important;
}

/* z-index fallback in case dropdown appended to body loses stacking */
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown,
html[data-bs-theme="dark"] body > .select2-container--open .select2-dropdown {
  z-index: 2147483646 !important; /* very high to override most stacking contexts */
}

/* End extra aggressive Select2 fixes */

/* Ultra-aggressive Select2 opaque enforcement for dark theme
   Covers blend modes, background-images, filters and pseudo-elements. */
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown,
html[data-bs-theme="dark"] body > .select2-container--open .select2-dropdown,
html[data-bs-theme="dark"] .select2-dropdown[style],
html[data-bs-theme="dark"] .select2-dropdown[style] *,
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown[style],
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown[style] *,
html[data-bs-theme="dark"] .select2-container .select2-selection,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  background-color: #101826 !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;

  background-clip: padding-box !important;
}

/* Ensure individual option rows are opaque too */
html[data-bs-theme="dark"] .select2-container--default .select2-results__option,
html[data-bs-theme="dark"] .select2-container--default .select2-results__option * {
  background-color: transparent !important; /* keep option background transparent but parent provides card-bg */
  color: var(--bs-body-color) !important;
  mix-blend-mode: normal !important;
}

/* Fix: replace any remaining #0b1220 fallback with #000000 and ensure proper punctuation */
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown,
html[data-bs-theme="dark"] body > .select2-container--open .select2-dropdown,
html[data-bs-theme="dark"] .select2-dropdown[style],
html[data-bs-theme="dark"] .select2-dropdown[style] * {
  background-color: #000000 !important; /* was #0b1220 without semicolon - replaced with pure black */
}

/* Explicitly target dropdown placement variants (below/above) which sometimes get their own styles
   and ensure they use pure black in dark theme. */
html[data-bs-theme="dark"] .select2-dropdown.select2-dropdown--below,
html[data-bs-theme="dark"] .select2-dropdown.select2-dropdown--above,
html[data-bs-theme="dark"] .select2-dropdown.select2-dropdown--below[style],
html[data-bs-theme="dark"] .select2-dropdown.select2-dropdown--above[style],
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown.select2-dropdown--below,
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown.select2-dropdown--above {
  background-color: #000000 !important;
  background-image: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border-color: var(--bs-form-control-border-color) !important;
}

/* Defensive: if JS libraries attach a separate wrapper with classes like 'select2-dropdown--below' on another element,
   match any element that contains that class token. */
html[data-bs-theme="dark"] [class*="select2-dropdown--below"],
html[data-bs-theme="dark"] [class*="select2-dropdown--above"] {
  background-color: #000000 !important;
}

/* End of targeted overrides */

/* Strong, visible focus/highlight for Select2 in dark theme matching light theme color (#5897fb) */
html[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection,
html[data-bs-theme="dark"] .select2-container--default.select2-container--open.select2-container--focus .select2-selection,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single.select2-selection--focus,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple.select2-selection--focus,
html[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #5897fb !important; /* same blue as light theme */
  box-shadow: 0 0 0 0.25rem rgba(88,151,251,0.18) !important; /* visible ring */
}

/* Ensure keyboard-focused/aria-selected state also shows stronger contrast */
html[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(88,151,251,0.18) !important;
  color: var(--bs-body-color) !important;
}

/* If inline focus class is placed on container, make sure the rendered text remains visible */
html[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container--default.select2-container--open.select2-container--focus .select2-selection__rendered {
  color: var(--bs-body-color) !important;
}

/* Also ensure arrow/clear icons remain visible when focused */
html[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection__arrow,
html[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection__clear {
  color: #cfe3ff !important;
  opacity: 1 !important;
}

/* End Select2 dark-focus polish */

/* Additional Select2 closed-selection polish: ensure the visible selection box is dark, not white */
html[data-bs-theme="dark"] .select2-container--default .select2-selection,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: #000000 !important; /* pure black as requested */
  color: var(--bs-body-color) !important;
  border-color: var(--bs-form-control-border-color) !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Ensure the rendered text / placeholder uses the same color and doesn't appear muted/grey on black */
html[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container--default .select2-selection__placeholder {
  color: var(--bs-body-color) !important;
  opacity: 1 !important;
}

/* If select2 places an inner .select2-selection__choice (for multiple) ensure it's visible */
html[data-bs-theme="dark"] .select2-container--default .select2-selection__choice {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Replace square arrow with a triangle and ensure it's visible on dark background */
html[data-bs-theme="dark"] .select2-container--default .select2-selection__arrow {
  width: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bs-body-color) !important;
  background: transparent !important;
}
html[data-bs-theme="dark"] .select2-container--default .select2-selection__arrow b {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 7px solid currentColor !important; /* triangle pointing up — select2 positions it visually */
  background: transparent !important;
  opacity: 1 !important;
}

/* Ensure the dropdown arrow in some select2 themes which invert the triangle is also visible */
html[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection__arrow b {
  transform: rotate(180deg) !important;
}

/* Ensure focus ring and border remain visible for closed select when focused */
html[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single:focus,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple:focus {
  border-color: #5897fb !important;
  box-shadow: 0 0 0 0.25rem rgba(88,151,251,0.18) !important;
  outline: none !important;
}

/* Defensive: sometimes select2 adds inline style on the generated selection; override any background-image/filter */
html[data-bs-theme="dark"] .select2-container--default .select2-selection,
html[data-bs-theme="dark"] .select2-container--default .select2-selection * {
  background-image: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* End of added Select2 closed-selection dark theme polish */

/* Ensure native selects and the original hidden select2 input don't show as white in dark theme */
html[data-bs-theme="dark"] select.form-control,
html[data-bs-theme="dark"] select.form-control.select2-hidden-accessible {
  background-color: var(--bs-form-control-bg) !important;
  color: var(--bs-form-control-color) !important;
  border-color: var(--bs-form-control-border-color) !important;
  box-shadow: none !important;
}

/* Ensure the rendered text inside select2 selection isn't muted or translucent */
html[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered * {
  color: var(--bs-form-control-color) !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* Defensive: if select2 fallback uses role=listbox or a different DOM shape, make sure placeholders are visible */
html[data-bs-theme="dark"] [role="listbox"] .select2-selection__rendered,
html[data-bs-theme="dark"] [role="combobox"] .select2-selection__rendered {
  color: var(--bs-form-control-color) !important;
}

/* Make theme toggle visually minimal: remove its border and background and disable focus highlight
   This targets both plain .erp-theme-toggle and the outline-light variant used in templates. */
.erp-theme-toggle,
.btn-outline-light.erp-theme-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important; /* remove any box-shadow highlight */
}

/* Ensure no focus/highlight appears for this control (both light and dark themes) */
.erp-theme-toggle:focus,
.erp-theme-toggle:focus-visible,
.btn-outline-light.erp-theme-toggle:focus,
.btn-outline-light.erp-theme-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Dark-theme explicit override: remove background/border set earlier for outline-light variant */
html[data-bs-theme="dark"] .btn-outline-light.erp-theme-toggle,
html[data-bs-theme="dark"] .erp-theme-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Also clear any inline style that might be applied by JS when theme changes (defensive) */
html[data-bs-theme="dark"] .select2-container--open .erp-theme-toggle,
html[data-bs-theme="dark"] body .erp-theme-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* End minimal theme-toggle appearance overrides */

/* Card + table header dark-mode fixes
   Ensure cards and their headers, plus table theads inside cards/tables, don't stay bright in dark theme. */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card.shadow-sm {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .card .card-header,
html[data-bs-theme="dark"] .card .card-header.py-2 {
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--bs-body-color) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* table container inside card should be visually integrated */
html[data-bs-theme="dark"] .card .table-responsive {
  background: transparent !important;
}

/* Table headers inside cards or bordered small tables */
html[data-bs-theme="dark"] .card .table thead th,
html[data-bs-theme="dark"] table.table.table-sm.table-bordered thead th,
html[data-bs-theme="dark"] .table.table-sm.table-bordered thead th {
  background-color: rgba(255,255,255,0.02) !important; /* subtle contrast */
  color: var(--bs-body-color) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Body cells should remain transparent so card provides the surface */
html[data-bs-theme="dark"] .card .table tbody td,
html[data-bs-theme="dark"] table.table.table-sm.table-bordered tbody td {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
}

/* Also ensure placeholder rows (text-muted) remain readable */
html[data-bs-theme="dark"] .card .table tbody td.text-muted,
html[data-bs-theme="dark"] .table.table-sm tbody td.text-muted {
  color: #8b95a3 !important;
}

/* Emergency: ensure compact hover tables don't render a white panel in dark theme.
   This covers table background, tbody rows/cells and common helper classes that may
   add a white surface (e.g. .bg-white, .table-light applied indirectly). */
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0,
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0 > thead,
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0 > tbody,
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0 > tfoot,
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0 tbody tr,
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0 tbody td,
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0 tbody th,
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0 .bg-white,
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0 .table {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* If some rows/cells still get a forced white background, neutralize them directly */
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0 [style*="background"] {
  background-color: transparent !important;
}

/* Ensure header links remain visible */
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0 thead a {
  color: var(--bs-link-color) !important;
}

/* End emergency compact-table dark fixes */

/* Force table CSS variables so Bootstrap's inset fill uses dark surface in dark theme */
html[data-bs-theme="dark"] .table.table-light,
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0,
html[data-bs-theme="dark"] .table.table-sm.align-middle {
  --bs-table-bg: var(--bs-card-bg) !important;
  --bs-table-color: var(--bs-body-color) !important;
  --bs-table-border-color: rgba(255,255,255,0.04) !important;
  --bs-table-striped-bg: rgba(255,255,255,0.02) !important;
  --bs-table-active-bg: rgba(255,255,255,0.03) !important;
  --bs-table-hover-bg: rgba(255,255,255,0.02) !important;
}

/* Also neutralize table-level accent/bg state variables that feed the cell box-shadow fill */
html[data-bs-theme="dark"] table.table.table-sm.table-hover.align-middle.mb-0,
html[data-bs-theme="dark"] .table.table-light {
  --bs-table-bg-type: var(--bs-card-bg) !important;
  --bs-table-bg-state: var(--bs-card-bg) !important;
  --bs-table-bg: var(--bs-card-bg) !important;
}

/* Make .btn-light in dark theme muted (avoid very bright buttons) */
html[data-bs-theme="dark"] .btn.btn-light,
html[data-bs-theme="dark"] .btn.btn-light.btn-lg {
  --bs-btn-color: var(--bs-body-color) !important;
  --bs-btn-bg: rgba(255,255,255,0.04) !important;
  --bs-btn-border-color: rgba(255,255,255,0.06) !important;
  color: var(--bs-body-color) !important;
  background-color: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Ensure the theme toggle doesn't pick up button border variables */
html[data-bs-theme="dark"] .erp-theme-toggle,
html[data-bs-theme="dark"] .btn-outline-light.erp-theme-toggle {
  --bs-btn-border-color: transparent !important;
  --bs-btn-border-width: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove any inset square highlight on the theme toggle */
.erp-theme-toggle .theme-icon-when-auto,
.erp-theme-toggle .theme-icon-when-light,
.erp-theme-toggle .theme-icon-when-dark {
  box-shadow: none !important;
  background: transparent !important;
}

/* Ensure card-body p-2 remains readable (slightly lighter text) */
html[data-bs-theme="dark"] .card .card-body.p-2,
html[data-bs-theme="dark"] .card-body.p-2 {
  color: var(--bs-body-color) !important;
}

/* Override utility .bg-white inside dark theme: use card background or transparent so wrappers
   like <div class="table-responsive ... bg-white"> don't create a bright white panel. */
html[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
  background-image: none !important;
}

/* Strong overrides for table-responsive.bg-white to fully neutralize white panels in dark theme */
html[data-bs-theme="dark"] .table-responsive.bg-white,
html[data-bs-theme="dark"] .table-responsive.shadow-sm.border.rounded.bg-white,
html[data-bs-theme="dark"] .table-responsive.border.bg-white,
html[data-bs-theme="dark"] [class*="table-responsive"][class*="bg-white"] {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: var(--bs-border-color) !important;
}

/* Make sure any table inside such wrapper is also transparent and uses dark thead/tfoot */
html[data-bs-theme="dark"] .table-responsive.bg-white table,
html[data-bs-theme="dark"] .table-responsive.bg-white .table {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--bs-body-color) !important;
}

/* Thead/tfoot inside these wrappers must use dark card background, not white */
html[data-bs-theme="dark"] .table-responsive.bg-white table thead,
html[data-bs-theme="dark"] .table-responsive.bg-white table thead th,
html[data-bs-theme="dark"] .table-responsive.bg-white table tfoot,
html[data-bs-theme="dark"] .table-responsive.bg-white table tfoot th {
  background-color: var(--bs-card-bg) !important;
  background-image: none !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Ensure tbody rows are transparent and hover uses the table hover variable for good contrast */
html[data-bs-theme="dark"] .table-responsive.bg-white table tbody tr,
html[data-bs-theme="dark"] .table-responsive.bg-white .table tbody tr {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
}

/* Ensure hovered rows inside .table-responsive.bg-white remain readable: force bg + text for all descendants */
html[data-bs-theme="dark"] .table-responsive.bg-white .table tbody tr:hover,
html[data-bs-theme="dark"] .table-responsive.bg-white .table tbody tr:hover td,
html[data-bs-theme="dark"] .table-responsive.bg-white .table tbody tr:hover th {
  background-color: var(--bs-table-hover-bg) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .table-responsive.bg-white .table tbody tr:hover *,
html[data-bs-theme="dark"] .table-responsive.bg-white .table tbody tr:hover td *,
html[data-bs-theme="dark"] .table-responsive.bg-white .table tbody tr:hover th * {
  color: var(--bs-body-color) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Defensive: neutralize common control backgrounds (select2, inputs) inside table cells so they don't show as white boxes */
html[data-bs-theme="dark"] .table-responsive.bg-white .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .table-responsive.bg-white .select2-container--default .select2-selection--multiple,
html[data-bs-theme="dark"] .table-responsive.bg-white .form-control,
html[data-bs-theme="dark"] .table-responsive.bg-white input.form-control,
html[data-bs-theme="dark"] .table-responsive.bg-white .form-select {
  background-color: var(--bs-form-control-bg) !important;
  color: var(--bs-form-control-color) !important;
  border-color: var(--bs-form-control-border-color) !important;
  box-shadow: none !important;
}

/* Ensure muted/small text inside table cells is still readable on hover */
html[data-bs-theme="dark"] .table-responsive.bg-white .table tbody td .text-muted,
html[data-bs-theme="dark"] .table-responsive.bg-white .table tbody td small {
  color: var(--bs-body-color) !important;
}

/* Exceptions: keep specific success/primary card styles unchanged in dark theme
   The user requested that these elements should NOT be altered when switching to dark mode. */
html[data-bs-theme="dark"] .card-header.bg-success.text-white {
  background-color: #198754 !important; /* Bootstrap success */
  color: #ffffff !important;
  background-image: none !important;
  border-color: transparent !important; /* header may not need extra border */
}

html[data-bs-theme="dark"] .card-header.bg-primary.text-white {
  background-color: #0d6efd !important; /* Bootstrap primary */
  color: #ffffff !important;
  background-image: none !important;
  border-color: transparent !important; /* header may not need extra border */
}

/* Картки товару в продажі*/

html[data-bs-theme="dark"] .pos-product-card {
  background-color: #000000 !important; /* Bootstrap primary */
  color: #ffffff !important;
  border-color: transparent !important; /* header may not need extra border */
}

/* Fix: ensure sale items table footer and .table-success rows are dark/ readable in dark theme */
html[data-bs-theme="dark"] table#saleItemsTable tfoot,
html[data-bs-theme="dark"] table#saleItemsTable tfoot tr,
html[data-bs-theme="dark"] table#saleItemsTable tfoot td,
html[data-bs-theme="dark"] table#saleItemsTable tfoot th {
  background-color: var(--bs-card-bg) !important; /* dark surface for footer */
  background-image: none !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Make .table-success rows use a toned-down success tint that works on dark backgrounds */
html[data-bs-theme="dark"] table#saleItemsTable .table-success,
html[data-bs-theme="dark"] table#saleItemsTable tfoot tr.table-success {
  background-color: rgba(25,135,84,0.12) !important; /* subtle green tint */
  color: var(--bs-body-color) !important; /* keep text readable */
  border-color: rgba(25,135,84,0.22) !important;
}
html[data-bs-theme="dark"] table#saleItemsTable .table-success td,
html[data-bs-theme="dark"] table#saleItemsTable .table-success th {
  color: var(--bs-body-color) !important;
}

/* Ensure any fw-bold or strong inside footer remains visible */
html[data-bs-theme="dark"] table#saleItemsTable tfoot .fw-bold,
html[data-bs-theme="dark"] table#saleItemsTable tfoot strong {
  color: var(--bs-body-color) !important;
}

/* Defensive: neutralize inline white backgrounds inside this table if present */
html[data-bs-theme="dark"] table#saleItemsTable [style*="background"],
html[data-bs-theme="dark"] table#saleItemsTable [style*="background-color"] {
  background-color: transparent !important;
}

/* ==================================================================================
   Dark-theme button remapping requested by user
   - Treat .btn.btn-outline-dark.quick-action and .btn.btn-sm.btn-outline-dark as .btn-dark quick-action
   - Make .btn-outline-secondary behave like outline-dark in dark theme
   ================================================================================== */

html[data-bs-theme="dark"] .btn.btn-outline-dark.quick-action,
html[data-bs-theme="dark"] .btn.btn-sm.btn-outline-dark {
  /* Visual appearance of btn-dark */
  background-color: #212529 !important; /* Bootstrap dark */
  color: #ffffff !important;
  border-color: #212529 !important;
  --bs-btn-border-color: #212529 !important;
  --bs-btn-bg: #212529 !important;
  --bs-btn-color: #ffffff !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Hover / active / focus states should slightly lighten the dark background for affordance */
html[data-bs-theme="dark"] .btn.btn-outline-dark.quick-action:hover,
html[data-bs-theme="dark"] .btn.btn-sm.btn-outline-dark:hover,
html[data-bs-theme="dark"] .btn.btn-outline-dark.quick-action:focus,
html[data-bs-theme="dark"] .btn.btn-sm.btn-outline-dark:focus,
html[data-bs-theme="dark"] .btn.btn-outline-dark.quick-action:active,
html[data-bs-theme="dark"] .btn.btn-sm.btn-outline-dark:active {
  background-color: #2b2f33 !important; /* slightly lighter */
  border-color: #2b2f33 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 0 0.15rem rgba(255,255,255,0.03) !important;
}

/* Remap btn-outline-secondary to behave as a dark button in dark theme (btn-dark look) */
html[data-bs-theme="dark"] .btn.btn-outline-secondary,
html[data-bs-theme="dark"] .btn.quick-action.btn-outline-secondary,
html[data-bs-theme="dark"] .btn.quick-action.btn-sm.btn-outline-secondary,
html[data-bs-theme="dark"] .btn.btn-sm.btn-outline-secondary {
  background-color: #212529 !important; /* dark button background */
  color: #ffffff !important;
  border-color: #212529 !important;
  --bs-btn-border-color: #212529 !important;
  --bs-btn-bg: #212529 !important;
  --bs-btn-color: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] .btn.btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn.quick-action.btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn.btn-sm.btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn.btn-outline-secondary:focus,
html[data-bs-theme="dark"] .btn.quick-action.btn-outline-secondary:focus,
html[data-bs-theme="dark"] .btn.btn-sm.btn-outline-secondary:focus,
html[data-bs-theme="dark"] .btn.btn-outline-secondary:active,
html[data-bs-theme="dark"] .btn.quick-action.btn-outline-secondary:active,
html[data-bs-theme="dark"] .btn.btn-sm.btn-outline-secondary:active {
  background-color: #2b2f33 !important; /* slightly lighter on hover */
  border-color: #2b2f33 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 0 0.12rem rgba(255,255,255,0.02) !important;
}

/* Notifications drawer adjustments for dark theme */
html[data-bs-theme="dark"] #notifDrawer {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-body-color) !important;
  border-left: 1px solid var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] #notifDrawer .border-bottom {
  border-color: rgba(255,255,255,0.03) !important;
}

html[data-bs-theme="dark"] #notifList {
  background: transparent;
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .notif-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
html[data-bs-theme="dark"] .notif-item .fw-semibold { color: var(--bs-body-color); }
html[data-bs-theme="dark"] .notif-item .small { color: #d6dce4; }
html[data-bs-theme="dark"] .notif-item .text-muted { color: #94a0ad; }

/* action link and delete button contrast */
html[data-bs-theme="dark"] #notifList a { color: #9ecbff; }
html[data-bs-theme="dark"] #notifList a:hover { color: #cfe8ff; text-decoration: underline; }
html[data-bs-theme="dark"] .notif-icon-btn.btn-outline-danger {
  color: #fff;
  border-color: rgba(255,255,255,0.08);
  background-color: transparent;
}
html[data-bs-theme="dark"] .notif-icon-btn.btn-outline-danger:hover,
html[data-bs-theme="dark"] .notif-icon-btn.btn-outline-danger:focus{
  color: #fff;
  background-color: rgba(220,53,69,0.12);
  border-color: rgba(220,53,69,0.25);
}

/* Empty state and loading state */
html[data-bs-theme="dark"] #notifList .text-muted { color: #8b95a3 !important; }
html[data-bs-theme="dark"] #notifList .text-danger { color: #ffb4b4 !important; }

/* Ensure overlay is a bit darker on dark theme for clarity */
html[data-bs-theme="dark"] #notifOverlay{ background: rgba(0,0,0,0.5); }

/* Respect responsive rules (kept from notifications.css) */
@media (max-width: 768px){
  html[data-bs-theme="dark"] #notifDrawer{ width: 90vw; min-width: 0; }
}

/* Unified dark-mode polish for Bootstrap components that still default to light surfaces */
html[data-bs-theme="dark"] body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .link-dark,
html[data-bs-theme="dark"] .text-body,
html[data-bs-theme="dark"] .text-body-emphasis,
html[data-bs-theme="dark"] .dropdown-header {
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .text-secondary,
html[data-bs-theme="dark"] .text-body-secondary,
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .page-item.disabled .page-link,
html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] textarea::placeholder {
  color: var(--erp-text-muted) !important;
}

html[data-bs-theme="dark"] hr,
html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-end,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start {
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-body-tertiary,
html[data-bs-theme="dark"] .card-header.bg-light,
html[data-bs-theme="dark"] .modal-header.bg-light,
html[data-bs-theme="dark"] .modal-footer.bg-light,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .offcanvas-header,
html[data-bs-theme="dark"] .offcanvas-body {
  background-color: var(--erp-surface-1) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer,
html[data-bs-theme="dark"] .offcanvas-header,
html[data-bs-theme="dark"] .offcanvas-footer {
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .dropdown-item,
html[data-bs-theme="dark"] .dropdown-item-text {
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus,
html[data-bs-theme="dark"] .dropdown-item.active,
html[data-bs-theme="dark"] .dropdown-item:active {
  background-color: var(--erp-surface-2) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .list-group,
html[data-bs-theme="dark"] .list-group-item {
  --bs-list-group-bg: var(--erp-surface-1);
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-action-hover-bg: var(--erp-surface-2);
  --bs-list-group-action-active-bg: var(--erp-surface-3);
  --bs-list-group-disabled-bg: rgba(255, 255, 255, 0.04);
  --bs-list-group-disabled-color: var(--erp-text-muted);
  background-color: var(--erp-surface-1) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .list-group-item-action:hover,
html[data-bs-theme="dark"] .list-group-item-action:focus {
  background-color: var(--erp-surface-2) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .list-group-item.active {
  background-color: var(--erp-primary-soft) !important;
  color: #dbeafe !important;
  border-color: rgba(13, 110, 253, 0.35) !important;
}

html[data-bs-theme="dark"] .nav-tabs,
html[data-bs-theme="dark"] .nav-tabs .nav-link,
html[data-bs-theme="dark"] .nav-pills .nav-link {
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .nav-tabs .nav-link,
html[data-bs-theme="dark"] .nav-pills .nav-link {
  color: var(--erp-text-muted) !important;
}

html[data-bs-theme="dark"] .nav-tabs .nav-link:hover,
html[data-bs-theme="dark"] .nav-tabs .nav-link:focus,
html[data-bs-theme="dark"] .nav-pills .nav-link:hover,
html[data-bs-theme="dark"] .nav-pills .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .nav-tabs .nav-link.active,
html[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link,
html[data-bs-theme="dark"] .nav-pills .nav-link.active,
html[data-bs-theme="dark"] .nav-pills .show > .nav-link {
  background-color: var(--erp-surface-2) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .accordion-item,
html[data-bs-theme="dark"] .accordion-button,
html[data-bs-theme="dark"] .accordion-body {
  background-color: var(--erp-surface-1) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--erp-surface-2) !important;
  color: var(--bs-body-color) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-bs-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(180%);
}

html[data-bs-theme="dark"] .btn.btn-light,
html[data-bs-theme="dark"] .btn.btn-light.btn-lg {
  background-color: var(--erp-surface-2) !important;
  border-color: var(--erp-surface-3) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .btn.btn-light:hover,
html[data-bs-theme="dark"] .btn.btn-light:focus,
html[data-bs-theme="dark"] .btn.btn-light:active {
  background-color: var(--erp-surface-3) !important;
  border-color: #3a4d6d !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.05) !important;
}

html[data-bs-theme="dark"] .alert,
html[data-bs-theme="dark"] .text-bg-light,
html[data-bs-theme="dark"] .badge.text-bg-light {
  background-color: rgba(159, 176, 198, 0.12) !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(159, 176, 198, 0.2) !important;
}

html[data-bs-theme="dark"] .alert-warning,
html[data-bs-theme="dark"] .text-bg-warning,
html[data-bs-theme="dark"] .badge.bg-warning,
html[data-bs-theme="dark"] .badge.bg-warning.text-dark,
html[data-bs-theme="dark"] .bg-warning.text-dark {
  background-color: var(--erp-warning-soft) !important;
  color: #ffd38a !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
}

html[data-bs-theme="dark"] .alert-info,
html[data-bs-theme="dark"] .text-bg-info,
html[data-bs-theme="dark"] .badge.bg-info,
html[data-bs-theme="dark"] .badge.bg-info.text-dark,
html[data-bs-theme="dark"] .bg-info.text-dark {
  background-color: var(--erp-info-soft) !important;
  color: #9edfff !important;
  border: 1px solid rgba(14, 165, 233, 0.28) !important;
}

html[data-bs-theme="dark"] .alert-success,
html[data-bs-theme="dark"] .text-bg-success {
  background-color: var(--erp-success-soft) !important;
  color: #97e3b5 !important;
  border-color: rgba(25, 135, 84, 0.28) !important;
}

html[data-bs-theme="dark"] .alert-danger,
html[data-bs-theme="dark"] .text-bg-danger {
  background-color: rgba(220, 53, 69, 0.18) !important;
  color: #ffb4bf !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
}

html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.035) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .table-success,
html[data-bs-theme="dark"] .table-success > th,
html[data-bs-theme="dark"] .table-success > td,
html[data-bs-theme="dark"] tr.table-success > th,
html[data-bs-theme="dark"] tr.table-success > td {
  background-color: rgba(25, 135, 84, 0.14) !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(25, 135, 84, 0.24) !important;
}

html[data-bs-theme="dark"] .table-warning,
html[data-bs-theme="dark"] .table-warning > th,
html[data-bs-theme="dark"] .table-warning > td,
html[data-bs-theme="dark"] tr.table-warning > th,
html[data-bs-theme="dark"] tr.table-warning > td {
  background-color: rgba(245, 158, 11, 0.16) !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(245, 158, 11, 0.26) !important;
}

html[data-bs-theme="dark"] .table-danger,
html[data-bs-theme="dark"] .table-danger > th,
html[data-bs-theme="dark"] .table-danger > td,
html[data-bs-theme="dark"] tr.table-danger > th,
html[data-bs-theme="dark"] tr.table-danger > td {
  background-color: rgba(220, 53, 69, 0.16) !important;
  color: var(--bs-body-color) !important;
  border-color: rgba(220, 53, 69, 0.28) !important;
}

html[data-bs-theme="dark"] .page-link {
  background-color: var(--erp-surface-1) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .page-link:hover,
html[data-bs-theme="dark"] .page-link:focus,
html[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--erp-surface-2) !important;
  border-color: #456086 !important;
  color: #ffffff !important;
}

html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-select:disabled,
html[data-bs-theme="dark"] .form-check-input:disabled {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--erp-text-muted) !important;
}

html[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
}

html[data-bs-theme="dark"] pre,
html[data-bs-theme="dark"] code,
html[data-bs-theme="dark"] kbd {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-bs-theme="dark"] .select2-dropdown,
html[data-bs-theme="dark"] .select2-container--open .select2-dropdown {
  background-color: var(--bs-form-control-bg) !important;
  border-color: var(--bs-form-control-border-color) !important;
  color: var(--bs-form-control-color) !important;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35) !important;
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
html[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(88, 151, 251, 0.2) !important;
  color: var(--bs-body-color) !important;
}