/* Filter bar — unified row of buttons + inputs */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    max-width: 100%;
}

/* Data-type buttons (All, Visited, Monitored, Mine, Review) */
.data-type-group {
    display: contents;
}
/* Chip sizing matches the mobile/touch baseline at every screen size so the
   Near Me stepper (whose inner +/− buttons set their own intrinsic height)
   doesn't render taller than the plain chips at desktop widths.
   `!important` here is intentional — we've had reports of this getting
   overridden somewhere we haven't yet identified, and the chip row visibly
   broke above 768 px. Lock it in so the filter bar is always 40 px tall. */
.data-type-btn {
    font-size: 15px !important;
    font-weight: normal;
    padding: 6px 12px !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 44px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    background: white;
    color: var(--primary-color);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
}
/* Near-me stepper opts out of `padding: 6px 12px !important` because its
   inner +/− buttons supply their own padding; without this override the
   chip's content overflows the 40 px box on the right side. */
.data-type-btn.near-me-stepper {
    padding: 0 !important;
}
.data-type-btn:hover {
    background: var(--primary-light);
}
.data-type-btn.active {
    background: var(--primary-color);
    color: white;
}

/* Near-me stepper: full-height +/- buttons inside the filter button so the
   radius can be tapped on a phone without a fiddly number input. */
.near-me-stepper {
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    /* Outer corners stay rounded to match the rest of the filter bar; the
       inner buttons explicitly zero out their own border-radius below so
       the internal dividers read as straight vertical lines. */
}
.near-me-stepper .near-me-checkbox {
    display: flex; align-items: center; gap: 4px;
    padding: 0 8px;
}
.near-me-stepper .near-me-checkbox span {
    font-size: 14px;
}
.near-me-step {
    align-self: stretch;
    border: none;
    border-left: 1px solid var(--primary-color);
    border-radius: 0;
    background: white;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0 11px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.near-me-step:disabled { color: #ccc; cursor: not-allowed; }
.near-me-step:not(:disabled):hover { background: var(--primary-light, #e8f5e9); }
.near-me-step:not(:disabled):active { background: var(--primary-color); color: white; }
.near-me-stepper .near-me-value {
    display: flex; align-items: center; justify-content: center;
    padding: 0 8px;
    border-left: 1px solid var(--primary-color);
    border-radius: 0;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    min-width: 56px;
    white-space: nowrap;
}

/* Filter inputs — same height as buttons. Same `!important` reasoning as
   .data-type-btn above. */
.filter-input {
    font-size: 15px !important;
    padding: 6px 10px !important;
    height: 40px !important;
    min-height: 40px !important;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    box-sizing: border-box !important;
}

/* Mobile: tighten the bar gap, raise the input font to 16 px so iOS Safari
   doesn't zoom on focus, and clamp text input widths so the row still fits.
   Chip and dropdown heights are already 40 px from the desktop baseline. */
@media (max-width: 768px) {
    .filter-bar {
        gap: 6px;
    }
    .filter-input {
        font-size: 16px;
        min-width: 0;
        max-width: 130px !important;
    }
}

/* Filter bar and token styles */

/* Filter tokens (chips) */
.filter-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 0;
    min-height: 4px;
}
/* Filter tokens — split pill: tinted label + white X side, like the poolfinder button.
   Wrapper has no padding; the label and X each provide their own padding. */
.filter-token {
    display: inline-flex;
    align-items: stretch;
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid var(--primary-color);
    overflow: hidden;
}
.filter-token-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
}
.filter-token strong { font-weight: 600; }
.filter-token-remove {
    background: white;
    border: none;
    border-left: 1px solid var(--primary-color);
    color: var(--primary-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    padding: 0 8px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.filter-token-remove:hover {
    background: var(--primary-color);
    color: white;
}

/* Mobile: touch-friendly. Wrapper height = chip height. Label/X scale to fill. */
@media (max-width: 768px) {
    .status-chip, .level-chip {
        padding: 8px 14px !important;
        font-size: 14px !important;
        border-radius: 18px !important;
        min-height: 36px;
        line-height: 1.2;
    }
    .filter-token {
        padding: 0 !important;       /* override the chip-rule above if specificity collides */
        font-size: 14px !important;
        border-radius: 18px !important;
        min-height: 36px;
        line-height: 1.2;
    }
    .filter-token-label {
        padding: 8px 14px;
    }
    .filter-token-remove {
        font-size: 18px;
        padding: 0 12px;
    }
}
.filter-token-clear-all {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid var(--secondary-color);
    background: white;
    color: var(--secondary-color);
    cursor: pointer;
}
.filter-token-clear-all:hover {
    background: var(--danger-light);
    color: white;
    border-color: var(--danger-color);
}

/* Dropdown suggestions (type-ahead) */
.dropdown-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 10001;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.suggestion-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
}
.suggestion-item:hover,
.suggestion-item.highlighted {
    background-color: var(--primary-light);
}
.suggestion-item:last-child {
    border-bottom: none;
}
.suggestion-empty {
    padding: 8px 10px;
    color: #999;
    font-size: 13px;
    font-style: italic;
}

/* Dropdown panel (status checkboxes) */
.dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #f9f9f9;
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 10000;
    padding: 10px;
    border-radius: 5px;
}
.dropdown-check-label {
    display: block;
    margin-bottom: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
}
.dropdown-quick-btns {
    margin-top: 8px;
    padding-top: 5px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 5px;
}
.dropdown-quick-btn {
    font-size: 12px;
    padding: 2px 8px;
}

/* Filter dropdown button — same height as other filter elements. */
.filter-dropdown-btn {
    cursor: pointer;
    font-size: 15px !important;
    padding: 6px 12px !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 26px !important;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    display: inline-block;
    font-weight: normal;
    box-sizing: border-box !important;
}
.filter-dropdown-btn:hover {
    background-color: var(--primary-light);
}

/* Clear button inside inputs */
.input-clear-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 14px;
    padding: 0 2px;
}
.input-clear-btn:hover {
    color: #333;
}