/*
 * Solaris — Area cliente (utente loggato).
 * Stili dedicati al layout/pagine accessibili dopo il login del cliente.
 * Estratti da Figma: file "Website" (hiT2W2h5ogWzkY72m4K0DR),
 * nodi 439:1410 (sidebar), 452:1201 (hero pagina area cliente).
 */

/* =========================================================================
   Side bar utente loggato (Figma node 439:1410)
   Container drawer + sezioni Logo/Area title/User card/Voci/Logout
   ========================================================================= */

.solaris-cliente-drawer.mud-drawer {
    background-color: var(--color-bg-element);
    box-shadow: 0 1px 1px rgba(46, 46, 46, 0.15), 0 1px 2px rgba(46, 46, 46, 0.1);
    border-right: none;
}

/* L'AppBar è nascosta nei layout utente loggato → annullare il padding-top
   che MudBlazor riserva per l'header (override della media query @600px). */
.solaris-cliente-layout .mud-main-content {
    padding-top: 0;
}

.solaris-cliente-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 32px 16px;
    gap: 24px;
}

.solaris-cliente-nav__top,
.solaris-cliente-nav__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 24px;
}

.solaris-cliente-nav__logo {
    height: 55px;
    width: 192px;
    object-fit: contain;
    object-position: left center;
}

.solaris-cliente-nav__area-title {
    font-family: var(--ff-display);
    font-size: var(--fs-text-l); /* 18px */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-primary-dark);
    margin: 0;
}

.solaris-cliente-nav__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    width: 100%;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-pill);
}

.solaris-cliente-nav__user-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-radius: 87.5px;
    font-family: var(--ff-body);
    font-size: var(--fs-text-s); /* 14px */
    font-weight: 500;
    line-height: var(--lh-relaxed);
    text-transform: uppercase;
}

.solaris-cliente-nav__user-name {
    font-family: var(--ff-display);
    font-size: var(--fs-text-s); /* 14px */
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--color-text-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.solaris-cliente-nav__divider {
    width: 100%;
    height: 1px;
    border: 0;
    border-top: 1px dashed var(--color-grey);
    margin: 0;
}

/* Voce di menu: stati Default / Hover / Active (Figma 439:14182) */
.solaris-cliente-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    width: 192px;
    padding: 14px;
    border-radius: var(--radius-button);
    background-color: var(--color-bg-element);
    border: 1px solid transparent;
    color: var(--color-text-inactive);
    font-family: var(--ff-body);
    font-size: var(--fs-body); /* 16px */
    font-weight: 500;
    line-height: var(--lh-relaxed);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.solaris-cliente-nav__item:hover {
    background-color: var(--color-bg-page);
    color: var(--color-text-inactive);
}

.solaris-cliente-nav__item.active,
.solaris-cliente-nav__item.solaris-cliente-nav__item--active {
    background-color: var(--color-bg-element);
    border-color: var(--color-grey);
    color: var(--color-text-black);
    box-shadow: var(--shadow-field);
}

.solaris-cliente-nav__item-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.solaris-cliente-nav__item-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Badge conteggio non lette sulla voce "Notifiche" della sidebar.
   margin-left:auto lo spinge all'estremità destra della voce (nav item flex-row). */
.solaris-cliente-nav__badge {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: var(--color-danger);
    color: var(--color-text-white);
    border-radius: var(--radius-pill);
    font-family: var(--ff-body);
    font-size: var(--fs-label-space-s); /* 12px */
    font-weight: 600;
    line-height: 1;
}

/* Logout button: stati Default / Hover (Figma 439:14305) */
.solaris-cliente-nav__logout {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-button);
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-text-inactive);
    color: var(--color-text-inactive);
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: var(--lh-relaxed);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    box-sizing: border-box;
}

.solaris-cliente-nav__logout:hover {
    border-color: var(--color-text-black);
    color: var(--color-text-black);
}

/* =========================================================================
   Pagina area cliente — main content + sezioni (Figma 452:1201)
   ========================================================================= */

/* Container del contenuto principale per layout utente loggato (Figma) */
.solaris-cliente-main-content {
    display: flex;
    padding: 92px 128px 92px 72px;
    flex-direction: column;
    align-items: flex-start;
    gap: 64px;
    flex: 1 0 0;
    align-self: stretch;
}

/* Sezione interna pagina area cliente (configurazioni / impianti).
   Allineata al Figma: stack verticale con gap 24px e self-stretch. */
.solaris-cliente-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

/* Hero della pagina area cliente (Figma 452:1201) — gap 8px tra H1 e descrizione. */
.solaris-cliente-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

/* Riga titolo + CTA "cambia idea" disposti agli estremi (flex space-between).
   Su mobile va a capo così la CTA non comprime il titolo. */
.solaris-cliente-hero__topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
}

/* Page wrapper per pagine sottosezione (es. Modifica configurazione, Figma 546:2828).
   align-self: stretch contrasta l'align-items: flex-start del main-content,
   garantendo che il contenuto interno (configuratore incluso) prenda l'intera
   larghezza disponibile. Gap 32px = spaziatura tra back-CTA, hero e contenuto. */
.solaris-cliente-page {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    gap: 32px;
}

