/* Shared visual treatment for the six resource libraries. Videos remain separate. */
#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) {
    container-type: inline-size;
    container-name: library-resources;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-toolbar {
    margin-bottom: 1.25rem;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) :is(.library-toolbar-fields, .library-toolbar) {
    gap: 0.75rem;
    flex-wrap: wrap;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) :is(.library-toolbar-fields, .library-toolbar) > input.library-form-control {
    flex: 1 1 14rem;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) :is(.library-toolbar-fields, .library-toolbar) > :is(input, select, button, .library-scope-toggle) {
    min-height: 2.65rem;
    border-radius: 0.65rem;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) :is(.library-primary-btn, .library-secondary-btn) {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.6rem 0.9rem;
    box-shadow: none;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) :is(.library-toolbar-fields, .library-toolbar) > button svg {
    width: 1.1rem;
    height: 1.1rem;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-scope-toggle {
    box-shadow: none;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-scope-toggle-btn {
    font-weight: 600;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-unified-list {
    border-radius: 0.85rem;
    box-shadow: 0 4px 18px rgb(var(--ft-background-rgb) / 0.05);
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-unified-list :is(.library-list-header, .library-list-row) {
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    grid-template-columns: 1.75rem minmax(0, 1fr) 6rem 8rem 9rem;
}

@media (min-width: 1024px) {
    #content-library #content-questionnaire-library .library-unified-list :is(.library-list-header, .library-list-row) {
        grid-template-columns: 1.75rem minmax(0, 1fr) 12.5rem 8rem 9rem;
    }
}

#content-library #content-exercises #exerciseUnifiedLibraryList :is(.library-list-header, .library-list-row) {
    grid-template-columns: 1.75rem minmax(0, 1fr) 6rem 5.5rem 8rem 9rem;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-unified-list .library-list-header {
    min-height: 2.8rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-align: left;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-row {
    min-height: 4.15rem;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-row:hover,
#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-row:focus-within {
    background: rgb(var(--ft-primary-rgb) / 0.055);
    box-shadow: inset 3px 0 0 var(--ft-primary);
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-row.is-selected {
    background: rgb(var(--ft-primary-rgb) / 0.09);
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-row .library-list-title {
    color: var(--ft-text-primary);
    font-size: 0.92rem;
    font-weight: 600;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-description {
    margin-top: 0.2rem;
    font-size: 0.77rem;
    line-height: 1.4;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-identity {
    gap: 0.75rem;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-thumb {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.6rem;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-thumb--icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 400;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-meta .ft-badge {
    border: 1px solid rgb(var(--ft-border-rgb) / 0.65) !important;
    background: rgb(var(--ft-text-muted-rgb) / 0.045) !important;
    color: var(--ft-text-secondary) !important;
    border-radius: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-unified-list .library-action-secondary {
    min-height: 2.1rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    background: transparent !important;
    box-shadow: none;
}

#content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-row-menu > summary {
    width: 2.1rem;
    height: 2.1rem;
    min-height: 2.1rem;
    border-radius: 0.5rem;
    box-shadow: none;
}

/* Respond to available panel width, including space taken by the sidebar. */
@container library-resources (max-width: 850px) {
    #content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-unified-list .library-list-header {
        display: none;
    }

    #content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-unified-list .library-list-row {
        grid-template-columns: 1.75rem minmax(0, 1fr) auto !important;
        gap: 0.55rem 0.75rem;
        padding: 0.85rem 1rem;
    }

    #content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-row > .library-list-check {
        grid-column: 1;
        grid-row: 1;
    }

    #content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-row > .library-list-identity {
        grid-column: 2;
        grid-row: 1;
    }

    #content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-row > .library-list-meta {
        display: flex;
        grid-column: 2;
        flex-wrap: wrap;
    }

    #content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-row > .library-row-menu {
        grid-column: 3;
        grid-row: 1;
    }

    #content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) .library-list-row > .library-action-secondary {
        display: inline-flex;
        grid-column: 2 / -1;
        justify-self: start;
    }
}

@media (max-width: 760px) {
    #content-library :is(#content-exercises, #content-trainings, #content-programs, #content-nutrition-library, #content-questionnaire-library, #content-checkin-library) :is(.library-toolbar-fields, .library-toolbar) > input.library-form-control {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Direct-child toolbars use the same wrapping layout as the nested ones. */
#content-library :is(#content-nutrition-library, #content-questionnaire-library, #content-checkin-library) > .library-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

#content-library #content-trainings #libraryTraineeFilter,
#content-library #content-nutrition-library #nutritionLibraryTraineeFilter {
    flex: 0 1 12rem;
    width: 12rem;
}

#content-library #content-nutrition-library #nutritionLibraryTypeFilter {
    flex: 0 1 9rem;
    width: 9rem;
}

#content-library #content-nutrition-library .library-list-meta .library-pill {
    border-radius: 0.35rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
}

#content-library #content-nutrition-library .library-pill--training {
    background: rgb(var(--ft-primary-rgb) / 0.07);
    border-color: rgb(var(--ft-primary-rgb) / 0.2);
    color: var(--ft-text-secondary);
}

