/* =========================================================================
   auxilium.studi.css
   Stile condiviso delle pagine studio Auxilium (HVAC, gas, ricambi aria,
   reazione al fuoco, ecc.). Centralizza il look-and-feel visivo che prima
   era replicato negli scoped CSS di ogni pagina (RicambiAriaUni16798,
   ConversioneGas, EnergiaClimatizzazione...). I componenti Blazor
   condivisi <StudioHero> e <StudioIntroAccordion> producono markup che
   consuma queste classi.

   Convenzione di refactoring: se una nuova pagina studio ha bisogno di
   stilizzare elementi specifici (es. tabelle dei locali per RicambiAria,
   o dati gas-specifici per ConversioneGas), quella pagina può avere
   ANCORA un proprio CSS scoped, ma per le sezioni "hero / intro / panel /
   campi / risultati / azioni / alert / step indicator" deve appoggiarsi
   esclusivamente a questo file.
   ========================================================================= */

/* ---------- Page wrapper ---------- */

.studio-page {
    min-height: 100%;
    padding: var(--ax-page-padding);
    color: var(--ax-text-1);
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-6);
    max-width: var(--ax-page-max);
    margin: 0 auto;
    width: 100%;
}

/* ---------- Hero (banner blu in cima allo studio) ---------- */

.studio-hero {
    padding: var(--ax-space-6) var(--ax-space-7);
    border-radius: var(--ax-radius-lg);
    background: linear-gradient(135deg, var(--ax-primary-900) 0%, var(--ax-primary-800) 60%, var(--ax-primary-700) 100%);
    box-shadow: var(--ax-shadow-2);
    border: 1px solid var(--ax-primary-800);
    color: #ffffff;
}

.studio-hero-inner {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
}

.studio-hero-tag {
    align-self: flex-start;
    display: inline-block;
    font-size: var(--ax-fs-11);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Stessa pillola del tag hero, ma per le card su sfondo chiaro: testo e sfondo
   tematici (non bianco-su-bianco). Da usare dentro i pannelli, non nell'hero. */
.studio-tag {
    align-self: flex-start;
    display: inline-block;
    font-size: var(--ax-fs-11);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ax-primary-700);
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ax-primary-50);
    border: 1px solid var(--ax-primary-100);
}

.studio-hero-title {
    margin: 0;
    font-size: clamp(var(--ax-fs-24), 2.6vw, var(--ax-fs-40));
    line-height: 1.12;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.studio-hero-subtitle {
    margin: 0;
    max-width: 56rem;
    font-size: var(--ax-fs-14);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.studio-hero-progress {
    display: flex;
    gap: var(--ax-space-2);
    margin-top: var(--ax-space-3);
}

.pallino {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: var(--ax-fs-12);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.pallino-attivo {
    background: #ffffff;
    color: var(--ax-primary-800);
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

.pallino-fatto {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ax-primary-900);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Intro accordion ("A cosa serve questo studio") ---------- */

.studio-intro {
    background: var(--ax-card-bg);
    border: 1px solid var(--ax-border-soft);
    border-left: 3px solid var(--ax-highlight);
    border-radius: var(--ax-radius-md);
    box-shadow: var(--ax-shadow-1);
    margin-bottom: var(--ax-layout-gap);
    overflow: hidden;
}

.studio-intro-summary {
    list-style: none;
    cursor: pointer;
    padding: var(--ax-space-3) var(--ax-space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-3);
    user-select: none;
}

.studio-intro-summary::-webkit-details-marker {
    display: none;
}

.studio-intro-summary::after {
    content: "▾";
    color: var(--ax-text-3);
    font-size: var(--ax-fs-12);
    transition: transform 0.15s ease;
}

.studio-intro:not([open]) .studio-intro-summary::after {
    transform: rotate(-90deg);
}

.studio-intro-summary-label {
    font-weight: 600;
    color: var(--ax-highlight-strong);
    font-size: var(--ax-fs-14);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.studio-intro-summary-hint {
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.studio-intro-body {
    padding: 0 var(--ax-space-5) var(--ax-space-5);
    border-top: 1px solid var(--ax-border-soft);
}

.studio-intro-body .panel-help:first-child {
    margin-top: var(--ax-space-4);
}

/* ---------- Panel cards (sezioni di un wizard) ---------- */

.panel-card {
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-lg);
    padding: var(--ax-space-6) var(--ax-space-7);
    box-shadow: var(--ax-shadow-1);
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-4);
}

.panel-title {
    margin: 0;
    font-size: var(--ax-fs-20);
    font-weight: 600;
    color: var(--ax-text-1);
}

.panel-subtitle {
    margin: var(--ax-space-5) 0 var(--ax-space-2) 0;
    font-size: var(--ax-fs-13);
    font-weight: 600;
    color: var(--ax-highlight);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.panel-help {
    margin: 0;
    color: var(--ax-text-2);
    font-size: var(--ax-fs-14);
    line-height: 1.55;
}

.applicazione-uni16798-page fluent-card,
.applicazione-uni16798-page .panel-card,
.applicazione-uni16798-page .studio-tabella {
    color: var(--ax-text-1);
}

.applicazione-uni16798-page .panel-help {
    color: var(--ax-text-2);
    background: transparent;
}

.applicazione-uni16798-page .panel-help::selection,
.applicazione-uni16798-page .studio-tabella ::selection,
.applicazione-uni16798-page .campo-label::selection,
.applicazione-uni16798-page .studio-hero-tag::selection {
    color: #ffffff;
    background: var(--ax-primary-700);
}

.studio-tabella .locali-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ax-fs-13);
    color: var(--ax-text-1);
}

.studio-tabella .locali-table th,
.studio-tabella .locali-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ax-border-soft);
    text-align: left;
    vertical-align: top;
}

.studio-tabella .locali-table thead th {
    background: var(--ax-panel-bg-soft);
    font-size: var(--ax-fs-12);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ax-text-2);
    font-weight: 600;
    border-bottom: 1px solid var(--ax-border-strong);
}

