/* Professional Trucking App Styling */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Reduce overall app size for better fit */
html {
  font-size: 14px; /* Reduced from default 16px */
}

/* Szép és vékony scrollbar a sidebar-hoz */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
  /* Megakadályozza a pull-to-refresh viselkedést tabletos nézetben */
  overscroll-behavior-y: contain;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.3);
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.5);
}

/* Dark mode scrollbar */
.dark .sidebar {
  scrollbar-color: rgba(75, 85, 99, 0.4) transparent;
}

.dark .sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(75, 85, 99, 0.4);
}

.dark .sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(75, 85, 99, 0.6);
}

/* Responsive Design Improvements */
@media (max-width: 768px) {
  .mobile-table {
    font-size: 0.875rem;
  }
  
  .mobile-table th,
  .mobile-table td {
    padding: 0.5rem 0.25rem;
    white-space: nowrap;
  }
  
  .grid {
    gap: 0.75rem;
  }
  
  .card {
    margin-bottom: 1rem;
  }
  
  .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .form-input {
    font-size: 0.875rem;
  }
  
  /* Responsive grid improvements */
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .md\\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .lg\\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .md\\:grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .md\\:grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .md\\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .lg\\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\\:grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Better table responsiveness */
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-table {
  min-width: 100%;
  table-layout: auto;
}

/* Global responsive improvements */
* {
  box-sizing: border-box;
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}

/* Ensure forms don't overflow */
.form-input, .form-select {
  max-width: 100%;
}

/* Better button responsiveness */
.btn {
  white-space: nowrap;
}

/* Reduce button sizes for better fit */
.btn-primary {
  padding: 0.5rem 1rem !important; /* Reduced from default */
  font-size: 0.875rem !important;
}

.btn-secondary {
  padding: 0.5rem 1rem !important; /* Reduced from default */
  font-size: 0.875rem !important;
}

/* Card responsive improvements */
.card {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  .mobile-table {
    font-size: 0.75rem;
  }
  
  .mobile-table th,
  .mobile-table td {
    padding: 0.25rem 0.5rem;
  }
  
  /* Hide less important columns on mobile */
  .mobile-table .hidden-mobile {
    display: none;
  }
  
  /* Alternative: Card-style tables on mobile */
  .mobile-card-table thead {
    display: none;
  }
  
  .mobile-card-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: white;
  }
  
  .dark .mobile-card-table tbody tr {
    border-color: #374151;
    background: #1f2937;
  }
  
  .mobile-card-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
  }
  
  .dark .mobile-card-table tbody td {
    border-bottom-color: #374151;
  }
  
  .mobile-card-table tbody td:last-child {
    border-bottom: none;
  }
  
  .mobile-card-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 1rem;
    color: #6b7280;
    flex-shrink: 0;
  }
  
  .dark .mobile-card-table tbody td::before {
    color: #9ca3af;
  }
}

/* File Upload Enhancement */
.upload-area {
  transition: all 0.3s ease;
}

.upload-area:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.upload-area.file-selected {
  border-color: #10b981 !important;
  background-color: #ecfdf5 !important;
}

.dark .upload-area.file-selected {
  background-color: #064e3b !important;
}

/* Modern Light Theme Color Palette */
:root {
  /* Background Colors - Modern Slate Palette */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --bg-card: #FFFFFF;

  /* Primary Colors - Modern Blue */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  /* Secondary Colors - Soft Yellow */
  --secondary-50: #fefce8;
  --secondary-100: #fef9c3;
  --secondary-200: #fef08a;
  --secondary-300: #fde047;
  --secondary-400: #facc15;
  --secondary-500: #eab308;
  --secondary-600: #ca8a04;
  --secondary-700: #a16207;
  --secondary-800: #854d0e;
  --secondary-900: #713f12;

  /* Accent Colors - Emerald/Teal */
  --accent-50: #f0fdfa;
  --accent-100: #ccfbf1;
  --accent-200: #99f6e4;
  --accent-300: #5eead4;
  --accent-400: #2dd4bf;
  --accent-500: #10b981;
  --accent-600: #0d9488;
  --accent-700: #0f766e;
  --accent-800: #115e59;
  --accent-900: #134e4a;

  /* Text Colors - Modern Slate Contrast */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-quaternary: #94A3B8;
  --text-inverse: #ffffff;

  /* Neutral Grays - Slate Palette */
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-750: #2d3748;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
  
  /* Slate Colors for Modern Look */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* Sidebar Colors - Light Mode */
  --sidebar-bg: #FFFFFF;
  --sidebar-text: #0F172A;
  --sidebar-hover: #F1F5F9;
  --sidebar-active: #3B82F6;

  /* Status Colors - Emerald for Success */
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-300: #6EE7B7;
  --success-400: #34D399;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065F46;
  --success-900: #064E3B;

  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;

  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-200: #fecaca;
  --error-300: #fca5a5;
  --error-400: #f87171;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --error-800: #991b1b;
  --error-900: #7f1d1d;

  --info-50: #f0f9ff;
  --info-100: #e0f2fe;
  --info-200: #bae6fd;
  --info-300: #7dd3fc;
  --info-400: #38bdf8;
  --info-500: #0ea5e9;
  --info-600: #0284c7;
  --info-700: #0369a1;
  --info-800: #075985;
  --info-900: #0c4a6e;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Border Radius */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  /* Light Mode Specific Variables */
  --light-border-color: #E2E8F0;
  --light-input-border: #E2E8F0;
  --light-input-bg: #FFFFFF;
  --light-input-focus-border: #3B82F6;
  --light-input-focus-ring: rgba(59, 130, 246, 0.1);
  --light-table-header-bg: #F1F5F9;
  --light-table-row-alt: #F8FAFC;
  --light-table-hover: #EFF6FF;
  --light-card-border: #E2E8F0;
}

/* Dark mode variables */
.dark {
  /* Background colors for dark mode */
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-tertiary: #374151;
  
  /* Text colors for dark mode */
  --text-primary: #f9fafb;
  --text-secondary: #e5e7eb;
  --text-tertiary: #9ca3af;
  --text-quaternary: #6b7280;
  --text-inverse: #111827;
  
  /* Dark mode sidebar */
  --sidebar-bg: #1f2937;
  --sidebar-text: #ffffff;
  --sidebar-hover: #374151;
  --sidebar-active: #60A5FA;
  
  /* Override body and main content for dark mode */
  body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
  }
  
  .card {
    background-color: var(--bg-primary);
    border-color: var(--gray-700);
  }
  
  .form-input {
    background-color: var(--bg-tertiary);
    border-color: var(--gray-600);
    color: var(--text-primary);
  }
  
  .form-input:focus {
    background-color: var(--bg-primary);
    border-color: var(--primary-500);
  }
  
  /* Dark mode text overrides with high contrast */
  .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #ffffff !important; /* Pure white for maximum visibility in dark mode */
  }
  
  .dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700, .dark .text-gray-600, .dark .text-gray-500 {
    color: #f9fafb !important; /* Light gray for good readability in dark mode */
  }
  
  .dark .text-gray-400, .dark .text-gray-300 {
    color: #e5e7eb !important; /* Lighter gray for better contrast */
  }
  
  .dark .card h1, .dark .card h2, .dark .card h3, .dark .card h4, .dark .card h5, .dark .card h6 {
    color: #ffffff !important; /* Pure white for maximum visibility in dark mode */
  }
  
  .dark .widget h1, .dark .widget h2, .dark .widget h3, .dark .widget h4, .dark .widget h5, .dark .widget h6 {
    color: #ffffff !important; /* Pure white for maximum visibility in dark mode */
  }
  
  /* Fix input and form elements contrast in dark mode */
  .dark input, .dark select, .dark textarea {
    background-color: var(--gray-700) !important;
    border-color: var(--gray-600) !important;
    color: #ffffff !important;
  }
  
  .dark input:focus, .dark select:focus, .dark textarea:focus {
    background-color: var(--gray-600) !important;
    border-color: var(--primary-400) !important;
    color: #ffffff !important;
  }
  
  .dark input::placeholder, .dark textarea::placeholder {
    color: #d1d5db !important;
  }
  
  /* Fix table headers and content in dark mode */
  .dark th, .dark .table-professional th {
    color: #ffffff !important;
    background-color: var(--gray-700) !important;
  }
  
  .dark td, .dark .table-professional td {
    color: #f9fafb !important;
    background-color: var(--gray-800) !important;
  }
  
  /* Fix button text in dark mode */
  .dark button, .dark .btn {
    color: #ffffff !important;
  }
  
  /* Fix label text in dark mode */
  .dark label {
    color: #f9fafb !important;
  }
}

