/* DiveLog shared searchable combobox.
   Theme tokens come from dl.css — no hardcoded colors here. */

/* ── Form-field trigger (paired with DL.Form.combo) ─────────────────── */
/* Sized and filled to match .dlf-input exactly — same min-height, same
   padding, same surface, same radius. A dropdown and a text input sit
   side by side in most forms (buddy: Agency next to Diver ID), so any
   drift in height or fill reads as a misaligned row. The 36px right
   padding this carried was left over from an absolutely-positioned
   caret; .dlf-combo-arrow is a flex child now, so it was dead space. */
.dlf-combo {
    width: 100%;
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-subtle);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dlf-combo:focus,
.dlf-combo.dlf-combo-open {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.dlf-combo:hover:not(:disabled) { border-color: var(--accent); }
.dlf-combo:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    color: var(--text-muted);
}
.dlf-combo-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dlf-combo-value.is-placeholder { color: var(--text-muted); }
.dlf-combo-sub {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.dlf-has-error .dlf-combo { border-color: var(--err); }

/* ── Popup ──────────────────────────────────────────────────────────── */
/* Marker class only — dl-combo.js puts it on the anchor that currently
   owns the open popup. It carries no positioning: the popup is a child
   of <body> (a portal), never of the anchor, so no card, table wrapper,
   scroller or transformed ancestor can clip it or trap its z-index. */
.dl-combo-host { position: relative; }

.dl-combo {
    /* Fixed + JS-computed top/left/min-width/max-height (see _position()
       in dl-combo.js). z-index sits above the header (1000) and the
       modal/image-viewer layer (1300) so a combo inside a dialog still
       renders on top; the crop modal (5200) deliberately stays above. */
    position: fixed;
    top: 0;
    left: 0;
    max-width: min(420px, calc(100vw - 24px));
    z-index: 5000;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: 10px;
    box-shadow: var(--shadow), 0 0 0 4px var(--accent-soft);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform-origin: top left;
    animation: dl-combo-in .12s ease-out;
}
/* The flip classes only steer the open animation now — the actual
   coordinates come from _position(). */
.dl-combo.dl-combo-flip-left { transform-origin: top right; }
.dl-combo.dl-combo-flip-up   { transform-origin: bottom left; }
.dl-combo.dl-combo-flip-up.dl-combo-flip-left { transform-origin: bottom right; }
.dl-combo.dl-combo-leaving {
    animation: dl-combo-out .1s ease-in forwards;
    pointer-events: none;
}

@keyframes dl-combo-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes dl-combo-out {
    from { opacity: 1; transform: translateY(0)   scale(1); }
    to   { opacity: 0; transform: translateY(-4px) scale(0.98); }
}

/* Search input */
.dl-combo-input {
    width: 100%;
    background: var(--bg-elev);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.dl-combo-input::placeholder { color: var(--text-muted); }
/* type="search" gives the input a native cancel button and an iOS-style
   round look. We rely on the search type to defang Safari's saved-form
   autofill (the input no longer matches text-history triggers), but
   the chrome is at odds with the themed combo — flatten it back to a
   plain field. */
.dl-combo-input::-webkit-search-cancel-button,
.dl-combo-input::-webkit-search-decoration,
.dl-combo-input::-webkit-search-results-button,
.dl-combo-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.dl-combo-input { -webkit-appearance: none; appearance: none; }

/* Favorites strip */
.dl-combo-favs {
    border-bottom: 1px solid var(--border);
    padding: 2px 0;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Results scroller */
.dl-combo-results {
    max-height: 260px;
    /* min-height:0 so the flex column can hand the popup's JS-computed
       max-height down to this scroller instead of overflowing it. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}
.dl-combo-results::-webkit-scrollbar { width: 10px; }
.dl-combo-results::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.dl-combo-results::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

/* Rows */
.dl-combo-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--text);
    line-height: 1.3;
    transition: background .08s ease, color .08s ease;
}
.dl-combo-option:hover,
.dl-combo-option.active {
    background: var(--accent-soft);
    color: var(--text);
}
.dl-combo-option.selected {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.dl-combo-option.selected.active {
    background: var(--accent-soft);
}
.dl-combo-option.selected::before {
    content: "";
    width: 4px;
    height: 18px;
    background: var(--accent);
    border-radius: 2px;
    margin-right: -6px;
    flex-shrink: 0;
}

.dl-combo-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.dl-combo-sub {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

.dl-combo-empty {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

/* ── Mobile bottom sheet ────────────────────────────────────────────── */
@media (max-width: 700px) {
    /* Sheet mode owns its own geometry — !important so a stale inline
       coordinate left over from a desktop-width open (viewport resized
       or device rotated while the popup was up) can't fight it. Keeps
       the base z-index (5000). */
    .dl-combo {
        position: fixed;
        top: auto !important;
        bottom: 0;
        left: 0 !important;
        right: 0 !important;
        /* `none`, not 100vw: dl.css's `html { zoom: 0.9 }` scales vw units
           too, so 100vw resolved to 90% of the screen and the sheet sat
           ~10% short of the right edge. left/right:0 already sizes it. */
        max-width: none;
        min-width: 0 !important;
        border-radius: 14px 14px 0 0;
        border: none;
        border-top: 1px solid var(--border);
        max-height: 70vh !important;
        animation: dl-combo-sheet-in .18s ease-out;
        box-shadow: 0 0 0 100vh rgba(0,0,0,0.45), 0 -8px 28px rgba(0,0,0,0.35);
    }
    .dl-combo.dl-combo-leaving { animation: dl-combo-sheet-out .14s ease-in forwards; }
    .dl-combo::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        margin: 8px auto 4px;
        background: var(--border);
        border-radius: 2px;
        flex-shrink: 0;
    }
    .dl-combo-input {
        padding: 14px 16px;
        font-size: 16px;   /* prevents iOS auto-zoom */
    }
    .dl-combo-results { max-height: none; flex: 1 1 auto; }
    .dl-combo-favs { flex-shrink: 0; }
    .dl-combo-option { padding: 12px 16px; font-size: 15px; }
    .dl-combo-option .dl-combo-sub { display: inline; }
}

@keyframes dl-combo-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
}
@keyframes dl-combo-sheet-out {
    from { transform: translateY(0);    }
    to   { transform: translateY(100%); }
}

/* ── Trigger arrow inside .dlf-combo ────────────────────────────────── */
.dlf-combo .dlf-combo-arrow {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform .15s ease, color .15s ease;
    pointer-events: none;
    flex-shrink: 0;
}
.dlf-combo.dlf-combo-open .dlf-combo-arrow {
    transform: rotate(270deg);
    color: var(--accent);
}

/* Respect users who prefer no motion. */
@media (prefers-reduced-motion: reduce) {
    .dl-combo,
    .dl-combo.dl-combo-leaving {
        animation: none;
    }
    .dlf-combo .dlf-combo-arrow { transition: none; }
}

/* WCAG 2.5.5 on touch. .dlf-combo carries --touch-target at every width
   now (see above), so only the standalone trigger needs the bump. */
@media (max-width: 720px) {
    .dl-combo-trigger { min-height: var(--touch-target); }
}