/* ===========================================
   Preset Tabs — segmented control (design system v3.1)

   The canonical time-range / mode selector across the web UI (replaces the
   old .timeframe-select dropdowns and bespoke preset button groups).
   Markup comes from the preset_tabs() macro in partials/_macros.html;
   behaviour (active-state + bubbling `preset-change` CustomEvent) is the
   delegated handler in static/js/ui.js — pages listen for the event and
   keep their own data fetching.
   =========================================== */

.preset-tabs {
    display: flex;
    gap: 2px;
    background: var(--surface-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    padding: 2px;
    width: max-content;
    max-width: 100%;
}

.preset-btn {
    padding: 0.25rem 0.65rem;
    border-radius: 5px;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.12s;
    white-space: nowrap;
}

.preset-btn:hover { color: var(--text-primary); }

.preset-btn.active {
    background: var(--card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.preset-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-toggle);
}

.preset-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Buttons in .btn flow get translateY on hover (layout.css); segmented
   buttons must stay put. */
.preset-btn:hover:not(:disabled),
.preset-btn:active:not(:disabled) { transform: none; }

@media (max-width: 768px) {
    /* Long option sets scroll horizontally instead of breaking layout. */
    .preset-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .preset-tabs::-webkit-scrollbar { display: none; }
}