/* 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;
}

/* ── 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%;
}