/* Enhanced Dark Theme CSS - Modern Design */
:root[data-theme="dark"] {
  /* Dark Theme - Modern Glass Design */
  --bg-primary: #0f0f0f;
  --bg-secondary: #171717;
  --bg-tertiary: #262626;
  --bg-glass: rgba(23, 23, 23, 0.7);
  --text-primary: #f3f4f6;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --accent-primary: #818cf8;
  --accent-secondary: #a5b4fc;
  --accent-tertiary: #c7d2fe;
  --accent-gradient: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  --border-color: #3f3f46;
  --border-light: rgba(161, 161, 170, 0.1);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --glass-blur: blur(10px);
  --card-bg: rgba(23, 23, 23, 0.8);
  --header-bg: #0f0f0f;
  --header-text: #f3f4f6;
  --nav-bg: rgba(23, 23, 23, 0.95);
  --nav-text: #f3f4f6;
  --nav-active: #818cf8;
  --nav-hover-bg: #262626;
  --table-header-bg: #171717;
  --table-header-text: #f3f4f6;
  --table-row-even: #1a1a1a;
  --table-row-odd: #0f0f0f;
  --table-hover: rgba(129, 140, 248, 0.1);
  --table-border: #3f3f46;
  --input-bg: #262626;
  --input-text: #f3f4f6;
  --input-border: #3f3f46;
  --input-focus-border: #818cf8;
  --input-focus-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
  --btn-primary-bg: #818cf8;
  --btn-primary-text: #0f0f0f;
  --btn-primary-hover: #6366f1;
  --btn-secondary-bg: #3f3f46;
  --btn-secondary-text: #f3f4f6;
  --btn-secondary-hover: #52525b;
  --btn-success-bg: #34d399;
  --btn-success-hover: #10b981;
  --btn-danger-bg: #f87171;
  --btn-danger-hover: #ef4444;
  --btn-warning-bg: #fbbf24;
  --btn-warning-hover: #f59e0b;
  --btn-info-bg: #38bdf8;
  --btn-info-hover: #0ea5e9;
  --status-paid: #34d399;
  --status-unpaid: #818cf8;
  --status-overdue: #f87171;
  --status-draft: #71717a;
  --status-sent: #fbbf24;
  --status-cancelled: #52525b;
  --footer-bg: #0f0f0f;
  --footer-text: #e4e4e7;
  --footer-link: #a1a1aa;
  --footer-link-hover: #f3f4f6;
}

/* Dark mode body background pattern */
:root[data-theme="dark"] body::before {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(129, 140, 248, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(199, 210, 254, 0.03) 0%, transparent 50%);
}

/* Enhanced dark mode elements */
:root[data-theme="dark"] .card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  background: rgba(23, 23, 23, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(63, 63, 70, 0.5);
}

:root[data-theme="dark"] .card::before {
  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.2), transparent);
}

:root[data-theme="dark"] .logo {
  background: linear-gradient(135deg, #f3f4f6 0%, #818cf8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(129, 140, 248, 0.3));
}

:root[data-theme="dark"] .nav-menu a:hover,
:root[data-theme="dark"] .nav-menu a.active {
  background-color: rgba(129, 140, 248, 0.1);
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3);
  background-color: #1a1a1a;
}

/* Enhanced dark mode cards */
:root[data-theme="dark"] .stat-card {
  background: rgba(23, 23, 23, 0.9);
  border: 1px solid rgba(63, 63, 70, 0.5);
}

:root[data-theme="dark"] .stat-card::before {
  background: radial-gradient(circle, rgba(129, 140, 248, 0.15) 0%, transparent 70%);
}

:root[data-theme="dark"] .stat-value {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark mode navigation */
:root[data-theme="dark"] .main-nav {
  background: rgba(23, 23, 23, 0.95);
  border: 1px solid rgba(63, 63, 70, 0.3);
}

:root[data-theme="dark"] .nav-menu a {
  color: #e4e4e7;
}

:root[data-theme="dark"] .nav-menu a:hover {
  background-color: rgba(129, 140, 248, 0.1);
  color: #818cf8;
}

:root[data-theme="dark"] .nav-menu a.active {
  background-color: rgba(129, 140, 248, 0.15);
  color: #818cf8;
}

/* Dark mode header */
:root[data-theme="dark"] .premium-header {
  background: rgba(15, 15, 15, 0.95);
  border-bottom: 1px solid rgba(63, 63, 70, 0.3);
}

:root[data-theme="dark"] .user-info {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .logout-btn {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  color: #fca5a5;
}

:root[data-theme="dark"] .logout-btn:hover {
  background-color: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.3);
}

/* Dark mode buttons */
:root[data-theme="dark"] .btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .btn:hover {
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.4);
}

:root[data-theme="dark"] .btn-outline {
  border-color: #818cf8;
  color: #818cf8;
}

:root[data-theme="dark"] .btn-outline:hover {
  background-color: #818cf8;
  color: #0f0f0f;
}

/* Dark mode tables */
:root[data-theme="dark"] .table-container {
  background: rgba(23, 23, 23, 0.9);
  border: 1px solid rgba(63, 63, 70, 0.3);
}

