/**
 * Dark/Light Theme System
 * Uses CSS custom properties for theme switching
 * Default: Light mode
 */

/* ==================== CSS CUSTOM PROPERTIES ==================== */

/* Light Mode (Default) */
:root {
  /* Primary Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;

  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-color: #dee2e6;
  --border-color-light: #e9ecef;
  --border-color-dark: #ced4da;

  /* Navigation */
  --nav-bg: #2563eb;
  --nav-bg-hover: #1d4ed8;
  --nav-text: #ffffff;

  /* Cards & Containers */
  --card-bg: #ffffff;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --card-shadow-hover: rgba(0, 0, 0, 0.15);

  /* Buttons */
  --btn-primary-bg: #2563eb;
  --btn-primary-hover: #1d4ed8;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-hover: #5a6268;

  /* Forms */
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-focus-border: #2563eb;
  --input-disabled-bg: #e9ecef;

  /* Tables */
  --table-bg: #ffffff;
  --table-stripe-bg: #f8f9fa;
  --table-border: #dee2e6;
  --table-hover-bg: #f1f3f5;

  /* Modals & Overlays */
  --modal-bg: #ffffff;
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --overlay-bg: rgba(0, 0, 0, 0.3);

  /* Status Colors */
  --success-bg: #d1e7dd;
  --success-text: #0f5132;
  --success-border: #badbcc;

  --warning-bg: #fff3cd;
  --warning-text: #664d03;
  --warning-border: #ffecb5;

  --danger-bg: #f8d7da;
  --danger-text: #842029;
  --danger-border: #f5c2c7;

  --info-bg: #cfe2ff;
  --info-text: #084298;
  --info-border: #b6d4fe;

  /* Scrollbar */
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #888;
  --scrollbar-thumb-hover: #555;

  /* Code & Pre */
  --code-bg: #f8f9fa;
  --code-text: #e83e8c;
  --pre-bg: #282c34;
  --pre-text: #abb2bf;

  /* Links */
  --link-color: #2563eb;
  --link-hover: #1d4ed8;
  --link-visited: #5b21b6;
}

/* Dark Mode - Professional Modern Palette */
[data-theme="dark"] {
  /* Primary Colors - Softer, easier on the eyes */
  --bg-primary: #0f1419;
  --bg-secondary: #1a1f2e;
  --bg-tertiary: #252b3b;

  /* Text Colors - Improved contrast ratios */
  --text-primary: #e6edf3;
  --text-secondary: #9ea7b8;
  --text-muted: #6e7681;
  --text-inverse: #0f1419;

  /* Border Colors - Subtle but visible */
  --border-color: #30363d;
  --border-color-light: #3d444d;
  --border-color-dark: #21262d;

  /* Navigation - Deep blue that's not harsh */
  --nav-bg: #1a2332;
  --nav-bg-hover: #243447;
  --nav-text: #e6edf3;

  /* Cards & Containers - Elevated surfaces */
  --card-bg: #161b22;
  --card-shadow: rgba(0, 0, 0, 0.4);
  --card-shadow-hover: rgba(0, 0, 0, 0.6);

  /* Buttons - Vibrant but not blinding */
  --btn-primary-bg: #3b82f6;
  --btn-primary-hover: #2563eb;
  --btn-secondary-bg: #30363d;
  --btn-secondary-hover: #3d444d;

  /* Forms - Clear input fields */
  --input-bg: #0d1117;
  --input-border: #30363d;
  --input-focus-border: #58a6ff;
  --input-disabled-bg: #21262d;

  /* Tables - Readable rows */
  --table-bg: #161b22;
  --table-stripe-bg: #0d1117;
  --table-border: #30363d;
  --table-hover-bg: #1a1f2e;

  /* Modals & Overlays */
  --modal-bg: #161b22;
  --modal-backdrop: rgba(0, 0, 0, 0.75);
  --overlay-bg: rgba(0, 0, 0, 0.6);

  /* Status Colors - High contrast, accessible */
  --success-bg: #0f3b2c;
  --success-text: #57d9a3;
  --success-border: #1a7f5a;

  --warning-bg: #4d3800;
  --warning-text: #ffdf80;
  --warning-border: #9e6e00;

  --danger-bg: #4d1f29;
  --danger-text: #ff7b8f;
  --danger-border: #a0273f;

  --info-bg: #0c2d6b;
  --info-text: #79c0ff;
  --info-border: #1158c7;

  /* Scrollbar - Visible but not intrusive */
  --scrollbar-track: #0d1117;
  --scrollbar-thumb: #30363d;
  --scrollbar-thumb-hover: #484f58;

  /* Code & Pre - Syntax highlighting friendly */
  --code-bg: #0d1117;
  --code-text: #ff7eb6;
  --pre-bg: #0d1117;
  --pre-text: #e6edf3;

  /* Links - Accessible blue */
  --link-color: #58a6ff;
  --link-hover: #79c0ff;
  --link-visited: #bc8cff;
}

