/* ============================================
   GitHub-Inspired Dark Mode Theme
   High contrast, better readability
   ============================================ */

:root {
  /* Light mode colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f6f8fa;
  --color-bg-tertiary: #f3f4f6;
  --color-text-primary: #1f2937;
  --color-text-secondary: #57606a;
  --color-text-tertiary: #6e7781;
  --color-border-primary: #d0d7de;
  --color-border-secondary: #d1d5db;
  --color-input-bg: #ffffff;
  --color-input-border: #d0d7de;
  --color-input-focus: #0969da;
  --color-shadow: rgba(31, 35, 40, 0.12);
  --color-shadow-darker: rgba(31, 35, 40, 0.2);
  --color-header-bg: #24292f;
  --color-header-text: #ffffff;
}

/* ============================================
   Dark Mode Variables (GitHub-inspired)
   ============================================ */
.dark-mode {
  /* Base backgrounds - More contrast like GitHub */
  --color-bg-primary: #0d1117;        /* Main content background */
  --color-bg-secondary: #010409;      /* Page background */
  --color-bg-tertiary: #161b22;       /* Elevated elements */
  --color-bg-hover: #1c2128;          /* Hover state */
  
  /* Text colors - Better readability */
  --color-text-primary: #e6edf3;      /* Primary text - high contrast */
  --color-text-secondary: #8b949e;    /* Secondary text */
  --color-text-tertiary: #6e7681;     /* Tertiary text */
  --color-text-muted: #57606a;        /* Muted text */
  
  /* Borders - Subtle but visible */
  --color-border-primary: #30363d;    /* Default border */
  --color-border-secondary: #21262d;  /* Secondary border */
  --color-border-subtle: #30363d;     /* Subtle border */
  
  /* Form elements */
  --color-input-bg: #0d1117;
  --color-input-border: #30363d;
  --color-input-focus: #58a6ff;
  
  /* Shadows - More pronounced */
  --color-shadow: rgba(1, 4, 9, 0.8);
  --color-shadow-darker: rgba(1, 4, 9, 0.9);
  
  /* Header/Navigation */
  --color-header-bg: #010409;
  --color-header-text: #e6edf3;
  
  /* Status colors - GitHub-inspired */
  --color-success-bg: #033a16;
  --color-success-text: #3fb950;
  --color-success-border: #1a7f37;
  
  --color-error-bg: #490202;
  --color-error-text: #f85149;
  --color-error-border: #da3633;
  
  --color-warning-bg: #341a00;
  --color-warning-text: #d29922;
  --color-warning-border: #9e6a03;
  
  --color-info-bg: #0c2d6b;
  --color-info-text: #58a6ff;
  --color-info-border: #1f6feb;
  
  /* Accent colors - Brighter for dark mode */
  --color-blue-accent: #58a6ff;
  --color-green-accent: #3fb950;
  --color-purple-accent: #bc8cff;
  --color-orange-accent: #f0883e;
  --color-red-accent: #f85149;
  --color-yellow-accent: #d29922;
  
  /* Card backgrounds */
  --color-card-bg: #0d1117;
  --color-card-section: #161b22;
  --color-card-elevated: #21262d;
}

/* ============================================
   Base Styles
   ============================================ */
body {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   Background Classes
   ============================================ */
.dark-mode .bg-white {
  background-color: var(--color-bg-primary) !important;
}

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

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

.dark-mode .bg-gray-800 {
  background-color: var(--color-header-bg) !important;
}

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

/* ============================================
   Text Colors
   ============================================ */
.dark-mode .text-gray-500 {
  color: var(--color-text-secondary) !important;
}

.dark-mode .text-gray-600,
.dark-mode .text-gray-700 {
  color: var(--color-text-secondary) !important;
}

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

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

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

/* ============================================
   Borders
   ============================================ */
.dark-mode .border,
.dark-mode .border-t,
.dark-mode .border-b,
.dark-mode .border-l,
.dark-mode .border-r {
  border-color: var(--color-border-primary) !important;
}

.dark-mode .border-gray-200 {
  border-color: var(--color-border-primary) !important;
}

.dark-mode .border-gray-300 {
  border-color: var(--color-border-subtle) !important;
}

.dark-mode .border-gray-600,
.dark-mode .border-gray-700 {
  border-color: var(--color-border-primary) !important;
}

.dark-mode .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-border-primary) !important;
}

