/* Theme variables: customize to your brand.
   Replace the hex values below with your desired primary/secondary colors.
   Examples:
   - Primary blue:   #3b82f6
   - Primary indigo: #6366f1
   - Secondary emerald: #10b981
   - Secondary slate:   #64748b
*/
:root {
  /* Light mode */
  --bg: #f8fafc;
  --fg: #0f172a;

  /* Primary palette (blue 500 as example) */
  --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;
  --primary-950: #172554;

  /* Secondary palette (emerald 500 as example) */
  --secondary-50:  #ecfdf5;
  --secondary-100: #d1fae5;
  --secondary-200: #a7f3d0;
  --secondary-300: #6ee7b7;
  --secondary-400: #34d399;
  --secondary-500: #10b981;
  --secondary-600: #059669;
  --secondary-700: #047857;
  --secondary-800: #065f46;
  --secondary-900: #064e3b;
  --secondary-950: #022c22;
}

html.dark {
  --bg: #0b1220;
  --fg: #e5e7eb;

  /* Optional: darker variants for primary/secondary */
  --primary-600: #1d4ed8;
  --primary-700: #1e40af;
  --secondary-600: #047857;
  --secondary-700: #065f46;
}

html, body {
  background: var(--bg);
  color: var(--fg);
}

/* Modal */
#modal-overlay {
  transition: opacity .15s ease;
}
#modal-overlay.show {
  display: flex;
}
.modal {
  animation: pop .12s ease;
}
@keyframes pop {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Utility for compact rows on small screens */
@media (max-width: 640px) {
  table td, table th {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}