/* Theme Switcher CSS - Light and Dark Mode */

:root {
  /* Light Mode (System/Browser Default) */
  --hive-bg-primary: #f0f3f8;
  --hive-bg-secondary: #ffffff;
  --hive-text-primary: #5e5e5e;
  --hive-text-secondary: #6c757d;
  --hive-border-color: #dee2e6;
  --hive-dropdown-bg: #ffffff;
  --hive-dropdown-text: #212529;
  --hive-dropdown-hover-bg: #e9ecef;
  --hive-shadow: rgba(0, 0, 0, 0.1);
  --hive-navbar-bg: #1976d2;
  --hive-navbar-text: #ffffff;
  --hive-card-header-bg: #f0f3f8;
}

/* Dark Mode Explicit */
/* Theme changes are prevented from flashing by inline script in base.html */
html[data-theme="dark"] {
  --hive-bg-primary: #0E1D2B;
  --hive-bg-secondary: #1a2a3d;
  --hive-text-primary: #e0e0e0;
  --hive-text-secondary: #b0b0b0;
  --hive-border-color: #2a3a4d;
  --hive-dropdown-bg: #1a2a3d;
  --hive-dropdown-text: #e0e0e0;
  --hive-dropdown-hover-bg: #253649;
  --hive-shadow: rgba(0, 0, 0, 0.3);
  --hive-navbar-bg: #0E1D2B;
  --hive-navbar-text: #e0e0e0;
  --hive-card-header-bg: #3b4f66;
}

/* Light Mode Explicit */
html[data-theme="light"] {
  --hive-bg-primary: #f0f3f8;
  --hive-bg-secondary: #ffffff;
  --hive-text-primary: #5e5e5e;
  --hive-text-secondary: #6c757d;
  --hive-border-color: #dee2e6;
  --hive-dropdown-bg: #ffffff;
  --hive-dropdown-text: #212529;
  --hive-dropdown-hover-bg: #e9ecef;
  --hive-shadow: rgba(0, 0, 0, 0.1);
  --hive-navbar-bg: #1976d2;
  --hive-navbar-text: #ffffff;
  --hive-card-header-bg: #e2f0ff;
}

/* Modal close button adjustments for dark mode */
html[data-theme="dark"] .close {
  color: #ffffff;
  text-shadow: 0 1px 0 #000;
}

/* ===== APLICAR TEMAS A ELEMENTOS PRINCIPALES ===== */

/* Body - Fondo general */
body {
  background-color: var(--hive-bg-primary) !important;
  color: var(--hive-text-primary) !important;
}

/* Allow smooth animations and transitions for UI elements */

/* Navbar - Encabezado de navegación */
html[data-theme="dark"] .navbar {
  background-color: var(--hive-navbar-bg) !important;
}

html[data-theme="dark"] .navbar-dark {
  background-color: var(--hive-navbar-bg) !important;
}

html[data-theme="dark"] .navbar-dark .navbar-brand {
  color: var(--hive-navbar-text);
}

html[data-theme="dark"] .navbar-dark .navbar-nav .nav-link {
  color: rgba(224, 224, 224, 0.7);
}

html[data-theme="dark"] .navbar-dark .navbar-nav .nav-link:hover,
html[data-theme="dark"] .navbar-dark .navbar-nav .nav-link:focus {
  color: var(--hive-navbar-text);
}

html[data-theme="dark"] .navbar-dark .navbar-nav .active > .nav-link,
html[data-theme="dark"] .navbar-dark .navbar-nav .nav-link.active {
  color: var(--hive-navbar-text);
}

/* General nav-link active state - Dark Mode */
html[data-theme="dark"] .nav-link.active {
  color: #1976d2 !important;
  background-color: transparent;
}

html[data-theme="dark"] .nav-link.active:hover {
  color: #1976d2 !important;
}

/* Header */
html[data-theme="dark"] header {
  background-color: var(--hive-navbar-bg);
  border-bottom-color: var(--hive-border-color);
}

/* General header class - Dark Mode */
html[data-theme="dark"] .header {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

/* Bootstrap utility classes overrides - Dark Mode */
html[data-theme="dark"] #main-logo {
  background-color: #1976d2 !important;
  transition: none !important;
}

html[data-theme="dark"] #main-logo img {
  transition: none !important;
}

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 {
  color: var(--hive-text-primary);
}

/* Dropdown menu theme */
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--hive-dropdown-bg);
  border-color: var(--hive-border-color);
  box-shadow: 0 0.5rem 1rem var(--hive-shadow);
  z-index: 1050;
}

.dropdown-menu {
  z-index: 1050;
}

html[data-theme="dark"] .dropdown-item {
  color: var(--hive-dropdown-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--hive-dropdown-hover-bg);
  color: var(--hive-dropdown-text);
}

html[data-theme="dark"] .dropdown-divider {
  border-color: var(--hive-border-color);
}