.dark-mode .divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-border-primary) !important;
}

/* ============================================
   Shadows
   ============================================ */
.dark-mode .shadow {
  box-shadow: 0 1px 3px 0 var(--color-shadow), 0 1px 2px -1px var(--color-shadow) !important;
}

.dark-mode .shadow-sm {
  box-shadow: 0 1px 2px 0 var(--color-shadow) !important;
}

.dark-mode .shadow-md {
  box-shadow: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -2px var(--color-shadow) !important;
}

.dark-mode .shadow-lg {
  box-shadow: 0 10px 15px -3px var(--color-shadow), 0 4px 6px -4px var(--color-shadow) !important;
}

/* ============================================
   Form Elements
   ============================================ */
.dark-mode input[type="text"], 
.dark-mode input[type="email"], 
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="date"],
.dark-mode input[type="datetime-local"],
.dark-mode input[type="url"],
.dark-mode select,
.dark-mode textarea {
  background-color: var(--color-input-bg) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-input-border) !important;
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
  border-color: var(--color-input-focus) !important;
  outline-color: var(--color-input-focus) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--color-text-muted) !important;
}

/* ============================================
   Tables
   ============================================ */
.dark-mode table thead {
  background-color: var(--color-card-section) !important;
}

.dark-mode thead.bg-gray-50 {
  background-color: var(--color-card-section) !important;
}

.dark-mode tbody.bg-white {
  background-color: var(--color-bg-primary) !important;
}

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

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

/* ============================================
   Stat Cards (Dashboard)
   ============================================ */
.dark-mode .bg-blue-50 {
  background-color: rgba(88, 166, 255, 0.1) !important;
}

.dark-mode .bg-green-50 {
  background-color: rgba(63, 185, 80, 0.1) !important;
}

.dark-mode .bg-purple-50 {
  background-color: rgba(188, 140, 255, 0.1) !important;
}

.dark-mode .bg-orange-50 {
  background-color: rgba(240, 136, 62, 0.1) !important;
}

.dark-mode .bg-yellow-50 {
  background-color: rgba(210, 153, 34, 0.1) !important;
}

.dark-mode .bg-red-50 {
  background-color: rgba(248, 81, 73, 0.1) !important;
}

/* Stat card text colors */
.dark-mode .text-blue-500,
.dark-mode .text-blue-300 {
  color: var(--color-blue-accent) !important;
}

.dark-mode .text-green-500,
.dark-mode .text-green-400 {
  color: var(--color-green-accent) !important;
}

.dark-mode .text-purple-500,
.dark-mode .text-purple-300 {
  color: var(--color-purple-accent) !important;
}

.dark-mode .text-orange-500 {
  color: var(--color-orange-accent) !important;
}

.dark-mode .text-yellow-500,
.dark-mode .text-yellow-600 {
  color: var(--color-yellow-accent) !important;
}

.dark-mode .text-red-500,
.dark-mode .text-red-600 {
  color: var(--color-red-accent) !important;
}

/* ============================================
   Alerts
   ============================================ */
.dark-mode .alert.alert-success {
  background-color: var(--color-success-bg) !important;
  color: var(--color-success-text) !important;
  border: 1px solid var(--color-success-border);
}

.dark-mode .alert.alert-danger {
  background-color: var(--color-error-bg) !important;
  color: var(--color-error-text) !important;
  border: 1px solid var(--color-error-border);
}

.dark-mode .alert.alert-warning {
  background-color: var(--color-warning-bg) !important;
  color: var(--color-warning-text) !important;
  border: 1px solid var(--color-warning-border);
}

.dark-mode .alert.alert-info {
  background-color: var(--color-info-bg) !important;
  color: var(--color-info-text) !important;
  border: 1px solid var(--color-info-border);
}

/* ============================================
   Buttons & Links
   ============================================ */
.dark-mode a.bg-white:hover {
  background-color: var(--color-bg-hover) !important;
}

.dark-mode .text-indigo-600 {
  color: var(--color-blue-accent) !important;
}

.dark-mode .text-indigo-800 {
  color: #79c0ff !important;
}

/* Button hover states */
.dark-mode button:hover,
.dark-mode a:hover {
  filter: brightness(1.1);
}

/* ============================================
   Badges & Status Indicators
   ============================================ */
