// =============================================================================
// FranCoach - foglio di stile principale
// Identità visiva v2: tema scuro "premium" always-on (nessun toggle chiaro/
// scuro, l'intera app vive su sfondo quasi-nero #0F1012), accento lime
// fluorescente #B2EE37 (stessa famiglia del precedente #C4F012, evoluto) e
// verde secondario #58F670. Angoli molto arrotondati (pill su bottoni/badge/
// nav, 20-28px sulle card), ombre morbide sfocate con bagliori colorati al
// posto delle precedenti ombre nette "neo-brutaliste". Font: -apple-system
// (vero SF Pro su dispositivi Apple, nessun problema di licenza perché è il
// sistema operativo stesso a renderlo) con Inter autoospitato come fallback
// universale (stessa geometria, licenza SIL OFL libera). Mobile-first per
// l'app Atleta, desktop-first per la dashboard Coach.
//
// Nota sul contrasto: con lo sfondo ora scuro il testo/icone di default sono
// chiari (quasi bianco); il lime resta un accento ad altissimo contrasto su
// nero (~13:1) quindi può tornare a essere usato anche come colore di testo/
// bordo diretto (il problema originale era l'opposto: lime su BIANCO era
// illeggibile). Unica eccezione: quando il lime è usato come SFONDO pieno
// (bottoni/badge/stati attivi), il testo sopra resta nero (~15:1), mai bianco.
// =============================================================================

// --- Override delle variabili Bootstrap PRIMA dell'import di Bootstrap ---
$francoach-yellow: #B2EE37; // ex #C4F012: stessa famiglia lime, leggermente più verde/morbido
$francoach-yellow-dark: #8FC72B; // stessa tinta più scura: bordi/hover su superfici chiare
$francoach-yellow-light: #E4FBB0; // velatura chiara per tinte/hover, sempre con testo/icone nere sopra
$francoach-green: #58F670; // accento secondario (grafici, badge di successo, glow decorativi)
$francoach-black: #0F1012; // sfondo pagina, quasi nero
$francoach-anthracite: #1B1E22; // superficie di livello 1 (card/pannelli a riposo)
$francoach-anthracite-light: #23262B; // superficie di livello 2 (hover/focus, righe alternate)
$francoach-gray-300: #7C7C74; // testo secondario/muted su sfondo scuro

$primary: $francoach-yellow;
$dark: $francoach-black;
$secondary: $francoach-anthracite;
$body-bg: $francoach-black;
$body-color: #FCFCFC;
// In tema scuro il lime come colore di TESTO su sfondo nero ha un contrasto
// altissimo (~13:1): i link possono tornare ad essere colorati in lime,
// senza sottolineatura (coerente con l'estetica "app nativa" di riferimento).
$link-color: $francoach-yellow;
$link-hover-color: #FCFCFC;
$link-decoration: none;
// Le card vivono un livello sopra lo sfondo pagina (superficie 1); le tabelle
// idem, mai bianco pieno come nella versione chiara precedente.
$card-bg: $francoach-anthracite;
$table-bg: $francoach-anthracite;

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;

// Raggi molto più generosi: pill totale su bottoni/badge/nav, 20-28px sulle card.
$border-radius-sm: 1rem;
$border-radius: 1.25rem;
$border-radius-lg: 1.5rem;
$border-radius-xl: 1.75rem;
$btn-border-radius-sm: 999px;
$btn-border-radius: 999px;
$btn-border-radius-lg: 999px;
$input-border-radius-sm: 1rem;
$input-border-radius: 1.1rem;
$input-border-radius-lg: 1.25rem;
$modal-content-border-radius: $border-radius-lg;
$dropdown-border-radius: $border-radius;
$badge-border-radius: 999px;

$card-border-width: 1px;
$card-border-color: rgba(255, 255, 255, .06);
// Le ombre nette "neo-brutaliste" lasciano il posto a un'unica ombra morbida
// e sfocata (vedi --shadow-* in :root più sotto): qui basta azzerare
// l'ombra di default di Bootstrap, il resto arriva dalle classi custom.
$card-box-shadow: none;

$enable-negative-margins: true;

@import "bootstrap/scss/bootstrap";
@import "bootstrap-icons/font/bootstrap-icons.css";

// --- Rispetto di prefers-reduced-motion: azzera globalmente le animazioni
// per chi lo richiede a livello di sistema operativo, prima di ogni altra
// regola di stile (nessuna micro-interazione più sotto deve bypassare questo).
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

// =============================================================================
// Componenti Bootstrap: micro-interazioni e superfici soft UI applicate a
// livello globale. Nessuna di queste regole tocca i colori di testo già
// verificati da Bootstrap stesso (es. testo nero su bottone/badge arancione,
// contrasto ~7,4:1): si interviene solo su ombre, raggi e transizioni.
// =============================================================================

.btn {
    padding-inline: 1.25rem;
    transition: transform var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}

.btn-sm {
    padding-inline: .9rem;
}

.btn-lg {
    padding-inline: 1.6rem;
}

.btn:not(:disabled):not(.disabled):hover {
    transform: translateY(-1px);
}

.btn:not(:disabled):not(.disabled):active {
    transform: translateY(0) scale(.97);
}

.btn-primary,
.btn-dark {
    box-shadow: var(--shadow-glow-primary), var(--shadow-1);
}

.btn-primary:hover,
.btn-dark:hover {
    box-shadow: var(--shadow-glow-primary), var(--shadow-2);
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2c3036;
    --bs-btn-border-color: rgba(255, 255, 255, .24);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--francoach-yellow);
    --bs-btn-hover-border-color: var(--francoach-yellow);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--francoach-yellow);
    --bs-btn-active-border-color: var(--francoach-yellow);
    --bs-btn-disabled-color: rgba(255, 255, 255, .55);
    --bs-btn-disabled-bg: #2c3036;
    --bs-btn-disabled-border-color: rgba(255, 255, 255, .12);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #34383f;
    --bs-btn-border-color: rgba(255, 255, 255, .22);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
}

.btn-outline-secondary {
    --bs-btn-color: rgba(255, 255, 255, .92);
    --bs-btn-bg: rgba(255, 255, 255, .045);
    --bs-btn-border-color: rgba(255, 255, 255, .38);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
    --bs-btn-disabled-color: rgba(255, 255, 255, .4);
    --bs-btn-disabled-bg: rgba(255, 255, 255, .025);
    --bs-btn-disabled-border-color: rgba(255, 255, 255, .14);
}

.card-header,
.card-footer {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .08);
}

.table td .btn {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04);
}

.exercise-pagination .page-link {
    display: grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: .35rem .55rem;
    font-size: .875rem;
    line-height: 1;
}

// Bottone pill secondario "vetro scuro": bordo/testo chiari a riposo, si
// riempie di lime (testo nero) in hover/focus/attivo — l'inverso della
// versione chiara precedente, dove il lime era illeggibile su sfondo bianco
// e quindi il riposo era nero. Qui lo sfondo è scuro: il lime a riposo come
// bordo/testo ha già ~13:1 di contrasto, quindi resta protagonista sempre.
.btn-outline-primary {
    --bs-btn-color: var(--francoach-yellow);
    --bs-btn-border-color: rgba(178, 238, 55, .5);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--francoach-yellow);
    --bs-btn-hover-border-color: var(--francoach-yellow);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--francoach-yellow);
    --bs-btn-active-border-color: var(--francoach-yellow);
    --bs-btn-disabled-color: rgba(178, 238, 55, .5);
    --bs-btn-disabled-border-color: rgba(178, 238, 55, .3);
}

// Pill "vetro scuro" neutro, usato per le azioni secondarie non colorate
// (es. filtri, azioni terziarie nelle card) accanto ai bottoni pieni.
.btn-glass {
    --bs-btn-color: #{$body-color};
    --bs-btn-bg: rgba(255, 255, 255, .06);
    --bs-btn-border-color: rgba(255, 255, 255, .1);
    --bs-btn-hover-color: #{$body-color};
    --bs-btn-hover-bg: rgba(255, 255, 255, .12);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .16);
    --bs-btn-active-color: #{$body-color};
    --bs-btn-active-bg: rgba(255, 255, 255, .16);
    border-radius: 999px;
}

// Il lime su sfondo scuro è ad alto contrasto: le utility testuali/di bordo
// possono tornare a usarlo direttamente (l'inverso della regola precedente,
// scritta per un corpo pagina bianco).
.text-primary {
    color: var(--francoach-yellow) !important;
}

.link-primary {
    color: var(--francoach-yellow) !important;

    &:hover,
    &:focus {
        color: #fff !important;
    }
}

.border-primary {
    border-color: var(--francoach-yellow) !important;
}

// Input/select: superficie leggermente più chiara del fondo pagina, bordo
// sottile traslucido (non più grigio chiaro, invisibile su sfondo scuro).
.form-control,
.form-select {
    background-color: var(--surface-1);
    color: $body-color;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: var(--shadow-inset);
    transition: box-shadow var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}

.form-control::placeholder,
.form-select:invalid {
    color: var(--francoach-gray-300);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-1);
    color: $body-color;
    border-color: var(--francoach-yellow);
    box-shadow: var(--shadow-inset), 0 0 0 3px rgba(178, 238, 55, .35);
}

.form-check-input {
    transition: box-shadow var(--dur-fast) var(--ease-standard),
                background-color var(--dur-base) var(--ease-out-back),
                border-color var(--dur-fast) var(--ease-standard);
}

.form-switch .form-check-input {
    transition: background-position var(--dur-base) var(--ease-out-back),
                background-color var(--dur-base) var(--ease-standard);
}

// Card Bootstrap generiche (.card, usate direttamente in vari moduli) e
// .card-francoach: stesso identico stile in tutta l'app, vedi unificazione
// più sotto sulla regola condivisa.

.modal-content {
    background-color: var(--surface-1);
    color: $body-color;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow-3), 0 24px 48px -12px rgba(0, 0, 0, .55);
}

.modal-header,
.modal-footer {
    border-color: rgba(255, 255, 255, .08);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

// Bootstrap gestisce già la dissolvenza di apertura/chiusura del modale;
// qui si affina solo l'easing dello scale-in della finestra.
.modal.fade .modal-dialog {
    transition: transform var(--dur-base) var(--ease-out-back), opacity var(--dur-base) var(--ease-standard);
}

.toast {
    background-color: var(--surface-2);
    color: $body-color;
    box-shadow: var(--shadow-3);
    border: 1px solid rgba(255, 255, 255, .08);
}

.alert {
    border: 0;
    box-shadow: var(--shadow-1);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--surface-2);
    --bs-dropdown-link-color: #{$body-color};
    --bs-dropdown-link-hover-color: #{$body-color};
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .08);
    --bs-dropdown-link-active-color: #000;
    --bs-dropdown-link-active-bg: var(--francoach-yellow);
    --bs-dropdown-header-color: var(--francoach-gray-300);
    --bs-dropdown-divider-bg: rgba(255, 255, 255, .08);

    background-color: var(--surface-2);
    box-shadow: var(--shadow-3);
    border: 1px solid rgba(255, 255, 255, .08);
}

// Focus visibile standard su tutti gli elementi interattivi, custom e
// nativi: il lime ha un contrasto altissimo sullo sfondo scuro dell'intera
// app, quindi torna a essere l'indicatore primario ovunque (non solo nei
// contesti scuri come nella versione precedente, che erano l'eccezione).
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--francoach-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(178, 238, 55, .3);
}

// --- Icone (vedi <x-icon>, sostituisce progressivamente bi bi-*) -----------
.fc-icon {
    display: inline-block;
    vertical-align: -.15em;
    flex-shrink: 0;
}

// Badge icona circolare scuro, con bagliore colorato tenue dietro — il
// pattern ricorrente di riferimento per stat tile/quick action/feature card.
.icon-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--surface-2);
    color: var(--francoach-yellow);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.icon-badge::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(178, 238, 55, .18), transparent 70%);
    opacity: .8;
}

.icon-badge--green {
    color: var(--francoach-green);
}

.icon-badge--green::before {
    background: radial-gradient(circle, rgba(88, 246, 112, .2), transparent 70%);
}

.icon-badge--lg {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
}

