/* ============================================================
   Design Search view
   ------------------------------------------------------------
   Single-page layout: intro, category picker, then a
   form (targets + filters) and a results section. Reuses the
   schedule-wrap / schedule-table styles from products.css for
   the result table so results look identical to the main
   product page.
   ============================================================ */

/* The page is fixed-height (overflow: hidden) so we get exactly one
   scroll context on the page. The intro/category picker pin to the
   top, the form caps below them and scrolls internally if it gets
   tall, and the work area takes the remaining space. The results
   section inside the work area then flex-grows to fill, with the
   schedule-wrap inside it owning the only meaningful vertical scroll.
   This avoids the "two nested scrollbars" UX where the user can't
   tell which container to scroll to see the data rows. */
.design-search-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg) var(--space-xl);
    gap: var(--space-md);
    overflow: hidden;
    min-height: 0;
}

.design-search-intro,
.design-search-category {
    flex-shrink: 0;
}

.design-search-title {
    font-size: var(--font-size-xxl);
    color: var(--color-text);
    margin: 0 0 var(--space-xs) 0;
}

.design-search-sub {
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    max-width: 800px;
    margin: 0;
}

/* ---------- Category picker ---------- */

.design-search-category {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 360px;
    flex-shrink: 0;
}

.design-search-category-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}

.design-search-category-select {
    /* uses .filter-select styling from products.css */
    min-height: 40px;
    font-size: var(--font-size-base);
}

/* ---------- Work area (form + results) ---------- */

/* Split layout: form sidebar on the left, results on the right.
   Each side owns its own internal scroll so vertical real estate
   isn't fought over -- the form can be tall (lots of indoor-unit
   filters on multi-split) without crushing the results table. */
.design-search-work {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: var(--space-md);
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 900px) {
    /* On narrow viewports the sidebar is too cramped; stack
       vertically with the form capped at half-height. */
    .design-search-work {
        flex-direction: column;
    }
}

.design-search-status {
    color: var(--color-text-muted);
    font-style: italic;
}

.design-search-error {
    color: var(--color-error);
    font-style: normal;
}

/* ---------- Form ---------- */

.design-search-form {
    width: 420px;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
    .design-search-form {
        width: 100%;
        max-height: 50vh;
    }
}

.design-search-desc {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin: 0;
}

.design-search-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.design-search-section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.design-search-hint {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Target rows: [label] [value] [unit] ± [tol] %
   Each row is a flex line with the label allowed to shrink/wrap so
   long labels like "Indoor Unit Heating Capacity (Heat Pump)" fit
   in the narrow sidebar without pushing the inputs off-screen. */
.design-target-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-xs);
}

.design-target-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.design-target-label {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    line-height: 1.25;
}

.design-target-value,
.design-target-tolerance {
    padding: 6px 8px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    box-sizing: border-box;
    flex-shrink: 0;
}

.design-target-value {
    width: 88px;
    text-align: right;
}

.design-target-tolerance {
    width: 56px;
    text-align: right;
}

.design-target-value:focus,
.design-target-tolerance:focus {
    outline: 2px solid var(--color-primary-light);
    outline-offset: -1px;
    border-color: var(--color-primary-light);
}

.design-target-unit {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    width: 44px;
    flex-shrink: 0;
}

.design-target-plusminus {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    user-select: none;
    flex-shrink: 0;
}

.design-target-pct {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    user-select: none;
    flex-shrink: 0;
}

/* Filter dropdowns -- reuse .filter-group / .filter-select / .filter-label.
   In the sidebar context we stack them in a single column so each
   dropdown gets full width and the labels (sometimes long, like
   "COOLING ONLY OR HEAT PUMP") aren't truncated. */
.design-filter-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-xs);
}

.design-filter-grid .filter-group {
    min-width: 0;
}

.design-filter-grid .filter-select {
    width: 100%;
}

/* ---------- Action buttons ---------- */

.design-search-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding-top: var(--space-xs);
}

/* ---------- Results ---------- */

.design-search-results {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 0;
    overflow: hidden;
}

.design-search-results-header {
    flex-shrink: 0;
}

.design-search-results-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: var(--space-xs) 0 0 0;
}

.design-search-empty {
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    margin: 0;
}

/* Placeholder shown in the right pane before any search has been run.
   Centered, muted text on the same surface style as the form so the
   right side of the split layout doesn't look like a black hole. */
.design-search-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    font-style: italic;
    text-align: center;
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    max-width: 640px;
    margin: 0 auto;
}

/* The schedule-wrap takes ALL remaining space in its flex parent and
   handles its own scroll (overflow: auto inherited from products.css
   .schedule-wrap). max-height: none overrides any earlier cap. With
   the rest of the page laid out as flex columns above, the wrap
   inherits whatever vertical room is left -- typically several
   hundred pixels of data rows visible at once. */
.design-search-schedule-wrap {
    flex: 1;
    max-height: none;
    min-height: 0;
}

/* (Narrow viewport stacking is handled higher up via the
   flex-direction: column override on .design-search-work; target
   rows themselves stay the same compact horizontal line.) */