/* Slow rotating glow ring for the auth-loading screen */
@keyframes loading-glow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.loading-glow-spin {
  animation: loading-glow-spin 2.2s linear infinite;
}

/* Prevent iOS Safari from auto-zooming when a form field is focused.
   Any input with a computed font-size under 16px triggers the zoom,
   and since this is an SPA the zoomed-in state persists across views. */
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Dark Mode Styles */
.dark {
  color-scheme: dark;
}

.dark body {
  background-color: #0f172a;
  color: #e2e8f0;
}

.dark .bg-white {
  background-color: #1e293b !important;
}

.dark .bg-\[\#f6f7f8\] {
  background-color: #0f172a !important;
}

.dark .bg-slate-50 {
  background-color: #334155 !important;
}

.dark .bg-slate-50\/50 {
  background-color: rgba(51, 65, 85, 0.5) !important;
}

.dark .bg-slate-50\/80 {
  background-color: rgba(51, 65, 85, 0.8) !important;
}

.dark .bg-slate-100 {
  background-color: #475569 !important;
}

.dark .border-slate-200 {
  border-color: #334155 !important;
}

.dark .border-slate-100 {
  border-color: #1e293b !important;
}

.dark .text-\[\#0d141b\] {
  color: #f1f5f9 !important;
}

.dark .text-slate-700 {
  color: #cbd5e1 !important;
}

.dark .text-slate-600 {
  color: #94a3b8 !important;
}

.dark .text-slate-500 {
  color: #64748b !important;
}

.dark .text-slate-400 {
  color: #64748b !important;
}

.dark .text-slate-800 {
  color: #e2e8f0 !important;
}

.dark .hover\:bg-slate-50:hover {
  background-color: #334155 !important;
}

.dark .hover\:bg-slate-100:hover {
  background-color: #475569 !important;
}

.dark input,
.dark textarea,
.dark select {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #64748b !important;
}

/* Compact Mode Styles */
.compact .p-8 {
  padding: 1rem !important;
}

.compact .p-6 {
  padding: 0.75rem !important;
}

.compact .p-4 {
  padding: 0.5rem !important;
}

.compact .space-y-8 > * + * {
  margin-top: 1rem !important;
}

.compact .space-y-6 > * + * {
  margin-top: 0.75rem !important;
}

.compact .gap-6 {
  gap: 0.75rem !important;
}

.compact .gap-4 {
  gap: 0.5rem !important;
}

.compact .py-4 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.compact .px-6 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.compact .text-4xl {
  font-size: 1.5rem !important;
}

.compact .text-2xl {
  font-size: 1.25rem !important;
}

.compact .rounded-2xl {
  border-radius: 0.75rem !important;
}

.compact .size-14 {
  width: 2.5rem !important;
  height: 2.5rem !important;
}