/* Custom theme styles for Smart Link UI */

/* Light theme (default) overrides */
[data-bs-theme="light"] {
  --card-bg: #fff;
  --sidebar-bg: #ffffff;
  --navbar-bg: #ffffff;
  --body-bg: #f2f2f2;
  --active-link-bg: rgba(182, 109, 255, 0.1);
  --active-link-color: #b66dff;
  --hover-bg: rgba(0, 0, 0, 0.05);
  --border-color: #ebedf2;
  --text-muted: #6c757d;
  --table-header-bg: #f2edf3;
  --table-row-hover: rgba(0, 0, 0, 0.03);
  --status-active-bg: #fed713;
  --status-active-color: #212529;
  --menu-title-color: #343a40;
  --menu-icon-color: #b66dff;
  --pagination-bg: #f8f9fa;
  --pagination-color: #343a40;
  --pagination-active-bg: #b66dff;
  --pagination-active-color: #fff;
  --pagination-hover-bg: #e9ecef;
  --pagination-hover-color: #343a40;
  --table-border-color: #ebedf2;
  --table-text-color: #343a40;
  --navbar-brand-bg: #ffffff;
  --copy-icon-color: #6c757d;
  --badge-active-bg: #fed713;
  --badge-active-color: #212529;
  --sidebar-menu-active-bg: rgba(182, 109, 255, 0.1);
  --sidebar-menu-active-color: #b66dff;
  --sidebar-menu-active-icon-color: #b66dff;
  --sidebar-menu-hover-bg: rgba(0, 0, 0, 0.05);
  --sidebar-menu-hover-color: #343a40;
  --sidebar-menu-color: #343a40;
  --sidebar-submenu-bg: #f8f9fa;
  --sidebar-submenu-color: #343a40;
  --sidebar-submenu-active-color: #b66dff;
  --sidebar-submenu-active-bg: rgba(182, 109, 255, 0.1);
  --sidebar-submenu-hover-bg: rgba(0, 0, 0, 0.05);
  --sidebar-submenu-hover-color: #343a40;
  --smart-link-logo-color: #b66dff;
  --bs-table-hover-bg: #f2edf3;
}

/* Dark theme overrides */
[data-bs-theme="dark"] {
  --card-bg: #2d3035;
  --sidebar-bg: #1a1c20;
  --navbar-bg: #1a1c20;
  --body-bg: #252830;
  --content-bg: #2d3035;
  --content-title-color: #ffffff;
  --active-link-bg: rgba(182, 109, 255, 0.2);
  --active-link-color: #d3a7ff;
  --hover-bg: rgba(182, 109, 255, 0.3);
  --border-color: #3d4148;
  --text-muted: #adb5bd;
  --table-header-bg: #343a40;
  --table-row-hover: rgba(182, 109, 255, 0.4);
  --status-active-bg: #fed713;
  --status-active-color: #212529;
  --menu-title-color: #dee2e6;
  --menu-icon-color: #d3a7ff;
  --pagination-bg: #343a40;
  --pagination-color: #dee2e6;
  --pagination-active-bg: #b66dff;
  --pagination-active-color: #fff;
  --pagination-hover-bg: #495057;
  --pagination-hover-color: #dee2e6;
  --table-border-color: #3d4148;
  --table-text-color: #dee2e6;
  --navbar-brand-bg: #252830;
  --copy-icon-color: #adb5bd;
  --badge-active-bg: #fed713;
  --badge-active-color: #212529;
  --sidebar-menu-active-bg: rgba(182, 109, 255, 0.2);
  --sidebar-menu-active-color: #d3a7ff;
  --sidebar-menu-active-icon-color: #d3a7ff;
  --sidebar-menu-hover-bg: rgba(182, 109, 255, 0.3);
  --sidebar-menu-hover-color: #dee2e6;
  --sidebar-menu-color: #dee2e6;
  --sidebar-submenu-bg: #2d3035;
  --sidebar-submenu-color: #dee2e6;
  --sidebar-submenu-active-color: #d3a7ff;
  --sidebar-submenu-active-bg: rgba(182, 109, 255, 0.2);
  --sidebar-submenu-hover-bg: rgba(182, 109, 255, 0.3);
  --sidebar-submenu-hover-color: #dee2e6;
  --smart-link-logo-color: #d3a7ff;
  --bs-table-hover-bg: #7b5583 !important;
}