.progress-photo-thumbnail {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.photo-comparison__stage {
    position: relative;
    overflow: hidden;
    width: min(100%, 760px);
    margin-inline: auto;
    aspect-ratio: 4 / 5;
    background: #111;
}

.photo-comparison__stage > img,
.photo-comparison__after,
.photo-comparison__after img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.photo-comparison__stage img {
    object-fit: contain;
}

.photo-comparison__after {
    clip-path: inset(0 0 0 50%);
}

.photo-comparison__label {
    position: absolute;
    z-index: 2;
    top: .75rem;
    padding: .25rem .55rem;
    color: #fff;
    background: rgb(0 0 0 / 65%);
    border-radius: .2rem;
}

.photo-comparison__label--before {
    left: .75rem;
}

.photo-comparison__label--after {
    right: .75rem;
}

// --- Font: Inter autoospitato via @fontsource (licenza SIL OFL, nessuna
// dipendenza da Google Fonts CDN), usato solo come fallback dietro
// -apple-system/BlinkMacSystemFont (che su Apple risolvono al vero SF Pro
// di sistema — non possiamo distribuire il font SF Pro stesso, la cui
// licenza Apple lo limita al software per piattaforme Apple). ---
@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/inter/800.css";

:root {
    --francoach-yellow: #{$francoach-yellow};
    --francoach-yellow-dark: #{$francoach-yellow-dark};
    --francoach-yellow-light: #{$francoach-yellow-light};
    --francoach-green: #{$francoach-green};
    --francoach-black: #{$francoach-black};
    --francoach-anthracite: #{$francoach-anthracite};
    --francoach-anthracite-light: #{$francoach-anthracite-light};
    --francoach-gray-300: #{$francoach-gray-300};
    --francoach-sidebar-width: 264px;
    --francoach-topbar-height: 72px;
    --francoach-bottomnav-height: 92px;

    // --- Superfici: scala di elevazione su sfondo quasi-nero -----------------
    --surface-0: #{$francoach-black}; // sfondo pagina
    --surface-1: #{$francoach-anthracite}; // card/pannelli a riposo, un livello sopra il fondo
    --surface-2: #{$francoach-anthracite-light}; // card in hover/focus, popover/dropdown
    --surface-sunken: #0B0C0D; // input/aree "incassate": più scuro del fondo, effetto concavo

    // --- Ombre morbide e sfocate + bagliori colorati, al posto delle -------
    // precedenti ombre nette "neo-brutaliste": coerenti con il linguaggio
    // "glass/glow" scuro di riferimento. Proiettate in nero puro (che si
    // legge su qualunque superficie scura) con raggio crescente per i tre
    // livelli di elevazione.
    --shadow-1: 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-2: 0 8px 24px -6px rgba(0, 0, 0, .45);
    --shadow-3: 0 16px 40px -10px rgba(0, 0, 0, .55);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-dark-2: var(--shadow-2);
    --shadow-dark-inset: var(--shadow-inset);
    // Bagliore lime dietro elementi "attivi"/badge icona: decorativo, usato
    // con parsimonia, mai come unico segnale di stato.
    --shadow-glow-primary: 0 0 0 1px rgba(178, 238, 55, .4), 0 0 24px -4px rgba(178, 238, 55, .55);
    --shadow-glow-green: 0 0 24px -6px rgba(88, 246, 112, .5);

    // --- Movimento ------------------------------------------------------------
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 320ms;
}

html, body {
    height: 100%;
}

body {
    font-family: $font-family-sans-serif;
    background-color: var(--surface-0);
    padding-bottom: var(--francoach-bottomnav-height);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -.02em;
}

@include media-breakpoint-up(lg) {
    body {
        padding-bottom: 0;
    }
}

// --- Micro-interazioni di base, applicate globalmente ----------------------

// Ogni elemento cliccabile mostra un cursore coerente (anche i controlli
// non nativamente interattivi come <summary> usati nel profilo atleta).
:where(button, a, summary, [role="button"], .quick-action, .app-sidebar__link:not(.disabled)) {
    cursor: pointer;
}

:where(button, a, [role="button"]):disabled,
:where(.disabled) {
    cursor: default;
}

// Stagger d'ingresso per griglie di card/statistiche nelle pagine applicative:
// puramente decorativo (fade + lieve salita), disattivato da prefers-reduced-motion
// tramite la regola globale già definita sopra.
@keyframes francoach-reveal {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dashboard-page > .row > [class*="col-"],
.dashboard-page > section,
.dashboard-page > .dashboard-heading {
    animation: francoach-reveal var(--dur-slow) var(--ease-standard) both;
}

@for $i from 1 through 10 {
    .dashboard-page > .row > [class*="col-"]:nth-child(#{$i}) {
        animation-delay: #{($i - 1) * 40}ms;
    }
}

// Reveal-on-scroll progressivo (vedi initScrollReveal in app.js): la classe
// "will-reveal" viene applicata solo da JavaScript, quindi senza JS o con
// prefers-reduced-motion attivo il contenuto resta semplicemente visibile.
.will-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}

.will-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

// Pulse di conferma su azioni completate (salvataggio, toast, serie
// completata in allenamento): un bagliore giallo qui non si vedrebbe sulle
// superfici chiare (toast, card) dove viene usato, quindi il pulse è nero.
@keyframes francoach-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(18, 18, 18, .35);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(18, 18, 18, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(18, 18, 18, 0);
    }
}

.francoach-pulse {
    animation: francoach-pulse .6s var(--ease-standard);
}

// --- Layout applicativo -----------------------------------------------------

.app-shell {
    display: flex;
    min-height: 100vh;
}

// Sidebar desktop: stessa superficie di fondo dell'intera app (non più un
// pannello "diverso" perché ora tutto è scuro), separata solo da un bordo
// traslucido sottile e da un bagliore lime molto tenue in alto a sinistra.
.app-sidebar {
    display: none;
    flex-direction: column;
    width: var(--francoach-sidebar-width);
    background-color: var(--surface-1);
    background-image: radial-gradient(circle at 15% 0%, rgba(178, 238, 55, .08), transparent 45%);
    border-right: 1px solid rgba(255, 255, 255, .06);
    color: #fff;
    flex-shrink: 0;

    @include media-breakpoint-up(lg) {
        display: flex;
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

.app-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    transition: opacity var(--dur-fast) var(--ease-standard);

    &:hover {
        opacity: .88;
    }
}

.app-sidebar__brand-mark {
    width: 180px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.app-sidebar__nav {
    flex: 1 1 auto;
    display: grid;
    gap: .25rem;
    padding: 1rem .75rem;
    overflow-y: auto;
}

.app-sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 46px;
    padding: .7rem 1rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    font-size: .925rem;
    font-weight: 500;
    transition: background-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}

.app-sidebar__link i,
.app-sidebar__link .fc-icon {
    width: 1.45rem;
    height: 1.45rem;
    font-size: 1.4rem;
    text-align: center;
    transition: transform var(--dur-fast) var(--ease-standard);
}

.app-sidebar__link:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
    transform: translateX(2px);
}

.app-sidebar__link:not(.disabled):active {
    transform: translateX(2px) scale(.98);
}

.app-sidebar__link.active {
    background-color: var(--francoach-yellow);
    color: #000; // testo nero su lime pieno: ~13:1, il bianco resterebbe sotto soglia
    box-shadow: var(--shadow-glow-primary);
}

.app-sidebar__link.active i,
.app-sidebar__link.active .fc-icon {
    transform: scale(1.05);
}

// Voci di navigazione non ancora funzionanti (in attesa dei moduli
// applicativi): niente hover, cursore neutro, leggermente attenuate.
.app-sidebar__link.disabled {
    cursor: default;
    opacity: .4;
}

.app-sidebar__link.disabled:hover {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.68);
    transform: none;
}

.app-sidebar__footer {
    padding: 1rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: .8rem;
    color: var(--francoach-gray-300);
}

// Topbar: identità "vetro scuro" costante su mobile e desktop (prima si
// schiariva su desktop perché il contenuto principale era chiaro; ora tutta
// l'app vive sulla stessa base scura, quindi la topbar resta coerente ad
// ogni breakpoint, solo con meno padding verticale su mobile).
.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--francoach-topbar-height);
    padding: 0 1rem;
    background-color: rgba(15, 16, 18, .72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;

    @include media-breakpoint-up(lg) {
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: $body-color;
        position: static;
        padding: 1.5rem 2rem 0;
    }
}

.app-topbar__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;

    @include media-breakpoint-up(lg) {
        display: none;
    }
}

.app-topbar__brand-mark {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.app-topbar__avatar-brand {
    object-fit: contain;
}

.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.app-topbar__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.05rem;
    transition: transform var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard);

    &:hover {
        background-color: rgba(255, 255, 255, 0.14);
        transform: translateY(-1px);
    }

    &:active {
        transform: translateY(0) scale(.94);
    }

    @include media-breakpoint-up(lg) {
        background-color: var(--surface-1);
        color: $body-color;
        box-shadow: var(--shadow-1);

        &:hover {
            box-shadow: var(--shadow-2);
            background-color: var(--surface-2);
        }

        &:active {
            box-shadow: var(--shadow-inset);
            transform: scale(.96);
        }
    }
}

.app-topbar__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--francoach-yellow);
    border: 2px solid var(--surface-0);

    @include media-breakpoint-up(lg) {
        border-color: var(--surface-1);
    }
}

// Contenuto principale
.app-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.25rem 1rem 2rem;

    @include media-breakpoint-up(lg) {
        padding: 1.5rem 2rem 3rem;
    }
}

// Navigazione mobile inferiore: barra "pillola" flottante, icone rotonde,
// stato attivo = pastiglia piena bianca con icona nera (coerente con il
// riferimento visivo), stato inattivo = icona/etichetta grigio chiaro.
.app-bottom-nav {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .5rem;
    background-color: rgba(20, 22, 25, .85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    box-shadow: var(--shadow-3);
    z-index: 1030;

    @include media-breakpoint-up(lg) {
        display: none;
    }
}

.app-bottom-nav__link {
    position: relative;
    flex: 1 1 0;
    display: flex;
    min-height: 60px;
    min-width: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .3rem 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: .58rem;
    font-weight: 600;
    transition: color var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
}

// Dimensione icona indipendente dal font-size dell'etichetta sotto: le
// icone (<x-icon>, SVG con size="1em") vanno ingrandite qui, non ereditate
// dal testo (che invece resta piccolo) — così il tocco resta comodo da
// mobile pur con un'etichetta discreta.
.app-bottom-nav__link i,
.app-bottom-nav__link .fc-icon {
    font-size: 1.65rem;
    transition: transform var(--dur-fast) var(--ease-out-back);
}

.app-bottom-nav__link:not(.disabled):active {
    transform: scale(.92);
}

.app-bottom-nav__link.active {
    color: #000;
    background-color: var(--francoach-yellow);
    box-shadow: var(--shadow-glow-primary);
}

.app-bottom-nav__link.active i {
    transform: translateY(-1px);
}

.app-bottom-nav__link.disabled {
    opacity: .4;
}

// Footer applicativo
.app-footer {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--francoach-gray-300);
    font-size: .85rem;
}

.app-footer a {
    color: rgba(255, 255, 255, .8);
}

// Avatar con fallback a iniziali
.avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--francoach-yellow);
    color: #000; // testo nero su lime pieno: ~13:1, il bianco resterebbe sotto soglia
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--shadow-1);
}

// Card generiche area contenuti: un solo stile per .card-francoach e per il
// componente Bootstrap .card nativo (usato direttamente in vari moduli),
// cosi non esistono più due aspetti diversi di "card" nell'app. Raggio
// molto più ampio, bordo traslucido sottile e ombra morbida al posto delle
// precedenti ombre nette. !important necessario perché moltissime view
// applicano già in markup le utility Bootstrap "border-0"/"shadow-sm"
// (anch'esse !important) che altrimenti vincerebbero.
.card,
.card-francoach {
    background-color: var(--surface-1) !important;
    border-radius: 1.5rem !important;
    box-shadow: var(--shadow-2) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    transition: box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard),
                border-color var(--dur-base) var(--ease-standard);
}

a.card:hover,
button.card:hover,
a.card-francoach:hover,
button.card-francoach:hover,
.card-francoach.is-interactive:hover {
    box-shadow: var(--shadow-3) !important;
    border-color: rgba(178, 238, 55, .18) !important;
    transform: translateY(-2px);
}

// Tutte le tabelle sulla superficie di livello 1, sempre (Bootstrap le
// farebbe ereditare lo sfondo pagina tramite $table-bg, e alcune view
// aggiungono proprie classi di sfondo; qui si forza comunque).
.table,
.table > :not(caption) > * > * {
    background-color: var(--surface-1) !important;
    color: $body-color;
}

.table > :not(:last-child) > :last-child > * {
    border-bottom-color: rgba(255, 255, 255, .08);
}

// Pulsante logout nel footer della sidebar (Modulo 3)
.app-sidebar__logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    flex-shrink: 0;
    transition: background-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
}

.app-sidebar__logout-btn:hover {
    background-color: var(--francoach-yellow);
    color: #000; // testo nero su lime pieno: ~13:1, il bianco resterebbe sotto soglia
    transform: translateY(-1px);
}

.app-sidebar__logout-btn:active {
    transform: scale(.92);
}

// Pagine di autenticazione (login, recupero/reset password): card centrata,
// stessa base scura dell'intera app (prima era l'unica pagina scura in un
// contesto altrimenti chiaro; ora è coerente ovunque).
.auth-page {
    min-height: 100vh;
    background-color: var(--surface-0);
    background-image: radial-gradient(circle at 50% 0%, rgba(178, 238, 55, .08), transparent 55%);
    display: flex;
    flex-direction: column;
}

.auth-page .app-footer {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .72);
}

.auth-page__wrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    background-color: var(--surface-1);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1.75rem;
    box-shadow: var(--shadow-3);
    padding: 2rem 1.5rem;
    color: $body-color;

    @include media-breakpoint-up(sm) {
        padding: 2.5rem;
    }
}

.auth-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.auth-card__brand-mark {
    width: min(100%, 180px);
    height: auto;
    border-radius: 0;
    object-fit: contain;
    background: transparent;
    box-shadow: none;
}

.auth-card__brand-fallback {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
}

.auth-card__title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: .35rem;
    color: #fff;
}

.auth-card__subtitle {
    color: var(--francoach-gray-300);
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.auth-card__link {
    color: var(--francoach-yellow);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
}

.auth-card__link:hover {
    text-decoration: underline;
}

.auth-card__footer-link {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 0;
    color: var(--francoach-gray-300);
}

// Pagine di errore
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--francoach-black);
    color: #fff;
    text-align: center;
    padding: 2rem 1rem;
}