/* ==================== UTILITY CLASSES ==================== */

/* Hidden class - ONLY for theme toggle icons to avoid breaking responsive nav */
svg.hidden,
.theme-icon.hidden,
[data-icon-light].hidden,
[data-icon-dark].hidden {
  display: none !important;
  visibility: hidden !important;
}

/* ==================== BASE THEME APPLICATION ==================== */

/* Apply theme to common elements */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards */
.card,
.agenda-card,
.minutes-card,
.document-card {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  box-shadow: 0 1px 3px var(--card-shadow);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 6px var(--card-shadow-hover);
}

/* Forms */
input,
textarea,
select,
.form-control {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  background-color: var(--input-bg);
  border-color: var(--input-focus-border);
  color: var(--text-primary);
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--input-disabled-bg);
}

/* Tables */
table {
  background-color: var(--table-bg);
  color: var(--text-primary);
}

table thead {
  border-color: var(--table-border);
}

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

table tbody tr:nth-child(even) {
  background-color: var(--table-stripe-bg);
}

table tbody tr:hover {
  background-color: var(--table-hover-bg);
}

/* Modals */
.modal-content {
  background-color: var(--modal-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

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

.modal-backdrop {
  background-color: var(--modal-backdrop);
}

/* Links */
a {
  color: var(--link-color);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover);
}

a:visited {
  color: var(--link-visited);
}

/* Buttons - preserve existing Bootstrap classes but add theme support */
.btn-primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}

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

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-bg);
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-hover);
  border-color: var(--btn-secondary-hover);
}

/* Code */
code {
  background-color: var(--code-bg);
  color: var(--code-text);
}

