/* =========================================================
   USHS Requested Global Theme
   Applied website-wide after page-level styles.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700;800&display=swap');

:root {
  --radius: 0.625rem;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;

  --background: oklch(0.18 0.04 260);
  --foreground: oklch(0.98 0.005 250);
  --card: oklch(0.22 0.04 260);
  --card-foreground: oklch(0.98 0.005 250);
  --popover: oklch(0.22 0.04 260);
  --popover-foreground: oklch(0.98 0.005 250);
  --primary: oklch(0.62 0.22 255);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.28 0.04 260);
  --secondary-foreground: oklch(0.98 0.005 250);
  --muted: oklch(0.28 0.04 260);
  --muted-foreground: oklch(0.72 0.02 260);
  --accent: oklch(0.62 0.22 255);
  --accent-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.62 0.24 27);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.98 0.005 250 / 0.15);
  --input: oklch(0.98 0.005 250 / 0.1);
  --ring: oklch(0.62 0.22 255);
  --panel: oklch(0.98 0.005 250 / 0.08);
  --panel-border: oklch(0.98 0.005 250 / 0.15);

  --primary-dark: var(--background);
  --secondary-dark: var(--secondary);
  --accent-color: var(--accent);
  --accent: var(--primary);
  --glass: var(--panel);
  --text: var(--foreground);

  --ushs-bg-1: var(--background);
  --ushs-bg-2: var(--secondary);
  --ushs-bg-3: var(--background);
  --ushs-panel: var(--panel);
  --ushs-panel-strong: var(--card);
  --ushs-panel-soft: var(--panel);
  --ushs-border: var(--border);
  --ushs-border-strong: var(--panel-border);
  --ushs-text: var(--foreground);
  --ushs-muted: var(--muted-foreground);
  --ushs-cyan: var(--primary);
  --ushs-blue: var(--primary);

  --admin-bg-1: var(--background);
  --admin-bg-2: var(--secondary);
  --admin-card-1: var(--card);
  --admin-card-2: var(--secondary);
  --admin-border: var(--border);
  --admin-cyan: var(--primary);
  --admin-blue: var(--primary);
  --admin-text: var(--foreground);
  --admin-muted: var(--muted-foreground);

  --csr-bg-1: var(--background);
  --csr-bg-2: var(--secondary);
  --csr-card-1: var(--card);
  --csr-card-2: var(--secondary);
  --csr-border: var(--border);
  --csr-border-strong: var(--panel-border);
  --csr-cyan: var(--primary);
  --csr-blue: var(--primary);
  --csr-text: var(--foreground);
  --csr-muted: var(--muted-foreground);

  --bg1: var(--background);
  --bg2: var(--secondary);
  --card1: var(--card);
  --card2: var(--secondary);
  --cyan: var(--primary);
  --blue: var(--primary);
  --muted-text: var(--muted-foreground);
  --soft: var(--foreground);
}

html,
body {
  min-height: 100% !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  background:
    radial-gradient(circle at 18% 0%, oklch(0.62 0.22 255 / 0.14), transparent 34%),
    linear-gradient(135deg, var(--background) 0%, oklch(0.14 0.035 260) 100%) fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(oklch(0.98 0.005 250 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.98 0.005 250 / 0.018) 1px, transparent 1px);
  background-size: 44px 44px;
}

h1, h2, h3, h4, h5, h6,
.header-title,
.page-title,
.requests-page-title,
.modal-title,
.card-title,
.sidebar-header h4 {
  font-family: var(--font-display) !important;
  color: var(--foreground) !important;
}

body, p, span, label, small, strong, div, td, th, a, button, input, select, textarea {
  font-family: var(--font-sans) !important;
}

.main-content,
.content,
.content-wrapper,
.container,
.container-fluid,
.dashboard-container,
.page-wrapper,
.customer-main,
.csr-main {
  background: transparent !important;
  color: var(--foreground) !important;
}

.sidebar,
.main-sidebar,
.side-nav,
.admin-sidebar,
.csr-sidebar,
.sidebar-menu,
#sidebarMenu,
.navbar,
.topbar,
.mobile-topbar,
.app-header,
.mobile-header,
.portal-header,
.customer-header,
.csr-header,
.bottom-nav {
  background: var(--background) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
  box-shadow: 0 14px 36px oklch(0 0 0 / 0.28) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

.sidebar *,
.main-sidebar *,
.side-nav *,
.admin-sidebar *,
.csr-sidebar *,
.sidebar-menu *,
#sidebarMenu *,
.navbar *,
.topbar *,
.mobile-topbar *,
.app-header *,
.mobile-header *,
.portal-header *,
.customer-header *,
.csr-header *,
.bottom-nav * {
  color: var(--foreground) !important;
}

.sidebar-menu a:hover,
.sidebar-menu a.active,
.nav-link:hover,
.nav-link.active,
.bottom-nav a:hover,
.bottom-nav a.active,
.sidebar-item:hover,
.sidebar-item.active {
  background: var(--panel) !important;
  color: var(--foreground) !important;
  border-color: var(--primary) !important;
}

.card,
.card-body,
.card-header,
.card-footer,
.page-header,
.form-section,
.section-card,
.info-card,
.stats-card,
.stat-card,
.metric-card,
.request-card,
.ticket-card,
.profile-card,
.notification-card,
.message-card,
.chat-card,
.chat-container,
.chat-body,
.table-container,
.filter-section,
.login-card,
.login-body,
.auth-card,
.register-card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item,
.preview-card,
.upload-area,
.white-box,
.bg-white,
.bg-light,
.small-box,
.alert-light,
.dataTables_wrapper,
.service-card,
.appliance-card,
.brand-card,
.city-card,
.customer-card,
.staff-card,
.report-card,
.dashboard-card,
.panel,
.quick-action,
.quick-action-card,
.action-card,
.customer-action,
.dashboard-action,
.service-item,
.appliance-item,
.service-box,
.recent-item,
.notification-dropdown,
.notification-item,
.empty-state,
.profile-section-card,
.password-card,
.info-box,
.kpi-card,
.summary-card,
.cover-banner,
.hero-banner,
.home-banner,
.customer-banner {
  background: var(--card) !important;
  color: var(--card-foreground) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 18px 48px oklch(0 0 0 / 0.30) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

.card *,
.form-section *,
.section-card *,
.modal-content *,
.panel *,
.table-container *,
.filter-section *,
.report-card *,
.dashboard-card * {
  color: inherit;
}

.card-header,
.page-header,
.section-title,
.modal-header,
.modal-footer,
.card-footer,
thead,
.table thead,
.table thead th,
th {
  background: var(--panel) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}

.modal-body,
.card-body {
  background: transparent !important;
  color: var(--foreground) !important;
}

.text-muted,
.form-text,
.help-text,
.subtitle,
.card-subtitle,
small.text-muted,
p.text-muted,
.stat-label,
.notification-message,
.notification-time {
  color: var(--muted-foreground) !important;
}

input,
select,
textarea,
.form-control,
.form-select,
.input-group-text,
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--input) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  background: var(--input) !important;
  color: var(--foreground) !important;
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 0.18rem oklch(0.62 0.22 255 / 0.20) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

select option,
select optgroup,
.form-select option,
.form-select optgroup,
option {
  background: oklch(0.22 0.04 260) !important;
  color: var(--foreground) !important;
}

input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled,
input[readonly],
textarea[readonly] {
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

.table,
table,
.table tbody,
table tbody,
.table tbody tr,
table tbody tr,
.table tbody td,
table tbody td,
.table td,
.table th {
  background: transparent !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}

.table-hover tbody tr:hover,
tbody tr:hover {
  background: var(--panel) !important;
}

.btn,
button,
.btn-primary,
.btn-info,
.btn-login,
button[type="submit"] {
  background: var(--primary) !important;
  border: 0 !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--radius) !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px oklch(0.62 0.22 255 / 0.20) !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-info,
.btn-icon,
.view-btn,
.toggle-password,
.password-toggle {
  background: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
  border: 1px solid var(--border) !important;
}

.btn-warning {
  background: oklch(0.82 0.16 85) !important;
  color: oklch(0.18 0.04 260) !important;
}

.btn-danger,
.btn-delete,
.btn-destructive {
  background: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
}

.btn-success {
  background: oklch(0.60 0.18 150) !important;
  color: var(--foreground) !important;
}

.btn:hover,
button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.badge,
.status-badge {
  border-radius: 999px !important;
  font-weight: 800 !important;
}

a,
.text-primary,
.fa.text-primary,
.fas.text-primary,
.far.text-primary,
.fab.text-primary,
.service-icon,
.quick-action i,
.action-card i,
.dashboard-action i,
.customer-action i,
.appliance-item i,
.sidebar-menu i,
#sidebarMenu .sidebar-item i {
  color: var(--primary) !important;
}

a:hover { color: var(--foreground) !important; }

hr,
.dropdown-divider {
  border-color: var(--border) !important;
  opacity: 1 !important;
}

.btn-close {
  filter: invert(1) grayscale(1) brightness(1.8) !important;
  opacity: 0.95 !important;
}

/* Edit Request Details must stay inside the viewport and scroll */
#editDetailsModal .modal-dialog,
#editRequestDetailsModal .modal-dialog {
  max-height: calc(100vh - 1rem) !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