.studio-tabella .locali-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--ax-panel-bg-soft) 55%, transparent);
}

.tubazioni-grid-fluent-wrapper {
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-md);
    background: var(--ax-card-bg);
    overflow-x: auto;
    /* Con la griglia a min-width 980px compare la scrollbar orizzontale: senza
       spazio in basso si appoggia sull'ultima riga e ne taglia il pulsante.
       Il padding la stacca dal contenuto e dà respiro alla coda della tabella. */
    padding-bottom: var(--ax-space-3);
}

.tubazioni-grid-fluent {
    /* Allargata da 980px: con 12 colonne a 980px erano schiacciate e la
       colonna Azioni non lasciava spazio al bottone. Sotto questa soglia
       scatta lo scroll orizzontale del wrapper. */
    min-width: 1100px;
    width: 100%;
}

.tubazioni-grid-fluent::part(row) {
    min-height: 42px;
}

.tubazioni-grid-fluent::part(column-header-cell) {
    font-weight: 700;
    color: var(--ax-text-1);
    background: var(--ax-panel-muted-bg, #f6f8fb);
}

.tubazioni-grid-fluent::part(cell) {
    align-items: center;
}

.numeric-cell {
    display: block;
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tubazioni-grid-selected-cell {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0 0.45rem;
    border-radius: var(--ax-radius-sm);
    background: rgba(13, 74, 162, 0.12);
    color: var(--ax-primary-800);
    font-weight: 700;
}

/* =========================================================================
   Landing / catalogo riusabile
   Ispirato a layout SaaS puliti: nav compatta, hero centrale, chip filtro,
   sezioni catalogo e card morbide. Da usare per Home, /studi e pagine
   pubbliche senza duplicare CSS scoped.
   ========================================================================= */

.ax-landing-page {
    min-height: 100%;
    padding: var(--ax-page-padding);
    color: var(--ax-text-1);
    background: transparent;
}

.ax-landing-shell {
    width: min(var(--ax-page-max), 100%);
    margin: 0 auto;
    display: grid;
    gap: var(--ax-space-6);
}

.ax-landing-hero {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--ax-space-4);
    padding: clamp(var(--ax-space-7), 8vw, 116px) var(--ax-space-5) clamp(var(--ax-space-6), 6vw, 84px);
    overflow: hidden;
    text-align: center;
}

.ax-landing-hero::before {
    content: "";
    position: absolute;
    inset: -18% 8% auto;
    height: 360px;
    /* In origine qui c'era anche un linear-gradient orizzontale che creava
       una sottile linea verticale "decorativa" (tipo asse di costruzione)
       al 8-9% della larghezza dell'hero. Con i nuovi hero centrati pero'
       sembrava un artefatto, non una scelta — l'ho tolto. Resta solo
       l'alone radiale in alto a destra che da' profondita' senza
       distrarre. */
    background: radial-gradient(
        circle at 72% 12%,
        color-mix(in srgb, var(--ax-primary-100) 55%, transparent),
        transparent 42%);
    opacity: 0.7;
    pointer-events: none;
}

.theme-dark .ax-landing-hero::before {
    background:
        radial-gradient(circle at 72% 12%, color-mix(in srgb, var(--ax-primary-700) 24%, transparent), transparent 46%);
    opacity: 0.34;
}

.ax-landing-hero > * {
    position: relative;
    z-index: 1;
}

.ax-landing-eyebrow {
    margin: 0;
    color: var(--ax-highlight-strong);
    font-size: var(--ax-fs-11);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ax-landing-title {
    margin: 0;
    max-width: 980px;
    color: var(--ax-primary-700);
    font-size: clamp(48px, 6vw, 86px);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.theme-dark .ax-landing-title {
    color: #2f6fe4;
}

.ax-landing-title span {
    display: block;
}

/* Variante compatta per le landing secondarie (Contatti, Norme, ...): il
   titolo gigante della Home schiaccia visivamente pagine dal contenuto
   più asciutto. Stessa famiglia di stili, scala più ragionevole. */
.ax-landing-title.is-compact {
    font-size: clamp(32px, 4vw, 56px);
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.ax-landing-subtitle {
    margin: 0;
    max-width: 740px;
    color: var(--ax-text-2);
    font-size: clamp(var(--ax-fs-16), 1.6vw, var(--ax-fs-20));
    line-height: 1.7;
}

.ax-landing-actions,
.ax-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-2);
}

.ax-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-md);
    background: color-mix(in srgb, var(--ax-panel-bg) 88%, transparent);
    color: var(--ax-text-2);
    box-shadow: var(--ax-shadow-1);
    font-size: var(--ax-fs-13);
    font-weight: 680;
    text-decoration: none;
    font-family: var(--ax-font-sans);
    cursor: pointer;
    appearance: none;
}