pre {
  background-color: var(--pre-bg);
  color: var(--pre-text);
  border-color: var(--border-color);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Alerts & Status Messages */
.alert-success {
  background-color: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

.alert-warning {
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.alert-danger {
  background-color: var(--danger-bg);
  color: var(--danger-text);
  border-color: var(--danger-border);
}

.alert-info {
  background-color: var(--info-bg);
  color: var(--info-text);
  border-color: var(--info-border);
}

/* Secondary Backgrounds */
.bg-light,
.bg-gray-50,
.bg-gray-100 {
  background-color: var(--bg-secondary) !important;
}

.bg-gray-200 {
  background-color: var(--bg-tertiary) !important;
}

/* Text Colors */
.text-muted {
  color: var(--text-muted) !important;
}

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

/* Borders */
.border {
  border-color: var(--border-color) !important;
}

.border-top,
.border-bottom,
.border-left,
.border-right {
  border-color: var(--border-color) !important;
}

/* Dividers */
hr {
  border-color: var(--border-color);
  opacity: 0.5;
}

/* Dropdown Menus */
.dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

.dropdown-item {
  color: var(--text-primary);
}

.dropdown-item:hover {
  background-color: var(--bg-secondary);
}

.dropdown-divider {
  border-color: var(--border-color);
}

/* Navigation Specific */
nav.bg-blue-600 {
  background-color: var(--nav-bg) !important;
}

nav.bg-blue-600 .hover\:bg-blue-700:hover {
  background-color: var(--nav-bg-hover) !important;
}

/* Responsive Navigation - Hide hamburger on desktop (md breakpoint = 768px) */
@media (min-width: 768px) {
  #mobile-menu-btn {
    display: none !important;
  }

  #mobile-menu {
    display: none !important;
  }
}

/* Navigation Logo - Ensure visibility in both themes */
nav a[href="/"] {
  color: var(--nav-text) !important;
}

/* Navigation Links - Keep white text on blue nav bar (but NOT dropdown items) */
nav.bg-blue-600 > div > div > a,
nav.bg-blue-600 > div > div > div > a:not(.nav-dropdown-item),
nav.bg-blue-600 .nav-dropdown-toggle {
  color: var(--nav-text) !important;
}

nav.bg-blue-600 > div > div > a:hover,
nav.bg-blue-600 .nav-dropdown-toggle:hover {
  color: var(--nav-text) !important;
}

/* Dropdown menu items need proper colors - NOT white! */
/* High specificity to override all other rules */
nav .nav-dropdown .nav-dropdown-menu a.nav-dropdown-item,
nav .nav-dropdown-menu a.nav-dropdown-item,
.nav-dropdown-menu a.nav-dropdown-item,
a.nav-dropdown-item {
  color: var(--text-primary) !important;
  background-color: transparent;
}

nav .nav-dropdown .nav-dropdown-menu a.nav-dropdown-item:hover,
nav .nav-dropdown-menu a.nav-dropdown-item:hover,
.nav-dropdown-menu a.nav-dropdown-item:hover,
a.nav-dropdown-item:hover {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary) !important;
}

nav .nav-dropdown .nav-dropdown-menu a.nav-dropdown-item:visited,
nav .nav-dropdown-menu a.nav-dropdown-item:visited,
.nav-dropdown-menu a.nav-dropdown-item:visited,
a.nav-dropdown-item:visited {
  color: var(--text-primary) !important;
}

nav .nav-dropdown .nav-dropdown-menu a.nav-dropdown-item:active,
a.nav-dropdown-item:active {
  color: var(--text-primary) !important;
}

nav a[href="/"] img {
  opacity: 1 !important;
  visibility: visible !important;
}

