/* public/css/findings.css */

:root {
   --nbta-orange: #eea01d;
   --nbta-orange-deep: #d98d12;
   --nbta-red: #ef3e33;
   --nbta-red-deep: #cc2f26;
   --nbta-grey-900: #1f1c17;
   --nbta-grey-700: #5f5a54;
   --nbta-grey-500: #9f9ba6;
   --nbta-grey-200: #e7e3dc;
   --nbta-grey-100: #f5f2ec;
   --nbta-white: #ffffff;
}

body {
   background: linear-gradient(180deg, #fbfaf8 0%, #f3efe8 100%);
   color: var(--nbta-grey-900);
}

.report-intro-band {
   background:
      linear-gradient(180deg, rgba(238, 160, 29, 0.08) 0%, rgba(238, 160, 29, 0.02) 100%), var(--nbta-grey-100);
   border-top: 1px solid rgba(31, 28, 23, 0.08);
   border-bottom: 1px solid rgba(31, 28, 23, 0.08);
}

.report-intro-card,
.report-sidebar-card,
.report-pane-card,
.report-chart-card {
   background: rgba(255, 255, 255, 0.96);
   border: 1px solid rgba(95, 90, 84, 0.16);
   border-radius: 1rem;
   box-shadow: 0 0.5rem 1.5rem rgba(31, 28, 23, 0.07);
}

.report-intro-card,
.report-sidebar-card,
.report-pane-card {
   padding: 1.5rem;
}

.report-intro-card {
   position: relative;
   overflow: hidden;
}

.report-intro-card::before {
   content: '';
   position: absolute;
   inset: 0 auto 0 0;
   width: 8px;
   background: linear-gradient(180deg, var(--nbta-orange) 0%, var(--nbta-red) 100%);
}

.report-chart-card {
   padding: 1rem;
}

.report-eyebrow {
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--nbta-red);
}

.report-intro-meta {
   display: grid;
   gap: 0.9rem;
}

.report-intro-meta-item {
   padding: 0.9rem 1rem;
   background: linear-gradient(180deg, rgba(238, 160, 29, 0.08) 0%, rgba(255, 255, 255, 0.96) 100%);
   border: 1px solid rgba(238, 160, 29, 0.18);
   border-radius: 0.85rem;
}

.report-intro-meta-label {
   font-size: 0.78rem;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--nbta-grey-700);
   margin-bottom: 0.2rem;
}

.report-intro-meta-value {
   font-weight: 600;
   line-height: 1.35;
   color: var(--nbta-grey-900);
}

.report-sidebar {
   top: 1.5rem;
}

.report-nav {
   gap: 0.65rem;
}

.report-nav .nav-link {
   text-align: left;
   border: 1px solid rgba(95, 90, 84, 0.14);
   border-radius: 0.85rem;
   background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
   color: var(--nbta-grey-900);
   padding: 0.9rem 1rem;
   box-shadow: 0 0.2rem 0.75rem rgba(31, 28, 23, 0.04);
   transition:
      transform 0.15s ease,
      box-shadow 0.15s ease,
      border-color 0.15s ease,
      background 0.15s ease;
}

.report-nav .nav-link:hover,
.report-nav .nav-link:focus-visible {
   transform: translateY(-1px);
   border-color: rgba(238, 160, 29, 0.45);
   box-shadow: 0 0.45rem 1rem rgba(31, 28, 23, 0.08);
}

.report-nav .nav-link.active {
   background: linear-gradient(135deg, var(--nbta-orange) 0%, var(--nbta-orange-deep) 100%);
   border-color: var(--nbta-orange-deep);
   color: var(--nbta-white);
   box-shadow: 0 0.65rem 1.5rem rgba(217, 141, 18, 0.28);
}

.report-nav .nav-link.active .report-nav-desc {
   opacity: 0.95;
}

.report-nav-title {
   display: block;
   font-weight: 700;
   margin-bottom: 0.2rem;
   line-height: 1.25;
}

.report-nav-desc {
   display: block;
   font-size: 0.88rem;
   line-height: 1.3;
   opacity: 0.88;
}

