/* Dashboard toolbar — row 2 of the dashboard header (arrangement C): the search
   box, Sort by, the page's own extra controls, and the quick-filter pill strip
   underneath.

   Canonical markup: shared/components/toolbar/_toolbar_row.html plus its pill
   strip (_condition_chips.html) and value picker. All five dashboards mount
   those — the opportunity dashboard, the bills dashboard, both lead boards and
   the workers roster — and a page adopting this toolbar mounts them too rather
   than copying the classes. The opportunity dashboard the row was lifted from
   wears it through a mapping file (app/assignments/_opps_toolbar_row.html); its
   card view's pinned header, which used to live here, is the shared --pinned
   variant now (pinned=True on the page_header include; rules in page-header.css).

   The buttons themselves are the platform components — .global-header-btn for
   Sort by, .global-segmented for the sort direction — so this file only supplies
   the layout, the pill strip, and the popovers. Pills are their own shape rather
   than .global-chip: a pill is an interactive control that opens a picker, and the
   charter reserves .global-chip for the static label. */

/* ── Layout ── one wrapper inside .global-page-header__toolbar so the chip row can
   sit full-width below the controls. It takes the whole flex line and re-creates the
   toolbar's own row inside it; page-header.css reaches the search box and the date
   nav through descendant selectors, so both keep their shipped placement. */
.global-toolbar {
    flex: 1 1 100%;
    min-width: 0;
}

.global-toolbar__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* page-header.css sends whatever follows the search to the far right — search on the
   left, the page's own cluster on the right. These controls are the search's OWN row,
   so that rule has to stop at this component's edge: on the roster's no-tabs header,
   the one mount it reaches, it stranded Sort by against the far side of the page. The
   actions cluster is the exception, because riding the far right is its whole job. */
.global-page-header .global-toolbar__row .global-page-search + *:not(.global-toolbar__actions) {
    margin-left: 0;
}

/* ── Actions ── the gear and whatever a page keeps beside it, at the end of the row
   the search box owns. They sit here rather than on the tabs line above so the tabs
   get that line to themselves. */
.global-toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    margin-left: auto;
}

/* Filter and Sort by both carry a label beside the icon, so they need more side
   padding than the icon-only .global-header-btn default. */
.global-toolbar__btn {
    padding: 0 var(--spacing-sm);
}

/* Filter is a toggle for the quick-filter row; pressed, it reads
   as held down from the moment the row shows, so it skips the button's fade in.
   Scoped to the toolbar to outrank main.css's .global-header-btn. */
.global-toolbar .global-toolbar__filter[aria-pressed="true"] {
    background: var(--color-surface-hover);
    border-color: var(--color-text-secondary);
    color: var(--color-text);
    transition: none;
}

/* How many filters are in play, on the Filter button. Rendered only above
   zero, so there is no empty-state size to hold. */
.global-toolbar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-neutral-ink-fg);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

/* ── Popovers ── each control opens its own, placed from the button's rect by the
   factory. They are position:FIXED because the header card clips what is inside it
   (page-header.css sets overflow:hidden to keep the rounded corners), so an
   absolutely positioned menu would be cut off at the header's bottom edge. Fixed
   escapes that clip, the same way the settings drawer already does. */
.global-toolbar__menu-wrap {
    display: inline-flex;
}

.global-toolbar__menu {
    position: fixed;
    z-index: var(--z-dropdown);
    min-width: 16rem;
    padding: var(--spacing-sm);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* Sort is one row — property, then direction — so it sizes to its contents. */
.global-toolbar__menu--sort {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    white-space: nowrap;
}

.global-toolbar__search,
.global-toolbar__select {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

/* The property combobox would otherwise size to its input's own default width. */
.global-toolbar__menu--sort .global-cs {
    flex: 0 0 auto;
    width: 14rem;
}

.global-toolbar__search:focus-visible,
.global-toolbar__select:focus-visible,
.global-toolbar__option:focus-visible,
.global-toolbar__chip:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

/* The list under a pinned search box: scrolls on its own so a long worker list
   never grows the popover past the fold. */
.global-toolbar__options {
    display: flex;
    flex-direction: column;
    max-height: 15rem;
    margin-top: var(--spacing-xsm);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.global-toolbar__option {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsm);
    width: 100%;
    padding: var(--spacing-xsm) var(--spacing-sm);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
}

.global-toolbar__option:hover {
    background: var(--color-surface-hover);
}

/* The option the pill already holds, so the picker reads as "this is what you have". */
.global-toolbar__option.is-active {
    background: var(--color-action-tint);
    color: var(--color-action);
    font-weight: var(--font-weight-medium);
}

/* The pencil's popover: a small caption over a list of ticks. The rows are the
   same shape as a pill's options so the two popovers read as one family; only
   the box in front says these are choices that stay, not one-shot picks. */
.global-toolbar__menu-title {
    margin: 0;
    padding: var(--spacing-2xs) var(--spacing-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.global-toolbar__option--check {
    gap: var(--spacing-sm);
}

.global-toolbar__option--check .global-checkbox {
    margin: 0;
}

/* Date and free-text pickers — a small stack that ends in its own Apply, since
   neither is done being typed until the person says so. */
.global-toolbar__dates {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xsm);
}

.global-toolbar__apply {
    align-self: flex-end;
    padding: var(--spacing-xs) var(--spacing-smd);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-action);
    color: var(--color-neutral-ink-fg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.global-toolbar__apply:disabled {
    opacity: 0.5;
    cursor: default;
}


.global-toolbar__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xsm);
    margin-top: var(--spacing-sm);
}

/* The strip always renders — it is the repaint target and carries the counts the
   Filter button reads — but shows only while Filter is pressed. */
.global-toolbar:not(.is-filter-open) .global-toolbar__chips {
    display: none;
}

/* The line between the pills and Advanced filters. */
.global-toolbar__sep {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    margin: 0 var(--spacing-2xs);
    background: var(--color-border);
}

/* The way into the drawer's All filters panel, with how many rules it holds
   beyond the pills. */
.global-toolbar__adv {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-2xs) var(--spacing-xs);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
}

.global-toolbar__adv:hover {
    background: var(--color-surface-hover);
}

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

/* A SET pill wears the action ink: it is the state doing the filtering, and the
   empty pills beside it are only offers. Every pill is a button that opens its
   picker (or the drawer), hence the pointer. */
.global-toolbar__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-action);
    border-radius: var(--radius-pill);
    background: var(--color-action-tint);
    color: var(--color-action);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}