[data-bs-theme="dark"] table tr {
  --bs-table-hover-bg: #7b5583 !important;
}

[data-bs-theme="light"] table tr {
  --bs-table-hover-bg: #f2edf3 !important;
}

/* Apply custom variables to elements */
body[data-bs-theme="dark"] {
  background-color: var(--body-bg) !important;
}

.navbar {
  background-color: var(--navbar-bg) !important;
  border-color: var(--border-color);
}

.navbar-brand-wrapper {
  background-color: var(--navbar-brand-bg) !important;
}

.sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border-color);
}

.card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color);
  color: var(--bs-body-color);
}

.table {
  color: var(--table-text-color);
  border-color: var(--table-border-color);
}

.table thead th {
  background-color: var(--table-header-bg) !important;
  color: var(--bs-body-color);
  border-color: var(--table-border-color);
}

.table tbody td {
  border-color: var(--table-border-color);
}

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

/* Ensure table text is readable on hover in dark mode */
[data-bs-theme="dark"] .table tbody tr:hover td {
  color: white !important;
}

/* Enhanced table styling for dark mode */
[data-bs-theme="dark"] .table {
  color: var(--bs-body-color) !important;
}

/* Dark mode table hover styles with better contrast */
[data-bs-theme="dark"] .table-hover > tbody > tr:hover,
[data-bs-theme="dark"] .table > tbody > tr:hover {
  background-color: #2d2d3a !important;
}

/* Ensure text is visible on hover for all table cells */
[data-bs-theme="dark"] .table-hover > tbody > tr:hover td,
[data-bs-theme="dark"] .table > tbody > tr:hover td,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover th,
[data-bs-theme="dark"] .table > tbody > tr:hover th,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover a,
[data-bs-theme="dark"] .table > tbody > tr:hover a,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover span,
[data-bs-theme="dark"] .table > tbody > tr:hover span,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover div,
[data-bs-theme="dark"] .table > tbody > tr:hover div {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Ensure text is bright and readable on hover */
[data-bs-theme="dark"] .table-hover > tbody > tr:hover td,
[data-bs-theme="dark"] .table > tbody > tr:hover td,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover th,
[data-bs-theme="dark"] .table > tbody > tr:hover th {
  color: white !important;
  font-weight: 500;
}

/* Enhanced table styling for light mode */
[data-bs-theme="light"] .table-hover > tbody > tr:hover,
[data-bs-theme="light"] .table > tbody > tr:hover {
  background-color: rgba(182, 109, 255, 0.1) !important;
}

[data-bs-theme="light"] .table-hover > tbody > tr:hover td,
[data-bs-theme="light"] .table > tbody > tr:hover td {
  color: #000 !important;
  font-weight: 500;
}

/* Fix for table borders */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td {
  border-color: var(--border-color) !important;
}

/* Navigation links */
.nav-link {
  color: var(--bs-body-color);
}

.nav-link.active {
  background-color: var(--active-link-bg) !important;
  color: var(--active-link-color) !important;
}

.nav-item:hover:not(.active) {
  background-color: var(--hover-bg) !important;
}

/* Menu items */
.menu-title {
  color: var(--menu-title-color) !important;
}

.menu-icon {
  color: var(--menu-icon-color) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

/* Status badges */
.badge.active {
  background-color: var(--badge-active-bg) !important;
  color: var(--badge-active-color) !important;
}

/* Pagination */
.page-item .page-link {
  background-color: var(--pagination-bg);
  color: var(--pagination-color);
  border-color: var(--border-color);
}

.page-item.active .page-link {
  background-color: var(--pagination-active-bg);
  color: var(--pagination-active-color);
  border-color: var(--pagination-active-bg);
}

.page-item .page-link:hover {
  background-color: var(--pagination-hover-bg);
  color: var(--pagination-hover-color);
}

/* Copy icons */
.mdi-content-copy {
  color: var(--copy-icon-color);
}

/* Theme toggle button styling */
#theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

#theme-toggle:hover {
  transform: rotate(15deg);
}

#theme-toggle .mdi {
  font-size: 1.25rem;
}

