/* WeReportYourRent - Custom Styles */

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Smooth scroll ─────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Navy color utilities ──────────────────── */
.bg-navy-900 { background-color: #0d1f36; }
.bg-navy-800 { background-color: #162d4a; }
.bg-navy-700 { background-color: #1e3a5f; }
.text-navy-800 { color: #162d4a; }
.from-navy-900 { --tw-gradient-from: #0d1f36; }
.from-navy-800 { --tw-gradient-from: #162d4a; }
.to-navy-800  { --tw-gradient-to: #162d4a; }
.via-navy-800 { --tw-gradient-via: #162d4a; }

/* ── Brand color utilities ─────────────────── */
.bg-brand-50  { background-color: #eef9f4; }
.bg-brand-100 { background-color: #d6f1e4; }
.bg-brand-400 { background-color: #34d399; }
.bg-brand-500 { background-color: #10b981; }
.bg-brand-600 { background-color: #059669; }
.bg-brand-700 { background-color: #047857; }
.text-brand-100 { color: #d6f1e4; }
.text-brand-300 { color: #6ee7b7; }
.text-brand-400 { color: #34d399; }
.text-brand-500 { color: #10b981; }
.text-brand-600 { color: #059669; }
.text-brand-700 { color: #047857; }
.border-brand-100 { border-color: #d6f1e4; }
.border-brand-200 { border-color: #a7f3d0; }
.border-brand-300 { border-color: #6ee7b7; }
.border-brand-400 { border-color: #34d399; }
.border-brand-500 { border-color: #10b981; }
.hover\:bg-brand-50:hover  { background-color: #eef9f4; }
.hover\:bg-brand-100:hover { background-color: #d6f1e4; }
.hover\:bg-brand-400:hover { background-color: #34d399; }
.hover\:bg-brand-600:hover { background-color: #059669; }
.hover\:border-brand-200:hover { border-color: #a7f3d0; }
.hover\:border-brand-300:hover { border-color: #6ee7b7; }
.hover\:text-brand-600:hover { color: #059669; }
.focus\:ring-brand-300:focus { --tw-ring-color: #6ee7b7; }
.from-brand-700 { --tw-gradient-from: #047857; }
.to-brand-700   { --tw-gradient-to: #047857; }

/* ── Gradient helpers ──────────────────────── */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)); }
.from-purple-900 { --tw-gradient-from: #4c1d95; }

/* ── Animations ────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1.4);  opacity: 0; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out both;
}

/* ── Hero section enhancements ─────────────── */
section.hero-gradient {
  background: linear-gradient(135deg, #0d1f36 0%, #162d4a 50%, #047857 100%);
}

/* ── Card hover effects ────────────────────── */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* ── Credit Score gauge ────────────────────── */
.score-gauge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Progress bar ──────────────────────────── */
.progress-bar {
  height: 8px;
  border-radius: 99px;
  background: #e2e8f0;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width 1s ease;
}

/* ── Chat widget ───────────────────────────── */
#chat-box {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#chat-messages {
  scroll-behavior: smooth;
}

/* ── Form input focus ──────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
}

/* ── Card chrome restore (2026-05-24, Jay batch 3) ─────────────────────
   42 sites across src/pages/ ship as <div class="" style="background:
   var(--c-surface)"> — empty class + themed surface bg. That combination
   is a strong regression marker: an automated find/replace stripped the
   Tailwind chrome (rounded, shadow, padding, border) but left the
   background. Result: white "cards" with no edges on light themes
   (millennial/budget) and indistinguishable card edges in genz dark.
   This rule gives them sensible default chrome without touching the 14
   source files. <section> and <nav> with the same pattern (faqs.ts:248,
   millennialLanding.ts:113) are intentionally skipped — those are full-
   width containers, not cards. */
div[class=""][style*="background:var(--c-surface)"],
div[class=""][style*="background: var(--c-surface)"] {
  padding: 1.75rem;
  border-radius: var(--radius-card, 1rem);
  box-shadow: var(--c-card-shadow, 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06));
  border: 1px solid var(--c-border);
}

/* ── Themed inputs (2026-05-24, Irv feedback batch 2) ──────────────────
   Without this rule, input/select/textarea inherit text color from the
   parent section (often white inside dark hero gradients) while the
   browser keeps the input background white — resulting in white-on-white
   typed text on /login and /landlord (dark theme). No !important: pages
   with their own inline color/background still win. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input:not([type]),
textarea,
select {
  color: var(--c-text, #1F2937);
  background-color: var(--c-surface, #FFFFFF);
}
input::placeholder,
textarea::placeholder {
  color: var(--c-text-muted, #6B7280);
  opacity: 1;
}

/* Dark theme: lift inputs to surface2 so they stand out from card chrome. */
.theme-genz input[type="text"],
.theme-genz input[type="email"],
.theme-genz input[type="tel"],
.theme-genz input[type="number"],
.theme-genz input[type="password"],
.theme-genz input[type="search"],
.theme-genz input[type="url"],
.theme-genz input[type="date"],
.theme-genz input[type="datetime-local"],
.theme-genz input:not([type]),
.theme-genz textarea,
.theme-genz select {
  background-color: var(--c-surface2);
  color: var(--c-text);
  border-color: var(--c-border);
}

/* Budget + millennial: same trick. --c-border (#E8DCC4 / #E7E2D7) has ~1.2:1
   contrast on pure white inputs, so the border is technically present but
   invisible. Lift inputs to --c-surface2 (warm cream) so the border has
   ~1.7:1 — visible without changing the palette Irv praised. Jay 2026-05-24. */
.theme-budget input[type="text"],
.theme-budget input[type="email"],
.theme-budget input[type="tel"],
.theme-budget input[type="number"],
.theme-budget input[type="password"],
.theme-budget input[type="search"],
.theme-budget input[type="url"],
.theme-budget input[type="date"],
.theme-budget input[type="datetime-local"],
.theme-budget input:not([type]),
.theme-budget textarea,
.theme-budget select,
.theme-millennial input[type="text"],
.theme-millennial input[type="email"],
.theme-millennial input[type="tel"],
.theme-millennial input[type="number"],
.theme-millennial input[type="password"],
.theme-millennial input[type="search"],
.theme-millennial input[type="url"],
.theme-millennial input[type="date"],
.theme-millennial input[type="datetime-local"],
.theme-millennial input:not([type]),
.theme-millennial textarea,
.theme-millennial select {
  background-color: var(--c-surface2);
  color: var(--c-text);
  border-color: var(--c-border);
}

/* Chrome / Edge autofill: the browser yellow override re-hides text.
   Force fill color + background to match the active theme. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--c-text);
  -webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset;
  caret-color: var(--c-text);
  transition: background-color 9999s ease-in-out 0s;
}
.theme-genz input:-webkit-autofill,
.theme-genz input:-webkit-autofill:hover,
.theme-genz input:-webkit-autofill:focus,
.theme-genz input:-webkit-autofill:active,
.theme-genz textarea:-webkit-autofill,
.theme-genz select:-webkit-autofill,
.theme-budget input:-webkit-autofill,
.theme-budget input:-webkit-autofill:hover,
.theme-budget input:-webkit-autofill:focus,
.theme-budget input:-webkit-autofill:active,
.theme-budget textarea:-webkit-autofill,
.theme-budget select:-webkit-autofill,
.theme-millennial input:-webkit-autofill,
.theme-millennial input:-webkit-autofill:hover,
.theme-millennial input:-webkit-autofill:focus,
.theme-millennial input:-webkit-autofill:active,
.theme-millennial textarea:-webkit-autofill,
.theme-millennial select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--c-surface2) inset;
}

/* ── Badge pulse ───────────────────────────── */
.badge-pulse::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.4);
  animation: pulse-ring 1.5s ease-out infinite;
}

/* ── Tooltip ───────────────────────────────── */
.tooltip {
  position: relative;
}
.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.tooltip:hover::after { opacity: 1; }

/* ── Admin sidebar active state ────────────── */
.admin-nav.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* ── Table ─────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th { font-weight: 600; }

/* ── Responsive nav ────────────────────────── */
@media (max-width: 768px) {
  .hero-text { font-size: 2.25rem; }
}

/* ── Upload area drag active ───────────────── */
#upload-area.drag-active {
  border-color: #10b981;
  background: #eef9f4;
}

/* ── Score meter bar gradient ──────────────── */
.score-meter-fill {
  background: linear-gradient(90deg, #ef4444, #f59e0b 40%, #10b981 80%);
}

/* ── Pricing card toggle ───────────────────── */
#billing-dot {
  transition: left 0.2s ease;
}

/* ── Notification dot ──────────────────────── */
.notif-dot {
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
  position: absolute;
  top: -2px; right: -2px;
}

/* ── Footer gradient ───────────────────────── */
footer.footer-gradient {
  background: linear-gradient(180deg, #0d1f36 0%, #081526 100%);
}

/* ── Shimmer loading effect ────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ── Confetti-like success state ───────────── */
.success-glow {
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  animation: success-pulse 1s ease-out;
}
@keyframes success-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70%  { box-shadow: 0 0 0 20px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ── Drag-and-drop file upload ─────────────── */
#upload-area {
  transition: all 0.2s ease;
}

/* ── Chart container ───────────────────────── */
canvas {
  max-width: 100%;
}

/* ── Gen Z dark theme overrides ────────────── */
.theme-genz ::-webkit-scrollbar-track { background: #18181F; }
.theme-genz ::-webkit-scrollbar-thumb { background: #2A2A38; border-radius: 99px; }
.theme-genz ::-webkit-scrollbar-thumb:hover { background: #3A3A50; }

/* ── Ticker / marquee ───────────────────────── */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
#ticker { will-change: transform; }

/* ── Gen Z glassmorphism card ───────────────── */
.gz-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

/* ── Score arc SVG transition ───────────────── */
#score-arc {
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4,0,0.2,1);
}

/* ── Neon text glow utilities ───────────────── */
.neon-teal   { text-shadow: 0 0 20px rgba(0,212,170,0.6); }
.neon-violet { text-shadow: 0 0 20px rgba(124,58,237,0.6); }
.neon-lime   { text-shadow: 0 0 20px rgba(132,204,22,0.6); }

/* ── Floating glow orbs (Gen Z hero) ────────── */
.gz-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(0px);
}