#editDetailsModal .modal-content,
#editRequestDetailsModal .modal-content {
  max-height: calc(100vh - 1rem) !important;
  overflow: hidden !important;
}

#editDetailsModal .modal-body,
#editRequestDetailsModal .modal-body {
  max-height: calc(100vh - 150px) !important;
  overflow-y: auto !important;
  padding-right: 1rem !important;
}

#editDetailsModal .modal-footer,
#editRequestDetailsModal .modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--background); }
*::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }


/* =========================================================
   Final polish: left slide-out sidebar, clickable request links,
   centered login, and safe scrolling modals.
   ========================================================= */
body:has(.login-container) {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.login-container {
  width: min(420px, calc(100vw - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#sidebarMenu,
.sidebar-menu#sidebarMenu,
body > .sidebar-menu#sidebarMenu {
  left: -320px !important;
  right: auto !important;
  width: min(300px, 86vw) !important;
  height: 100vh !important;
  border-radius: 0 18px 18px 0 !important;
  border-left: 0 !important;
  border-right: 1px solid var(--panel-border) !important;
  background:
    radial-gradient(circle at top left, oklch(0.62 0.22 255 / 0.18), transparent 42%),
    linear-gradient(180deg, var(--card), oklch(0.16 0.04 260)) !important;
  box-shadow: 18px 0 55px oklch(0 0 0 / 0.42) !important;
  overflow-y: auto !important;
  transition: left .28s ease, transform .28s ease !important;
}

#sidebarMenu.open,
.sidebar-menu#sidebarMenu.open,
body > .sidebar-menu#sidebarMenu.open {
  left: 0 !important;
  right: auto !important;
}

#sidebarMenu .sidebar-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: oklch(0.18 0.04 260 / 0.94) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--panel-border) !important;
  padding: 18px 18px !important;
}

#sidebarMenu .sidebar-body {
  padding: 14px !important;
}

