/* filters.css — Filter panels and all child components =====
 *
 * Covers: FilterPanel (.filter-panel), combo input, dropdown list items,
 * tags (.fg-tag), "Supported only" toggle, "Add filter" menu,
 * and empty states for the Filters and Pinned Signals sections.
 *
 * Shared dropdown primitives (.dd-trigger, .dd-panel) and the toolbar
 * (.panel-toolbar, .tbtn) are in sidebar.css. */


/* ===== Filter index error warning =====
 *
 * Shown inside the Filters tab when index.json fails to load.
 * Placed above the empty-state, translated via data-i18n.
 */

.filter-index-error {
    display: block;
    font-size: 11px;
    font-family: var(--ff-mono);
    color: var(--warn);
    padding: 8px 12px 4px;
}

    .filter-index-error.is-hidden {
        display: none;
    }


/* ===== Filter panels as collapsible subpanels =====
 *
 * .filter-panel.cp-panel--sub overrides the generic cp-panel--sub styles
 * (designed for the Usage section in sidebar.css) to restore the original
 * compact filter panel appearance: original header padding, no underline,
 * no margin between panels, border-top separator instead.
 */

/* No outer box — filter panels tile flush inside #filters-container */
.filter-panel.cp-panel--sub {
    border: none;
    background: none;
}

    /* Restore original header padding; remove sub-panel underline and background */
    .filter-panel.cp-panel--sub > .panel-summary {
        padding: 6px 10px;
        background: none;
        border-bottom: none;
    }

/* Ensure underline never shows even in open state */
.cp-panel--open.filter-panel.cp-panel--sub > .panel-summary {
    border-bottom-color: transparent;
}

/* ===== Filter panels =====
 *
 * Filter panels tile flush inside #filters-container.
 * Border-top between adjacent panels is applied on the header of the
 * second and later panels to avoid a double border at the top. */

/* Border separator between adjacent filter panels */
.filter-panel + .filter-panel {
    border-top: 1px solid var(--border);
}

/* Override cp-panel--sub sibling margin (0 instead of 14px) */
.filter-panel.cp-panel--sub + .filter-panel.cp-panel--sub {
    margin-top: 0;
}

/* No extra top padding in filter body; bottom padding for open panels */
.filter-panel.cp-panel--sub > .cp-body {
    padding-top: 0;
}

.cp-panel--open.filter-panel.cp-panel--sub > .cp-body {
    padding-bottom: 16px;
}


/* ===== Filter panel header =====
 * .fg-header is also .panel-summary — core layout is handled by sidebar.css.
 * Only filter-specific overrides are here. */

/* Actions container: clear + remove buttons on the right */
.fg-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Clear (trash) and Remove (×) icon buttons.
 * Base layout is inherited from .summary-action-btn in sidebar.css.
 * Only hover colours are overridden here since fg-clear uses warn and fg-remove uses accent2. */
.fg-clear:hover {
    color: var(--warn);
    background: rgba(210, 153, 34, .08);
}

.fg-remove:hover {
    color: var(--accent2);
    background: rgba(37, 137, 199, .08);
}


/* ===== Active value tags ===== */

.fg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 0 6px;
}

.fg-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(29,111,164,.2);
    border: 1px solid rgba(29,111,164,.4);
    color: var(--text);
    font-size: 10px;
    font-family: var(--ff-mono);
    padding: 2px 6px;
    border-radius: 3px;
}

.fg-tag-label {
    cursor: default;
}

.fg-tag:hover,
.fg-tag:focus-within {
    background: var(--accent);
    border-color: var(--accent2);
}

    .fg-tag:hover .fg-tag-remove,
    .fg-tag:focus-within .fg-tag-remove {
        color: #fff;
    }

/* networkId tags: flyToLocation on label click */
.fg-tag--clickable .fg-tag-label {
    cursor: pointer;
}

.fg-tag-remove {
    background: none;
    border: none;
    color: var(--accent2);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    transition: color .1s, background .1s;
}

    /* Hover and keyboard focus: distinct background so the button reads as
 * a separate interactive target from the tag itself. */
    .fg-tag-remove:hover,
    .fg-tag-remove:focus-visible {
        color: #fff;
        background: rgba(255, 255, 255, .2);
        outline: none;
    }


/* ===== Combo input =====
 *
 * .fg-combo wraps .fg-combo-input and .fg-dropdown to act as a containing block
 * (position:relative) for the absolutely positioned dropdown. No padding here —
 * the horizontal inset is provided by .filter-panel > .cp-body. */

.filter-panel > .cp-body {
    padding: 0 10px;
}

.fg-combo {
    position: relative;
}

.fg-combo-input {
    width: 100%;
}

.fg-search {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: inherit;
    font-family: var(--ff-mono);
    font-size: 11px;
    padding: 7px 8px;
    cursor: pointer;
    min-width: 0;
    text-transform: uppercase;
}

    .fg-search::placeholder {
        color: var(--text3);
        text-transform: none;
    }

    .fg-search:focus {
        cursor: text;
    }

.fg-combo-clear,
.fg-combo-arrow {
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 2px;
    transition: color .15s, background .15s;
    line-height: 1;
    width: 22px;
    height: 22px;
}

    .fg-combo-clear:hover,
    .fg-combo-clear:focus-visible,
    .fg-combo-arrow:hover,
    .fg-combo-arrow:focus-visible {
        color: var(--text);
        background: rgba(255, 255, 255, .06);
    }

