/* Reusable form-picker chrome — the trigger side of the controls rendered by
 * common.forms.widgets (SearchSelectWidget, TimePickerWidget) and driven by
 * pickers.js. App-agnostic: nothing here names a feature. A picker is a wrapper
 * holding a trigger, an overlay and a hidden input that carries the
 * value. The overlay is placed by js/components/overlay.js and its surface,
 * search box, scroll region and rows are the shared list layer's
 * (css/components/pop-menu.css); this file owns the trigger, the value display
 * and the time row's duration column.
 *
 * Colours are theme tokens (theme-override.css). */

.picker {
    position: relative;
}
/* hidden until pickers.js wires it (it stamps data-picker-ready as it does), so
   the value populates before first paint instead of flashing in empty */
.picker:not([data-picker-ready]) {
    visibility: hidden;
}

/* ---- light-chrome trigger: reads as clickable text, box only on hover ---- */
.picker-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.picker-trigger:hover {
    background: var(--surface-1);
    border-color: var(--border-subtle);
}

.picker-trigger:focus, .picker-trigger.is-open {
    outline: none;
    background: var(--surface-2);
    border-color: var(--border-emphasis);
}

.picker-trigger--text .picker-value-name {
    font-size: 13px;
    color: var(--text-secondary);
}

.picker-caret {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
    transition: color .18s ease;
}

.picker-trigger:hover .picker-caret {
    color: var(--text-tertiary);
}

/* ---- trigger value display (filled client-side) ---- */
.picker-value {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.picker-value-name {
    font-size: 13.5px;
    font-weight: 500;
}

.picker-value-secondary {
    font-size: 12.5px;
}

.picker-placeholder {
    font-size: 13.5px;
}

/* ---- time picker: pill + time rows ---- */

/* keyboard cursor (arrow-key highlight) on a time row */
.picker-topt.is-active {
    background: var(--surface-3);
}

.picker-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    background: var(--surface-1);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.picker-pill:hover {
    background: var(--surface-2);
    border-color: var(--border-normal);
}

.picker-pill.is-open {
    background: var(--surface-2);
    border-color: rgba(74, 158, 255, .45);
    box-shadow: 0 0 0 1px rgba(74, 158, 255, .25);
}

.picker-timelist {
    min-width: 0;
    width: 210px;
}


/* A time row is a .pop-item (pop-menu.css) with a duration column pushed to its
   trailing edge; only the numeric alignment and that column are the widget's. */
.picker-topt {
    justify-content: space-between;
    gap: 12px;
    font-variant-numeric: tabular-nums;
}

.picker-topt .dur {
    font-size: 11px;
    color: var(--text-muted);
}

/* On the selected row's primary fill the muted grey drops below legible, so the
   duration tracks the row's own label colour at reduced weight instead. */
.picker-topt.is-sel .dur {
    color: inherit;
    opacity: .8;
}

.picker-topt .overnight {
    color: var(--color-orange);
}