:root {
  --verydarkgrey: #686c6c;
  --darkgrey: #a1a1a1;
  --lightgrey: #bdbfbf;
  --green: #808c73;
  --greenBlk: #718168;
  --yellow: #e5de54;
  --yellowHis: #e6da9b;
  --almostBlack: #303333;
  --offwhite: #f4f4f4;
  --darkGreen: #224722;
  --no-data-color: #dddddd;
  --no-disparity-color:#b3ceb1;
  --hispanic-class-1-color:#e3edf7;
  --hispanic-class-2-color:#cee0f0;
  --hispanic-class-3-color:#86bee2;
  --hispanic-class-4-color:#5999cd;
  --hispanic-class-5-color:#5581bb;
  --black-class-1-color:#fcf9d5;
  --black-class-2-color:#ffefad;
  --black-class-3-color:#fede8a;
  --black-class-4-color:#fdbd68;
  --black-class-5-color:#f2924d;
  --asian-class-4-color: #7fbfc3; /* soft teal */
  --white-class-4-color: #c59ac9; /* muted cool pink */
  --native-american-class-4-color: #9fc49a; /* soft green */
}

body, html {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh; /* full viewport */
  overflow: hidden;
  font-family: jaf-bernina-sans, sans-serif;
  line-height:1.2;
  max-width: 1000px;
}

#map {
  width: 100%;
  min-height: 300px;
  max-height: 600px;
  height: 50vh;
  flex: 0 0 auto; /* fixed at min height, no shrinking */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mapboxgl-ctrl-top-left{
    left: -.25rem;
    top: 3.5rem;
}

#currentRaceDesc{
  font-weight: bold;
  color: var(--black-class-4-color)
}

#mapWidgetsQuery {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    background: var(--lightgrey);
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    display: flex;
    gap: 6px;
}

#mapWidgetsQuery.qbExpanded {
  width: var(--expanded-width);
  /* overflow? */
}
#mapWidgetsQuery.qbCollapsed {
  width: var(--collapsed-width);
  padding: .5rem 1rem;
  /* overflow? */
}

#resizeQueryButton {
  margin: -.3rem;
  /* padding: .3rem .7rem;  */
  cursor: pointer; 
}

#mapWidgetsRace {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    background: var(--lightgrey);
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    /* display: flex; */
    gap: 6px;
}


.search_query{
    margin-bottom: 4px;
}


.search_query input {
    padding: 0px 2em;
    font-size: 14px;
}

button {
    /* background-color: var(--green); */
    background-color: var(--verydarkgrey); /* generic color to not match one data set */
    color: var(--offwhite);
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

button:hover {
    background-color:var(--darkgrey);
}

/* disabled control style: greyed out, not-allowed cursor, no hover color change */
.control-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.control-disabled:hover {
  /* keep same background on hover so color doesn't change */
  background-color: var(--darkgrey) !important;
  cursor: not-allowed;
}

/* map control buttons */
#mapWidgetsQuery button#full_extent,
#backToStateMapBtn {
  display: block;
  /* margin-top: 6px; */
  width: auto;
  box-sizing: border-box;
  padding: .5rem .6rem;
  border-radius: 2px;
  font-size: 0.9rem;
  height: 2.2rem;
}
#mapWidgetsQuery button#full_extent {
  padding: .3rem;
  /* min-width: 5.5rem; */
}
#mapWidgetsQuery button#backToStateMapBtn {
  min-width: 6.75rem;
}

.control-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.race-toggle, .aggregation-toggle{
  display: inline-flex;
  border: 1.5px solid var(--verydarkgrey);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 2px;
}

.race-selectBtn, .agg-selectBtn {
  background-color: transparent;
  color: var(--black);
  border: none;
  padding: 0px 8px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.race-selectBtn:hover, .agg-selectBtn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.race-selectBtn.active, .agg-selectBtn.active {
  background-color: var(--green);
  color: var(--offwhite);
  font-weight: bold;
}

#race-selectBlk.race-selectBtn.active {
  background-color: var(--black-class-4-color);
  color: var(--almostBlack);
  font-weight: bold;
}
.agg-selectHis.agg-selectBtn.active {
  background-color: var(--hispanic-class-4-color);
  color: var(--offwhite);
  font-weight: bold;
}