.dark-mode .bg-green-100 {
  background-color: rgba(63, 185, 80, 0.15) !important;
}

.dark-mode .text-green-800 {
  color: var(--color-green-accent) !important;
}

.dark-mode .bg-blue-100 {
  background-color: rgba(88, 166, 255, 0.15) !important;
}

.dark-mode .text-blue-800 {
  color: var(--color-blue-accent) !important;
}

.dark-mode .bg-red-100 {
  background-color: rgba(248, 81, 73, 0.15) !important;
}

.dark-mode .text-red-800 {
  color: var(--color-red-accent) !important;
}

.dark-mode .bg-yellow-100 {
  background-color: rgba(210, 153, 34, 0.15) !important;
}

.dark-mode .text-yellow-800 {
  color: var(--color-yellow-accent) !important;
}

.dark-mode .bg-indigo-50 {
  background-color: rgba(88, 166, 255, 0.15) !important;
}

.dark-mode .bg-indigo-100 {
  background-color: rgba(88, 166, 255, 0.2) !important;
}

.dark-mode .text-indigo-800 {
  color: #79c0ff !important;
}

.dark-mode .border-indigo-500 {
  border-color: var(--color-blue-accent) !important;
}

/* ============================================
   Special Components
   ============================================ */

/* Code/Pre blocks */
.dark-mode pre,
.dark-mode code {
  background-color: var(--color-card-section) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-primary) !important;
}

/* Dropdown menus */
.dark-mode .bg-gray-700 {
  background-color: var(--color-bg-tertiary) !important;
}

.dark-mode .bg-gray-600 {
  background-color: var(--color-bg-hover) !important;
}

/* User dropdown */
.dark-mode #userDropdown {
  background-color: var(--color-card-elevated) !important;
  border: 1px solid var(--color-border-primary);
  box-shadow: 0 10px 20px var(--color-shadow-darker) !important;
}

/* ============================================
   Navigation Hover States
   ============================================ */
.dark-mode nav a:hover {
  background-color: var(--color-bg-hover) !important;
}

/* ============================================
   Dark Mode Toggle Switch
   ============================================ */
.dark-mode-toggle {
  position: relative;
  width: 52px;
  height: 26px;
  margin-right: 10px;
}

.dark-mode-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4b5563;
  transition: .3s;
  border-radius: 26px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.dark-mode-toggle input:checked + .toggle-slider {
  background-color: #58a6ff;
}

.dark-mode-toggle input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.dark-mode-icon {
  margin-right: 5px;
}

/* ============================================
   Enhanced Contrast for Better Readability
   ============================================ */

/* Table text */
.dark-mode table td {
  color: var(--color-text-primary) !important;
}

.dark-mode table th {
  color: var(--color-text-secondary) !important;
}

/* Card headings */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4 {
  color: var(--color-text-primary) !important;
}

/* Links */
.dark-mode a {
  color: var(--color-blue-accent);
}

.dark-mode a:hover {
  color: #79c0ff;
}

/* ============================================
   Specific Component Fixes
   ============================================ */

/* Search highlighting */
.dark-mode mark {
  background-color: rgba(210, 153, 34, 0.3) !important;
  color: var(--color-yellow-accent) !important;
}

/* Selected items container */
.dark-mode #selected_items_container {
  background-color: var(--color-card-section) !important;
}

/* Available items container */
.dark-mode #available_items_container {
  background-color: var(--color-bg-primary) !important;
}

/* Item cards */
.dark-mode .item-card {
  background-color: var(--color-bg-primary) !important;
  border-color: var(--color-border-primary) !important;
}

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

.dark-mode .item-card.bg-indigo-50 {
  background-color: rgba(88, 166, 255, 0.15) !important;
  border-color: var(--color-blue-accent) !important;
}

/* Loading states */
.dark-mode .text-gray-400 {
  color: var(--color-text-tertiary) !important;
}

/* Disabled states */
.dark-mode button:disabled,
.dark-mode input:disabled,
.dark-mode select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   Charts
   ============================================ */
.dark-mode canvas {
  background-color: var(--color-card-bg) !important;
}

/* ============================================
   Improved Contrast for Buttons
   ============================================ */
.dark-mode .bg-indigo-600 {
  background-color: #1f6feb !important;
}

.dark-mode .bg-indigo-600:hover {
  background-color: #58a6ff !important;
}