.fg-combo-clear,
.fg-combo-arrow {
    margin-right: 3px;
}

.fg-combo-arrow svg {
    transform: rotate(90deg);
    transition: transform .2s ease;
}

.fg-combo-input.is-open .fg-combo-arrow svg {
    transform: rotate(-90deg);
}

    .fg-combo-clear:focus-visible,
    .fg-combo-arrow:focus-visible {
        outline: 2px solid var(--accent2);
        outline-offset: 1px;
    }

/* readOnly combo (direction, placement) */
.fg-combo-readonly {
    cursor: pointer;
}

    .fg-combo-readonly .fg-search {
        cursor: pointer;
    }


/* ===== Dropdown list =====
 *
 * Positioned absolutely within .fg-combo (position:relative),
 * aligned flush with the combo-input left and right edges.
 * z-index:200 floats it above sibling filter panels. */

.fg-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
    font-family: var(--ff-mono);
    font-size: 11px;
    /* Background, border, border-radius, box-shadow from .dd-panel in sidebar.css */
}

.fg-dropdown-inner {
    padding: 4px;
}

.fg-drop-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .1s;
    user-select: none;
}

    .fg-drop-item:hover,
    .fg-drop-item:focus {
        background: rgba(255,255,255,.05);
        outline: none;
    }

    .fg-drop-item.active {
        background: rgba(29,111,164,.18);
    }

/* Checkbox indicator */
.fgi-check {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 1.5px solid var(--text3);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, border-color .1s;
}

    .fgi-check.checked {
        background: var(--accent2);
        border-color: var(--accent2);
    }

        .fgi-check.checked::after {
            content: '';
            display: block;
            width: 5px;
            height: 3px;
            border-left: 1.5px solid #fff;
            border-bottom: 1.5px solid #fff;
            transform: rotate(-45deg) translateY(-1px);
        }

.fgi-name {
    flex: 1;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Blue dot for OSM-mapped types (signalType only) */
.fg-drop-item.mapped .fgi-name::after {
    content: ' ●';
    color: var(--accent2);
    font-size: 8px;
    vertical-align: 1px;
}

/* Pre-filter viewport count */
.fgi-count {
    font-size: 10px;
    color: var(--text2);
    flex-shrink: 0;
}

/* Inline hint row */
.fg-empty {
    font-size: 11px;
    font-family: var(--ff-mono);
    color: var(--text3);
    font-style: italic;
    padding: 6px 8px;
}


/* ===== "Supported only" toggle (signalType) ===== */

.supported-only-row {
    margin-top: 2px;
    padding: 4px 0 0;
}

.supported-only-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
}

/* Toggle base + :checked state defined in base.css */

.toggle-label {
    font-size: 11px;
    color: var(--text2);
}


/* ===== "Add filter" dropdown menu ===== */

.add-filter-menu {
    background: var(--panel2);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 4px;
    width: max-content;
    min-width: 120px;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
}

.afm-option {
    padding: 7px 12px;
    font-size: 11px;
    font-family: var(--ff-mono);
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 3px;
    transition: background .1s;
    color: var(--text);
}

    .afm-option:hover {
        background: rgba(255,255,255,.05);
    }


/* ===== Empty states =====
 *
 * Shared component used by the Filters tab ("no active filters") and the
 * Pinned Signals panel ("no pinned signals"). Centered icon + short text.
 *
 * Icon styling is intentionally faint (low opacity) for a watermark effect —
 * it should not compete with filter panels when both are visible. */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    text-align: center;
}

/* The <use> SVG inside .empty-state — sized and faded */
.empty-state-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    opacity: .15;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.empty-state-text {
    font-size: 11px;
    font-family: var(--ff-mono);
    line-height: 1.4;
    max-width: 180px;
}

#filters-empty-state.empty-state {
    padding: 20px 10px 14px;
}


/* ===== Pinned signals section ===== */

.pinned-section {
    padding: 14px 10px;
}

/* Overrides .fg-tags inherited side-padding when inside .pinned-section */
.pinned-tags {
    padding: 0;
    margin-bottom: 4px;
}

/* Empty state inside the pinned section */
.pinned-section .empty-state {
    padding-top: 6px;
    padding-bottom: 0;
}

/* ===== Rich dropdown items (.fgi-name--rich) =====
 *
 * Used when a dropdown item carries a subtitle (line label text alongside
 * the line code). Applied via JS on .fgi-name when item.subtitle is set.
 *
 * Layout: fixed code span (no shrink) + label span (takes remaining space,
 * truncates with ellipsis). The parent .fgi-name already provides flex:1
 * and overflow:hidden from the base rule — these are kept as-is. */

.fgi-name--rich {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Fixed portion — the line code; never truncated */
.fgi-code {
    flex-shrink: 0;
    font-weight: 600;
}

/* Variable portion — the line label; truncated with ellipsis when too long.
 * min-width:0 is required to allow a flex child to shrink below its content width. */
.fgi-subtitle {
    flex: 1;
    min-width: 0;
    font-size: 9px;
    color: var(--text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ===== Mixed-case search input =====
 *
 * .fg-search applies text-transform:uppercase for fields where values are
 * always uppercase (signalType, trackName…). labelSearch fields (lineCode)
 * accept free-text label searches, so the transform is disabled to avoid
 * showing the user's input in all-caps while they type a line name. */

.fg-search--mixed {
    text-transform: none;
}