/* ========================================
   COMPONENT: SCHEDULE ITEMS
   ======================================== */

.schedule-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-base);
    border: 1px solid;  /* colour per type: --appointment / --event below */
    background: var(--color-gray-50);
    width: 200px;           /* min/max removed — flex-shrink-0 makes them redundant */
    color: inherit;
    transition: background var(--transition-fast) var(--ease-out),
                box-shadow var(--transition-fast) var(--ease-out);
}

.schedule-item:hover {
    background: var(--color-gray-100);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.schedule-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.schedule-item--appointment { border-color: var(--color-appointment); }
.schedule-item--event       { border-color: var(--color-primary); }

/* "Next up" ring uses appointment blue — consistent with item identity */
.schedule-item--next {
    outline: 2px solid var(--color-appointment);
    outline-offset: -2px;
}

.schedule-item__time {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-appointment);
}

.schedule-item--event .schedule-item__time {
    color: var(--color-primary);
}

.schedule-item__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-item__sub {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-item__next-badge {
    margin-bottom: var(--space-1);
}

/* "Next up" badge — appointment-blue tint, matches item border/time color */
.badge-appointment {
    background-color: rgba(var(--color-appointment-rgb), 0.12);
    color: var(--color-appointment);
    border: 1px solid rgba(var(--color-appointment-rgb), 0.25);
}