/*
 * Public filter toolbar — the ReportFilterToolbar subset the public inventory
 * results strip uses (JACKS-160/161/162): desktop tier, Precision Yard theme, search
 * field, filter slots, the secondary row, and the compact filter row inside the card.
 * Ported from css/reports.css.
 *
 * Public pages do not load reports.css (audit H6: ~71 KB of admin toolbar/chart
 * rules). public-dropdown.css holds the dropdown chrome only and must stay free of
 * toolbar layout, so the toolbar layout lives here.
 *
 * Keep selectors identical to reports.css so ReportFilterToolbar's class names stay
 * valid. Only the desktop tier is ported: the strip renders only at >1024px with the
 * filter panel collapsed. Pinned mode and <=1024px use the sidebar and mobile drawer.
 */

:root {
    --rft-control-h: 48px;
    --rft-control-font-size: 14px;
    --rft-control-font-family: Inter, system-ui, sans-serif;
    --rft-control-font-weight: 600;
    --rft-control-input-weight: 500;
    --rft-z-toolbar: 100;
    --rft-pad-y: 12px;
    --rft-pad-x: 12px;
    --rft-stack-gap: 12px;
    --rft-row-gap: 12px;
    --rft-filter-gap: 8px;
    --rft-action-gap: 8px;
    --rft-affix-gap: 8px;
    --rft-slot-min: 160px;
    --rft-slot-max: 280px;
    --rft-toolbar-radius: 4px;
    --rft-toolbar-bg: #ffffff;
    --rft-toolbar-border: 1px solid #e2e8f0;
    --rft-toolbar-blur: none;
    --rft-toolbar-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    --rft-toolbar-shadow-active: inset 0 2px 0 #5BC8E8;
}

/* Container-query frame (an element can't query its own container). */
.rft-toolbar-frame {
    container-type: inline-size;
    container-name: rft;
    width: 100%;
    max-width: 100%;
}

.rft-toolbar {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--rft-stack-gap);
    padding: var(--rft-pad-y) var(--rft-pad-x);
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    /* Keeps the Sort menu above the table and the active-filter chips below. */
    z-index: var(--rft-z-toolbar, 100);
    overflow: visible;
    border-radius: var(--rft-toolbar-radius);
    background: var(--rft-toolbar-bg);
    backdrop-filter: var(--rft-toolbar-blur);
    -webkit-backdrop-filter: var(--rft-toolbar-blur);
    border: var(--rft-toolbar-border);
    box-shadow: var(--rft-toolbar-shadow);
    transition: box-shadow 0.25s ease;
}

.rft-toolbar.rft-toolbar--has-active-filters {
    box-shadow: var(--rft-toolbar-shadow-active);
}

/* Theme: Precision Yard — redefine tokens to the --pub-py-* set */
.rft-toolbar--py {
    --rft-toolbar-radius: 4px;
    --rft-toolbar-bg: var(--pub-py-filter-surface);
    --rft-toolbar-border: 1px solid var(--pub-py-border);
    --rft-toolbar-blur: blur(12px);
    --rft-toolbar-shadow: var(--pub-py-shadow-card);
    --rft-toolbar-shadow-active: var(--pub-py-shadow-card);
    --rft-control-h: 44px;
    --rpt-filter-bg: var(--pub-py-filter-input-bg);
    --rpt-filter-border: var(--pub-py-border);
    --rpt-filter-text: var(--pub-py-headline);
    --rpt-filter-muted: var(--pub-py-muted);
    --rpt-menu-bg: var(--pub-py-card);
    --rpt-menu-blur: none;
    --rpt-menu-shadow: var(--pub-py-shadow-hover);
}

/* Tier: desktop (container sub-tiers below) */
.rft-toolbar--desktop {
    --rft-pad-y: 14px;
    --rft-pad-x: 14px;
    --rft-stack-gap: 12px;
    --rft-row-gap: 12px;
    --rft-filter-gap: 12px;
    --rft-action-gap: 8px;
    --rft-affix-gap: 8px;
    --rft-slot-min: 160px;
    --rft-slot-max: 280px;
}

