/* ============================================================================
   CoachForce CRM — Time-Window Carousel Widget Styles (Sprint 4)

   Authority: Sprint_4_Athlete_Roster.md §3.5, Decision Document §6.8.

   Sharp corners, no shadow, ink + teal + mute via tokens. Active dot
   fills with --cf-teal; inactive dots fill with --cf-border-subtle.
   Disabled arrows use --cf-ink-mute + cursor: not-allowed.
   ============================================================================ */

.cf-tc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    /* Caller-controlled width; the widget fills its container. */
    width: 100%;
    min-height: 28px;
    user-select: none;
}

.cf-tc__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--cf-ink);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
    flex-shrink: 0;
}

.cf-tc__arrow:hover:not(:disabled) {
    background: var(--cf-surface-page);
}

.cf-tc__arrow:focus-visible {
    outline: 2px solid var(--cf-teal);
    outline-offset: -2px;
}

.cf-tc__arrow:disabled {
    color: var(--cf-ink-mute);
    cursor: not-allowed;
    opacity: 0.5;
}

.cf-tc__dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

/* Carousel dots — small filled square per Champion Standard sharp-corners.
   The original Decision §6.8 sketch used `●` glyphs (filled circle); we
   render as small squares so the corner rule holds. The semantic — three
   discrete positions, the active one filled with --cf-teal — is unchanged. */
.cf-tc__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--cf-border-subtle);
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.cf-tc__dot:hover:not(.cf-tc__dot--active) {
    background: var(--cf-text-mute);
}

.cf-tc__dot:focus-visible {
    outline: 2px solid var(--cf-teal);
    outline-offset: 2px;
}

.cf-tc__dot--active {
    background: var(--cf-teal);
}

.cf-tc__label {
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-text-mute);
    margin-left: auto;
    white-space: nowrap;
}