/* =====================================================
   Dark Mode Theme for Budżet Domowy
   CSS Variables override for dark theme
   ===================================================== */

/* Dark mode color palette */
:root[data-theme="dark"] {
  --primary: #1565C0;
  --primary-dark: #0D47A1;
  --primary-light: #1976D2;
  --primary-pale: #1a237e;
  --accent: #FF9100;
  --success: #4CAF50;
  --success-pale: #1b5e20;
  --warning: #FFA726;
  --warning-pale: #e65100;
  --danger: #EF5350;
  --danger-pale: #c62828;

  /* Dark backgrounds */
  --text: #E0E0E0;
  --text-secondary: #B0B0B0;
  --text-inverse: #121212;
  --bg: #121212;
  --bg-card: #1E1E1E;
  --border: #303030;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.4);
}

/* Dark mode for specific elements */
:root[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="dark"] header,
:root[data-theme="dark"] .app-header,
:root[data-theme="dark"] .landing-header {
  background: var(--primary);
}

:root[data-theme="dark"] nav {
  background: var(--primary);
}

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

:root[data-theme="dark"] main {
  background: var(--bg);
}

:root[data-theme="dark"] card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .view-tab {
  background: var(--bg-card);
  color: var(--text);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: var(--text-secondary);
}

:root[data-theme="dark"] button {
  border-color: var(--border);
}

:root[data-theme="dark"] button:not([disabled]):hover {
  background: var(--primary-light);
}

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

:root[data-theme="dark"] dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

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

:root[data-theme="dark"] th,
:root[data-theme="dark"] td {
  border-color: var(--border);
}

:root[data-theme="dark"] tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .badge {
  background: var(--primary);
  color: var(--text-inverse);
}

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

:root[data-theme="dark"] a {
  color: var(--primary-light);
}

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

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

:root[data-theme="dark"] .section-title {
  color: var(--text);
}

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

/* Smooth transitions when toggling theme */
:root {
  transition: background 0.3s ease, color 0.3s ease;
}

:root * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}