:root[data-theme="dark"] table th {
  background: linear-gradient(135deg, #171717 0%, #262626 100%);
  color: #f3f4f6;
}

:root[data-theme="dark"] table tr:hover td {
  background-color: rgba(129, 140, 248, 0.08);
}

/* Dark mode forms */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: #262626;
  border-color: #3f3f46;
  color: #f3f4f6;
}

:root[data-theme="dark"] input[type="text"]:hover,
:root[data-theme="dark"] input[type="email"]:hover,
:root[data-theme="dark"] input[type="password"]:hover,
:root[data-theme="dark"] input[type="date"]:hover,
:root[data-theme="dark"] input[type="number"]:hover,
:root[data-theme="dark"] select:hover,
:root[data-theme="dark"] textarea:hover {
  border-color: #52525b;
}

:root[data-theme="dark"] .form-control-static {
  background-color: #1a1a1a;
  color: #e4e4e7;
}

/* Dark mode alerts */
:root[data-theme="dark"] .alert-success {
  background-color: rgba(52, 211, 153, 0.1);
  color: #86efac;
  border-color: rgba(52, 211, 153, 0.2);
}

:root[data-theme="dark"] .alert-danger {
  background-color: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.2);
}

:root[data-theme="dark"] .alert-warning {
  background-color: rgba(251, 191, 36, 0.1);
  color: #fde047;
  border-color: rgba(251, 191, 36, 0.2);
}

:root[data-theme="dark"] .alert-info {
  background-color: rgba(129, 140, 248, 0.1);
  color: #a5b4fc;
  border-color: rgba(129, 140, 248, 0.2);
}

/* Dark mode status badges */
:root[data-theme="dark"] .status-paid {
  background-color: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

:root[data-theme="dark"] .status-unpaid {
  background-color: rgba(129, 140, 248, 0.15);
  color: #818cf8;
}

:root[data-theme="dark"] .status-sent {
  background-color: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

:root[data-theme="dark"] .status-overdue {
  background-color: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

:root[data-theme="dark"] .status-draft {
  background-color: rgba(113, 113, 122, 0.15);
  color: #a1a1aa;
}

/* Dark mode footer */
:root[data-theme="dark"] footer {
  background: linear-gradient(135deg, #0f0f0f 0%, #171717 100%);
}

:root[data-theme="dark"] footer::before {
  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.3), transparent);
}

/* Dark mode login */
:root[data-theme="dark"] .login-container {
  background: rgba(23, 23, 23, 0.95);
  border: 1px solid rgba(63, 63, 70, 0.3);
}

:root[data-theme="dark"] .login-container::before {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
}

/* Dark mode FAB */
:root[data-theme="dark"] .fab {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  box-shadow: 0 6px 20px rgba(129, 140, 248, 0.4);
}

:root[data-theme="dark"] .fab:hover {
  box-shadow: 0 8px 25px rgba(129, 140, 248, 0.5);
}

:root[data-theme="dark"] .fab-item {
  background: rgba(23, 23, 23, 0.95);
  border: 1px solid rgba(63, 63, 70, 0.3);
  color: #818cf8;
}

:root[data-theme="dark"] .fab-item:hover {
  background-color: #818cf8;
  color: #0f0f0f;
}

/* Dark mode charts */
:root[data-theme="dark"] .chart-container {
  background: rgba(23, 23, 23, 0.5);
}

/* Dark mode quick actions */
:root[data-theme="dark"] .action-button {
  background: rgba(23, 23, 23, 0.9);
  border: 1px solid rgba(63, 63, 70, 0.3);
  color: #818cf8;
}

:root[data-theme="dark"] .action-button:hover {
  background-color: rgba(129, 140, 248, 0.1);
  border-color: #818cf8;
}

/* Dark mode scrollbar */
:root[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #171717;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 6px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* Keep invoice template in light mode */
:root[data-theme="dark"] .invoice-container {
  background-color: white !important;
  color: #333 !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
  border-radius: 8px !important;
}

:root[data-theme="dark"] .invoice-container * {
  background-color: inherit !important;
  color: inherit !important;
  border-color: #ddd !important;
}

/* Invoice specific overrides for dark mode */
:root[data-theme="dark"] .invoice-container table th {
  background-color: #8a7f44 !important;
  color: white !important;
}

:root[data-theme="dark"] .invoice-container table tr:nth-child(even) {
  background-color: #f8f8f8 !important;
}

:root[data-theme="dark"] .invoice-container table td {
  border-color: #e0e0e0 !important;
  color: #3c3c3c !important;
}

/* Mobile dark mode adjustments */
@media (max-width: 768px) {
  :root[data-theme="dark"] .main-nav {
    background: rgba(23, 23, 23, 0.98) !important;
  }
  
  :root[data-theme="dark"] .mobile-nav-overlay.active {
    background-color: rgba(0, 0, 0, 0.7) !important;
  }
  
  :root[data-theme="dark"] .nav-menu a.active {
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%) !important;
    color: #0f0f0f !important;
  }
  
  :root[data-theme="dark"] .nav-menu a.active svg {
    color: #0f0f0f !important;
  }
}