/* ============================================
   SmmPanel Theme System
   Dark/Light Mode CSS Variables & Overrides
   ============================================ */

/* ============================================
   CRITICAL: Early Dark Mode (Before Body Loads)
   This prevents flash of light theme
   ============================================ */
html[data-theme="dark"] {
  background-color: #35364b;
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background-color: #35364b !important;
  color: #bdbdc7 !important;
}

/* ============================================
   CSS Variables - Light Mode (Default)
   ============================================ */
:root {
  /* Background Colors */
  --theme-body-bg: #f5f7fa;
  --theme-card-bg: #ffffff;
  --theme-card-header-bg: rgba(0, 0, 0, 0.03);
  --theme-input-bg: #ffffff;
  --theme-dropdown-bg: #ffffff;
  --theme-modal-bg: #ffffff;
  --theme-table-stripe: #f8f9fa;
  --theme-hover-bg: #f8f9fa;
  --theme-sidebar-bg: linear-gradient(to bottom, #3a3f5c, #1e2235);

  /* Text Colors */
  --theme-text-primary: #212529;
  --theme-text-secondary: #6c757d;
  --theme-text-muted: #868e96;
  --theme-text-inverse: #ffffff;
  --theme-heading-color: #212529;

  /* Border Colors */
  --theme-border-color: #dee2e6;
  --theme-input-border: #ced4da;
  --theme-card-border: rgba(0, 0, 0, 0.125);

  /* Shadow */
  --theme-shadow: rgba(0, 0, 0, 0.08);
  --theme-shadow-lg: rgba(0, 0, 0, 0.15);

  /* Accent Colors (consistent across themes) */
  --theme-primary: #009DA0;
  --theme-primary-hover: #007f82;
  --theme-success: #0CC27E;
  --theme-danger: #FF586B;
  --theme-warning: #FF8D60;
  --theme-info: #1CBCD8;

  /* Scrollbar */
  --theme-scrollbar-track: #f1f1f1;
  --theme-scrollbar-thumb: #c1c1c1;
  --theme-scrollbar-thumb-hover: #a1a1a1;
}

/* ============================================
   CSS Variables - Dark Mode
   ============================================ */
html[data-theme="dark"] {
  /* Background Colors */
  --theme-body-bg: #35364b;
  --theme-card-bg: #404258;
  --theme-card-header-bg: rgba(255, 255, 255, 0.03);
  --theme-input-bg: #404258;
  --theme-dropdown-bg: #35364b;
  --theme-modal-bg: #404258;
  --theme-table-stripe: #35364b;
  --theme-hover-bg: #4a4c65;
  --theme-sidebar-bg: linear-gradient(to bottom, #2a2d42, #1a1c2e);

  /* Text Colors */
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #bdbdc7;
  --theme-text-muted: #b1b1bb;
  --theme-text-inverse: #212529;
  --theme-heading-color: #ffffff;

  /* Border Colors */
  --theme-border-color: #616279;
  --theme-input-border: #616279;
  --theme-card-border: #616279;

  /* Shadow */
  --theme-shadow: rgba(0, 0, 0, 0.25);
  --theme-shadow-lg: rgba(0, 0, 0, 0.4);

  /* Scrollbar */
  --theme-scrollbar-track: #35364b;
  --theme-scrollbar-thumb: #616279;
  --theme-scrollbar-thumb-hover: #7a7c95;
}

/* ============================================
   Theme Toggle Button
   ============================================ */
.theme-toggle-wrapper {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 15px;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid transparent;
  background: rgba(0, 157, 160, 0.1);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
  outline: none;
}

.theme-toggle-btn:hover {
  background-color: rgba(0, 157, 160, 0.2);
  border-color: var(--theme-primary);
  transform: scale(1.05);
}

.theme-toggle-btn:active {
  transform: scale(0.95);
}

.theme-toggle-btn i {
  font-size: 1.25rem;
  transition: transform 0.4s ease, color 0.3s ease;
}

/* Light mode - show moon icon */
.theme-toggle-btn .fa-moon {
  color: #6c757d;
}

.theme-toggle-btn .fa-sun {
  color: #ffc107;
}

.theme-toggle-btn .fa-circle-half-stroke {
  color: #6c757d;
}

.theme-toggle-label {
  margin-left: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
}

/* Rotate animation on theme change */
html[data-theme="dark"] .theme-toggle-btn i {
  transform: rotate(360deg);
}

/* ============================================
   Smooth Transitions
   ============================================ */
body,
.wrapper,
.main-panel,
.main-content,
.content-wrapper,
.card,
.card-header,
.card-body,
.card-footer,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.dropdown-menu,
.dropdown-item,
.navbar,
.nav-link,
.app-sidebar,
.sidebar-content,
.form-control,
.input-group-text,
input,
select,
textarea,
.table,
.table th,
.table td,
.btn,
.alert,
.badge,
.list-group-item,
.breadcrumb,
.pagination,
.page-link {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* ============================================
   Dark Mode - Base Overrides
   ============================================ */

/* Body */
html[data-theme="dark"] {
  background-color: var(--theme-body-bg);
  color: var(--theme-text-secondary);
}

/* Main Content Area */
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .content-wrapper {
  background-color: var(--theme-body-bg);
}

/* Headings */
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,
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(--theme-heading-color);
}

/* Links */
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--theme-primary);
}

