/* =======================================================
   OMQS DARK MODE SYSTEM (copied from Backend)
   Keep Frontend in color parity with Django templates
   ======================================================= */

:root {
  /* Light Mode Colors (Default) */
  --bg-primary: #ebf3ff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f8f9fa;
  --text-primary: #25396f;
  --text-secondary: #7c8db5;
  --text-muted: #6c757d;
  --accent-primary: #3B82F6;
  --accent-secondary: #017EFA;
  --border-color: #dee2e6;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --card-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --topbar-bg: #ffffff;
  
  /* Dark Mode Colors */
  --dark-bg-primary: #0f0f0f;
  --dark-bg-secondary: #0f0f0f;
  --dark-bg-tertiary: #262626;
  --dark-text-primary: #ffffff;
  --dark-text-secondary: #b4b4bd;
  --dark-text-muted: #a0a0a0;
  --dark-accent-primary: #4285f4;
  --dark-accent-secondary: #1976d2;
  --dark-border-color: #404040;
  --dark-shadow-color: rgba(0, 0, 0, 0.3);
  --dark-card-bg: #1e1e1e;
  --dark-sidebar-bg: #0f0f0f;
  --dark-topbar-bg: #0f0f0f;
}

/* =======================================================
   LIGHT MODE OVERRIDE STYLES (to counteract dark mode)
   Only apply when switching FROM dark mode to prevent conflicts
   ======================================================= */

html[data-theme="light"] {
  background-color: #EBF3FF !important;
}

html[data-theme="light"] body {
  background-color: #EBF3FF !important;
  color: inherit !important;
}

/* Temporary force class for immediate light mode application during toggle */
body.light-mode-force {
  background-color: #EBF3FF !important;
  color: inherit !important;
}

body.light-mode-force .card,
body.light-mode-force .card-body {
  background-color: #ffffff !important;
  color: inherit !important;
}

body.light-mode-force .sidebar {
  background-color: #ffffff !important;
  color: inherit !important;
}

body.light-mode-force .topbar {
  background-color: #ffffff !important;
  color: inherit !important;
}

body.light-mode-force .content-start {
  background-color: #ebf3ff !important;
  color: inherit !important;
}

/* =======================================================
   DARK MODE STYLES
   ======================================================= */

/* Immediate dark mode via data-theme attribute (prevents flash) */
html[data-theme="dark"] {
  background-color: #0f0f0f !important;
}

html[data-theme="dark"] body {
  background-color: #0f0f0f !important;
  color: var(--dark-text-primary) !important;
}

/* Standard dark mode class-based styles */
body.dark-mode,
html.dark-mode body {
  background-color: #0f0f0f !important;
  color: var(--dark-text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .h1,
body.dark-mode .h2,
body.dark-mode .h3,
body.dark-mode .h4,
body.dark-mode .h5,
body.dark-mode .h6 {
  color: var(--dark-text-primary) !important;
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode span {
  color: var(--dark-text-secondary) !important;
}

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

/* Emphasis */
body.dark-mode strong,
body.dark-mode b {
  color: var(--dark-text-primary) !important;
}

/* Cards */
body.dark-mode .card {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border-color) !important;
  box-shadow: 0 0.125rem 0.25rem var(--dark-shadow-color) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

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

body.dark-mode .card-header {
  background-color: var(--dark-bg-tertiary) !important;
  border-bottom-color: var(--dark-border-color) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .card-footer {
  background-color: var(--dark-bg-tertiary) !important;
  border-top-color: var(--dark-border-color) !important;
}

/* Sidebar */
body.dark-mode .sidebar {
  background-color: var(--dark-sidebar-bg) !important;
  border-right-color: var(--dark-border-color) !important;
}

body.dark-mode #sidebar .side-menu > li > a {
  color: var(--dark-text-secondary) !important;
  transition: color 0.3s ease, background-color 0.3s ease;
}

body.dark-mode #sidebar .side-menu > li > a:hover {
  color: var(--dark-text-primary) !important;
  background-color: var(--dark-bg-tertiary) !important;
}

body.dark-mode #sidebar .side-menu > li > a.active {
  color: var(--dark-accent-primary) !important;
  background-color: var(--dark-bg-tertiary) !important;
}

/* Sidebar dividers */
body.dark-mode #sidebar .divider {
  color: var(--dark-text-muted) !important;
}

/* Topbar */
body.dark-mode .topbar {
  background-color: var(--dark-topbar-bg) !important;
  border-bottom-color: var(--dark-border-color) !important;
}

body.dark-mode .topbar .menu ul li a {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .topbar .menu ul li .dropdown-menu {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-mode .topbar .menu ul li .dropdown-menu a {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .topbar .menu ul li .dropdown-menu a:hover {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

/* Content Area */
body.dark-mode .content-start {
  background-color: var(--dark-bg-primary) !important;
}

body.dark-mode .content-start .content-header h1 {
  color: var(--dark-text-primary) !important;
}

/* Forms */
body.dark-mode .form-control {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .form-control:focus {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-accent-primary) !important;
  color: var(--dark-text-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.25) !important;
}

body.dark-mode .form-select {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode label {
  color: var(--dark-text-primary) !important;
}

/* Tables (subset) */
body.dark-mode .table {
  color: var(--dark-text-secondary) !important;
  background-color: var(--dark-card-bg) !important;
  border: 1px solid var(--dark-border-color) !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .table thead th {
  color: var(--dark-text-primary) !important;
  background-color: var(--dark-bg-tertiary) !important;
  border-bottom-color: var(--dark-border-color) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 16px 12px;
}

body.dark-mode .table td,
body.dark-mode .table th {
  border-top-color: var(--dark-border-color) !important;
  border-left-color: var(--dark-border-color) !important;
  border-right-color: var(--dark-border-color) !important;
  padding: 12px;
  color: var(--dark-text-secondary) !important;
  font-size: 0.95rem;
  line-height: 1.4;
}

body.dark-mode .table tbody tr:nth-child(even) {
  background-color: var(--dark-bg-tertiary) !important;
}

body.dark-mode .table tbody tr:hover {
  background-color: #333333 !important;
  transition: background-color 0.2s ease;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--dark-card-bg) !important;
}

body.dark-mode .table-hover tbody tr:hover {
  background-color: #333333 !important;
}

/* Misc helpers */
.sidebar,
.topbar,
.content-start {
  will-change: background-color, color;
}