/* -------------------------------------------------------------------------- */
/* Page gutter margins                                                        */
/* -------------------------------------------------------------------------- */

.row {
  margin-left: -8px;
  margin-right: -8px;
}

.row > [class*="col-"] {
  padding-left: 16px;
  padding-right: 16px;
}


/* -------------------------------------------------------------------------- */
/* Map container + summary + controls                                         */
/* -------------------------------------------------------------------------- */

/* Ensure the SVG maps take up full width of the container */
.map-container {
  position: relative;
  margin-bottom: 16px;

  max-width: 1100px; 
  margin-left: auto;
  margin-right: auto;
}

.map-container svg {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1; /* square-ish maps */
  border: 1.1px solid #000;
  border-radius: 5px;
  background-color: #454545;
  display: block;
}

/* Slightly constrain the map + controls column */
/* @media (min-width: 992px) {
  .map-column {
    max-width: 460px;
  }
} */

.map-controls {
  padding: 10px;
  background-color: #454545;
  border-radius: 6px;
  border: 1px solid #ddd;

  max-width: 1100px;
  margin: 0 auto;
}

#summary1 {
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  padding: 4px 15px;

  max-width: 1100px;
  margin: 0 auto;
}

.summary {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 500;
}


/* -------------------------------------------------------------------------- */
/* Year controls                                                              */
/* -------------------------------------------------------------------------- */

/* Year controls */
.year-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0px 14px;
  background: #454545;
  border-radius: 6px;
  margin-top: 12px;
}

#yearSlider {
  width: 200px;
}

#yearLabel {
  font-size: 1.1rem;
  font-weight: 600;
  min-width: 48px;
  text-align: center;
}

#allYearsBtn {
  padding: 3px 16px;
  border-radius: 6px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-size: 13pt;
  font-weight: 600;
}

#allYearsBtn.active {
  background: #000;
  color: #fff;
}


/* -------------------------------------------------------------------------- */
/* Legend inside the map frame                                                */
/* -------------------------------------------------------------------------- */

/* -------- Legend inside the map frame -------- */
.legend-year-label {
  font-size: 1.65rem;
  font-weight: 600;
  color: #fff;
}

.map-legend {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
}

/* Framed legend box */
.legend-inner-box {
  max-width: 220px;
  overflow-x: auto;
  background: #454545ec;
  border: 1px solid #888;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.legend-title {
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 6px;
  text-align: center;
}

.legend-row {
  display: flex;
  flex-direction: column;   /* ONE vertical column */
  gap: 6px;
  align-items: flex-start;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.legend-color-box {
  width: 14px;
  height: 14px;
  border: 1px solid #555;
  border-radius: 2px;
}

/* Legend Toggle Button  */
.legend-toggle-btn {
  background: #6e42c130; /* purple */
  color: #fff;
  border: 2px solid #6f42c1;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.legend-toggle-btn:hover {
  background: #59339d;
}


/* -------------------------------------------------------------------------- */
/* Tooltip style                                                              */
/* -------------------------------------------------------------------------- */

/* Tooltip style */
.province-tooltip {
  position: absolute;
  pointer-events: none;
  background-color: rgba(255,255,255,0.9);
  padding: 4px 8px;
  border: 1px solid #666;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  visibility: hidden;
  z-index: 10;
}


/* -------------------------------------------------------------------------- */
/* Right column layout (province chart blocks)                                */
/* -------------------------------------------------------------------------- */

/* ----------- RIGHT COLUMN LAYOUT ----------- */
/* Border + padding for each province chart block */
.province-chart-set {
  border: 1px solid #888;
  border-radius: 6px;
  padding: 12px;
  background-color: #2f2f2f;
  margin-bottom: 16px;

  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Grid that adapts to screen width */
.province-chart-set > .chart,
.province-chart-set > #monthChart1,
.province-chart-set > #monthChart2 {
  width: 100%;
  max-width: 100%; /* prevent overflow */
}

/* Responsive chart grid */
/* @media (min-width: 576px) {
  .province-chart-set {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: start;
  }

  .province-chart-set h3 {
    grid-column: 1 / -1;
    font-weight: 700;
  }
} */


/* -------------------------------------------------------------------------- */
/* Chart container + shared chart styling                                     */
/* -------------------------------------------------------------------------- */

/* ----------- CHART CONTAINER ----------- */
.charts-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

.chart {
  position: relative; /* make tooltip positioning relative to this */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 10px;
  margin-bottom: -8px; /* reduce from default spacing */
}

.chart-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #fff;
}

/* SVG scales with container */
.responsive-svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0; /* make sure no extra vertical spacing */
}

/* Pie chart slice labels */
.pie-label {
  font-size: 0.75rem;     /* ≈ 15px */
  font-weight: 500;
  letter-spacing: 0.3px;
  fill: #ffffff;
  pointer-events: none;
  user-select: none;
}


/* -------------------------------------------------------------------------- */
/* Month boxes (top months summary)                                           */
/* -------------------------------------------------------------------------- */

/* ----------- MONTH BOXES ----------- */
.responsive-months {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start; /* LEFT */
}

.month-box {
  flex: 1 1 80px;
  max-width: 120px;
  text-align: center;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #2f2f2f;
  width: 90px;
}

.top-months {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.month-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.month-value {
  font-size: 1.1rem;
  font-weight: bold;
  color: #874de3;
}


/* -------------------------------------------------------------------------- */
/* Metric toggle colors + Bootstrap overrides                                 */
/* -------------------------------------------------------------------------- */

/* -------- Metric toggle colors: green and purple-------- */
.metric-cases {
  color: #28a745;
}

.metric-loss {
  color: #6f42c1;
}

/* Highlighted text for Top Months */
.month-value.cases {
  color: #28a745;
}

.month-value.loss {
  color: #9155ff;
}

.btn-outline-primary {
  color: #6f42c1;                 /* Bootstrap purple */
  border-color: #6f42c1;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #6f42c1;
  border-color: #6f42c1;
}

/* Active (checked) state */
.btn-check:checked + .btn-outline-primary {
  color: #fff;
  background-color: #28a745;
  border-color: #6f42c1;
}

/* Focus / accessibility */
.btn-outline-primary:focus,
.btn-check:focus + .btn-outline-primary {
  box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.35);
}