.agg-selectBlk.agg-selectBtn.active {
  background-color: var(--black-class-4-color);
  color: var(--almostBlack);
  font-weight: bold;
}
#race-selectHis.race-selectBtn.active {
  background-color: var(--hispanic-class-4-color);
  color: var(--offwhite);
  font-weight: bold;
}

/* Shared styles for the lower containers */

#factSheetContainer {
  display: none;                /* hidden by default */
  flex-direction: column;       /* stack rows vertically */
  background: var(--offwhite);
  max-height: 50vh;
  overflow: hidden;   /* or just remove overflow entirely */
}

/* Content row: take remaining space */
#factSheetContainer > .opportunity-row:not(#factsheetTitle) {
  flex: 1 1 auto;
  min-height: 0;      /*for nested scrolling */
}

#factSheetContainer h2{
  margin: 0;
}

#factSheetContainer h3 {
  margin: 0.5rem 0 0 0;
  font-weight: 700;
}

.district-dropdown {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'><path fill='%23333' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 6px 36px 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  font-size: 1.05rem;
  color: #111;
  cursor: pointer;
  max-width: 70%;
}

.district-dropdown:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,71,34,0.08);
}

.factsheet-label {
  font-weight: 700;
  font-size: 1.05rem;
  vertical-align: middle;
}

/* Lower half containers */
#infoContainer,
#factSheetContainer{
  flex: 1;                      /* take up remaining space */
  overflow: auto;               /* scroll if content is long */
  background: #f9f9f9;
  padding: 10px 20px 0 20px;
  line-height: 1;
}

/* whichever is shown will stretch */
#infoContainer.show,
#factSheetContainer.show {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;       /* important */
}

h2 {
  flex: 0;
  margin-bottom: 0;
  font-size: 1.1rem;
}

#factSheetContainer h2 {
  /* font-variant: small-caps; */
  font-weight: 600;
}

h3 {
  /* flex: 0; */
  display:inline;
  margin-bottom: 0;
  font-size: 1rem;
}

.opportunity-row {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0;
}

/* .container :first-child {
  /* Allow the first child to shrink 
  flex-shrink: 1;
   Optional: Set a starting point for shrinking. 
     Using flex-basis: 0 or width: 0 might be useful if you want it to shrink as much as possible. 
} */

/* layout columns inside each row */
.opportunity-column {
  display: flex;
  flex-direction: column;       /* stack content inside each column */
  align-items: flex-start;      /* left-align text and charts */
  /* min-width: 280px;             responsive floor 280, but no mid-width best for state fact sheet in iframe */
  gap: 0.5em;
   flex: 1 1 300px;                /* keep original responsive behavior */
}


/* Make RIGHT column scroll inside the capped container */
#factsheet-right {
  overflow: auto;                 /* only this div scrolls */
  min-height: 0;                  /* CRITICAL for scrolling inside flex/grid */
  /* Optional: set a max-height to ensure it doesn't bleed out of the container */
  max-height: 100%;               /* fill available height of the parent container */
}

#factsheet-left{
 display: block;
}

#factsheetTitle {
  flex: 0 0 auto;   /* do not grow, do not shrink */
}


/* Responsive stacking for narrow screens */
@media (max-width: 700px) {
  .opportunity-row {
    flex-direction: column;     /* stack columns vertically */
  }

  .opportunity-column {
    width: 100%;                /* take full width */
  }

  #factSheetContainer {
    gap: 15px;                  /* slightly larger vertical spacing on small screens */
  }
}

/* popup */

.popup-content {
  font-family: sans-serif;
  font-size: 13px;
  pointer-events: none !important;
}

/* prevent errors with tooltip when moving mouse quickly */
.mapboxgl-popup, .mapboxgl-popup-tip, .mapboxgl-popup-content{
  pointer-events: none !important;
}

.arrow {
  font-size: 20px;
  line-height: 1;
}

.arrow-down {
  color: var(--green);
}

.arrow-up {
  color: var(--yellow);
}

.opportunity-text {
  line-height: 1.2;
}

.opportunity-estimates{
  gap:0.5em;
  align-items: center;
}