html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--theme-primary-hover);
}

/* ============================================
   Dark Mode - Cards
   ============================================ */
html[data-theme="dark"] .card {
  background-color: var(--theme-card-bg);
  border-color: var(--theme-card-border);
  box-shadow: 0 4px 12px var(--theme-shadow);
}

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

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

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

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

/* ============================================
   Dark Mode - Forms & Inputs
   ============================================ */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
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="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--theme-input-bg);
  border-color: var(--theme-input-border);
  color: var(--theme-text-secondary);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: var(--theme-input-bg);
  border-color: var(--theme-primary);
  color: var(--theme-text-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 157, 160, 0.25);
}

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

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

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
  background-color: var(--theme-table-stripe);
  color: var(--theme-text-muted);
}

html[data-theme="dark"] label {
  color: var(--theme-text-secondary);
}

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

/* ============================================
   Dark Mode - Tables
   ============================================ */
html[data-theme="dark"] .table {
  color: var(--theme-text-secondary);
}

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

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

html[data-theme="dark"] .table thead th {
  border-bottom-color: var(--theme-border-color);
  background-color: var(--theme-card-header-bg);
}

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

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

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

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

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

html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: var(--theme-text-secondary);
}

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

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

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td {
  border-bottom-color: var(--theme-border-color);
  background-color: var(--theme-card-header-bg);
  color: var(--theme-text-primary);
}

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

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

html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd {
  background-color: var(--theme-table-stripe);
}

html[data-theme="dark"] table.dataTable.stripe tbody tr.even,
html[data-theme="dark"] table.dataTable.display tbody tr.even {
  background-color: var(--theme-card-bg);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--theme-text-secondary) !important;
  background-color: var(--theme-card-bg);
  border-color: var(--theme-border-color);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--theme-text-primary) !important;
  background-color: var(--theme-hover-bg);
  border-color: var(--theme-primary);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #fff !important;
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--theme-text-muted) !important;
  background-color: var(--theme-table-stripe);
}

/* DataTables Buttons */
html[data-theme="dark"] .dt-buttons .btn {
  background-color: var(--theme-card-bg);
  border-color: var(--theme-border-color);
  color: var(--theme-text-secondary);
}

html[data-theme="dark"] .dt-buttons .btn:hover {
  background-color: var(--theme-hover-bg);
  border-color: var(--theme-primary);
}

/* ============================================
   Dark Mode - Select2
   ============================================ */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--theme-input-bg);
  border-color: var(--theme-input-border);
}

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

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--theme-text-muted) transparent transparent transparent;
}

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

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

html[data-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--theme-text-secondary);
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--theme-primary);
  color: #fff;
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--theme-hover-bg);
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--theme-input-bg);
  color: var(--theme-text-secondary);
  border-color: var(--theme-input-border);
}

/* ============================================
   Dark Mode - Modals
   ============================================ */