.ax-chip.is-active {
    background: color-mix(in srgb, var(--ax-highlight) 22%, transparent);
    border-color: var(--ax-highlight);
    color: var(--ax-highlight-strong);
}

.ax-section {
    display: grid;
    gap: var(--ax-space-4);
}

.ax-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--ax-space-4);
}

.ax-section-heading {
    display: grid;
    gap: 4px;
}

.ax-section-title {
    margin: 0;
    color: var(--ax-primary-700);
    font-size: clamp(var(--ax-fs-20), 2vw, var(--ax-fs-28));
    line-height: 1.16;
    font-weight: 760;
    letter-spacing: -0.02em;
}

.theme-dark .ax-section-title {
    color: #2f6fe4;
}

.ax-section-text {
    margin: 0;
    max-width: 680px;
    color: var(--ax-text-3);
    font-size: var(--ax-fs-14);
    line-height: 1.6;
}

.ax-section-link {
    color: var(--ax-primary-700);
    font-size: var(--ax-fs-13);
    font-weight: 720;
    text-decoration: none;
}

.ax-section-link:hover,
.ax-section-link:focus-visible {
    color: var(--ax-primary-800);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ax-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: var(--ax-space-4);
}

.ax-feature-card {
    position: relative;
    min-height: 170px;
    display: grid;
    align-content: start;
    gap: var(--ax-space-3);
    padding: var(--ax-space-4);
    border: 1px solid color-mix(in srgb, var(--ax-border-soft) 78%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--ax-panel-bg) 86%, transparent);
    box-shadow: var(--ax-shadow-1);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ax-feature-card:hover,
.ax-feature-card:focus-within {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ax-primary-500) 42%, var(--ax-border-soft));
    box-shadow: var(--ax-shadow-2);
}

.ax-feature-card.is-disabled {
    opacity: 0.7;
}

