/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Data Map Popup Styles */
.mapboxgl-popup-content {
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.data-map-popup {
  font-family: system-ui, -apple-system, sans-serif;
  min-width: 260px;
}

.data-map-popup-header {
  padding: 14px 16px 10px;
}

.data-map-popup-place {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.data-map-popup-meta {
  font-size: 13px;
  color: #64748b;
  margin-top: 2px;
}

.data-map-popup-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.data-map-popup-score-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.data-map-popup-score-badge {
  color: white;
  font-weight: 700;
  font-size: 14px;
  padding: 2px 10px;
  border-radius: 9999px;
}

.data-map-popup-indicators {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.data-map-popup-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.data-map-popup-indicator-name {
  flex: 1;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-map-popup-indicator-dots {
  display: flex;
  gap: 2px;
  align-items: center;
}

.data-map-popup-indicator-value {
  width: 26px;
  text-align: right;
  color: #64748b;
  font-weight: 500;
}

.data-map-popup-details-btn {
  display: block;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #3b82f6;
  text-decoration: none;
  border-top: 1px solid #e2e8f0;
}

.data-map-popup-details-btn:hover {
  background: #f1f5f9;
}

.data-map-popup-updated {
  padding: 8px 16px;
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  border-top: 1px solid #e2e8f0;
}

/* ── Place Facts List Styles ── */
.place-facts ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.place-facts ul li {
  margin-bottom: 0.375rem;
}

.place-facts ul li:last-child {
  margin-bottom: 0;
}

/* ── Print Stylesheet for PlaceLanguage Show Page ── */
@media print {
  /* Hide chrome: header, footer, nav, back link, CTAs, map, sidebar extras */
  header,
  footer,
  nav,
  [data-print="hide"],
  .mapboxgl-ctrl-logo,
  .mapboxgl-ctrl-attrib {
    display: none !important;
  }

  /* Remove fixed/sticky positioning */
  body {
    padding-top: 0 !important;
  }
  main {
    padding-top: 0 !important;
  }

  /* Reset background for paper */
  body, main, .bg-white, .bg-background {
    background: white !important;
    color: black !important;
  }

  /* Flatten to single column */
  .lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .lg\:col-span-2 {
    grid-column: span 1 !important;
  }

  /* Remove shadows and borders for cleaner print */
  .shadow-lg {
    box-shadow: none !important;
  }

  /* Keep cards but lighten borders */
  .border-border {
    border-color: #e2e8f0 !important;
  }

  /* Ensure score color badges print with background */
  .bg-red-500, .bg-orange-500, .bg-yellow-500, .bg-lime-500, .bg-green-500,
  .bg-red-100, .bg-orange-100, .bg-yellow-100, .bg-green-100 {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Ensure progress bars print with color */
  .rounded-full[style*="width"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Ensure radar chart SVG prints */
  [data-controller="radar-chart"] svg {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide hover tooltips */
  .group-hover\/indicator\:visible {
    display: none !important;
  }

  /* Avoid page breaks inside cards */
  .rounded-lg {
    break-inside: avoid;
  }

  /* ── Compact Strengths & Weaknesses + Indicators for single page ── */

  /* Keep strengths/weaknesses and indicators together on one page */
  [data-print="indicators-group"] {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Tighten card padding */
  [data-print="indicators-group"] .p-6 {
    padding: 0.35rem 0.5rem !important;
  }

  /* Smaller headings */
  [data-print="indicators-group"] h2 {
    font-size: 0.75rem !important;
    margin-bottom: 0.15rem !important;
  }

  /* Compress strengths/weaknesses list spacing */
  [data-print="indicators-group"] .space-y-2 > * + * {
    margin-top: 0.05rem !important;
  }
  [data-print="indicators-group"] .mb-3 {
    margin-bottom: 0.15rem !important;
  }
  [data-print="indicators-group"] .gap-6 {
    gap: 0.25rem !important;
  }

  /* Compress indicator list: remove progress bars, tighten spacing */
  [data-print="indicators-group"] .space-y-6 > * + * {
    margin-top: 0.15rem !important;
  }
  [data-print="indicators-group"] .mb-6 {
    margin-bottom: 0.15rem !important;
  }
  [data-print="indicators-group"] .mb-2 {
    margin-bottom: 0.05rem !important;
  }

  /* Hide the progress bars in print — score badge is sufficient */
  [data-print="indicators-group"] .bg-gray-200.rounded-full {
    display: none !important;
  }

  /* Strip colored backgrounds from score badges — plain text */
  [data-print="indicators-group"] .bg-red-500,
  [data-print="indicators-group"] .bg-orange-500,
  [data-print="indicators-group"] .bg-yellow-500,
  [data-print="indicators-group"] .bg-lime-500,
  [data-print="indicators-group"] .bg-green-500 {
    background: none !important;
    color: #333 !important;
    padding: 0 !important;
    font-weight: 600 !important;
  }

  /* Shrink indicator descriptor text */
  [data-print="indicators-group"] .text-muted-foreground {
    font-size: 0.6rem !important;
    line-height: 1.15 !important;
  }

  /* Shrink indicator name */
  [data-print="indicators-group"] .font-medium.text-foreground {
    font-size: 0.7rem !important;
  }

  /* Shrink score text in lists */
  [data-print="indicators-group"] .text-sm {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
  }

  /* Remove gaps between the two cards */
  [data-print="indicators-group"] > .bg-white + .bg-white {
    margin-top: 0.2rem !important;
  }

  /* Minimal border-radius */
  [data-print="indicators-group"] .rounded-lg {
    border-radius: 3px !important;
  }

  /* Print header branding */
  [data-print="header"] {
    display: block !important;
  }

  /* Page margins */
  @page {
    margin: 0.75in;
    size: letter portrait;
  }
}