html[data-theme="dark"] .modal-content {
  background-color: var(--theme-modal-bg);
  border-color: var(--theme-border-color);
}

html[data-theme="dark"] .modal-header {
  border-bottom-color: var(--theme-border-color);
  background-color: var(--theme-card-header-bg);
}

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

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

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

html[data-theme="dark"] .close {
  color: var(--theme-text-secondary);
  text-shadow: none;
}

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

/* ============================================
   Dark Mode - SweetAlert2
   ============================================ */
html[data-theme="dark"] .swal2-popup {
  background-color: #404258 !important;
  color: #bdbdc7 !important;
  border: 1px solid #616279 !important;
}

html[data-theme="dark"] .swal2-container .swal2-popup {
  background-color: #404258 !important;
  color: #bdbdc7 !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-popup .swal2-title,
.swal2-popup .swal2-title {
  color: #ffffff !important;
}

/* Force all swal2 text to be visible in dark mode */
html[data-theme="dark"] .swal2-container * {
  color: #bdbdc7;
}

html[data-theme="dark"] .swal2-container .swal2-title {
  color: #ffffff !important;
}

html[data-theme="dark"] .swal2-container .swal2-styled {
  color: #fff !important;
}

html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content {
  color: #bdbdc7 !important;
}

html[data-theme="dark"] .swal2-popup .swal2-html-container,
html[data-theme="dark"] .swal2-popup .swal2-content,
html[data-theme="dark"] .swal2-popup .swal2-html-container,
html[data-theme="dark"] .swal2-popup .swal2-content {
  color: #bdbdc7 !important;
}

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

html[data-theme="dark"] .swal2-input:focus,
html[data-theme="dark"] .swal2-textarea:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 157, 160, 0.25);
}

html[data-theme="dark"] .swal2-footer {
  border-top-color: var(--theme-border-color);
  color: var(--theme-text-muted);
}

html[data-theme="dark"] .swal2-close {
  color: var(--theme-text-secondary);
}

html[data-theme="dark"] .swal2-close:hover {
  color: var(--theme-danger);
}

/* SweetAlert2 Icons */
html[data-theme="dark"] .swal2-icon.swal2-question {
  border-color: var(--theme-info);
  color: var(--theme-info);
}

html[data-theme="dark"] .swal2-icon.swal2-warning {
  border-color: var(--theme-warning);
  color: var(--theme-warning);
}

html[data-theme="dark"] .swal2-icon.swal2-error {
  border-color: var(--theme-danger);
}

html[data-theme="dark"] .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--theme-danger);
}

html[data-theme="dark"] .swal2-icon.swal2-success {
  border-color: var(--theme-success);
  color: var(--theme-success);
}

html[data-theme="dark"] .swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--theme-success);
}

html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(12, 194, 126, 0.3);
}

html[data-theme="dark"] .swal2-icon.swal2-info {
  border-color: var(--theme-info);
  color: var(--theme-info);
}

/* SweetAlert2 Actions & Buttons */
html[data-theme="dark"] .swal2-actions {
  background-color: transparent;
}

html[data-theme="dark"] .swal2-styled.swal2-confirm {
  background-color: var(--theme-primary) !important;
  color: #fff;
}

html[data-theme="dark"] .swal2-styled.swal2-confirm:hover {
  background-color: var(--theme-primary-hover) !important;
}

html[data-theme="dark"] .swal2-styled.swal2-cancel {
  background-color: var(--theme-hover-bg) !important;
  color: var(--theme-text-secondary) !important;
  border: 1px solid var(--theme-border-color);
}

html[data-theme="dark"] .swal2-styled.swal2-cancel:hover {
  background-color: var(--theme-border-color) !important;
  color: var(--theme-text-primary) !important;
}

html[data-theme="dark"] .swal2-styled.swal2-deny {
  background-color: var(--theme-danger) !important;
}

/* SweetAlert2 Loader */
html[data-theme="dark"] .swal2-loader {
  border-color: var(--theme-primary) transparent var(--theme-primary) transparent;
}

/* SweetAlert2 Timer Progress Bar */
html[data-theme="dark"] .swal2-timer-progress-bar {
  background-color: var(--theme-primary);
}