#content-library #content-nutrition-library .library-pill--rest {
    background: rgb(var(--ft-text-muted-rgb) / 0.045);
    border-color: rgb(var(--ft-border-rgb) / 0.65);
    color: var(--ft-text-secondary);
}

@media (max-width: 760px) {
    #content-library :is(#content-nutrition-library, #content-questionnaire-library, #content-checkin-library) > .library-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    #content-library #content-trainings #libraryTraineeFilter,
    #content-library #content-nutrition-library :is(#nutritionLibraryTraineeFilter, #nutritionLibraryTypeFilter) {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Clients and onboarding lists share the resource-library visual language. */
:is(#traineeGrid, #onboardingCodesList) .clients-list-row:is(:hover, :focus-within) {
    background: rgb(var(--ft-primary-rgb) / 0.055);
    box-shadow: inset 3px 0 0 var(--ft-primary);
}
:is(#traineeGrid, #onboardingCodesList) .clients-list-row.is-selected {
    background: rgb(var(--ft-primary-rgb) / 0.09);
}
:is(#traineeGrid, #onboardingCodesList) .clients-list-head {
    min-height: 2.8rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 0.85rem 0.85rem 0 0;
}
#traineeGrid .clients-list-head-label svg { display: none; }
:is(#traineeGrid, #onboardingCodesList) .clients-list-row {
    min-height: 4.15rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}
#traineeGrid.clients-list-shell,
#onboardingCodesList .clients-list-table {
    border-radius: 0.85rem;
    box-shadow: 0 4px 18px rgb(var(--ft-background-rgb) / 0.05);
}
#traineeGrid .clients-list-name { font-size: 0.92rem; font-weight: 600; }
#traineeGrid .clients-list-email { font-size: 0.77rem; margin-top: 0.2rem; }
#traineeGrid .clients-list-avatar { width: 2.65rem; height: 2.65rem; border-radius: 0.6rem; }
#traineeGrid .clients-list-tags { gap: 0.35rem; }
#traineeGrid :is(.clients-list-tag, .clients-list-duration),
#onboardingCodesList .onboarding-code-status {
    min-height: 1.5rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgb(var(--ft-text-muted-rgb) / 0.045);
    border-color: rgb(var(--ft-border-rgb) / 0.65);
    color: var(--ft-text-secondary);
}
:is(#traineeGrid, #onboardingCodesList) .clients-list-muted { font-size: 0.78rem; font-weight: 400; }
#traineeGrid .clients-list-duration--empty,
:is(#traineeGrid, #onboardingCodesList) .is-empty { color: var(--ft-text-muted); font-weight: 400; }
:is(#traineeGrid, #onboardingCodesList) .library-row-menu > summary {
    width: 2.1rem; height: 2.1rem; min-height: 2.1rem; border-radius: 0.5rem; box-shadow: none;
}
#traineeToolbar .clients-list-actions { gap: 0.75rem; flex-wrap: wrap; }
#traineeToolbar :is(.clients-list-search, .clients-list-filter, .clients-list-tag-filter, .clients-list-add) {
    min-height: 2.65rem; height: auto; border-radius: 0.65rem; box-shadow: none; font-size: 0.88rem; font-weight: 600;
}
#traineeToolbar .clients-list-tag-filter { width: auto; gap: 0.5rem; padding: 0.6rem 0.9rem; }
#traineeToolbar .clients-list-count { color: var(--ft-text-muted); font-size: 0.78rem; white-space: nowrap; }
#content-onboarding .onboarding-flow-container:has(#onboardingListView:not(.hidden)) { width: 100%; }
#content-onboarding .onboarding-flow-shell:has(#onboardingListView:not(.hidden)) { padding-left: 0; padding-right: 0; }
#onboardingListView .onboarding-flow-hero h2 { font-size: clamp(1.25rem, 1.55vw, 1.65rem); font-weight: 700; line-height: 1.15; }
#onboardingListView .onboarding-flow-defaults-link { font-size: 0.8rem; font-weight: 600; }
#onboardingListView :is(.onboarding-flow-search .ft-input, .onboarding-flow-primary-btn) {
    min-height: 2.65rem; border-radius: 0.65rem; font-size: 0.88rem; font-weight: 600; box-shadow: none;
}
#onboardingListView .onboarding-flow-stat {
    min-height: 2.65rem; padding: 0.6rem 0.75rem; border-color: rgb(var(--ft-border-rgb) / 0.65);
    border-radius: 0.65rem; background: transparent; align-items: center;
}
#onboardingListView .onboarding-flow-stat :is(strong, span) { font-size: 0.78rem; font-weight: 600; color: var(--ft-text-secondary); text-transform: none; }
#onboardingCodesList .onboarding-code-row-name { font-size: 0.95rem; font-weight: 600; margin-top: 0; }
#onboardingCodesPagination { font-size: 0.75rem; font-weight: 400; }
#onboardingCodesPagination :is(span, button) { font-weight: 600; }