.error-page__code {
    font-size: 5rem;
    font-weight: 800;
    color: var(--francoach-yellow);
    line-height: 1;
}

.app-shell__content {
    min-width: 0;
}

.app-breadcrumb {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;

    a {
        color: var(--francoach-gray-300);
        text-decoration: none;

        &:hover {
            color: #fff;
        }
    }

    .active {
        color: var(--francoach-yellow);
    }
}

.dashboard-page {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.dashboard-page > *,
.profile-page > * {
    min-width: 0;
}

.dashboard-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;

    h1 {
        margin: .35rem 0 .2rem;
        font-size: clamp(1.65rem, 4vw, 2.35rem);
        font-weight: 800;
        letter-spacing: -.035em;
        color: #fff;
    }

    p {
        margin: 0;
        color: var(--francoach-gray-300);
    }
}

.dashboard-heading__date {
    display: none;
    align-items: center;
    gap: .5rem;
    color: var(--francoach-gray-300);
    font-size: .875rem;
    font-weight: 600;

    @include media-breakpoint-up(md) {
        display: inline-flex;
    }
}

// Hero di benvenuto: superficie scura elevata con bagliore lime decorativo,
// coerente con l'estetica "aura dietro badge/hero" di riferimento.
.athlete-summary {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--surface-1);
    background-image: radial-gradient(circle at 90% -10%, rgba(178, 238, 55, .16), transparent 55%);
}

.athlete-summary__avatar {
    img,
    .avatar-fallback {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        font-size: 1.1rem;
    }
}

.athlete-summary__copy {
    min-width: 0;

    h2 {
        margin: .4rem 0 .1rem;
        font-size: 1.2rem;
        font-weight: 750;
        color: #fff;
    }

    p {
        margin: 0;
        color: var(--francoach-gray-300);
        font-size: .875rem;
        overflow-wrap: anywhere;
    }
}

.athlete-summary__meta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);

    div {
        min-width: 0;
    }

    dt {
        color: var(--francoach-gray-300);
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    dd {
        margin: .2rem 0 0;
        font-size: .82rem;
        font-weight: 700;
        color: #fff;
    }

    @include media-breakpoint-up(md) {
        grid-column: auto;
        min-width: 330px;
        padding: 0 0 0 1.25rem;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, .08);
    }
}

@include media-breakpoint-up(md) {
    .athlete-summary {
        grid-template-columns: auto minmax(180px, 1fr) auto;
    }
}

// Stat tile: badge icona circolare scuro con bagliore colorato dietro
// (vedi .icon-badge), numero grande in evidenza — il pattern ricorrente
// di riferimento per ogni cifra chiave dell'app.
.dashboard-stat {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    column-gap: .9rem;
    row-gap: .55rem;
    padding: 1.25rem;
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}

.dashboard-stat__content {
    display: contents;
}

.dashboard-stat__label {
    align-self: center;
}

.dashboard-stat__value,
.dashboard-stat__detail {
    grid-column: 1 / -1;
}

.dashboard-stat:hover {
    box-shadow: var(--shadow-3);
    transform: translateY(-2px);
}

.dashboard-stat__icon,
.dashboard-card__icon {
    @extend .icon-badge;
    @extend .icon-badge--lg;
}

.dashboard-stat__icon--success {
    @extend .icon-badge--green;
}

.dashboard-stat__icon--danger {
    color: #ff8b7a;

    &::before {
        background: radial-gradient(circle, rgba(255, 139, 122, .2), transparent 70%);
    }
}

.dashboard-stat__icon--warning {
    color: #ffcf6b;

    &::before {
        background: radial-gradient(circle, rgba(255, 207, 107, .2), transparent 70%);
    }
}

.dashboard-stat__label,
.dashboard-stat__detail {
    margin: 0;
    color: var(--francoach-gray-300);
    font-size: .75rem;
    line-height: 1.3;
}

.dashboard-stat__value {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
}

.dashboard-stat__link,
.dashboard-card__section-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(178, 238, 55, .35);
    border-radius: 50%;
    background-color: rgba(178, 238, 55, .08);
    color: var(--francoach-yellow);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);

    &:hover,
    &:focus-visible {
        background-color: var(--francoach-yellow);
        color: #000;
        transform: translateX(2px);
    }
}

.dashboard-stat__link {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

.feature-card,
.dashboard-card {
    padding: 1.35rem;
}

// Card "vetrina" con bagliore lime decorativo in basso a destra, invece
// del precedente gradiente pieno chiaro — coerente col resto delle
// superfici scure dell'app (non più un "riquadro chiaro" isolato).
.feature-card {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    border: 0;
    border-radius: 1.5rem;
    background: var(--surface-1);
    background-image: radial-gradient(circle at 100% 100%, rgba(178, 238, 55, .18), transparent 55%);
    box-shadow: var(--shadow-2);
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);

    &:hover {
        box-shadow: var(--shadow-3);
        transform: translateY(-2px);
    }

    h2 {
        position: relative;
        max-width: 85%;
        margin: .65rem 0 .35rem;
        font-size: 1.25rem;
        font-weight: 800;
        color: #fff;
    }

    p {
        position: relative;
        margin: 0;
        color: var(--francoach-gray-300);
        font-size: .875rem;
    }
}

.feature-card--dark {
    background-image: radial-gradient(circle at 100% 0, rgba(88, 246, 112, .16) 0%, transparent 55%);
    box-shadow: var(--shadow-2);
    color: #fff;

    p {
        color: rgba(255, 255, 255, .72);
    }
}

.feature-card__eyebrow,
.dashboard-card__eyebrow,
.athlete-hero__eyebrow {
    color: var(--francoach-yellow);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.feature-card__icon {
    position: absolute;
    right: 1rem;
    bottom: -.4rem;
    color: rgba(178, 238, 55, .12);
    font-size: 5rem;
    line-height: 1;
}

.feature-card__link {
    position: absolute;
    right: 1.25rem;
    bottom: 1.1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--francoach-yellow);
    font-size: .72rem;
    font-weight: 750;
    text-decoration: none;

    &:hover,
    &:focus-visible {
        color: #fff;
    }
}

.dashboard-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;

    h2 {
        margin: .15rem 0 0;
        font-size: 1rem;
        font-weight: 750;
        color: #fff;
    }
}

.dashboard-card__metric {
    white-space: nowrap;
    font-size: 1rem;
}

.chart-wrap {
    position: relative;
    min-height: 190px;
}

.chart-wrap--doughnut {
    max-width: 220px;
    margin-inline: auto;
}

.weight-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .4rem;

    > strong {
        font-size: 2rem;
        letter-spacing: -.05em;
        color: #fff;

        small {
            font-size: .9rem;
            color: var(--francoach-gray-300);
        }
    }
}

.trend-badge {
    display: inline-flex;
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 750;
}

.trend-badge--positive {
    background-color: rgba(88, 246, 112, .16);
    color: var(--francoach-green);
}

.trend-badge--negative {
    background-color: rgba(255, 139, 122, .16);
    color: #ff8b7a;
}

.workout-result {
    display: flex;
    gap: .75rem;
}

.workout-result__icon {
    @extend .icon-badge;
}

.workout-result div {
    display: grid;

    span,
    small {
        color: var(--francoach-gray-300);
        font-size: .78rem;
    }
}

// Griglia di azioni rapide: stessa pastiglia scura con badge icona
// circolare, coerente col resto dei "tile" dell'app.
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.quick-action {
    display: flex;
    min-width: 0;
    min-height: 86px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1.25rem;
    background-color: var(--surface-1);
    box-shadow: var(--shadow-1);
    color: rgba(255, 255, 255, .92);
    text-align: left;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 700;
    transition: box-shadow var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard);

    i,
    .fc-icon {
        color: var(--francoach-yellow);
        font-size: 1.2rem;
        transition: transform var(--dur-fast) var(--ease-out-back);
    }

    &:not(:disabled):hover {
        box-shadow: var(--shadow-2);
        border-color: rgba(178, 238, 55, .2);
        color: #fff;
        transform: translateY(-2px);
    }

    &:not(:disabled):hover i,
    &:not(:disabled):hover .fc-icon {
        transform: scale(1.12);
    }

    &:not(:disabled):active {
        box-shadow: var(--shadow-inset);
        transform: translateY(0) scale(.98);
    }

    &:disabled {
        cursor: not-allowed;
        box-shadow: none;
        background-color: var(--surface-sunken);
        color: var(--francoach-gray-300);
        opacity: .68;

        i,
        .fc-icon {
            color: var(--francoach-gray-300);
        }
    }
}

.activity-table {
    font-size: .82rem;

    thead th {
        color: var(--francoach-gray-300);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
}

.activity-type {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;

    i {
        color: var(--francoach-yellow);
    }
}

.message-preview,
.notification-preview {
    padding: .75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);

    &:last-child {
        border-bottom: 0;
    }

    strong,
    span,
    small {
        display: block;
    }

    strong {
        font-size: .82rem;
        color: #fff;
    }

    p {
        margin: .25rem 0;
        color: rgba(255, 255, 255, .7);
        font-size: .78rem;
        line-height: 1.4;
    }

    small {
        color: var(--francoach-gray-300);
        font-size: .68rem;
    }
}

.notification-preview.is-unread {
    position: relative;
    padding-left: .7rem;

    &::before {
        position: absolute;
        top: .85rem;
        left: 0;
        width: 4px;
        height: 22px;
        border-radius: 999px;
        background-color: var(--francoach-yellow);
        content: "";
    }
}

.empty-state {
    display: flex;
    min-height: 120px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--francoach-gray-300);
    text-align: center;
}

.empty-state__icon {
    @extend .icon-badge;
    margin-bottom: .6rem;
    color: var(--francoach-gray-300);
}

.empty-state__title {
    margin: 0;
    font-size: .88rem;
    font-weight: 750;
    color: #fff;
}

.empty-state__message {
    max-width: 28rem;
    margin: .35rem 0 0;
    font-size: .76rem;
}

.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 110px;
    color: #626870;
    font-size: .85rem;
}

.app-skeleton {
    display: grid;
    gap: .65rem;
}

.app-skeleton__line {
    display: block;
    width: var(--skeleton-width);
    height: .8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-2) 50%, var(--surface-sunken) 75%);
    background-size: 200% 100%;
    box-shadow: var(--shadow-inset);
    animation: skeleton-pulse 1.35s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-skeleton__line {
        animation: none;
    }
}

.toast-brand {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--francoach-yellow);
}

.notification-menu {
    width: min(340px, calc(100vw - 1.5rem));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-3);
}

.notification-menu__item {
    display: grid;
    gap: .15rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transition: background-color var(--dur-fast) var(--ease-standard);

    &:hover {
        background-color: rgba(255, 255, 255, .04);
    }

    strong {
        font-size: .8rem;
        color: $body-color;
    }

    span {
        color: rgba(255, 255, 255, .7);
        font-size: .75rem;
    }

    small {
        color: var(--francoach-gray-300);
        font-size: .68rem;
    }
}

.notification-menu__item.is-unread {
    background-color: rgba(178, 238, 55, .08);
}

.app-topbar__count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--surface-0);
    border-radius: 999px;
    background-color: var(--francoach-yellow);
    color: #000; // testo nero su lime pieno: ~13:1
    font-size: .58rem;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}

.app-topbar__user {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .2rem;
    border: 0;
    background: transparent;
    color: inherit;
}

.app-topbar__avatar {
    width: 36px;
    height: 36px;
    font-size: .75rem;
}

.app-topbar__user-copy {
    display: none;
    text-align: left;

    strong,
    small {
        display: block;
    }

    strong {
        font-size: .8rem;
    }

    small {
        color: var(--francoach-gray-300);
        font-size: .68rem;
    }

    @include media-breakpoint-up(lg) {
        display: block;
    }
}

.app-bottom-nav__link {
    border: 0;
    background: transparent;
}

.mobile-menu {
    max-width: 320px;
    background-color: var(--surface-1);
    color: $body-color;
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.mobile-menu .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mobile-menu .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.mobile-menu__links {
    display: grid;
    gap: .25rem;
}

.mobile-menu__link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: .8rem 1rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-weight: 650;
    transition: background-color var(--dur-fast) var(--ease-standard);

    &:hover {
        background-color: rgba(255, 255, 255, .06);
        color: #fff;
    }
}

.mobile-menu__link.disabled {
    color: var(--francoach-gray-300);
    background-color: transparent;
    opacity: .5;
}

.athlete-hero {
    position: relative;
    display: flex;
    min-height: 250px;
    overflow: hidden;
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 85% 30%, rgba(178, 238, 55, .3), transparent 32%),
        linear-gradient(120deg, var(--surface-1) 0%, var(--surface-2) 100%);
    box-shadow: var(--shadow-2);
    color: #fff;
}

.athlete-hero__content {
    position: relative;
    z-index: 1;
    align-self: center;
    max-width: 75%;
    padding: 1.5rem;

    h2 {
        margin: .55rem 0 .35rem;
        font-size: clamp(1.65rem, 5vw, 2.35rem);
        font-weight: 800;
        letter-spacing: -.04em;
    }

    p {
        margin-bottom: 1.1rem;
        color: rgba(255, 255, 255, .72);
    }
}

.athlete-hero__eyebrow {
    color: var(--francoach-yellow);
}

