/* ===================================
   SEGMENTED CONTROL
   Pill-shaped toggle for 2-4 options.
   Active = white with shadow, inactive = transparent.
   =================================== */

.segmented-control {
    position: relative;
    display: inline-flex;
    background: var(--border-subtle);
    border-radius: var(--border-radius-xl);
    padding: 3px;
}

.segmented-control-pill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 0;
    background: var(--bg-surface);
    border-radius: calc(var(--border-radius-xl) - 3px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition:
        left 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

.segmented-control-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    /* Centred, padding matched to .btn-sm (var(--space-1_5) var(--space-3)) so
       the control sits at the same height as adjacent small buttons (e.g.
       "Refresh Bookings"). Rounding matches the pill so any future hover/focus
       background stays inside the pill's shape. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1_5) var(--space-3);
    border: none;
    border-radius: calc(var(--border-radius-xl) - 3px);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    line-height: var(--line-height-normal);
    /* Suppress the grey flash on tap (mobile / touch tablets) */
    -webkit-tap-highlight-color: transparent;
}

.segmented-control-btn-active {
    color: var(--text-primary);
}

/* Count pill embedded inside a tab. Renders when an option provides `count`. */
.segmented-control-btn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius-full);
    padding: 1px var(--space-1_5);
    line-height: 1.3;
    transition: background 0.18s, color 0.18s;
}

.segmented-control-btn-active .segmented-control-btn-count {
    background: rgba(0, 0, 0, 0.07);
    color: var(--text-secondary);
}

/* Disabled state */
.segmented-control-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.segmented-control-btn:disabled {
    cursor: not-allowed;
}