/* SweetAlert2 Validation Message */
html[data-theme="dark"] .swal2-validation-message {
  background-color: var(--theme-hover-bg);
  color: var(--theme-text-secondary);
}

/* SweetAlert2 Image */
html[data-theme="dark"] .swal2-image {
  border-radius: 8px;
}

/* SweetAlert2 Input Label */
html[data-theme="dark"] .swal2-input-label {
  color: var(--theme-text-secondary);
}

/* SweetAlert2 Checkbox & Radio */
html[data-theme="dark"] .swal2-checkbox,
html[data-theme="dark"] .swal2-radio {
  color: var(--theme-text-secondary);
}

/* SweetAlert2 Range */
html[data-theme="dark"] .swal2-range input[type="range"] {
  background-color: var(--theme-border-color);
}

html[data-theme="dark"] .swal2-range output {
  color: var(--theme-text-secondary);
}

/* ============================================
   Dark Mode - jQuery Toast
   ============================================ */
html[data-theme="dark"] .jq-toast-wrap .jq-toast-single {
  background-color: var(--theme-card-bg);
  color: var(--theme-text-secondary);
  border-left-color: var(--theme-primary);
}

html[data-theme="dark"] .jq-toast-wrap .jq-toast-single h2 {
  color: var(--theme-text-primary);
}

html[data-theme="dark"] .jq-toast-wrap .jq-toast-single .close-jq-toast-single {
  color: var(--theme-text-secondary);
}

/* ============================================
   Dark Mode - Toastr
   ============================================ */
html[data-theme="dark"] #toast-container > .toast {
  background-color: var(--theme-card-bg);
  box-shadow: 0 4px 12px var(--theme-shadow);
}

html[data-theme="dark"] #toast-container > .toast-info {
  background-color: var(--theme-info);
}

html[data-theme="dark"] #toast-container > .toast-success {
  background-color: var(--theme-success);
}

html[data-theme="dark"] #toast-container > .toast-warning {
  background-color: var(--theme-warning);
}

html[data-theme="dark"] #toast-container > .toast-error {
  background-color: var(--theme-danger);
}

/* ============================================
   Dark Mode - Dropdowns
   ============================================ */
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--theme-dropdown-bg);
  border-color: var(--theme-border-color);
  box-shadow: 0 4px 12px var(--theme-shadow-lg);
}

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

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

html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active {
  background-color: var(--theme-primary);
  color: #fff;
}

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

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

/* ============================================
   Dark Mode - Alerts
   ============================================ */
html[data-theme="dark"] .alert {
  border-color: var(--theme-border-color);
}

html[data-theme="dark"] .alert-secondary {
  background-color: var(--theme-hover-bg);
  color: var(--theme-text-secondary);
}

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

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

/* ============================================
   Dark Mode - Badges
   ============================================ */
html[data-theme="dark"] .badge-secondary {
  background-color: var(--theme-text-muted);
}

html[data-theme="dark"] .badge-light {
  background-color: var(--theme-hover-bg);
  color: var(--theme-text-secondary);
}

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

/* ============================================
   Dark Mode - List Groups
   ============================================ */
html[data-theme="dark"] .list-group-item {
  background-color: var(--theme-card-bg);
  border-color: var(--theme-border-color);
  color: var(--theme-text-secondary);
}

html[data-theme="dark"] .list-group-item:hover {
  background-color: var(--theme-hover-bg);
}

html[data-theme="dark"] .list-group-item.active {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

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

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

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

html[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

html[data-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--theme-table-stripe);
  border-color: var(--theme-border-color);
  color: var(--theme-text-muted);
}

/* ============================================
   Dark Mode - Progress Bars
   ============================================ */
html[data-theme="dark"] .progress {
  background-color: var(--theme-table-stripe);
}

/* ============================================
   Dark Mode - Breadcrumbs
   ============================================ */
html[data-theme="dark"] .breadcrumb {
  background-color: var(--theme-card-bg);
}

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

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

/* ============================================
   Dark Mode - Navbar
   ============================================ */
html[data-theme="dark"] .header-navbar {
  background-color: var(--theme-card-bg) !important;
  box-shadow: 0 2px 8px var(--theme-shadow);
}

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

html[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
  color: var(--theme-text-secondary);
}

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

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

html[data-theme="dark"] .footer a {
  color: var(--theme-primary);
}

/* ============================================
   Dark Mode - Scrollbars
   ============================================ */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
  border-radius: 5px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 5px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover);
}