#sidebarMenu .sidebar-item {
  min-height: 44px !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
  padding: 11px 13px !important;
  font-weight: 800 !important;
  border: 1px solid transparent !important;
}

#sidebarMenu .sidebar-item i {
  width: 25px !important;
  margin-right: 10px !important;
  text-align: center !important;
}

#sidebarMenu .sidebar-item:hover,
#sidebarMenu .sidebar-item.active {
  background: var(--panel) !important;
  border-color: var(--primary) !important;
  transform: translateX(3px) !important;
}

.menu-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--foreground) !important;
}

.menu-btn:hover {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.sidebar-overlay {
  background: oklch(0 0 0 / 0.58) !important;
  backdrop-filter: blur(3px) !important;
}

.request-number-link {
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.request-number-link:hover,
.request-number-link:focus {
  background: transparent !important;
  color: var(--primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Make long edit/detail popups scroll instead of overflowing the screen. */
.modal-dialog,
.modal-dialog.modal-xl,
.modal-dialog.modal-lg {
  max-height: calc(100vh - 1rem) !important;
}

.modal-content {
  max-height: calc(100vh - 1rem) !important;
  overflow: hidden !important;
}

.modal-body {
  overflow-y: auto !important;
}

#editDetailsModal .modal-body,
#editRequestDetailsModal .modal-body,
#requestDetailsModal .modal-body,
#detailsModal .modal-body {
  max-height: calc(100vh - 150px) !important;
  overflow-y: auto !important;
}

#editDetailsModal .modal-footer,
#editRequestDetailsModal .modal-footer,
#requestDetailsModal .modal-footer,
#detailsModal .modal-footer {
  flex-shrink: 0 !important;
}


/* =========================================================
   Dark theme contrast safety patch.
   Some older pages hard-coded black/dark text inside cards,
   tables, modals, and timeline rows. Keep readable on navy UI.
   ========================================================= */
.text-dark,
.text-black,
.text-body,
.text-secondary,
.text-muted-dark,
.card .text-dark,
.modal .text-dark,
.table .text-dark,
.admin-card .text-dark,
.csr-card .text-dark,
.customer-card .text-dark {
  color: var(--foreground) !important;
}

.card :where(p,span,small,strong,em,label,div,td,th,a,h1,h2,h3,h4,h5,h6),
.modal-content :where(p,span,small,strong,em,label,div,td,th,a,h1,h2,h3,h4,h5,h6),
.table-container :where(p,span,small,strong,em,label,div,td,th,a,h1,h2,h3,h4,h5,h6),
.report-card :where(p,span,small,strong,em,label,div,td,th,a,h1,h2,h3,h4,h5,h6),
.dashboard-card :where(p,span,small,strong,em,label,div,td,th,a,h1,h2,h3,h4,h5,h6),
.section-card :where(p,span,small,strong,em,label,div,td,th,a,h1,h2,h3,h4,h5,h6),
.panel :where(p,span,small,strong,em,label,div,td,th,a,h1,h2,h3,h4,h5,h6),
.activity-log-table :where(p,span,small,strong,em,label,div,td,th,a,h1,h2,h3,h4,h5,h6),
.csr-team-table :where(p,span,small,strong,em,label,div,td,th,a,h1,h2,h3,h4,h5,h6) {
  color: var(--foreground) !important;
}

.card .text-muted,
.modal-content .text-muted,
.table-container .text-muted,
.report-card .text-muted,
.dashboard-card .text-muted,
.section-card .text-muted,
.panel .text-muted,
.activity-log-table .text-muted,
.csr-team-table .text-muted,
.card small,
.modal-content small,
.table-container small,
.report-card small,
.dashboard-card small,
.section-card small,
.panel small {
  color: var(--muted-foreground) !important;
}

.table td,
.table th,
table td,
table th,
.table td *,
.table th *,
table td *,
table th * {
  color: var(--foreground) !important;
}

.badge,
.badge *,
.status-badge,
.status-badge *,
.btn,
.btn *,
button,
button *,
.alert,
.alert *,
.request-pill-warning,
.request-pill-warning * {
  color: inherit !important;
}

.form-text,
.help-text,
.description,
.subtext,
.hint,
.table .small,
table .small {
  color: var(--muted-foreground) !important;
}

select,
select option,
.form-select,
.form-select option {
  color: var(--foreground) !important;
  background-color: oklch(0.22 0.04 260) !important;
}

/* Customer notification wording/spacing inside add-note modal */
#addNoteModal .form-check-label,
#addNoteModal .form-label,
#addNoteModal .modal-title {
  color: var(--foreground) !important;
}

/* =========================================================
   FINAL READABILITY PATCH
   Fix remaining legacy dark text and close icons on navy theme.
   ========================================================= */
:root {
  color-scheme: dark;
}

/* Keep close buttons as real RED X icons, not white square blocks. */
.btn-close,
.modal-header .btn-close,
.alert .btn-close,
button.btn-close,
button.close,
.modal-close,
.close-modal {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;

  border-radius: 10px !important;
  border: 1px solid oklch(0.72 0.20 27 / 0.75) !important;
  background-color: oklch(0.62 0.24 27 / 0.18) !important;

  opacity: 1 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-indent: 0 !important;
  overflow: hidden !important;
  filter: none !important;

  color: oklch(0.78 0.17 27) !important;
  background-image: none !important;
}

/* Red X icon */
.btn-close::before,
.modal-header .btn-close::before,
.alert .btn-close::before,
button.btn-close::before,
button.close::before,
.modal-close::before,
.close-modal::before {
  content: "\00d7" !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: oklch(0.78 0.17 27) !important;
  -webkit-text-fill-color: oklch(0.78 0.17 27) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
}

/* Hover state */
.btn-close:hover,
.modal-header .btn-close:hover,
.alert .btn-close:hover,
button.btn-close:hover,
button.close:hover,
.modal-close:hover,
.close-modal:hover {
  background-color: oklch(0.62 0.24 27 / 0.34) !important;
  border-color: oklch(0.82 0.15 27 / 0.95) !important;
  color: oklch(0.86 0.13 27) !important;
  transform: scale(1.04) !important;
}

/* Hover X icon */
.btn-close:hover::before,
.modal-header .btn-close:hover::before,
.alert .btn-close:hover::before,
button.btn-close:hover::before,
button.close:hover::before,
.modal-close:hover::before,
.close-modal:hover::before {
  color: oklch(0.86 0.13 27) !important;
  -webkit-text-fill-color: oklch(0.86 0.13 27) !important;
}

/* Stronger legacy contrast override for Admin/CSR/Customer dark panels. */
.admin-main, .admin-main *,
.admin-content, .admin-content *,
.csr-main, .csr-main *,
.csr-content, .csr-content *,
.customer-main, .customer-main *,
.main-content, .main-content *,
.content, .content *,
.modal-content, .modal-content *,
.table-container, .table-container *,
.table-responsive, .table-responsive *,
.report-card, .report-card *,
.dashboard-card, .dashboard-card *,
.section-card, .section-card *,
.card, .card *,
.panel, .panel *,
.csr-team-table, .csr-team-table *,
.activity-log-table, .activity-log-table *,
#requestDetailsBody, #requestDetailsBody *,
#requestDetailsModal, #requestDetailsModal *,
#detailsModal, #detailsModal *,
#addNoteModal, #addNoteModal *,
#editDetailsModal, #editDetailsModal * {
  color: var(--foreground) !important;
  -webkit-text-fill-color: var(--foreground) !important;
  opacity: 1 !important;
}

