/* ---------- Top bar ---------- */
/* No nav here, so whatever wraps sits right; the sign-out's auto margin keeps the brand left. */
.topbar {
    justify-content: flex-end;
}

/* Header action group: shift toggle + share location, sized as one consistent pair. */
.route-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.action-btn {
    flex: 1 1 0;
    min-width: 9rem;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--shadow-card);
}

.action-btn:hover {
    border-color: var(--accent);
}

.action-btn:disabled { opacity: 0.6; cursor: default; }

.action-btn-on { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }

.action-btn-off { background: var(--surface); color: var(--muted); }
.stop-next {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.stop-rail {
    flex-shrink: 0;
}

.stop-seq {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--content-bg);
    color: var(--muted);
    font-weight: 700;
    font-size: 0.95rem;
}

.stop-pickup .stop-seq {
    /* The hairline token doubles as the neutral chip fill. */
    background: var(--border);
    color: var(--ink);
}

.stop-dropoff .stop-seq {
    background: var(--accent-soft);
    color: var(--brass-dark);
}

/* Address + open-in-maps button side by side. The row takes over the address's outer margins;
   min-width lets a long address wrap instead of pushing the round button off the card. */
.stop-address-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0.1rem 0 0.5rem;
}

.stop-address-row .stop-address {
    margin: 0;
    min-width: 0;
}

.nav-btn {
    color: var(--accent);
}

.stop-notes {
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.7rem;
    background: var(--content-bg);
    border-radius: 0.5rem;
    font-size: 0.92rem;
}

/* ---------- Drop-off address editor ---------- */

.dropoff-confirm {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.7rem;
    padding: 0.7rem 0.8rem;
    background: var(--content-bg);
    border-radius: 0.6rem;
}

.dropoff-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    font-weight: 700;
}

.field-row {
    /* Stretch so the Save button matches the field's height, not just its text. */
    align-items: stretch;
    /* Positioned so the suggestion list hangs off the whole ROW rather than off the text field alone.
       The field is only ~217px on a 390px phone once the Save button takes its share, and a list that
       narrow wraps every address onto two lines. Spanning the row keeps them on one. */
    position: relative;
}

/* Base's input, bumped for reading at arm's length and freed of the desk-form width cap. */
.input {
    font-size: 1rem;
    max-width: none;
}

/* Base's padding leaves this at 41px; this app is used one-handed, so it needs the 44px target. */
.btn-sm {
    min-height: 44px;
}

.dropoff-input {
    flex: 1;
    min-width: 0;
}

/* ---------- Address type-ahead (AddressField.razor) ---------- */

/* Takes over the flex slot .dropoff-input used to hold directly, so the row still lays out as
   [ field ][ Save ]. Deliberately NOT positioned: that leaves .field-row as the list's containing
   block, so the list spans the full row width instead of the narrower field. */
.address-field {
    flex: 1;
    min-width: 0;
}

.address-field .dropoff-input {
    width: 100%;
}

/* Absolutely positioned rather than fixed-and-anchored (the console's approach): nothing on this page
   clips it, and an in-flow list rides with the page when the soft keyboard shifts the viewport, where a
   fixed one would fight it. */
.address-suggestions {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.25rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-pop);
}

/* Thumb-sized. min-height is the 44px tap target, not decoration - this is used one-handed, standing up. */
.address-suggestion {
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 1rem;
}

/* :active as well as base.css's :hover and .is-active - a touch has no hover to show the tap landed. */
.address-suggestion:active {
    background: var(--accent-soft);
}

.btn-confirm {
    width: 100%;
}