/* CTA "Torna a…" — bordered pill con freccia sinistra (Figma 546:2829).
   width: fit-content così non riempie la riga. */
.solaris-cliente-back-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 64px;
    width: fit-content;
    background-color: transparent;
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-button);
    color: var(--color-text-black);
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
}
.solaris-cliente-back-cta:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.solaris-cliente-back-cta__icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}
.solaris-cliente-back-cta__icon svg {
    width: 100%;
    height: 100%;
}

/* Overlay "Modifiche salvate" (Figma 503:14887) — card centrata su backdrop scuro,
   icona panel-check + titolo + sottotitolo + CTA full-width "Torna ai tuoi impianti".
   Mostrata dopo SalvaModifiche in /area-cliente/modifica-fase1. */
.solaris-cliente-save-overlay {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: min(560px, 90vw);
    padding: 24px 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-button);
    box-shadow: 0 0 0 4px rgba(58, 139, 104, 0.1);
}
.solaris-cliente-save-overlay__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.solaris-cliente-save-overlay__icon svg {
    width: 100%;
    height: 100%;
}
.solaris-cliente-save-overlay__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    width: 100%;
}
.solaris-cliente-save-overlay__title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--color-text-black);
    text-align: center;
}
.solaris-cliente-save-overlay__subtitle {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
    text-align: center;
}
.solaris-cliente-save-overlay__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 16px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-button);
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease-out;
}
.solaris-cliente-save-overlay__cta:hover {
    background-color: var(--color-primary-dark);
}

/* Stato "caricamento iniziale" centrato verticalmente + orizzontalmente nel main-content.
   flex:1 + align-self:stretch fanno occupare al wrapper tutta l'area disponibile sotto la
   navbar laterale, justify+align center posizionano lo spinner al centro reale della pagina. */
.solaris-cliente-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    align-self: stretch;
    flex: 1 0 0;
}

/* H2 di sezione area cliente: riusa la stessa regola del configuratore
   (.solaris-section__title in configuratore.css) per la barra verde a sx,
   ma con font-size 18px invece dei 28px standard del configuratore. */
.solaris-cliente-section .solaris-section__title {
    font-size: var(--fs-text-l); /* 18px */
}

/* Empty state "Vuoi configurare un nuovo impianto?" (Figma 474:2615) —
   mostrato in sezione "Configurazioni in corso" quando il cliente non ha
   configurazioni attive. */
.solaris-cliente-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 48px 24px;
    align-self: stretch;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 12px;
    overflow: hidden;
}

/* Icona opzionale in cima all'empty state (es. impianti — Figma 474:2680).
   Eredita color da currentColor (l'SVG è normalizzato a currentColor). */
.solaris-cliente-empty__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.solaris-cliente-empty__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.solaris-cliente-empty__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.solaris-cliente-empty__title {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-text-xl); /* 20px */
    font-weight: 600;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}

.solaris-cliente-empty__description {
    margin: 0;
    max-width: 600px;
    font-family: var(--ff-body);
    font-size: var(--fs-body); /* 16px */
    font-weight: 400;
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
}

/* =========================================================================
   CTA condivise area cliente (padding 12×64, radius 10, Inter SemiBold 16).
   Varianti: --primary (verde pieno) e --outlined (bordo grigio, testo nero).
   Usata da empty state, card stato configurazione (Bozza, ecc.).
   ========================================================================= */
.solaris-cliente-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 64px;
    border: none;
    border-radius: var(--radius-button);
    font-family: var(--ff-body);
    font-size: var(--fs-cta); /* 16px */
    font-weight: 600;
    line-height: var(--lh-relaxed);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    box-sizing: border-box;
}

.solaris-cliente-cta--primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

.solaris-cliente-cta--primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-white);
}

.solaris-cliente-cta--outlined {
    background-color: transparent;
    border: 1px solid var(--color-grey);
    color: var(--color-text-black);
}

.solaris-cliente-cta--outlined:hover {
    border-color: var(--color-text-black);
    color: var(--color-text-black);
}

/* Variante "danger" (Figma 570:4664) — usata per annullare un appuntamento.
   Bordo + testo rosso danger su sfondo bianco. */
.solaris-cliente-cta--danger {
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}

.solaris-cliente-cta--danger:hover {
    background-color: var(--color-danger);
    color: var(--color-text-white);
}

/* Padding ridotto per CTA secondarie dentro le card stato (Figma 570:4673).
   12×24 invece del default 12×64 per non occupare tutta la riga. */
.solaris-cliente-cta--compact {
    padding: 12px 24px;
}

/* Variante full-width per CTA dentro overlay/dialog (Figma 540:2163, 540:2164). */
.solaris-cliente-cta--block {
    width: 100%;
    padding: 14px 24px;
}

.solaris-cliente-cta:disabled,
.solaris-cliente-cta[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.solaris-cliente-cta__icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.solaris-cliente-cta__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =========================================================================
   Card stato configurazione (Figma 452:1214 — stato Bozza, riusabile per
   gli altri stati). Container + header (indirizzo + pill) + body + actions.
   ========================================================================= */
.solaris-cliente-config-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    padding: 24px;
    align-self: stretch;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 12px;
    overflow: hidden;
}

