/* stats-chips.css — modern pill chips with matching-color bubbles, responsive wrap */

/* Ensure the chip-like controls look unified */
#pillFresh, #pillStale, #toggleDup, #toggleProx {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #223346;
  background: #0f1a28;
  color: #e6eef7;
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
  margin: 4px 6px 6px 0;
}
#pillFresh:hover, #pillStale:hover, #toggleDup:hover, #toggleProx:hover {
  background: #152235;
  border-color: #2d4d6a;
}
#pillFresh.active, #pillStale.active, #toggleDup.active, #toggleProx.active {
  box-shadow: 0 0 0 3px rgba(20,184,166,.15);
}

/* ─── Color accents per chip ─── */

/* FRESH → vibrant green */
#pillFresh {
  border: 1px solid #22c55e;            /* strong green border */
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.35);
  background: rgba(34,197,94,.08);      /* subtle green tint */
}
#pillFresh:hover {
  background: rgba(34,197,94,.18);
  border-color: #4ade80;                /* lighter green hover */
}
#pillFresh.active {
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}

/* STALE → amber/yellow */
#pillStale {
  border: 1px solid #f59e0b;            /* amber border */
  box-shadow: inset 0 0 0 1px rgba(245,158,11,.35);
  background: rgba(245,158,11,.08);     /* soft amber tint */
}
#pillStale:hover {
  background: rgba(245,158,11,.18);
  border-color: #fbbf24;
}
#pillStale.active {
  box-shadow: 0 0 0 3px rgba(245,158,11,.25);
}

/* DEAD → red alert tone */
#pillDead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #ef4444;            /* bold red border */
  background: rgba(239,68,68,.08);      /* faint red tint */
  color: #fee2e2;                       /* light pinkish text */
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
  margin: 4px 6px 6px 0;
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.35);
}
#pillDead:hover {
  background: rgba(239,68,68,.18);
  border-color: #f87171;                /* brighter red hover */
}
#pillDead.active {
  box-shadow: 0 0 0 3px rgba(239,68,68,.25);
}

/* Count bubbles (inline badges) */
#dupCount, #proxCount {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  margin-left: 6px;
  background: rgba(203, 213, 225, .12);
  color: #e6eef7;
}

/* Match bubble tint to chip type */
#toggleDup #dupCount, #dupCount { background: rgba(59,130,246,.28); }
#toggleProx #proxCount, #proxCount { background: rgba(168,85,247,.28); }

/* Hide bubbles if zero-ish text like "(0)" or "0" */
#dupCount:empty, #proxCount:empty { display: none; }
#dupCount, #proxCount { white-space: nowrap; }

/* Two-line arrangement: force Close Prox onto a new wrapped line on narrow layouts */
.stats-break {
  display: inline-block;
  width: 100%;
  height: 0;
}

/* Make the container allow wrapping (works in most setups) */
#pillFresh, #pillStale, #toggleDup, #toggleProx { vertical-align: middle; }

/* --- Centered layout & tighter spacing for stats chips --- */
.stats-container, .stats-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Reduce overall chip spacing slightly */
#pillFresh, #pillStale, #toggleDup, #toggleProx {
  margin: 4px 4px;
}

/* Ensure second line (Close Prox) is also centered */
.stats-break {
  flex-basis: 100%;
  height: 0;
}

/* --- Responsive dynamic stats chips layout --- */
.stats-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Remove any forced breaks */
.stats-break { display: none !important; }

/* Teal "Has Hardware Info" chip */
#chipHasHw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #0e6f63;
  background: #14b8a6;
  color: #0a1512;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, filter .15s ease, box-shadow .2s ease;
  margin: 4px 6px 6px 0;
}
#chipHasHw:hover { filter: brightness(1.05); }
#chipHasHw.active { box-shadow: 0 0 0 3px rgba(20,184,166,.25); }
#chipHasHw i { opacity: .95; }

/* Dead chip styling (legacy compatibility) */
.chip.dead {
  background-color: #2c0a0a; /* darker red tone */
  color: #fff;
  border: 1px solid #ef4444;
}
.mc-dead {
  color: #fca5a5;
}

/* County badges styled to match existing chips */

.county-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.county-pill {
  background: #1d2635;        /* same background tone as your other chips */
  color: #cbd5f5;             /* soft blue text */
  border: 1px solid #223346;  /* subtle border like other chips */
  border-radius: 14px;        /* pill shape */
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.county-pill:hover {
  background: #263347;
  border-color: #2d3f55;
  cursor: pointer;
}

/* --- County filter chips + picker --- */

.county-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  max-width: 260px;
  font-size: 11px;
  position: relative;
}

.county-filter-label {
  font-weight: 600;
  color: #cbd5f5;
  font-size: 11px;
}

.county-filter-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.county-selected {
  min-height: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.county-empty {
  opacity: 0.7;
  color: #9ca3af;
  font-size: 11px;
}

.county-filter-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.county-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #374151;
  background: #111827;
  color: #e5ecff;
  font-size: 11px;
  cursor: pointer;
}

.county-chip:hover {
  background: #1f2937;
}

.county-chip-x {
  font-size: 11px;
  opacity: 0.7;
}

/* Dropdown panel */

.county-picker {
  margin-top: 4px;
  padding: 6px;
  border-radius: 8px;
  background: #020617;
  border: 1px solid #1e293b;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  max-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 40;
}

.county-picker.hidden {
  display: none;
}

.county-search {
  width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #1f2937;
  background: #020617;
  color: #e5ecff;
  font-size: 11px;
}

.county-picker-list {
  margin-top: 4px;
  overflow-y: auto;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.county-picker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #e5ecff;
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}

.county-picker-row:hover {
  background: #0b1120;
  border-color: #1f2937;
}

.county-picker-row.selected {
  background: #111827;
  border-color: #3b82f6;
}

.county-picker-tag {
  flex: 1;
}

.county-picker-check {
  margin-left: 6px;
  width: 14px;
  text-align: right;
}

.county-picker-empty {
  padding: 6px 4px;
  font-size: 11px;
  opacity: 0.7;
}