.report-pane-card section:last-child {
   margin-bottom: 0;
}

.report-pane-card h2,
.report-pane-card h3,
.report-sidebar-card h2,
.report-intro-card h2 {
   color: var(--nbta-grey-900);
}

.report-pane-card h3 {
   position: relative;
   padding-left: 1rem;
}

.report-pane-card h3::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0.2em;
   bottom: 0.2em;
   width: 4px;
   border-radius: 999px;
   background: linear-gradient(180deg, var(--nbta-orange) 0%, var(--nbta-red) 100%);
}

.report-pane-card a {
   color: var(--nbta-red-deep);
}

.report-pane-card a:hover {
   color: var(--nbta-red);
}

.report-pane-card ul li::marker {
   color: var(--nbta-red);
}

.report-chart-card {
   padding: 1rem;
   min-height: 380px;
   border-top: 4px solid var(--nbta-orange);
   background: linear-gradient(180deg, rgba(238, 160, 29, 0.06) 0%, rgba(255, 255, 255, 0.98) 18%), #fff;
}

.report-chart-card canvas {
   width: 100% !important;
   height: 320px !important;
}

#tpms-summary-cards .card,
.reports-wrapper .report-card {
   border: 1px solid rgba(95, 90, 84, 0.14);
   border-radius: 0.95rem;
   box-shadow: 0 0.35rem 1rem rgba(31, 28, 23, 0.05);
}

#tpms-summary-cards .card,
.reports-wrapper .report-card,
.reports-wrapper .card-body {
   background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
}

#tpms-summary-cards .card-title,
.dashreport-value {
   color: var(--nbta-red);
}

#tpms-summary-cards .card-text,
.dashreport-title {
   color: var(--nbta-grey-700);
}

.custom-popup .leaflet-popup-content-wrapper {
   background: var(--nbta-grey-900);
   color: #fff;
   font-size: small;
}

.leaflet-popup-tip {
   background: var(--nbta-grey-900);
   color: var(--nbta-grey-900);
   box-shadow: none;
}

.legend-box {
   background-color: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(95, 90, 84, 0.16);
   border-radius: 0.8rem;
   padding: 10px;
   max-width: 220px;
   box-shadow: 0 0.35rem 1rem rgba(31, 28, 23, 0.08);
}

.legend-title {
   font-size: 0.78rem;
   font-weight: 700;
   margin-bottom: 0.45rem;
   text-align: center;
   color: var(--nbta-grey-900);
}

.legend-text {
   font-size: 0.75rem;
   color: var(--nbta-grey-700);
}

.chart-wrap-donut {
   position: relative;
   height: 340px;
}

@media (max-width: 768px) {
   .chart-wrap-donut {
      height: 280px;
   }
}

@media (max-width: 991.98px) {
   .report-sidebar {
      position: static !important;
      top: auto;
   }

   .report-nav .nav-link {
      padding: 0.85rem 0.9rem;
   }

   .report-intro-card::before {
      width: 100%;
      height: 6px;
      inset: 0 0 auto 0;
   }
}