.solaris-cliente-config-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

/* Raggruppa le pill Fase 1/Fase 2 a destra: flex inline così restano vicine
   anche col flex-wrap del parent (su mobile finiscono sotto, ma sempre insieme). */
.solaris-cliente-config-card__pills {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.solaris-cliente-config-card__address {
    font-family: var(--ff-display);
    font-size: var(--fs-body); /* 16px */
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--color-primary);
}

.solaris-cliente-config-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.solaris-cliente-config-card__title {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-text-xl); /* 20px */
    font-weight: 600;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}

.solaris-cliente-config-card__description {
    margin: 0;
    max-width: 600px;
    font-family: var(--ff-body);
    font-size: var(--fs-body); /* 16px */
    font-weight: 400;
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
}

.solaris-cliente-config-card__description strong {
    font-weight: 700;
    color: var(--color-text-black);
}

.solaris-cliente-config-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
    padding-top: 16px;
}

/* Divisore orizzontale tra body e actions (Figma 570:4715) — usato nella
   card "Fase 2 in corso" (stato In_Autonomia). Linea solida grey full-width. */
.solaris-cliente-config-card__divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-grey);
}

/* Pill stato fase (Figma 466:1426 / 466:1466). Variante default "In corso":
   border primary + field-shadow, dot animato. Variante --completata:
   bg primary pieno, testo bianco, icona check (vedi Figma 466:1425). */
.solaris-cliente-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px 6px 12px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-field);
    font-family: var(--ff-display);
    font-size: var(--fs-text-s); /* 14px */
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--color-text-black);
    white-space: nowrap;
}

.solaris-cliente-pill--completata {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    box-shadow: none;
}

/* Variante "In revisione" (Figma 590:19966) — border + pulse + shadow accent (#FEA90D).
   Riusa .solaris-cliente-pill__dot ma cambia colore (override pulse animation a accent). */
.solaris-cliente-pill--accent {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(254, 169, 13, 0.15);
}
.solaris-cliente-pill--accent .solaris-cliente-pill__dot::before {
    background-color: var(--color-accent);
    animation-name: solaris-pulse-accent;
}

@keyframes solaris-pulse-accent {
    0%, 100% { box-shadow: 0 0 0 2px rgba(254, 169, 13, 0.3); }
    50% { box-shadow: 0 0 0 5px rgba(254, 169, 13, 0.12); }
}

.solaris-cliente-pill__dot {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.solaris-cliente-pill__dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(58, 139, 104, 0.3);
    animation: solaris-pulse 2s ease-in-out infinite;
}

.solaris-cliente-pill__icon {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.solaris-cliente-pill__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes solaris-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(58, 139, 104, 0.3); }
    50% { box-shadow: 0 0 0 5px rgba(58, 139, 104, 0.12); }
}

/* =========================================================================
   Choice cards (Figma 466:1428 — Fase 1 completata, scelta modalità Fase 2)
   Due card side-by-side su desktop, stack su mobile.
   ========================================================================= */
.solaris-cliente-config-card__choices {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    padding-top: 16px;
}

@media (min-width: 769px) {
    .solaris-cliente-config-card__choices {
        flex-direction: row;
        gap: 32px;
    }
}

.solaris-cliente-choice {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: 24px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 16px;
}

.solaris-cliente-choice__header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.solaris-cliente-choice__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.solaris-cliente-choice__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.solaris-cliente-choice__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.solaris-cliente-choice__title {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-text-l); /* 18px */
    font-weight: 600;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}

.solaris-cliente-choice__time {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-label-space-s); /* 12px */
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}

.solaris-cliente-choice__body {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-text-s); /* 14px */
    font-weight: 400;
    line-height: var(--lh-snug);
    color: var(--color-text-inactive);
}

/* =========================================================================
   Prenota appuntamento (Figma 474:2840) — header "Fase 2 - Prenotazione" +
   layout a due colonne: card giorno verde + calendario | pannello slot.
   ========================================================================= */

/* Tag "Fase 2 - Prenotazione" sopra l'H1 dell'hero. */
.solaris-cliente-appuntamento-tag {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-body); /* 16px */
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--color-primary);
}

/* Container due colonne (calendario + slot). Stack su mobile. */
.solaris-cliente-appuntamento-grid {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding-top: 32px;
    width: 100%;
}

@media (max-width: 1024px) {
    .solaris-cliente-appuntamento-grid {
        flex-direction: column;
    }
}

/* Colonna sinistra (data + calendario). */
.solaris-cliente-appuntamento-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 0 0 308px;
    max-width: 308px;
}

@media (max-width: 1024px) {
    .solaris-cliente-appuntamento-left {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }
}

/* Card verde gradient con anno + giorno selezionato (Figma 474:2996). */
.solaris-cliente-appuntamento-day-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 96px 24px 24px;
    border-radius: var(--radius-button);
    background: radial-gradient(ellipse 110% 80% at top left, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    box-shadow: 0 12px 28px -16px rgba(58, 139, 104, 0.25);
    color: var(--color-text-white);
}

.solaris-cliente-appuntamento-day-card__year {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-text-s); /* 14px */
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--color-grey-light);
}

.solaris-cliente-appuntamento-day-card__date {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h1); /* 32px */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-text-white);
}

.solaris-cliente-appuntamento-day-card--empty {
    color: var(--color-grey-light);
}

.solaris-cliente-appuntamento-day-card__placeholder {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: var(--lh-relaxed);
    color: var(--color-grey-light);
}

/* Calendario (custom — non MudDatePicker). */
.solaris-cliente-appuntamento-calendar {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-button);
    width: 100%;
    box-sizing: border-box;
}

.solaris-cliente-appuntamento-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.solaris-cliente-appuntamento-calendar__title {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body); /* 16px */
    font-weight: 500;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
    text-transform: capitalize;
}

.solaris-cliente-appuntamento-calendar__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    color: var(--color-text-black);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.solaris-cliente-appuntamento-calendar__nav:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.solaris-cliente-appuntamento-calendar__nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.solaris-cliente-appuntamento-calendar__nav-icon {
    width: 8px;
    height: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.solaris-cliente-appuntamento-calendar__nav-icon svg {
    width: 100%;
    height: 100%;
}

.solaris-cliente-appuntamento-calendar__nav--prev .solaris-cliente-appuntamento-calendar__nav-icon {
    transform: rotate(180deg);
}

.solaris-cliente-appuntamento-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 4px;
    width: 100%;
}

.solaris-cliente-appuntamento-calendar__weekday {
    text-align: center;
    font-family: var(--ff-display);
    font-size: 10px;
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}

.solaris-cliente-appuntamento-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
    width: 100%;
}

.solaris-cliente-appuntamento-calendar__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0 4px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--ff-display);
    font-size: var(--fs-label-space-s); /* 12px */
    font-weight: 500;
    line-height: 0;
    color: var(--color-text-black);
    cursor: pointer;
    justify-self: center;
    transition: background-color 0.15s, color 0.15s;
}

.solaris-cliente-appuntamento-calendar__day:hover:not(:disabled):not(.solaris-cliente-appuntamento-calendar__day--selected) {
    background-color: var(--color-grey-light);
}

.solaris-cliente-appuntamento-calendar__day--disabled,
.solaris-cliente-appuntamento-calendar__day:disabled {
    color: var(--color-grey);
    cursor: not-allowed;
}

.solaris-cliente-appuntamento-calendar__day--empty {
    visibility: hidden;
}

.solaris-cliente-appuntamento-calendar__day--selected {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

/* Colonna destra (pannello slot). */
.solaris-cliente-appuntamento-slots {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius-button);
    flex: 1 1 0;
    min-width: 0;
    max-width: 770px;
    box-sizing: border-box;
}

.solaris-cliente-appuntamento-slots__title {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-text-l); /* 18px */
    font-weight: 600;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}

.solaris-cliente-appuntamento-slots__divider {
    width: 100%;
    height: 0;
    border: 0;
    border-top: 1px dashed var(--color-grey);
    margin: 0;
}

.solaris-cliente-appuntamento-slots__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 768px) {
    .solaris-cliente-appuntamento-slots__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* Slot field — 4 stati Figma (Inactive / Default / Hover / Active). */
.solaris-cliente-appuntamento-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--color-text-black);
    border-radius: var(--radius-field);
    color: var(--color-text-black);
    font-family: var(--ff-display);
    font-size: var(--fs-text-s); /* 14px */
    font-weight: 500;
    line-height: var(--lh-tight);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.solaris-cliente-appuntamento-slot:hover:not(:disabled):not(.solaris-cliente-appuntamento-slot--active) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.solaris-cliente-appuntamento-slot--active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

.solaris-cliente-appuntamento-slot--inactive,
.solaris-cliente-appuntamento-slot:disabled {
    border-color: var(--color-text-inactive);
    color: var(--color-text-inactive);
    cursor: not-allowed;
}

.solaris-cliente-appuntamento-slot__icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.solaris-cliente-appuntamento-slot__icon svg {
    width: 100%;
    height: 100%;
}

/* Footer "Seleziona uno slot per confermare" + CTA "Conferma appuntamento". */
.solaris-cliente-appuntamento-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

@media (max-width: 768px) {
    .solaris-cliente-appuntamento-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

.solaris-cliente-appuntamento-footer__hint {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-text-s); /* 14px */
    font-weight: 400;
    line-height: var(--lh-snug);
    color: var(--color-text-inactive);
}

.solaris-cliente-appuntamento-footer__selected {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}

.solaris-cliente-appuntamento-footer__selected-label {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-label-space-s); /* 12px */
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}

.solaris-cliente-appuntamento-footer__selected-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body); /* 16px */
    font-weight: 500;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}

.solaris-cliente-appuntamento-footer__selected-time {
    font-family: var(--ff-display);
    font-size: var(--fs-text-l); /* 18px */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-primary);
}

/* =========================================================================
   Card appuntamento programmato (vista quando esiste già un appuntamento).
   ========================================================================= */
.solaris-cliente-appuntamento-booked {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-field);
}

.solaris-cliente-appuntamento-booked__header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.solaris-cliente-appuntamento-booked__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.solaris-cliente-appuntamento-booked__icon svg {
    width: 100%;
    height: 100%;
}

.solaris-cliente-appuntamento-booked__title {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-text-l); /* 18px */
    font-weight: 600;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}

.solaris-cliente-appuntamento-booked__when {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body); /* 16px */
    font-weight: 400;
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
}

.solaris-cliente-appuntamento-booked__when strong {
    font-weight: 600;
    color: var(--color-text-black);
}

/* =========================================================================
   Card slot data+ora dentro la config-card "Fase 2 in corso" (Figma 537:4071).
   Box bianco con bordo verde, field-shadow, icona orologio + data/ora bold.
   ========================================================================= */
.solaris-cliente-slot-card {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 96px 16px 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-field);
    box-shadow: var(--shadow-field);
}

.solaris-cliente-slot-card__icon {
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.solaris-cliente-slot-card__icon svg {
    width: 100%;
    height: 100%;
}

.solaris-cliente-slot-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.solaris-cliente-slot-card__date {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-text-l); /* 18px */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

.solaris-cliente-slot-card__time {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-text-l); /* 18px */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-primary);
}

/* =========================================================================
   Dialog "Vuoi davvero annullare l'appuntamento?" (Figma 540:2125).
   Override del MudDialog: niente header, niente actions native, contenuto
   centrato con titolo H2 + paragrafo con data bold + due CTA verticali full-width.
   ========================================================================= */

/* Container MudDialog: bordo + radius come da Figma. */
.solaris-cliente-annulla-dialog-wrapper.mud-dialog,
.mud-dialog.solaris-cliente-annulla-dialog-wrapper {
    background-color: var(--color-bg-element);
    border-radius: var(--radius-button);
    max-width: 700px;
    width: min(700px, 92vw);
}

/* Reset del padding del DialogContent — gestito dalla card interna. */
.solaris-cliente-annulla-dialog-wrapper .mud-dialog-content {
    padding: 0;
    overflow: visible;
}

/* Card interna: padding 64×32, gap 64 tra testo e CTA (Figma 540:2125). */
.solaris-cliente-annulla-dialog {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 64px 32px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .solaris-cliente-annulla-dialog {
        gap: 40px;
        padding: 40px 24px;
    }
}

.solaris-cliente-annulla-dialog__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    text-align: center;
}

.solaris-cliente-annulla-dialog__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-h2); /* 28px */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

.solaris-cliente-annulla-dialog__text {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}

.solaris-cliente-annulla-dialog__paragraph {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body); /* 16px */
    font-weight: 400;
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
}

.solaris-cliente-annulla-dialog__when {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body); /* 16px */
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

.solaris-cliente-annulla-dialog__actions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* =========================================================================
   Card "Configurazione completata / In revisione" (Figma 590:19960).
   Mostrata in /area-cliente quando la fase 2 è chiusa ma nessun preventivo
   è stato ancora creato. Layout diverso da .solaris-cliente-config-card:
   padding 32, gap 24, header con icona pannello + indirizzo (via H3, città body).
   ========================================================================= */
.solaris-cliente-revisione-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 32px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

.solaris-cliente-revisione-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.solaris-cliente-revisione-card__title-row {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.solaris-cliente-revisione-card__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.solaris-cliente-revisione-card__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.solaris-cliente-revisione-card__title-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.solaris-cliente-revisione-card__title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h3); /* 24px */
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

.solaris-cliente-revisione-card__subtitle {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-body); /* 16px */
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
}

.solaris-cliente-revisione-card__lead {
    margin: 0;
    max-width: 837px;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-body); /* 16px */
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}
.solaris-cliente-revisione-card__lead strong {
    font-weight: 700;
}

.solaris-cliente-revisione-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}

.solaris-cliente-revisione-card__metrics {
    display: inline-flex;
    align-items: flex-start;
    gap: 48px;
}

.solaris-cliente-revisione-card__metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.solaris-cliente-revisione-card__metric-label {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-label-space-s); /* 12px */
    line-height: var(--lh-tight);
    text-transform: uppercase;
    color: var(--color-text-inactive);
}

.solaris-cliente-revisione-card__metric-value {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.solaris-cliente-revisione-card__metric-number {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-text-l); /* 18px */
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

.solaris-cliente-revisione-card__metric-unit {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-label-space-s); /* 12px */
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}

/* CTA "Vedi dettagli" — outlined, padding 12×48 (più stretto dell'outlined default 12×64
   ma più largo del --compact 12×24). Variante dedicata della card revisione. */
.solaris-cliente-revisione-card__cta {
    padding: 12px 48px;
}

@media (max-width: 768px) {
    .solaris-cliente-revisione-card {
        padding: 24px;
    }
    .solaris-cliente-revisione-card__footer {
        flex-direction: column;
        align-items: stretch;
    }
    .solaris-cliente-revisione-card__cta {
        align-self: stretch;
    }
}

/* =========================================================================
   Pagina "Dettagli configurazione" (Figma 590:20196).
   Layout read-only con header + sezioni FASE 1 / FASE 2 in cards.
   ========================================================================= */

/* Wrapper della pagina full-width — la pagina di dettaglio occupa tutta la
   larghezza disponibile (override dei limiti dei layout cliente standard). */
.solaris-cliente-page--wide {
    max-width: none;
}

/* Back CTA "icona-only" (Figma 590:20496) — box bianco quadrato 36×36 con
   freccia indietro 10×10. Variante minima del back-cta lungo. */
.solaris-cliente-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 10px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    color: var(--color-text-black);
    cursor: pointer;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
}
.solaris-cliente-back-icon:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.solaris-cliente-back-icon svg {
    width: 10px;
    height: 10px;
    display: block;
}

/* Headline pagina dettaglio (Figma 590:20507). Intro a sx (pre + H1 + lead),
   pills a dx. Flex con gap 128 su desktop, stack su mobile. */
.solaris-config-dettaglio-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
    width: 100%;
}
@media (max-width: 1024px) {
    .solaris-config-dettaglio-head {
        flex-direction: column;
        gap: 24px;
    }
}

.solaris-config-dettaglio-head__intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}
.solaris-config-dettaglio-head__pre {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-body); /* 16px */
    line-height: var(--lh-tight);
    color: var(--color-primary);
}
.solaris-config-dettaglio-head__title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-h1); /* 32px */
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}
.solaris-config-dettaglio-head__lead {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: var(--fs-body); /* 16px */
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}
.solaris-config-dettaglio-head__lead strong {
    font-weight: 700;
}

/* Sezione FASE 1 / FASE 2 — wrapper verticale con gap 24 (Figma 590:20200). */
.solaris-config-dettaglio-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Grid 2/3 colonne per le righe di card. Stack su mobile. */
.solaris-config-dettaglio-grid {
    display: grid;
    gap: 24px;
    width: 100%;
    align-items: stretch;
}
.solaris-config-dettaglio-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.solaris-config-dettaglio-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .solaris-config-dettaglio-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .solaris-config-dettaglio-grid--2 { grid-template-columns: 1fr; }
}

/* Card "info" base (Figma 590:20204) — bg white, border grey, radius 12,
   padding 24, gap 24. Riusata da tutte le card del dettaglio. */
.solaris-config-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
    height: 100%;
}
.solaris-config-card--full {
    width: 100%;
}
.solaris-config-card__title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-text-l); /* 18px */
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}
.solaris-config-card__divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-grey);
}
.solaris-config-card__row-divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px dashed var(--color-grey);
}
.solaris-config-card__data {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.solaris-config-card__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.solaris-config-card__field-label {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-label-space-s); /* 12px */
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}
.solaris-config-card__field-value {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body); /* 16px */
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
    word-break: break-word;
}

/* Riga a 3 colonne (F1/F2/F3) dentro la card consumi. */
.solaris-config-card__triple {
    display: flex;
    gap: 16px;
    width: 100%;
}
.solaris-config-card__triple > .solaris-config-card__field {
    flex: 1 1 0;
    min-width: 0;
}

/* "Bolletta caricata" (Figma I590:20690;546:4985) — box bordato verde con
   icona document-check + nome file + caption "CARICATA". */
.solaris-config-card__bolletta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 100%;
}
.solaris-config-card__bolletta-title {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: var(--fs-text-l); /* 18px */
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}
.solaris-config-card__bolletta-box {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
}
.solaris-config-card__bolletta-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.solaris-config-card__bolletta-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.solaris-config-card__bolletta-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.solaris-config-card__bolletta-name {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
    word-break: break-all;
}
.solaris-config-card__bolletta-hint {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-label-space-s); /* 12px */
    line-height: var(--lh-tight);
    text-transform: uppercase;
    color: var(--color-text-inactive);
}

/* Card annidata "Indirizzo di fatturazione" (Figma 592:22133) — titolo verde +
   divider + grid 2 colonne con i campi. */
.solaris-config-card__nested {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding-top: 12px;
}
.solaris-config-card__nested-title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-body); /* 16px */
    line-height: var(--lh-tight);
    color: var(--color-primary);
}
.solaris-config-card__nested-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    width: 100%;
}
@media (max-width: 480px) {
    .solaris-config-card__nested-grid { grid-template-columns: 1fr; }
}

/* Card "Componenti dell'impianto" (Figma 590:21218) — header + grid righe.
   Ogni riga: tipo (label) + brand + quantità ×N. */
.solaris-componenti-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
.solaris-componente-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-grey);
    border-radius: 10px;
    width: 100%;
}
.solaris-componente-row__text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.solaris-componente-row__label {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-text-s); /* 14px */
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
    text-transform: uppercase;
}
.solaris-componente-row__brand {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: var(--fs-text-xl); /* 20px */
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}
.solaris-componente-row__qty {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-text-l); /* 18px */
    line-height: var(--lh-tight);
    color: var(--color-text-black);
    flex: 0 0 auto;
}

/* Link "Scarica scheda tecnica" accanto alla quantità (riepilogo prodotti, area cliente).
   Pill verde con icona documento, riempimento al hover. */
.solaris-componente-row__scheda {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: var(--fs-text-s);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.solaris-componente-row__scheda:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

.solaris-componente-row__scheda-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.solaris-componente-row__scheda-icon svg {
    width: 100%;
    height: 100%;
}

/* Card scenario "Senza/Con Accumulo" (Figma 590:20799 / 590:20947).
   Container con header (icona + titolo), gradient box (risparmio annuale/bimestrale/payback),
   metrics list, divider, investimento. Variante --consigliato per quella accent. */
.solaris-scenario-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 16px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 10px;
    box-sizing: border-box;
    height: 100%;
}
.solaris-scenario-card--consigliato {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(254, 169, 13, 0.1);
}

.solaris-scenario-card__badge {
    position: absolute;
    top: 10px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background-color: var(--color-accent);
    color: var(--color-text-white);
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 6px -2px rgba(254, 169, 13, 0.3);
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-label-space-s); /* 12px */
    line-height: var(--lh-tight);
}
.solaris-scenario-card__badge-icon {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-white);
}
.solaris-scenario-card__badge-icon svg { width: 100%; height: 100%; }

.solaris-scenario-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 8px 4px;
}
.solaris-scenario-card__header-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-black);
}
.solaris-scenario-card__header-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.solaris-scenario-card__header-title {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h3); /* 24px */
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}

/* Box gradient verde con risparmio annuale + bimestrale + payback (Figma 590:20803). */
.solaris-scenario-card__gradient {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 12px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(159.5deg, var(--color-primary) 1%, var(--color-primary-dark) 98%);
    color: var(--color-text-white);
}
.solaris-scenario-card__gradient-decoration {
    position: absolute;
    top: -8%;
    right: -2%;
    width: 116px;
    height: 116px;
    mix-blend-mode: lighten;
    pointer-events: none;
}
.solaris-scenario-card__gradient-decoration svg {
    width: 100%;
    height: 100%;
    display: block;
}
.solaris-scenario-card__gradient-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.solaris-scenario-card__gradient-label {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-label-space-s); /* 12px */
    line-height: var(--lh-tight);
    color: var(--color-grey-light);
}
.solaris-scenario-card__gradient-value {
    margin: 0;
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
    color: var(--color-text-white);
}
.solaris-scenario-card__gradient-value--sm {
    font-size: 20px;
    gap: 2px;
}
.solaris-scenario-card__gradient-currency {
    font-size: 18px;
    line-height: 1;
    color: var(--color-grey-light);
}
.solaris-scenario-card__gradient-value--sm > span:first-child {
    font-size: 16px;
    color: var(--color-grey-light);
}
.solaris-scenario-card__gradient-divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(246, 247, 244, 0.5);
}
.solaris-scenario-card__gradient-row {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
}
.solaris-scenario-card__gradient-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
}
.solaris-scenario-card__gradient-vsep {
    width: 1px;
    align-self: stretch;
    background-color: rgba(246, 247, 244, 0.5);
}

/* Lista metriche dello scenario (Potenza impianto, Produzione annua, Capacità accumulo). */
.solaris-scenario-card__metrics {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}
.solaris-scenario-card__metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    width: 100%;
}
.solaris-scenario-card__metric-label {
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: var(--fs-body); /* 16px */
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
}
.solaris-scenario-card__metric-value {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
}
.solaris-scenario-card__metric-number {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-text-l); /* 18px */
    line-height: var(--lh-tight);
    color: var(--color-text-black);
}
.solaris-scenario-card__metric-unit {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    color: var(--color-text-inactive);
}
.solaris-scenario-card__metric-investimento {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-text-l); /* 18px */
    line-height: var(--lh-tight);
    color: var(--color-primary-dark);
    white-space: nowrap;
}

/* === Azioni multiple nella card "configurazione completata" === */
.solaris-cliente-revisione-card__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* === Pagina gestione/firma preventivo === */
.solaris-preventivo-firma {
    display: flex;
    gap: 24px;
    align-items: stretch;
    width: 100%;
}
@media (max-width: 900px) {
    .solaris-preventivo-firma {
        flex-direction: column;
    }
}
.solaris-preventivo-firma__panel {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    border-radius: 12px;
    align-self: flex-start;
}
@media (max-width: 900px) {
    .solaris-preventivo-firma__panel {
        flex-basis: auto;
        width: 100%;
    }
}
.solaris-preventivo-firma__title {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 600;
    font-size: var(--fs-text-l);
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}
.solaris-preventivo-firma__text {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--color-text-inactive);
}
.solaris-preventivo-firma__hint {
    margin: 6px 0 0;
    font-family: var(--ff-display);
    font-size: var(--fs-label-space-s);
    color: var(--color-text-inactive);
}
.solaris-preventivo-firma__signed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.solaris-preventivo-firma__signed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-text-white);
}
.solaris-preventivo-firma__signed-icon svg {
    width: 24px;
    height: 24px;
}
.solaris-preventivo-firma__canvas {
    flex: 1 1 auto;
    min-height: 70vh;
    border: 1px solid var(--color-grey);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--color-bg-page);
}
.solaris-preventivo-firma__viewer {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: 0;
    display: block;
}

/* =========================================================================
   Timeline "Avanzamento" (pagina /area-cliente/impianto).
   Diario di bordo cliente: eventi preventivo + commessa visibili al cliente,
   in ordine cronologico (più recente in alto). Rail verticale con badge icona
   collegati da una linea, contenuto a destra (data + fase + titolo + descrizione).
   ========================================================================= */
.solaris-cliente-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.solaris-cliente-timeline__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

/* Linea continua del rail: attraversa l'intera altezza dell'item (dal centro
   dell'icona fino all'item successivo, gap incluso) e scorre dietro le icone —
   che, essendo opache e con z-index più alto, mascherano i giunti dando un tratto
   unico come la MudTimeline. Nascosta sull'ultimo item. */
.solaris-cliente-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 20px; /* centro del marker (40px / 2) */
    top: 20px;  /* centro verticale dell'icona */
    bottom: -24px; /* copre il gap (24px) fino all'icona successiva */
    transform: translateX(-50%);
    width: 2px;
    background-color: var(--color-grey);
    z-index: 0;
}

/* Rail sinistro: badge icona. */
.solaris-cliente-timeline__marker {
    flex: 0 0 40px;
    display: flex;
    justify-content: center;
}

.solaris-cliente-timeline__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-field);
    z-index: 1;
}

/* Evento concluso/positivo (es. preventivo accettato, pagamento) → badge pieno. */
.solaris-cliente-timeline__icon--completato {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
    box-shadow: none;
}

.solaris-cliente-timeline__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.solaris-cliente-timeline__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 16px;
}

.solaris-cliente-timeline__meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.solaris-cliente-timeline__date {
    font-family: var(--ff-display);
    font-size: var(--fs-label-space-s); /* 12px */
    font-weight: 500;
    line-height: var(--lh-tight);
    text-transform: uppercase;
    color: var(--color-text-inactive);
}

/* Tag fase (Preventivo / Commessa) — chip leggera grigia. */
.solaris-cliente-timeline__fase {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-page);
    border: 1px solid var(--color-grey);
    font-family: var(--ff-display);
    font-size: 10px;
    font-weight: 500;
    line-height: var(--lh-tight);
    text-transform: uppercase;
    color: var(--color-text-inactive);
}

.solaris-cliente-timeline__title {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-body); /* 16px */
    font-weight: 600;
    line-height: var(--lh-relaxed);
    color: var(--color-text-black);
}

.solaris-cliente-timeline__desc {
    margin: 0;
    font-family: var(--ff-body);
    font-size: var(--fs-text-s); /* 14px */
    font-weight: 400;
    line-height: var(--lh-snug);
    color: var(--color-text-inactive);
}

/* ============================================================
   Macro-avanzamento ORIZZONTALE ("Il mio impianto" → Stato dei lavori)
   6 fasi in riga con connettore continuo; le icone opache mascherano i
   giunti (stesso principio del rail verticale). Vista d'insieme immediata.
   ============================================================ */
.solaris-cliente-progress {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 0;
}

.solaris-cliente-progress__step {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 6px;
    gap: 8px;
}

/* Connettore verso il passo successivo: dal centro dell'icona corrente al centro
   della successiva; dietro le icone (z-index 0). Verde se il passo è completato. */
.solaris-cliente-progress__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;      /* centro icona 40px */
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--color-grey);
    z-index: 0;
}
.solaris-cliente-progress__step--done:not(:last-child)::after {
    background-color: var(--color-primary);
}

.solaris-cliente-progress__icon {
    position: relative;
    z-index: 1;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-element);
    border: 1px solid var(--color-grey);
    color: var(--color-text-inactive);
}
.solaris-cliente-progress__icon svg { width: 18px; height: 18px; display: block; }

.solaris-cliente-progress__step--current .solaris-cliente-progress__icon {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-field);
}
.solaris-cliente-progress__step--done .solaris-cliente-progress__icon {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

.solaris-cliente-progress__status {
    font-family: var(--ff-display);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-text-inactive);
}
.solaris-cliente-progress__step--current .solaris-cliente-progress__status { color: var(--color-primary); }

.solaris-cliente-progress__label {
    font-family: var(--ff-body);
    font-size: var(--fs-text-s);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--color-text-black);
}
.solaris-cliente-progress__step:not(.solaris-cliente-progress__step--done):not(.solaris-cliente-progress__step--current)
    .solaris-cliente-progress__label {
    color: var(--color-text-inactive);
}

.solaris-cliente-progress__date {
    font-family: var(--ff-display);
    font-size: var(--fs-label-space-s);
    color: var(--color-text-inactive);
}

/* Riga a due colonne sotto la macro-timeline: aggiornamenti (sx) + dettagli impianto (dx).
   Riempie lo spazio a destra ed evita due timeline verticali affiancate. */
.solaris-cliente-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    width: 100%;
}
.solaris-cliente-columns--single { grid-template-columns: 1fr; }

/* Schermi stretti: la macro-timeline va a capo a 3 per riga, le colonne si impilano. */
@media (max-width: 1024px) {
    .solaris-cliente-progress { flex-wrap: wrap; gap: 20px 0; }
    .solaris-cliente-progress__step { flex: 0 0 33.333%; }
    .solaris-cliente-progress__step:not(:last-child)::after { display: none; }
    .solaris-cliente-columns { grid-template-columns: 1fr; }
}

/* Link inline dentro i testi area cliente (es. empty state → "configurazioni"). */
.solaris-inline-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}
.solaris-inline-link:hover {
    color: var(--color-primary-dark);
}