/* Follow the shell corners without clipping row action menus. */
#traineeGrid .clients-list-table > .clients-list-row:last-child {
    border-bottom-left-radius: calc(0.85rem - 1px);
    border-bottom-right-radius: calc(0.85rem - 1px);
}

/* Keep Activity Log's filter inside the standard Overview card header height. */
#traineeDetailContent .client-overview-activity-card > div:first-child {
    min-height: 3.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
#traineeDetailContent .client-overview-activity-card select[id^="activity-log-cat-"] {
    height: 2rem;
    min-height: 2rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 400;
}

/* Tag Manager: preserve tag colors and actions, with quieter, denser rows. */
#clientsTagManagerModal .clients-tag-manager-panel { padding: 1.25rem; border-radius: 1rem; }
#clientsTagManagerModal .clients-tag-manager-header { gap: 0.75rem; margin-bottom: 1rem; }
#clientsTagManagerModal .clients-tag-manager-title { gap: 0.6rem; flex-shrink: 0; }
#clientsTagManagerModal .clients-tag-manager-title h2 { font-size: 1.1rem; font-weight: 600; }
#clientsTagManagerModal .clients-tag-manager-search { min-height: 2.65rem; border-radius: 0.65rem; background: transparent; }
#clientsTagManagerModal .clients-tag-manager-search input { font-size: 0.88rem; font-weight: 400; }
#clientsTagManagerModal .clients-tag-manager-row {
    grid-template-columns: 2.25rem minmax(0, 1fr) 5rem 2.1rem;
    gap: 0.75rem; min-height: 3.65rem; padding: 0.5rem 0.6rem;
}
#clientsTagManagerModal .clients-tag-manager-row:is(:hover, :focus-within) {
    background: rgb(var(--ft-primary-rgb) / 0.055); box-shadow: inset 3px 0 0 var(--ft-primary);
}
#clientsTagManagerModal .clients-tag-manager-row:last-child { border-radius: 0 0 0.65rem 0.65rem; }
#clientsTagManagerModal .clients-tag-manager-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; }
#clientsTagManagerModal .clients-tag-manager-icon svg { width: 1.1rem; height: 1.1rem; }
#clientsTagManagerModal .clients-tag-manager-name { font-size: 0.92rem; font-weight: 600; overflow-wrap: anywhere; }
#clientsTagManagerModal .clients-tag-manager-count { font-size: 0.78rem; font-weight: 400; color: var(--ft-text-muted); }
#clientsTagManagerModal :is(.clients-tag-manager-more, .clients-tag-manager-menu-spacer) { width: 2.1rem; height: 2.1rem; border-radius: 0.5rem; }
#clientsTagManagerModal .clients-tag-manager-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(var(--ft-border-rgb) / 0.55); }
#clientsTagManagerModal :is(.clients-tag-manager-primary, .clients-tag-manager-secondary) {
    min-height: 2.65rem; border-radius: 0.65rem; padding: 0.6rem 1rem; font-size: 0.88rem; font-weight: 600; box-shadow: none;
}
@media (max-width: 600px) {
    #clientsTagManagerModal .clients-tag-manager-header { flex-wrap: wrap; }
    #clientsTagManagerModal .clients-tag-manager-search { order: 3; flex: 1 0 100%; max-width: none; }
    #clientsTagManagerModal .clients-tag-manager-row { gap: 0.5rem; grid-template-columns: 2.25rem minmax(0, 1fr) 4rem 2.1rem; }
}