.ax-feature-card.is-disabled:hover {
    transform: none;
    box-shadow: var(--ax-shadow-1);
}

.ax-feature-card.is-warning {
    border-color: color-mix(in srgb, var(--ax-highlight) 40%, transparent);
    background: var(--ax-highlight-soft);
}

.ax-feature-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ax-panel-bg-soft);
    color: var(--ax-primary-700);
}

.ax-feature-kicker {
    margin: var(--ax-space-2) 0 0;
    color: var(--ax-text-3);
    font-size: var(--ax-fs-11);
    font-weight: 780;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ax-feature-title {
    margin: 0;
    color: var(--ax-text-1);
    font-size: var(--ax-fs-18);
    line-height: 1.25;
    font-weight: 760;
}

.ax-feature-text {
    margin: 0;
    color: var(--ax-text-2);
    font-size: var(--ax-fs-14);
    line-height: 1.6;
}

.ax-feature-arrow {
    position: absolute;
    top: var(--ax-space-4);
    right: var(--ax-space-4);
    color: var(--ax-text-3);
    font-size: var(--ax-fs-18);
}

.ax-status-badge {
    display: inline-flex;
    width: fit-content;
    padding: 3px 10px;
    border-radius: var(--ax-radius-pill);
    background: var(--ax-panel-bg-soft);
    color: var(--ax-text-3);
    font-size: var(--ax-fs-11);
    font-weight: 760;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ax-status-badge.is-warning {
    background: var(--ax-highlight);
    color: var(--ax-highlight-on);
}

.ax-note-box {
    padding: var(--ax-space-3) var(--ax-space-4);
    border: 1px dashed color-mix(in srgb, var(--ax-highlight) 42%, transparent);
    border-radius: var(--ax-radius-sm);
    background: rgba(255, 255, 255, 0.52);
    color: var(--ax-gray-700);
    font-size: var(--ax-fs-13);
    line-height: 1.55;
    white-space: pre-line;
}

.ax-calm-cta {
    position: relative;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-5);
    padding: clamp(var(--ax-space-7), 8vw, 120px) var(--ax-space-6);
    overflow: hidden;
    background: color-mix(in srgb, var(--ax-body-bg) 88%, white);
    text-align: center;
    /* Sfumatura su tutti e quattro i lati: due linear-gradient
       perpendicolari (uno verticale, uno orizzontale) intersecati con
       mask-composite producono un rettangolo opaco al centro con i
       bordi trasparenti su tutti i lati. Il risultato e' una "fascia"
       di colore che svanisce nel mesh blob globale (auxilium.background.css)
       sia in alto/basso sia a sinistra/destra. */
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
}

.ax-calm-cta::before,
.ax-calm-cta::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 140px;
    border: 2px solid color-mix(in srgb, var(--ax-text-3) 12%, transparent);
    border-radius: 52% 48% 58% 42%;
    transform: rotate(18deg);
    pointer-events: none;
}

.ax-calm-cta::before {
    left: -130px;
    bottom: -26px;
}

.ax-calm-cta::after {
    right: -70px;
    top: 28px;
    transform: rotate(73deg);
}

.ax-calm-cta > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 960px) {
    .ax-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ax-landing-hero {
        padding: var(--ax-space-6) var(--ax-space-4);
    }

    .ax-landing-title {
        font-size: clamp(var(--ax-fs-36), 13vw, 56px);
    }

    .ax-section-header {
        display: grid;
        align-items: start;
    }

    .ax-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Campi form ---------- */

.campo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ax-space-4);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2);
}

.campo-label {
    font-size: var(--ax-fs-12);
    font-weight: 600;
    color: var(--ax-text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.campo-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-border-strong);
    background: var(--ax-gray-0);
    color: var(--ax-text-1);
    font-family: var(--ax-font-sans);
    font-size: var(--ax-fs-14);
    line-height: 1.3;
}

.campo-input:focus-visible {
    outline: none;
    border-color: var(--ax-primary-500);
    box-shadow: var(--ax-shadow-focus);
}

.campo-hint {
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
    line-height: 1.45;
    margin-top: 4px;
}

.campo-check {
    flex-direction: row;
    align-items: center;
    gap: var(--ax-space-2);
}