.dark-mode .bg-green-600 {
  background-color: #238636 !important;
}

.dark-mode .bg-green-600:hover {
  background-color: #2ea043 !important;
}

.dark-mode .bg-red-600 {
  background-color: #da3633 !important;
}

.dark-mode .bg-red-600:hover {
  background-color: #f85149 !important;
}

.dark-mode .bg-yellow-600 {
  background-color: #9e6a03 !important;
}

.dark-mode .bg-yellow-600:hover {
  background-color: #d29922 !important;
}

.dark-mode .bg-blue-600 {
  background-color: #0969da !important;
}

.dark-mode .bg-blue-600:hover {
  background-color: #1f6feb !important;
}

.dark-mode .bg-purple-600 {
  background-color: #8250df !important;
}

.dark-mode .bg-purple-600:hover {
  background-color: #a371f7 !important;
}

/* ============================================
   Navbar Dropdown Improvements
   ============================================ */
.dark-mode nav .group:hover > div {
  background-color: var(--color-card-elevated) !important;
  border: 1px solid var(--color-border-primary);
  box-shadow: 0 8px 16px var(--color-shadow-darker) !important;
}

.dark-mode nav .group > div a:hover {
  background-color: var(--color-bg-hover) !important;
}

/* ============================================
   Input Group Elements
   ============================================ */
.dark-mode .border-dashed {
  border-color: var(--color-border-subtle) !important;
}

.dark-mode .border-dashed:hover {
  border-color: var(--color-blue-accent) !important;
}

/* ============================================
   Scrollbars (GitHub-style)
   ============================================ */
.dark-mode ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
  border-radius: 6px;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--color-border-primary);
  border-radius: 6px;
  border: 2px solid var(--color-bg-secondary);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-subtle);
}

/* ============================================
   Select2 Dark Mode Support
   ============================================ */
.dark-mode .select2-container--default .select2-selection--single {
  background-color: var(--color-input-bg) !important;
  border-color: var(--color-input-border) !important;
}

.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text-primary) !important;
}

.dark-mode .select2-dropdown {
  background-color: var(--color-card-elevated) !important;
  border-color: var(--color-border-primary) !important;
}

.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--color-input-bg) !important;
  border-color: var(--color-input-border) !important;
  color: var(--color-text-primary) !important;
}

.dark-mode .select2-container--default .select2-results__option {
  color: var(--color-text-primary) !important;
}

.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-bg-hover) !important;
}

/* ============================================
   Icons - Better visibility
   ============================================ */
.dark-mode .fas,
.dark-mode .far {
  opacity: 0.9;
}

/* ============================================
   Info Boxes & Help Text
   ============================================ */
.dark-mode .bg-blue-50.p-3.rounded-md {
  background-color: rgba(88, 166, 255, 0.1) !important;
  border: 1px solid rgba(88, 166, 255, 0.2);
}

.dark-mode .text-blue-700 {
  color: var(--color-blue-accent) !important;
}

.dark-mode .text-blue-500 {
  color: #58a6ff !important;
}

/* ============================================
   Modal/Dropdown Overlays
   ============================================ */
.dark-mode .rounded-md.shadow-lg.py-1.z-10 {
  background-color: var(--color-card-elevated) !important;
  border: 1px solid var(--color-border-primary);
}

/* ============================================
   Pagination & Action Buttons
   ============================================ */
.dark-mode .hover\:bg-gray-50:hover {
  background-color: var(--color-bg-hover) !important;
}

.dark-mode .hover\:bg-gray-100:hover {
  background-color: var(--color-bg-hover) !important;
}

/* ============================================
   Improved Contrast for Form Labels
   ============================================ */
.dark-mode label {
  color: var(--color-text-secondary) !important;
  font-weight: 500;
}

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

/* ============================================
   GitHub-style Focus Rings
   ============================================ */
.dark-mode *:focus-visible {
  outline: 2px solid var(--color-blue-accent);
  outline-offset: 2px;
}

/* ============================================
   Transitions for Smooth Experience
   ============================================ */
.dark-mode * {
  transition-property: background-color, border-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

/* Disable transitions for performance on checkboxes/toggles */
.dark-mode input[type="checkbox"],
.dark-mode .toggle-slider,
.dark-mode .toggle-slider:before {
  transition-duration: 0.15s;
}