/* Client Overview: shared card hierarchy, without changing the three-column layout. */
#traineeDetailContent .client-overview-dashboard-grid { gap: 1.25rem; }
#traineeDetailContent .client-overview-column > .client-overview-card {
    border-radius: 0.85rem !important;
    border-color: rgb(var(--ft-border-rgb) / 0.65) !important;
    box-shadow: 0 4px 18px rgb(var(--ft-background-rgb) / 0.05) !important;
}
#traineeDetailContent .client-overview-card > div:first-child {
    min-height: 3.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: calc(0.85rem - 1px) calc(0.85rem - 1px) 0 0;
    border-bottom-color: rgb(var(--ft-border-rgb) / 0.65) !important;
}
#traineeDetailContent .client-overview-card > div:first-child h3 { font-size: 0.95rem; font-weight: 600; }
#traineeDetailContent .client-overview-card > div:first-child button { font-weight: 600; }
#traineeDetailContent .client-overview-details-card > div:nth-child(2) { font-size: 0.82rem; }
#traineeDetailContent .client-overview-details-card :is(.client-detail-tag, .client-detail-badge) {
    font-size: 0.7rem; font-weight: 600; border-radius: 0.4rem;
}
#traineeDetailContent .client-overview-details-card .client-detail-tag {
    background: rgb(var(--ft-text-muted-rgb) / 0.045); border-color: rgb(var(--ft-border-rgb) / 0.65);
}
#traineeDetailContent [id^="metrics-avg-"] > * { border-color: rgb(var(--ft-border-rgb) / 0.55) !important; }
#traineeDetailContent .client-overview-notes-card > div:nth-child(2) > div {
    border-color: rgb(var(--ft-border-rgb) / 0.5) !important; box-shadow: none;
}
#traineeDetailContent .client-overview-notes-card > div:nth-child(2) > div > div:last-child {
    border-top-color: rgb(var(--ft-border-rgb) / 0.35); background: transparent;
}
#traineeDetailContent .client-overview-notes-card h4 { font-size: 0.85rem; font-weight: 600; }
#traineeDetailContent .client-overview-notes-card p { font-size: 0.8rem; }
#traineeDetailContent .payment-overview-summary { padding: 1rem; gap: 1rem; min-height: 6rem; justify-content: center; text-align: center; }
#traineeDetailContent .payment-overview-copy { justify-items: center; text-align: center; }
#traineeDetailContent .payment-overview-ring { width: 4.75rem; height: 4.75rem; }
#traineeDetailContent .payment-overview-ring::before { width: 4rem; height: 4rem; }
#traineeDetailContent .payment-overview-ring-center strong { font-size: 1.3rem; font-weight: 600; }
#traineeDetailContent .payment-overview-ring-center span { font-size: 0.48rem; font-weight: 600; }
#traineeDetailContent .payment-overview-primary { font-size: 1.05rem; font-weight: 600; color: var(--ft-text-primary); letter-spacing: 0; }
#traineeDetailContent .payment-overview-secondary { font-size: 0.78rem; font-weight: 400; color: var(--ft-text-muted); }
/* Keep desktop previews bounded; let the page handle scrolling on narrower screens. */
#traineeDetailContent :is(.client-overview-notes-card, .client-overview-photos-card) { max-height: 30rem; }
@media (max-width: 1023px) {
    #traineeDetailContent :is(.client-overview-notes-card, .client-overview-photos-card, .client-overview-activity-card, .client-overview-metrics-card) {
        height: auto !important; max-height: none !important;
    }
    #traineeDetailContent :is(.client-overview-notes-card, .client-overview-photos-card, .client-overview-activity-card, .client-overview-metrics-card) > div:nth-child(2) {
        max-height: none !important; overflow-y: visible !important;
    }
}

#traineeDetailContent .client-overview-metrics-card { overflow: visible; }
#traineeDetailContent .client-overview-metrics-card > div:nth-child(2) { border-radius: 0 0 0.85rem 0.85rem; }
#traineeDetailContent .client-metrics-info {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border: 0; border-radius: 50%;
    color: var(--ft-text-muted); background: transparent; font-size: 1rem; cursor: help;
}
#traineeDetailContent .client-metrics-info:focus-visible { outline: 2px solid var(--ft-primary); outline-offset: 2px; }