/* Firefox */
html[data-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
}

/* ============================================
   Dark Mode - Misc Utilities
   ============================================ */
html[data-theme="dark"] .bg-white {
  background-color: var(--theme-card-bg) !important;
}

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

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

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

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

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

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

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

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

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

html[data-theme="dark"] hr {
  border-top-color: var(--theme-border-color);
}

html[data-theme="dark"] code {
  background-color: var(--theme-hover-bg);
  color: var(--theme-danger);
}

html[data-theme="dark"] pre {
  background-color: var(--theme-table-stripe);
  color: var(--theme-text-secondary);
  border-color: var(--theme-border-color);
}

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

/* ============================================
   Dark Mode - Login Page
   ============================================ */
html[data-theme="dark"].blank-page {
  background-color: var(--theme-body-bg);
}

html[data-theme="dark"] #login .card {
  background-color: var(--theme-card-bg);
  box-shadow: 0 8px 24px var(--theme-shadow-lg);
}

html[data-theme="dark"] #login .card-title,
html[data-theme="dark"] #login .card-text {
  color: var(--theme-text-secondary);
}

/* ============================================
   Dark Mode - Stat Cards (Dashboard)
   ============================================ */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .worker-card,
html[data-theme="dark"] .order-card {
  background-color: var(--theme-card-bg);
  box-shadow: 0 4px 12px var(--theme-shadow);
}

html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .info-label {
  color: var(--theme-text-muted);
}

html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .info-value {
  color: var(--theme-text-primary);
}

html[data-theme="dark"] .worker-name,
html[data-theme="dark"] .order-id {
  color: var(--theme-text-primary);
}

html[data-theme="dark"] .worker-header,
html[data-theme="dark"] .order-card .card-header {
  border-bottom-color: var(--theme-border-color);
  background-color: var(--theme-card-header-bg);
}

html[data-theme="dark"] .worker-footer {
  background-color: var(--theme-table-stripe);
  border-top-color: var(--theme-border-color);
}

/* Filter Controls */
html[data-theme="dark"] .filter-controls {
  background-color: var(--theme-card-bg);
  box-shadow: 0 2px 8px var(--theme-shadow);
}

html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .filter-dropdown select {
  background-color: var(--theme-input-bg);
  color: var(--theme-text-secondary);
  border-color: var(--theme-input-border);
}

/* Empty State */
html[data-theme="dark"] .empty-state {
  background-color: var(--theme-table-stripe);
}

html[data-theme="dark"] .empty-state-icon {
  color: var(--theme-text-muted);
}

html[data-theme="dark"] .empty-state-text {
  color: var(--theme-text-secondary);
}

/* Card List */
html[data-theme="dark"] .card-list {
  background-color: var(--theme-hover-bg);
}

/* ============================================
   Dark Mode - Sidebar Menu Items
   ============================================ */
html[data-theme="dark"] .app-sidebar .navigation li a {
  color: var(--theme-text-secondary);
}

