/* 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;
}
/* The shared autocomplete module swaps the Project/Priority selects for an auto-resizing
   textarea and measures its height on load. Because this form starts hidden (display:none
   until expanded), it measures 0 and the module pins it to inline height:0, collapsing it.
   Force a normal control height (!important beats the module's inline style) and keep it on
   one line like the select it replaced. */
form.advanced_search .input_block textarea.autocomplete-input {
    height: 2.4em !important;
    min-height: 2.4em;
    overflow: hidden;
    resize: none;
    white-space: nowrap;
}
/* 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;
}