/* Base typography and layout */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  font-weight: 400;
  color: #334155;
  background-color: var(--bg-secondary);
  margin: 0;
  padding: 0;
}

.dark body {
  color: #F9FAFB;
}

/* Standardized Button Styles */
.btn-primary {
  background-color: #3B82F6 !important;
  color: #FFFFFF !important;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: #2563EB !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: #facc15 !important; /* Yellow for secondary actions */
  color: #1f2937 !important;
  border: none !important;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: #eab308 !important;
  color: #1f2937 !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-danger {
  background-color: #EF4444 !important;
  color: #FFFFFF !important;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-danger:hover {
  background-color: #DC2626 !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Additional button variants */
.btn-success {
  background-color: #10B981 !important;
  color: #FFFFFF !important;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-success:hover {
  background-color: #059669 !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-warning {
  background-color: #F59E0B !important;
  color: #FFFFFF !important;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-warning:hover {
  background-color: #D97706 !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Modern Card Styles - Light Mode */
.card {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  border: 1px solid var(--light-card-border);
  transition: all 0.2s ease;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Dark Mode Card */
.dark .card {
  background: #1F2937 !important;
  border-color: #374151 !important;
  color: #F9FAFB !important;
}

.dark .card * {
  color: #F9FAFB !important;
}

.dark .card h1, .dark .card h2, .dark .card h3, 
.dark .card h4, .dark .card h5, .dark .card h6 {
  color: #FFFFFF !important;
}

.dark .card .text-gray-600, .dark .card .text-gray-500, .dark .card .text-gray-400 {
  color: #D1D5DB !important;
}

.dark .card .text-gray-900 {
  color: #FFFFFF !important;
}

/* Reduce card padding for better fit */
.card .p-6 {
  padding: 1rem !important; /* Reduced from 1.5rem */
}

.card .p-4 {
  padding: 0.75rem !important; /* Reduced from 1rem */
}

/* Modern Table Styles - Light Mode */
.table-professional {
  background-color: var(--bg-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--light-border-color);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table-professional thead {
  background-color: var(--light-table-header-bg);
}

.table-professional th {
  color: #0F172A !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  padding: 1rem 0.75rem;
  border-bottom: 2px solid var(--slate-200);
  background-color: var(--light-table-header-bg);
}

.table-professional td {
  color: #1E293B !important;
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--slate-200);
  font-weight: 500;
}

.table-professional td * {
  color: #1E293B !important;
}

.table-professional a {
  color: #2563EB !important;
  font-weight: 600;
}

.table-professional button {
  color: #FFFFFF !important;
}

.table-professional tbody tr {
  background-color: var(--bg-primary);
  transition: all 0.2s ease;
}

.table-professional tbody tr:nth-child(even) {
  background-color: var(--light-table-row-alt);
}

.table-professional tbody tr:hover {
  background-color: var(--light-table-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Clean table variant - Light Mode */
.clean-table {
  background-color: #FFFFFF;
  border-collapse: separate;
  border-spacing: 0;
}

.clean-table tr {
  background-color: #FFFFFF;
}

.clean-table tr:nth-child(even) {
  background-color: #FFFFFF;
}

.clean-table tbody tr {
  background-color: #FFFFFF;
}

.clean-table th {
  color: #0F172A !important;
  font-weight: 700;
  background-color: #F1F5F9;
}

.clean-table td {
  color: #1E293B !important;
}

.clean-table td * {
  color: #1E293B !important;
}

/* Dark Mode Table Styles - COMPLETE OVERRIDE */
.dark .table-professional {
  background-color: #1F2937 !important;
  border-color: #374151 !important;
}

.dark .table-professional thead {
  background-color: #374151 !important;
}

.dark .table-professional th {
  color: #FFFFFF !important;
  background-color: #374151 !important;
  border-bottom-color: #4B5563 !important;
}

.dark .table-professional td {
  color: #F9FAFB !important;
  border-bottom-color: #374151 !important;
  background-color: #1F2937 !important;
}

.dark .table-professional td * {
  color: #F9FAFB !important;
}

.dark .table-professional tbody tr {
  background-color: #1F2937 !important;
}

.dark .table-professional tbody tr td {
  color: #F9FAFB !important;
}

.dark .table-professional tbody tr:nth-child(even) {
  background-color: #1E293B !important;
}

.dark .table-professional tbody tr:nth-child(even) td {
  color: #F9FAFB !important;
}

.dark .table-professional tbody tr:hover {
  background-color: #374151 !important;
}

.dark .table-professional tbody tr:hover td {
  color: #FFFFFF !important;
}

/* Dark mode table links */
.dark .table-professional a {
  color: #60A5FA !important;
}

.dark .table-professional button {
  color: #FFFFFF !important;
}

/* Dark mode clean table - COMPLETE OVERRIDE */
.dark .clean-table {
  background-color: #1F2937 !important;
}

.dark .clean-table tr {
  background-color: #1F2937 !important;
}

.dark .clean-table tr:nth-child(even) {
  background-color: #1F2937 !important;
}

.dark .clean-table tbody tr {
  background-color: #1F2937 !important;
}

.dark .clean-table th {
  color: #FFFFFF !important;
  background-color: #374151 !important;
  border-color: #4B5563 !important;
}

.dark .clean-table td {
  color: #F9FAFB !important;
  background-color: #1F2937 !important;
  border-color: #374151 !important;
}

.dark .clean-table td * {
  color: #F9FAFB !important;
}

.dark .clean-table tbody tr:hover {
  background-color: #374151 !important;
}

.dark .clean-table tbody tr:hover td {
  color: #FFFFFF !important;
}

.dark .clean-table tbody tr:hover td * {
  color: #FFFFFF !important;
}

/* Dark mode inline badges/pills in tables */
.dark table .rounded-full,
.dark table .inline-flex {
  color: inherit !important;
}

.dark table .bg-blue-100.rounded-full,
.dark table .bg-green-100.rounded-full,
.dark table .bg-yellow-100.rounded-full,
.dark table .bg-cyan-100.rounded-full,
.dark table .bg-gray-100.rounded-full {
  color: #F9FAFB !important;
}

/* Modern Form Styles - Light Mode */
.form-input, 
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  border: 1px solid var(--light-input-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  background-color: var(--light-input-bg);
  color: var(--text-primary);
  width: 100%;
}

.form-input:focus, 
input:focus,
select:focus,
textarea:focus {
  border-color: var(--light-input-focus-border);
  box-shadow: 0 0 0 3px var(--light-input-focus-ring);
  outline: none;
  background-color: var(--bg-primary);
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-quaternary);
}

/* Dark Mode Form Styles */
.dark .form-input,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.dark select,
.dark textarea {
  background: var(--gray-800);
  border-color: var(--gray-600);
  color: var(--gray-100);
}

.dark .form-input:focus,
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-900);
}

/* Status Badges */
.badge {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-primary {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}

.badge-success {
  background: #10B981 !important;
  color: #FFFFFF !important;
}

.badge-warning {
  background: #F59E0B !important;
  color: #FFFFFF !important;
}

.badge-error, .badge-danger {
  background: #EF4444 !important;
  color: #FFFFFF !important;
}

.badge-info {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}

/* Dashboard Widget Styles - Light Mode */
.widget {
  background: var(--bg-card);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--light-card-border);
  transition: all 0.3s ease;
}

.widget:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Dark Mode Widget */
.dark .widget {
  background: #1F2937 !important;
  border-color: #374151 !important;
  color: #F9FAFB !important;
}

.dark .widget * {
  color: #F9FAFB !important;
}

.dark .widget h1, .dark .widget h2, .dark .widget h3, 
.dark .widget h4, .dark .widget h5, .dark .widget h6 {
  color: #FFFFFF !important;
}

.dark .widget .text-gray-600, .dark .widget .text-gray-500, .dark .widget .text-gray-400 {
  color: #D1D5DB !important;
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.widget-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0F172A !important;
}

.dark .widget-title {
  color: #F9FAFB !important;
}

.widget-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.widget-icon-primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
}

.widget-icon-secondary {
  background: linear-gradient(135deg, var(--secondary-500), var(--secondary-600));
  color: white;
}

/* Sidebar Navigation - Light Mode */
.nav-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  color: var(--sidebar-text);
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 600;
  margin: 0.25rem 0;
}