/* Form controls */
html[data-theme="dark"] .form-control {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .form-control:focus {
  background-color: var(--hive-bg-primary);
  border-color: #1976d2;
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .form-control::placeholder {
  color: var(--hive-text-secondary);
}

/* Cards */
html[data-theme="dark"] .card {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card-header {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card-footer {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
}

/* Tables - Dark Mode (COLOR ONLY, no padding/margin/border changes) */
html[data-theme="dark"] .table {
  color: var(--hive-text-primary);
  background-color: var(--hive-bg-secondary);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .table thead th {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-bottom: 2px solid var(--hive-border-color) !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(224, 224, 224, 0.05);
}

html[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--hive-dropdown-hover-bg);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .table-hover tbody tr.no-theme-fix:hover {
  background-color: transparent !important;
  color: inherit !important;
}

html[data-theme="dark"] .hm-table-widget-alerts .sub-table td[style*="background-color"] {
  background-color: transparent !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light>th,
html[data-theme="dark"] .table-light>td {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .table-dark {
  background-color: var(--hive-bg-primary);
  color: var(--hive-text-primary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .table-dark th,
html[data-theme="dark"] .table-dark td,
html[data-theme="dark"] .table-dark thead th {
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .table tbody tr {
  border-color: var(--hive-border-color);
  background-color: var(--hive-bg-secondary);
}

html[data-theme="dark"] .table thead {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td {
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .table-borderless th,
html[data-theme="dark"] .table-borderless td {
  border: 1px solid var(--hive-border-color) !important;
}

html[data-theme="dark"] .table.table-borderless.table-striped.table-condensed.tasks-table td {
  background: transparent !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .table.table-borderless.table-striped.table-condensed.tasks-table tbody tr:nth-of-type(odd) td {
  background-color: rgba(224, 224, 224, 0.05) !important;
}

html[data-theme="dark"] .table.table-borderless.table-striped.table-condensed.tasks-table tbody tr:nth-of-type(even) td {
  background-color: var(--hive-bg-secondary) !important;
}

/* Table Colors - Dark Mode */
html[data-theme="dark"] .table-primary,
html[data-theme="dark"] .table-primary th,
html[data-theme="dark"] .table-primary td,
html[data-theme="dark"] .table-primary thead th,
html[data-theme="dark"] .table-primary tbody + tbody {
  background-color: rgba(25, 118, 210, 0.15);
  border-color: rgba(25, 118, 210, 0.3);
}

html[data-theme="dark"] .table-primary:hover {
  background-color: rgba(25, 118, 210, 0.2);
}

html[data-theme="dark"] .table-secondary,
html[data-theme="dark"] .table-secondary th,
html[data-theme="dark"] .table-secondary td {
  background-color: rgba(108, 117, 125, 0.15);
  border-color: rgba(108, 117, 125, 0.3);
}

html[data-theme="dark"] .table-success,
html[data-theme="dark"] .table-success th,
html[data-theme="dark"] .table-success td {
  background-color: rgba(40, 167, 69, 0.15);
  border-color: rgba(40, 167, 69, 0.3);
}

html[data-theme="dark"] .table-danger,
html[data-theme="dark"] .table-danger th,
html[data-theme="dark"] .table-danger td {
  background-color: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.3);
}

html[data-theme="dark"] .table-warning,
html[data-theme="dark"] .table-warning th,
html[data-theme="dark"] .table-warning td {
  background-color: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.3);
}

html[data-theme="dark"] .table-info,
html[data-theme="dark"] .table-info th,
html[data-theme="dark"] .table-info td {
  background-color: rgba(23, 162, 184, 0.15);
  border-color: rgba(23, 162, 184, 0.3);
}

html[data-theme="dark"] .table-active,
html[data-theme="dark"] .table-active th,
html[data-theme="dark"] .table-active td {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--hive-border-color);
}

/* Table Cell Colors - Dark Mode */
html[data-theme="dark"] .table .table-primary {
  background-color: rgba(25, 118, 210, 0.15) !important;
}

html[data-theme="dark"] .table .table-secondary {
  background-color: rgba(108, 117, 125, 0.15) !important;
}

html[data-theme="dark"] .table .table-success {
  background-color: rgba(40, 167, 69, 0.15) !important;
}

html[data-theme="dark"] .table .table-danger {
  background-color: rgba(220, 53, 69, 0.15) !important;
}

html[data-theme="dark"] .table .table-warning {
  background-color: rgba(255, 193, 7, 0.15) !important;
}

html[data-theme="dark"] .table .table-info {
  background-color: rgba(23, 162, 184, 0.15) !important;
}

html[data-theme="dark"] .table .table-light,
html[data-theme="dark"] .table .table-light>th,
html[data-theme="dark"] .table .table-light>td {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .table .table-dark {
  background-color: var(--hive-bg-primary) !important;
  color: var(--hive-text-primary) !important;
}

/* Sobrescribir colores específicos de componentes verificación y widgets en dark mode */
html[data-theme="dark"] [style*="#FEF7EC"],
html[data-theme="dark"] [style*="#fef7ec"],
html[data-theme="dark"] [style*="#F6FFFB"],
html[data-theme="dark"] [style*="#f6fffb"],
html[data-theme="dark"] [style*="#FFEEF0"],
html[data-theme="dark"] [style*="#ffeef0"] {
  background-color: var(--hive-bg-secondary) !important;
}

html[data-theme="dark"] [style*="#E7E7E7"],
html[data-theme="dark"] [style*="#e7e7e7"] {
  border-color: var(--hive-border-color) !important;
}

/* Preservar y aplicar bordes en dark mode para tablas y elementos con estilos inline */
html[data-theme="dark"] table {
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] table th,
html[data-theme="dark"] table td,
html[data-theme="dark"] table tr {
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] [style*="background-color"] {
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] tr,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
  border-color: var(--hive-border-color) !important;
}

/* Theme switcher buttons styling - 2026 style */
.theme-switcher-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  border-top: 1px solid var(--hive-border-color);
  border-bottom: 1px solid var(--hive-border-color);
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10000;
}

.theme-switcher-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hive-text-secondary);
  margin-right: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  width: 90%;
  background: transparent;
  border: 1px solid var(--hive-border-color);
  border-radius: 0.25rem;
  color: var(--hive-text-primary);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.theme-btn:hover {
  background-color: var(--hive-dropdown-hover-bg);
  border-color: #1976d2;
  color: #1976d2;
  transform: translateY(-1px);
}

.theme-btn.active {
  background-color: #1976d2 !important;
  border-color: #1976d2 !important;
  color: #ffffff !important;
  border-style: solid !important;
  border-width: 1px !important;
}

html[data-theme="dark"] .theme-btn {
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .theme-btn:hover {
  background-color: var(--hive-dropdown-hover-bg);
  border-color: #1976d2;
}

html[data-theme="dark"] .theme-btn.active {
  background-color: #1976d2 !important;
  border-color: #1976d2 !important;
  color: #ffffff !important;
  border-style: solid !important;
  border-width: 1px !important;
}

.theme-btn i {
  font-size: 0.8rem;
}

/* Icon styling */
.theme-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* Alerts */
html[data-theme="dark"] .alert {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

/* Pagination */
html[data-theme="dark"] .page-link {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: #1976d2;
}

html[data-theme="dark"] .page-link:hover {
  background-color: var(--hive-bg-primary);
  color: #1976d2;
}

html[data-theme="dark"] .page-item.active .page-link {
  background-color: #1976d2;
  border-color: #1976d2;
}

/* Buttons */
html[data-theme="dark"] .btn-outline-primary {
  color: #1976d2;
  border-color: #1976d2;
}

html[data-theme="dark"] .btn-outline-primary:hover {
  background-color: #1976d2;
  border-color: #1976d2;
  color: #ffffff;
}

/* List groups */
html[data-theme="dark"] .list-group {
  background-color: var(--hive-bg-primary) !important;
}

html[data-theme="dark"] .list-group-item {
  background-color: var(--hive-bg-secondary) !important;
  border-color: var(--hive-border-color) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] .list-group-item:focus {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
}

/* HiVe Track Holygrail Layout - Dark Mode */
html[data-theme="dark"] #hm-holygrail-body {
  background-color: var(--hive-bg-primary);
}

html[data-theme="dark"] #hm-holygrail-left-sidebar {
  background-color: var(--hive-bg-primary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] #hm-holygrail-content {
  background-color: var(--hive-bg-primary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] #hm-holygrail-layout #hm-holygrail-body #hm-holygrail-content .header {
  background-color: var(--hive-bg-secondary) !important;
  border-bottom-color: var(--hive-border-color) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] #hm-holygrail-layout #hm-holygrail-body #hm-holygrail-content .header .border-right {
  border-right-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] #hm-holygrail-layout #hm-holygrail-body #hm-holygrail-content .footer {
  background-color: var(--hive-bg-secondary) !important;
  border-top-color: var(--hive-border-color) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] #hm-holygrail-layout #hm-holygrail-body #hm-holygrail-content .footer .border-left {
  border-left-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] #hm-holygrail-layout #hm-holygrail-body #hm-holygrail-content .footer .border-right {
  border-right-color: var(--hive-border-color) !important;
}

/* Left sidebar elements */
html[data-theme="dark"] #hm-holygrail-left-sidebar .list-group-item {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] #hm-holygrail-left-sidebar .list-group-item:hover,
html[data-theme="dark"] #hm-holygrail-left-sidebar .list-group-item.active {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

/* Card styles refinement */
html[data-theme="dark"] .card-body {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card-title {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card-text {
  color: var(--hive-text-primary);
}

/* Custom HM Cards and Navigation Styles - Dark Mode */

/* hm-card-style-1 Card */
html[data-theme="dark"] .card.hm-card-style-1 {
  background-color: var(--hive-bg-secondary);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.3), 0 2px 2px 1px rgba(25, 118, 210, 0.1);
}

html[data-theme="dark"] .card.hm-card-style-1 .bg-widget {
  background-color: var(--hive-bg-primary) !important;
}

html[data-theme="dark"] .card.hm-card-style-1 .border-widget {
  background-color: var(--hive-bg-primary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .card.hm-card-style-1 .text-dark-blue {
  color: #b0c4de;
}

html[data-theme="dark"] .card.hm-card-style-1 .card-header {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-style-1 .card-header .text-blue {
  color: #b0c4de;
}

html[data-theme="dark"] .card.hm-card-style-1 .card-header .text-blue-clear {
  color: #a0b0c0;
}

html[data-theme="dark"] .card.hm-card-style-1 .card-body {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-style-1 .card-body .text-blue-title {
  color: #a0b0c0;
}

html[data-theme="dark"] .card.hm-card-style-1 .card-body .text-blue {
  color: #a0b0c0;
}

html[data-theme="dark"] .card.hm-card-style-1 .card-footer {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-style-1 .card-filter .card-filter-content {
  background-color: var(--hive-bg-secondary);
}

html[data-theme="dark"] .card.hm-card-style-1 .card-filter .card-filter-content .card-filter-header .header-title {
  color: #b0c4de;
}

/* Tables in hm-card-style-1 - Dark Mode */
html[data-theme="dark"] .card.hm-card-style-1 .table {
  color: var(--hive-text-primary);
  background-color: var(--hive-bg-secondary);
}

html[data-theme="dark"] .card.hm-card-style-1 .table th:not([class*="bg-wdg-"]),
html[data-theme="dark"] .card.hm-card-style-1 .table td:not([class*="bg-wdg-"]) {
  border-color: var(--hive-border-color);
  background-color: var(--hive-bg-secondary);
}

html[data-theme="dark"] .card.hm-card-style-1 .table thead th:not([class*="bg-wdg-"]) {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--hive-border-color) !important;
}

html[data-theme="dark"] .card.hm-card-style-1 .table tbody tr {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .card.hm-card-style-1 .table tbody tr:hover {
  background-color: var(--hive-dropdown-hover-bg);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-style-1 .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(224, 224, 224, 0.05);
}

html[data-theme="dark"] .card.hm-card-style-1 .table-hover tbody tr:hover {
  background-color: var(--hive-dropdown-hover-bg);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-style-1 .table-bordered th,
html[data-theme="dark"] .card.hm-card-style-1 .table-bordered td {
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .card.hm-card-style-1 .table-borderless th,
html[data-theme="dark"] .card.hm-card-style-1 .table-borderless td {
  border: 1px solid var(--hive-border-color) !important;
}

/* Dynamic background rows - Dark Mode */
html[data-theme="dark"] .dinamic-background {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .dinamic-background:even {
  background-color: var(--hive-bg-secondary) !important;
}

html[data-theme="dark"] .dinamic-background:odd {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .dinamic-background:hover {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .dinamic-background td:not(.alert):not(.alert-warning):not(.alert-danger):not(.alert-success):not(.alert-info):not(.alert-primary):not(.alert-secondary) {
  background-color: inherit !important;
  color: var(--hive-text-primary) !important;
}

/* Override hardcoded inline light mode colors in dark mode - with !important */
html[data-theme="dark"] [style*="#f4f8fb"] {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] [style*="#ecf5fb"] {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] [style*="#d7e2ed"] {
  border-color: var(--hive-border-color) !important;
  background-color: var(--hive-bg-secondary) !important;
}

/* Override light mode text colors - these have !important in HTML too */
html[data-theme="dark"] [style*="color: #526981"] {
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] [style*="#ffffff"] {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

/* Revert no-theme-fix inline colors when returning to light mode */
html[data-theme="light"] .no-theme-fix {
  color: inherit !important;
  background-color: transparent !important;
}

/* hm-card-list Card */
html[data-theme="dark"] .card.hm-card-list {
  background-color: var(--hive-bg-secondary);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.3), 0 2px 2px 1px rgba(25, 118, 210, 0.1);
}

html[data-theme="dark"] .card.hm-card-list .card-header {
  background-color: var(--hive-card-header-bg);
  color: #ffffff;
}

html[data-theme="dark"] .card.hm-card-list .card-header a {
  color: #ffffff;
}

html[data-theme="dark"] .card.hm-card-list .card-header:focus,
html[data-theme="dark"] .card.hm-card-list .card-header:hover {
  background-color: #1976d2;
  color: #ffffff;
}

html[data-theme="dark"] .card.hm-card-list .card-header.active {
  background-color: #1976d2;
  color: #ffffff;
}

html[data-theme="dark"] .card.hm-card-list .card-body {
  background-color: var(--hive-bg-secondary);
  color: #ffffff;
}

html[data-theme="dark"] .card.hm-card-list .card-body a {
  color: #ffffff;
}

/* hm-card-profile Card */
html[data-theme="dark"] .card.hm-card-profile {
  background-color: var(--hive-bg-secondary);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.3), 0 2px 2px 1px rgba(25, 118, 210, 0.1);
}

html[data-theme="dark"] .card.hm-card-profile .card-header {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-profile .card-body {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-profile .list-group-item {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-profile .list-group-item.active {
  background-color: #0a3d7a !important;
  border-color: #0a3d7a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .card.hm-card-profile .list-group-item.active:hover {
  background-color: #062a47 !important;
  border-color: #062a47 !important;
  color: #ffffff !important;
}

/* General active list group items - Dark Mode */
html[data-theme="dark"] .list-group-item.active {
  background-color: #1976d2 !important;
  border-color: #1976d2 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .list-group-item.active:hover {
  background-color: #0d47a1 !important;
  border-color: #0d47a1 !important;
  color: #ffffff !important;
}

/* Nav items active state - Dark Mode */
html[data-theme="dark"] .nav-item.active .nav-link {
  background-color: transparent !important;
  color: #1976d2 !important;
  font-weight: 600 !important;
}

html[data-theme="dark"] .nav-item.active .nav-link:hover {
  color: #0d47a1 !important;
}

/* Tire Label - Dark Mode */
html[data-theme="dark"] .vc-main-wrapper .vc-tire-label {
  background-color: #1a2a3d !important;
  border-color: #3a4a5d !important;
  color: #e0e0e0 !important;
}

/* Navigation Tabs - HM Tabs */
html[data-theme="dark"] .nav.nav-tabs.hm-nav-tabs {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .nav.nav-tabs.hm-nav-tabs.bg-white {
  background-color: var(--hive-bg-secondary) !important;
}

/* Light mode nav-tabs with bg-white */
html[data-theme="light"] .nav.nav-tabs.hm-nav-tabs.bg-white {
  background-color: #ffffff !important;
}

html[data-theme="dark"] .nav.nav-tabs.hm-nav-tabs .nav-item .nav-link {
  color: #a0b0c0;
  background-color: transparent;
}

html[data-theme="dark"] .nav.nav-tabs.hm-nav-tabs .nav-item .nav-link.active {
  background-color: transparent;
  color: #1976d2;
  border-bottom-color: #1976d2;
}

html[data-theme="dark"] .nav.nav-tabs.hm-nav-tables-tabs {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .nav.nav-tabs.hm-nav-tables-tabs .nav-item .nav-link {
  color: #a0b0c0;
  background-color: transparent;
  transition: color 0.2s ease;
}

html[data-theme="dark"] .nav.nav-tabs.hm-nav-tables-tabs .nav-item .nav-link.active {
  background-color: transparent;
  color: #1976d2;
  border-bottom-color: #1976d2;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

/* Modals - Dark Mode */

html[data-theme="dark"] .modal-content {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .modal-header {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .modal-title {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .modal-body {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .modal-footer {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

html[data-theme="dark"] .modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

/* Holygrail left sidebar - hide/override image backgrounds */
html[data-theme="dark"] #hm-holygrail-left-sidebar img {
  display: none;
}

html[data-theme="dark"] #hm-holygrail-left-sidebar .logo,
html[data-theme="dark"] #hm-holygrail-left-sidebar .brand-image {
  filter: brightness(0.9);
}

/* Override bg-white utility class in dark mode */
html[data-theme="dark"] .bg-white {
  background-color: var(--hive-bg-primary) !important;
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .text-dark {
  color: var(--hive-text-primary) !important;
}

/* bg-gray-modal for modals */
html[data-theme="dark"] .bg-gray-modal {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Dashboard filter modal dark mode styling */
html[data-theme="dark"] .dashboard-widget-filter-modal {
  background-color: var(--hive-bg-primary);
}

html[data-theme="dark"] .dashboard-widget-filter-modal .modal-header,
html[data-theme="dark"] .dashboard-widget-filter-modal .container-filter {
  background-color: var(--hive-bg-primary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .dashboard-widget-filter-modal .modal-footer {
  background-color: var(--hive-bg-primary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .dashboard-widget-filter-modal .modal-footer .btn-secondary {
  min-width: 120px;
  color: #1976d2;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 4px;
  padding: 13px 16px 11px;
  margin-right: 1em;
}

html[data-theme="dark"] .dashboard-widget-filter-modal .modal-footer .btn-secondary:hover {
  background-color: rgba(25, 118, 210, 0.1);
}

html[data-theme="dark"] .dashboard-widget-filter-modal input,
html[data-theme="dark"] .dashboard-widget-filter-modal select {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .dashboard-widget-filter-modal input::placeholder {
  color: var(--hive-text-secondary) !important;
}

html[data-theme="dark"] .dashboard-widget-filter-modal .filter-title,
html[data-theme="dark"] .dashboard-widget-filter-modal .tag-sb-selected {
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .dashboard-widget-filter-modal .select2-container {
  background-color: var(--hive-bg-primary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .dashboard-widget-filter-modal .select2-container--default .select2-selection--multiple {
  background-color: var(--hive-bg-secondary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .dashboard-widget-filter-modal .select2-selection__rendered {
  background-color: var(--hive-bg-secondary) !important;
}

html[data-theme="dark"] .dashboard-widget-filter-modal .select2-search--inline {
  background-color: var(--hive-bg-secondary) !important;
}

html[data-theme="dark"] .dashboard-widget-filter-modal .select2-dropdown {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .dashboard-widget-filter-modal .select2-results__option {
  color: var(--hive-text-primary) !important;
}

/* Smooth transitions for dark mode - ONLY on actual theme changes, NOT on interactions */
html[data-theme="dark"] body,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .card,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .btn,
html[data-theme="dark"] header,
html[data-theme="dark"] #hm-holygrail-body,
html[data-theme="dark"] #hm-holygrail-left-sidebar,
html[data-theme="dark"] #hm-holygrail-content,
html[data-theme="dark"] .table,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .card.hm-card-style-1,
html[data-theme="dark"] .card.hm-card-list {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Filters in hm-holygrail-content - Dark Mode */
html[data-theme="dark"] #hm-holygrail-content .card-filter,
html[data-theme="dark"] #hm-holygrail-content .filter-container,
html[data-theme="dark"] #hm-holygrail-content .filter-item {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] #hm-holygrail-content .form-group,
html[data-theme="dark"] #hm-holygrail-content .form-group label,
html[data-theme="dark"] #hm-holygrail-content label {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] #hm-holygrail-content .form-control,
html[data-theme="dark"] #hm-holygrail-content .form-select,
html[data-theme="dark"] #hm-holygrail-content select,
html[data-theme="dark"] #hm-holygrail-content input[type="text"],
html[data-theme="dark"] #hm-holygrail-content input[type="search"],
html[data-theme="dark"] #hm-holygrail-content input[type="email"],
html[data-theme="dark"] #hm-holygrail-content input[type="number"],
html[data-theme="dark"] #hm-holygrail-content input[type="date"],
html[data-theme="dark"] #hm-holygrail-content textarea {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] #hm-holygrail-content .form-control::placeholder,
html[data-theme="dark"] #hm-holygrail-content input::placeholder {
  color: var(--hive-text-secondary);
  opacity: 1;
}

html[data-theme="dark"] #hm-holygrail-content .form-control:focus,
html[data-theme="dark"] #hm-holygrail-content .form-select:focus,
html[data-theme="dark"] #hm-holygrail-content select:focus,
html[data-theme="dark"] #hm-holygrail-content input:not([type="range"]):focus,
html[data-theme="dark"] #hm-holygrail-content textarea:focus {
  background-color: var(--hive-bg-primary);
  border-color: #1976d2;
  color: var(--hive-text-primary);
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

html[data-theme="dark"] #hm-holygrail-content select option {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] #hm-holygrail-content input[type="checkbox"],
html[data-theme="dark"] #hm-holygrail-content input[type="radio"] {
  border-color: var(--hive-border-color);
  background-color: var(--hive-bg-primary);
}

/* Date input icons - Dark Mode */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* Filter remove button - Dark Mode */
html[data-theme="dark"] button[style*="position:absolute"][style*="color:black"] {
  color: white !important;
}

/* Main menu - Dark Mode */
html[data-theme="dark"] #hm-main-menu {
  background: var(--hive-bg-secondary);
  background-image: none !important;
}

html[data-theme="dark"] #hm-main-menu-accordion {
  background: transparent !important;
}

html[data-theme="dark"] #hm-main-menu-accordion .card {
  background-color: transparent;
  border: none !important;
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu .card-header {
  background-color: var(--hive-bg-secondary);
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu .card-header .btn {
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu .card-header i {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu .card-body {
  background-color: var(--hive-bg-primary);
  color: var(--hive-text-primary);
  border-right: 2px solid var(--hive-border-color);
  will-change: transform, opacity;
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu.show .card-body {
  animation: smoothSlideDown 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu .card-body.collapsing {
  animation: smoothSlideUp 0.40s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu .card-body li {
  animation: fadeInSlide 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu.show .card-body li:nth-child(1) { animation-delay: 0.05s; }
html[data-theme="dark"] #hm-main-menu .card.hm-card-menu.show .card-body li:nth-child(2) { animation-delay: 0.1s; }
html[data-theme="dark"] #hm-main-menu .card.hm-card-menu.show .card-body li:nth-child(3) { animation-delay: 0.15s; }
html[data-theme="dark"] #hm-main-menu .card.hm-card-menu.show .card-body li:nth-child(4) { animation-delay: 0.2s; }
html[data-theme="dark"] #hm-main-menu .card.hm-card-menu.show .card-body li:nth-child(5) { animation-delay: 0.25s; }

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu .menu-item {
  color: var(--hive-text-primary) !important;
  font-weight: 500;
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu .sub-menu-item {
  color: var(--hive-text-secondary) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu .sub-menu-item:hover {
  color: #1976d2 !important;
}

html[data-theme="dark"] #hm-main-menu .card.hm-card-menu .card-body .active {
  color: #1976d2 !important;
  font-weight: bold !important;
}

/* Card footer - Dark Mode */
html[data-theme="dark"] .card-footer {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card-footer.list-group-item-light {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

/* Inputs and Form Controls - Dark Mode */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .hm-form-control {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .hm-form-control::placeholder {
  color: #888;
}

/* Menu animations - Professional 2026 */
@keyframes smoothSlideDown {
  from {
    opacity: 0;
    transform: translateY(-15px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes smoothSlideUp {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
  to {
    opacity: 0;
    transform: translateY(-15px) scale(0.98);
    filter: blur(4px);
  }
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Menu animations - Light Mode */
#hm-main-menu .card.hm-card-menu .card-body {
  will-change: transform, opacity;
}

#hm-main-menu .card.hm-card-menu.show .card-body {
  animation: smoothSlideDown 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#hm-main-menu .card.hm-card-menu .card-body.collapsing {
  animation: smoothSlideUp 0.40s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#hm-main-menu .card.hm-card-menu .card-body li {
  animation: fadeInSlide 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

#hm-main-menu .card.hm-card-menu.show .card-body li:nth-child(1) { animation-delay: 0.05s; }
#hm-main-menu .card.hm-card-menu.show .card-body li:nth-child(2) { animation-delay: 0.1s; }
#hm-main-menu .card.hm-card-menu.show .card-body li:nth-child(3) { animation-delay: 0.15s; }
#hm-main-menu .card.hm-card-menu.show .card-body li:nth-child(4) { animation-delay: 0.2s; }
#hm-main-menu .card.hm-card-menu.show .card-body li:nth-child(5) { animation-delay: 0.25s; }

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .hm-form-control:focus {
  background-color: var(--hive-bg-primary);
  border-color: #1976d2;
  color: var(--hive-text-primary);
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
html[data-theme="dark"] input[type="text"].text-black-input,
html[data-theme="dark"] .text-black-input {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

/* Preserve original inline backgrounds in table cells for dark mode */
html[data-theme="dark"] td[style*="background-color: #f4f8fb"] {
  background-color: #f4f8fb !important;
}

html[data-theme="dark"] td[style*="background-color: #ffeaeb"] {
  background-color: #ffeaeb !important;
}

html[data-theme="dark"] td[style*="background-color: #cdefe0"] {
  background-color: #cdefe0 !important;
}

/* Table cells with light inline backgrounds in dark mode - force dark text */
html[data-theme="dark"] td[style*="background-color: #f4f8fb"],
html[data-theme="dark"] td[style*="background-color: #ffeaeb"],
html[data-theme="dark"] td[style*="background-color: #cdefe0"],
html[data-theme="dark"] td[style*="background-color: #ddeefb"],
html[data-theme="dark"] td[style*="background-color: #a8dac4"],
html[data-theme="dark"] td[style*="background-color: #ffe6a2"],
html[data-theme="dark"] td[style*="background-color: #ffa5ac"],
html[data-theme="dark"] td[style*="background-color: #fff5d9"],
html[data-theme="dark"] td[style*="background-color: #b8e2fe"],
html[data-theme="dark"] th[style*="background-color: #f4f8fb"],
html[data-theme="dark"] th[style*="background-color: #ffeaeb"],
html[data-theme="dark"] th[style*="background-color: #cdefe0"],
html[data-theme="dark"] th[style*="background-color: #ddeefb"],
html[data-theme="dark"] th[style*="background-color: #a8dac4"],
html[data-theme="dark"] th[style*="background-color: #ffe6a2"],
html[data-theme="dark"] th[style*="background-color: #ffa5ac"],
html[data-theme="dark"] th[style*="background-color: #fff5d9"],
html[data-theme="dark"] th[style*="background-color: #b8e2fe"] {
  color: #000 !important;
}

html[data-theme="dark"] input[type="text"].text-black-input:focus,
html[data-theme="dark"] .text-black-input:focus {
  background-color: var(--hive-bg-primary) !important;
  border-color: #1976d2 !important;
  color: var(--hive-text-primary) !important;
}

/* Select2 Container - Dark Mode (Override hardcoded #fff) */
html[data-theme="dark"] .select2-container {
  background-color: var(--hive-bg-primary) !important;
  border: solid 1px transparent !important;
}

html[data-theme="dark"] .select2-container .dropdown-wrapper {
  background-color: transparent !important;
}

html[data-theme="dark"] .select2-selection {
  background-color: var(--hive-bg-primary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .select2-selection--multiple {
  background-color: var(--hive-bg-primary) !important;
  min-height: 44px;
}

html[data-theme="dark"] .select2-selection__rendered {
  background-color: var(--hive-bg-primary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .select2-search__field {
  background-color: var(--hive-bg-primary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .select2-search__field::placeholder {
  color: var(--hive-text-secondary) !important;
}

/* Switch Styles - Dark Mode (Minimal - keep original design) */
html[data-theme="dark"] .switch-label {
  color: var(--hive-text-primary) !important;
}

/* Select2 Styles - Dark Mode */
html[data-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: var(--hive-bg-secondary) !important;
  border-color: var(--hive-border-color) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection {
  background-color: var(--hive-bg-secondary) !important;
}

html[data-theme="dark"] .select2-selection__rendered {
  background-color: var(--hive-bg-secondary) !important;
}

html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #1976d2 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--hive-text-primary) !important;
}

/* Text brown override - Dark Mode */
html[data-theme="dark"] .text-brown {
  color: #ffffff !important;
}

html[data-theme="dark"] .card-bold {
  color: #ffffff !important;
}

html[data-theme="dark"] .select2-dropdown {
  background-color: var(--hive-bg-secondary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .select2-results__option {
  color: var(--hive-text-primary) !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
  background-color: #1976d2 !important;
  color: white !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--hive-bg-secondary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #1976d2 !important;
  border-color: #1976d2 !important;
  color: white !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .select2-search--inline .select2-search__field {
  color: var(--hive-text-primary) !important;
  background-color: var(--hive-bg-secondary) !important;
  border: none !important;
}

html[data-theme="dark"] .select2-search__field {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .select2-search__field::placeholder {
  color: var(--hive-text-secondary) !important;
}

html[data-theme="dark"] .select2-dropdown.select2-dropdown--below {
  background-color: var(--hive-bg-secondary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .select2-results__option:hover {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
}

/* Left Sidebar Text - Dark Mode */
html[data-theme="dark"] #hm-holygrail-left-sidebar,
html[data-theme="dark"] #hm-holygrail-left-sidebar .list-group-item {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] #hm-holygrail-left-sidebar a {
  color: #b0c4de;
}

html[data-theme="dark"] #hm-holygrail-left-sidebar a:hover {
  color: #d0e4fe;
}

/* HiVe List Group Style 1 - Dark Mode */
html[data-theme="dark"] .list-group.hm-list-group-style-1 {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .list-group.hm-list-group-style-1 .list-group-item {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .list-group.hm-list-group-style-1 .list-group-item:hover,
html[data-theme="dark"] .list-group.hm-list-group-style-1 .list-group-item:focus {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .list-group.hm-list-group-style-1 .list-group-item.active {
  background-color: #1976d2;
  border-color: #1976d2;
  color: #ffffff;
}

/* Switch Component - Dark Mode */
html[data-theme="dark"] .switch {
  background: #4a5a6d;
}

/* ===== LOGIN PAGE - DARK MODE ===== */
/* Login Layout - Dark Mode */
html[data-theme="dark"] #hm-login-layout {
  background-color: var(--hive-bg-primary);
}

html[data-theme="dark"] #hm-login-layout > div:first-child {
  background: linear-gradient(135deg, var(--hive-navbar-bg) 0%, #1a3a5d 100%) !important;
}

/* Login Form Inputs - Dark Mode */
html[data-theme="dark"] #hm-login-layout .form-control,
html[data-theme="dark"] #hm-login-layout input[type="text"],
html[data-theme="dark"] #hm-login-layout input[type="password"],
html[data-theme="dark"] #hm-login-layout input[type="email"] {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #hm-login-layout .form-control::placeholder,
html[data-theme="dark"] #hm-login-layout input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

html[data-theme="dark"] #hm-login-layout .form-control:focus,
html[data-theme="dark"] #hm-login-layout input:focus {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
}

/* Login Input Background Class */
html[data-theme="dark"] #hm-login-layout .input-background {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

html[data-theme="dark"] #hm-login-layout .input-background:focus {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: #ffffff !important;
}

/* Login Select/Dropdown - Dark Mode */
html[data-theme="dark"] #hm-login-layout select,
html[data-theme="dark"] #hm-login-layout .form-control select {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

html[data-theme="dark"] #hm-login-layout select:focus {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="dark"] #hm-login-layout select option {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

/* Login Select Arrow Class */
html[data-theme="dark"] #hm-login-layout .select-arrow-login {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #hm-login-layout .select-arrow-login:focus {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: #ffffff !important;
}

/* Login Text - Dark Mode */
html[data-theme="dark"] #hm-login-layout .text-white {
  color: #ffffff !important;
}

html[data-theme="dark"] #hm-login-layout p {
  color: #ffffff !important;
}

html[data-theme="dark"] #hm-login-layout label {
  color: #ffffff !important;
}

/* Login Submit Button - Light variant to contrast */
html[data-theme="dark"] #hm-login-layout .btn-light {
  background-color: #ffffff !important;
  color: #1976d2 !important;
  border-color: #ffffff !important;
  font-weight: 600;
}

html[data-theme="dark"] #hm-login-layout .btn-light:hover,
html[data-theme="dark"] #hm-login-layout .btn-light:focus {
  background-color: #f0f3f8 !important;
  color: #0d47a1 !important;
  border-color: #f0f3f8 !important;
}

/* Login Links */
html[data-theme="dark"] #hm-login-layout a {
  color: #b0e0ff !important;
}

html[data-theme="dark"] #hm-login-layout a:hover {
  color: #e0f0ff !important;
}

/* jqGrid Click/Focus/Hover States - Dark Mode */
/* Override jQuery UI .ui-state-focus and .ui-state-hover for dark mode */
html[data-theme="dark"] .ui-state-hover,
html[data-theme="dark"] .ui-widget-content .ui-state-hover,
html[data-theme="dark"] .ui-widget-header .ui-state-hover,
html[data-theme="dark"] .ui-state-focus,
html[data-theme="dark"] .ui-widget-content .ui-state-focus,
html[data-theme="dark"] .ui-widget-header .ui-state-focus {
  border: 1px solid var(--hive-border-color) !important;
  background: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
  font-weight: bold !important;
}

html[data-theme="dark"] .ui-state-hover a,
html[data-theme="dark"] .ui-state-focus a {
  color: var(--hive-text-primary) !important;
}

/* jqGrid row selection and highlight - Dark Mode */
html[data-theme="dark"] .ui-jqgrid tr.jqgrow {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .ui-jqgrid tr.jqgrow:hover,
html[data-theme="dark"] .ui-jqgrid tr.jqgrow:hover td {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .ui-jqgrid tr.jqgrow.ui-state-highlight,
html[data-theme="dark"] .ui-jqgrid tr.jqgrow.ui-state-active {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .ui-jqgrid tr.jqgrow td.ui-state-focus,
html[data-theme="dark"] .ui-jqgrid tr.jqgrow td.ui-state-hover,
html[data-theme="dark"] .ui-jqgrid tr.jqgrow.ui-state-highlight td {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

/* Selected row styling - Dark Mode */
html[data-theme="dark"] .ui-jqgrid .selected-row,
html[data-theme="dark"] .ui-jqgrid div.selected-row {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .ui-jqgrid .selected-row td,
html[data-theme="dark"] div.ui-jqgrid .selected-row td {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

/* Bootstrap Table Color Classes in jqGrid - Dark Mode */
html[data-theme="dark"] .ui-jqgrid tr.table-success,
html[data-theme="dark"] .ui-jqgrid tr.table-success td {
  background-color: var(--hive-bg-secondary) !important;
  border-color: var(--hive-border-color) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .ui-jqgrid tr.table-success:hover,
html[data-theme="dark"] .ui-jqgrid tr.table-success:hover td {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .ui-jqgrid tr.table-danger,
html[data-theme="dark"] .ui-jqgrid tr.table-danger td,
html[data-theme="dark"] .ui-jqgrid tr.table-warning,
html[data-theme="dark"] .ui-jqgrid tr.table-warning td,
html[data-theme="dark"] .ui-jqgrid tr.table-info,
html[data-theme="dark"] .ui-jqgrid tr.table-info td,
html[data-theme="dark"] .ui-jqgrid tr.table-primary,
html[data-theme="dark"] .ui-jqgrid tr.table-primary td,
html[data-theme="dark"] .ui-jqgrid tr.table-secondary,
html[data-theme="dark"] .ui-jqgrid tr.table-secondary td {
  background-color: var(--hive-bg-secondary) !important;
  border-color: var(--hive-border-color) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .ui-jqgrid tr.table-danger:hover td,
html[data-theme="dark"] .ui-jqgrid tr.table-warning:hover td,
html[data-theme="dark"] .ui-jqgrid tr.table-info:hover td,
html[data-theme="dark"] .ui-jqgrid tr.table-primary:hover td,
html[data-theme="dark"] .ui-jqgrid tr.table-secondary:hover td {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
}

/* Active rows in jqGrid - Dark Mode */
html[data-theme="dark"] .ui-jqgrid tr.active,
html[data-theme="dark"] .ui-jqgrid tr.active td {
  background-color: var(--hive-bg-secondary) !important;
  border-color: var(--hive-border-color) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .ui-jqgrid tr.active:hover,
html[data-theme="dark"] .ui-jqgrid tr.active:hover td {
  background-color: var(--hive-dropdown-hover-bg) !important;
  color: var(--hive-text-primary) !important;
}

/* Login Alert Messages - Dark Mode */
html[data-theme="dark"] #hm-login-layout .alert {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

html[data-theme="dark"] #hm-login-layout .alert-danger {
  background-color: rgba(220, 53, 69, 0.3);
  border-color: rgba(220, 53, 69, 0.5);
  color: #ff6b6b;
}

/* Right Side Panel - Dark Mode */
html[data-theme="dark"] #hm-login-layout #hm-right-bar-image,
html[data-theme="dark"] #hm-login-layout #hm-right-bar-image-control-max {
  background-color: var(--hive-bg-primary) !important;
  opacity: 0.9;
}

/* Light Theme - Ensure explicit styles remain */
html[data-theme="light"] #hm-login-layout > div:first-child {
  background-color: #1976d2 !important;
}

html[data-theme="light"] #hm-login-layout .input-background {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== ADDITIONAL DARK MODE COMPONENTS ===== */

/* Profile Capsule - Dark Mode */
html[data-theme="dark"] .hm-profile-capsule {
  border-radius: 8px;
  background-color: var(--hive-bg-secondary);
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 1px rgba(25, 118, 210, 0.15);
  padding: 0.2rem 0.5rem;
  color: var(--hive-text-primary);
}

/* List Group Item Action - Dark Mode */
html[data-theme="dark"] .list-group-item-action {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
  background-color: var(--hive-dropdown-hover-bg);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .list-group-item-action:active {
  background-color: #1976d2;
  color: #ffffff;
}

/* Card History Profile Vehicle - Dark Mode */
html[data-theme="dark"] .card.hm-card-history-profile-vehicle {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header .text-gray {
  color: var(--hive-text-secondary) !important;
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header button.btn {
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header.active,
html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header.hoverable:hover {
  background-color: #1976d2 !important;
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header.active .btn,
html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header.hoverable:hover .btn {
  color: #ffffff !important;
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header.active .text-info,
html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header.hoverable:hover .text-info {
  color: #ffffff !important;
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header.active .text-gray,
html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-header.hoverable:hover .text-gray {
  color: #ffffff !important;
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .card-body {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .active {
  background-color: #1976d2 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .text-info {
  color: #64b5f6 !important;
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .background-primary {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .background-secondary {
  background-color: var(--hive-bg-primary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .list-group-item {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .card.hm-card-history-profile-vehicle .list-group-item.active {
  background-color: #1976d2;
  border-color: #1976d2;
  color: #ffffff;
}

/* ===== TABLE AND SEARCH COMPONENTS - DARK MODE ===== */

/* Table Scroll - Dark Mode */
html[data-theme="dark"] .table-scroll {
  position: relative;
  width: 100%;
  z-index: 0;
  margin: auto;
  overflow: auto;
  background-color: var(--hive-bg-primary);
}

html[data-theme="dark"] .table-scroll table {
  width: 100%;
  min-width: auto;
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: var(--hive-bg-primary);
}

html[data-theme="dark"] .table-scroll th,
html[data-theme="dark"] .table-scroll td {
  padding: 5px 10px;
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
  vertical-align: middle;
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .table-scroll thead th {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--hive-border-color) !important;
}

html[data-theme="dark"] .table-scroll thead tr:first-child th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 30px;
  background-color: var(--hive-bg-secondary) !important;
  border-bottom: 2px solid var(--hive-border-color) !important;
}

html[data-theme="dark"] .table-scroll thead tr:last-child th {
  position: -webkit-sticky;
  position: sticky;
  top: 29px;
  height: 30px;
  background-color: var(--hive-bg-secondary) !important;
  border-bottom: 2px solid var(--hive-border-color) !important;
}

html[data-theme="dark"] .table-scroll tbody tr:hover td {
  background-color: var(--hive-dropdown-hover-bg);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .table-scroll tbody tr:nth-child(odd) td {
  background-color: var(--hive-bg-secondary);
}

html[data-theme="dark"] .table-scroll tbody tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] table .sticky-cells {
  z-index: 5;
}

/* Theme Switcher Dropdown - Centered Alignment */
html[data-theme="dark"] .dropdown-menu .theme-switcher-container,
html[data-theme="light"] .dropdown-menu .theme-switcher-container {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

/* Table Scroll - Light Mode */
html[data-theme="light"] .table-scroll {
  position: relative;
  width: 100%;
  z-index: 0;
  margin: auto;
  overflow: auto;
}

/* ===== Utility Classes for Tables & Pills - Dark Mode ===== */

/* Traffic Status Colors - Dark Mode (with readable text) */
html[data-theme="dark"] .bg-traffic-green {
  background-color: #cdefe0 !important;
  color: #1a1a1a !important;
}

html[data-theme="dark"] .bg-traffic-yellow {
  background-color: #fff5d9 !important;
  color: #1a1a1a !important;
}

html[data-theme="dark"] .bg-traffic-red {
  background-color: #ffeaeb !important;
  color: #1a1a1a !important;
}

html[data-theme="dark"] .bg-wdg-gray {
  background-color: #2a3a4d !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .bg-wdg-blue-light {
  background-color: #1a3a5d !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .bg-wdg-green-dark {
  background-color: #2fb77b !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-green-medium {
  background-color: #a8dac4 !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-green-clear {
  background-color: #e1f5ec !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-yellow-dark {
  background-color: #ffbb00 !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-yellow-medium {
  background-color: #ffe6a2 !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-yellow-light {
  background-color: #fff5d9 !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-red-dark {
  background-color: #ff4c5a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .bg-wdg-red-medium {
  background-color: #ffa5ac !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-red-light {
  background-color: #ffeaeb !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-blue-dark {
  background-color: #ecf5fb !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-blue-middle-dark {
  background-color: #b8e2fe !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-blue-medium {
  background-color: #f4f8fb !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-blue-clear {
  background-color: #d4e5f0 !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-blue-black-dark {
  background-color: #027fd2 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .bg-wdg-purple-black-dark {
  background-color: #7259e2 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .bg-wdg-orange-black-dark {
  background-color: #ff8f33 !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-gray-black-dark {
  background-color: #929496 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .bg-wdg-purple-clear {
  background-color: #c7c4d6 !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-orange-clear {
  background-color: #f6e1d0 !important;
  color: #000 !important;
}

html[data-theme="dark"] .bg-gray-card {
  background-color: #1a2a3d !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .bg-blue-header {
  background-color: #1a2e4a !important;
  color: #ffffff !important;
}

/* Container Search Pills - Dark Mode */
html[data-theme="dark"] .container-search-pills {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid var(--hive-border-color);
}

html[data-theme="dark"] .container-search-pills .pill,
html[data-theme="dark"] .container-search-pills .badge {
  background-color: #1976d2;
  color: #ffffff;
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
}

html[data-theme="dark"] .container-search-pills .pill:hover,
html[data-theme="dark"] .container-search-pills .badge:hover {
  background-color: #145ca4;
  cursor: pointer;
}

html[data-theme="dark"] .container-search-pills .pill-close,
html[data-theme="dark"] .container-search-pills .badge-close {
  cursor: pointer;
  margin-left: 0.3rem;
  font-weight: bold;
}

html[data-theme="dark"] .container-search-pills label {
  color: var(--hive-text-primary);
  margin: 0;
  font-weight: 500;
}

html[data-theme="dark"] .container-search-pills input,
html[data-theme="dark"] .container-search-pills select {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

/* ===== ADDITIONAL UI COMPONENTS - DARK MODE ===== */

/* Badges - Dark Mode */
html[data-theme="dark"] .badge {
  background-color: #1976d2;
  color: #ffffff;
}

html[data-theme="dark"] .badge-primary {
  background-color: #1976d2;
  color: #ffffff;
}

html[data-theme="dark"] .badge-secondary {
  background-color: #6c757d;
  color: #ffffff;
}

html[data-theme="dark"] .badge-success {
  background-color: #28a745;
  color: #ffffff;
}

html[data-theme="dark"] .badge-info {
  background-color: #17a2b8;
  color: #ffffff;
}

html[data-theme="dark"] .badge-warning {
  background-color: #ffc107;
  color: #000000;
}

html[data-theme="dark"] .badge-danger {
  background-color: #dc3545;
  color: #ffffff;
}

/* Input Group - Dark Mode */
html[data-theme="dark"] .input-group {
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .input-group .input-group-prepend,
html[data-theme="dark"] .input-group .input-group-append {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .input-group .input-group-text {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .input-group input:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

/* Spinners - Dark Mode */
html[data-theme="dark"] .spinner-border {
  border-color: rgba(255, 255, 255, 0.25);
  border-right-color: #1976d2;
}

html[data-theme="dark"] .spinner-grow {
  background-color: #1976d2;
}

/* Progress Bar - Dark Mode */
html[data-theme="dark"] .progress {
  background-color: var(--hive-bg-primary);
  border: 1px solid var(--hive-border-color);
}

html[data-theme="dark"] .progress-bar {
  background-color: #1976d2;
}

/* Breadcrumb - Dark Mode */
html[data-theme="dark"] .breadcrumb {
  background-color: var(--hive-bg-secondary);
  border: 1px solid var(--hive-border-color);
}

html[data-theme="dark"] .breadcrumb .breadcrumb-item {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .breadcrumb .breadcrumb-item.active {
  color: var(--hive-text-secondary);
}

html[data-theme="dark"] .breadcrumb .breadcrumb-item a {
  color: #1976d2;
}

html[data-theme="dark"] .breadcrumb .breadcrumb-item a:hover {
  color: #145ca4;
}

/* ===== ADVANCED TABLE STYLES - DARK MODE ===== */

/* jqGrid Tables - Dark Mode */
html[data-theme="dark"] .ui-jqgrid {
  background-color: var(--hive-bg-primary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .ui-jqgrid .ui-jqgrid-view {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .ui-jqgrid .ui-jqgrid-hdiv {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .ui-jqgrid .ui-jqgrid-bdiv {
  background-color: var(--hive-bg-primary);
}

html[data-theme="dark"] .ui-jqgrid .ui-jqgrid-htable th {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
  border-color: var(--hive-border-color);
  font-weight: 600;
}

html[data-theme="dark"] .ui-jqgrid .ui-jqgrid-btable tr {
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .ui-jqgrid .ui-jqgrid-btable tr:nth-child(even) td {
  background-color: #2a3a4d;
}

html[data-theme="dark"] .ui-jqgrid .ui-jqgrid-btable tr:nth-child(odd) td {
  background-color: #1f2f3f;
}

html[data-theme="dark"] .ui-jqgrid .ui-jqgrid-btable tr:hover {
  background-color: var(--hive-dropdown-hover-bg);
}

html[data-theme="dark"] .ui-jqgrid .ui-jqgrid-btable tr.jqgrow td {
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .ui-jqgrid .ui-jqgrid-btable tr.jqgrow.ui-state-highlight td {
  background-color: #1976d2;
  color: #ffffff;
  border-color: #1976d2;
}

/* DataTables - Dark Mode */
html[data-theme="dark"] .dataTables_wrapper {
  background-color: var(--hive-bg-primary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .dataTables_length label,
html[data-theme="dark"] .dataTables_filter label {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .dataTables_length select,
html[data-theme="dark"] .dataTables_filter input {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
  border-bottom: 2px solid var(--hive-border-color) !important;
  font-weight: 600;
}

html[data-theme="dark"] table.dataTable tbody tr {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] table.dataTable tbody tr:hover {
  background-color: var(--hive-dropdown-hover-bg);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] table.dataTable tbody td {
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .dataTables_paginate .paginate_button {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: #1976d2;
}

html[data-theme="dark"] .dataTables_paginate .paginate_button:hover {
  background-color: var(--hive-dropdown-hover-bg);
  border-color: #1976d2;
}

html[data-theme="dark"] .dataTables_paginate .paginate_button.current {
  background-color: #1976d2;
  border-color: #1976d2;
  color: #ffffff;
}

/* Scrollable Tables - Dark Mode */
html[data-theme="dark"] .table-responsive {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .table-responsive > .table {
  background-color: var(--hive-bg-secondary);
}

html[data-theme="dark"] .table-responsive .thead-dark th {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
  border-bottom: 2px solid var(--hive-border-color) !important;
}

/* Search Flex - Dark Mode (COLOR ONLY) */
html[data-theme="dark"] .search-flex input,
html[data-theme="dark"] .search-flex select,
html[data-theme="dark"] .search-flex button {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .search-flex input:focus,
html[data-theme="dark"] .search-flex select:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

html[data-theme="dark"] .search-flex button:hover {
  background-color: var(--hive-dropdown-hover-bg);
  border-color: #1976d2;
  color: #1976d2;
}

tml[data-theme="dark"] #container-search-pills .search-flex-item .active,
html[data-theme="dark"] #container-search-pills .search-flex-item .active span {
    color: #1976d2 !important;
}

/* Justify Left - Dark Mode */
html[data-theme="dark"] .justify-left {
  text-align: left;
  justify-content: flex-start;
}

/* Text Large - Dark Mode */
html[data-theme="dark"] .text-lg {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .text-lg strong,
html[data-theme="dark"] .text-lg b {
  font-weight: 600;
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .table-responsive .thead-dark th {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
  border-bottom: 2px solid var(--hive-border-color) !important;
}
html[data-theme="dark"] .grid,
html[data-theme="dark"] .grid-container {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .grid-row,
html[data-theme="dark"] .grid-item {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .grid-row:hover,
html[data-theme="dark"] .grid-item:hover {
  background-color: var(--hive-dropdown-hover-bg);
}

html[data-theme="dark"] .breadcrumb .breadcrumb-item a:hover {
  color: #145ca4;
}

/* Borders - Dark Mode */
html[data-theme="dark"] .border {
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .border-top {
  border-top-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .border-right {
  border-right-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .border-bottom {
  border-bottom-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .border-left {
  border-left-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .border-start {
  border-top: 2px solid #e60012 !important;
  border-left: 2px solid #e60012 !important;
  border-bottom: 2px solid #e60012 !important;
}

html[data-theme="dark"] .border-middle {
  border-top: 2px solid #e60012 !important;
  border-bottom: 2px solid #e60012 !important;
}

html[data-theme="dark"] .border-end {
  border-top: 2px solid #e60012 !important;
  border-right: 2px solid #e60012 !important;
  border-bottom: 2px solid #e60012 !important;
}

/* Tooltips - Dark Mode */
html[data-theme="dark"] .tooltip-inner {
  background-color: #333333;
  color: #ffffff;
}

html[data-theme="dark"] .tooltip .tooltip-inner {
  background-color: #333333;
  border: 1px solid var(--hive-border-color);
}

html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-header,
html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .ui-tooltip,
html[data-theme="dark"] .qtip,
html[data-theme="dark"] .qtip-content,
html[data-theme="dark"] .qtip-titlebar {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .ui-tooltip {
  border: 1px solid var(--hive-border-color) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .hm-tooltip-style-1 {
  background-color: var(--hive-card-header-bg) !important;
  color: var(--hive-text-primary) !important;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .hm-tooltip-style-1:before {
  border-bottom-color: var(--hive-card-header-bg) !important;
}

html[data-theme="dark"] .popover {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.35);
}

/* Override inline light backgrounds in report tables - Dark Mode */
html[data-theme="dark"] .bg-wdg-blue-medium[style*="background-color: #f4f8fb"] {
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-blue-medium[style*="background-color: #ffeaeb"] {
  color: #000 !important;
}

html[data-theme="dark"] .bg-wdg-blue-medium[style*="background-color: #cdefe0"] {
  color: #000 !important;
}

/* Override text color for bg-wdg-blue-medium in dark mode - Dark Mode */
html[data-theme="dark"] .bg-wdg-blue-medium {
  color: #000 !important;
}

/* Force dark text for all bg-wdg-* widgets when tx-wdg-white is also applied */
html[data-theme="dark"] [class*="bg-wdg-"][class*="tx-wdg-white"],
html[data-theme="dark"] .tx-wdg-white[class*="bg-wdg-"] {
  color: #000 !important;
}

/* More specific override for green/light widget backgrounds */
html[data-theme="dark"] .bg-wdg-green-dark.tx-wdg-white,
html[data-theme="dark"] .bg-wdg-green-medium.tx-wdg-white,
html[data-theme="dark"] .bg-wdg-green-clear.tx-wdg-white,
html[data-theme="dark"] .bg-wdg-yellow-medium.tx-wdg-white,
html[data-theme="dark"] .bg-wdg-yellow-light.tx-wdg-white,
html[data-theme="dark"] .bg-wdg-red-medium.tx-wdg-white,
html[data-theme="dark"] .bg-wdg-red-light.tx-wdg-white,
html[data-theme="dark"] .bg-wdg-blue-medium.tx-wdg-white,
html[data-theme="dark"] .bg-wdg-blue-clear.tx-wdg-white,
html[data-theme="dark"] .bg-wdg-purple-clear.tx-wdg-white,
html[data-theme="dark"] .bg-wdg-orange-clear.tx-wdg-white {
  color: #000 !important;
}

/* Table cells with specific light backgrounds - force dark text only for these colors */
html[data-theme="dark"] .table.table-borderless td[style*="background-color: #f4f8fb"],
html[data-theme="dark"] .table.table-borderless td[style*="background-color: #ffeaeb"],
html[data-theme="dark"] .table.table-borderless td[style*="background-color: #cdefe0"],
html[data-theme="dark"] .table.table-borderless td[style*="background-color: #fff5d9"],
html[data-theme="dark"] .table.table-borderless th[style*="background-color: #f4f8fb"],
html[data-theme="dark"] .table.table-borderless th[style*="background-color: #ffeaeb"],
html[data-theme="dark"] .table.table-borderless th[style*="background-color: #cdefe0"],
html[data-theme="dark"] .table.table-borderless th[style*="background-color: #fff5d9"] {
  color: #000 !important;
}

/* Exception for AlertByType widget - use theme text color instead */
html[data-theme="dark"] .hm-table-widget-alerts .table.table-borderless td[style*="background-color: #f4f8fb"],
html[data-theme="dark"] .hm-table-widget-alerts .table.table-borderless td[style*="background-color: #ffeaeb"],
html[data-theme="dark"] .hm-table-widget-alerts .table.table-borderless td[style*="background-color: #cdefe0"],
html[data-theme="dark"] .hm-table-widget-alerts .table.table-borderless td[style*="background-color: #fff5d9"],
html[data-theme="dark"] .hm-table-widget-alerts .table.table-borderless th[style*="background-color: #f4f8fb"],
html[data-theme="dark"] .hm-table-widget-alerts .table.table-borderless th[style*="background-color: #ffeaeb"],
html[data-theme="dark"] .hm-table-widget-alerts .table.table-borderless th[style*="background-color: #cdefe0"],
html[data-theme="dark"] .hm-table-widget-alerts .table.table-borderless th[style*="background-color: #fff5d9"] {
  color: var(--hive-text-primary) !important;
}

/* Code blocks - Dark Mode */
html[data-theme="dark"] code {
  background-color: var(--hive-bg-primary);
  color: #64b5f6;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
}

html[data-theme="dark"] pre {
  background-color: var(--hive-bg-primary);
  border: 1px solid var(--hive-border-color);
  color: var(--hive-text-primary);
  padding: 1rem;
  border-radius: 0.25rem;
  overflow-x: auto;
}

html[data-theme="dark"] pre code {
  background-color: transparent;
  color: #64b5f6;
  padding: 0;
}

/* Text Black Bold - Dark Mode */
html[data-theme="dark"] #hm-holygrail-layout #hm-holygrail-body #hm-holygrail-content .body .text-black-bold {
  color: var(--hive-text-primary) !important;
}

/* Alert Styles - Dark Mode */
html[data-theme="dark"] .alert {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .alert-warning {
  background-color: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.3);
  color: #f59e0b;
}

html[data-theme="dark"] .alert-danger {
  background-color: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.3);
  color: #ef4444;
}

html[data-theme="dark"] .alert-success {
  background-color: rgba(40, 167, 69, 0.15);
  border-color: rgba(40, 167, 69, 0.3);
  color: #22c55e;
}

html[data-theme="dark"] .alert-info {
  background-color: rgba(23, 162, 184, 0.15);
  border-color: rgba(23, 162, 184, 0.3);
  color: #06b6d4;
}

html[data-theme="dark"] .alert-primary {
  background-color: rgba(25, 118, 210, 0.15);
  border-color: rgba(25, 118, 210, 0.3);
  color: #3b82f6;
}

html[data-theme="dark"] .alert-secondary {
  background-color: rgba(108, 117, 125, 0.15);
  border-color: rgba(108, 117, 125, 0.3);
  color: #6b7280;
}

html[data-theme="dark"] .container-search-pills .pill,
html[data-theme="dark"] .container-search-pills .badge {
  background-color: #1976d2;
  color: #ffffff;
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

html[data-theme="dark"] .container-search-pills .pill:hover,
html[data-theme="dark"] .container-search-pills .badge:hover {
  background-color: #145ca4;
  cursor: pointer;
}

html[data-theme="dark"] .container-search-pills .pill-close,
html[data-theme="dark"] .container-search-pills .badge-close {
  cursor: pointer;
  margin-left: 0.3rem;
  font-weight: bold;
}

html[data-theme="dark"] .container-search-pills label {
  color: var(--hive-text-primary);
  margin: 0;
  font-weight: 500;
}

html[data-theme="dark"] .container-search-pills input,
html[data-theme="dark"] .container-search-pills select {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
}

/* Form Record Alignment & Balancing - Dark Mode Text Colors */
html[data-theme="dark"] .selected-list .text-muted {
  color: var(--hive-text-secondary) !important;
}

html[data-theme="dark"] #selected-count-display {
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] #hm-django-messages .toast .alert {
  color: #1F1F1F !important;
}

html[data-theme="dark"] #hm-django-messages .toast .alert .close {
  color: #1F1F1F !important;
  opacity: 0.8;
}

html[data-theme="dark"] #hm-django-messages .toast .alert .close:hover {
  opacity: 1;
}

/* Override inline text colors for dark mode - EXCEPT alert-info */
html[data-theme="dark"] div:not(.alert)[style*="color:#1F1F1F"],
html[data-theme="dark"] div:not(.alert)[style*="color: #1F1F1F"] {
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] div:not(.alert)[style*="color:#666666"],
html[data-theme="dark"] div:not(.alert)[style*="color: #666666"],
html[data-theme="dark"] div:not(.alert)[style*="color:#666"],
html[data-theme="dark"] div:not(.alert)[style*="color: #666"],
html[data-theme="dark"] div:not(.alert)[style*="color:#6c757d"],
html[data-theme="dark"] div:not(.alert)[style*="color: #6c757d"] {
  color: var(--hive-text-secondary) !important;
}

/* Custom Select - Dark Mode */
html[data-theme="dark"] .custom-select {
  background-color: var(--hive-bg-primary);
  border-color: var(--hive-border-color);
  color: var(--hive-text-primary);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5"><path d="M1 0l4 4 4-4z" fill="white"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 5px;
  padding-right: 25px;
}

html[data-theme="dark"] .custom-select:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

html[data-theme="dark"] .custom-select option {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

/* Form elements (select, input) in dark mode */
html[data-theme="dark"] select,
html[data-theme="dark"] select:focus {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] select option {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] select option:checked {
  background-color: #1976d2;
  color: #ffffff;
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] textarea {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] input[type="range"] {
  background-color: transparent !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] input[type="text"]:focus,
html[data-theme="dark"] input[type="email"]:focus,
html[data-theme="dark"] input[type="password"]:focus,
html[data-theme="dark"] input[type="number"]:focus,
html[data-theme="dark"] input[type="date"]:focus,
html[data-theme="dark"] input[type="time"]:focus,
html[data-theme="dark"] textarea:focus {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: #1976d2 !important;
}

html[data-theme="dark"] input[type="range"]:focus {
  background-color: transparent !important;
}

/* Override inline styles that set color to #1976d2 in widgets, EXCEPT .filter-vehicles */
html[data-theme="dark"] [style*="color: #1976d2"]:not(.filter-vehicles),
html[data-theme="dark"] [style*="color:#1976d2"]:not(.filter-vehicles) {
  color: var(--hive-text-primary) !important;
}

/* Keep .filter-vehicles with blue color in dark mode */
html[data-theme="dark"] .filter-vehicles {
  color: #1976d2;
}

html[data-theme="dark"] .widget-action-navbar .filter-vehicles {
    color: var(--hive-text-primary) !important;
}

/* Card Header with bg-light - Dark Mode */
html[data-theme="dark"] .card-header.bg-light {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] .card-header.bg-light strong,
html[data-theme="dark"] .card-header.bg-light b {
  color: var(--hive-text-primary) !important;
}

/* Important Titles and Headings - Dark Mode */
html[data-theme="dark"] .font-weight-bold {
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] h5.font-weight-bold {
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] .col h5,
html[data-theme="dark"] .col-auto h5,
html[data-theme="dark"] .col-md h5,
html[data-theme="dark"] .col-lg h5 {
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] #hm-login-layout .alert-danger {
  background-color: rgba(220, 53, 69, 0.3);
  border-color: rgba(220, 53, 69, 0.5);
  color: #ff6b6b;
}

/* Right Side Panel - Dark Mode */
html[data-theme="dark"] #hm-login-layout #hm-right-bar-image,
html[data-theme="dark"] #hm-login-layout #hm-right-bar-image-control-max {
  background-color: var(--hive-bg-primary) !important;
  opacity: 0.9;
}

/* Light Theme - Ensure explicit styles remain */
html[data-theme="light"] #hm-login-layout > div:first-child {
  background-color: #1976d2 !important;
}

html[data-theme="light"] #hm-login-layout .input-background {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* HM Profile Tabs - Dark Mode */
html[data-theme="dark"] .nav-tabs.hm-profile-tabs {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .nav-tabs.hm-profile-tabs .nav-link {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .nav-tabs.hm-profile-tabs .nav-link.active {
  color: #1976d2;
  border-bottom-color: #1976d2;
}

/* HM Table - Dark Mode */
html[data-theme="dark"] .hm-table,
html[data-theme="dark"] .hm-table-reports,
html[data-theme="dark"] .hm-table-reports-small {
  background-color: var(--hive-bg-secondary);
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .hm-table-reports table,
html[data-theme="dark"] .hm-table-reports table th:not([class*="bg-wdg-"]),
html[data-theme="dark"] .hm-table-reports table td:not([class*="bg-wdg-"]):not([style*="background-color: #ddeefb"]) {
  background-color: transparent !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}


html[data-theme="dark"] .hm-table-reports table th[style*="background-color"]:not([class*="bg-wdg-"]),
html[data-theme="dark"] .hm-table-reports table td[style*="background-color"]:not([class*="bg-wdg-"]) {
  background-color: transparent !important;
}

html[data-theme="dark"] .hm-table-reports table tbody tr:nth-of-type(odd):not([class*="bg-wdg-"]) td:not([class*="bg-wdg-"]) {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .hm-table-reports table tbody tr:nth-of-type(even):not([class*="bg-wdg-"]) td:not([class*="bg-wdg-"]) {
  background-color: transparent !important;
}

/* PRESSURE REPORT - Specific dark mode table cell text colors - HIGHEST PRIORITY */
html[data-theme="dark"] .hm-table-reports td[style*="background-color: #f4f8fb"],
html[data-theme="dark"] .hm-table-reports td[style*="background-color: #ffeaeb"],
html[data-theme="dark"] .hm-table-reports td[style*="background-color: #cdefe0"],
html[data-theme="dark"] .hm-table-reports td[style*="background-color: #ddeefb"],
html[data-theme="dark"] .hm-table-reports td[style*="background-color: #a8dac4"],
html[data-theme="dark"] .hm-table-reports td[style*="background-color: #ffe6a2"],
html[data-theme="dark"] .hm-table-reports td[style*="background-color: #ffa5ac"],
html[data-theme="dark"] .hm-table-reports td[style*="background-color: #fff5d9"],
html[data-theme="dark"] .hm-table-reports td[style*="background-color: #b8e2fe"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #f4f8fb"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #ffeaeb"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #cdefe0"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #ddeefb"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #a8dac4"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #ffe6a2"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #ffa5ac"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #f4f8fb"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #ffeaeb"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #cdefe0"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #ddeefb"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #a8dac4"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #ffe6a2"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #ffa5ac"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #fff5d9"],
html[data-theme="dark"] .hm-table-reports th[style*="background-color: #b8e2fe"],
html[data-theme="dark"] .hm-table-reports th.bg-wdg-green-dark,
html[data-theme="dark"] .hm-table-reports th.bg-wdg-green-medium,
html[data-theme="dark"] .hm-table-reports th.bg-wdg-yellow-medium,
html[data-theme="dark"] .hm-table-reports th.bg-wdg-red-medium,
html[data-theme="dark"] .hm-table-reports th.bg-wdg-blue-black-dark,
html[data-theme="dark"] .hm-table-reports th.bg-wdg-purple-black-dark,
html[data-theme="dark"] .hm-table-reports th.bg-wdg-orange-black-dark,
html[data-theme="dark"] .hm-table-reports th.bg-wdg-gray-black-dark,
html[data-theme="dark"] .hm-table-reports table tr.bg-wdg-blue-clear > td[style*="background-color: #ddeefb"],
html[data-theme="dark"] .hm-table-reports table tr.bg-wdg-blue-clear > th[style*="background-color: #ddeefb"] {
  background-color: #2a3a4d !important;
}

html[data-theme="dark"] .hm-table-reports .bg-wdg-blue-clear {
  color: #000 !important;
}

html[data-theme="dark"] .hm-table-reports .bg-wdg-blue-medium {
  color: #ffffff !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-green-dark,
html[data-theme="dark"] .hm-table-reports table th.bg-wdg-green-dark[style] {
  background-color: #2fb77b !important;
  color: #000 !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-blue-black-dark,
html[data-theme="dark"] .hm-table-reports table th.bg-wdg-blue-black-dark[style] {
  background-color: #027fd2 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-purple-black-dark,
html[data-theme="dark"] .hm-table-reports table th.bg-wdg-purple-black-dark[style] {
  background-color: #7259e2 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-orange-black-dark,
html[data-theme="dark"] .hm-table-reports table th.bg-wdg-orange-black-dark[style] {
  background-color: #ff8f33 !important;
  color: #000 !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-gray-black-dark,
html[data-theme="dark"] .hm-table-reports table th.bg-wdg-gray-black-dark[style] {
  background-color: #929496 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .hm-table-reports .bg-wdg-green-light {
  background-color: #cdefe0 !important;
}

html[data-theme="dark"] .hm-table-reports .bg-wdg-yellow-light {
  background-color: #fff5d9 !important;
}

html[data-theme="dark"] .hm-table-reports .bg-wdg-red-light {
  background-color: #ffeaeb !important;
}

html[data-theme="dark"] .hm-table-reports .bg-wdg-blue-middle-dark {
  color: #000 !important;
}


html[data-theme="dark"] .hm-table-reports table th.bg-wdg-green-clear,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-green-clear {
  background-color: #e1f5ec !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-blue-clear,
html[data-theme="dark"] .hm-table-reports table tr.bg-wdg-blue-clear,
html[data-theme="dark"] .hm-table-reports table tr.bg-wdg-blue-clear > td:not(.bg-wdg-blue-clear),
html[data-theme="dark"] .hm-table-reports table tr.bg-wdg-blue-clear > th:not(.bg-wdg-blue-clear) {
  background-color: #2a3a4d !important;
  background-image: none !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-purple-clear,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-purple-clear {
  background-color: #c7c4d6 !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-orange-clear,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-orange-clear {
  background-color: #f6e1d0 !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-blue-light,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-blue-light {
  background-color: #1a3a5d !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-green-medium,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-green-medium {
  background-color: #a8dac4 !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-yellow-light,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-yellow-light {
  background-color: #fff5d9 !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-yellow-medium,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-yellow-medium {
  background-color: #ffe6a2 !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-red-light,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-red-light {
  background-color: #ffeaeb !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-red-medium,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-red-medium {
  background-color: #ffa5ac !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-gray,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-gray,
html[data-theme="dark"] .hm-table-reports table tr.bg-wdg-gray,
html[data-theme="dark"] .hm-table-reports table tr.bg-wdg-gray td,
html[data-theme="dark"] .hm-table-reports table th[style*="background-color: #dfe7ed"],
html[data-theme="dark"] .hm-table-reports table td[style*="background-color: #dfe7ed"] {
  background-color: #2a3a4d !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-green-dark,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-green-dark {
  background-color: #2fb77b !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-blue-black-dark,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-blue-black-dark {
  background-color: #027fd2 !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-purple-black-dark,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-purple-black-dark {
  background-color: #7259e2 !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-orange-black-dark,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-orange-black-dark {
  background-color: #ff8f33 !important;
}

html[data-theme="dark"] .hm-table-reports table th.bg-wdg-gray-black-dark,
html[data-theme="dark"] .hm-table-reports table td.bg-wdg-gray-black-dark {
  background-color: #929496 !important;
}

html[data-theme="dark"] .bg-wdg-blue-medium {
  background-color: rgba(2, 127, 210, 0.15) !important;
  color: #000 !important;
}


html[data-theme="dark"] .legend-proyection-dinamic,
html[data-theme="dark"] .legend-proyection-percentage-dinamic,
html[data-theme="dark"] div[class*="legend-proyection-"] {
  background-color: transparent !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] div[class*="legend-proyection-"] ul,
html[data-theme="dark"] div[class*="legend-proyection-"] li {
  background-color: transparent !important;
  color: var(--hive-text-primary) !important;
}

/* Nav Report List Tab - Dark Mode */
html[data-theme="dark"] .nav-report-list-tab {
  background-color: var(--hive-bg-secondary);
  border-color: var(--hive-border-color);
}

html[data-theme="dark"] .nav-report-list-tab .nav-link {
  color: #a0b0c0;
  background-color: transparent;
}

html[data-theme="dark"] .nav-report-list-tab .nav-link.active {
  color: #1976d2;
  background-color: transparent;
  border-bottom-color: #1976d2;
}

html[data-theme="dark"] .nav-report-list-tab .nav-link:hover {
  color: var(--hive-text-primary);
}

/* Report titles - Dark Mode */
html[data-theme="dark"] .hm-report-style-1 .header .title,
html[data-theme="dark"] .hm-report-style-1 .header .sub-title {
  color: var(--hive-text-primary);
}

html[data-theme="dark"] .hm-report-style-1 .content {
  background-color: var(--hive-bg-secondary) !important;
}

html[data-theme="dark"] .hm-report-style-1 .content .title {
  color: var(--hive-text-primary);
}

/* HM Table Header - Dark Mode */
html[data-theme="dark"] .hm-table-header {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border: 1px solid var(--hive-border-color) !important;
  border-bottom: 2px solid var(--hive-border-color) !important;
}

html[data-theme="dark"] .hm-table-header th {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
  border-bottom: 2px solid var(--hive-border-color) !important;
}

/* HM Color Type Table - Dark Mode */
html[data-theme="dark"] .hm-color-type-table {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-collapse: separate !important;
  border-spacing: 3.5px !important;
}

html[data-theme="dark"] .hm-color-type-table thead {
  background-color: var(--hive-bg-secondary) !important;
}

html[data-theme="dark"] .hm-color-type-table thead th {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border: 1px solid var(--hive-border-color) !important;
  border-bottom: 2px solid var(--hive-border-color) !important;
}

html[data-theme="dark"] .hm-color-type-table tbody td:not([class*="bg-wdg-"]) {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border: 1px solid var(--hive-border-color) !important;
}

html[data-theme="dark"] .hm-color-type-table tbody td[class*="bg-wdg-"] {
  background-color: inherit !important;
}

html[data-theme="dark"] .hm-color-type-table tbody tr {
  background-color: var(--hive-bg-secondary) !important;
}

/* Table Headers and Body - Dark Mode Improvements */
html[data-theme="dark"] table {
  background-color: var(--hive-bg-primary) !important;
  color: var(--hive-text-primary) !important;
}

html[data-theme="dark"] table thead,
html[data-theme="dark"] table thead th {
  background-color: var(--hive-bg-secondary) !important;
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
  border-bottom: 2px solid var(--hive-border-color) !important;
}

html[data-theme="dark"] table tbody,
html[data-theme="dark"] table tbody td {
  color: var(--hive-text-primary) !important;
  border-color: var(--hive-border-color) !important;
}

html[data-theme="dark"] table tbody tr:hover {
  background-color: #253649 !important;
}

/* ===== SIDEBAR COLLAPSE ANIMATIONS ===== */

/* Remove any conflicting transitions */
#hm-holygrail-left-sidebar * {
  transition: inherit;
}

/* Base sidebar styles with smooth transitions */
#hm-holygrail-left-sidebar {
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform, margin-left, width;
}

/* Ensure no blocking transitions */
#hm-holygrail-left-sidebar .open-menu-img,
#hm-holygrail-left-sidebar .close-menu-img {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Sidebar shadow effect - dynamic depth */
#hm-holygrail-left-sidebar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] #hm-holygrail-left-sidebar {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Mobile - Sidebar Overlay Background Animation */
@media (max-width: 1200px) {
  /* Navbar debe estar por encima del overlay */
  #hm-header-navbar {
    z-index: 100 !important;
  }

  /* Always display sidebar but hide with transform for smooth animation */
  #hm-holygrail-left-sidebar {
    position: fixed;
    left: 0;
    height: calc(100vh - 60px);
    z-index: 20;
    width: 100%;
    max-width: 300px;
    display: block !important;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform;
  }

  /* When sidebar is active, slide it in */
  #hm-holygrail-left-sidebar.active {
    transform: translateX(0);
  }

  /* Overlay positioned fixed over content */
  #hm-holygrail-body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 10;
  }

  /* Show overlay when sidebar is open */
  #hm-holygrail-body #hm-holygrail-left-sidebar.active.show ~ #hm-holygrail-content::after,
  #hm-holygrail-body.sidebar-open::after {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    z-index: 10;
  }

  /* Enhanced mobile shadow */
  #hm-holygrail-body #hm-holygrail-left-sidebar.active.show {
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25);
  }

  html[data-theme="dark"] #hm-holygrail-body #hm-holygrail-left-sidebar.active.show {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.6);
  }
}

/* Sidebar Collapse Button - Icon Animation with smooth transitions */
#sidebarCollapse {
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

#sidebarCollapse:hover {
  transform: scale(1.12) translateY(-2px);
  filter: brightness(1.15);
}

#sidebarCollapse:active {
  transform: scale(0.92) translateY(1px);
}

/* Sidebar Images - Icon State Transitions with smooth animation */
#sidebarCollapse .open-menu-img,
#sidebarCollapse .close-menu-img {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
  position: relative;
  will-change: opacity, transform;
}

#sidebarCollapse .open-menu-img.show,
#sidebarCollapse .close-menu-img.show {
  opacity: 1;
  transform: scale(1) rotate(0deg) translateX(0);
  pointer-events: auto;
}

#sidebarCollapse .open-menu-img.hide,
#sidebarCollapse .close-menu-img.hide {
}

/* Smooth Transitions on Theme Switch - Prevent sidebar animation flash */
@media (prefers-reduced-motion: reduce) {
  #hm-holygrail-body #hm-holygrail-left-sidebar {
    transition: none !important;
  }
  
  #sidebarCollapse,
  #sidebarCollapse .open-menu-img,
  #sidebarCollapse .close-menu-img {
    transition: none !important;
  }
}

html[data-theme="dark"] table tbody tr:nth-child(odd) {
  background-color: var(--hive-bg-secondary) !important;
}

html[data-theme="dark"] table tbody tr:nth-child(even) {
  background-color: #232f3f !important;
}

/* Light Mode - Card Header for hm-card-list */
html[data-theme="light"] .card.hm-card-list .card-header {
  background-color: var(--hive-card-header-bg);
}

html[data-theme="light"] .card.hm-card-list .card-header:focus,
html[data-theme="light"] .card.hm-card-list .card-header:hover {
  background-color: #1976d2;
  color: #ffffff;
}

html[data-theme="light"] .card.hm-card-list .card-header.active {
  background-color: #1976d2;
  color: #ffffff;
}