/* Keep muted labels readable, not black/near-invisible. */
.text-muted,
.small,
small,
.subtext,
.subtitle,
.description,
.hint,
.help-text,
.form-text,
.last-assigned,
.team-subtitle,
.member-count,
.table-subtext,
.note-help,
.muted,
[style*="color: #111827"],
[style*="color:#111827"],
[style*="color: #0f172a"],
[style*="color:#0f172a"],
[style*="color: #000"],
[style*="color:#000"],
[style*="color: black"],
[style*="color:black"] {
  color: var(--muted-foreground) !important;
  -webkit-text-fill-color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

/* Tables shown in screenshots: force readable cells and nested labels. */
table,
table *,
.table,
.table *,
thead,
thead *,
tbody,
tbody *,
tr,
tr *,
td,
td *,
th,
th * {
  color: var(--foreground) !important;
  -webkit-text-fill-color: var(--foreground) !important;
  opacity: 1 !important;
}

td small,
td .small,
td .text-muted,
td .subtext,
td .last-assigned,
td .member-count,
.table small,
.table .small,
.table .text-muted {
  color: var(--muted-foreground) !important;
  -webkit-text-fill-color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

/* Inputs/textareas like Problem/Issue Description must display typed values clearly. */
input,
textarea,
select,
.form-control,
.form-select,
.form-control *,
.form-select * {
  color: var(--foreground) !important;
  -webkit-text-fill-color: var(--foreground) !important;
  opacity: 1 !important;
}

input::selection,
textarea::selection,
.form-control::selection,
#requestDetailsBody ::selection,
.modal-content ::selection,
table ::selection {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  -webkit-text-fill-color: var(--primary-foreground) !important;
}

/* Do not accidentally turn badge/button text dark or invisible. */
.badge,
.badge *,
.status-badge,
.status-badge *,
.btn,
.btn *,
button:not(.btn-close),
button:not(.btn-close) *,
.alert,
.alert * {
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

.btn-warning,
.btn-warning *,
.badge-warning,
.badge-warning * {
  color: oklch(0.18 0.04 260) !important;
  -webkit-text-fill-color: oklch(0.18 0.04 260) !important;
}