/* --------------------------------------------------
   Mobile readability improvements
-------------------------------------------------- */
@media (max-width: 767.98px) {
   /* Shorter hero */
   .hero-section {
      min-height: 36vh !important;
      background-position: center center !important;
   }

   .hero-section .display-4,
   .hero-section h1 {
      font-size: 1.9rem;
      line-height: 1.1;
   }

   .hero-section .lead {
      font-size: 1rem;
      line-height: 1.35;
      margin-bottom: 0;
   }

   /* Tighter overall spacing */

   .report-body {
      padding-top: 1rem !important;
      padding-bottom: 1.25rem !important;
   }

   .report-body .container {
      max-width: 100%;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
   }

   .report-intro-card,
   .report-sidebar-card,
   .report-pane-card,
   .report-chart-card {
      padding: 0.85rem;
      border-radius: 0.85rem;
   }

   .report-pane-card section {
      margin-bottom: 1.5rem !important;
   }

   /* Mobile: use a compact 2-column grid for section navigation */
   .report-nav {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.8rem;
   }

   .report-nav .nav-link {
      min-width: 0;
      width: 100%;
      padding: 0.75rem 0.8rem;
      margin-bottom: 0 !important;
      text-align: center;
      border-radius: 0.8rem;
   }

   .report-nav-title {
      margin-bottom: 0;
      font-size: 0.95rem;
      line-height: 1.2;
   }

   .report-nav-desc {
      display: none;
   }

   /* Stack layout cleanly */
   .report-sidebar-col {
      margin-bottom: 1rem;
   }

   /* Better type sizing */
   .report-pane-card h2,
   .report-pane-card h3 {
      line-height: 1.2;
   }

   .report-intro-card p,
   .report-intro-card li,
   .report-pane-card p,
   .report-pane-card li {
      font-size: 0.97rem;
      line-height: 1.5;
   }

   /* More compact charts */
   .report-chart-card {
      min-height: 280px;
   }

   .report-chart-card canvas {
      height: 220px !important;
      max-height: 220px !important;
   }

   /* More compact maps */
   #map-wrapper-pub,
   #map-wrapper-pub2,
   #map,
   #map2 {
      height: 45vh !important;
      min-height: 320px;
   }

   /* Smaller legend for phone screens */
   .legend-box {
      max-width: 150px;
      padding: 6px 8px;
   }

   .legend-title {
      font-size: 0.72rem;
      margin-bottom: 0.25rem;
   }

   .legend-text {
      font-size: 0.68rem;
      line-height: 1.2;
   }

   .legend-position {
      right: 6px;
      bottom: 10px;
   }

   /* Metric / summary cards breathe better on mobile */
   .report-stat-card,
   .summary-card,
   .metric-card {
      padding: 0.85rem;
   }

   .report-intro-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 0.5rem;
   }

   .report-intro-meta-item {
      padding: 0.45rem 0.7rem;
      background: rgba(238, 160, 29, 0.08);
      border: 1px solid rgba(238, 160, 29, 0.16);
   }

   .report-intro-meta-label {
      display: inline;
      margin: 0 0.25rem 0 0;
      font-size: 0.72rem;
   }

   .report-intro-meta-value {
      display: inline;
      font-size: 0.88rem;
      font-weight: 600;
   }

   /* --- TPMS summary cards (tight + compact) --- */
   .tpms-summary-card {
      padding: 0.7rem 0.75rem;
      border-radius: 0.75rem;
   }

   .tpms-summary-title {
      font-size: 0.75rem;
      margin-bottom: 0.15rem;
   }

   .tpms-summary-value {
      font-size: 1.25rem;
      line-height: 1.1;
   }

   .tpms-summary-sub {
      font-size: 0.75rem;
   }

   /* --- General report cards --- */
   .report-pane-card,
   .report-chart-card {
      padding: 0.85rem;
      border-radius: 0.85rem;
   }

   /* Optional: slightly tighter headings inside cards */
   .report-pane-card h2,
   .report-pane-card h3 {
      margin-bottom: 0.5rem;
   }

   /* Optional: tighten paragraph spacing */
   .report-pane-card p {
      margin-bottom: 0.6rem;
   }
}

@media (max-width: 575.98px) {
   /* Extra small phones */
   .hero-section {
      min-height: 32vh !important;
   }

   .hero-section .display-4,
   .hero-section h1 {
      font-size: 1.65rem;
   }

   .hero-section .lead {
      font-size: 0.95rem;
   }

   .report-intro-card,
   .report-sidebar-card,
   .report-pane-card,
   .report-chart-card {
      padding: 0.9rem;
   }

   .report-nav {
      gap: 0.5rem;
   }

   .report-nav .nav-link {
      padding: 0.7rem 0.7rem;
      font-size: 0.9rem;
   }

   .report-nav-title {
      font-size: 0.9rem;
   }

   .report-chart-card {
      min-height: 250px;
   }

   .report-chart-card canvas {
      height: 200px !important;
      max-height: 200px !important;
   }

   .legend-box {
      max-width: 135px;
   }

   .legend-title,
   .legend-text {
      font-size: 0.65rem;
   }
}