[data-bs-theme="dark"] #theme-toggle .mdi-weather-night {
  color: #d3a7ff;
}

[data-bs-theme="light"] #theme-toggle .mdi-weather-sunny {
  color: #b66dff;
}

/* Smooth transition between themes */
body, .card, .navbar, .sidebar, .table, .badge, .nav-link, .menu-title, .menu-icon, .page-link, .form-control, .form-select, .dropdown-menu, .modal-content, .btn {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Fix for sidebar navigation */
/* Main menu items */
.sidebar .nav .nav-item .nav-link {
  color: var(--sidebar-menu-color);
}

.sidebar .nav .nav-item:hover {
  background-color: var(--sidebar-menu-hover-bg) !important;
  color: var(--sidebar-menu-hover-color);
}

/* Improve hover visibility in dark mode */
[data-bs-theme="dark"] .sidebar .nav .nav-item .nav-link:hover {
  background-color: var(--sidebar-menu-hover-bg) !important;
  color: white !important;
}

[data-bs-theme="dark"] .sidebar .nav .nav-item .nav-link:hover .menu-title,
[data-bs-theme="dark"] .sidebar .nav .nav-item .nav-link:hover .menu-icon {
  color: white !important;
  font-weight: 500;
}

/* Fix for sidebar menu hover to fill entire width */
[data-bs-theme="dark"] .sidebar .nav .nav-item {
  width: 100%;
}

[data-bs-theme="dark"] .sidebar .nav .nav-item .nav-link {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0;
}

/* Improve navbar contrast in dark mode */
[data-bs-theme="dark"] .navbar {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--border-color);
}

[data-bs-theme="dark"] .sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border-color);
}

