/* Advanced search restyle + collapsible summary bar.
   Everything here is scoped to .advanced_search and the JS-injected summary bar,
   so no other forms in the app are affected. Pairs with /js/advanced-search.js. */

:root {
    --as-accent: var(--dovi-blue, #34567a);
    --as-border: #d7dce2;
    --as-divider: #eef0f3;
    --as-surface: #ffffff;
    --as-muted: #6b7280;
    --as-tint: rgba(52, 86, 122, 0.08);
    --as-tint-border: rgba(52, 86, 122, 0.25);
}

/* Hide the full form until JS builds the summary bar. The .js class is set
   synchronously in the document head, so the big form never flashes on load.
   With JavaScript disabled the class is never added and the form shows normally. */
html.js form.advanced_search {
    display: none;
}

/* ---------- restyled full form (revealed when expanded) ---------- */
form.advanced_search.box {
    background: var(--as-surface);
    border: 1px solid var(--as-border);
    border-radius: 10px;
    padding: 1.25em 1.5em;
}

form.advanced_search .col {
    margin: 0;
}
form.advanced_search .col + .col {
    margin-left: 2em;
    padding-left: 2em;
    border-left: 1px solid var(--as-divider);
}

/* Field rows: label sits above its input for a cleaner, less cramped grid */
form.advanced_search .input_block {
    margin: 0 0 0.85em;
}
form.advanced_search .input_block * {
    display: inline-block;
}
form.advanced_search .input_block > label {
    display: block;
    width: auto;
    text-align: left;
    font-size: 0.8em;
    color: var(--as-muted);
    margin-bottom: 0.3em;
}
form.advanced_search .input_block > label:after {
    content: '';
}

form.advanced_search .input_block select,
form.advanced_search .input_block textarea,
form.advanced_search .input_block input[type=text],
form.advanced_search .input_block input[type=email],
form.advanced_search .input_block input[type=number],
form.advanced_search .input_block input[type=password],
form.advanced_search .input_block input[type=date] {
    padding: 0.4em 0.5em;
    font-size: inherit;
    width: 13em;
    height: 2.4em;
    border: 1px solid var(--as-border);
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
/* Textareas grow with their content rather than locking to the control height */
form.advanced_search .input_block textarea {
    height: auto;
}
/* Advanced-search filter rows stay compact, so keep these fields on one line
   (overriding the module's wrapping default). The module now guards against the
   once-hidden squish on its own, so the old height:!important hack is removed. */
form.advanced_search .input_block textarea.autocomplete-input {
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}
/* Native date inputs need room for the full mm/dd/yyyy mask and the picker icon.
   The .from_to[type=date] selector is deliberately more specific than the range-width
   rule below so date ranges aren't squeezed to the narrow numeric-range width. */
form.advanced_search .input_block input[type=date],
form.advanced_search .input_block input.from_to[type=date] {
    width: 9.5em;
    min-width: 9.5em;
}
form.advanced_search .input_block select:focus,
form.advanced_search .input_block textarea:focus,
form.advanced_search .input_block input[type=text]:focus,
form.advanced_search .input_block input[type=email]:focus,
form.advanced_search .input_block input[type=number]:focus,
form.advanced_search .input_block input[type=password]:focus,
form.advanced_search .input_block input[type=date]:focus {
    outline: none;
    border-color: var(--as-accent);
    box-shadow: 0 0 0 3px var(--as-tint);
}

/* The =/not-equal operator is secondary, so demote it to a small quiet control */
form.advanced_search .input_block select.not-equal {
    width: 2.6em;
    min-width: 2.6em;
    padding: 0.4em 0.2em;
    margin-right: 4px;
    color: var(--as-muted);
    background: #f3f5f7;
    text-align: center;
}

/* Date / number range pairs stay narrow and sit side by side */
form.advanced_search .input_block input.from_to,
form.advanced_search .input_block input.hasDatepicker {
    width: 6.5em;
    margin-right: 4px;
}


/* Yes / No / Both radio groups become a single segmented control */
form.advanced_search .input_block input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
form.advanced_search .input_block input[type=radio] + label {
    border: 1px solid var(--as-border);
    border-right: none;
    padding: 0.35em 0.75em;
    margin: 0;
    cursor: pointer;
    background: #fff;
    color: var(--as-muted);
    font-size: 0.9em;
}
form.advanced_search .input_block input[type=radio]:first-of-type + label {
    border-radius: 6px 0 0 6px;
}
form.advanced_search .input_block input[type=radio]:last-of-type + label {
    border-right: 1px solid var(--as-border);
    border-radius: 0 6px 6px 0;
}
form.advanced_search .input_block input[type=radio]:checked + label {
    background: var(--as-accent);
    border-color: var(--as-accent);
    color: #fff;
}
form.advanced_search .input_block input[type=radio]:focus + label {
    box-shadow: 0 0 0 3px var(--as-tint);
}

/* The form's own submit button picks up the accent colour */
form.advanced_search input[type=submit].button,
form.advanced_search .button.next input[type=submit] {
    background: var(--as-accent);
    border-color: var(--as-accent);
}

/* ---------- JS-injected summary bar ---------- */
.advanced-search-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--as-surface);
    border: 1px solid var(--as-border);
    border-radius: 10px;
    padding: 0.6em 0.85em;
    margin-bottom: 1em;
}

.advanced-search-summary .summary-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.advanced-search-summary .filter-icon {
    color: var(--as-muted);
    font-size: 0.85em;
    margin-right: 2px;
}
.advanced-search-summary .summary-empty {
    color: var(--as-muted);
    font-size: 0.9em;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    line-height: 1;
    color: var(--as-accent);
    background: var(--as-tint);
    border: 1px solid var(--as-tint-border);
    padding: 5px 8px 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.search-chip .chip-remove {
    cursor: pointer;
    color: var(--as-accent);
    opacity: 0.6;
    text-decoration: none;
    font-size: 1.1em;
    line-height: 1;
}
.search-chip .chip-remove:hover {
    opacity: 1;
}

.advanced-search-summary .summary-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
/* Quick-filter presets are relocated here from the form and shown as pills */
.advanced-search-summary .summary-actions a.button.ghost {
    margin: 0;
    padding: 0.35em 0.8em;
    font-size: 0.85em;
    font-weight: normal;
    border-radius: 999px;
    border-width: 1px;
}
.advanced-search-summary .toggle-filters {
    margin: 0;
    cursor: pointer;
    border-radius: 6px;
    padding: 0.4em 0.9em;
    font-size: 0.85em;
}
.advanced-search-summary .toggle-filters .caret {
    font-size: 0.8em;
}
.advanced-search-summary .do-search {
    margin: 0;
    background: var(--as-accent);
    border-color: var(--as-accent);
    border-radius: 6px;
    padding: 0.4em 1em;
    font-size: 0.85em;
}