html[data-theme="dark"] .app-sidebar .navigation li a:hover {
  color: var(--theme-text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .app-sidebar .navigation li.active > a {
  color: var(--theme-text-primary);
  background-color: rgba(0, 157, 160, 0.15);
}

/* ============================================
   Dark Mode - Quill Editor
   ============================================ */
html[data-theme="dark"] .ql-toolbar.ql-snow {
  background-color: var(--theme-card-header-bg);
  border-color: var(--theme-border-color);
}

html[data-theme="dark"] .ql-container.ql-snow {
  background-color: var(--theme-input-bg);
  border-color: var(--theme-border-color);
}

html[data-theme="dark"] .ql-editor {
  color: var(--theme-text-secondary);
}

html[data-theme="dark"] .ql-editor.ql-blank::before {
  color: var(--theme-text-muted);
}

html[data-theme="dark"] .ql-snow .ql-stroke {
  stroke: var(--theme-text-secondary);
}

html[data-theme="dark"] .ql-snow .ql-fill {
  fill: var(--theme-text-secondary);
}

html[data-theme="dark"] .ql-snow .ql-picker {
  color: var(--theme-text-secondary);
}

/* ============================================
   Dark Mode - Date/Time Pickers
   ============================================ */
html[data-theme="dark"] .daterangepicker {
  background-color: var(--theme-dropdown-bg);
  border-color: var(--theme-border-color);
}

html[data-theme="dark"] .daterangepicker .calendar-table {
  background-color: var(--theme-card-bg);
  border-color: var(--theme-border-color);
}

html[data-theme="dark"] .daterangepicker td.available:hover {
  background-color: var(--theme-hover-bg);
}

html[data-theme="dark"] .daterangepicker td.in-range {
  background-color: var(--theme-hover-bg);
}

html[data-theme="dark"] .daterangepicker th,
html[data-theme="dark"] .daterangepicker td {
  color: var(--theme-text-secondary);
}

html[data-theme="dark"] .daterangepicker td.off {
  color: var(--theme-text-muted);
}

html[data-theme="dark"] .daterangepicker .drp-buttons {
  border-top-color: var(--theme-border-color);
}

html[data-theme="dark"] .daterangepicker select.monthselect,
html[data-theme="dark"] .daterangepicker select.yearselect {
  background-color: var(--theme-input-bg);
  color: var(--theme-text-secondary);
}

/* ============================================
   Dark Mode - Perfect Scrollbar
   ============================================ */
html[data-theme="dark"] .ps__thumb-y {
  background-color: var(--theme-scrollbar-thumb);
}

html[data-theme="dark"] .ps__rail-y:hover > .ps__thumb-y {
  background-color: var(--theme-scrollbar-thumb-hover);
}

/* ============================================
   Dark Mode - Charts (ApexCharts)
   ============================================ */
html[data-theme="dark"] .apexcharts-canvas {
  background: transparent;
}

html[data-theme="dark"] .apexcharts-text,
html[data-theme="dark"] .apexcharts-title-text,
html[data-theme="dark"] .apexcharts-legend-text {
  fill: var(--theme-text-secondary) !important;
}

html[data-theme="dark"] .apexcharts-gridline {
  stroke: var(--theme-border-color);
}

html[data-theme="dark"] .apexcharts-xaxis-label,
html[data-theme="dark"] .apexcharts-yaxis-label {
  fill: var(--theme-text-muted);
}

html[data-theme="dark"] .apexcharts-tooltip {
  background: var(--theme-card-bg) !important;
  border-color: var(--theme-border-color) !important;
  color: var(--theme-text-secondary);
}

html[data-theme="dark"] .apexcharts-tooltip-title {
  background: var(--theme-card-header-bg) !important;
  border-bottom-color: var(--theme-border-color) !important;
}

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

html[data-theme="dark"] .apexcharts-menu-item:hover {
  background: var(--theme-hover-bg);
}

/* ============================================
   Responsive Theme Toggle
   ============================================ */
@media (max-width: 991.98px) {
  .theme-toggle-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    margin: 0;
    padding: 0;
  }

  .theme-toggle-btn {
    width: 50px;
    height: 50px;
    background: var(--theme-primary);
    box-shadow: 0 4px 12px var(--theme-shadow-lg);
  }

  .theme-toggle-btn i {
    color: #fff !important;
    font-size: 1.4rem;
  }

  .theme-toggle-btn:hover {
    background: var(--theme-primary-hover);
    border-color: transparent;
  }

  .theme-toggle-label {
    display: none;
  }
}

/* ============================================
   Print Styles - Always Light
   ============================================ */
@media print {
  html[data-theme="dark"] {
    background-color: #fff !important;
    color: #212529 !important;
  }

  html[data-theme="dark"] .card,
  html[data-theme="dark"] .table,
  html[data-theme="dark"] .modal-content {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
  }

  .theme-toggle-wrapper {
    display: none !important;
  }
}