.athlete-hero__graphic {
    position: absolute;
    right: -.5rem;
    bottom: -2.3rem;
    color: rgba(178, 238, 55, .14);
    font-size: 11rem;
    line-height: 1;
    transform: rotate(8deg);
}

.next-workout {
    display: grid;
    gap: .3rem;
    padding: 1.1rem;
    border-radius: 1.1rem;
    background-color: var(--surface-2);
    box-shadow: var(--shadow-inset);

    strong {
        font-size: 1.05rem;
        color: #fff;
    }

    span {
        color: var(--francoach-gray-300);
        font-size: .82rem;
        text-transform: capitalize;
    }
}

.record-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-radius: .375rem;
    font-size: .82rem;
    transition: background-color var(--dur-fast) var(--ease-standard);

    &:hover {
        background-color: rgba(255, 255, 255, .04);
    }

    &:last-child {
        border-bottom: 0;
    }

    strong {
        color: var(--francoach-yellow);
        white-space: nowrap;
    }
}

.last-message {
    margin: 0;
    padding: 1.1rem;
    border-left: 4px solid var(--francoach-yellow);
    border-radius: 0 1rem 1rem 0;
    background-color: var(--surface-2);
    box-shadow: var(--shadow-inset);

    p {
        margin: 0 0 .65rem;
        font-size: .88rem;
        line-height: 1.55;
        color: rgba(255, 255, 255, .92);
    }

    footer {
        color: var(--francoach-gray-300);
        font-size: .72rem;
    }
}

.profile-page {
    display: grid;
    gap: 1rem;
}

.profile-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 750;

    &::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        content: "";
    }
}

.profile-status.is-active {
    background-color: #e8f7ef;
    color: #11633c;

    &::before {
        background-color: #198754;
    }
}

.profile-status.is-inactive {
    background-color: #fdebec;
    color: #842029;

    &::before {
        background-color: #dc3545;
    }
}

.profile-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background-image: none;

    h2 {
        margin: .35rem 0 .1rem;
        font-size: 1.25rem;
        font-weight: 800;
    }

    p {
        margin: 0;
        color: var(--francoach-gray-300);
        font-size: .84rem;
        overflow-wrap: anywhere;
    }

    dl {
        grid-column: 1 / -1;
        display: grid;
        gap: .65rem;
        margin: 0;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, .1);

        div {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 1rem;
        }

        dt {
            color: var(--francoach-gray-300);
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        dd {
            margin: 0;
            font-size: .78rem;
            font-weight: 700;
            text-align: right;
        }
    }

    @include media-breakpoint-up(md) {
        grid-template-columns: auto minmax(220px, 1fr) minmax(360px, auto);

        dl {
            grid-column: auto;
            grid-template-columns: repeat(3, minmax(90px, 1fr));
            padding: 0 0 0 1.25rem;
            border-top: 0;
            border-left: 1px solid rgba(255, 255, 255, .1);

            div {
                display: block;
            }

            dd {
                margin-top: .25rem;
                text-align: left;
            }
        }
    }
}

.profile-identity__avatar {
    img,
    .avatar-fallback {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        font-size: 1rem;
    }
}

.profile-section-nav {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    padding: .25rem 0 .5rem;
    scrollbar-width: thin;

    a {
        flex: 0 0 auto;
        padding: .5rem .8rem;
        border: 1px solid #dfe2e6;
        border-radius: 999px;
        background-color: #fff;
        color: #353a40;
        text-decoration: none;
        font-size: .75rem;
        font-weight: 700;

        &:hover,
        &:focus-visible {
            border-color: var(--francoach-black); // non giallo: contro il bianco il bordo resterebbe sotto il 3:1
            color: var(--francoach-black);
        }
    }
}

.profile-section {
    margin-bottom: 1rem;
    padding: 1.25rem;
    scroll-margin-top: 1rem;
}

.profile-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;

    h2 {
        margin: .2rem 0 0;
        font-size: 1.08rem;
        font-weight: 800;
    }
}

.profile-inline-form {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #e5e7ea;
    border-radius: .4rem;
    background-color: transparent;
}

.profile-list {
    display: grid;
    gap: .65rem;
    margin-top: 1rem;
}

.profile-editable-item {
    padding: .85rem;
    border: 1px solid #e5e7ea;
    border-radius: .4rem;
    background-color: #fff;

    summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker {
            display: none;
        }

        > span {
            display: grid;
            gap: .2rem;
            min-width: 0;
        }

        strong {
            font-size: .86rem;
        }

        small {
            color: #6c7178;
            font-size: .72rem;
        }
    }

    &[open] summary > i {
        transform: rotate(180deg);
    }
}

.day-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;

    label {
        position: relative;

        input {
            position: absolute;
            opacity: 0;
        }

        span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 46px;
            height: 40px;
            border: 1px solid #dfe2e6;
            border-radius: .375rem;
            background-color: transparent;
            font-size: .72rem;
            font-weight: 750;
            text-transform: uppercase;
        }

        input:checked + span {
            border-color: var(--francoach-yellow);
            background-color: var(--francoach-yellow);
            color: #000; // non #fff: stesso motivo del badge sidebar/avatar, ~7,4:1 contro ~2,9:1
        }

        input:focus-visible + span {
            outline: 3px solid #000; /* nero: percepibile su sfondo bianco, il giallo qui sarebbe sotto il 3:1 */
            outline-offset: 2px;
        }
    }
}

.day-picker--readonly {
    span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 46px;
        height: 38px;
        border-radius: .375rem;
        background-color: #F5FBC7;
        color: var(--francoach-black); /* non giallo: su bianco resta sotto il 3:1 anche nella variante "-dark" */
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
    }
}

.equipment-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;

    label {
        position: relative;

        input {
            position: absolute;
            opacity: 0;
        }

        span {
            display: flex;
            align-items: center;
            gap: .5rem;
            min-height: 48px;
            padding: .6rem;
            border: 1px solid rgba(255, 255, 255, .28);
            border-radius: .375rem;
            color: rgba(255, 255, 255, .92);
            font-size: .74rem;
            font-weight: 650;

            i {
                color: var(--francoach-gray-300);
            }
        }

        input:checked + span {
            border-color: var(--francoach-yellow);
            background-color: var(--francoach-yellow);
            color: #000;

            i {
                color: var(--francoach-black); /* non giallo: su bianco resta sotto il 3:1 anche nella variante "-dark" */
            }
        }

        input:focus-visible + span {
            outline: 3px solid #000; /* nero: percepibile su sfondo bianco, il giallo qui sarebbe sotto il 3:1 */
            outline-offset: 2px;
        }
    }
}

.private-note-list {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;

    article {
        padding: .9rem;
        border-left: 4px solid var(--francoach-yellow);
        border-radius: 0 .4rem .4rem 0;
        background-color: #F5FBC7;

        > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
        }

        p {
            margin: .75rem 0;
            font-size: .82rem;
            line-height: 1.55;
            white-space: pre-line;
        }

        small,
        footer {
            color: #6c7178;
            font-size: .7rem;
        }
    }
}

.profile-timeline {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;

    &::before {
        position: absolute;
        top: .5rem;
        bottom: .5rem;
        left: 6px;
        width: 2px;
        background-color: #e2e5e8;
        content: "";
    }

    li {
        position: relative;
        display: grid;
        grid-template-columns: 14px minmax(0, 1fr);
        gap: .75rem;
        padding-bottom: 1.15rem;
    }

    strong,
    small {
        display: block;
    }

    strong {
        font-size: .82rem;
    }

    p {
        margin: .2rem 0;
        color: #565c64;
        font-size: .75rem;
    }

    small {
        margin-top: .2rem;
        color: #757b83;
        font-size: .68rem;
    }
}

.profile-timeline__dot {
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: .15rem;
    border: 3px solid #fff;
    border-radius: 50%;
    background-color: var(--francoach-yellow);
    box-shadow: 0 0 0 1px var(--francoach-yellow);
}

.profile-permission-note {
    margin: 1rem 0 0;
    padding: .75rem;
    border-radius: .375rem;
    background-color: #f4f5f6;
    color: #626870;
    font-size: .74rem;
}

.profile-data-list {
    display: grid;
    gap: .75rem;
    margin: 0;

    div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding-bottom: .65rem;
        border-bottom: 1px solid #e8eaed;
    }

    dt {
        color: #6c7178;
        font-size: .74rem;
        font-weight: 600;
    }

    dd {
        margin: 0;
        font-size: .78rem;
        font-weight: 700;
        text-align: right;
    }
}

.profile-readonly-copy {
    margin-top: 1rem;
    padding: .85rem;
    border-radius: .4rem;
    background-color: #f7f8f9;

    strong {
        font-size: .76rem;
    }

    p {
        margin: .35rem 0 0;
        color: #555b63;
        font-size: .78rem;
        white-space: pre-line;
    }
}

.readonly-card-list {
    display: grid;
    gap: .7rem;

    article {
        padding: .85rem;
        border: 1px solid #e5e7ea;
        border-radius: .4rem;

        h3 {
            margin: .55rem 0 .2rem;
            font-size: .9rem;
            font-weight: 750;
        }

        p {
            margin: 0;
            color: #5d636b;
            font-size: .76rem;
        }

        small {
            display: block;
            margin-top: .45rem;
            color: #737981;
            font-size: .69rem;
        }
    }
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;

    > span {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .42rem .65rem;
        border-radius: .375rem;
        background-color: #F5FBC7;
        color: #6d3107;
        font-size: .72rem;
        font-weight: 700;
    }
}

.video-player {
    overflow: hidden;

    &__frame-wrap {
        overflow: hidden;
        border-radius: .4rem;
    }

    &__loading {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        color: #fff;
        background: #16181b;
    }

    iframe,
    video {
        border: 0;
        width: 100%;
        height: 100%;
    }

    &__fallback {
        min-height: 12rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .65rem;
        padding: 2rem;
        border: 1px dashed #ccd1d6;
        border-radius: .4rem;
        color: #626870;
        text-align: center;
        background: #f8f9fa;

        i {
            font-size: 1.75rem;
        }
    }

    &__error {
        margin-top: .75rem;
        color: #842029;
        font-size: .82rem;
    }

    &__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: .75rem;

        small {
            color: #6c7178;
        }
    }
}

.video-preview-placeholder {
    min-height: 14rem;
    border-radius: .4rem;
}

.exercise-athlete-view {
    max-width: 900px;
}

.text-preline {
    white-space: pre-line;
}

@media (max-width: 575.98px) {
    .video-player__footer {
        align-items: stretch;
        flex-direction: column;
    }
}

.report-chart-wrap {
    min-height: 290px;
}

@media print {
    @page {
        margin: 12mm;
    }

    .app-sidebar,
    .app-topbar,
    .app-footer,
    .app-bottom-nav,
    .report-no-print,
    .report-actions,
    .breadcrumbs {
        display: none !important;
    }

    .app-shell,
    .app-shell__content,
    .app-main {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .card {
        break-inside: avoid;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    .report-chart-wrap {
        min-height: 220px;
    }
}

.nutrition-macros {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;

    span {
        padding: .45rem .65rem;
        border-radius: 999px;
        font-size: .82rem;
    }
}

.nutrition-chart {
    width: min(100%, 11rem);
    height: 9rem;
    min-height: 0;
    margin-inline: auto;
}

.nutrition-macro-card .card-body {
    padding: 1rem;
}

.nutrition-meal-items {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nutrition-meal-item {
    padding: .8rem 0;
    border-radius: .375rem;
}

.nutrition-editor .accordion-button:focus-visible,
.nutrition-editor button:focus-visible,
.nutrition-editor input:focus-visible,
.nutrition-editor select:focus-visible {
    outline: 3px solid #000; /* nero: percepibile su sfondo bianco, il giallo qui sarebbe sotto il 3:1 */
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .nutrition-macros {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.assignment-schedule-row {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(9rem, 1fr);
    gap: .75rem;
    align-items: center;
    padding: .65rem;
    border: 1px solid #e1e4e8;
    border-radius: .375rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(7rem, 1fr));
    min-width: 56rem;
    overflow: hidden;
    border: 1px solid #e1e4e8;
    border-radius: .4rem;

    &__weekday {
        padding: .55rem;
        color: #686e75;
        background: #f4f5f6;
        font-size: .7rem;
        font-weight: 750;
        text-align: center;
        text-transform: uppercase;
    }

    &__day {
        min-height: 7rem;
        padding: .45rem;
        border-top: 1px solid #e8eaec;
        border-right: 1px solid #e8eaec;
        background: #fff;

        &.is-outside {
            color: #9da2a8;
            background: #fafafa;
        }

        &.is-today .calendar-grid__number {
            color: #000; // non #fff: stesso motivo del badge sidebar/avatar, ~7,4:1 contro ~2,9:1
            background: $primary;
        }
    }

    &__number {
        display: grid;
        width: 1.55rem;
        height: 1.55rem;
        place-items: center;
        border-radius: 50%;
        font-size: .72rem;
        font-weight: 750;
    }

    &__events {
        display: grid;
        gap: .3rem;
        margin-top: .35rem;
    }
}

.card-body:has(> .calendar-grid) {
    overflow-x: auto;
}

.calendar-event {
    display: block;
    overflow: hidden;
    padding: .35rem .45rem;
    border-left: 3px solid #6c757d;
    border-radius: .25rem;
    color: #34383e;
    background: #eef0f2;
    font-size: .68rem;
    line-height: 1.2;
    text-decoration: none;

    span,
    small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    small {
        margin-top: .15rem;
        opacity: .72;
        font-size: .6rem;
    }

    &--planned { border-color: #0d6efd; background: #eaf2ff; }
    &--started { border-color: #fd7e14; background: #F5FBC7; }
    &--completed { border-color: #198754; background: #e9f6ef; }
    &--skipped,
    &--cancelled { border-color: #6c757d; background: #f0f1f2; }
    &--rescheduled { border-color: #6f42c1; background: #f1ecfa; }
}

.scheduled-session {
    --scheduled-session-card: var(--surface-1);
    --scheduled-session-border: rgba(255, 255, 255, .08);
    --scheduled-session-muted: #a9afb7;
    --scheduled-session-soft: rgba(178, 238, 55, .12);
    max-width: 70rem;
    margin: 0 auto;
    padding-bottom: 8rem;
}

.scheduled-session__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem;
    border: 1px solid var(--scheduled-session-border);
    border-radius: 1.75rem;
    background: var(--scheduled-session-card);
    box-shadow: var(--shadow-2);
}

.scheduled-session__back,
.scheduled-session__cancel,
.scheduled-session__status {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--scheduled-session-border);
    border-radius: 50%;
    font-size: 1.35rem;
}

.scheduled-session__back {
    color: var(--bs-body-color);
    background: var(--surface-2);
}

.scheduled-session__back:hover {
    color: #0f1012;
    border-color: var(--francoach-yellow);
    background: var(--francoach-yellow);
    transform: translateX(-2px);
}

.scheduled-session__cancel {
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), .08);
}

.scheduled-session__cancel:hover {
    color: #fff;
    border-color: var(--bs-danger);
    background: var(--bs-danger);
}

.scheduled-session__status {
    color: #0f1012;
    border-color: var(--francoach-yellow);
    background: var(--francoach-yellow);
}

.scheduled-session__heading {
    min-width: 0;

    h1 {
        margin: .25rem 0;
        overflow-wrap: anywhere;
        font-size: clamp(2rem, 5vw, 3.75rem);
        font-weight: 800;
        letter-spacing: -.05em;
        line-height: 1;
    }

    p {
        margin: 0;
        color: var(--scheduled-session-muted);
    }
}

.scheduled-session__eyebrow,
.scheduled-session__section-kicker {
    color: var(--francoach-yellow);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.scheduled-session__coach-note {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(178, 238, 55, .22);
    border-radius: 1.25rem;
    background: rgba(178, 238, 55, .07);

    > i {
        color: var(--francoach-yellow);
        font-size: 1.2rem;
    }

    p {
        display: grid;
        gap: .15rem;
        margin: 0;
        color: var(--scheduled-session-muted);
    }

    strong {
        color: var(--bs-body-color);
    }
}

.scheduled-session__exercises {
    margin-top: 2.5rem;
}

.scheduled-session__section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;

    h2 {
        margin: .2rem 0 0;
        font-size: clamp(1.75rem, 3vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -.035em;
    }
}

.scheduled-session__progress {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--scheduled-session-muted);
    font-size: 1.35rem;
    font-weight: 800;

    i {
        color: var(--francoach-yellow);
    }
}

.scheduled-session__list {
    display: grid;
    gap: 1.25rem;
}

.scheduled-session-exercise {
    display: grid;
    min-height: 12rem;
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--scheduled-session-border);
    border-radius: 1.75rem;
    color: var(--bs-body-color);
    background: var(--scheduled-session-card);
    box-shadow: var(--shadow-2);
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}

.scheduled-session-exercise:hover,
.scheduled-session-exercise:focus-visible {
    color: var(--bs-body-color);
    border-color: rgba(178, 238, 55, .48);
    box-shadow: var(--shadow-3), var(--shadow-glow-primary);
    transform: translateY(-2px);
}

.scheduled-session-exercise__media {
    display: grid;
    min-height: 100%;
    place-items: center;
    overflow: hidden;
    color: var(--francoach-yellow);
    background: var(--surface-2);
    font-size: 2rem;

    img {
        width: 100%;
        height: 100%;
        min-height: 12rem;
        object-fit: cover;
    }
}

.scheduled-session-exercise__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: .65rem;
    padding: 1.5rem 1.75rem;

    > strong {
        overflow-wrap: anywhere;
        font-size: clamp(1.35rem, 2.5vw, 2rem);
        font-weight: 800;
        letter-spacing: -.035em;
        line-height: 1.12;
    }
}

.scheduled-session-exercise__block,
.scheduled-session-exercise__technique {
    width: fit-content;
    padding: .35rem .6rem;
    border-radius: 999px;
    color: var(--francoach-yellow);
    background: var(--scheduled-session-soft);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.scheduled-session-exercise__prescription {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    color: var(--scheduled-session-muted);
    font-size: 1rem;

    span {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }

    b {
        color: var(--bs-body-color);
        font-weight: 800;
    }

    i {
        color: var(--francoach-yellow);
    }
}

.scheduled-session-exercise__open {
    display: grid;
    width: 4rem;
    height: 4rem;
    align-self: center;
    margin-right: 1.5rem;
    place-items: center;
    border-radius: 1.15rem;
    color: #0f1012;
    background: var(--francoach-yellow);
    box-shadow: var(--shadow-glow-primary);
    font-size: 1.35rem;
}

.scheduled-session__action-bar {
    position: fixed;
    z-index: 1025;
    right: 1rem;
    bottom: calc(var(--francoach-bottomnav-height) + 1rem + env(safe-area-inset-bottom, 0px));
    left: 1rem;
    display: flex;
    justify-content: center;
    pointer-events: none;

    form {
        width: min(100%, 44rem);
        pointer-events: auto;
    }

    > a {
        width: min(100%, 44rem);
        pointer-events: auto;
    }
}

.scheduled-session__start {
    display: flex;
    width: 100%;
    min-height: 4.5rem;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 800;

    i {
        font-size: 1.5rem;
    }
}

@include media-breakpoint-up(lg) {
    .scheduled-session__action-bar {
        left: calc(var(--francoach-sidebar-width) + 1rem);
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 575.98px) {
    .scheduled-session {
        padding-bottom: 7rem;
    }

    .scheduled-session__header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .75rem;
        padding: 1rem;
        border-radius: 1.35rem;
    }

    .scheduled-session__back,
    .scheduled-session__cancel,
    .scheduled-session__status {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.05rem;
    }

    .scheduled-session__heading {
        h1 {
            font-size: 1.75rem;
            line-height: 1.05;
        }

        p {
            overflow: hidden;
            font-size: .8rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .scheduled-session__eyebrow {
        font-size: .62rem;
        letter-spacing: .06em;
    }

    .scheduled-session__exercises {
        margin-top: 2rem;
    }

    .scheduled-session__section-heading {
        margin-bottom: 1rem;
    }

    .scheduled-session__progress {
        font-size: 1.15rem;
    }

    .scheduled-session__list {
        gap: .9rem;
    }

    .scheduled-session-exercise {
        min-height: 8.75rem;
        grid-template-columns: 7.25rem minmax(0, 1fr);
        border-radius: 1.25rem;
    }

    .scheduled-session-exercise__media img {
        min-height: 8.75rem;
    }

    .scheduled-session-exercise__content {
        gap: .45rem;
        padding: 1rem;

        > strong {
            font-size: 1.08rem;
            line-height: 1.15;
        }
    }

    .scheduled-session-exercise__prescription {
        gap: .25rem .6rem;
        font-size: .78rem;
    }

    .scheduled-session-exercise__block,
    .scheduled-session-exercise__technique {
        padding: .25rem .45rem;
        font-size: .58rem;
    }

    .scheduled-session-exercise__open {
        display: none;
    }

    .scheduled-session__start {
        min-height: 4rem;
        font-size: 1rem;
    }
}

.session-workspace {
    padding-bottom: 6rem;
}

.session-workspace--with-timer {
    padding-top: 4.75rem;
}

.session-timer {
    position: fixed;
    z-index: 1020;
    top: 4.5rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(calc(100% - 2rem), 32rem);
    margin: 0;
    padding: .75rem 1rem;
    border: 1px solid #e1e4e8;
    border-radius: .4rem;
    background: transparent;
    backdrop-filter: blur(12px);

    strong {
        display: block;
        font-size: 1.4rem;
        font-variant-numeric: tabular-nums;
    }

    &__controls {
        display: flex;
        align-items: center;
        gap: .5rem;
    }
}

.session-exercise.is-skipped {
    opacity: .7;
}

.session-exercise {
    --session-card-bg: var(--surface-1);
    --session-card-border: rgba(255, 255, 255, .08);
    --session-muted: #a9afb7;
    --session-soft: rgba(178, 238, 55, .1);
    display: grid;
    max-width: 64rem;
    gap: 1.25rem;
    margin: 0 auto;
}

.session-exercise__notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
    padding: 1rem 1.35rem;
    border: 1px solid var(--session-card-border);
    border-radius: 1.5rem;
    color: var(--session-muted);
    background: var(--session-card-bg);
    box-shadow: var(--shadow-1);

    span {
        font-size: .85rem;
        font-weight: 650;
    }

    strong {
        color: var(--bs-body-color);
        font-size: .95rem;
    }
}

.session-exercise__hero {
    display: grid;
    min-height: 25rem;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    overflow: hidden;
    border: 1px solid var(--session-card-border);
    border-radius: 2rem;
    background: var(--session-card-bg);
    box-shadow: var(--shadow-3);
}

.session-exercise__hero-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(1.5rem, 4vw, 3rem);

    h2 {
        margin: .55rem 0 1rem;
        overflow-wrap: anywhere;
        font-size: clamp(2.25rem, 5vw, 4rem);
        font-weight: 800;
        letter-spacing: -.055em;
        line-height: .98;
    }

    > p:not(.session-exercise__coach-note) {
        max-width: 38rem;
        margin: 0;
        color: var(--session-muted);
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.55;
    }
}

.session-exercise__eyebrow,
.session-exercise__section-heading > span {
    color: var(--francoach-yellow);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.session-exercise__prescription {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.5rem;

    span {
        display: inline-flex;
        min-height: 2.25rem;
        align-items: center;
        padding: .45rem .7rem;
        border: 1px solid var(--session-card-border);
        border-radius: 999px;
        color: var(--bs-body-color);
        background: var(--session-soft);
        font-size: .76rem;
        font-weight: 750;
    }
}

.session-exercise__technique {
    margin-top: .75rem;
    color: var(--francoach-yellow);
    font-size: .75rem;
    font-weight: 800;
}

.session-exercise__coach-note {
    display: grid;
    gap: .15rem;
    width: 100%;
    margin: 1rem 0 0;
    padding: .85rem 1rem;
    border-left: 3px solid var(--francoach-yellow);
    border-radius: 0 1rem 1rem 0;
    color: var(--session-muted);
    background: var(--session-soft);
    font-size: .85rem;

    strong {
        color: var(--bs-body-color);
    }
}

.session-exercise__media-wrap {
    min-height: 100%;
    overflow: hidden;
    background: var(--surface-2);
}

.session-exercise__media {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 25rem;
    object-fit: cover;
}

.session-exercise__actions {
    display: grid;
    gap: .75rem;
}

.session-exercise-action {
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 1px solid var(--session-card-border);
    border-radius: 1.5rem;
    color: var(--bs-body-color);
    background: var(--session-card-bg);
    box-shadow: var(--shadow-1);
    font-weight: 800;
    text-align: left;
}

button.session-exercise-action,
.session-exercise-action > summary {
    display: flex;
    min-height: 4.75rem;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 1rem 1.25rem;
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: 1.05rem;
    list-style: none;
}

button.session-exercise-action:hover,
button.session-exercise-action:focus-visible,
.session-exercise-action > summary:hover,
.session-exercise-action > summary:focus-visible {
    color: #0f1012;
    background: var(--francoach-yellow);
}

.session-exercise-action > summary::-webkit-details-marker {
    display: none;
}

.session-exercise-action[open] > summary {
    color: #0f1012;
    background: var(--francoach-yellow);
}

.session-exercise-action > p,
.session-exercise-action > .session-history {
    margin: 0;
    padding: 1.25rem;
    color: var(--session-muted);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.6;
}

.session-exercise__video {
    padding: 1rem;
    border: 1px solid var(--session-card-border);
    border-radius: 1.5rem;
    background: var(--session-card-bg);
}

.session-exercise__data {
    margin-top: 1rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--session-card-border);
    border-radius: 1.75rem;
    background: var(--session-card-bg);
    box-shadow: var(--shadow-2);
}

.session-exercise__section-heading {
    margin-bottom: 1.5rem;

    h3 {
        margin: 0;
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -.035em;
    }
}

.session-exercise__data .session-sets {
    display: grid;
    gap: 0;
}

.session-set__columns,
.session-exercise__data .session-set {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr) 3rem;
    gap: clamp(.5rem, 2vw, 1rem);
    align-items: center;
}

.session-set__columns {
    padding: 0 .25rem .5rem;
    color: var(--session-muted);
    font-size: clamp(.75rem, 2vw, 1rem);
    font-weight: 500;
    text-align: center;
}

.session-exercise__data .session-set {
    position: relative;
    margin: 0;
    padding: .75rem .25rem;
    border: 0;
    border-top: 1px solid var(--session-card-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;

    &.is-completed {
        background: rgba(88, 246, 112, .045);
    }

    label {
        color: var(--session-muted);
        font-size: .7rem;
    }

    .session-set__identity {
        display: grid;
        grid-column: 1;
        place-items: center;
    }

    .session-set__number {
        width: 2.5rem;
        height: 2.5rem;
        margin: 0;
        border: 2px solid var(--francoach-yellow);
        color: var(--francoach-yellow);
        background: transparent;
        font-size: 1rem;
    }

    .session-set__primary-field {
        min-width: 0;
    }

    .session-set__input-wrap {
        position: relative;
    }

    .session-set__primary-field .form-control {
        min-height: 3.5rem;
        padding: .65rem 2.7rem .65rem .8rem;
        border-color: var(--session-card-border);
        border-radius: 1.1rem;
        background: transparent;
        box-shadow: none;
        appearance: textfield;
        font-size: 1rem;
        font-weight: 700;
        text-align: center;

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            margin: 0;
            appearance: none;
        }
    }

    .session-set__copy {
        position: absolute;
        top: 50%;
        right: .45rem;
        display: grid;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        color: var(--session-muted);
        background: var(--session-soft);
        place-items: center;
        transform: translateY(-50%);

        &:hover,
        &:focus-visible {
            color: #0f1012;
            background: var(--francoach-yellow);
        }
    }

    .session-set__drop-summary {
        display: flex;
        grid-column: 2 / 4;
        min-height: 3.5rem;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .65rem 1rem;
        border: 1px solid var(--session-card-border);
        border-radius: 1.1rem;
        color: var(--bs-body-color);

        span {
            color: var(--session-muted);
            font-size: .8rem;
        }
    }

    .session-set__advanced {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .session-set__advanced > summary {
        position: absolute;
        top: 2.5rem;
        right: .5rem;
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        color: var(--session-muted);
        cursor: pointer;
        list-style: none;
        place-items: center;
        transform: translateY(-50%);

        &::-webkit-details-marker {
            display: none;
        }

        &::marker {
            content: "";
        }

        i {
            transition: transform var(--dur-fast) var(--ease-standard);
        }
    }

    .session-set__advanced[open] > summary i {
        transform: rotate(180deg);
    }

    .session-set__advanced-panel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        margin-top: .75rem;
        padding: 1rem;
        border-radius: 1rem;
        background: var(--session-soft);
    }

    .session-set__technique,
    .session-set__notes,
    .session-set__drops,
    .session-set__status {
        grid-column: 1 / -1;
    }

    .session-set__technique {
        width: fit-content;
        padding: .3rem .6rem;
        border-radius: 999px;
        color: #0f1012;
        background: var(--francoach-yellow);
        font-size: .72rem;
        font-weight: 800;
    }

    .session-set__drops {
        display: grid;
        gap: .5rem;
    }

    .session-set__drop {
        grid-template-columns: 4rem repeat(2, minmax(0, 1fr));
    }

    .session-set__advanced-fields {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .session-set__delete {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .session-set__status {
        min-height: .75rem;
        color: var(--session-muted);
        font-size: .65rem;
    }
}

.session-exercise__add-set {
    min-height: 4rem;
    margin-top: 1rem;
    border-radius: 999px;
    font-weight: 800;
}

.session-exercise__extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;

    > div {
        min-width: 0;
        padding: 1.25rem;
        border: 1px solid var(--session-card-border);
        border-radius: 1.5rem;
        background: var(--session-card-bg);
        box-shadow: var(--shadow-1);
    }
}

.session-history {
    overflow-x: auto;
}

.session-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: .75rem;
}

.session-media-item {
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;

    img,
    video {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        background: #000;
    }
}

.session-exercise-nav {
    position: fixed;
    z-index: 1040;
    right: 1rem;
    bottom: calc(var(--francoach-bottomnav-height) + 1rem + env(safe-area-inset-bottom, 0px));
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: fit-content;
    min-width: 15rem;
    margin: auto;
    padding: .75rem;
    border: 1px solid rgba(178, 238, 55, .35);
    border-radius: 999px;
    background: var(--surface-2);
    box-shadow: var(--shadow-3);
    backdrop-filter: blur(12px);

    [data-exercise-previous],
    [data-exercise-next] {
        display: inline-grid;
        width: 3rem;
        height: 3rem;
        padding: 0;
        place-items: center;

        i {
            font-size: 1.35rem;
        }
    }

    @include media-breakpoint-up(lg) {
        left: calc(var(--francoach-sidebar-width) + 1rem);
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

.session-previous {
    display: inline-flex;
    margin-top: .4rem;
    padding: .35rem .55rem;
    border-radius: .3rem;
    color: #4e555c;
    background: #f0f2f4;
    font-size: .72rem;
}

.session-set {
    display: grid;
    grid-template-columns: 2rem repeat(4, minmax(4.5rem, 1fr)) auto minmax(3.5rem, auto);
    gap: .5rem;
    align-items: end;
    margin-bottom: .65rem;
    padding: .7rem;
    border: 1px solid #e1e4e8;
    border-radius: .4rem;
    background: transparent;

    &.is-completed {
        border-color: #9ed0b4;
        background: #f2fbf6;
    }

    label {
        display: block;
        margin-bottom: .25rem;
        color: #6d737a;
        font-size: .65rem;
        font-weight: 700;
    }

    &__identity {
        display: grid;
        grid-row: span 2;
        align-self: start;
        justify-items: center;
        gap: .35rem;
    }

    input[type="number"] {
        min-width: 0;
        text-align: center;
    }

    &__delete {
        padding: .2rem .4rem;
    }

    &__number {
        display: grid;
        width: 1.8rem;
        height: 1.8rem;
        margin-bottom: .2rem;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        background: #30343a;
        font-size: .75rem;
        font-weight: 700;
    }

    &__notes {
        grid-column: 2 / -1;
    }

    &__drops,
    &__advanced {
        grid-column: 2 / -1;
    }

    &__drops {
        display: grid;
        gap: .5rem;
    }

    &__drop {
        display: grid;
        grid-template-columns: 4rem repeat(2, minmax(5rem, 1fr));
        gap: .5rem;
        align-items: end;
        padding: .6rem;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 1rem;
    }

    &__advanced summary {
        width: fit-content;
        color: var(--francoach-gray-300);
        cursor: pointer;
        font-size: .75rem;
        font-weight: 700;
    }

    &__advanced[open] summary i {
        display: inline-block;
        transform: rotate(180deg);
    }

    &__advanced-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(5rem, 10rem));
        gap: .5rem;
        margin-top: .5rem;
    }

    &__status {
        align-self: center;
        color: #6d737a;
        font-size: .65rem;
    }
}

@media (max-width: 991.98px) {
    .breadcrumb.app-breadcrumb {
        display: none;
    }

    .my-plan__eyebrow {
        display: none;
    }

    .session-set {
        grid-template-columns: 2rem repeat(3, minmax(4.5rem, 1fr));

        &__status {
            grid-column: span 2;
        }
    }
}

@media (max-width: 575.98px) {
    .session-timer {
        top: calc(var(--francoach-topbar-height) + .5rem);
    }

    .session-exercise {
        gap: 1rem;
    }

    .session-exercise__notice {
        min-height: 4rem;
        padding: .85rem 1rem;
        border-radius: 1.25rem;

        span,
        strong {
            font-size: .75rem;
        }
    }

    .session-exercise__hero {
        min-height: 0;
        grid-template-columns: 1fr;
        border-radius: 1.5rem;
    }

    .session-exercise__hero-copy {
        padding: 1.5rem;

        h2 {
            margin-top: .4rem;
            font-size: 2.35rem;
        }

        > p:not(.session-exercise__coach-note) {
            font-size: .95rem;
        }
    }

    .session-exercise__media-wrap {
        grid-row: 1;
        min-height: 14rem;
    }

    .session-exercise__media {
        min-height: 14rem;
        max-height: 18rem;
    }

    button.session-exercise-action,
    .session-exercise-action > summary {
        min-height: 4.25rem;
        font-size: .95rem;
    }

    .session-exercise__data .session-sets,
    .session-exercise__extras {
        grid-template-columns: 1fr;
    }

    .session-exercise__data {
        padding: 1rem;
        border-radius: 1.5rem;
    }

    .session-exercise__data .session-set {
        padding: .75rem .125rem;
        border-radius: 0;
    }

    .session-exercise__data .session-set .session-set__drop {
        grid-template-columns: 1fr 1fr;

        strong {
            grid-column: 1 / -1;
        }
    }

    .session-exercise__extras > div {
        padding: 1rem;
        border-radius: 1.25rem;
    }

    .session-set {
        grid-template-columns: 2rem repeat(2, minmax(0, 1fr));

        &__drop {
            grid-template-columns: 1fr 1fr;

            strong {
                grid-column: 1 / -1;
            }
        }
    }
}

.plan-editor-week > .card-header {
    padding: 1rem;
}

.plan-editor-actions {
    display: flex;
    flex-shrink: 0;
    gap: .25rem;
}

.plan-editor-days,
.plan-editor-exercises {
    display: grid;
    gap: 1rem;
}

.plan-editor-day {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .4rem;
    background: transparent;
}

.plan-editor-exercise {
    overflow: hidden;
    border: 1px solid #dfe3e7;
    border-left: 4px solid $primary;
    border-radius: .4rem;
    background: var(--surface-2);
}

.plan-superset-block {
    display: grid;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid rgba($primary, .55);
    border-radius: .6rem;
    background: rgba($primary, .05);

    &__header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        padding: 0 .15rem;

        .text-body-secondary {
            margin-left: auto;
        }
    }
}

.plan-editor-accordion-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;

    > .accordion-button {
        min-width: 0;
        gap: .75rem;
        padding: 1rem;
        color: var(--bs-body-color);
        background: transparent;
        box-shadow: none;
    }

    > .accordion-button:not(.collapsed) {
        color: var(--bs-body-color);
        background: rgba($primary, .09);
    }

    > .plan-editor-actions {
        padding-right: 1rem;
    }
}

.plan-editor-index {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: $primary;
    font-size: .75rem;
    font-weight: 800;
}

.plan-editor-summary {
    display: grid;
    min-width: 0;
    gap: .15rem;

    strong,
    small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    small {
        color: var(--bs-secondary-color);
        font-size: .75rem;
        font-weight: 500;
    }
}

.plan-editor-day > .accordion-collapse > .accordion-body {
    padding: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.plan-editor-exercise > .accordion-collapse > .accordion-body {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.plan-editor-empty {
    padding: 1.5rem;
    border: 1px dashed #cbd0d6;
    border-radius: .4rem;
    color: #6c7178;
    text-align: center;
}

.plan-exercise-search {
    position: relative;

    .plan-exercise-results {
        position: absolute;
        z-index: 20;
        top: 100%;
        right: 0;
        left: 0;
        max-height: 15rem;
        overflow-y: auto;
        box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12);
    }
}

.plan-set-row {
    display: grid;
    grid-template-columns: 2rem repeat(7, minmax(5.5rem, 1fr)) auto;
    gap: .4rem;
    align-items: end;
    margin-bottom: .5rem;
}

.plan-set-row--drop-set {
    grid-template-columns: 2rem repeat(5, minmax(5.5rem, 1fr)) auto;
}

.plan-set-label {
    display: block;
    margin-bottom: .25rem;
    color: var(--francoach-gray-300);
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
}

.plan-set-number {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #34383e;
    font-size: .72rem;
    font-weight: 700;
}

.plan-set-row > .plan-editor-actions {
    align-self: end;
    padding-bottom: .05rem;
}

.plan-drop-segments {
    grid-column: 2 / -1;
    padding: .75rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
}

.plan-drop-segment {
    display: grid;
    grid-template-columns: 4rem minmax(6rem, 1fr) auto;
    gap: .5rem;
    align-items: center;

    & + & {
        margin-top: .5rem;
    }
}

.plan-athlete-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .55fr);
    gap: 2rem;
    padding: 2rem;
    border-radius: .5rem;
    color: #fff;
    background: linear-gradient(135deg, #17191c, #3a210f);
}

.plan-athlete-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin: 0;

    div {
        padding: .8rem;
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: .4rem;
        background: rgba(255, 255, 255, .07);
    }

    dt {
        color: rgba(255, 255, 255, .68);
        font-size: .7rem;
        text-transform: uppercase;
    }

    dd {
        margin: .2rem 0 0;
        font-weight: 700;
    }
}

.my-plan {
    --my-plan-card-bg: #1b1e22;
    --my-plan-card-border: rgba(255, 255, 255, .08);
    --my-plan-muted: #a9afb7;
    --my-plan-soft: rgba(178, 238, 55, .12);
    --my-plan-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .24);
    max-width: 64rem;
    margin: 0 auto 2.5rem;
}

.my-plan__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1rem;

    h1 {
        margin: .25rem 0 .35rem;
        font-size: clamp(2rem, 4vw, 3.5rem);
        font-weight: 800;
        letter-spacing: -.045em;
    }

    p {
        max-width: 42rem;
        margin: 0;
        color: var(--my-plan-muted);
        font-size: 1.05rem;
    }
}

.my-plan__eyebrow {
    color: var(--francoach-yellow);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.my-plan__meta {
    display: grid;
   /*  width: min(100%, 22rem); */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;

    span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        padding: .65rem .85rem;
        border: 1px solid var(--my-plan-card-border);
        border-radius: 999px;
        color: var(--my-plan-muted);
        background: rgba(255, 255, 255, .04);
        font-size: .82rem;
        font-weight: 650;
        white-space: nowrap;
    }

    i {
        color: var(--francoach-yellow);
    }
}

.my-plan__attention {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.my-plan-workouts {
    margin-top: 1rem;
}

.my-plan-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.25rem;
}

