/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
/* Stessa ridefinizione chiara di .main (vedi MainLayout.razor.css): le pagine di ingresso
   (login, registrazione, 2FA, errori di accesso) non passano da MainLayout/.main, quindi
   senza questo blocco restavano sui token scuri di :root in app.css (pensati per la
   sidebar) — il form di login/registrazione risultava scuro invece di chiaro come il resto
   dell'app. */
.auth-shell[b-ydz2t4t1we] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color-scheme: light;
    --bg: #FBF8F6;
    --surface: #FFFFFF;
    --surface-2: #F3ECE8;
    --surface-3: #EAE1DB;
    --ink: #241A16;
    --ink-muted: #85726A;
    --ink-faint: #AE9C93;
    --border: #E5DBD4;
    --border-strong: #D3C4BB;
    background: var(--bg);
    color: var(--ink);
}

.auth-shell-inner[b-ydz2t4t1we] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.shell[b-w9pnqafs7x] {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

/* Contenuto pagine chiaro, menu scuro: i token di superficie/testo di :root (app.css) sono
   ormai pensati per la sidebar (sfondo scuro); qui li ridefiniamo localmente per l'area
   contenuto, che vale per OGNI pagina (tutte passano da questo stesso .main). La sidebar,
   fuori da .main, non eredita questa ridefinizione e resta sui valori scuri di :root. */
.main[b-w9pnqafs7x] {
    flex: 1 1 auto;
    min-width: 0;
    /* Bug: senza questa riga i controlli nativi non stilizzabili via CSS (le frecce su/giù di
       input[type=number], l'icona del calendario di input[type=date]...) restavano scuri perché
       ereditavano "color-scheme: dark" da :root (pensato per la sidebar/gli scrollbar, vedi
       app.css) — sull'area contenuto ormai chiara risultavano riquadri neri fuori posto (es.
       accanto al campo "Pasti giornalieri" nel form atleta). color-scheme è una proprietà
       ereditata: ridefinirla qui basta a corregerla per OGNI input di ogni pagina, la sidebar
       fuori da .main non la eredita e resta scura. */
    color-scheme: light;
    --bg: #FBF8F6;
    --surface: #FFFFFF;
    --surface-2: #F3ECE8;
    --surface-3: #EAE1DB;
    --ink: #241A16;
    --ink-muted: #85726A;
    --ink-faint: #AE9C93;
    --border: #E5DBD4;
    --border-strong: #D3C4BB;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
}

/* Prima era fissa a 1180px indipendentemente dalla finestra: su schermi grandi (fino a
   monitor da ~31") restava sempre della stessa dimensione con un enorme vuoto a destra. Ora
   1180px resta il minimo (comportamento identico a prima su laptop/schermi normali), ma sopra
   una certa larghezza cresce fluidamente insieme alla finestra fino a un tetto oltre il quale
   le righe di testo diventerebbero scomode da leggere; da lì in su resta centrata nello spazio
   a destra della sidebar invece che ancorata a sinistra. */
.content[b-w9pnqafs7x] {
    max-width: clamp(1180px, 78vw, 2300px);
    margin: 0 auto;
    padding: 0 clamp(24px, 2.5vw, 56px) 80px;
}

/* Il builder dei piani alimentari (Pages/DietPlanBuilder.razor) impacchetta più campi sulla
   stessa riga (categoria + alimento + quantità + sostituzioni, vedi .diet-item-fields in
   app.css) di qualunque altra pagina dell'app: sui monitor grandi il margine laterale standard
   qui sopra lasciava troppo vuoto ai lati rispetto a quanto servirebbe. Leggermente più largo
   solo quando la pagina marca se stessa con .diet-builder-page, le altre pagine restano
   invariate. */
.content:has(.diet-builder-page)[b-w9pnqafs7x] {
    max-width: clamp(1180px, 84vw, 2400px);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Stessa logica dell'adattamento fluido di .content (vedi MainLayout.razor.css): 236px resta
   il minimo (identico a prima su laptop/schermi normali), poi cresce con la finestra fino a
   un tetto oltre il quale il menu diventerebbe sproporzionato rispetto al contenuto. */
.sidebar[b-drmfgghvvz] {
    width: clamp(236px, 12vw, 300px);
    flex: 0 0 clamp(236px, 12vw, 300px);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 20px 16px;
    border-right: 1px solid var(--border);
    background: var(--bg);
}

/* Contenitore posizionante per il dropdown Profilo/Sezioni/Impostazioni, aperto dal nome
   del professionista (vedi NavMenu.razor). */
.brand-wrap[b-drmfgghvvz] {
    position: relative;
}

/* Il "titolo" dell'app: prima era un <div> statico con il brand, ora è un bottone che
   mostra il nome del professionista collegato e apre il menu Profilo/Sezioni/Impostazioni. */
.brand[b-drmfgghvvz] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 4px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.brand:hover[b-drmfgghvvz] {
    background: var(--surface-2);
}

/* Quando è il logo caricato dal trainer (Profilo) al posto delle tre barre di default,
   .brand-mark è un <img>: object-fit/border-radius non hanno effetto sull'svg di default,
   quindi restano qui senza bisogno di una regola separata. */
.brand-mark[b-drmfgghvvz] {
    width: 26px;
    height: 26px;
    flex: none;
    object-fit: contain;
    border-radius: 4px;
}

.brand-name[b-drmfgghvvz] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: .3px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-chev[b-drmfgghvvz] {
    display: flex;
    flex: none;
}

/* Overlay trasparente per chiudere il menu cliccando fuori (stesso principio del
   .modal-backdrop in app.css, ma invisibile). */
.brand-menu-overlay[b-drmfgghvvz] {
    position: fixed;
    inset: 0;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 40;
    cursor: default;
}

.brand-menu[b-drmfgghvvz] {
    position: absolute;
    top: calc(100% + 6px);
    left: 4px;
    right: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 41;
}

.brand-menu-item[b-drmfgghvvz] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
}

.brand-menu-item:hover[b-drmfgghvvz] {
    background: var(--surface-2);
    color: var(--ink);
}

.sidenav[b-drmfgghvvz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* flex-grow + min-height:0 + scroll: senza questo il <nav> restava alto solo quanto il suo
       contenuto (Operativo/Integrazioni/Configurazione in fila), lasciando a .sidebar-foot (vedi
       sotto, margin-top:auto) tutto lo spazio vuoto residuo della sidebar — .sidenav-section-bottom
       qui sotto non aveva quindi spazio libero DENTRO il nav su cui applicare il proprio
       margin-top:auto per ancorarsi in fondo. Così invece è il <nav> stesso a riempire lo spazio
       tra il titolo app e il footer Esci, e min-height:0+overflow-y:auto evitano che un elenco
       molto lungo (tante voci sbloccate) spinga il footer fuori dallo schermo invece di scrollare. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Gruppo Configurazione (vedi NavMenu.razor): ancorato in fondo al <nav> qui sopra invece di
   restare semplicemente l'ultimo gruppo nel flusso — margin-top:auto assorbe tutto lo spazio
   libero residuo del nav, stessa tecnica già usata da .sidebar-foot per il footer Esci.
   column-reverse capovolge l'ordine visivo dei due figli (titolo/.sidenav-section-label e
   corpo/.sidenav-section-body, nello stesso ordine DOM di sempre): il corpo, quando aperto,
   compare SOPRA al titolo invece che sotto, "aprendosi verso l'alto" — necessario perché il
   titolo è ancorato in fondo alla sidebar: aprendosi verso il basso come ogni altro gruppo, il
   contenuto finirebbe oltre il bordo inferiore visibile invece che espandersi dentro lo spazio
   libero sopra. */
.sidenav-section-bottom[b-drmfgghvvz] {
    margin-top: auto;
    flex-direction: column-reverse;
}

/* Ogni gruppo del menù (Operativo/Persone/Allenamento/Integrazioni...): solo un contenitore di
   spaziatura, niente riquadro proprio — il bordo sottile (vedi .sidenav-section-label sotto)
   resta solo sul titolo, stesso sfondo della sidebar sia sul titolo che sulle voci. Aprendo il
   titolo le voci (.sidenav-section-body) compaiono libere, senza un secondo riquadro che le
   "chiuda dentro". */
.sidenav-section[b-drmfgghvvz] {
    margin: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Titolo di gruppo: era un <div> statico, ora è un bottone richiudibile (vedi NavMenu.razor/
   ToggleGroup) — il menu si apre sempre con questi tutti chiusi (_openGroups parte vuoto), così
   si apre un titolo alla volta solo quando serve. Niente più sfondo né bordo propri (prima
   var(--surface-2) + bordo, si notava come un riquadro diverso dal resto del menu): stesso
   sfondo della sidebar attorno, "come se non ci fosse" — resta solo il testo in maiuscolo e la
   freccia a segnare che è un bottone, più lo stato hover sotto. */
.sidenav-section-label[b-drmfgghvvz] {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    text-align: left;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 9px 10px;
}

.sidenav-section-label:hover[b-drmfgghvvz] {
    color: var(--ink);
    border-color: var(--border-strong);
}

.sidenav-section-label-text[b-drmfgghvvz] {
    flex: 1 1 auto;
}

.sidenav-section-chev[b-drmfgghvvz] {
    display: flex;
    flex: none;
    color: var(--ink-faint);
}

/* Corpo del gruppo, presente solo a titolo aperto — niente più bordo/sfondo propri: le voci
   fluttuano libere sotto il titolo (vedi commento su .sidenav-section sopra). gap più largo di
   quello usato dentro ai singoli sottomenu/liste (vedi sotto): qui separa "blocchi" diversi (un
   sottomenu, oppure una voce diretta), che devono restare visivamente più staccati tra loro delle
   voci dentro lo stesso blocco. */
.sidenav-section-body[b-drmfgghvvz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 2px 0;
}

/* Sottomenu dentro un gruppo (es. Allenamento → Programmi/Configurazione): indentati di
   almeno il 5% rispetto al bordo della sidebar per far vedere che stanno "dentro" al gruppo
   padre. Stessa logica del titolo principale qui sopra: il bordo resta solo sulla label,
   niente riquadro che avvolga anche le voci quando aperto. */
.sidenav-subgroup[b-drmfgghvvz] {
    margin-left: 5%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Era un <div>, ora è un <button> richiudibile (vedi NavMenu.razor/ToggleSubgroup): stesso
   aspetto di prima, con in più cursor/font/text-align da resettare perché un <button> non li
   eredita come un <div>. Stesso sfondo/bordo-nessuno di .sidenav-section-label sopra, solo un
   filo più piccola. */
.sidenav-subgroup-label[b-drmfgghvvz] {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    text-align: left;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 6px 9px;
}

.sidenav-subgroup-label:hover[b-drmfgghvvz] {
    color: var(--ink);
    border-color: var(--border-strong);
}

.sidenav-subgroup-label-text[b-drmfgghvvz] {
    flex: 1 1 auto;
}

.sidenav-subgroup-chev[b-drmfgghvvz] {
    display: flex;
    flex: none;
    color: var(--ink-faint);
}

/* Corpo del sottomenu (le voci), presente solo a sottomenu aperto — niente più bordo/sfondo
   propri, stessa idea di .sidenav-section-body sopra. */
.sidenav-subgroup-body[b-drmfgghvvz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0 0;
}

/* .navlink è definito in wwwroot/app.css (globale), non qui: NavLink è un componente
   figlio e lo stile "scoped" di questo file non si applica in modo affidabile al suo
   elemento <a> generato internamente. Lo stesso vale per le icone di Icons.cs iniettate
   come MarkupString (vedi .brand-chev/.brand-menu-item svg in app.css). */

.sidebar-foot[b-drmfgghvvz] {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-user[b-drmfgghvvz] {
    font-size: 12.5px;
    color: var(--ink-faint);
    padding: 0 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout-btn[b-drmfgghvvz] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}