/* dashboard_search module — styles for the Search panel and its results list.
   Loaded from dashboard.html via <link rel="stylesheet" ...>. */

/* ── Panel chrome (moved from dashboard.html inline <style>) ───────────── */
.dash-detail-split .dash-detail-search { flex: 1.15 1 0; }

.dash-detail-search {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--detail-accent) 6%, #ffffff) 0%,
            color-mix(in srgb, var(--detail-accent) 3%, #ffffff) 100%);
    border-color: color-mix(in srgb, var(--detail-accent) 18%, #eef0f4);
}

/* ── Tab-bar search input + collapsible magnifier (in the action row) ─── */
/* Replaces the old .dash-company-btn-secondary "Search" pill. The input
   always shows; the magnifier expands from zero-width when the input is
   focused via `:focus-within` (same pattern as the v3 results page). */
.dash-tabbar-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 7.7rem;  /* 30% narrower than the sibling action pills (11rem) */
}

.dash-tabbar-search-input {
    flex: 1 1 auto;
    min-width: 0;             /* lets the flex item shrink so ellipsis can kick in */
    height: 32px;
    padding: 0 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8125rem;
    border: 1px solid #d8dae2;
    border-radius: 999px;
    background: #ffffff;
    color: #1a1a24;
    outline: none;
    overflow: hidden;          /* required for text-overflow */
    text-overflow: ellipsis;   /* tail the placeholder + typed value with '…' on overflow */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dash-tabbar-search-input::placeholder { color: #9ca3af; opacity: 1; }
.dash-tabbar-search:focus-within .dash-tabbar-search-input {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.dash-tabbar-search:focus-within .dash-tabbar-search-btn i { color: #2563eb; }

/* Magnifier: zero-width by default, expands on `:focus-within`. Negative
   side margins absorb the parent's flex `gap: 6px` so the input sits
   flush at the right edge of the pill when the magnifier is collapsed. */
.dash-tabbar-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 32px;
    border-radius: 50%;
    border: 0 solid #d8dae2;
    background: #ffffff;
    color: #1a1a24;
    cursor: pointer;
    padding: 0;
    margin: 0 -3px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: width 0.18s ease, margin 0.18s ease, border-width 0.18s ease,
                opacity 0.15s ease, background 0.15s ease,
                border-color 0.15s ease, color 0.15s ease;
}
.dash-tabbar-search:focus-within .dash-tabbar-search-btn {
    width: 32px;
    border-width: 1px;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
}
.dash-tabbar-search-btn:hover {
    background: #f4f5f8;
    border-color: #2563eb;
}
.dash-tabbar-search-btn:hover i { color: #2563eb; }
.dash-tabbar-search-btn i {
    font-size: 14px;
    line-height: 1;
    transition: color 0.15s ease;
}

/* Bold centered '<N> Results for "<q>"' headline at the top of the panel. */
.dash-search-results-query {
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1a1a24;
    padding: 0.5rem 0.5rem 0.25rem;
    word-break: break-word;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.dash-search-results-query:empty { display: none; }

/* ── Results list ─────────────────────────────────────────────────────── */
.dash-search-results {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: 0.75rem;
    min-height: 0;
    overflow-y: auto;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.dash-search-empty,
.dash-search-loading {
    text-align: center;
    color: #6b6f7c;
    font-size: 0.8125rem;
    padding: 1rem 0.5rem;
}

.dash-search-group {
    padding: 0.5rem 0 0.5rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--detail-accent) 12%, #eef0f4);
}
.dash-search-group:last-child { border-bottom: none; }

.dash-search-group-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.25rem 0.25rem;
}
.dash-search-group-label {
    font-size: 0.875rem;   /* was 0.75rem — +2px */
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #1e40af;        /* dark blue (Tailwind blue-800) — matches the v3 modal */
}
.dash-search-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 0.45rem;
    height: 1.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--detail-accent) 14%, #ffffff);
    color: #1e40af;
    font-size: 0.8125rem;  /* was 0.6875rem — +2px */
    font-weight: 800;
}

.dash-search-row {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem;
    border-radius: 5px;
}
.dash-search-row[data-url] { cursor: pointer; }
.dash-search-row[data-url]:hover { background: #f4f5f8; }

.dash-search-row-primary {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1a1a24;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-search-row-secondary {
    font-size: 0.71875rem;
    color: #6b6f7c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-search-more {
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.71875rem;
    color: #6b6f7c;
    text-align: right;
    font-style: italic;
}

/* Insight line — shown only for the first 3 rendered rows of any search. */
.dash-search-row-insight {
    margin-top: 0.2rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.71875rem;
    line-height: 1.3;
    color: #3b3f4c;
    background: color-mix(in srgb, var(--detail-accent) 8%, #ffffff);
    border-left: 2px solid color-mix(in srgb, var(--detail-accent) 35%, #d8dae2);
    border-radius: 3px;
    white-space: normal;       /* allow wrapping — primary/secondary stay single-line */
}
.dash-search-row-insight-label {
    font-weight: 700;
    color: #1a1a24;
    letter-spacing: 0.2px;
}
.dash-search-row-insight-body {
    color: #3b3f4c;
}

/* ── Filter-results button + popover (centered under the headline) ──────
   The wrap sits between `.dash-search-results-query` and `.dash-search-
   results`; it center-aligns the button and anchors the popover. When the
   button is `[hidden]` the wrap collapses to 0 height (its margin lives on
   the button), so no spacing leaks into the empty/loading states.      */
.dash-search-filter-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

.dash-search-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 24px;
    margin-top: 0.4rem;
    padding: 0 0.6rem;
    border: 1px solid #d8dae2;
    border-radius: 999px;
    background: #ffffff;
    color: #1a1a24;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.71875rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dash-search-filter-btn[hidden] { display: none; }
.dash-search-filter-btn:hover {
    background: #f4f5f8;
    border-color: #2563eb;
    color: #1e40af;
}
.dash-search-filter-btn:hover i { color: #1e40af; }
.dash-search-filter-btn i { font-size: 11px; line-height: 1; color: #5a5e72; transition: color 0.15s ease; }
.dash-search-filter-btn[aria-expanded="true"] {
    background: color-mix(in srgb, #2563eb 8%, #ffffff);
    border-color: #2563eb;
    color: #1e40af;
}
.dash-search-filter-btn[aria-expanded="true"] i { color: #1e40af; }

.dash-search-filter-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    max-width: 320px;
    background: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 30;
    padding: 0.5rem 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.dash-search-filter-pop[hidden] { display: none; }

.dash-search-filter-pop-head {
    padding: 0.25rem 0.75rem 0.45rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #eef0f4;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #1e40af;
}

.dash-search-filter-pop-list {
    display: flex;
    flex-direction: column;
    max-height: 50vh;
    overflow-y: auto;
}

.dash-search-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    user-select: none;
}
.dash-search-filter-row:hover { background: #f4f5f8; }
.dash-search-filter-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    accent-color: #2563eb;
    cursor: pointer;
}
.dash-search-filter-label {
    flex: 1 1 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1a1a24;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}