/* An EMPTY pill reads as an OFFER, not a state: a dashed outline over nothing,
   the shape HubSpot uses for "you could filter by this". */
.global-toolbar__chip--add,
.global-toolbar__chip--round {
    border-color: var(--color-border);
    border-style: dashed;
    background: none;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-body);
}

.global-toolbar__chip--add:hover,
.global-toolbar__chip--round:hover {
    border-color: var(--color-action);
    color: var(--color-action);
}

/* The pencil that picks which fields wear a pill stays an icon — the pills beside
   it already say what the row is for. */
.global-toolbar__chip--round {
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    justify-content: center;
}

.global-toolbar__chip .bi-chevron-down,
.global-toolbar__caret {
    font-size: var(--font-size-2xs);
    opacity: 0.7;
}

/* The way out to the full builder — a text link, so it never competes with the
   chips for the eye. */
.global-toolbar__link {
    padding: var(--spacing-xs) var(--spacing-xs);
    border: 0;
    background: none;
    color: var(--color-action);
    font-size: var(--font-size-xs);
    cursor: pointer;
}

.global-toolbar__link:hover {
    text-decoration: underline;
}

/* A set pill's way out, at the foot of its picker. It keeps the link colour
   above, the token main.css's link rule uses (Nick, 09-26: darken it everywhere). */
.global-toolbar__link--clear {
    display: block;
    margin-top: var(--spacing-xsm);
}

/* ── Bottom bar ── (_view_bar.html) the count, Refresh, Reset to last save,
   Clone to new view and Save, at the foot of the screen on every saved-view
   board. It is the last child of .global-app-main, so sticky
   holds it to the bottom however far the page scrolls; on a phone it stands on
   the bottom nav, and beside a pushed drawer it stops at the drawer's edge.
   One rung under the pinned header card: a drawer that lives inside that card
   paints at the card's --z-sticky, and on a phone it covers the whole screen,
   so a bar at the same rung later in the page would sit on top of its buttons. */
.global-view-bar {
    --view-bar-height: 56px;
    --view-bar-save-width: 72px;

    position: sticky;
    bottom: var(--bottom-bar-h);
    z-index: var(--z-under-sticky);
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-smd);
    height: var(--view-bar-height);
    margin-right: var(--content-push);
    padding: 0 var(--spacing-md);
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
}

.global-view-bar__count {
    padding: var(--spacing-xs) var(--spacing-smd);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-card-bg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.global-view-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
}

/* Reset and Clone share one pill with a line between them. */
.global-view-bar__pair {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.global-view-bar__pair .global-icon-btn {
    border: 0;
    border-radius: var(--radius-pill) var(--radius-none) var(--radius-none) var(--radius-pill);
}

.global-view-bar__pair .global-clone .global-icon-btn {
    border-left: 1px solid var(--color-border);
    border-radius: var(--radius-none) var(--radius-pill) var(--radius-pill) var(--radius-none);
}

.global-view-bar__save {
    min-width: var(--view-bar-save-width);
    justify-content: center;
}

/* ── Clone to new view ── (_clone_menu.html) its name box and who-sees-it
   picks. In the bar it opens upward from the button; in the drawer, under
   its row. */
.global-clone {
    position: relative;
    display: inline-flex;
}

.global-clone--drawer {
    display: block;
}

.global-clone__menu {
    min-width: 16rem;
    padding: var(--spacing-sm);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.global-view-bar .global-clone__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--spacing-sm));
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
}

.global-clone--drawer .global-clone__menu {
    margin-top: var(--spacing-xs);
}

.global-clone__menu .global-toolbar__search {
    margin: var(--spacing-xs) 0;
}

.global-toolbar__link .global-toolbar__count,
.global-toolbar__adv .global-toolbar__count {
    margin-left: var(--spacing-2xs);
}

@media (max-width: 767.98px) {
    /* The pill row keeps the base wrap, so Advanced filters drops to a second
       line instead of sliding off the right edge. */
    .global-view-bar {
        padding: 0 var(--spacing-smd);
    }

    /* The same controls as on a desktop, only tall enough for a thumb. */
    .global-toolbar .global-toolbar__btn,
    .global-toolbar .global-toolbar__chip,
    .global-toolbar .global-toolbar__option,
    .global-toolbar .global-filter-builder-group__add {
        min-height: var(--control-h-touch);
    }

    .global-toolbar .global-icon-btn {
        width: var(--control-h-touch);
        height: var(--control-h-touch);
    }
}