@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import 'tailwindcss';

:root {
  --primary: #1B6ECD;
  --primary-dark: #155BB0;
  --primary-light: #EFF6FF;
  --accent: #FBBF24;
  --accent-dark: #D97706;
  --accent-light: #FEF3C7;
  --dark: #0B1F3A;
  --text: #1E293B;
  --muted: #334155;
  --border: #E2E8F0;
  --bg: #F8FAFC;
  --white: #FFFFFF;
  --success: #10B981;
  --error: #EF4444;
  --warning: #F59E0B;
  --radius: 14px;
  --shadow: 0 2px 16px rgba(27, 110, 205, 0.08);
  --shadow-md: 0 4px 32px rgba(27, 110, 205, 0.12);
  --shadow-lg: 0 8px 48px rgba(27, 110, 205, 0.16);
}

* {
  scrollbar-width: none;
  box-sizing: border-box;
}
*::-webkit-scrollbar {
  display: none;
}

html, body, #root {
  height: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── Animations ── */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-14px) rotate(1deg); }
  66% { transform: translateY(-7px) rotate(-1deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(10px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

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

@keyframes logoPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(2deg); }
}

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

@keyframes orbitTrack {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbitDotPulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(0.82); }
  50% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.5; transform: scale(0.7) rotate(180deg); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes drawLine {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.88) translateY(24px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Utility classes ── */
.font-display { font-family: 'Outfit', sans-serif; }

.anim-float { animation: float 4s ease-in-out infinite; }
.anim-float-slow { animation: float 6s ease-in-out infinite; }
.anim-float-reverse { animation: floatReverse 3.5s ease-in-out infinite; }
.anim-sparkle { animation: sparkle 2s ease-in-out infinite; }
.anim-spin-slow { animation: spin-slow 20s linear infinite; }
.anim-logo-pulse { animation: logoPulse 3.8s ease-in-out infinite; transform-origin: center; }
.anim-orbit-dots { animation: orbitDots 16s linear infinite; transform-origin: center; }
.orbit-track { position: absolute; left: 50%; top: 50%; border-radius: 9999px; animation-name: orbitTrack; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: center; }
.orbit-dot { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; border-radius: 9999px; animation: orbitDotPulse 3.2s ease-in-out infinite; }
.orbit-track-1 { width: min(220px, 50vw); height: min(220px, 50vw); animation-duration: 13s; }
.orbit-track-2 { width: min(255px, 58vw); height: min(255px, 58vw); animation-duration: 17s; animation-delay: -4s; }
.orbit-track-3 { width: min(290px, 66vw); height: min(290px, 66vw); animation-duration: 21s; animation-delay: -9s; }
.orbit-track-4 { width: min(325px, 74vw); height: min(325px, 74vw); animation-duration: 15s; animation-delay: -6s; }
.orbit-track-5 { width: min(350px, 80vw); height: min(350px, 80vw); animation-duration: 24s; animation-delay: -15s; }
.orbit-track-6 { width: min(375px, 84vw); height: min(375px, 84vw); animation-duration: 19s; animation-delay: -11s; }
.orbit-track-7 { width: min(390px, 86vw); height: min(390px, 86vw); animation-duration: 27s; animation-delay: -20s; }
.anim-bounce { animation: bounce-subtle 2.5s ease-in-out infinite; }

.anim-fade-up { animation: fadeInUp 0.6s ease-out both; }
.anim-fade-up-1 { animation: fadeInUp 0.6s ease-out 0.1s both; }
.anim-fade-up-2 { animation: fadeInUp 0.6s ease-out 0.2s both; }
.anim-fade-up-3 { animation: fadeInUp 0.6s ease-out 0.3s both; }
.anim-fade-up-4 { animation: fadeInUp 0.6s ease-out 0.4s both; }
.anim-fade-up-5 { animation: fadeInUp 0.6s ease-out 0.5s both; }
.anim-fade-up-6 { animation: fadeInUp 0.6s ease-out 0.6s both; }
.anim-fade-up-7 { animation: fadeInUp 0.6s ease-out 0.7s both; }
.anim-fade-up-8 { animation: fadeInUp 0.6s ease-out 0.8s both; }

.anim-scale-in { animation: scaleIn 0.4s ease-out both; }
.anim-slide-right { animation: slideInRight 0.5s ease-out both; }
.anim-slide-left { animation: slideInLeft 0.5s ease-out both; }
.anim-fade { animation: fadeIn 0.4s ease-out both; }

.anim-modal { animation: modalIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #1B6ECD 0%, #0EA5E9 50%, #FFB627 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-blue {
  background: linear-gradient(135deg, #1B6ECD 0%, #3B82F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glass card ── */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ── Input focus ring ── */
.input-field {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(27, 110, 205, 0.12);
  outline: none;
}

.auth-glass-card .input-field {
  background: rgba(239, 247, 255, 0.86) !important;
  border-color: rgba(147, 197, 253, 0.55) !important;
}
.auth-glass-card .input-field:focus {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}
.auth-glass-card .relative > div:first-child {
  color: var(--primary) !important;
}

.payment-modal-panel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.payment-modal-panel::-webkit-scrollbar {
  display: none;
}

/* ── Button transition ── */
.btn-primary {
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(27, 110, 205, 0.35);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-accent {
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 182, 39, 0.4);
}

/* ── Card hover ── */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(27, 110, 205, 0.14);
}

/* ── Nav link ── */
.nav-link {
  position: relative;
  transition: color 0.2s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
  border-radius: 2px;
}
.nav-link:hover::after {
  width: 100%;
}

/* ── Sidebar item ── */
.sidebar-item {
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
  border-radius: 12px;
}
.sidebar-item:hover {
  background-color: rgba(27, 110, 205, 0.08);
  color: var(--primary);
  transform: translateX(3px);
}
.sidebar-item.active {
  background: linear-gradient(135deg, var(--primary), #3B82F6);
  color: white;
}

/* ── Tooth shape clip ── */
.tooth-bg {
  background: linear-gradient(160deg, #EBF5FF 0%, #DBEAFE 50%, #EFF6FF 100%);
}

/* ── Stat card shimmer ── */
.shimmer-bg {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2.5s infinite;
}

/* ── Reports Layout Grid & Cards ── */
.reports-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  width: 100%;
}
.reports-grid-2col > * {
  min-width: 0;
  height: auto;
}
@media (max-width: 1000px) {
  .reports-grid-2col {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
.report-card {
  min-width: 0;
  height: auto;
  position: static;
  box-sizing: border-box;
}