.campo-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ax-primary-700);
}

/* ---------- Riepilogo (lista di voci stilizzata) ---------- */

.riepilogo {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2);
    color: var(--ax-text-1);
}

.riepilogo li {
    padding: 8px 12px;
    background: var(--ax-panel-bg-soft);
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-border-soft);
}

/* ---------- Risultati ---------- */

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ax-space-4);
}

/* Gradiente blu tenue + bordo primary: lo stesso "look" della card di sintesi
   che Luca ha approvato. Uso color-mix sul primary-700 cosi' il gradiente
   funziona in entrambi i temi (in light diventa pale blue, in dark resta
   un alone blu opaco sopra lo sfondo scuro). Specializzazioni come
   .result-ok / .result-ko / .result-card-highlight continuano a sovrascrivere
   background / border-color senza cambiamenti, perche' arrivano dopo. */
.result-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--ax-space-4);
    border-radius: var(--ax-radius-md);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ax-primary-700) 12%, transparent),
            color-mix(in srgb, var(--ax-primary-700) 5%, transparent));
    border: 1px solid var(--ax-primary-700);
}

.result-label {
    font-size: var(--ax-fs-11);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ax-text-2);
    font-weight: 600;
}

.result-value {
    font-size: var(--ax-fs-22);
    font-weight: 700;
    color: var(--ax-text-1);
}

.result-hint {
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
}