/* Client tab badges: consistent geometry, with meaningful status colors retained. */
#traineeDetailContent .checkin-assigned-table .checkin-badge,
#traineeDetailContent .completed-workout-summary span.rounded-full,
#traineeDetailContent .lab-result-category {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.35rem;
    border-width: 1px;
    border-style: solid;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.3;
}
#traineeDetailContent .checkin-assigned-table :is(.checkin-badge--schedule, .checkin-badge--neutral),
#traineeDetailContent .lab-result-category {
    background: rgb(var(--ft-text-muted-rgb) / 0.045);
    border-color: rgb(var(--ft-border-rgb) / 0.65);
    color: var(--ft-text-secondary);
}
#traineeDetailContent .checkin-assigned-table .checkin-badge--success { border-color: rgb(var(--ft-success-rgb) / 0.25); }
#traineeDetailContent .checkin-assigned-table .checkin-badge--warning { border-color: rgb(var(--ft-warning-rgb) / 0.25); }
#traineeDetailContent .checkin-assigned-table .checkin-badge--danger { border-color: rgb(var(--ft-error-rgb) / 0.25); }
#traineeDetailContent .completed-workout-summary span.rounded-full[class*="border-gray-"] {
    background: rgb(var(--ft-text-muted-rgb) / 0.045);
    border-color: rgb(var(--ft-border-rgb) / 0.65);
    color: var(--ft-text-secondary);
}
/* Remove viewport centering; preserve the existing photo aspect ratios. */
#traineeDetailContent .progress-photos-shell {
    min-height: 0;
    justify-content: flex-start;
    padding-block: 0.75rem;
}
#traineeDetailContent .progress-photos-panel { padding: 1.25rem; border-radius: 0.85rem; }
#traineeDetailContent .progress-photos-panel .progress-header { margin-bottom: 1rem; align-items: center; }
#traineeDetailContent .progress-photos-panel .progress-header h3 { font-size: 1rem; font-weight: 600; }
#traineeDetailContent .progress-photos-panel .progress-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; width: auto;
}
#traineeDetailContent .progress-photos-panel .progress-date-select { width: auto; min-width: 11rem; flex: 0 1 auto; }
#traineeDetailContent .progress-photos-panel :is(.progress-date-select, .progress-action-btn) {
    min-height: 2.65rem; border-radius: 0.65rem; font-size: 0.8rem; font-weight: 600; box-shadow: none;
}
@media (max-width: 640px) {
    #traineeDetailContent .progress-photos-panel { padding: 0.85rem; }
    #traineeDetailContent .progress-photos-panel .progress-header { align-items: stretch; }
    #traineeDetailContent .progress-photos-panel .progress-date-select { width: 100%; flex-basis: 100%; }
}

/* Client detail secondary navigation: shared pill treatment. */
.checkin-subtabs {
    border-bottom: 0;
    gap: 0.5rem;
    flex-wrap: wrap;
}
:is(.checkin-subtab, .trainee-trainings-segment-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.85rem;
    margin-bottom: 0;
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    color: var(--ft-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}
:is(.checkin-subtab, .trainee-trainings-segment-btn):hover {
    color: var(--ft-text-primary);
    background: rgb(var(--ft-text-muted-rgb) / 0.08);
}
:is(.checkin-subtab.is-active, .trainee-trainings-segment-btn--active) {
    color: var(--ft-secondary) !important;
    background: rgb(var(--ft-secondary-rgb) / 0.12) !important;
}
:is(.checkin-subtab, .trainee-trainings-segment-btn):focus-visible {
    outline: 2px solid var(--ft-secondary);
    outline-offset: 2px;
}
.checkin-subtab-count {
    font-size: inherit;
    font-weight: inherit;
}
/* Client Details chip rows stay on one line; overflow opens above the card. */
#traineeDetailContent .client-detail-chips-container { flex: 1; min-width: 0; }
#traineeDetailContent .client-detail-chips { display: flex; align-items: center; gap: 6px; min-width: 0; position: relative; }
#traineeDetailContent .client-detail-chips-inline { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
#traineeDetailContent .client-detail-chips-inline > .client-detail-tag {
    display: block; flex: 0 0 auto; max-width: min(7rem, var(--client-chip-width, 7rem));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.15; min-height: 1.75rem; padding-top: 0.4rem; padding-bottom: 0.4rem;
}
#traineeDetailContent .client-detail-chips [hidden] { display: none !important; }
#traineeDetailContent .client-detail-chips-overflow { flex: 0 0 auto; }
#traineeDetailContent .client-detail-chips-overflow > summary { list-style: none; }
#traineeDetailContent .client-detail-chips-overflow > summary::-webkit-details-marker { display: none; }
#traineeDetailContent .client-detail-chips-popover {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    width: max-content; max-width: min(300px, 70vw); padding: 12px;
    display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--ft-border);
    border-radius: 10px; background: var(--ft-surface); box-shadow: var(--ft-shadow-lg);
}
#traineeDetailContent .client-detail-chips-popover .client-detail-tag { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; max-width: 100%; }