/* Advanced-filter builder — the grouped condition list every saved-view drawer
   shows. Markup: shared/components/_filter_builder.html. Behaviour:
   shared/js/filter-builder.js.

   Each condition reads as a sentence ("Service type is Wedding") whose three parts
   are clickable tokens. Rows inside a group are joined by "and"; groups are cards
   joined by "or" — the border is what makes the boolean split readable at a glance.

   Lifted out of features/opportunities/milestones.css when the roster asked for the
   same builder. The rules are unchanged; only the names lost their opp- prefix, which
   the naming charter does not allow on a cross-surface component anyway.

   Shared vocabulary, on purpose: the buttons, inputs, section frame and hint text
   are the drawer content language every saved-view panel wears (.global-drawer__btn,
   __input, __section, __hint — components/drawer-content.css, loaded on every page),
   so the builder reads as part of whichever drawer holds it. */
/* One OR group: everything inside a border ANDs together, borders OR. */
.global-filter-builder-group {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.global-filter-builder-list {
    margin-bottom: var(--spacing-smd);
}

/* Inside a group card the card's own padding closes the gap to the add button, so
   the list gives most of its old air back. */
.global-filter-builder-group .global-filter-builder-list {
    margin-bottom: var(--spacing-xs);
}

/* The two connectors — one quiet chip, two placements. Quiet on purpose: the
   sentences carry the eye, the connector only joins them. */
.global-filter-builder-and,
.global-filter-builder-or {
    padding: 1px var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

/* Between rows inside a group card. */
.global-filter-builder-and {
    display: inline-block;
    margin: var(--spacing-2xs) 0 var(--spacing-2xs) var(--spacing-xs);
}

/* Between group cards, sitting in the gutter between their borders. */
.global-filter-builder-or {
    display: inline-block;
    margin: 0 0 var(--spacing-sm) var(--spacing-sm);
}

/* ANDs a condition onto this card. Styled like the sentence tokens, not the drawer's
   block buttons — it belongs to the card's conversational register. */
.global-filter-builder-group__add {
    padding: var(--spacing-2xs) var(--spacing-xsm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.global-filter-builder-group__add:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
}

.global-filter-builder-group__add:focus-visible {
    outline: 2px solid var(--color-focus-ring);
}

.global-filter-builder-row {
    /* The box a row-wide picker hangs from (see --row below, and the phone rule). */
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    padding: var(--spacing-xsm) var(--spacing-xs);
    border-radius: var(--radius-sm);
}

.global-filter-builder-row:hover {
    background: var(--color-surface-subtle);
}

/* Generous line-height: the tokens sit inline and wrap like words, so the sentence
   stays readable when a long value pushes it onto a second line. */
.global-filter-builder-sentence {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 2;
    color: var(--color-text-muted);
}

/* Anchors the token's picker to the token itself. */
.global-filter-builder-anchor {
    position: relative;
    display: inline-block;
}

.global-filter-builder-token {
    padding: var(--spacing-2xs) var(--spacing-xsm);
    font: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.global-filter-builder-token:hover {
    background: var(--color-surface-hover);
}

.global-filter-builder-token:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

/* Property and value carry the meaning, so they read solid; the operator is the
   connecting word and stays light. */
.global-filter-builder-token--property,
.global-filter-builder-token--value {
    font-weight: var(--font-weight-medium);
    color: var(--color-action);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 3px;
}

.global-filter-builder-token--operator {
    color: var(--color-text-muted);
}

/* Delete stays out of the way until the row is hovered or the button is focused. */
.global-filter-builder-row__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0;
}

.global-filter-builder-row:hover .global-filter-builder-row__remove,
.global-filter-builder-row__remove:focus-visible {
    opacity: 1;
}

.global-filter-builder-row__remove:hover {
    color: var(--color-error);
    background: var(--color-error-subtle);
}

.global-filter-builder-row__remove:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Touch has no hover, so the delete button would never appear — keep it visible. */
@media (hover: none) {
    .global-filter-builder-row__remove {
        opacity: 1;
    }
}

/* Token pickers — a small popover hanging off the token you clicked. */
.global-filter-builder-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--z-dropdown);
    width: 240px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.global-filter-builder-picker--narrow {
    width: 170px;
}

/* On a phone the panel fills the screen, so a picker hung off a token near the right
   edge runs past it with no way to scroll over. Narrow screens drop the picker under
   the whole row instead, which always lands inside the panel. */
@media (max-width: 575.98px) {
    .global-filter-builder-anchor {
        position: static;
    }

    .global-filter-builder-picker,
    .global-filter-builder-picker--narrow {
        width: 100%;
    }
}

/* The day count beside its ago / from-now pair needs more than a token's 240px —
   the pair alone is wider, and squeezed, the count box shrinks to its spinner with
   the number out of sight. That picker hangs under the whole row on every screen:
   the phone rule, for one anchor. */
.global-filter-builder-anchor--row {
    position: static;
}

.global-filter-builder-anchor--row > .global-filter-builder-picker {
    width: 100%;
}

.global-filter-builder-picker__search {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-sm);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
}

.global-filter-builder-picker__search:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

.global-filter-builder-picker__list {
    max-height: 260px;
    padding: var(--spacing-xs);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.global-filter-builder-picker__group {
    margin: var(--spacing-xsm) 0 var(--spacing-2xs);
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.global-filter-builder-picker__option {
    display: block;
    width: 100%;
    padding: var(--spacing-xsm) var(--spacing-sm);
    font-size: var(--font-size-sm);
    text-align: left;
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.global-filter-builder-picker__option:hover {
    background: var(--color-surface-hover);
}

.global-filter-builder-picker__option.is-picked {
    font-weight: var(--font-weight-medium);
    color: var(--color-action);
    background: var(--color-surface-subtle);
}

/* "Me" — the value that means whoever is reading. It leads the list, so it gets
   the rule the other rows would otherwise run into. */
.global-filter-builder-picker__option--viewer {
    margin-bottom: var(--spacing-xsm);
    font-weight: var(--font-weight-medium);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* The bolt beside "Me", in the picker's row and on the value token. Sized in em
   so it tracks whatever text it sits beside, and painted the action ink the
   picked row already wears. */
.global-viewer-bolt {
    width: 0.85em;
    height: 0.85em;
    margin-right: var(--spacing-2xs);
    vertical-align: -0.1em;
    color: var(--color-action);
}

.global-filter-builder-picker__pad {
    padding: var(--spacing-sm);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* A between-date pair shares one picker, each input taking half. */
.global-filter-builder-range {
    display: flex;
    gap: var(--spacing-xsm);
}

/* Child selectors, not the input's own class: the row's children are the two
   dates of a custom range, or a day count beside an ago / from-now pair, and
   naming the host drawer's input class here would tie this sheet to the borrow
   the markup makes. The pair keeps the width its labels need — the host class
   would stretch it to the whole row and squeeze the count to its spinner — and
   the box beside it takes the rest. */
.global-filter-builder-range > input {
    flex: 1 1 0;
    min-width: 0;
}

.global-filter-builder-range > .global-segmented {
    flex: 0 0 auto;
}

.global-filter-builder-add {
    display: block;
    margin-bottom: var(--spacing-sm);
}

/* The All filters panel with nothing set: the line and Add filter under it,
   centered (_filter_builder.html all_filters). */
.global-filter-builder-empty {
    margin: var(--spacing-md) 0 var(--spacing-smd);
    text-align: center;
    font-size: var(--font-size-md);
    color: var(--color-text);
}

.global-filter-builder-add--center {
    margin-inline: auto;
}

/* Add-"or"-group takes the same slot once a first group exists. */
.global-filter-builder-add-group {
    display: block;
    margin-bottom: var(--spacing-sm);
}

/* The line is what separates ending the question from extending it, so the
   commit never reads as a third add. */
.global-filter-builder-commit {
    margin-top: var(--spacing-smd);
    padding-top: var(--spacing-smd);
    border-top: 1px solid var(--color-border);
}

.global-filter-builder-commit .global-drawer__btn {
    width: 100%;
    justify-content: center;
}