.result-ok {
    background: color-mix(in srgb, var(--ax-success-500, #16a34a) 12%, transparent);
    border-color: color-mix(in srgb, var(--ax-success-500, #16a34a) 40%, transparent);
}

.result-ko {
    background: color-mix(in srgb, var(--ax-danger-500, #dc2626) 12%, transparent);
    border-color: color-mix(in srgb, var(--ax-danger-500, #dc2626) 40%, transparent);
}

/* ---------- Pulsanti studio ---------- */

.studio-actions-row {
    display: flex;
    gap: var(--ax-space-3);
    flex-wrap: wrap;
}

.studio-actions-row-center {
    justify-content: space-between;
    margin-top: var(--ax-space-4);
}

.studio-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-2);
    min-height: var(--ax-btn-min-height);
    padding: var(--ax-btn-padding-y) var(--ax-btn-padding-x);
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-border-strong);
    background: var(--ax-gray-0);
    color: var(--ax-text-2);
    font-family: var(--ax-font-sans);
    font-size: var(--ax-fs-13);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.studio-button:hover:not(:disabled) {
    background: var(--ax-panel-bg-soft);
    color: var(--ax-text-1);
    border-color: var(--ax-primary-500);
}

.studio-button:focus-visible {
    outline: none;
    box-shadow: var(--ax-shadow-focus);
}

.studio-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.studio-button-primary {
    background: var(--ax-primary-700);
    color: var(--ax-text-on-primary);
    border-color: var(--ax-primary-700);
}

.studio-button-primary:hover:not(:disabled) {
    background: var(--ax-primary-800);
    border-color: var(--ax-primary-800);
    color: var(--ax-text-on-primary);
}

/* L'icona (FluentIcon = svg/fluent-icon) segue il colore del testo del bottone.
   Senza questa regola resta nel colore accent di default e sui bottoni pieni
   (blu) sparisce. */
.studio-button svg,
.studio-button fluent-icon {
    color: inherit;
    fill: currentColor;
}

.studio-button-secondary {
    background: var(--ax-gray-0);
    color: var(--ax-text-2);
    border-color: var(--ax-border-strong);
}

.studio-button-ghost {
    background: transparent;
    color: var(--ax-text-2);
    border-color: transparent;
}

.studio-button-ghost:hover:not(:disabled) {
    background: var(--ax-panel-bg-soft);
    color: var(--ax-text-1);
    border-color: var(--ax-border-soft);
}

.studio-button-warning {
    background: var(--ax-warning, #b45309);
    color: #ffffff;
    border-color: var(--ax-warning, #b45309);
}

.studio-button-warning:hover:not(:disabled) {
    background: var(--ax-warning-strong, #92400e);
    border-color: var(--ax-warning-strong, #92400e);
    color: #ffffff;
}

/* Icone dei bottoni: un'unica regola valida per tutti gli usi di .studio-button.
   Dimensione uniforme e piena visibilità. Sui bottoni chiari (secondary/ghost/
   default) l'icona ereditava --ax-text-2 e risultava troppo tenue: la rinforzo a
   --ax-text-1. Su primary/warning resta bianca per contrasto sul fondo pieno. */
.studio-button svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.studio-button:not(.studio-button-primary):not(.studio-button-warning) svg {
    color: var(--ax-text-1);
}

/* Bottone solo-icona (es. Salva): quadrato e centrato; l'etichetta vive nel
   title/aria-label, così l'icona sostituisce il testo senza perdere il senso. */
.studio-button-icona {
    padding: 8px;
    aspect-ratio: 1 / 1;
    justify-content: center;
}

/* ---------- Alert (info / errore) ---------- */

.alert {
    padding: var(--ax-space-3) var(--ax-space-4);
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-border-soft);
    background: var(--ax-panel-bg-soft);
    color: var(--ax-text-1);
    font-size: var(--ax-fs-14);
}

.alert-info {
    background: color-mix(in srgb, var(--ax-primary-500) 10%, transparent);
    border-color: color-mix(in srgb, var(--ax-primary-500) 30%, transparent);
}

.alert-errore {
    background: color-mix(in srgb, var(--ax-danger-500, #dc2626) 10%, transparent);
    border-color: color-mix(in srgb, var(--ax-danger-500, #dc2626) 40%, transparent);
    color: var(--ax-danger-700, #991b1b);
}

/* ---------- Empty state (placeholder "nessun elemento") ----------
   Pattern usato quando una sezione del wizard non ha ancora dati da
   mostrare (es. tabella locali vuota), per guidare l'utente con un
   invito alla compilazione invece di lasciarlo davanti a una tabella
   vuota. */

.studio-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ax-space-3);
    padding: var(--ax-space-7) var(--ax-space-5);
    border: 2px dashed var(--ax-border-strong);
    border-radius: var(--ax-radius-lg);
    background: var(--ax-panel-bg-soft);
    color: var(--ax-text-2);
}

.studio-empty-state-icon {
    font-size: 2.4rem;
    line-height: 1;
}

.studio-empty-state-title {
    margin: 0;
    font-size: var(--ax-fs-18);
    font-weight: 600;
    color: var(--ax-text-1);
}

.studio-empty-state-text {
    margin: 0;
    max-width: 48rem;
    font-size: var(--ax-fs-14);
    line-height: 1.55;
    color: var(--ax-text-2);
}

/* ---------- Studio sospeso (badge + messaggio motivazionale) ----------
   Classi usate sia in /studi (PaginaStudi) sia nella Home, in entrambe le
   griglie di card. Quando l'admin sospende un modulo da /admin/sospensioni,
   la card prende un bordo arancione warm, mostra il badge "Sospeso" in alto
   a destra e il messaggio scritto dall'admin come banner motivazionale. */

.studio-card-sospeso {
    border-color: color-mix(in srgb, var(--ax-highlight) 40%, transparent);
    background: var(--ax-highlight-soft);
    color: var(--ax-gray-900);
}

.studio-card-sospeso .studio-card-header {
    position: relative;
}

.studio-card-sospeso .studio-card-title {
    color: var(--ax-gray-900);
}

.studio-card-sospeso .studio-card-subtitle,
.studio-card-sospeso .studio-card-text {
    color: var(--ax-gray-700);
}

.studio-card-badge-sospeso {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 10px;
    font-size: var(--ax-fs-11);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--ax-highlight-on);
    background: var(--ax-highlight);
    border-radius: var(--ax-radius-pill);
}

.studio-card-sospeso-msg {
    margin-top: var(--ax-space-3);
    padding: var(--ax-space-3) var(--ax-space-4);
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed color-mix(in srgb, var(--ax-highlight) 40%, transparent);
    border-radius: var(--ax-radius-sm);
    color: var(--ax-gray-700);
    font-size: var(--ax-fs-13);
    line-height: 1.55;
    white-space: pre-line;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    .panel-card {
        padding: var(--ax-space-4) var(--ax-space-5);
    }

    .studio-hero {
        padding: var(--ax-space-5) var(--ax-space-5);
    }
}