/* Minimal reusable attendance timeline */
.coordination-attendance-modal {
    width: min(1440px, calc(100vw - 24px));
}

.coordination-attendance-modal .modal-header {
    align-items: flex-start;
}

.coordination-attendance-modal-heading {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.coordination-attendance-modal-heading > h2 {
    font-weight: 650;
}

.coordination-attendance-modal-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 7px;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 450;
    line-height: 1.35;
}

.coordination-attendance-modal-context[hidden] {
    display: none;
}

.attendance-report-context-group {
    font-size: 12px;
}

.attendance-report-context-trainers {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.attendance-timeline-report {
    gap: 10px;
    min-width: 0;
    color: var(--ink);
}

.attendance-report-legend {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 14px;
    min-width: 0;
    padding: 2px 0 10px;
}

.attendance-legend-group {
    display: flex;
    align-items: center;
    flex: 1 1 420px;
    flex-wrap: wrap;
    gap: 7px 14px;
    min-width: 0;
}

.attendance-legend-separator {
    align-self: stretch;
    width: 1px;
    min-height: 22px;
    background: var(--border);
}

.attendance-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 450;
    line-height: 1.25;
    white-space: nowrap;
}

.attendance-legend-item > i {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    background: #f1f5f9;
}

.attendance-legend-item > strong {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.attendance-legend-item.is-session-realizada > i,
.attendance-legend-item.is-attendance-asistencia > i {
    border-color: #34d399;
    background: #22c55e;
}

.attendance-legend-item.is-session-sustitucion > i {
    border-color: #a78bfa;
    background: #8b5cf6;
}

.attendance-legend-item.is-session-no-realizada-entrenador > i {
    border-color: #fdba74;
    background: #f97316;
}

.attendance-legend-item.is-session-no-realizada-programa > i {
    border-color: #93c5fd;
    background: #60a5fa;
}

.attendance-legend-item.is-session-suspendida-usuarios > i,
.attendance-legend-item.is-attendance-falta-no-comunicada > i {
    border-color: #fca5a5;
    background: #ef4444;
}

.attendance-legend-item.is-attendance-falta > i {
    border-color: #fde68a;
    background: #facc15;
}

.attendance-legend-item.is-session-planificada > i,
.attendance-legend-item.is-attendance-no-aplica > i {
    border-color: #cbd5e1;
    background: #e2e8f0;
}

.attendance-report-open-group {
    margin-left: auto;
}

.attendance-timeline-report .attendance-report-scroll {
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.attendance-report-table {
    width: max-content;
    min-width: 100%;
}

.attendance-timeline-report .attendance-report-row {
    grid-template-columns: 280px max-content;
    width: max-content;
    min-width: 100%;
    background: var(--surface);
}

.attendance-timeline-report .attendance-report-row.is-session-row,
.attendance-timeline-report .attendance-report-row.is-membership-historical,
.attendance-timeline-report .attendance-report-row.is-membership-occasional {
    background: var(--surface);
}

.attendance-timeline-report .attendance-report-person {
    align-content: center;
    gap: 5px;
    min-width: 0;
    padding: 14px;
    background: var(--surface);
}

.attendance-timeline-report .attendance-report-group-summary {
    padding-block: 10px;
}

.attendance-report-entity-link {
    width: fit-content;
    max-width: 100%;
    color: var(--ink);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
}

.attendance-report-entity-link:hover {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.attendance-timeline-report .attendance-report-person > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 450;
    line-height: 1.35;
}

.attendance-trainer-reference {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    font-size: inherit;
    font-weight: 450;
}

.attendance-trainer-reference small {
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.3;
}

.attendance-trainer-reference small.is-active {
    border-color: #a7f3d0;
    color: #047857;
    background: #d1fae5;
}

.attendance-trainer-reference small.is-inactive {
    border-color: #cbd5e1;
    color: #475569;
    background: #e2e8f0;
}

.attendance-report-total {
    color: var(--ink);
    font-size: 12px;
    font-weight: 450;
    white-space: nowrap;
}

.attendance-report-total > strong {
    font-weight: 650;
}

.attendance-report-person-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.attendance-report-person-summary > strong {
    color: var(--muted);
    font-size: 12px;
    font-weight: 450;
}

.attendance-timeline-report .attendance-membership-badge {
    margin: 0;
    padding: 2px 6px;
    border: 1px solid transparent;
    font-size: 9px;
    font-weight: 650;
    text-transform: none;
}

.attendance-timeline-report .attendance-membership-badge.is-current {
    border-color: #a7f3d0;
    color: #047857;
    background: #d1fae5;
}

.attendance-timeline-report .attendance-membership-badge.is-historical {
    border-color: #cbd5e1;
    color: #475569;
    background: #e2e8f0;
}

.attendance-timeline-report .attendance-membership-badge.is-occasional {
    border-color: #fde68a;
    color: #92400e;
    background: #fef3c7;
}

.attendance-timeline-report .attendance-report-months {
    align-items: center;
    gap: 18px;
    min-width: 720px;
    padding: 14px 16px;
}

.attendance-timeline-report .attendance-report-month {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
}

.attendance-timeline-report .attendance-report-month.has-future-boundary-after::after {
    position: absolute;
    top: 0;
    right: -9px;
    bottom: 0;
    border-right: 2px dashed #2563eb;
    content: "";
}

.attendance-report-month-label,
.attendance-report-month-value {
    color: var(--muted);
    font-size: 11px;
    font-weight: 450;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
}

.attendance-report-month-label > strong {
    color: var(--ink);
    font-weight: 650;
}

.attendance-report-month-value {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.attendance-timeline-report .attendance-dot-strip {
    justify-content: center;
    flex-wrap: nowrap;
}

.attendance-timeline-report .attendance-dot {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
}

.attendance-timeline-report .attendance-dot.has-trainer-change {
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.5);
    cursor: help;
}

.person-attendance-report-loader {
    min-width: 0;
}

.person-attendance-report-loader > .empty-text {
    margin: 0;
}

.person-modal-attendance-section,
.person-page-attendance-section,
.participant-own-attendance-section {
    min-width: 0;
}

.participant-own-attendance-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.person-attendance-timeline .attendance-report-row {
    grid-template-columns: 280px max-content;
}

.person-attendance-legend .attendance-legend-group {
    flex-basis: auto;
}

.person-attendance-row-heading {
    align-content: center;
}

.person-attendance-row-title,
.person-attendance-group-link {
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
}

.person-attendance-trainer {
    color: var(--muted);
    font-size: 12px;
    font-weight: 450;
    line-height: 1.35;
}

.person-attendance-timeline .is-person-global-row {
    background: var(--surface);
}

@media (max-width: 760px) {
    .coordination-attendance-modal {
        width: calc(100vw - 16px);
    }

    .coordination-attendance-modal-body {
        padding: 10px;
    }

    .attendance-report-legend {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .attendance-legend-group {
        flex: none;
    }

    .attendance-legend-separator {
        width: 100%;
        min-height: 1px;
    }

    .attendance-report-open-group {
        width: 100%;
        margin-left: 0;
    }

    .attendance-timeline-report .attendance-report-scroll {
        overflow: visible;
        border: 0;
        scrollbar-gutter: auto;
    }

    .attendance-report-table {
        width: 100%;
        min-width: 0;
    }

    .attendance-timeline-report .attendance-report-row {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .person-attendance-timeline .attendance-report-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .attendance-timeline-report .attendance-report-row + .attendance-report-row {
        margin-top: 8px;
    }

    .attendance-timeline-report .attendance-report-person {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .attendance-timeline-report .attendance-report-months {
        display: grid;
        grid-template-columns: var(--attendance-month-columns);
        width: max-content;
        min-width: 100%;
        max-width: 100%;
        overflow-x: auto;
        scroll-snap-type: inline proximity;
        -webkit-overflow-scrolling: touch;
    }

    .attendance-timeline-report .attendance-report-month {
        min-width: 112px;
        scroll-snap-align: start;
    }
}