/* app.css — PDO-specific tweaks layered after mspossom_theme/mspossom.css.
   Brand hexes come from the theme; only teal/paper tints are repeated here. */

/* Proportional percent bars inside gt tables (see gt_pct_bar in R/tables.R). */
.gt-bar-wrap {
  position: relative;
  min-width: 72px;
  height: 1.25rem;
  background: #f0f3f2;
  border-radius: 3px;
  overflow: hidden;
}

.gt-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: #23a48b55;
  border-right: 2px solid #23a48b;
}

.gt-bar-wrap span {
  position: relative;
  display: block;
  padding: 0 0.35rem;
  font-size: 0.8rem;
  line-height: 1.25rem;
  text-align: right;
}

/* gt tables fill their card/accordion width. */
.gt_table {
  width: 100% !important;
}

/* Sidebar helper note. */
.sidebar-note {
  font-size: 0.85rem;
  color: var(--brand-muted, #667085);
  margin-bottom: 0;
}

/* Breathing room between stacked cards/accordions inside tab panels. */
.tab-pane .card,
.tab-pane .accordion {
  margin-bottom: 1rem;
}

/* Map fills its card without inner padding. */
.tab-pane .card .leaflet-container {
  border-radius: 0 0 6px 6px;
}

/* ---- Map: circle-marker legends ------------------------------------------ */
/* The participant/DOSE choropleth legends keep leaflet's square swatches; the
   two point overlays get round ones to match their circle markers. */
.leaflet-container .legend-overlay i {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin-top: 3px;
}
.leaflet-container .legend-overlay span span {
  color: #667085;
  font-size: 11px;
}

/* ---- Data Selection pickers ---------------------------------------------- */
/* bootstrap-select greys the button text whenever nothing is ticked. Here the
   empty state is the meaningful default ("All counties"), not an unset field,
   so it gets normal ink instead of placeholder grey. */
.app-sidebar .bootstrap-select .filter-option-inner-inner {
  color: var(--brand-ink, #1F2937);
}
.app-sidebar .bootstrap-select .dropdown-toggle.bs-placeholder,
.app-sidebar .bootstrap-select .dropdown-toggle.bs-placeholder:hover,
.app-sidebar .bootstrap-select .dropdown-toggle.bs-placeholder:focus {
  color: var(--brand-ink, #1F2937);
}
/* Match the neighbouring selectInput's height and border. */
.app-sidebar .bootstrap-select .dropdown-toggle {
  border: 1px solid var(--brand-line, #D9DEE8);
  background: #fff;
}