/* Custom styles for CF TempMail */

/* Custom scrollbars */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 9999px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

/* ==================== LIGHT MODE PERFECTION ==================== */
html:not(.dark) body {
  background-color: #f1f5f9;
  color: #0f172a;
}

html:not(.dark) header {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: #e2e8f0;
}

html:not(.dark) header .bg-gradient-to-r {
  background: linear-gradient(to right, #0f172a, #334155, #64748b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cards & Sections */
html:not(.dark) section {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Hero Section */
html:not(.dark) #currentEmailInput {
  color: #0f172a !important;
}

html:not(.dark) .bg-slate-950\/80,
html:not(.dark) .bg-slate-950\/60,
html:not(.dark) .bg-slate-950\/40,
html:not(.dark) .bg-slate-950 {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) .text-white {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-300 {
  color: #334155 !important;
}

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

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

/* Modals & Dropdown containers */
html:not(.dark) #mailboxDropdownMenu,
html:not(.dark) #customModal > div,
html:not(.dark) #qrModal > div,
html:not(.dark) #apiDocsModal > div,
html:not(.dark) #confirmModal > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark) #customUsernameInput,
html:not(.dark) #customDomainSelect,
html:not(.dark) #searchEmailInput,
html:not(.dark) #heroDomainSelect {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900\/95,
html:not(.dark) .bg-slate-900\/70 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/90,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/60,
html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-800\/40 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/80,
html:not(.dark) .border-slate-800\/70,
html:not(.dark) .border-slate-800\/60,
html:not(.dark) .border-slate-800\/50,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/80,
html:not(.dark) .border-slate-700\/60 {
  border-color: #e2e8f0 !important;
}

/* Viewer header in light mode */
html:not(.dark) #viewerActive {
  background-color: #ffffff !important;
}

html:not(.dark) #viewFromName {
  color: #0f172a !important;
}

html:not(.dark) #viewFromAddress {
  color: #64748b !important;
}

html:not(.dark) #viewToAddress {
  color: #475569 !important;
}

html:not(.dark) #viewDateFormatted {
  color: #334155 !important;
}

html:not(.dark) #viewSubject {
  color: #0f172a !important;
}

html:not(.dark) footer {
  background-color: #f8fafc;
  border-color: #e2e8f0;
}

/* Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.email-item-new {
  animation: slideInUp 0.3s ease-out forwards;
}

/* Active Email Item styling */
.email-item-active {
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
}

/* Spinner animation */
.spin-active {
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}