/* @section 1 Global type + scrollbars */
/* Root font size lifts Tailwind's rem-based type scale 19% so everything
   is readable for an older audience without rewriting every utility class. */
html { font-size: 19px; }
body {
  font-family: 'Inter', sans-serif;
  line-height: 1.55;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0b1220; }
::-webkit-scrollbar-thumb { background: #1d2a3d; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #344054; }
thead.sticky th { position: sticky; top: 0; background: #101828; z-index: 5; }
.num { font-variant-numeric: tabular-nums; }

/* @section 2 Tap feedback + route + reveal animations */
.tap { transition: transform 120ms ease, background-color 150ms ease, border-color 150ms ease; }
.tap:active { transform: scale(0.985); }

.route-enter {
  animation: routeIn 280ms cubic-bezier(.2,.7,.2,1);
}
@keyframes routeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 500ms ease, transform 500ms cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* @section 3 Mobile drawer + touch targets */
#mobile-nav { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
#mobile-nav.is-open { transform: translateX(0); }

.ttap { min-height: 48px; }

@media (hover: none) {
  .hover-lift:hover { transform: none; }
}

/* @section 4 Body grid (1.7fr / 1fr on desktop, stack on mobile) */
.body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .body-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

/* @section 5 Cluster map (Leaflet) — dark theme overrides + container sizing */
#cluster-map {
  height: 480px;
  background: #0b1220;
  border-radius: 0.5rem;
}
@media (max-width: 768px) {
  #cluster-map { height: 360px; }
}
.leaflet-container { background: #0b1220 !important; outline: none; }
.leaflet-control-attribution {
  background: rgba(11, 18, 32, 0.85) !important;
  color: #6b7a90 !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: #94a3b8 !important; }
.leaflet-bar a, .leaflet-bar a:hover {
  background: #101828 !important;
  color: #eef1f6 !important;
  border-bottom-color: #1d2a3d !important;
}
.leaflet-bar { border: 1px solid #1d2a3d !important; }
.leaflet-popup-content-wrapper {
  background: #101828 !important;
  color: #eef1f6 !important;
  border: 1px solid #1d2a3d !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-tip { background: #101828 !important; border: 1px solid #1d2a3d !important; }
.leaflet-popup-content { margin: 12px 14px !important; line-height: 1.45 !important; }
.leaflet-popup-close-button { color: #6b7a90 !important; }
.cluster-marker-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #eef1f6;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 0 4px #0b1220, 0 0 6px #0b1220;
  pointer-events: none;
}

/* @section 6 Deal stage funnel grid */
.funnel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .funnel-grid.lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .funnel-grid { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
}

/* @section 7 Nav links (desktop + mobile drawer) */
.nav-link {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  color: #6b7a90;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s, transform .12s;
}
.nav-link:hover { color: #eef1f6; background: rgba(20,184,166,0.06); }
.nav-link:active { transform: scale(0.97); }
.nav-link.active { color: #2dd4bf; background: rgba(20,184,166,0.12); }
.nav-link-mobile {
  display: block;
  padding: 16px 16px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 500;
  color: #eef1f6;
  background: rgba(29,42,61,0.4);
  border: 1px solid rgba(29,42,61,0.6);
  min-height: 56px;
  display: flex;
  align-items: center;
  transition: background .15s, border-color .15s, transform .12s;
}
.nav-link-mobile:active { transform: scale(0.98); }
.nav-link-mobile.active {
  color: #2dd4bf;
  background: rgba(20,184,166,0.12);
  border-color: rgba(20,184,166,0.4);
}

/* @section 8 Popover modal */
#popover.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }