html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Il drawer di MudBlazor, nella variante "responsive", si posiziona con
   height:100% relativo a .mud-layout (a sua volta height:100% relativo a
   body/html): senza un'altezza esplicita su html/body, su pagine con poco
   contenuto (es. Admin > Utenti con pochi utenti) l'intero documento si
   riduce all'altezza del contenuto e il menu laterale si accorcia con lui. */

h1, h2, h3, h4, h5, h6, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: 'Poppins', 'Inter', sans-serif;
}

a, .btn-link {
    color: var(--mud-palette-primary);
}

.content-page {
    padding: calc(var(--mud-appbar-height, 64px) + 1.5rem) 1.5rem 2.5rem 1.5rem;
}

@media (max-width: 600px) {
    .content-page {
        padding-left: 1rem;
        padding-right: 1rem;
        /* Più margine del solito: su schermi stretti il footer fisso in basso (vedi
           .app-footer-fixed) può andare a capo su due righe, quindi serve più spazio
           libero sotto perché non copra l'ultimo elemento della pagina. */
        padding-bottom: 4.5rem;
    }
}

/* Evita che il nome società spinga fuori schermo il menu utente/logout su un telefono. */
.appbar-ragione-sociale {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45vw;
}

@media (max-width: 960px) {
    /* Il drawer resta sempre "Persistent" (vedi AppChrome), ma sotto i 960px diventa un
       overlay fissato sopra il contenuto invece di spingerlo lateralmente: senza questa
       regola, su un telefono, il contenuto principale si ritrova con un margine pari alla
       larghezza del drawer e usa solo una frazione dello schermo. Regola CSS pura, quindi
       vale sempre, anche se il rilevamento JS della larghezza (usato solo per decidere lo
       stato iniziale aperto/chiuso) non facesse in tempo prima del primo render. */
    .mud-drawer.mud-drawer-persistent {
        position: fixed !important;
        top: 0;
        bottom: 0;
        z-index: 1300;
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.35);
    }

    /* MudBlazor sposta/restringe anche la AppBar quando il drawer persistent è aperto
       (non solo il contenuto principale): senza questo override la barra in alto restava
       ridotta e spostata a destra, con hamburger e logo che partivano da metà schermo. */
    .mud-appbar {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .mud-main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 961px) {
    /* La classe che MudLayout si assegna per spingere AppBar/contenuto quando il drawer
       è aperto resta congelata al primo render (MudLayout è nella MainLayout statica,
       il drawer nell'isola interattiva di AppChrome: vedi commento in AppChrome.razor),
       quindi non si aggiorna più quando il menu si apre/chiude con l'hamburger. Da qui
       neutralizziamo il meccanismo di MudBlazor e lo sostituiamo con una classe gestita
       via JS (vedi layout.js, impostaMargineMenu), sempre coerente con lo stato reale. */
    .mud-main-content,
    .mud-appbar {
        margin-left: 0 !important;
        width: auto !important;
    }

    .mud-main-content.js-menu-aperto,
    .mud-appbar.js-menu-aperto {
        margin-left: var(--mud-drawer-width-left) !important;
    }

    .mud-appbar.js-menu-aperto {
        width: calc(100% - var(--mud-drawer-width-left)) !important;
    }
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 1.25rem;
}

.login-field label {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #6B6560);
}

.login-input {
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    border-radius: var(--mud-default-borderradius, 8px);
    font-size: 1rem;
    font-family: inherit;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #2E2A27);
}

.login-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary, #B08968);
    box-shadow: 0 0 0 2px rgba(176, 137, 104, 0.15);
}

.login-field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.login-field-checkbox label {
    font-size: 0.9rem;
}

.app-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.6rem 1rem;
    color: var(--mud-palette-text-secondary, #6B6560);
}

.app-footer small {
    font-size: 0.75rem;
}

.app-footer-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mud-palette-surface, #fff);
    border-top: 1px solid var(--mud-palette-lines-default, #E8E2DD);
    /* Deve restare SOTTO il drawer/sidebar (che in MudBlazor usa uno z-index intorno a
       1100-1200): a 1300 il footer finiva sopra il menu laterale, coprendone la parte
       inferiore man mano che si aggiungevano voci (es. "Profili e permessi"). */
    z-index: 100;
    /* Sui telefoni con home indicator (es. iPhone) il footer altrimenti finisce a filo
       col bordo, in parte coperto dalla barra di sistema. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

#blazor-error-ui {
    background: #fbeaea;
    color: #7a1f1f;
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0,0,0,.15);
    display: none;
    left: 0;
    padding: 0.9rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #fbeaea;
    color: #7a1f1f;
    padding: 1rem 1rem 1rem 3.7rem;
    position: relative;
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.agenda-date-picker {
    max-width: 200px;
}

.agenda-scroll {
    overflow-x: auto;
}

.agenda-grid {
    display: flex;
}

.agenda-time-gutter {
    display: flex;
    flex-direction: column;
    flex: 0 0 52px;
}

.agenda-time-label {
    position: relative;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary, #6B6560);
    text-align: right;
    padding-right: 6px;
    transform: translateY(-0.6em);
    box-sizing: border-box;
}

.agenda-day-column-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 100px;
}

.agenda-day-header {
    height: 52px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e6e0da);
    color: var(--mud-palette-text-secondary, #6B6560);
}

.agenda-day-header .agenda-day-nome {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.agenda-day-header .agenda-day-num {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #2E2A27);
}

.agenda-day-header.oggi {
    color: var(--mud-palette-primary);
}

.agenda-day-header.oggi .agenda-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #fff);
}

.agenda-day-column {
    position: relative;
    border-left: 1px solid var(--mud-palette-lines-default, #e6e0da);
    cursor: pointer;
}

.agenda-day-header.chiuso {
    background: rgba(211, 47, 47, 0.08);
    color: var(--mud-palette-error, #d32f2f);
}

.agenda-day-header.chiuso .agenda-day-num {
    color: var(--mud-palette-error, #d32f2f);
}

.agenda-day-column.chiuso {
    background-color: rgba(211, 47, 47, 0.035);
}

.agenda-evento {
    position: absolute;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.72rem;
    line-height: 1.2;
    overflow: hidden;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.agenda-evento:hover {
    filter: brightness(1.08);
    z-index: 5;
}

.agenda-evento-titolo {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-evento-sub {
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-stato-prenotato {
    background: var(--mud-palette-info);
}

.agenda-stato-confermato {
    background: var(--mud-palette-primary);
}

.agenda-stato-completato {
    background: var(--mud-palette-success);
}

.agenda-stato-annullato {
    background: var(--mud-palette-error);
    opacity: 0.65;
}

.agenda-stato-annullato .agenda-evento-titolo,
.agenda-stato-annullato .agenda-evento-sub {
    text-decoration: line-through;
}

.agenda-ora-linea {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px solid #e53935;
    z-index: 4;
    pointer-events: none;
}

.agenda-ora-pallino {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e53935;
    left: -4px;
    top: -4px;
}

/* Riga separatore di categoria nelle MudTable raggruppate (es. catalogo Servizi):
   di default eredita lo sfondo della riga normale e si confonde con le righe dati. */
.mud-table-cell-custom-group {
    background-color: var(--mud-palette-primary-hover, rgba(176, 137, 104, 0.12));
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Card riepilogo della Dashboard, cliccabili per andare nell'area corrispondente. */
.dashboard-card {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Card della Dashboard di un cliente già uscito: attenuata e tinta di verde per distinguerla da quelle ancora da gestire. */
.dashboard-card.dashboard-card-conclusa {
    background-color: rgba(76, 175, 80, 0.12);
    opacity: 0.75;
}

/* Barra di navigazione data in Chiusura cassa, quando il giorno mostrato è già chiuso:
   tinta verde leggera, visibile a colpo d'occhio prima ancora di leggere l'alert sotto. */
.giorno-chiuso {
    background-color: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.35);
}

/* Riga dello scontrino/fattura raggiunta da un link esterno (es. dallo storico
   prestazioni della scheda cliente): la mette in evidenza tra le altre della giornata. */
.riga-evidenziata {
    background-color: rgba(255, 193, 7, 0.25) !important;
}

/* Riga dello storico prestazioni con uno scontrino/fattura collegato: cliccabile per
   andare alla chiusura cassa del giorno. Le righe senza ricevuta restano col cursore normale. */
.riga-cliccabile {
    cursor: pointer;
}

/* Card servizio in Cassa: altezza fissa e nome troncato su due righe, così la griglia
   resta simmetrica anche mescolando nomi di servizio corti e lunghi. */
.servizio-card {
    cursor: pointer;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.servizio-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.servizio-card-nome {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Campi da scrivere in maiuscolo (es. codice fiscale): solo l'aspetto del testo digitato,
   non l'etichetta; il valore salvato è comunque normalizzato in maiuscolo al salvataggio. */
.campo-maiuscolo input {
    text-transform: uppercase;
}

/* Fasce fuori dall'orario di apertura del giorno (prima, pausa, dopo): solo uno sfondo,
   i click passano alla colonna per poter comunque creare un appuntamento */
.agenda-fuori-orario {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.035) 0, rgba(0, 0, 0, 0.035) 6px, transparent 6px, transparent 12px);
}

/* Tabella degli orari settimanali in Dati società */
.orari-settimana {
    border-collapse: collapse;
    width: 100%;
}

.orari-settimana th {
    font-weight: 500;
    font-size: 0.8rem;
    text-align: left;
    color: var(--mud-palette-text-secondary);
    padding: 0 6px 4px;
}

.orari-settimana td {
    padding: 2px 6px;
    vertical-align: middle;
}

.orari-settimana td:not(:first-child) {
    min-width: 120px;
}

.orari-settimana tr.chiuso td:first-child {
    color: var(--mud-palette-error, #d32f2f);
}

/* Testo dell'informativa nella pagina pubblica di firma del consenso (/consenso/{token}) */
.consenso-informativa {
    max-height: 45vh;
    overflow-y: auto;
    font-size: 0.85rem;
    line-height: 1.45;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    border-radius: var(--mud-default-borderradius, 8px);
}

.consenso-informativa p {
    margin: 0 0 0.6rem;
}

/* Elenco clienti: persone fisiche che non hanno ancora firmato il consenso privacy */
.riga-senza-consenso > td {
    background-color: rgba(237, 108, 2, 0.06);
}

/* Menu del consenso privacy nella scheda cliente (pannello a mano, vedi ClienteDettaglio) */
.menu-consenso {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1300;
    min-width: 270px;
    padding: 4px 0;
}

.menu-consenso-voce {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
}

.menu-consenso-voce:hover {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.menu-consenso-voce span {
    display: flex;
    flex-direction: column;
}

.menu-consenso-voce small {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.menu-consenso-elimina {
    color: var(--mud-palette-error, #d32f2f);
}