.nav-item:hover {
  background-color: var(--sidebar-hover);
  color: var(--sidebar-text);
  transform: translateX(2px);
}

.nav-item.active {
  background-color: var(--sidebar-active);
  color: #FFFFFF !important;
  box-shadow: var(--shadow-sm);
}

/* Dark Mode Sidebar Navigation */
.dark .nav-item {
  color: #ffffff;
}

.dark .nav-item:hover {
  background-color: #374151;
  color: #ffffff;
}

.dark .nav-item.active {
  background-color: #60A5FA;
  color: #ffffff;
}

.nav-item svg {
  margin-right: 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
}

.nav-item.active svg {
  color: #FFFFFF;
}

.dark .nav-item svg {
  color: #ffffff;
}

.dark .nav-item.active svg {
  color: #ffffff;
}

/* Sidebar Styling - Light Mode First */
.sidebar {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  min-height: 100vh;
  padding: 1.5rem 1rem;
  border-right: 1px solid #E2E8F0;
}

/* Dark Mode Sidebar Override */
.dark .sidebar {
  background-color: #1F2937 !important;
  color: #FFFFFF !important;
  border-right-color: #374151;
}

/* Sidebar headings */
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6 {
  color: #0F172A !important;
}

.dark .sidebar h1, .dark .sidebar h2, .dark .sidebar h3, 
.dark .sidebar h4, .dark .sidebar h5, .dark .sidebar h6 {
  color: #FFFFFF !important;
}

/* Sidebar links */
.sidebar a {
  color: #0F172A !important;
}

.dark .sidebar a {
  color: #FFFFFF !important;
}

.sidebar a:hover {
  color: #0F172A !important;
}

.dark .sidebar a:hover {
  color: #FFFFFF !important;
}

/* Light Mode Typography - High Contrast */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
  font-weight: 700;
}

h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: #0F172A !important;
}

h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #0F172A !important;
}

h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0F172A !important;
}

h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1E293B !important;
}

h5 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1E293B !important;
}

h6 {
  font-size: 1rem;
  font-weight: 700;
  color: #334155 !important;
}

/* Text elements use CSS variables for theming */
p {
  color: #475569 !important;
}

span, div {
  color: #475569;
}

label, .form-label {
  color: #0F172A !important;
  font-weight: 600;
}

.text-muted {
  color: #64748B !important;
}

/* Tailwind Text Color Overrides for Light Mode - High Contrast */
.text-gray-900, .text-gray-800, .text-gray-700 {
  color: #0F172A !important;
}

.text-gray-600 {
  color: #334155 !important;
}

.text-gray-500 {
  color: #475569 !important;
}

.text-gray-400 {
  color: #64748B !important;
}

.text-gray-300, .text-gray-200 {
  color: #94A3B8 !important;
}

/* Dark mode text color overrides - MUST override light mode with specificity */
.dark .text-gray-900 {
  color: #F9FAFB !important;
}

.dark .text-gray-800 {
  color: #F3F4F6 !important;
}

.dark .text-gray-700 {
  color: #E5E7EB !important;
}

.dark .text-gray-600 {
  color: #D1D5DB !important;
}

.dark .text-gray-500 {
  color: #D1D5DB !important;
}

.dark .text-gray-400 {
  color: #9CA3AF !important;
}

.dark .text-gray-300 {
  color: #D1D5DB !important;
}

.dark .text-gray-200 {
  color: #E5E7EB !important;
}

/* Widget and card statistics numbers - Light Mode */
.widget .text-3xl, .widget .text-2xl, .widget .text-xl {
  color: #0F172A !important;
  font-weight: 800;
}

.card .text-3xl, .card .text-2xl, .card .text-xl {
  color: #0F172A !important;
  font-weight: 800;
}

/* Dark mode widget/card statistics */
.dark .widget .text-3xl, .dark .widget .text-2xl, .dark .widget .text-xl {
  color: #F9FAFB !important;
}

.dark .card .text-3xl, .dark .card .text-2xl, .dark .card .text-xl {
  color: #F9FAFB !important;
}

/* Text size classes with high contrast */
.text-3xl, .text-2xl, .text-xl, .text-lg {
  color: #0F172A !important;
}

/* Dark mode text size overrides */
.dark .text-3xl, .dark .text-2xl, .dark .text-xl, .dark .text-lg {
  color: #F9FAFB !important;
}

.text-base {
  color: #334155 !important;
}

.text-sm {
  color: #334155 !important;
}

.text-xs {
  color: #475569 !important;
}

/* Dark mode text size overrides */
.dark .text-base {
  color: #E5E7EB !important;
}

.dark .text-sm {
  color: #E5E7EB !important;
}

.dark .text-xs {
  color: #D1D5DB !important;
}

/* White text should stay white */
.text-white {
  color: #FFFFFF !important;
}

.dark .text-white {
  color: #FFFFFF !important;
}