@container rft (min-width: 1321px) {
    .rft-toolbar--desktop {
        --rft-pad-y: 16px;
        --rft-pad-x: 18px;
        --rft-stack-gap: 16px;
        --rft-row-gap: 14px;
        --rft-action-gap: 10px;
        --rft-affix-gap: 10px;
        --rft-slot-min: 172px;
        --rft-slot-max: 300px;
    }
}

@container rft (min-width: 1601px) {
    .rft-toolbar--desktop {
        --rft-pad-y: 18px;
        --rft-pad-x: 20px;
        --rft-stack-gap: 18px;
        --rft-row-gap: 16px;
        --rft-filter-gap: 14px;
        --rft-action-gap: 10px;
        --rft-affix-gap: 12px;
        --rft-slot-min: 180px;
        --rft-slot-max: 320px;
    }
}

/* Main row: single flat row */
.rft-main-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: flex-start;
    width: 100%;
    gap: var(--rft-row-gap);
    row-gap: var(--rft-row-gap);
    box-sizing: border-box;
}

.rft-main-row--single {
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.rft-main-row--single .rft-search-row {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: min(360px, 40%);
    width: auto;
}

.rft-main-row--single .rft-actions-cluster {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-self: center;
}

/* Second line inside the card (JACKS-161: active-filter chips + Clear all). */
.rft-secondary-row {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

/* Search row + field */
.rft-search-row {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--rft-affix-gap);
    min-height: var(--rft-control-h);
}

.rft-search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
    height: var(--rft-control-h);
    border-radius: var(--rpt-filter-radius);
    border: 1px solid var(--rpt-filter-border);
    background-color: var(--rpt-filter-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.search-focus-glow:focus-within {
    box-shadow: 0 0 0 3px var(--rpt-filter-ring) !important;
    border-color: var(--rpt-filter-border-active) !important;
}

.rft-search-field__input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 16px 12px 48px;
    border: none;
    border-radius: var(--rpt-filter-radius);
    background-color: transparent;
    font-size: var(--rft-control-font-size, 14px);
    font-weight: var(--rft-control-input-weight, 500);
    color: var(--rpt-filter-text);
    outline: none;
    appearance: none;
    font-family: var(--rft-control-font-family, Inter, system-ui, sans-serif);
}

.rft-toolbar--py .rft-search-field__input {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    color: var(--pub-py-headline);
    padding: 10px 44px 10px 44px;
}

.rft-search-field__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rpt-filter-muted);
    font-size: 20px;
    pointer-events: none;
    z-index: 1;
}

.rft-toolbar--py .rft-search-field__icon {
    left: 12px;
    color: var(--pub-py-muted);
}

/* JACKS-222: the icon doubles as a submit button when the field commits on demand
   (/parts/ Part). Same spot as the decorative icon, but clickable with a 44px target. */
.rft-search-field__icon--button {
    left: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
}

.rft-toolbar--py .rft-search-field__icon--button {
    left: 0;
}

.rft-search-field__icon--button .material-icons {
    font-size: 20px;
}