#popup_districtOppEstBullet{
  display:inline-block;
  width:0.6rem;
  height:0.6rem;
  border-radius:50%;
  margin-left:4px;
}

/* end popup */

/* State Overview Container */
#StateOverviewContainer {
    display: none;
    position: absolute;
    top: 0px;
    left : 700px;
    z-index: 10;
    background: var(--lightgrey);
    width: 40vh;
    height: 50vh;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    gap: 6px;
    opacity: 0.8;
}

/* map legend */

.map-legend {
  /* display: flex; */
  flex-direction: column;
  font-size: 13px;
  font-family: sans-serif;
  gap: 4px;
  width: 100%; 
}

/* Wrap chips + labels together */
.legend-main {
  display: flex;
  flex-direction: column; /* stack chips, labels, breaks */
  width: 100%;             /* fill parent width */
  gap: 4px;
}

.legend-swatch {
  width: 1rem;
  height: 1rem;
  flex-grow: 1;
  text-align: center;
      font-size: 0.5rem;
  /* border-radius: 3px; */
}

.legend-chips {
  display: flex;
  overflow: hidden; 
  border-radius: 3px;
  align-items: stretch;
  /* gap: 4px; */
  /* position: relative; */
}

.legendBreakVal{
  /* align-self: flex-start; */
  text-align: end;
  /* position: absolute;
  left: 50%;
  transform: translateX(-50%);  */
}

/* Top labels */
.legend-labels-top {
  display: flex;
  justify-content: end;
  width: 100%;       /* make it stretch the full legend width */
  box-sizing: border-box; /* include padding if any */
  font-size: 0.7rem;
}

#legendHigh{
  /* color: var(--offwhite) */
}

/* .legend-label {
  font-size: 12px;
  white-space: nowrap;
} */
/* Class breaks below */
.legend-breaks {
  display: flex;
  text-align: end;
  flex-direction: row;
  align-items: stretch;
  font-size: 0.55rem;
}


.legend-labels {
  transform: rotate(-70deg); /* angle text */
  margin-bottom: 2px;
}
/* ---------- Black legend ---------- */
.legend-blk .class-5 { background: var(--black-class-5-color); }
.legend-blk .class-4 { background: var(--black-class-4-color); }
.legend-blk .class-3 { background: var(--black-class-3-color); }
.legend-blk .class-2 { background: var(--black-class-2-color); }
.legend-blk .class-1 { background: var(--black-class-1-color); }

/* ---------- Hispanic legend ---------- */
.legend-his .class-5 { background: var(--hispanic-class-5-color); }
.legend-his .class-4 { background: var(--hispanic-class-4-color); }
.legend-his .class-3 { background: var(--hispanic-class-3-color); }
.legend-his .class-2 { background: var(--hispanic-class-2-color); }
.legend-his .class-1 { background: var(--hispanic-class-1-color); }

/* ---------- No data ---------- */
.legend-swatch.na {
  background: var(--no-data-color);
}
.legend-swatch.nd {
  background: var(--no-disparity-color);
}

/* .legend-ticks {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #333;
  line-height: 1.1;
} */


/* end legend */



/* toggle for comp picker */
/* Container for the district composition toggle */
.districtCompToggle {
  display: flex;
  align-items: center;
  gap: 10px; /* space between options */
  margin-bottom: 5px;
  font-size: 0.9em;
}

/* Hide default radio buttons */
.districtCompToggle input[type="radio"] {
  display: none;
}

/* Style labels as buttons */
.districtCompToggle label {
  padding: 5px 12px;
  border: 1px solid #aaa;
  border-radius: 20px;
  cursor: pointer;
  background-color: #f0f0f0;
  transition: all 0.2s ease;
  user-select: none;
}

/* Active state */
.districtCompToggle input[type="radio"]:checked + label {
  background-color: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

/* tooltip */
.mapboxgl-popup {
  z-index: 11; /*so it appears over the widgets*/
}

.no-geometry-notice {
  background: #fff7e6; 
  border: 1px solid #f0c36d;
  color: #333;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.no-geometry-notice i.fa {
  color: #c57b00;
  font-size: 1.15rem;
}

.map-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(128, 128, 128, 0.4);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 1);
  border-top: 5px solid var(--green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}