nav a[href="/"] .text-lg {
  color: var(--nav-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Navigation Dropdown Menus - Dark Mode Support */
.nav-dropdown-menu {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.nav-dropdown-item {
  color: var(--text-primary) !important;
}

.nav-dropdown-item:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.nav-section-header {
  color: var(--text-secondary) !important;
  background-color: var(--bg-secondary) !important;
}

.nav-divider {
  background-color: var(--border-color) !important;
  border-color: var(--border-color) !important;
}

/* ==================== DARK MODE COMPONENT OVERRIDES ==================== */

/* Dashboard Cards - Dark Mode */
[data-theme="dark"] .dashboard-card {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 3px var(--card-shadow);
}

[data-theme="dark"] .dashboard-card:hover {
  box-shadow: 0 4px 6px var(--card-shadow-hover);
}

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

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

/* Quick Action Buttons - Dark Mode */
[data-theme="dark"] .quick-action-btn {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  box-shadow: 0 2px 4px var(--card-shadow);
}

[data-theme="dark"] .quick-action-btn:hover {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
}

/* Committee & Member Cards - Dark Mode */
[data-theme="dark"] .committee-card,
[data-theme="dark"] .member-card {
  background: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .committee-card:hover,
[data-theme="dark"] .member-card:hover {
  box-shadow: 0 10px 15px -3px var(--card-shadow-hover);
}

/* Bootstrap Overrides - Dark Mode */
[data-theme="dark"] .bg-white {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

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

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

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

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

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

[data-theme="dark"] .badge-primary {
  background-color: #1e40af !important;
}

[data-theme="dark"] .badge-success {
  background-color: #166534 !important;
}

[data-theme="dark"] .badge-danger {
  background-color: #991b1b !important;
}

[data-theme="dark"] .badge-warning {
  background-color: #92400e !important;
  color: #fde047 !important;
}

[data-theme="dark"] .badge-info {
  background-color: #1e40af !important;
}

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

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

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

/* Tooltips & Popovers - Dark Mode */
[data-theme="dark"] .tooltip .tooltip-inner {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

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

[data-theme="dark"] .popover-body {
  color: var(--text-primary);
}

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

/* Accordion - Dark Mode */
[data-theme="dark"] .accordion-item {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

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

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

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

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

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

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

[data-theme="dark"] .breadcrumb-item a {
  color: var(--link-color);
}

/* Navbar Brand - Dark Mode */
[data-theme="dark"] .navbar-brand {
  color: var(--nav-text) !important;
}

/* Text Selection - Dark Mode */
[data-theme="dark"] ::selection {
  background-color: #3b82f6;
  color: #ffffff;
}

[data-theme="dark"] ::-moz-selection {
  background-color: #3b82f6;
  color: #ffffff;
}

/* Loading Spinner - Dark Mode */
[data-theme="dark"] .loading-spinner {
  border-color: var(--border-color);
  border-top-color: var(--btn-primary-bg);
}

[data-theme="dark"] .spinner-border {
  border-color: var(--border-color);
  border-right-color: transparent;
}

/* Toast Messages - Dark Mode */
[data-theme="dark"] .toast {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

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

/* Focus Indicators - Enhanced for Dark Mode */
[data-theme="dark"] *:focus-visible {
  outline-color: #58a6ff;
  outline-offset: 2px;
}

/* Placeholder Text - Dark Mode */
[data-theme="dark"] ::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

[data-theme="dark"] :-ms-input-placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] ::-ms-input-placeholder {
  color: var(--text-muted);
}

/* ==================== TAILWIND TEXT COLOR OVERRIDES FOR DARK MODE ==================== */

/* Tailwind gray text classes - need proper contrast in dark mode */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 {
  color: var(--text-secondary) !important;
}

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

/* Tailwind blue text classes for info boxes */
[data-theme="dark"] .text-blue-900,
[data-theme="dark"] .text-blue-800 {
  color: #93c5fd !important; /* Light blue for readability */
}

/* Tailwind background overrides for dark mode */
[data-theme="dark"] .bg-white {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-blue-50 {
  background-color: #1e3a5f !important;
}

[data-theme="dark"] .border-blue-200 {
  border-color: #1e40af !important;
}

/* ==================== DARK MODE HOVER STATE FIXES ==================== */
/* Prevent blinding white hover backgrounds in dark mode */

[data-theme="dark"] .hover\:bg-white:hover,
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover {
  background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] tr:hover,
[data-theme="dark"] .log-row:hover,
[data-theme="dark"] .hover-row:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Card and list item hovers */
[data-theme="dark"] .card:hover,
[data-theme="dark"] .list-item:hover,
[data-theme="dark"] a:hover .bg-white,
[data-theme="dark"] .clickable:hover {
  background-color: var(--bg-secondary) !important;
}

/* ==================== DARK MODE TEXT CONTRAST FIXES ==================== */
/* Dashboard titles and other hardcoded dark text */

[data-theme="dark"] .document-title,
[data-theme="dark"] .meeting-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .item-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .meeting-type,
[data-theme="dark"] .document-type,
[data-theme="dark"] .card-subtitle {
  color: var(--text-secondary) !important;
}

/* Fix any remaining hardcoded dark colors */
[data-theme="dark"] [style*="color: #1f2937"],
[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#1f2937"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color:#374151"] {
  color: var(--text-primary) !important;
}

/* Fix hardcoded gray text colors */
[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color:#6b7280"] {
  color: var(--text-secondary) !important;
}

/* Smooth transitions for theme changes */
* {
  transition-property: background-color, border-color, color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* Prevent transition on page load */
body.no-transition * {
  transition: none !important;
}