/* Gradient backgrounds - Light Mode */
.from-white {
  --tw-gradient-from: #FFFFFF !important;
  --tw-gradient-to: rgb(255 255 255 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-gray-50 {
  --tw-gradient-to: #F8FAFC !important;
}

.from-gray-50 {
  --tw-gradient-from: #F8FAFC !important;
}

.to-gray-100 {
  --tw-gradient-to: #F1F5F9 !important;
}

.from-green-50 {
  --tw-gradient-from: #ECFDF5 !important;
}

.to-emerald-50 {
  --tw-gradient-to: #ECFDF5 !important;
}

.from-red-50 {
  --tw-gradient-from: #FEF2F2 !important;
}

.to-rose-50 {
  --tw-gradient-to: #FFF1F2 !important;
}

.from-blue-50 {
  --tw-gradient-from: #EFF6FF !important;
}

.to-indigo-50 {
  --tw-gradient-to: #EEF2FF !important;
}

/* Dark mode gradient overrides */
.dark .from-white {
  --tw-gradient-from: #374151 !important;
}

.dark .to-gray-50 {
  --tw-gradient-to: #1F2937 !important;
}

.dark .from-gray-50 {
  --tw-gradient-from: #374151 !important;
}

.dark .to-gray-100 {
  --tw-gradient-to: #1F2937 !important;
}

.dark .from-gray-700 {
  --tw-gradient-from: #374151 !important;
}

.dark .to-gray-800 {
  --tw-gradient-to: #1F2937 !important;
}

.dark .from-gray-800 {
  --tw-gradient-from: #1F2937 !important;
}

.dark .to-gray-900 {
  --tw-gradient-to: #111827 !important;
}

.dark .from-green-50 {
  --tw-gradient-from: #065F46 !important;
}

.dark .from-green-900 {
  --tw-gradient-from: #065F46 !important;
}

.dark .to-emerald-50 {
  --tw-gradient-to: #064E3B !important;
}

.dark .to-emerald-900 {
  --tw-gradient-to: #064E3B !important;
}

.dark .from-red-50 {
  --tw-gradient-from: #991B1B !important;
}

.dark .from-red-900 {
  --tw-gradient-from: #991B1B !important;
}

.dark .to-rose-50 {
  --tw-gradient-to: #9F1239 !important;
}

.dark .to-rose-900 {
  --tw-gradient-to: #9F1239 !important;
}

.dark .from-blue-50 {
  --tw-gradient-from: #1E3A8A !important;
}

.dark .from-blue-900 {
  --tw-gradient-from: #1E3A8A !important;
}

.dark .to-indigo-50 {
  --tw-gradient-to: #312E81 !important;
}

.dark .to-indigo-900 {
  --tw-gradient-to: #312E81 !important;
}

/* Additional gradient colors for configurator */
.from-yellow-100 {
  --tw-gradient-from: #FEF3C7 !important;
}

.to-amber-100 {
  --tw-gradient-to: #FDE68A !important;
}

.from-indigo-100 {
  --tw-gradient-from: #E0E7FF !important;
}

.to-purple-100 {
  --tw-gradient-to: #F3E8FF !important;
}

.from-cyan-100 {
  --tw-gradient-from: #CFFAFE !important;
}

.to-blue-100 {
  --tw-gradient-to: #DBEAFE !important;
}

/* Dark mode additional gradients */
.dark .from-yellow-100 {
  --tw-gradient-from: #854D0E !important;
}

.dark .to-amber-100 {
  --tw-gradient-to: #92400E !important;
}

.dark .from-yellow-900 {
  --tw-gradient-from: #713F12 !important;
}

.dark .to-amber-900 {
  --tw-gradient-to: #78350F !important;
}

.dark .from-indigo-100 {
  --tw-gradient-from: #312E81 !important;
}

.dark .to-purple-100 {
  --tw-gradient-to: #581C87 !important;
}

.dark .from-indigo-900 {
  --tw-gradient-from: #1E3A8A !important;
}

.dark .to-purple-900 {
  --tw-gradient-to: #581C87 !important;
}

.dark .from-cyan-100 {
  --tw-gradient-from: #164E63 !important;
}

.dark .to-blue-100 {
  --tw-gradient-to: #1E3A8A !important;
}

.dark .from-cyan-900 {
  --tw-gradient-from: #164E63 !important;
}

.dark .to-blue-900 {
  --tw-gradient-to: #1E3A8A !important;
}

/* Border colors - Light mode */
.border-gray-200 {
  border-color: #E2E8F0 !important;
}

.border-gray-300 {
  border-color: #CBD5E1 !important;
}

/* Dark mode border colors */
.dark .border-gray-200 {
  border-color: #374151 !important;
}

.dark .border-gray-300 {
  border-color: #4B5563 !important;
}

.dark .border-gray-600 {
  border-color: #4B5563 !important;
}

.dark .border-gray-700 {
  border-color: #374151 !important;
}

/* Font weight classes keep colors */
.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* Ensure button text is always visible */
button {
  font-weight: 600;
}

button.btn-primary, button.btn-success, button.btn-warning, button.btn-danger {
  color: #FFFFFF !important;
}

button.btn-secondary {
  color: #1F2937 !important;
}

/* Ensure select dropdowns have visible options */
select option {
  background-color: #FFFFFF;
  color: #0F172A;
}

.dark select option {
  background-color: #374151;
  color: #F9FAFB;
}

/* Main content area background */
main {
  background-color: var(--bg-secondary);
  color: #334155;
}

.dark main {
  background-color: #1F2937;
  color: #F9FAFB;
}

/* Ensure whitespace doesn't break text visibility */
.whitespace-nowrap {
  color: inherit;
}

/* Truncate text remains visible */
.truncate {
  color: inherit;
}

/* Flex and grid containers */
.flex, .grid {
  color: inherit;
}

/* Divs with specific backgrounds need contrasting text */
.bg-white {
  color: #334155 !important;
}

.bg-gray-50 {
  background-color: #F8FAFC !important;
  color: #334155 !important;
}

.bg-gray-100 {
  background-color: #F1F5F9 !important;
  color: #334155 !important;
}

.bg-gray-700 {
  background-color: #334155 !important;
  color: #FFFFFF !important;
}

/* Dark mode backgrounds must override */
.dark .bg-white {
  background-color: #1F2937 !important;
  color: #F9FAFB !important;
}

.dark .bg-gray-50 {
  background-color: #374151 !important;
  color: #F9FAFB !important;
}

.dark .bg-gray-100 {
  background-color: #374151 !important;
  color: #F9FAFB !important;
}

.dark .bg-gray-700 {
  background-color: #374151 !important;
  color: #F9FAFB !important;
}

.dark .bg-gray-800 {
  background-color: #1F2937 !important;
  color: #F9FAFB !important;
}

.dark .bg-gray-900 {
  background-color: #111827 !important;
  color: #F9FAFB !important;
}

/* Dark mode text on dark backgrounds - all children with highest specificity */
.dark .bg-gray-50 *,
.dark .bg-gray-100 *,
.dark .bg-gray-700 *,
.dark .bg-gray-800 * {
  color: #F9FAFB !important;
}

.dark .bg-blue-50 *,
.dark .bg-blue-100 *,
.dark .bg-blue-900\/20 * {
  color: #E5E7EB !important;
}

.dark .bg-green-50 *,
.dark .bg-green-100 *,
.dark .bg-green-900\/20 * {
  color: #E5E7EB !important;
}

.dark .bg-orange-50 *,
.dark .bg-orange-100 *,
.dark .bg-orange-900\/20 * {
  color: #E5E7EB !important;
}

.dark .bg-yellow-50 *,
.dark .bg-yellow-100 *,
.dark .bg-yellow-900\/20 * {
  color: #E5E7EB !important;
}

.dark .bg-purple-50 *,
.dark .bg-purple-100 *,
.dark .bg-purple-900\/20 * {
  color: #E5E7EB !important;
}

.dark .bg-indigo-50 *,
.dark .bg-indigo-100 *,
.dark .bg-indigo-900\/20 * {
  color: #E5E7EB !important;
}

/* Dark mode colored badges in tables and status buttons - white text */
.dark .bg-blue-200 { background-color: #1E40AF !important; }
.dark .bg-green-200 { background-color: #047857 !important; }
.dark .bg-yellow-200 { background-color: #A16207 !important; }
.dark .bg-red-200 { background-color: #991B1B !important; }

.dark .bg-blue-200 * { color: #BFDBFE !important; }
.dark .bg-green-200 * { color: #A7F3D0 !important; }
.dark .bg-yellow-200 * { color: #FDE68A !important; }
.dark .bg-red-200 * { color: #FECACA !important; }

/* Status buttons active states - Light Mode */
.bg-yellow-500 { background-color: #EAB308 !important; color: #FFFFFF !important; }
.bg-blue-500 { background-color: #3B82F6 !important; color: #FFFFFF !important; }
.bg-green-500 { background-color: #10B981 !important; color: #FFFFFF !important; }
.bg-red-500 { background-color: #EF4444 !important; color: #FFFFFF !important; }

/* Status buttons - not selected state - Light Mode */
.bg-gray-200 * {
  color: #334155 !important;
}

.bg-gray-300 * {
  color: #1E293B !important;
}

/* Dark mode status buttons - not selected state */
.dark .bg-gray-200 {
  background-color: #4B5563 !important;
  color: #D1D5DB !important;
}

.dark .bg-gray-300 {
  background-color: #4B5563 !important;
  color: #E5E7EB !important;
}

.dark .bg-gray-200 *,
.dark .bg-gray-300 * {
  color: #E5E7EB !important;
}

/* Ring colors for status buttons - Light Mode */
.ring-yellow-200 { --tw-ring-color: #FDE68A !important; }
.ring-blue-200 { --tw-ring-color: #BFDBFE !important; }
.ring-green-200 { --tw-ring-color: #A7F3D0 !important; }
.ring-red-200 { --tw-ring-color: #FECACA !important; }

/* Dark mode ring colors */
.dark .ring-yellow-900 { --tw-ring-color: #713F12 !important; }
.dark .ring-blue-900 { --tw-ring-color: #1E3A8A !important; }
.dark .ring-green-900 { --tw-ring-color: #14532D !important; }
.dark .ring-red-900 { --tw-ring-color: #7F1D1D !important; }

/* Ensure font-medium and font-semibold classes don't override dark mode colors */
.dark .font-medium,
.dark .font-semibold {
  color: inherit !important;
}

.dark .bg-blue-50 .font-medium,
.dark .bg-green-50 .font-medium,
.dark .bg-orange-50 .font-medium {
  color: #FFFFFF !important;
}

/* Hover states - Light mode */
.hover\:bg-gray-50:hover {
  background-color: #F8FAFC !important;
}

/* Light mode hover states */
.hover\:bg-gray-100:hover {
  background-color: #F1F5F9 !important;
}

.hover\:bg-gray-200:hover {
  background-color: #E2E8F0 !important;
}

.hover\:bg-gray-400:hover {
  background-color: #94A3B8 !important;
}

/* Dark mode hover states - MUST override */
.dark .hover\:bg-gray-50:hover {
  background-color: #374151 !important;
}

.dark .hover\:bg-gray-100:hover {
  background-color: #4B5563 !important;
}

.dark .hover\:bg-gray-200:hover {
  background-color: #4B5563 !important;
}

.dark .hover\:bg-gray-400:hover {
  background-color: #4B5563 !important;
}

.dark .hover\:bg-gray-600:hover {
  background-color: #374151 !important;
}

.dark .hover\:bg-gray-700:hover {
  background-color: #374151 !important;
}

/* Hover text color states - Light Mode */
.hover\:text-gray-800:hover {
  color: #1E293B !important;
}

.hover\:text-gray-900:hover {
  color: #0F172A !important;
}

.hover\:bg-blue-700:hover {
  background-color: #1D4ED8 !important;
}

/* Dark mode hover text colors */
.dark .hover\:text-gray-800:hover {
  color: #F3F4F6 !important;
}

.dark .hover\:text-gray-900:hover {
  color: #FFFFFF !important;
}

.dark .hover\:text-white:hover {
  color: #FFFFFF !important;
}

.dark .hover\:text-green-300:hover {
  color: #6EE7B7 !important;
}

.dark .hover\:bg-blue-700:hover {
  background-color: #1E40AF !important;
}

/* Upload area styling */
.upload-area {
  color: #475569 !important;
  border-color: #CBD5E1 !important;
}

.upload-area:hover {
  border-color: #3B82F6 !important;
}

.dark .upload-area {
  color: #E5E7EB !important;
  border-color: #4B5563 !important;
}

.dark .upload-area:hover {
  border-color: #60A5FA !important;
}

.upload-area svg {
  color: #64748B !important;
}

.dark .upload-area svg {
  color: #9CA3AF !important;
}

/* Specific color classes for status indicators */
.text-blue-400 { color: #60A5FA !important; }
.text-blue-500 { color: #3B82F6 !important; }
.text-blue-600 { color: #2563EB !important; }
.text-blue-700 { color: #1D4ED8 !important; }
.text-blue-800 { color: #1E40AF !important; }
.text-blue-900 { color: #1E3A8A !important; }
.text-green-400 { color: #34D399 !important; }
.text-green-600 { color: #059669 !important; }
.text-purple-600 { color: #7C3AED !important; }
.text-red-600 { color: #DC2626 !important; }
.text-yellow-600 { color: #D97706 !important; }
.text-orange-600 { color: #EA580C !important; }

/* Dark mode color adjustments for lighter colors */
.dark .text-blue-400 { color: #93C5FD !important; }
.dark .text-blue-500 { color: #60A5FA !important; }
.dark .text-blue-600 { color: #60A5FA !important; }
.dark .text-blue-700 { color: #60A5FA !important; }
.dark .text-green-400 { color: #6EE7B7 !important; }
.dark .text-green-500 { color: #34D399 !important; }
.dark .text-green-600 { color: #34D399 !important; }
.dark .text-red-500 { color: #F87171 !important; }
.dark .text-red-600 { color: #EF4444 !important; }
.dark .text-yellow-500 { color: #FDE047 !important; }
.dark .text-yellow-600 { color: #FBBF24 !important; }
.dark .text-orange-600 { color: #FDBA74 !important; }
.dark .text-purple-600 { color: #C084FC !important; }

/* Ensure green-100 stays light in light mode, but visible text in dark */
.text-green-100 { color: #D1FAE5 !important; }
.dark .text-green-100 { color: #D1FAE5 !important; }

/* Background color classes for widgets/cards - Light Mode */
.bg-blue-50 { background-color: #EFF6FF !important; }
.bg-blue-100 { background-color: #DBEAFE !important; }
.bg-blue-200 { background-color: #BFDBFE !important; }
.bg-green-50 { background-color: #ECFDF5 !important; }
.bg-green-100 { background-color: #D1FAE5 !important; }
.bg-green-200 { background-color: #A7F3D0 !important; }
.bg-purple-50 { background-color: #FAF5FF !important; }
.bg-purple-100 { background-color: #F3E8FF !important; }
.bg-orange-50 { background-color: #FFF7ED !important; }
.bg-orange-100 { background-color: #FFEDD5 !important; }
.bg-yellow-50 { background-color: #FEFCE8 !important; }
.bg-yellow-100 { background-color: #FEF3C7 !important; }
.bg-yellow-200 { background-color: #FDE68A !important; }
.bg-red-200 { background-color: #FECACA !important; }
.bg-cyan-50 { background-color: #ECFEFF !important; }
.bg-cyan-100 { background-color: #CFFAFE !important; }
.bg-indigo-50 { background-color: #EEF2FF !important; }
.bg-indigo-100 { background-color: #E0E7FF !important; }
.bg-gray-50 { background-color: #F8FAFC !important; }
.bg-gray-100 { background-color: #F1F5F9 !important; }
.bg-gray-200 { 
  background-color: #E2E8F0 !important; 
  color: #334155 !important;
}

.bg-gray-300 { 
  background-color: #CBD5E1 !important; 
  color: #1E293B !important;
}

.bg-gray-200 * {
  color: #334155 !important;
}

.bg-gray-300 * {
  color: #1E293B !important;
}

.bg-white { background-color: #FFFFFF !important; }

/* Dark mode background overrides for badges/pills and status cards */
.dark .bg-blue-50 { background-color: #1E3A8A !important; }
.dark .bg-blue-100 { background-color: #1E3A8A !important; }
.dark .bg-blue-200 { background-color: #1E40AF !important; }
.dark .bg-blue-900 { background-color: #1E3A8A !important; }
.dark .bg-blue-900\/20 { background-color: rgba(30, 58, 138, 0.3) !important; }
.dark .bg-green-50 { background-color: #065F46 !important; }
.dark .bg-green-100 { background-color: #065F46 !important; }
.dark .bg-green-200 { background-color: #047857 !important; }
.dark .bg-green-900 { background-color: #065F46 !important; }
.dark .bg-green-900\/20 { background-color: rgba(6, 95, 70, 0.3) !important; }
.dark .bg-yellow-50 { background-color: #854D0E !important; }
.dark .bg-yellow-100 { background-color: #854D0E !important; }
.dark .bg-yellow-200 { background-color: #A16207 !important; }
.dark .bg-yellow-900 { background-color: #854D0E !important; }
.dark .bg-yellow-900\/20 { background-color: rgba(133, 77, 14, 0.3) !important; }
.dark .bg-red-200 { background-color: #991B1B !important; }
.dark .bg-cyan-50 { background-color: #164E63 !important; }
.dark .bg-cyan-100 { background-color: #164E63 !important; }
.dark .bg-cyan-900 { background-color: #164E63 !important; }
.dark .bg-cyan-900\/20 { background-color: rgba(22, 78, 99, 0.3) !important; }
.dark .bg-orange-50 { background-color: #7C2D12 !important; }
.dark .bg-orange-100 { background-color: #7C2D12 !important; }
.dark .bg-orange-900 { background-color: #7C2D12 !important; }
.dark .bg-orange-900\/20 { background-color: rgba(124, 45, 18, 0.3) !important; }
.dark .bg-purple-50 { background-color: #581C87 !important; }
.dark .bg-purple-100 { background-color: #581C87 !important; }
.dark .bg-purple-900 { background-color: #581C87 !important; }
.dark .bg-purple-900\/20 { background-color: rgba(88, 28, 135, 0.3) !important; }
.dark .bg-indigo-50 { background-color: #312E81 !important; }
.dark .bg-indigo-100 { background-color: #312E81 !important; }
.dark .bg-indigo-900 { background-color: #312E81 !important; }
.dark .bg-indigo-900\/20 { background-color: rgba(49, 46, 129, 0.3) !important; }
.dark .bg-gray-50 { background-color: #374151 !important; }
.dark .bg-gray-100 { background-color: #374151 !important; }
.dark .bg-gray-200 { background-color: #4B5563 !important; }
.dark .bg-gray-300 { background-color: #4B5563 !important; }
.dark .bg-gray-700 { background-color: #374151 !important; }

/* Text colors on light backgrounds - Light Mode */
.text-blue-800 { color: #1E40AF !important; }
.text-green-800 { color: #065F46 !important; }
.text-yellow-800 { color: #92400E !important; }
.text-red-800 { color: #991B1B !important; }
.text-cyan-800 { color: #155E75 !important; }
.text-gray-800 { color: #1E293B !important; }
.text-orange-800 { color: #9A3412 !important; }
.text-indigo-600 { color: #4F46E5 !important; }
.text-indigo-400 { color: #818CF8 !important; }

/* Dark mode text colors on dark backgrounds */
.dark .text-blue-800 { color: #BFDBFE !important; }
.dark .text-blue-200 { color: #BFDBFE !important; }
.dark .text-green-800 { color: #A7F3D0 !important; }
.dark .text-green-200 { color: #A7F3D0 !important; }
.dark .text-yellow-800 { color: #FDE68A !important; }
.dark .text-yellow-200 { color: #FDE68A !important; }
.dark .text-red-800 { color: #FECACA !important; }
.dark .text-red-200 { color: #FECACA !important; }
.dark .text-cyan-800 { color: #A5F3FC !important; }
.dark .text-cyan-200 { color: #A5F3FC !important; }
.dark .text-gray-800 { color: #E5E7EB !important; }
.dark .text-gray-200 { color: #E5E7EB !important; }
.dark .text-orange-800 { color: #FDBA74 !important; }
.dark .text-orange-400 { color: #FDBA74 !important; }
.dark .text-purple-400 { color: #D8B4FE !important; }
.dark .text-indigo-600 { color: #A5B4FC !important; }
.dark .text-indigo-400 { color: #A5B4FC !important; }

/* Ensure all icons on colored backgrounds are visible - Light Mode */
.bg-blue-50 svg, .bg-blue-100 svg { color: #1E40AF !important; }
.bg-green-50 svg, .bg-green-100 svg { color: #065F46 !important; }
.bg-purple-50 svg, .bg-purple-100 svg { color: #6B21A8 !important; }
.bg-orange-50 svg, .bg-orange-100 svg { color: #C2410C !important; }
.bg-yellow-50 svg, .bg-yellow-100 svg { color: #A16207 !important; }
.bg-gray-50 svg, .bg-gray-100 svg { color: #334155 !important; }
.bg-indigo-50 svg, .bg-indigo-100 svg { color: #4338CA !important; }

/* Dark mode icon colors on colored backgrounds */
.dark .bg-blue-50 svg, .dark .bg-blue-100 svg, .dark .bg-blue-900 svg, .dark .bg-blue-900\/20 svg { color: #BFDBFE !important; }
.dark .bg-green-50 svg, .dark .bg-green-100 svg, .dark .bg-green-900 svg, .dark .bg-green-900\/20 svg { color: #A7F3D0 !important; }
.dark .bg-purple-50 svg, .dark .bg-purple-100 svg, .dark .bg-purple-900 svg, .dark .bg-purple-900\/20 svg { color: #E9D5FF !important; }
.dark .bg-orange-50 svg, .dark .bg-orange-100 svg, .dark .bg-orange-900 svg, .dark .bg-orange-900\/20 svg { color: #FDBA74 !important; }
.dark .bg-yellow-50 svg, .dark .bg-yellow-100 svg, .dark .bg-yellow-900 svg, .dark .bg-yellow-900\/20 svg { color: #FDE68A !important; }
.dark .bg-cyan-50 svg, .dark .bg-cyan-100 svg, .dark .bg-cyan-900 svg, .dark .bg-cyan-900\/20 svg { color: #A5F3FC !important; }
.dark .bg-indigo-50 svg, .dark .bg-indigo-100 svg, .dark .bg-indigo-900 svg, .dark .bg-indigo-900\/20 svg { color: #A5B4FC !important; }
.dark .bg-gray-50 svg, .dark .bg-gray-100 svg, .dark .bg-gray-700 svg { color: #E5E7EB !important; }

/* General icon colors */
svg {
  color: currentColor;
}

.text-gray-400 svg {
  color: #64748B !important;
}

.dark .text-gray-400 svg {
  color: #9CA3AF !important;
}

/* Comprehensive dark mode contrast fixes - PRIORITY RULES */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: #FFFFFF !important;
}

.dark p {
  color: #E5E7EB !important;
}

.dark span {
  color: #E5E7EB !important;
}

.dark div {
  color: #E5E7EB !important;
}

.dark label {
  color: #F9FAFB !important;
}

.dark a {
  color: #60A5FA !important;
}

.dark button {
  color: #FFFFFF !important;
}

.dark input, .dark textarea, .dark select {
  background-color: #374151 !important; /* Dark gray background */
  border-color: #4b5563 !important; /* Medium gray border */
  color: #ffffff !important; /* White text */
}

.dark input:focus, .dark textarea:focus, .dark select:focus {
  background-color: #4b5563 !important; /* Slightly lighter on focus */
  border-color: #3b82f6 !important; /* Blue border on focus */
  color: #ffffff !important; /* White text */
}

.dark input::placeholder, .dark textarea::placeholder {
  color: #9ca3af !important; /* Light gray placeholder */
}

/* Fix all Tailwind text color classes in dark mode */
.dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700, 
.dark .text-gray-600, .dark .text-gray-500, .dark .text-gray-400 {
  color: #f9fafb !important; /* Light gray for readability */
}

.dark .text-gray-300, .dark .text-gray-200, .dark .text-gray-100 {
  color: #e5e7eb !important; /* Even lighter gray */
}

/* Fix form elements with specific classes */
.dark .rounded-md.border-gray-300.dark\\:border-gray-600.bg-gray-50.dark\\:bg-gray-700 {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #ffffff !important;
}

/* Fix all input variations */
.dark input[type="text"], .dark input[type="email"], .dark input[type="password"], 
.dark input[type="number"], .dark input[type="date"], .dark input[type="time"],
.dark select, .dark textarea {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #ffffff !important;
}

/* Fix table elements */
.dark table th {
  background-color: #374151 !important;
  color: #ffffff !important;
}

.dark table td {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

/* Fix button elements */
.dark button, .dark .btn {
  color: #ffffff !important;
}

.dark button:not(.bg-blue-600):not(.bg-green-600):not(.bg-red-600):not(.bg-yellow-600) {
  background-color: #374151 !important;
  color: #ffffff !important;
}

/* Link Styling */
a {
  color: #2563EB;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #1D4ED8;
  text-decoration: underline;
}

.dark a {
  color: #60A5FA !important;
}

.dark a:hover {
  color: #93C5FD !important;
}

/* Role-specific badge colors with high contrast */
.badge-admin {
  background-color: #DC2626 !important;
  color: #FFFFFF !important;
  border: 1px solid #B91C1C;
}

.badge-dispatcher {
  background-color: #3B82F6 !important;
  color: #FFFFFF !important;
  border: 1px solid #2563EB;
}

.badge-driver {
  background-color: #10B981 !important;
  color: #FFFFFF !important;
  border: 1px solid #059669;
}

.badge-owner {
  background-color: #8B5CF6 !important;
  color: #FFFFFF !important;
  border: 1px solid #7C3AED;
}

.badge-partner {
  background-color: #F59E0B !important;
  color: #FFFFFF !important;
  border: 1px solid #D97706;
}

/* Status badge colors - removed duplicates, using ones above */

/* Alert Styles - Light Mode High Contrast */
.alert {
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.alert-info {
  background-color: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}

.alert-success {
  background-color: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.alert-warning {
  background-color: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.alert-error {
  background-color: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .btn-primary, .btn-secondary {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    min-height: 48px;
    touch-action: manipulation;
  }
  
  .form-input {
    padding: 1rem;
    font-size: 1rem;
    min-height: 48px;
    touch-action: manipulation;
  }
  
  .card {
    margin: 0.5rem;
    border-radius: 1rem;
  }
  
  .widget {
    padding: 1rem;
    margin: 0.5rem;
  }
  
  .nav-item {
    padding: 1rem;
    min-height: 48px;
    touch-action: manipulation;
  }
  
  .table-professional {
    font-size: 0.875rem;
  }
  
  .table-professional th,
  .table-professional td {
    padding: 0.75rem 0.5rem;
  }
  
  /* Mobile-specific touch targets */
  .touch-target {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Swipe gestures for mobile */
  .swipeable {
    position: relative;
    overflow: hidden;
  }
  
  .swipeable::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .swipeable:hover::after {
    opacity: 1;
  }
  
  /* Mobile navigation improvements */
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--gray-200);
    padding: 0.5rem;
    z-index: 50;
  }
  
  .dark .mobile-nav {
    background: var(--gray-800);
    border-color: var(--gray-700);
  }
  
  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    text-decoration: none;
    color: var(--gray-600);
    font-size: 0.75rem;
    min-height: 60px;
    justify-content: center;
  }
  
  .dark .mobile-nav-item {
    color: var(--gray-400);
  }
  
  .mobile-nav-item.active {
    color: var(--primary-600);
  }
  
  .dark .mobile-nav-item.active {
    color: var(--primary-400);
  }
  
  .mobile-nav-item svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.25rem;
  }
  
  /* Mobile form improvements */
  .mobile-form {
    padding: 1rem;
  }
  
  .mobile-form .form-input {
    margin-bottom: 1rem;
  }
  
  /* Mobile table improvements */
  .mobile-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .mobile-table table {
    min-width: 600px;
  }
  
  /* Mobile card improvements */
  .mobile-card {
    margin: 0.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
  }
  
  /* Mobile widget improvements */
  .mobile-widget {
    margin: 0.5rem;
    padding: 1rem;
  }
  
  /* Mobile button improvements */
  .mobile-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 0.75rem;
    min-height: 56px;
    touch-action: manipulation;
  }
  
  /* Mobile spacing adjustments */
  .mobile-spacing {
    padding: 1rem;
  }
  
  .mobile-spacing-sm {
    padding: 0.75rem;
  }
  
  .mobile-spacing-lg {
    padding: 1.5rem;
  }
  
  /* Mobile text sizing */
  .mobile-text-sm {
    font-size: 0.875rem;
  }
  
  .mobile-text-base {
    font-size: 1rem;
  }
  
  .mobile-text-lg {
    font-size: 1.125rem;
  }
  
  .mobile-text-xl {
    font-size: 1.25rem;
  }
  
  /* Mobile grid adjustments */
  .mobile-grid-1 {
    grid-template-columns: 1fr;
  }
  
  .mobile-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  
  /* Mobile modal improvements */
  .mobile-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  
  .mobile-modal-content {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .dark .mobile-modal-content {
    background: var(--gray-800);
  }
}

/* Loading States */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Alert Styles */
.alert {
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  border-left: 4px solid;
  margin-bottom: 1rem;
  font-weight: 500;
}

.alert-success {
  background: #f0fdf4;
  border-color: var(--success-500);
  color: #166534;
}

.alert-warning {
  background: #fffbeb;
  border-color: var(--warning-500);
  color: #92400e;
}

.alert-error {
  background: #fef2f2;
  border-color: var(--error-500);
  color: #991b1b;
}

.alert-info {
  background: #eff6ff;
  border-color: var(--info-500);
  color: #1e40af;
}

.dark .alert-success {
  background: #065F46 !important;
  color: #A7F3D0 !important;
  border-color: #047857 !important;
}

.dark .alert-warning {
  background: #92400E !important;
  color: #FDE68A !important;
  border-color: #B45309 !important;
}

.dark .alert-error {
  background: #991B1B !important;
  color: #FECACA !important;
  border-color: #B91C1C !important;
}

.dark .alert-info {
  background: #1E40AF !important;
  color: #BFDBFE !important;
  border-color: #1D4ED8 !important;
}

/* Search and Filter Components */
.search-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  border: 2px solid var(--gray-300);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  background: white;
}

.search-input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
  outline: none;
}

.dark .search-input {
  background: var(--gray-800);
  border-color: var(--gray-600);
  color: var(--gray-100);
}

.dark .search-input:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-900);
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-400);
  pointer-events: none;
}

.dark .search-icon {
  color: var(--gray-500);
}

.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  align-items: center;
}

.filter-select {
  padding: 0.5rem 1rem;
  border: 2px solid var(--gray-300);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: white;
  color: var(--gray-900);
  transition: all 0.2s ease;
  min-width: 120px;
}

.filter-select:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
  outline: none;
}

.dark .filter-select {
  background: var(--gray-800);
  border-color: var(--gray-600);
  color: var(--gray-100);
}

.dark .filter-select:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-900);
}

.filter-button {
  padding: 0.5rem 1rem;
  border: 2px solid var(--gray-300);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: white;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-button:hover {
  border-color: var(--primary-500);
  color: var(--primary-700);
  background: var(--primary-50);
}

.dark .filter-button {
  background: var(--gray-800);
  border-color: var(--gray-600);
  color: var(--gray-300);
}

.dark .filter-button:hover {
  border-color: var(--primary-400);
  color: var(--primary-300);
  background: var(--primary-900);
}

.filter-button.active {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: white;
}

.dark .filter-button.active {
  background: var(--primary-600);
  border-color: var(--primary-600);
}

.clear-filters {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: var(--gray-100);
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.clear-filters:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.dark .clear-filters {
  background: var(--gray-700);
  color: var(--gray-300);
}

.dark .clear-filters:hover {
  background: var(--gray-600);
  color: var(--gray-100);
}

/* Advanced Search Panel */
.advanced-search {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.dark .advanced-search {
  background: var(--gray-800);
  border-color: var(--gray-700);
}

.advanced-search-header {
  display: flex;
  align-items: center;
  justify-content: between;
  margin-bottom: 1rem;
}

.advanced-search-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
}

.dark .advanced-search-title {
  color: var(--gray-100);
}

.advanced-search-toggle {
  margin-left: auto;
  padding: 0.5rem;
  border: none;
  background: none;
  color: var(--gray-500);
  cursor: pointer;
  transition: color 0.2s ease;
}

.advanced-search-toggle:hover {
  color: var(--gray-700);
}

.dark .advanced-search-toggle:hover {
  color: var(--gray-300);
}

.advanced-search-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.advanced-search-field {
  display: flex;
  flex-direction: column;
}

.advanced-search-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}

.dark .advanced-search-label {
  color: var(--gray-300);
}

.advanced-search-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.advanced-search-input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
  outline: none;
}

.dark .advanced-search-input {
  background: var(--gray-700);
  border-color: var(--gray-600);
  color: var(--gray-100);
}

.dark .advanced-search-input:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-900);
}

.advanced-search-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* Results Summary */
.results-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 1rem;
}

.dark .results-summary {
  border-color: var(--gray-700);
}

.results-count {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.dark .results-count {
  color: var(--gray-400);
}

.results-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.results-sort-label {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.dark .results-sort-label {
  color: var(--gray-400);
}

.results-sort-select {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: white;
  color: var(--gray-900);
}

.dark .results-sort-select {
  background: var(--gray-700);
  border-color: var(--gray-600);
  color: var(--gray-100);
}

/* No Results State */
.no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray-500);
}

.dark .no-results {
  color: var(--gray-400);
}

.no-results-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  color: var(--gray-300);
}

.dark .no-results-icon {
  color: var(--gray-600);
}

.no-results-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--gray-700);
}

.dark .no-results-title {
  color: var(--gray-300);
}

.no-results-description {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.no-results-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* Loading States for Search */
.search-loading {
  position: relative;
  pointer-events: none;
}

.search-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
}

.dark .search-loading::after {
  background: rgba(0, 0, 0, 0.8);
}

.search-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--primary-200);
  border-top: 2px solid var(--primary-600);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 1;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Enhanced button styles for dark mode */
.dark .btn-secondary {
  background-color: #facc15 !important;
  color: #1f2937 !important;
}

.dark .btn-secondary:hover {
  background-color: #eab308 !important;
  color: #1f2937 !important;
}

/* Additional mobile improvements */
@media (max-width: 768px) {
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: white;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .dark .mobile-header {
    background: #1f2937;
    border-bottom: 1px solid #374151;
  }
  
  /* Better mobile navigation */
  .mobile-nav-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .mobile-nav-tabs::-webkit-scrollbar {
    display: none;
  }
  
  /* Mobile form improvements */
  .mobile-form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Mobile button stack */
  .mobile-btn-stack {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .mobile-btn-stack > * {
    width: 100% !important;
  }
  
  /* Mobile text sizes */
  .mobile-text-responsive {
    font-size: 0.875rem !important;
  }
  
  .mobile-title-responsive {
    font-size: 1.5rem !important;
  }
  
  /* Mobile page headers */
  h1 {
    font-size: 1.875rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
  }
}

/* Responsive table improvements for all screen sizes */
@media (max-width: 640px) {
  .clean-table th,
  .clean-table td {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.75rem !important;
  }
  
  .clean-table th {
    font-size: 0.625rem !important;
  }
  
  /* Hide less important columns on very small screens */
  .mobile-hide {
    display: none !important;
  }
}