/* Dark Mode Variables */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --border-color: #e2e8f0;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --overlay-color: rgba(0, 0, 0, 0.5);
}

.dark {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --border-color: #475569;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --overlay-color: rgba(0, 0, 0, 0.7);
}

/* Apply theme variables */
.dark body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Login page specific dark mode styles */
.dark .bg-pattern {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.15) 0%, transparent 50%) !important;
  background-color: var(--bg-primary) !important;
}

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

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

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

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

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

.dark .shadow-lg {
  box-shadow: 0 10px 25px var(--shadow-color) !important;
}

.dark input,
.dark select,
.dark textarea {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.dark input::placeholder {
  color: var(--text-tertiary) !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
}

/* Button hover states in dark mode */
.dark button:hover:not(:disabled) {
  opacity: 0.9;
}

/* Custom scrollbar for dark mode */
.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: var(--bg-tertiary) !important;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--text-tertiary) !important;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary) !important;
}

/* Toast notifications dark mode */
.dark .toast {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 12px var(--shadow-color) !important;
}

.dark .toast-success {
  border-left-color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.1) !important;
}

.dark .toast-error {
  border-left-color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.1) !important;
}

.dark .toast-warning {
  border-left-color: #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.1) !important;
}

/* Checkbox in dark mode */
.dark input[type="checkbox"] {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--text-tertiary) !important;
}

.dark input[type="checkbox"]:checked {
  background-color: #667eea !important;
  border-color: #667eea !important;
}

/* Links in dark mode */
.dark a {
  color: #93c5fd !important;
}

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

/* Google button in dark mode */
.dark #googleSignInBtn {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.dark #googleSignInBtn:hover {
  background-color: var(--bg-secondary) !important;
}

/* Form labels in dark mode */
.dark label {
  color: var(--text-secondary) !important;
}

/* Divider in dark mode */
.dark .border-t {
  border-color: var(--border-color) !important;
}

.dark .px-3.bg-white {
  background-color: var(--bg-secondary) !important;
  color: var(--text-tertiary) !important;
}



/* Dark Mode Variables for Admin Dashboard */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-tertiary: #adb5bd;
  --border-color: #dee2e6;
  --shadow-color: rgba(0, 0, 0, 0.15);
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --dropdown-bg: #ffffff;
  --hover-bg: #f8f9fa;
  --active-bg: #e9ecef;
}

[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2d2d2d;
  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --text-tertiary: #6c757d;
  --border-color: #495057;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --card-bg: #1e1e1e;
  --header-bg: #1e1e1e;
  --sidebar-bg: #121212;
  --dropdown-bg: #2d2d2d;
  --hover-bg: #2d2d2d;
  --active-bg: #495057;
}

/* Apply theme to admin dashboard */
[data-theme="dark"] .dashboard-container {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

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

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

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

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

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

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

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

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

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

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

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

[data-theme="dark"] .form-control:focus {
  background-color: var(--bg-secondary);
  border-color: #667eea;
  color: var(--text-primary);
}

[data-theme="dark"] .header-search-input {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .header-search-input::placeholder {
  color: var(--text-tertiary);
}

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

[data-theme="dark"] .loading-overlay {
  background-color: var(--bg-primary);
}

/* Admin Dashboard Specific Dark Mode Styles */

/* Stat card icons */
[data-theme="dark"] .stat-card-icon.primary {
    background-color: rgba(102, 126, 234, 0.2);
    color: #667eea;
}

[data-theme="dark"] .stat-card-icon.success {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

[data-theme="dark"] .stat-card-icon.warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

[data-theme="dark"] .stat-card-icon.danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Chart container */
[data-theme="dark"] #bookingStatusChart {
    color: var(--text-primary);
}

/* Quick action buttons hover effect */
[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #667eea;
    color: white;
}

/* Notifications dropdown */
[data-theme="dark"] .notifications-dropdown {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .notifications-footer {
    border-top-color: var(--border-color);
    background-color: var(--bg-secondary);
}

/* Breadcrumb */
[data-theme="dark"] .page-breadcrumb {
    color: var(--text-secondary);
}

[data-theme="dark"] .breadcrumb-divider {
    color: var(--text-tertiary);
}

/* Spinner for dark mode */
[data-theme="dark"] .spinner-primary {
    border-top-color: #667eea;
}

/* Custom scrollbar for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

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

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

[data-theme="dark"] .progress-bar {
    background-color: #667eea;
}

/* Modal backdrop for dark mode */
[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Tooltips */
[data-theme="dark"] .tooltip {
    background-color: var(--dropdown-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}