/* Filter title - one-line summary above the cities list. Driven by the
   dashboard from current route + filter state. Sits between the top-bar
   widget and the scrollable cities content; aligns horizontally with
   the cities list (--pad-x left, --pad-x-with-scrollbar right). */

.filter-title {
    padding: 20px var(--pad-x) 20px var(--pad-x);
    font-size: 1.375rem;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    line-height: 30px;

    &.empty {
        display: none;
    }

    .filter-title-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .filter-title-chips {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;

        img {
            width: 26px;
            height: 26px;
            object-fit: contain;
            display: block;
            border-radius: 50px;
        }
    }

    /* Help dot sits at the far right of the row - after the chips and the
       clear × - with a clear gap so it reads as a separate affordance from
       the clear button. Uses the shared .help-dot styling from helpers.css. */
    .filter-title-help {
        margin-left: 4px;
    }

    /* When the clear × is present, the help dot sits after it with extra
       breathing room so the two circles don't read as a pair. */
    .filter-title-clear + .filter-title-help {
        margin-left: 14px;
    }

    /* Clear ×, restyled as a circle that matches the help-dot so they
       sit side by side cleanly. The × is an SVG so it actually centers
       in the circle (the unicode glyph drifts off the optical centre). */
    .filter-title-clear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.06);
        color: #9a9a9a;
        cursor: pointer;
        user-select: none;
        flex-shrink: 0;
        transition: background-color 0.15s ease, color 0.15s ease;
        margin-left: 6px;

        svg {
            width: 10px;
            height: 10px;
            display: block;
        }

        &:hover {
            background: rgba(0, 0, 0, 0.12);
            color: #555;
        }
    }

    /* Dummy search affordance - looks like an input bar but is a plain div.
       Clicking it bubbles to the parent (dashboard) which opens the real
       search widget as a full-panel overlay. Auto-pushes itself to the right
       so it sits opposite the title regardless of how many chips are present. */
    .filter-title-search {
        margin-left: auto;
        flex-shrink: 0;
        min-width: 50px;
        max-width: 150px;
        width: 17%;
        height: 38px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fff;
        font-size: 0.9375rem;
        font-weight: 400;
        color: #999;
        cursor: text;
        user-select: none;
        transition: border-color 0.15s ease, background-color 0.15s ease;

        &:hover {
            border-color: #bbb;
            background: #fafafa;
        }
    }
}