/* =========================================================================
   THE WORKSPACE SEARCH (2026-10-13) — js/modules/agency-search.js.
   The box under the customer table on the agency dashboard, and the list of
   answers that drops from it. Loads after dark-mode.css; the layout of the
   row it sits in (.agency-board-foot, .agency-wsearch, .agency-wsearch-input)
   is report-detail.css's — everything about how the search LOOKS is here.
   ========================================================================= */

/* The box takes the row. .agency-search caps the customer-list search at 420px, which is right
   beside a count on one line and wrong for a search of everything: the list below is as wide
   as the wrap, so the box has to be too. */
.agency-wsearch .agency-wsearch-input { max-width: none; }

/* ── The list ──────────────────────────────────────────────────────────────
   OVERLAID, not in the flow: absolutely positioned under the box, so opening it moves nothing
   on the page and the dashboard below keeps its place. Its own scroll past ~60% of the window.
   z-index above the tile strip and the cards (none of which set one) and well under the
   dialogs (12100+). */
.agency-wsearch-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: 60;
    max-height: 60vh; overflow-y: auto; scrollbar-width: thin;
    background: var(--surface-alt, #fff);
    border: 1px solid var(--border-strong, #b6c1d1);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);
    padding: 0.35rem 0;
    text-align: left;
    font-size: var(--fs-base, 0.95rem);
    line-height: 1.35;
}
.agency-wsearch-results[hidden] { display: none !important; }

/* WHILE THE LIST IS OPEN the dashboard section carries this class (agency-search.js). The
   section is a flex item of #agencyDashboardView, so a z-index alone lifts it above the
   dashboard that follows — needed because the card's hover lift is a transform, which makes
   the section a stacking context of its own; without this the list would slide under anything
   positioned in the cards below, exactly while the mouse is on the search. */
.agency-wsearch-open { z-index: 30; }

/* ── Status, hint, empty, error ─────────────────────────────────────────── */
.agency-wsearch-status, .agency-wsearch-note, .agency-wsearch-foot {
    padding: 0.5rem 0.9rem; font-size: var(--fs-sm, 0.85rem); color: var(--text-muted, #475569);
}
.agency-wsearch-status[hidden] { display: none; }
.agency-wsearch-status.is-error { color: var(--danger-ink, #b91c1c); }
.agency-wsearch-foot { border-top: 1px solid var(--border, #d9e0ea); margin-top: 0.3rem; }
/* A search under way: what is there stays readable, a shade back, under the Searching… line. */
.agency-wsearch-results.is-busy .agency-wsearch-body { opacity: 0.6; transition: opacity 120ms ease; }

/* ── Groups and rows ───────────────────────────────────────────────────── */
.agency-wsearch-heading {
    padding: 0.55rem 0.9rem 0.2rem; font-size: var(--fs-xs, 0.72rem); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #475569);
}
.agency-wsearch-group + .agency-wsearch-group .agency-wsearch-heading {
    border-top: 1px solid var(--border, #d9e0ea); margin-top: 0.3rem; padding-top: 0.7rem;
}
.agency-wsearch-row {
    display: flex; align-items: baseline; gap: 0.6rem;
    padding: 0.42rem 0.9rem 0.42rem calc(0.9rem - 3px);
    border-left: 3px solid transparent;        /* the accent bar's seat, so lighting a row moves nothing */
    cursor: pointer;
}
.agency-wsearch-row.is-active {
    background: var(--accent-soft, #eff4ff);
    border-left-color: var(--accent, #2563eb);
}
.agency-wsearch-glyph {
    flex: 0 0 1.5rem; text-align: center; color: var(--text-muted, #475569); font-size: 0.95em;
}
.agency-wsearch-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.agency-wsearch-title {
    color: var(--text, #0f172a); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agency-wsearch-detail {
    color: var(--text-muted, #475569); font-size: var(--fs-sm, 0.85rem);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Whose record this is, on the right — unless the row IS the company. */
.agency-wsearch-company {
    flex: 0 1 auto; max-width: 36%; text-align: right;
    color: var(--text-muted, #475569); font-size: var(--fs-sm, 0.85rem);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The matched words: a soft tint behind the text, the text itself unchanged. */
.agency-wsearch-results mark {
    background: rgba(37, 99, 235, 0.14); color: inherit; border-radius: 3px; padding: 0 0.08em;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────
   The tokens already turn (dark-mode.css); the values are pinned here as well so the list
   reads on a #1f2937–#26262a surface whatever the card tokens are set to. */
body.theme-dark .agency-wsearch-results {
    background: var(--surface-alt, #26262a);
    border-color: var(--border-emphasis, #71717f);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}
body.theme-dark .agency-wsearch-title { color: var(--text, #ececee); }
body.theme-dark .agency-wsearch-detail,
body.theme-dark .agency-wsearch-company,
body.theme-dark .agency-wsearch-heading,
body.theme-dark .agency-wsearch-glyph,
body.theme-dark .agency-wsearch-status,
body.theme-dark .agency-wsearch-note,
body.theme-dark .agency-wsearch-foot { color: var(--text-muted, #b5b5bc); }
body.theme-dark .agency-wsearch-status.is-error { color: var(--danger-ink, #f28b8b); }
body.theme-dark .agency-wsearch-group + .agency-wsearch-group .agency-wsearch-heading,
body.theme-dark .agency-wsearch-foot { border-color: var(--border, #3a3a42); }
body.theme-dark .agency-wsearch-row.is-active {
    background: rgba(122, 169, 247, 0.18);
    border-left-color: var(--accent-ink, #7aa9f7);
}
body.theme-dark .agency-wsearch-results mark { background: rgba(122, 169, 247, 0.30); color: #ffffff; }