.rft-search-field__icon--button:focus-visible {
    outline: 2px solid var(--pub-py-focus-ring, #3AAAC8);
    outline-offset: -4px;
    border-radius: var(--pub-py-control-radius, 10px);
}

/* 44px tap target: the field is 44px tall, so the clear button fills it. */
.rft-search-field__clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    color: var(--rpt-filter-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.rft-toolbar--py .rft-search-field__clear {
    color: var(--pub-py-muted);
}

.rft-search-field__clear:focus-visible {
    outline: 2px solid var(--pub-py-focus-ring, #3AAAC8);
    outline-offset: -4px;
    border-radius: var(--pub-py-control-radius, 10px);
}

/* Filter slots */
.rft-filter-slot {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: stretch;
}

.rft-filter-slot > * {
    width: 100%;
    min-width: 0;
}

.rft-actions-cluster {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rft-action-gap);
    box-sizing: border-box;
}

/* JACKS-201: same horizontal measure as getPublicInventoryShellStyle
   (15 / 25 / 40 / 60). Width 100% keeps the column from shrinking to the
   cards when #root is a flex container. No 1400px cap. */
.pub-parts-page .pub-parts-body {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--pub-py-catalog-section-gap, 20px);
    padding: var(--pub-py-catalog-section-gap, 20px) 15px 32px;
}

@media (min-width: 768px) {
    .pub-parts-page .pub-parts-body {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media (min-width: 1025px) {
    .pub-parts-page .pub-parts-body {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1441px) {
    .pub-parts-page .pub-parts-body {
        padding-left: 60px;
        padding-right: 60px;
    }
}

/* Part text is also the phone-drawer control. These rules used to live inside
   the desktop media query, so the drawer input shrank to its content (JACKS-200). */
.pub-parts-toolbar-part {
    height: var(--pub-py-control-h, 44px);
    min-height: var(--pub-py-control-h, 44px);
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    font-family: var(--pub-py-font-body, 'DM Sans', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--pub-py-headline, #0f172a);
    background: var(--pub-py-control-bg, var(--pub-py-filter-input-bg, #fff));
    border: 1px solid var(--pub-py-control-border, var(--pub-py-border, #e2e8f0));
    border-radius: var(--pub-py-control-radius, 10px);
    outline: none;
}

.pub-parts-toolbar-part:focus {
    border-color: var(--pub-py-amber, #67cae1);
    box-shadow: 0 0 0 3px var(--pub-py-filter-ring-open, var(--pub-py-focus-ring, rgba(58,170,200,0.28)));
}

.pub-parts-drawer-field {
    margin-bottom: var(--pub-py-sidebar-section-gap, 16px);
}

/* JACKS-222: phone/tablet Part field above Filters · Exact · view toggle. It is the
   toolbar search pill outside the toolbar card, so it sets the pill's radius itself.
   16px text keeps iOS from zooming on focus. */
.pub-parts-mobile-part {
    --rpt-filter-radius: var(--pub-py-control-radius, 10px);
    display: flex;
    width: 100%;
}

.pub-parts-mobile-part .rft-search-field {
    width: 100%;
    background-color: var(--pub-py-card, #fff);
}

.pub-parts-mobile-part .rft-search-field__input {
    font-size: 16px;
    padding: 10px 44px 10px 44px;
}

/* Drawer caption flag: "Year · Required" / "Engine · Optional". */
.pub-parts-field-flag {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pub-py-secondary, #64748b);
}

.pub-parts-field-flag--required {
    color: var(--pub-py-headline, #0f172a);
}

.pub-parts-drawer-field .pub-label {
    display: block;
    margin-bottom: 8px;
}

/* ── Inventory results strip: [toolbar] [Table | Cards] (JACKS-160) ──────────
 *
 * About 8:2 at 1280px without fixed percentages: the toolbar takes the remaining
 * width and the view toggle keeps its natural width. A literal 20% would leave dead
 * space beside the toggle on wide screens.
 */
@media (min-width: 1025px) {
    .pub-inv-strip-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .pub-inv-strip-row__toolbar {
        flex: 1 1 0;
        min-width: 0;
    }

    .pub-inv-strip-row > .pub-inv-view-toggle {
        flex: 0 0 auto;
    }

    /*
     * JACKS-175: same solid card as the table / vehicle cards (DESIGN-public.md).
     * Overrides .rft-toolbar--py frost (filter-surface + blur) on this strip only.
     * Control radius (Filters / search / Sort) stays --pub-py-control-radius.
     */
    .pub-inv-strip-toolbar {
        --rpt-filter-radius: var(--pub-py-control-radius, 10px);
        --rft-toolbar-radius: var(--pub-py-radius);
        --rft-toolbar-bg: var(--pub-py-card);
        --rft-toolbar-blur: none;
        --rft-toolbar-shadow: var(--pub-py-shadow-card);
        --rft-toolbar-shadow-active: var(--pub-py-shadow-card);
    }

    /* One row from 1025px to 1920px: search shrinks before anything wraps. */
    .pub-inv-strip-toolbar .rft-main-row--single {
        flex-wrap: nowrap;
    }

    .pub-inv-strip-toolbar .rft-main-row--single .rft-search-row {
        flex: 1 1 240px;
        min-width: 160px;
        max-width: none;
    }

    .pub-inv-strip-toolbar .rft-filter-slot {
        flex: 0 0 auto;
        max-width: none;
    }

    /* The chips row sits inside the card now: no outer spacing of its own. */
    .pub-inv-strip-toolbar .pub-inv-filters-active-row {
        margin: 0;
    }

    /* ── In-card secondary lines: filter row, then chips (JACKS-162) ─────────── */

    .pub-inv-strip-secondary {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
    }

    /* Toolbar script missing: Filters + its lines still stack under each other. */
    .pub-inv-strip-fallback {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /*
     * Compact filter row. Bases add up to ~950px + 6 gaps, so all 7 controls share
     * one line in a 1,050px card (1280px viewport) and wrap to a second line
     * below that. flex-grow lets them widen on big screens; never sideways scroll.
     */
    .pub-inv-filters-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding-top: 10px;
        border-top: 1px solid var(--pub-py-border);
    }

    .pub-inv-filters-row__slot {
        flex: 1 1 var(--pub-inv-filter-basis, 140px);
        min-width: var(--pub-inv-filter-basis, 140px);
        max-width: var(--pub-inv-filter-max, 260px);
        display: flex;
        align-items: stretch;
    }

    .pub-inv-filters-row__slot > * {
        width: 100%;
        min-width: 0;
    }

    /* JACKS-220: Year/Make/Model are the typeable combobox (icon + clear +
       chevron). JACKS-236 dropped Near me; five slots (year…sort) fit one line
       in the 1,050px card: 150+170+180+170+150+gaps ≈ 860px. */
    .pub-inv-filters-row__slot--year { --pub-inv-filter-basis: 150px; --pub-inv-filter-max: 200px; }
    .pub-inv-filters-row__slot--make { --pub-inv-filter-basis: 170px; }
    .pub-inv-filters-row__slot--model { --pub-inv-filter-basis: 180px; --pub-inv-filter-max: 300px; }
    .pub-inv-filters-row__slot--date { --pub-inv-filter-basis: 170px; --pub-inv-filter-max: 280px; }
    .pub-inv-filters-row__slot--sort { --pub-inv-filter-basis: 150px; }

    /* JACKS-200/201: parts slots also hold an icon, a clear button, and a
       chevron. Inventory's 110px year slot clips the value. These mins keep
       "2012" / "Toyota" / "CAMRY" whole and wrap the row instead. */
    .pub-parts-page .pub-inv-filters-row__slot--part { --pub-inv-filter-basis: 200px; --pub-inv-filter-max: 280px; }
    .pub-parts-page .pub-inv-filters-row__slot--year { --pub-inv-filter-basis: 168px; --pub-inv-filter-max: 220px; }
    .pub-parts-page .pub-inv-filters-row__slot--make { --pub-inv-filter-basis: 210px; --pub-inv-filter-max: 300px; }
    .pub-parts-page .pub-inv-filters-row__slot--model { --pub-inv-filter-basis: 280px; --pub-inv-filter-max: 420px; }
    .pub-parts-page .pub-inv-filters-row__slot--engine { --pub-inv-filter-basis: 210px; --pub-inv-filter-max: 300px; }
    .pub-parts-page .pub-inv-filters-row__slot--date { --pub-inv-filter-basis: 200px; --pub-inv-filter-max: 320px; }
    .pub-inv-filters-row .pub-drill-combobox__input {
        font-size: var(--pub-py-control-font-size, 14px);
        font-weight: 600;
    }
    .pub-inv-filters-row .pub-drill-combobox__icon {
        font-size: var(--pub-py-control-icon-size, 20px);
        color: var(--pub-py-secondary, #64748b);
    }

    /* Tighter trigger chrome so short values still show at the ~110px minimum. */
    .pub-inv-filters-row .rpt-filter-trigger {
        padding-left: 36px;
        padding-right: 28px;
    }

    .pub-inv-filters-row .rpt-filter-trigger__icon {
        left: 10px;
    }

    .pub-inv-filters-row .rpt-filter-trigger__arrow {
        right: 6px;
    }

    .pub-inv-filters-row .rpt-filter-trigger__label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}