.my-plan-tabs__button {
    display: inline-flex;
    min-height: 5rem;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    border: 2px solid rgba(178, 238, 55, .7);
    border-radius: 1.5rem;
    color: var(--francoach-yellow);
    background: transparent;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 800;
    transition: transform var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard);

    span {
        display: grid;
        min-width: 2rem;
        height: 2rem;
        padding: 0 .45rem;
        place-items: center;
        border-radius: 999px;
        background: rgba(178, 238, 55, .12);
        font-size: .78rem;
    }

    &:hover,
    &:focus-visible {
        border-color: var(--francoach-yellow);
        transform: translateY(-1px);
    }

    &:focus-visible {
        outline: 3px solid rgba(178, 238, 55, .35);
        outline-offset: 3px;
    }

    &.active {
        border-color: var(--francoach-yellow);
        color: #0f1012;
        background: var(--francoach-yellow);
        box-shadow: var(--shadow-glow-primary), var(--shadow-2);

        span {
            background: rgba(15, 16, 18, .12);
        }
    }
}

.my-plan-workout-list {
    display: grid;
    gap: 1.5rem;
}

.my-plan-workout-card {
    padding: 1.75rem;
    border: 1px solid var(--my-plan-card-border);
    border-radius: 1.75rem;
    background: var(--my-plan-card-bg);
    box-shadow: var(--my-plan-shadow);
}

.my-plan-workout-card__topline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: center;
}

.my-plan-workout-card__day {
    padding: .7rem 1rem;
    border-radius: 999px;
    color: var(--francoach-yellow);
    background: var(--my-plan-soft);
    font-size: .9rem;
    font-weight: 800;
    text-transform: uppercase;
}

.my-plan-workout-card__date {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: .35rem .6rem;
    align-items: center;
    color: var(--francoach-yellow);
    font-size: 1.05rem;
    text-transform: capitalize;

    i {
        grid-row: 1 / 3;
        font-size: 1.35rem;
    }

    small {
        grid-column: 2 / 4;
        color: var(--my-plan-muted);
        font-size: .9rem;
    }
}

.my-plan-workout-card__status {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    color: var(--francoach-yellow);
    background: transparent;
    font-size: 2rem;
}

.my-plan-workout-card--done .my-plan-workout-card__status {
    /* background: var(--francoach-green); */
}

.my-plan-workout-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: end;
    margin-top: 2rem;

    h3 {
        margin: 0 0 .65rem;
        font-size: clamp(1.45rem, 3vw, 2.15rem);
        font-weight: 800;
        letter-spacing: -.035em;
    }

    p {
        display: flex;
        align-items: center;
        gap: .6rem;
        margin: 0;
        color: var(--my-plan-muted);
        font-size: 1.05rem;
    }

    p i {
        color: var(--francoach-yellow);
        font-size: 1.25rem;
    }
}

.my-plan-workout-card__open {
    display: grid;
    width: 5rem;
    height: 5rem;
    place-items: center;
    border-radius: 1.35rem;
    color: #0f1012 !important;
    background: var(--francoach-yellow);
    /* box-shadow: var(--shadow-glow-primary), var(--shadow-2); */
    font-size: 2.15rem;
    transition: transform var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);

    &:hover,
    &:focus-visible {
        color: #0f1012 !important;
        transform: translateX(3px);
        box-shadow: var(--shadow-glow-primary), var(--shadow-3);
    }

    &:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }
}

.my-plan-structure {
    max-width: 64rem;
    margin: 0 auto 2.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .025);

    > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.15rem 1.35rem;
        color: var(--bs-body-color);
        cursor: pointer;
        font-weight: 750;
        list-style: none;
    }

    > summary::-webkit-details-marker {
        display: none;
    }

    > summary span {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
    }

    > summary span i {
        color: var(--francoach-yellow);
    }

    &[open] > summary > i {
        transform: rotate(180deg);
    }
}

.my-plan-structure__content {
    padding: 0 1.35rem 1.35rem;
}

.plan-day {
    padding: 1rem;
    border-radius: .4rem;
    background: transparent;
}

.plan-exercise-athlete {
    padding: 1rem;
    border-radius: .4rem;
    background: var(--bs-tertiary-bg);
}

.athletes-table {
    min-width: 64rem;

    th:last-child,
    td:last-child {
        width: 1%;
        min-width: 7.5rem;
        white-space: nowrap;
    }

    .dropdown-menu {
        z-index: 1080;
    }
}

@media (min-width: 992px) {
    .athletes-table-responsive {
        overflow: visible;
    }

    .athletes-table {
        min-width: 0;
    }
}

