/* ============================================================
   tabs.css — squared day-selector buttons on a light-gray fill,
   inside the white schedule-card. The wrap is sticky so the strip
   stays pinned to the top of the viewport while the user scrolls
   through the day content.
   ============================================================ */

.darom-tabs-wrap {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--c-white);      /* opaque — blocks content scrolling under */
    padding: 20px 24px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.darom-tabs {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
}
.darom-tab {
    flex: 1;
    background: var(--c-mist);       /* #f4f5f4 — light gray fill */
    border: 1px solid var(--c-line);
    border-radius: 0;                /* fully squared corners */
    padding: 14px 16px;
    font-family: inherit;
    font-size: var(--t-pL);
    line-height: 1.2;
    font-weight: 500;
    color: var(--c-ink);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.darom-tab:hover,
.darom-tab:focus-visible {
    background: var(--c-line);
    border-color: var(--c-ink);
    outline: none;
}
.darom-tab[aria-selected="true"] {
    background: var(--c-ink);
    color: var(--c-white);
    font-weight: 700;
    border-color: var(--c-ink);
}

@media (max-width: 760px) {
    .darom-tabs-wrap { padding: 16px; }
    /* Figma 191: tabs wrap to two rows (3 + 2) instead of one scroll-strip. */
    .darom-tabs {
        flex-wrap: wrap;
        gap: 4px;
        row-gap: 4px;
    }
    .darom-tab {
        /* 3 tabs per row at most (3*33% with the 4px gap absorbed). */
        flex: 1 1 calc((100% / 3) - 4px);
        min-width: calc((100% / 3) - 4px);
        font-size: 13px;
        padding: 16px 8px 14px;
    }
}