/* Search widget - full-panel overlay
   ----------------------------------
   Default state: the whole widget is hidden. The dummy "Search" pill in the
   filter title is what the user sees and clicks; clicking it adds the .open
   class which expands the search to overlay the entire .dashboard-left
   panel. The header sits at the top with the input, the tray fills the
   remaining space below. Closing removes the overlay.

   Positioning: .dashboard-left has position: relative, so position: absolute
   inset: 0 here resolves to that panel - the overlay never escapes the left
   pane (right-hand city panel stays interactive).
*/

.search {
    display: none;

    &.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        inset: 0;
        background: #fff;
        z-index: 100;

        .header {
            flex-shrink: 0;
            padding: 20px var(--pad-x) 10px var(--pad-x);

            .input-bar {
                display: flex;
                align-items: center;
                padding: 8px 8px 8px 14px;
                min-height: 40px;
                border: 1px solid #007bff;
                border-radius: 8px;
                box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
                background: #fff;
                gap: 0;
                input {
                    flex: 1;
                    border: none;
                    outline: none;
                    padding: 0;
                    font-size: 1rem;
                    background: transparent;

                    &::placeholder { color: #999; }
                }

                /* Close × inside the input box. Sits at the right edge of the
                   bordered input bar; clicking it closes the search overlay. */
                .search-close {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 22px;
                    height: 22px;
                    border-radius: 50%;
                    background: rgba(0, 0, 0, 0.06);
                    color: #9a9a9a;
                    cursor: pointer;
                    user-select: none;
                    flex-shrink: 0;
                    margin-left: 4px;
                    transition: background-color 0.15s ease, color 0.15s ease;

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

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

        .tray {
            position: static;       /* override .top-bar .tray which is absolute */
            flex: 1;
            display: block;
            opacity: 1;
            overflow-y: auto;
            padding: 0 var(--pad-x-with-scrollbar) 0 var(--pad-x);
            min-height: 0;          /* allow flex item to shrink below content size for proper scroll */
        }
    }

    .tray {
        .tags {
            padding-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 10px;
            color: #666;
            margin-top: 10px;

            &:empty {
                display: none;
            }
        }

        /* Search results - plain auto-fill grid. Unlike the dashboard cities
           list, search shows few results at a time and doesn't need the
           staggered brick layout, the column counter, or the first-row
           skeleton fillers. We override .city_cards explicitly here so any
           leftover --cols / cols-N from a previous render doesn't apply. */
        .city_cards {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            padding: 10px 0;
            margin-top: 10px;

            &:empty {
                display: none;
            }

            /* Belt-and-braces: if any cols-N class lingers on the container,
               cancel the stagger transform that .city_cards.cols-N applies. */
            > * { transform: none !important; }
        }

        /* Subtle "How features work" link at the bottom of the tray. Sits
           below the results so it's the last thing the user sees if they
           are not finding what they want. */
        .search-help-link {
            display: inline-block;
            margin: 16px 0 24px;
            font-size: 0.8125rem;
            color: #999;
            text-decoration: underline;
            text-underline-offset: 2px;
            cursor: pointer;

            &:hover { color: #555; }
        }
    }
}