/* /globe: (tracking)/globe/globe.css verbatim, plus the page shell. */
/* ============================================================================
 * FILE:  globe.css
 * ROLE:  STYLESHEET
 *
 * PURPOSE:
 *   Map marker and MapLibre popup styles for the globe page
 *
 * @type styles
 * @path src/app/(tracking)/globe/globe.css
 *
 * @date 2026-02-26
 * @updated 2026-02-27
 * ========================================================================== */

/* City Marker */
.pin-city {
  background-color: rgba(236, 72, 153, 0.6);
  border-color: rgba(236, 72, 153, 0.1);
}

/* Place Marker */
.pin-place {
  background-color: rgba(168, 85, 247, 0.6);
  border-color: rgba(168, 85, 247, 0.1);
}

/* Airport Marker */
.pin-airport {
  background-color: rgba(244, 63, 94, 0.6);
  border-color: rgba(244, 63, 94, 0.1);
}

/* Country Marker */
.pin-country {
  background-color: rgba(34, 197, 94, 0.6);
  border-color: rgba(34, 197, 94, 0.1);
}

/* Neighborhood Marker */
.pin-neighborhood {
  background-color: rgba(249, 115, 22, 0.6);
  border-color: rgba(249, 115, 22, 0.1);
}

/* Hotel Marker */
.pin-hotel {
  background-color: rgba(250, 204, 21, 0.6);
  border-color: rgba(250, 204, 21, 0.1);
}

/* Park Marker */
.pin-park {
  background-color: rgba(16, 185, 129, 0.6);
  border-color: rgba(16, 185, 129, 0.1);
}

/* Building Marker */
.pin-building {
  background-color: rgba(59, 130, 246, 0.6);
  border-color: rgba(59, 130, 246, 0.1);
}

/* Popup Styles - matching comments.tsx bento design */
.maplibregl-popup {
  max-width: min(320px, calc(100vw - 1.5rem)) !important;
  font-family: inherit;
}

.maplibregl-popup-content {
  padding: 0 !important;
  border-radius: 0 !important;
  background: hsl(var(--background)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid hsl(var(--border)) !important;
  position: relative !important;
}

.maplibregl-popup-tip {
  display: none !important;
}

/* Close button - bento cell style like comments.tsx avatar cell */
.maplibregl-popup-close-button {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 1.25rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid hsl(var(--border)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.maplibregl-popup-close-button:hover {
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--muted) / 0.3) !important;
}

/* Location Popup Content Styles */
.location-popup {
  min-width: min(280px, calc(100vw - 1.5rem));
}

/* Bento row - flex container with stretch */
.location-popup-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid hsl(var(--border));
}

.location-popup-row:last-child {
  border-bottom: none;
}

/* Icon cell - fixed width like avatar in comments */
.location-popup-icon {
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

/* Name cell - flex grow */
.location-popup-name {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  border-right: 1px solid hsl(var(--border));
  min-height: 2.75rem;
}

/* Type cell - fixed content width */
.location-popup-type {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  padding-right: 3.5rem; /* space for close button */
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 2.75rem;
}

/* Stat cells */
.location-popup-stat {
  flex: 1;
  padding: 0.625rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
}

.location-popup-stat:first-child {
  border-right: 1px solid hsl(var(--border));
}

.location-popup-stat-label {
  font-size: 0.625rem;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.location-popup-stat-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

/* Description */
.location-popup-description {
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  border-bottom: 1px solid hsl(var(--border));
}

/* Action buttons row */
.location-popup-actions {
  border-bottom: none;
}

.location-popup-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border: none;
  min-height: 2.75rem;
}

.location-popup-button:first-child {
  border-right: 1px solid hsl(var(--border));
}

.location-popup-button:hover {
  background: hsl(var(--muted) / 0.3);
  color: hsl(var(--foreground));
}

/* =============================================================================
 * HUB CARD — bento style matching popups
 * ============================================================================= */

.globe-hub {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 10;
  min-width: 240px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Shared row style — same pattern as location-popup-row */
.globe-hub-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid hsl(var(--border));
}

.globe-hub-row:last-child {
  border-bottom: none;
}

/* Name row */
.globe-hub-name {
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: -0.01em;
}

/* Role row */
.globe-hub-role {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* Social row */
.globe-hub-social {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 0.15s ease;
}

.globe-hub-social:hover {
  color: hsl(var(--foreground));
}

/* Places count row */
.globe-hub-count {
  flex: 1;
  padding: 0.625rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Toggle row — split buttons like popup actions */
.globe-hub-toggle-row {
  border-bottom: none;
}

.globe-hub-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border: none;
  min-height: 2.5rem;
}

.globe-hub-toggle-btn:not(:last-child) {
  border-right: 1px solid hsl(var(--border));
}

.globe-hub-toggle-btn:hover {
  background: hsl(var(--muted) / 0.3);
  color: hsl(var(--foreground));
}

.globe-hub-toggle-btn.active {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}

.dark .globe-hub-toggle-btn.active {
  background: hsl(0 0% 85%);
}

/* Mobile: smaller hub, lifted above the attribution / ⌘K row */
@media (max-width: 640px) {
  .globe-hub {
    bottom: 3.75rem;
    left: 1rem;
    min-width: 200px;
  }

  /* Keep MapLibre's attribution clear of the site's fixed ⌘K button (bottom-right, 2.5rem + 1.25rem inset) */
  .maplibregl-map .maplibregl-ctrl-bottom-right {
    right: 3.75rem;
  }
}

/* page shell (client.tsx) */
.globe-root { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.globe-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--background));
  z-index: 10;
}
.globe-cover[hidden] { display: none; }
.globe-cover-t { font-size: 1.125rem; line-height: 1.75rem; }
.globe-cover-t.err { color: rgb(239 68 68); }
.globe-map { width: 100%; height: 100%; background-color: hsl(var(--background)); }
.globe-attr { position: absolute; bottom: 1rem; right: 1rem; font-size: 10px; color: rgb(107 114 128); }
.globe-pin {
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  border-radius: .75rem;
  border-width: 2px;
  background-clip: content-box;
  padding: .125rem;
}
@media print {
  .globe-root { display: none !important; }
}