/**
 * Dark Mode Overrides for Fitness App
 * Based on Bootstrap 5.3 native dark mode + Urbix theme analysis
 * Only overrides for custom components (sidebar, header, footer, custom cards)
 */

/* ============================================
   CSS Variables for Dark Mode
   ============================================ */

[data-bs-theme="dark"] {
  /* Sidebar */
  --pe-app-sidebar-bg: #181d2e;
  --pe-app-sidebar-border-color: #383838;
  --pe-app-sidebar-menu-item-color: #f0e8e8;
  --pe-app-sidebar-caption-color: #ffffff;
  
  /* Header */
  --pe-app-header-bg: #181d2e;
  --pe-app-header-border-color: #383838;
  
  /* Body & Surfaces */
  --pe-body-bg: #0d1117;
  --pe-card-bg: #161b22;
  --pe-border-color: #30363d;
  --pe-text-muted: #8b949e;
  
  /* Light color variants (for .bg-light, etc.) */
  --pe-light: #1e2538;
  --pe-light-rgb: 30, 37, 56;
  --pe-light-bg-subtle: #212a40;
  --pe-secondary-bg: #181d2e;
  
  /* Shadows */
  --pe-box-shadow-sm: 0 6px 10px -3px rgba(21, 21, 21, 0.47);
  --pe-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  --pe-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.6);
  
  /* Inputs & Forms */
  --pe-input-bg: #0d1117;
  --pe-input-border: #30363d;
  --pe-input-focus-border: #1f6feb;
  
  /* Bootstrap overrides for consistency */
  --bs-body-bg: #0d1117;
  --bs-body-color: #c9d1d9;
  --bs-border-color: #30363d;
  --bs-tertiary-bg: #161b22;
}

/* ============================================
   Sidebar Dark Mode
   ============================================ */

[data-bs-theme="dark"] .pe-app-sidebar {
  background-color: #181d2e !important;
  border-color: #383838 !important;
  color: #f0e8e8 !important;
}

[data-bs-theme="dark"] .pe-nav-link {
  color: var(--pe-app-sidebar-menu-item-color);
}

[data-bs-theme="dark"] .pe-nav-link:hover,
[data-bs-theme="dark"] .pe-nav-link.active {
  background-color: rgba(91, 102, 235, 0.15);
  color: #ffffff;
}

[data-bs-theme="dark"] .pe-app-sidebar .pe-menu .pe-menu-title {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .pe-app-sidebar-logo {
  border-color: var(--pe-app-sidebar-border-color);
}

/* Sidebar list items */
[data-bs-theme="dark"] .pe-slide {
  color: var(--pe-app-sidebar-menu-item-color);
}

/* ============================================
   Header Dark Mode
   ============================================ */

[data-bs-theme="dark"] .app-header {
  background-color: var(--pe-app-header-bg);
  border-color: var(--pe-app-header-border-color);
}

[data-bs-theme="dark"] .header-btn {
  color: var(--pe-app-sidebar-menu-item-color);
}

[data-bs-theme="dark"] .header-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .header-icon {
  color: var(--pe-app-sidebar-menu-item-color);
}

/* ============================================
   Cards & Surfaces Dark Mode
   ============================================ */

[data-bs-theme="dark"] .card {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .card-body {
  background-color: #161b22 !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .card-header {
  background-color: #0d1117 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .card h1,
[data-bs-theme="dark"] .card h2,
[data-bs-theme="dark"] .card h3,
[data-bs-theme="dark"] .card h4,
[data-bs-theme="dark"] .card h5,
[data-bs-theme="dark"] .card h6 {
  color: #f0f6fc !important;
}

/* Force dark backgrounds on light variants */
[data-bs-theme="dark"] .bg-light {
  background-color: #1e2538 !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .bg-white {
  background-color: #161b22 !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .text-dark {
  color: #f0f6fc !important;
}

[data-bs-theme="dark"] .text-muted {
  color: #8b949e !important;
}

[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 {
  color: #f0f6fc;
}

/* ============================================
   Buttons Dark Mode
   ============================================ */

[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: #1e2538;
  --bs-btn-border-color: #1e2538;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #212a40;
  --bs-btn-hover-border-color: #212a40;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #212a40;
  --bs-btn-active-border-color: #212a40;
  --bs-btn-active-color: #fff;
}

[data-bs-theme="dark"] .btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--pe-border-color);
  --bs-btn-hover-bg: var(--pe-light-rgb);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--pe-border-color);
  --bs-btn-active-bg: #1e2538;
  --bs-btn-active-border-color: #1e2538;
  --bs-btn-active-color: #fff;
}

[data-bs-theme="dark"] .btn-dark {
  --bs-btn-active-bg: #40474f;
  --bs-btn-hover-bg: #40474f;
  --bs-btn-hover-border-color: #40474f;
}

/* ============================================
   Background Utilities Dark Mode
   ============================================ */

[data-bs-theme="dark"] .bg-light {
  background-color: #1e2538 !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .bg-white {
  background-color: var(--pe-card-bg) !important;
}

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

/* ============================================
   Forms & Inputs Dark Mode
   ============================================ */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--pe-input-bg);
  border-color: var(--pe-input-border);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--pe-input-bg);
  border-color: var(--pe-input-focus-border);
  color: var(--bs-body-color);
}

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

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
  background-color: #1e2538;
  color: #8b949e;
  opacity: 0.7;
}

/* Training session set inputs */
[data-bs-theme="dark"] .set-input {
  background: #0d1117 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .set-row.completed .set-input {
  background-color: rgba(25, 135, 84, 0.15) !important;
  border-color: #198754 !important;
  color: #4ade80 !important;
}

[data-bs-theme="dark"] .input-group-text {
  background-color: #1e2538 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}

/* Badges - Améliorer la visibilité des textes */
[data-bs-theme="dark"] .badge {
  font-weight: 600;
}

[data-bs-theme="dark"] .badge.bg-primary {
  background-color: #5b66eb !important;
  color: #ffffff !important;
}

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

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

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

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

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

/* Nutrition badges in meal plan edit */
[data-bs-theme="dark"] .nutrition-badge.calories {
  background: rgba(255, 193, 7, 0.3) !important;
  color: #ffc107 !important;
}

[data-bs-theme="dark"] .nutrition-badge.protein {
  background: rgba(220, 53, 69, 0.3) !important;
  color: #ff6b7a !important;
}

[data-bs-theme="dark"] .nutrition-badge.carbs {
  background: rgba(13, 110, 253, 0.3) !important;
  color: #5b9fff !important;
}

[data-bs-theme="dark"] .nutrition-badge.fat {
  background: rgba(25, 135, 84, 0.3) !important;
  color: #4ade80 !important;
}

[data-bs-theme="dark"] .nutrition-badge.fiber {
  background: rgba(108, 117, 125, 0.3) !important;
  color: #adb5bd !important;
}

[data-bs-theme="dark"] .nutrition-badge.salt {
  background: rgba(173, 181, 189, 0.3) !important;
  color: #ced4da !important;
}

/* ============================================
   Modals Dark Mode
   ============================================ */

[data-bs-theme="dark"] .modal-content {
  background-color: var(--pe-card-bg);
  border-color: var(--pe-border-color);
}

[data-bs-theme="dark"] .modal-header {
  border-color: var(--pe-border-color);
}

[data-bs-theme="dark"] .modal-footer {
  border-color: var(--pe-border-color);
}

/* ============================================
   Dropdowns Dark Mode
   ============================================ */

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

[data-bs-theme="dark"] .dropdown-item {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: rgba(91, 102, 235, 0.15);
  color: #ffffff;
}

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

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

/* ============================================
   Tables Dark Mode
   ============================================ */

[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-border-color: var(--pe-border-color);
  color: var(--bs-body-color);
  background: #161b22 !important;
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
  color: #c9d1d9 !important;
  background-color: transparent;
  border-bottom-color: #30363d !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
  border-bottom-color: #30363d !important;
  padding: 0.75rem;
}

/* ============================================
   Footer Dark Mode
   ============================================ */

[data-bs-theme="dark"] .app-footer {
  background-color: var(--pe-app-sidebar-bg);
  border-color: var(--pe-app-header-border-color);
  color: var(--bs-body-color);
}

/* ============================================
   Navigation Tabs Dark Mode
   ============================================ */

[data-bs-theme="dark"] .nav-tabs {
  border-color: var(--pe-border-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--pe-border-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--pe-card-bg);
  border-color: var(--pe-border-color) var(--pe-border-color) var(--pe-card-bg);
  color: var(--bs-body-color);
}

/* ============================================
   Badges Dark Mode
   ============================================ */

/* Badges keep their semantic colors in dark mode */

/* ============================================
   List Groups Dark Mode
   ============================================ */

[data-bs-theme="dark"] .list-group-item {
  background-color: var(--pe-card-bg);
  border-color: var(--pe-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ============================================
   Alerts Dark Mode
   ============================================ */

[data-bs-theme="dark"] .alert {
  border-color: var(--pe-border-color);
}

/* ============================================
   Progress Bars Dark Mode
   ============================================ */

[data-bs-theme="dark"] .progress {
  background-color: var(--pe-secondary-bg);
}

/* ============================================
   Borders & Separators Dark Mode
   ============================================ */

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
  border-color: var(--pe-border-color) !important;
}

[data-bs-theme="dark"] hr {
  border-color: var(--pe-border-color);
  opacity: 1;
}

/* ============================================
   Custom Gradient Cards (preserve colors)
   ============================================ */

/* Gradient cards keep their colors in dark mode for visual consistency */

/* ============================================
   Shadows in Dark Mode
   ============================================ */

[data-bs-theme="dark"] .shadow-sm {
  box-shadow: var(--pe-box-shadow-sm) !important;
}

[data-bs-theme="dark"] .shadow {
  box-shadow: var(--pe-box-shadow) !important;
}

[data-bs-theme="dark"] .shadow-lg {
  box-shadow: var(--pe-box-shadow-lg) !important;
}

/* ============================================
   Breadcrumbs Dark Mode
   ============================================ */

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

/* ============================================
   Pagination Dark Mode
   ============================================ */

[data-bs-theme="dark"] .page-link {
  background-color: var(--pe-card-bg);
  border-color: var(--pe-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .page-link:hover {
  background-color: rgba(91, 102, 235, 0.15);
  border-color: var(--pe-border-color);
  color: #ffffff;
}

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

[data-bs-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--pe-secondary-bg);
  border-color: var(--pe-border-color);
  color: var(--pe-text-muted);
}

/* ============================================
   Toasts Dark Mode
   ============================================ */

[data-bs-theme="dark"] .toast {
  background-color: var(--pe-card-bg);
  border-color: var(--pe-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .toast-header {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--pe-border-color);
  color: var(--bs-body-color);
}

/* ============================================
   Accordion Dark Mode
   ============================================ */

[data-bs-theme="dark"] .accordion-item {
  background-color: var(--pe-card-bg);
  border-color: var(--pe-border-color);
}

[data-bs-theme="dark"] .accordion-button {
  background-color: var(--pe-card-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: rgba(91, 102, 235, 0.15);
  color: var(--bs-body-color);
}

/* ============================================
   App Wrapper Dark Mode
   ============================================ */

[data-bs-theme="dark"] .app-wrapper {
  background-color: #0d1117 !important;
}

[data-bs-theme="dark"] #layout-wrapper {
  background-color: #0d1117 !important;
}

[data-bs-theme="dark"] body {
  background-color: #0d1117 !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] main {
  background-color: transparent;
}

/* ============================================
   Bottom Navigation (Mobile) Dark Mode
   ============================================ */

[data-bs-theme="dark"] .bottom-nav {
  background-color: #181d2e !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .bottom-nav-item {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-bs-theme="dark"] .bottom-nav-item.active {
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .bottom-nav-item:hover {
  color: #f0f6fc !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .bottom-nav-overlay {
  background: rgba(13, 17, 23, 0.95) !important;
}

[data-bs-theme="dark"] .bottom-nav-overlay-header {
  background: #181d2e !important;
  border-bottom-color: #30363d !important;
  color: #f0f6fc !important;
}

[data-bs-theme="dark"] .bottom-nav-overlay-header h5 {
  color: #f0f6fc !important;
}

[data-bs-theme="dark"] .bottom-nav-overlay-content {
  background: #0d1117 !important;
}

[data-bs-theme="dark"] .bottom-nav-overlay-content a,
[data-bs-theme="dark"] .overlay-item {
  color: #c9d1d9 !important;
  border-bottom-color: #30363d !important;
}

[data-bs-theme="dark"] .bottom-nav-overlay-content a:hover,
[data-bs-theme="dark"] .overlay-item:hover {
  background: #1e2538 !important;
  color: #f0f6fc !important;
}

/* ============================================
   Dashboard Specific Dark Mode
   ============================================ */

/* Override gradient card with inline styles for "Aujourd'hui" - only in sidebar */
[data-bs-theme="dark"] .dashboard-sidebar-left .gradient-card {
  background: linear-gradient(135deg, #1e2538 0%, #181d2e 100%) !important;
}

/* Fix title color in sidebar gradient card */
[data-bs-theme="dark"] .dashboard-sidebar-left .gradient-card h5 {
  color: var(--bs-primary) !important;
}

/* Fix session cards and alerts in sidebar with bg-white, bg-light */
[data-bs-theme="dark"] .gradient-card .bg-white,
[data-bs-theme="dark"] .gradient-card .border {
  background-color: #161b22 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .gradient-card .bg-light {
  background-color: #1e2538 !important;
  color: #c9d1d9 !important;
}

/* Ensure all other cards use proper dark mode backgrounds (removed duplicate) */

/* Fix inner gradient boxes in sidebar (Quick Stats) - keep their inline gradients visible */
[data-bs-theme="dark"] .gradient-card .rounded-3[style*="gradient"] {
  opacity: 0.95;
}

/* ============================================
   Daily Nutrition & Meal Plans Dark Mode
   ============================================ */

/* Override styles.css token system for dark mode */
[data-bs-theme="dark"] .card:not(.gradient-card):not([style*="background:"]),
[data-bs-theme="dark"] .calendar-wrapper,
[data-bs-theme="dark"] .token-surface {
  background: #161b22 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

/* Meal plans specific styles */
[data-bs-theme="dark"] .meal-section h6 {
  color: #f0f6fc !important;
  background: rgba(22, 27, 34, 0.9) !important;
}

[data-bs-theme="dark"] .meal-section .form-label {
  color: #c9d1d9 !important;
  background: rgba(30, 37, 56, 0.8) !important;
}

[data-bs-theme="dark"] .meal-section .form-control,
[data-bs-theme="dark"] .meal-section .form-select {
  background: rgba(13, 17, 23, 0.95) !important;
  border-color: rgba(48, 54, 61, 0.5) !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .day-tab.has-content::before {
  border-color: #0d1117;
}

[data-bs-theme="dark"] .day-tab.active {
  background: rgba(30, 37, 56, 1) !important;
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .day-header {
  background: rgba(22, 27, 34, 0.9) !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .meal-item-card {
  background: rgba(22, 27, 34, 0.9) !important;
  border-color: rgba(48, 54, 61, 0.8) !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .btn-outline-light-custom {
  border-color: rgba(48, 54, 61, 0.8) !important;
  color: #c9d1d9 !important;
  background: rgba(30, 37, 56, 0.9) !important;
}

[data-bs-theme="dark"] .btn-outline-light-custom:hover {
  background: rgba(30, 37, 56, 1) !important;
  color: #f0f6fc !important;
  border-color: var(--bs-primary) !important;
}

/* ============================================
   Programs & Analytics Dark Mode
   ============================================ */

/* Metric cards with gradients */
[data-bs-theme="dark"] .metric-card {
  background: linear-gradient(135deg, #1e2538 0%, #181d2e 100%) !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .metric-card::before {
  background: radial-gradient(circle at 70% 20%, rgba(91, 102, 235, 0.15), transparent 60%);
}

[data-bs-theme="dark"] .metric-value,
[data-bs-theme="dark"] .metric-label {
  color: #f0f6fc !important;
}

/* ============================================
   DataTables Dark Mode
   ============================================ */

/* Override datatables-urbix.css white background */
[data-bs-theme="dark"] .card-body:has(.dataTables_wrapper) {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
}

[data-bs-theme="dark"] .dataTables_wrapper table.dataTable thead th {
  background: linear-gradient(145deg, #1e2538, #181d2e) !important;
  color: #f0f6fc !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: #c9d1d9 !important;
}

/* Table-light variant */
[data-bs-theme="dark"] .table-light {
  --bs-table-color: #c9d1d9;
  --bs-table-bg: #1e2538;
  --bs-table-border-color: #30363d;
  --bs-table-striped-bg: #212a40;
  --bs-table-striped-color: #c9d1d9;
  --bs-table-active-bg: #212a40;
  --bs-table-active-color: #f0f6fc;
  --bs-table-hover-bg: #252e44;
  --bs-table-hover-color: #f0f6fc;
  color: #c9d1d9;
  border-color: #30363d;
}

/* DataTables filter input */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background-color: #0d1117 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--bs-primary) !important;
  background-color: #161b22 !important;
}

/* DataTables select dropdown */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background-color: #0d1117 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--bs-primary) !important;
  background-color: #161b22 !important;
}

/* DataTables pagination buttons */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-bs-theme="dark"] .card .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-bs-theme="dark"] .card-body .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #1e2538 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
[data-bs-theme="dark"] .card .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
[data-bs-theme="dark"] .card-body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #212a40 !important;
  color: #f0f6fc !important;
  border-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-bs-theme="dark"] .card .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-bs-theme="dark"] .card-body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--bs-primary) !important;
  color: #ffffff !important;
  border-color: var(--bs-primary) !important;
}

/* Fix table cells colors */
[data-bs-theme="dark"] .table > :not(caption) > * > * {
  color: #c9d1d9 !important;
  background-color: transparent;
  border-bottom-color: #30363d;
  transition: background-color 0.15s ease, color 0.15s ease;
}

[data-bs-theme="dark"] .table thead th {
  background: #1e2538 !important;
  color: #f0f6fc !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .table tbody tr {
  background-color: #161b22;
  border-color: #30363d;
}

[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: #1e2538;
}

[data-bs-theme="dark"] .table tbody tr:hover > * {
  background-color: rgba(30, 37, 56, 0.6);
  color: #f0f6fc;
}

/* ============================================
   Calendar Dark Mode
   ============================================ */

[data-bs-theme="dark"] .calendar-day {
  background-color: #161b22 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .calendar-day:hover {
  background-color: #1e2538 !important;
}

[data-bs-theme="dark"] .calendar-day.today {
  background-color: rgba(91, 102, 235, 0.2) !important;
  border-color: var(--bs-primary) !important;
}

/* Calendar subtle backgrounds */
[data-bs-theme="dark"] .calendar-cell.bg-light-subtle {
  background: #1e2538 !important;
  color: #c9d1d9 !important;
}

/* ============================================
   Borders Dark Mode
   ============================================ */

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
  border-color: #30363d !important;
}

/* ============================================
   Messages/Chat Dark Mode
   ============================================ */

[data-bs-theme="dark"] .messages-container {
  background: #161b22 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .conversations-header {
  background: #0d1117 !important;
  border-bottom-color: #30363d !important;
  color: #f0f6fc !important;
}

[data-bs-theme="dark"] .conversations-sidebar {
  background: #0d1117 !important;
  border-right-color: #30363d !important;
}

[data-bs-theme="dark"] .conversation-item {
  background: #161b22 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .conversation-item:hover,
[data-bs-theme="dark"] .conversation-item.active {
  background: #1e2538 !important;
}

[data-bs-theme="dark"] .chat-header {
  background: #0d1117 !important;
  border-bottom-color: #30363d !important;
  color: #f0f6fc !important;
}

[data-bs-theme="dark"] .messages-area {
  background: #0d1117 !important;
}

[data-bs-theme="dark"] .compose-area {
  background: #161b22 !important;
  border-top-color: #30363d !important;
}

[data-bs-theme="dark"] .message-bubble {
  background: #1e2538 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .message-bubble.sent {
  background: var(--bs-primary) !important;
  color: #ffffff !important;
}

/* ============================================
   Notifications Dark Mode
   ============================================ */

[data-bs-theme="dark"] .notifications-header {
  background: #161b22 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  color: #f0f6fc !important;
}

[data-bs-theme="dark"] .notification-item {
  background: #161b22 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

[data-bs-theme="dark"] .notification-item:hover {
  background: #1e2538 !important;
}

[data-bs-theme="dark"] .notification-item.unread {
  background: #1e2538 !important;
  border-left-color: var(--bs-primary) !important;
}

/* Notification icons */
[data-bs-theme="dark"] .notification-icon.system {
  background: rgba(156, 39, 176, 0.2) !important;
  color: #ce93d8 !important;
}

[data-bs-theme="dark"] .notification-icon.reaction {
  background: rgba(233, 30, 99, 0.2) !important;
  color: #f48fb1 !important;
}

[data-bs-theme="dark"] .notification-icon.new-message {
  background: rgba(33, 150, 243, 0.2) !important;
  color: #90caf9 !important;
}

/* ============================================
   Quill Editor Dark Mode
   ============================================ */

[data-bs-theme="dark"] .ql-toolbar.ql-snow {
  border-bottom-color: #30363d !important;
  background: linear-gradient(135deg, #1e2538 0%, #181d2e 100%) !important;
}

[data-bs-theme="dark"] .compose-editor {
  background: #0d1117 !important;
  border-color: #30363d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .compose-editor:focus-within {
  border-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .ql-editor {
  color: #c9d1d9 !important;
}

[data-bs-theme="dark"] .ql-editor.ql-blank::before {
  color: #8b949e !important;
}

[data-bs-theme="dark"] .ql-snow .ql-stroke {
  stroke: #c9d1d9 !important;
}

[data-bs-theme="dark"] .ql-snow .ql-fill {
  fill: #c9d1d9 !important;
}

[data-bs-theme="dark"] .ql-snow .ql-picker-label {
  color: #c9d1d9 !important;
}

/* ============================================
   Training Session Dark Mode
   ============================================ */

/* Override inline gradient background on training session container */
[data-bs-theme="dark"] .container-fluid[style*="linear-gradient"] {
  background: #0d1117 !important;
  color: #c9d1d9 !important;
}

/* ============================================
   Scrollbars Dark Mode
   ============================================ */

/* Global scrollbars - Webkit (Chrome, Safari, Edge) */
[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: #0d1117;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: #0d1117;
  border-radius: 6px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  border: 2px solid #0d1117;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Sidebar scrollbar */
[data-bs-theme="dark"] .pe-app-sidebar::-webkit-scrollbar {
  width: 8px;
  background: #181d2e;
}

[data-bs-theme="dark"] .pe-app-sidebar::-webkit-scrollbar-track {
  background: #181d2e;
}

[data-bs-theme="dark"] .pe-app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

[data-bs-theme="dark"] .pe-app-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Main content scrollbar */
[data-bs-theme="dark"] .main-content::-webkit-scrollbar,
[data-bs-theme="dark"] .pe-main-wrapper::-webkit-scrollbar {
  width: 10px;
  background: #0d1117;
}

[data-bs-theme="dark"] .main-content::-webkit-scrollbar-track,
[data-bs-theme="dark"] .pe-main-wrapper::-webkit-scrollbar-track {
  background: #0d1117;
}

[data-bs-theme="dark"] .main-content::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .pe-main-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

[data-bs-theme="dark"] .main-content::-webkit-scrollbar-thumb:hover,
[data-bs-theme="dark"] .pe-main-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Firefox scrollbars */
[data-bs-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) #0d1117;
}

[data-bs-theme="dark"] .pe-app-sidebar {
  scrollbar-color: rgba(255, 255, 255, 0.15) #181d2e;
}