/* Fix for navbar brand and logo */
[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .navbar-brand-wrapper {
  background-color: var(--navbar-bg) !important;
}

/* Fix for page titles and content headers */
[data-bs-theme="dark"] .page-title,
[data-bs-theme="dark"] .content-wrapper .page-header h3,
[data-bs-theme="dark"] .card-title {
  color: white !important;
  font-weight: 500;
}

.sidebar .nav .nav-item .nav-link.active {
  background-color: var(--sidebar-menu-active-bg) !important;
}

.sidebar .nav .nav-item .nav-link.active .menu-title {
  color: var(--sidebar-menu-active-color) !important;
}

.sidebar .nav .nav-item .nav-link.active .menu-icon {
  color: var(--sidebar-menu-active-icon-color) !important;
}

.sidebar .nav .nav-item.active {
  background-color: var(--sidebar-menu-active-bg) !important;
}

.sidebar .nav .nav-item.active > .nav-link {
  background-color: transparent !important;
}

.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link .menu-icon {
  color: var(--sidebar-menu-active-color) !important;
}

/* Submenu items */
.sidebar .nav.sub-menu {
  background-color: var(--sidebar-submenu-bg);
  padding-bottom: 0;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
  color: var(--sidebar-submenu-color);
}

.sidebar .nav.sub-menu .nav-item:hover {
  background-color: var(--sidebar-submenu-hover-bg) !important;
  color: var(--sidebar-submenu-hover-color);
}

/* Fix for sidebar submenu in dark mode */
[data-bs-theme="dark"] .sidebar .nav .nav-item .collapse .nav .nav-item .nav-link {
  color: var(--sidebar-submenu-color);
  background-color: var(--sidebar-submenu-bg) !important;
  width: 100%;
  padding-left: 35px;
  margin: 0;
}

[data-bs-theme="dark"] .sidebar .nav .nav-item .collapse .nav .nav-item .nav-link:hover {
  background-color: var(--sidebar-submenu-hover-bg) !important;
  color: white;
  width: 100%;
  margin: 0;
}

[data-bs-theme="dark"] .sidebar .nav .nav-item .collapse .nav .nav-item {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Fix for sidebar menu items to fill entire width */
[data-bs-theme="dark"] .sidebar .nav .nav-item {
  width: 100%;
  padding: 0;
  margin: 0;
}

[data-bs-theme="dark"] .sidebar .nav .nav-item .nav-link {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0;
  border-radius: 0;
}

/* Fix for sidebar menu items to fill entire width */
[data-bs-theme="dark"] .sidebar .nav .nav-item {
  width: 100%;
  padding: 0;
  margin: 0;
}

[data-bs-theme="dark"] .sidebar .nav .nav-item .nav-link {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0;
  border-radius: 0;
}

/* Override any Bootstrap or custom styles that might be limiting width */
[data-bs-theme="dark"] .sidebar .nav .nav-item .nav-link:hover {
  width: 100% !important;
  margin: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  border-radius: 0 !important;
  background-color: var(--sidebar-menu-hover-bg) !important;
  color: white !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active {
  background-color: var(--sidebar-submenu-active-bg) !important;
  color: var(--sidebar-submenu-active-color) !important;
}

/* Smart Link logo color */
.navbar-brand-wrapper .navbar-brand span {
  color: var(--smart-link-logo-color);
}

/* Fix for form controls */
.form-control, .form-select {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--border-color);
}

.form-control:focus, .form-select:focus {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Fix for modal dialogs */
.modal-content {
  background-color: var(--card-bg);
  color: var(--bs-body-color);
  border-color: var(--border-color);
}

.modal-header, .modal-footer {
  border-color: var(--border-color);
}

/* Fix for dropdown menus */
.dropdown-menu {
  background-color: var(--card-bg);
  color: var(--bs-body-color);
  border-color: var(--border-color);
}

/* Fix for content-wrapper */
.content-wrapper {
  background-color: var(--bs-body-bg);
}

.dropdown-item {
  color: var(--bs-body-color);
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--hover-bg);
  color: var(--bs-body-color);
}

/* Fix for page-body-wrapper */
.page-body-wrapper {
  background-color: var(--bs-body-bg);
}

/* Fix for main-panel */
.main-panel {
  background-color: var(--bs-body-bg);
}

/* Fix for container-scroller */
.container-scroller {
  background-color: var(--bs-body-bg);
}

/* Fix for container-fluid page-body-wrapper */
.container-fluid.page-body-wrapper {
  background-color: var(--bs-body-bg);
}

/* Additional specific fixes for common white areas */
[data-bs-theme="dark"] .footer,
[data-bs-theme="dark"] .page-header,
[data-bs-theme="dark"] .page-title-wrapper,
[data-bs-theme="dark"] .page-title-header,
[data-bs-theme="dark"] .breadcrumb,
[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .content-wrapper > div,
[data-bs-theme="dark"] .main-panel > div {
  background-color: var(--body-bg) !important;
}

/* Fix for content titles and headings */
[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h2, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, 
[data-bs-theme="dark"] h5, 
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .content-wrapper .page-header h3,
[data-bs-theme="dark"] .content-wrapper .page-header .page-title,
[data-bs-theme="dark"] .page-title {
  color: var(--content-title-color) !important;
}

/* Fix for form labels */
[data-bs-theme="dark"] label {
  color: #d8d8d8 !important;
}

/* Fix for breadcrumb and page headers */
[data-bs-theme="dark"] .page-title-wrapper,
[data-bs-theme="dark"] .page-header,
[data-bs-theme="dark"] .breadcrumb,
[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .breadcrumb-item > a {
  background-color: var(--body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Fix for any remaining white divs */
[data-bs-theme="dark"] div[style*="background-color: rgb(255, 255, 255)"],
[data-bs-theme="dark"] div[style*="background-color:#ffffff"],
[data-bs-theme="dark"] div[style*="background-color: #ffffff"],
[data-bs-theme="dark"] div[style*="background: white"],
[data-bs-theme="dark"] div[style*="background-color:white"],
[data-bs-theme="dark"] div[style*="background:white"],
[data-bs-theme="dark"] div[style*="background-color: white"],
[data-bs-theme="dark"] div[style*="background:#ffffff"],
[data-bs-theme="dark"] div[class*="bg-white"],
[data-bs-theme="dark"] div[class*="bg-light"],
[data-bs-theme="dark"] div.bg-white,
[data-bs-theme="dark"] div.bg-light,
[data-bs-theme="dark"] section.bg-white,
[data-bs-theme="dark"] section.bg-light {
  background-color: var(--body-bg) !important;
}

/* Fix for form inputs and controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: var(--card-bg) !important;
  color: #e9ecef !important;
  border-color: var(--border-color) !important;
}

/* Fix for card headers and footers */
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Fix for any white backgrounds in inputs and selects */
[data-bs-theme="dark"] input,
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] textarea {
  background-color: var(--card-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--border-color) !important;
}

/* Fix for any remaining white backgrounds in specific components */
[data-bs-theme="dark"] .page-item:not(.active) .page-link,
[data-bs-theme="dark"] .nav-tabs,
[data-bs-theme="dark"] .nav-tabs .nav-link:not(.active),
[data-bs-theme="dark"] .list-group-item {
  background-color: var(--card-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--border-color) !important;
}

/* Fix for buttons */
.btn-primary {
  background-color: var(--pagination-active-bg);
  border-color: var(--pagination-active-bg);
}

.btn-outline-primary {
  border-color: var(--pagination-active-bg);
  color: var(--pagination-active-bg);
}

.btn-outline-primary:hover {
  background-color: var(--pagination-active-bg);
  border-color: var(--pagination-active-bg);
}

/* Force background color for all elements in dark mode */
[data-bs-theme="dark"] {
  background-color: var(--body-bg);
  color-scheme: dark;
}

/* Force background color for all elements in light mode */
[data-bs-theme="light"] {
  background-color: var(--body-bg);
  color-scheme: light;
}

/* Force specific background colors for main containers - Dark Theme */
[data-bs-theme="dark"] .container-fluid,
[data-bs-theme="dark"] .container-scroller,
[data-bs-theme="dark"] .page-body-wrapper,
[data-bs-theme="dark"] .main-panel,
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] html {
  background-color: var(--body-bg) !important;
}

/* Add contrast to content areas in dark mode */
[data-bs-theme="dark"] .content-wrapper {
  background-color: var(--body-bg) !important;
  padding: 20px;
}

/* Simplify the content structure - only apply to direct containers */
[data-bs-theme="dark"] .content-wrapper > div.row > div > .card,
[data-bs-theme="dark"] .content-wrapper > .card,
[data-bs-theme="dark"] .content-wrapper > form,
[data-bs-theme="dark"] .content-wrapper > div:not(.page-header):not(.row) {
  background-color: var(--content-bg) !important;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Reset any nested elements to avoid multiple layers */
[data-bs-theme="dark"] .card .card,
[data-bs-theme="dark"] .card > div > .card,
[data-bs-theme="dark"] .grid-margin .grid-margin,
[data-bs-theme="dark"] .stretch-card .stretch-card {
  box-shadow: none;
  margin-bottom: 0;
}

/* Special handling for auth pages */
[data-bs-theme="dark"] .auth,
[data-bs-theme="dark"] .auth-form-light {
  background-color: var(--body-bg) !important;
}

/* Page header styling */
[data-bs-theme="dark"] .content-wrapper .page-header {
  background-color: var(--body-bg) !important;
  margin-bottom: 20px;
}

/* Force specific background colors for main containers - Light Theme */
[data-bs-theme="light"] .content-wrapper,
[data-bs-theme="light"] .container-fluid,
[data-bs-theme="light"] .container-scroller,
[data-bs-theme="light"] .page-body-wrapper,
[data-bs-theme="light"] .main-panel,
[data-bs-theme="light"] body,
[data-bs-theme="light"] html {
  background-color: var(--body-bg) !important;
}

/* Card background for light theme */
[data-bs-theme="light"] .card {
  background-color: var(--card-bg) !important;
}

/* Override any inline styles that might be causing white backgrounds */
[data-bs-theme="dark"] *[style*="background-color: white"],
[data-bs-theme="dark"] *[style*="background-color: #fff"],
[data-bs-theme="dark"] *[style*="background-color:#fff"],
[data-bs-theme="dark"] *[style*="background: white"],
[data-bs-theme="dark"] *[style*="background:#fff"],
[data-bs-theme="dark"] *[style*="background: #fff"] {
  background-color: var(--body-bg) !important;
}

/* Fix for select2 dropdown */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--bs-body-bg);
  border-color: var(--border-color);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color);
}

.select2-container--default .select2-results__option {
  color: var(--bs-body-color);
}

.select2-dropdown {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--pagination-active-bg);
  color: #fff;
}