@media (max-width: 991.98px) {
    .athletes-table-responsive {
        min-height: 18rem;
    }

    .plan-set-row {
        grid-template-columns: 2rem repeat(4, minmax(4.2rem, 1fr));

        .plan-editor-actions {
            grid-column: 2 / -1;
        }
    }

    .plan-athlete-header {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .plan-editor-week > .card-header {
        flex-direction: column;
    }

    .plan-editor-accordion-header {
        grid-template-columns: minmax(0, 1fr);

        > .plan-editor-actions {
            justify-content: flex-end;
            padding: 0 .75rem .75rem;
        }
    }

    .plan-set-row {
        grid-template-columns: 2rem repeat(2, minmax(0, 1fr));
    }

    .plan-drop-segment {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;

        span {
            grid-column: 1 / -1;
        }
    }

    .plan-athlete-header {
        padding: 1.25rem;
    }

    .plan-athlete-meta {
        grid-template-columns: 1fr;
    }

    .my-plan__header {
        display: block;
        margin-bottom: 1rem;

        h1 {
            font-size: 2rem;
        }
    }

    .my-plan__meta {
        justify-content: space-between;
        margin-top: 1rem;
    }

    .my-plan__attention {
        justify-content: stretch;

        .btn {
            width: 100%;
        }
    }

    .my-plan-tabs {
        gap: .65rem;
        margin-bottom: 1.25rem;
    }

    .my-plan-tabs__button {
        min-height: 3.75rem;
        border-radius: 1.15rem;
        font-size: 1.05rem;

        span {
            min-width: 1.65rem;
            height: 1.65rem;
            font-size: .7rem;
        }
    }

    .my-plan-workout-list {
        gap: 1rem;
    }

    .my-plan-workout-card {
        padding: 1.15rem;
        border-radius: 1.35rem;
    }

    .my-plan-workout-card__topline {
        grid-template-columns: auto 1fr auto;
        gap: .75rem;
    }

    .my-plan-workout-card__day {
        padding: .55rem .7rem;
        font-size: .72rem;
    }

    .my-plan-workout-card__date {
        gap: .15rem .4rem;
        font-size: .9rem;

        i {
            font-size: 1rem;
        }

        small {
            font-size: .75rem;
        }
    }

    .my-plan-workout-card__status {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 2rem;
    }

    .my-plan-workout-card__body {
        margin-top: 1.5rem;

        h3 {
            font-size: 1.35rem;
        }

        p {
            font-size: .9rem;
        }
    }

    .my-plan-workout-card__open {
        width: 3rem;
        height: 3rem;
        border-radius: .75rem;
        font-size: 1.65rem;
    }
}

.theme-settings {
    overflow: hidden;
}

.theme-settings > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.theme-settings__eyebrow {
    display: block;
    margin-bottom: .2rem;
    color: var(--francoach-yellow);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.theme-settings__status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    border: 1px solid rgba(178, 238, 55, .28);
    border-radius: 999px;
    color: var(--francoach-yellow);
    background: rgba(178, 238, 55, .08);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.theme-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.theme-option {
    position: relative;
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    min-height: 6.5rem;
    padding: .85rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1.25rem;
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
}

.theme-option:hover {
    border-color: rgba(178, 238, 55, .38);
    transform: translateY(-1px);
}

.theme-option:has(input:checked) {
    border-color: var(--francoach-yellow);
    box-shadow: 0 0 0 3px rgba(178, 238, 55, .16);
}

.theme-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.theme-option:has(input:focus-visible) {
    outline: 3px solid var(--francoach-yellow);
    outline-offset: 2px;
}

.theme-option__preview {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    grid-template-rows: .7rem 1fr;
    gap: .35rem;
    width: 5rem;
    height: 4.5rem;
    padding: .55rem;
    border-radius: .8rem;
    box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .15);
}

.theme-option__preview span {
    display: block;
    border-radius: .25rem;
}

.theme-option__preview span:first-child {
    grid-row: 1 / -1;
}

.theme-option__preview span:nth-child(2) {
    border-radius: 999px;
}

.theme-option__preview--dark {
    background: #0f1012;
}

.theme-option__preview--dark span:first-child {
    background: #23262b;
}

.theme-option__preview--dark span:nth-child(2) {
    background: #b2ee37;
}

.theme-option__preview--dark span:nth-child(3) {
    background: #1b1e22;
}

.theme-option__preview--light {
    border: 1px solid #e1e7de;
    background: #f4f7f2;
}

.theme-option__preview--light span:first-child {
    background: #fff;
}

.theme-option__preview--light span:nth-child(2) {
    background: #8fc72b;
}

.theme-option__preview--light span:nth-child(3) {
    background: #fff;
}

.theme-option__copy {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.theme-option__copy strong {
    font-size: .85rem;
    letter-spacing: .04em;
}

.theme-option__copy small {
    color: var(--francoach-gray-300);
    font-size: .72rem;
    line-height: 1.35;
}

.theme-option__check {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: transparent;
}

.theme-option:has(input:checked) .theme-option__check {
    border-color: var(--francoach-yellow);
    color: #0f1012;
    background: var(--francoach-yellow);
}

@media (max-width: 767.98px) {
    .theme-picker {
        grid-template-columns: 1fr;
    }
}

[data-bs-theme="light"] {
    color-scheme: light;
    --bs-body-color: #18201a;
    --bs-body-color-rgb: 24, 32, 26;
    --bs-body-bg: #f4f7f2;
    --bs-body-bg-rgb: 244, 247, 242;
    --bs-emphasis-color: #111713;
    --bs-emphasis-color-rgb: 17, 23, 19;
    --bs-secondary-color: rgba(24, 32, 26, .68);
    --bs-secondary-color-rgb: 24, 32, 26;
    --bs-secondary-bg: #e7ece4;
    --bs-secondary-bg-rgb: 231, 236, 228;
    --bs-tertiary-color: rgba(24, 32, 26, .52);
    --bs-tertiary-bg: #eef2eb;
    --bs-tertiary-bg-rgb: 238, 242, 235;
    --bs-border-color: #dce3d9;
    --bs-border-color-translucent: rgba(24, 32, 26, .12);
    --bs-link-color: #18201a;
    --bs-link-color-rgb: 24, 32, 26;
    --bs-link-hover-color: #18201a;
    --bs-link-hover-color-rgb: 24, 32, 26;
    --francoach-gray-300: #667168;
    --surface-0: #f4f7f2;
    --surface-1: #ffffff;
    --surface-2: #edf2ea;
    --surface-sunken: #e6ece3;
    --shadow-1: 0 2px 10px rgba(25, 42, 28, .07);
    --shadow-2: 0 10px 30px -12px rgba(25, 42, 28, .18);
    --shadow-3: 0 22px 48px -18px rgba(25, 42, 28, .24);
    --shadow-inset: inset 0 1px 2px rgba(25, 42, 28, .08);
    --shadow-glow-primary: 0 0 0 1px rgba(126, 174, 34, .28), 0 10px 24px -14px rgba(112, 157, 27, .45);
    --shadow-glow-green: 0 10px 24px -14px rgba(37, 145, 61, .35);
}

[data-bs-theme="light"] body {
    color: var(--bs-body-color);
}

[data-bs-theme="light"] a:not(.btn),
[data-bs-theme="light"] a:not(.btn):hover,
[data-bs-theme="light"] a:not(.btn):focus {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="light"] .text-primary,
[data-bs-theme="light"] .link-primary,
[data-bs-theme="light"] .theme-settings__eyebrow,
[data-bs-theme="light"] .theme-settings__status,
[data-bs-theme="light"] .feature-card__eyebrow,
[data-bs-theme="light"] .dashboard-card__eyebrow,
[data-bs-theme="light"] .athlete-hero__eyebrow,
[data-bs-theme="light"] .feature-card__link,
[data-bs-theme="light"] .app-breadcrumb .active {
    color: #557a10 !important;
}

[data-bs-theme="light"] .link-primary:hover,
[data-bs-theme="light"] .app-breadcrumb a:hover,
[data-bs-theme="light"] .feature-card__link:hover {
    color: #2f4707 !important;
}

[data-bs-theme="light"] .card,
[data-bs-theme="light"] .card-francoach {
    border-color: rgba(25, 42, 28, .08) !important;
}

[data-bs-theme="light"] .my-plan {
    --my-plan-card-bg: #fff;
    --my-plan-card-border: rgba(25, 42, 28, .1);
    --my-plan-muted: #667168;
    --my-plan-soft: rgba(85, 122, 16, .1);
    --my-plan-shadow: 0 1rem 2.75rem rgba(26, 43, 30, .1);
}

[data-bs-theme="light"] .my-plan__meta span {
    background: rgba(85, 122, 16, .06);
}

[data-bs-theme="light"] .my-plan__eyebrow,
[data-bs-theme="light"] .my-plan__meta i,
[data-bs-theme="light"] .my-plan-workout-card__day,
[data-bs-theme="light"] .my-plan-workout-card__date,
[data-bs-theme="light"] .my-plan-workout-card__body p i {
    color: #3f5e09;
}

[data-bs-theme="light"] .my-plan-tabs__button {
    color: #3f5e09;
    border-color: #557a10;

    &.active {
        color: #111713;
        border-color: var(--francoach-yellow-dark);
        background: var(--francoach-yellow);
    }
}

[data-bs-theme="light"] .my-plan-structure {
    border-color: rgba(25, 42, 28, .1);
    background: #fff;
    box-shadow: 0 .75rem 2rem rgba(26, 43, 30, .07);
}

[data-bs-theme="light"] .scheduled-session {
    --scheduled-session-card: #fff;
    --scheduled-session-border: rgba(25, 42, 28, .1);
    --scheduled-session-muted: #667168;
    --scheduled-session-soft: rgba(85, 122, 16, .1);
}

[data-bs-theme="light"] .scheduled-session__eyebrow,
[data-bs-theme="light"] .scheduled-session__section-kicker,
[data-bs-theme="light"] .scheduled-session__progress i,
[data-bs-theme="light"] .scheduled-session-exercise__prescription i,
[data-bs-theme="light"] .scheduled-session-exercise__block,
[data-bs-theme="light"] .scheduled-session-exercise__technique {
    color: #3f5e09;
}

[data-bs-theme="light"] .scheduled-session__coach-note {
    border-color: rgba(85, 122, 16, .2);
    background: rgba(85, 122, 16, .06);
}

[data-bs-theme="light"] .scheduled-session__coach-note > i {
    color: #3f5e09;
}

[data-bs-theme="light"] .scheduled-session-exercise__media {
    color: #3f5e09;
}

[data-bs-theme="light"] .card-header,
[data-bs-theme="light"] .card-footer,
[data-bs-theme="light"] .modal-header,
[data-bs-theme="light"] .modal-footer {
    border-color: rgba(25, 42, 28, .09);
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
    color: var(--bs-body-color);
    border-color: #d8e0d5;
    background-color: #fff;
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    color: var(--bs-body-color);
    background-color: #fff;
}

[data-bs-theme="light"] .form-control::placeholder,
[data-bs-theme="light"] .form-select:invalid {
    color: #7b857d;
}

[data-bs-theme="light"] .input-group-text {
    color: #536057;
    border-color: #d8e0d5;
    background-color: #eef2eb;
}

[data-bs-theme="light"] .btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #222a24;
    --bs-btn-border-color: #222a24;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #111713;
    --bs-btn-hover-border-color: #111713;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #111713;
    --bs-btn-active-border-color: #111713;
}

[data-bs-theme="light"] .btn-secondary {
    --bs-btn-color: #243027;
    --bs-btn-bg: #e7ece4;
    --bs-btn-border-color: #d5ddd2;
    --bs-btn-hover-color: #111713;
    --bs-btn-hover-bg: #dce5d8;
    --bs-btn-hover-border-color: #cbd6c7;
    --bs-btn-active-color: #111713;
    --bs-btn-active-bg: #d2ddce;
    --bs-btn-active-border-color: #c4d0c0;
}

[data-bs-theme="light"] .btn-outline-secondary {
    --bs-btn-color: #465249;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #aeb9ab;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #344139;
    --bs-btn-hover-border-color: #344139;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #27322b;
    --bs-btn-active-border-color: #27322b;
}

[data-bs-theme="light"] .btn-outline-primary {
    --bs-btn-color: #3f5f08;
    --bs-btn-bg: rgba(85, 122, 16, .04);
    --bs-btn-border-color: #648b1c;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #b2ee37;
    --bs-btn-hover-border-color: #b2ee37;
    --bs-btn-focus-shadow-rgb: 85, 122, 16;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #b2ee37;
    --bs-btn-active-border-color: #b2ee37;
    --bs-btn-disabled-color: #71805f;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #aab59f;
}

[data-bs-theme="light"] .btn-glass {
    --bs-btn-color: #27322b;
    --bs-btn-bg: rgba(25, 42, 28, .05);
    --bs-btn-border-color: rgba(25, 42, 28, .12);
    --bs-btn-hover-color: #111713;
    --bs-btn-hover-bg: rgba(25, 42, 28, .1);
    --bs-btn-hover-border-color: rgba(25, 42, 28, .18);
}

[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .toast {
    color: var(--bs-body-color);
    border-color: rgba(25, 42, 28, .1);
}

[data-bs-theme="light"] .btn-close {
    filter: none;
}

[data-bs-theme="light"] .dropdown-menu {
    --bs-dropdown-link-color: #27322b;
    --bs-dropdown-link-hover-color: #111713;
    --bs-dropdown-link-hover-bg: #e8eee5;
    --bs-dropdown-divider-bg: rgba(25, 42, 28, .1);
    border-color: rgba(25, 42, 28, .1);
}

[data-bs-theme="light"] .icon-badge,
[data-bs-theme="light"] .dashboard-stat__icon,
[data-bs-theme="light"] .dashboard-card__icon,
[data-bs-theme="light"] .workout-result__icon,
[data-bs-theme="light"] .empty-state__icon {
    color: #648d16;
}

[data-bs-theme="light"] .app-sidebar {
    color: #18201a;
    border-color: rgba(25, 42, 28, .08);
    background-image: radial-gradient(circle at 15% 0%, rgba(178, 238, 55, .16), transparent 45%);
}

[data-bs-theme="light"] .app-sidebar__brand,
[data-bs-theme="light"] .app-sidebar__footer {
    border-color: rgba(25, 42, 28, .09);
}

[data-bs-theme="light"] .app-sidebar__link {
    color: #606c63;
}

[data-bs-theme="light"] .app-sidebar__link:hover {
    color: #18201a;
    background-color: rgba(25, 42, 28, .06);
}

[data-bs-theme="light"] .app-sidebar__link.active {
    color: #0f140f;
    background-color: var(--francoach-yellow);
}

[data-bs-theme="light"] .app-sidebar__link.disabled:hover {
    color: #606c63;
    background-color: transparent;
}

[data-bs-theme="light"] .app-sidebar__logout-btn {
    color: #5f6c62;
    background-color: rgba(25, 42, 28, .07);
}

[data-bs-theme="light"] .app-topbar {
    color: #18201a;
    border-bottom: 1px solid rgba(25, 42, 28, .07);
    background-color: rgba(255, 255, 255, .84);
}

[data-bs-theme="light"] .app-topbar__brand {
    color: #18201a;
}

[data-bs-theme="light"] .app-topbar__icon-btn {
    color: #27322b;
    background-color: rgba(25, 42, 28, .07);
}

[data-bs-theme="light"] .app-topbar__icon-btn:hover {
    background-color: rgba(25, 42, 28, .12);
}

@media (min-width: 992px) {
    [data-bs-theme="light"] .app-topbar {
        border-bottom: 0;
        background-color: transparent;
    }
}

[data-bs-theme="light"] .app-bottom-nav {
    border-color: rgba(25, 42, 28, .1);
    background-color: rgba(255, 255, 255, .9);
}

[data-bs-theme="light"] .app-bottom-nav__link {
    color: #657168;
}

[data-bs-theme="light"] .app-bottom-nav__link.active {
    color: #0f140f;
}

[data-bs-theme="light"] .app-footer a {
    color: #465249;
}

[data-bs-theme="light"] .table,
[data-bs-theme="light"] .table > :not(caption) > * > * {
    color: var(--bs-body-color);
}

[data-bs-theme="light"] .table > :not(:last-child) > :last-child > * {
    border-bottom-color: rgba(25, 42, 28, .1);
}

[data-bs-theme="light"] .dashboard-heading h1,
[data-bs-theme="light"] .athlete-summary__copy h2,
[data-bs-theme="light"] .athlete-summary__meta dd,
[data-bs-theme="light"] .dashboard-stat__value,
[data-bs-theme="light"] .feature-card h2,
[data-bs-theme="light"] .dashboard-card__header h2,
[data-bs-theme="light"] .weight-summary > strong,
[data-bs-theme="light"] .message-preview strong,
[data-bs-theme="light"] .notification-preview strong,
[data-bs-theme="light"] .empty-state__title {
    color: #18201a;
}

[data-bs-theme="light"] .athlete-summary__meta,
[data-bs-theme="light"] .message-preview,
[data-bs-theme="light"] .notification-preview,
[data-bs-theme="light"] .notification-menu,
[data-bs-theme="light"] .notification-menu__item {
    border-color: rgba(25, 42, 28, .09);
}

[data-bs-theme="light"] .feature-card--dark {
    color: #18201a;
    background-color: var(--surface-1);
    background-image: radial-gradient(circle at 100% 0, rgba(88, 246, 112, .16), transparent 55%);
}

[data-bs-theme="light"] .feature-card--dark p,
[data-bs-theme="light"] .message-preview p,
[data-bs-theme="light"] .notification-preview p {
    color: #667168;
}

[data-bs-theme="light"] .quick-action {
    color: #27322b;
    border-color: rgba(25, 42, 28, .09);
}

[data-bs-theme="light"] .quick-action:not(:disabled):hover {
    color: #111713;
}

[data-bs-theme="light"] .notification-menu__item:hover {
    background-color: rgba(25, 42, 28, .04);
}

[data-bs-theme="light"] .notification-menu__item strong,
[data-bs-theme="light"] .notification-menu__item span {
    color: #27322b;
}

[data-bs-theme="light"] .mobile-menu {
    color: #18201a;
    border-color: rgba(25, 42, 28, .1);
}

[data-bs-theme="light"] .mobile-menu .offcanvas-header {
    border-color: rgba(25, 42, 28, .1);
}

[data-bs-theme="light"] .mobile-menu .btn-close {
    filter: none;
}

[data-bs-theme="light"] .mobile-menu__link {
    color: #465249;
}

[data-bs-theme="light"] .mobile-menu__link:hover {
    color: #18201a;
    background-color: rgba(25, 42, 28, .06);
}

[data-bs-theme="light"] .athlete-hero {
    color: #18201a;
    border: 1px solid rgba(25, 42, 28, .08);
    background:
        radial-gradient(circle at 85% 30%, rgba(178, 238, 55, .25), transparent 34%),
        linear-gradient(120deg, #fff 0%, #edf2ea 100%);
}

[data-bs-theme="light"] .athlete-hero__content p,
[data-bs-theme="light"] .last-message p {
    color: #667168;
}

[data-bs-theme="light"] .athlete-hero .btn-outline-light {
    --bs-btn-color: #27322b;
    --bs-btn-border-color: #8d998f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #27322b;
    --bs-btn-hover-border-color: #27322b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #111713;
    --bs-btn-active-border-color: #111713;
}

[data-bs-theme="light"] .next-workout strong {
    color: #18201a;
}

[data-bs-theme="light"] .record-row {
    border-color: rgba(25, 42, 28, .09);
}

[data-bs-theme="light"] .record-row:hover {
    background-color: rgba(25, 42, 28, .04);
}

[data-bs-theme="light"] .last-message {
    border-left-color: #7daa24;
}

[data-bs-theme="light"] .theme-option {
    border-color: rgba(25, 42, 28, .1);
}

[data-bs-theme="light"] .theme-settings__status {
    color: #557a10;
    border-color: rgba(85, 122, 16, .22);
    background: rgba(143, 199, 43, .1);
}

[data-bs-theme="light"] .theme-option__check {
    border-color: rgba(25, 42, 28, .18);
}

[data-bs-theme="light"] .profile-section,
[data-bs-theme="light"] .profile-identity,
[data-bs-theme="light"] .readonly-card-list article {
    color: #18201a;
}

[data-bs-theme="light"] .profile-identity dl {
    border-color: rgba(25, 42, 28, .1);
}

@media (min-width: 768px) {
    [data-bs-theme="light"] .profile-identity dl {
        border-left-color: rgba(25, 42, 28, .1);
    }
}

[data-bs-theme="light"] .equipment-picker label span {
    color: #27322b;
    border-color: rgba(25, 42, 28, .18);
}

[data-bs-theme="light"] .session-set,
[data-bs-theme="light"] .assignment-schedule-row,
[data-bs-theme="light"] .calendar-grid,
[data-bs-theme="light"] .session-timer {
    border-color: #dce3d9;
}

[data-bs-theme="light"] .session-exercise {
    --session-card-bg: #fff;
    --session-card-border: rgba(25, 42, 28, .1);
    --session-muted: #667168;
    --session-soft: rgba(85, 122, 16, .08);
}

[data-bs-theme="light"] .session-exercise__eyebrow,
[data-bs-theme="light"] .session-exercise__section-heading > span,
[data-bs-theme="light"] .session-exercise__technique {
    color: #3f5e09;
}

[data-bs-theme="light"] .session-set.is-completed {
    border-color: #9ed0b4;
    background: #f2fbf6;
}

[data-bs-theme="light"] .plan-editor-day,
[data-bs-theme="light"] .plan-drop-segments,
[data-bs-theme="light"] .session-set__drop {
    border-color: rgba(25, 42, 28, .12);
}

[data-bs-theme="light"] .plan-editor-exercise,
[data-bs-theme="light"] .plan-exercise-athlete {
    color: #18201a;
    border-color: #dfe3e7;
    background: #fff;
}

.table > :not(caption) > * > * {
    padding: 1rem;
}