/**
 * ===================================================================
 * THEME CONTRAST & READABILITY ENHANCEMENTS
 * Resolves text visibility in light & dark modes across all themes
 * ===================================================================
 */

/* --- 1. CATEGORY BADGES (HIGH CONTRAST IN ALL THEMES) --- */
.badge.bg-info,
.badge-info {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.badge.bg-primary,
.badge-primary {
  background-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.badge.bg-success,
.badge-success {
  background-color: #16a34a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.badge.bg-warning,
.badge-warning {
  background-color: #d97706 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.badge.bg-danger,
.badge-danger {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* --- 2. DARK MODE TABLE & TEXT READABILITY --- */
/* Matches body.dark-mode (AdminLTE 3), body.mode-dark, [data-color-mode="dark"], and [data-bs-theme="dark"] */
body.dark-mode,
body.mode-dark,
[data-color-mode="dark"],
[data-bs-theme="dark"] {
  --table-dark-text: #e2e8f0;
  --table-dark-strong: #ffffff;
  --table-dark-bg: #1e293b;
  --table-dark-border: #334155;
  --table-dark-header-bg: #0f172a;
}

/* Force crystal-clear readable parameter names in dark mode */
body.dark-mode .table,
body.mode-dark .table,
[data-color-mode="dark"] .table,
[data-bs-theme="dark"] .table,
body.dark-mode .table-responsive table,
body.mode-dark .table-responsive table {
  color: #e2e8f0 !important;
}

body.dark-mode .table td,
body.mode-dark .table td,
[data-color-mode="dark"] .table td,
[data-bs-theme="dark"] .table td {
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

body.dark-mode .table strong,
body.dark-mode .table .fw-bold,
body.dark-mode .table .font-weight-bold,
body.mode-dark .table strong,
body.mode-dark .table .fw-bold,
body.mode-dark .table .font-weight-bold,
[data-color-mode="dark"] .table strong,
[data-color-mode="dark"] .table .fw-bold,
[data-color-mode="dark"] .table .font-weight-bold,
[data-bs-theme="dark"] .table strong,
[data-bs-theme="dark"] .table .fw-bold,
[data-bs-theme="dark"] .table .font-weight-bold {
  color: #ffffff !important;
  font-weight: 700 !important;
}

body.dark-mode .table thead th,
body.mode-dark .table thead th,
[data-color-mode="dark"] .table thead th,
[data-bs-theme="dark"] .table thead th {
  color: #f8fafc !important;
  background-color: #0f172a !important;
  border-color: #334155 !important;
  font-weight: 700 !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd),
body.mode-dark .table-striped tbody tr:nth-of-type(odd),
[data-color-mode="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

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

/* Codes inside tables in dark mode */
body.dark-mode .table code,
body.mode-dark .table code,
[data-color-mode="dark"] .table code,
[data-bs-theme="dark"] .table code {
  color: #38bdf8 !important;
  background-color: rgba(56, 189, 248, 0.12) !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
}

/* Standard match badge in dark mode */
body.dark-mode .badge.badge-light,
body.mode-dark .badge.badge-light,
[data-color-mode="dark"] .badge.badge-light,
[data-bs-theme="dark"] .badge.badge-light {
  background-color: #334155 !important;
  color: #cbd5e1 !important;
  border-color: #475569 !important;
}

/* --- 3. LIGHT MODE CLARITY --- */
body:not(.dark-mode):not(.mode-dark) .table strong,
body:not(.dark-mode):not(.mode-dark) .table .fw-bold,
body:not(.dark-mode):not(.mode-dark) .table .font-weight-bold {
  color: #0f172a !important;
}

body:not(.dark-mode):not(.mode-dark) .table td {
  color: #334155 !important;
}

body:not(.dark-mode):not(.mode-dark) .table thead th {
  color: #0f172a !important;
  background-color: #f8fafc !important;
  font-weight: 700 !important;
}

body:not(.dark-mode):not(.mode-dark) .table code {
  color: #0369a1 !important;
  background-color: #f0f9ff !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  border: 1px solid #bae6fd !important;
}

/* Form labels high contrast */
body:not(.dark-mode):not(.mode-dark) label,
body:not(.dark-mode):not(.mode-dark) .form-label {
  color: #1e293b !important;
}

/* --- 4. VUE-MULTISELECT LAYOUT NORMALIZATION & CONTRAST --- */
div.multiselect {
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-height: 38px !important;
  text-align: left !important;
  overflow: visible !important;
  font-size: 0.9rem !important;
}

div.multiselect .multiselect__tags {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 6px 40px 0 10px !important;
  border-radius: 4px !important;
  border: 1px solid #ced4da !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

div.multiselect .multiselect__select {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  width: 38px !important;
  height: 36px !important;
  padding: 4px 8px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

div.multiselect .multiselect__placeholder {
  margin-bottom: 6px !important;
  padding-top: 2px !important;
  display: inline-block !important;
  font-size: 0.9rem !important;
  color: #6c757d !important;
}

div.multiselect .multiselect__single {
  padding-left: 0 !important;
  margin-bottom: 6px !important;
  font-size: 0.9rem !important;
  line-height: 24px !important;
}

div.multiselect .multiselect__input {
  font-size: 0.9rem !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
}

div.multiselect .multiselect__tag {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 4px 26px 4px 8px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
  margin-right: 5px !important;
}

div.multiselect .multiselect__tag-icon:after {
  color: #ffffff !important;
}

div.multiselect .multiselect__tag-icon:hover {
  background-color: #0369a1 !important;
}

div.multiselect .multiselect__content-wrapper {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1050 !important;
  border: 1px solid #ced4da !important;
  border-top: none !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
  max-height: 260px !important;
  overflow-y: auto !important;
}

/* Flex behavior within Bootstrap input-group */
.input-group > div.multiselect {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  position: relative !important;
}

/* Dark mode theme support for Vue-Multiselect */
body.dark-mode div.multiselect .multiselect__tags,
body.mode-dark div.multiselect .multiselect__tags,
[data-bs-theme="dark"] div.multiselect .multiselect__tags,
[data-color-mode="dark"] div.multiselect .multiselect__tags {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

body.dark-mode div.multiselect .multiselect__input,
body.mode-dark div.multiselect .multiselect__input,
[data-bs-theme="dark"] div.multiselect .multiselect__input,
[data-color-mode="dark"] div.multiselect .multiselect__input {
  background-color: transparent !important;
  color: #f1f5f9 !important;
}

body.dark-mode div.multiselect .multiselect__input::placeholder,
body.mode-dark div.multiselect .multiselect__input::placeholder,
[data-bs-theme="dark"] div.multiselect .multiselect__input::placeholder,
[data-color-mode="dark"] div.multiselect .multiselect__input::placeholder {
  color: #94a3b8 !important;
}

body.dark-mode div.multiselect .multiselect__placeholder,
body.mode-dark div.multiselect .multiselect__placeholder,
[data-bs-theme="dark"] div.multiselect .multiselect__placeholder,
[data-color-mode="dark"] div.multiselect .multiselect__placeholder {
  color: #94a3b8 !important;
}

body.dark-mode div.multiselect .multiselect__single,
body.mode-dark div.multiselect .multiselect__single,
[data-bs-theme="dark"] div.multiselect .multiselect__single,
[data-color-mode="dark"] div.multiselect .multiselect__single {
  background-color: transparent !important;
  color: #f1f5f9 !important;
}

body.dark-mode div.multiselect .multiselect__content-wrapper,
body.mode-dark div.multiselect .multiselect__content-wrapper,
[data-bs-theme="dark"] div.multiselect .multiselect__content-wrapper,
[data-color-mode="dark"] div.multiselect .multiselect__content-wrapper {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode div.multiselect .multiselect__option,
body.mode-dark div.multiselect .multiselect__option,
[data-bs-theme="dark"] div.multiselect .multiselect__option,
[data-color-mode="dark"] div.multiselect .multiselect__option {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
}

body.dark-mode div.multiselect .multiselect__option--highlight,
body.mode-dark div.multiselect .multiselect__option--highlight,
[data-bs-theme="dark"] div.multiselect .multiselect__option--highlight,
[data-color-mode="dark"] div.multiselect .multiselect__option--highlight {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

body.dark-mode div.multiselect .multiselect__option--selected,
body.mode-dark div.multiselect .multiselect__option--selected,
[data-bs-theme="dark"] div.multiselect .multiselect__option--selected,
[data-color-mode="dark"] div.multiselect .multiselect__option--selected {
  background-color: #334155 !important;
  color: #38bdf8 !important;
  font-weight: 600 !important;
}