/* =========================================================================
   Tabelle della relazione tecnica.

   Stili intenzionalmente GLOBALI: il <table class="relazione-tabella"> viene
   reso dal componente condiviso RelazioneTecnicaCard, e gli stessi marcatori
   compaiono nel documento HTML usato per l'export Word. Una regola CSS
   scoped (b-xxxx) non potrebbe servire entrambi i contesti.

   Token CSS di riferimento: --ax-paper-* (vedi auxilium.tokens.css). Le
   regole reggono sia tema chiaro sia scuro perche' le variabili commutano
   automaticamente con [data-theme="dark"] / .theme-dark.
   ========================================================================= */

.relazione-tabella-wrap {
    width: 100%;
    overflow-x: auto;          /* scroll laterale su mobile invece di rompere il layout */
    margin: 0.85rem 0 1.1rem;
    border: 1px solid var(--ax-paper-border);
    border-radius: 10px;
    background: var(--ax-paper-bg);
}

.relazione-tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--ax-paper-text);
}

/* Header: sfondo neutro chiaro, maiuscoletto piccolo per leggerlo come
   etichetta e non come titolo. Bordo inferiore piu' marcato per separare
   dall'area dati. */
.relazione-tabella thead th {
    padding: 0.65rem 0.9rem;
    background: var(--ax-paper-bg-2);
    color: var(--ax-paper-text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border-bottom: 2px solid var(--ax-paper-border);
    white-space: nowrap;       /* l'header non va spezzato: "Velocita v [m/s]" resta in linea */
}

/* Body: bordi orizzontali leggeri, nessun bordo verticale (stile "tabella
   tecnica moderna"). Padding generoso per la leggibilita'. */
.relazione-tabella tbody td {
    padding: 0.55rem 0.9rem;
    border-top: 1px solid var(--ax-paper-border);
    vertical-align: top;
}

.relazione-tabella tbody tr:first-child td {
    border-top: none;
}

/* Zebra discreta: alterna lo sfondo cosi' a scorrere righe lunghe l'occhio
   resta sulla riga giusta. Volutamente molto tenue (mix 35%) per non
   competere con header e bordi orizzontali. */
.relazione-tabella tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--ax-paper-bg-2) 35%, transparent);
}

/* Colonne numeriche: right-align + cifre tabulari per allineare i decimali
   incolonna. Il flag .num e' emesso da ServizioComposizioneRelazione e
   dalla preview Blazor sulla base del contenuto della colonna. */
.relazione-tabella th.num,
.relazione-tabella td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Su viewport stretti riduco un po' il padding ma tengo gli stili: la
   leggibilita' della relazione e' prioritaria, lo scroll orizzontale gia'
   gestito dal wrapper salva il layout. */
@media (max-width: 640px) {
    .relazione-tabella thead th,
    .relazione-tabella tbody td {
        padding: 0.45rem 0.65rem;
    }

    .relazione-tabella {
        font-size: 0.82rem;
    }
}

/* =========================================================================
   La definizione di .panel-card vive ora in auxilium.studi.css (punto
   unico di verita'). Qui restano solo gli stili specifici della relazione
   tecnica (.panel-header, .panel-title-*, .relazione-*, ecc.) che non
   appartengono al concetto di "panel" generico.
   ========================================================================= */

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ax-space-4);
    margin-bottom: var(--ax-space-4);
    padding-bottom: var(--ax-space-3);
    border-bottom: 1px solid var(--ax-border-soft);
}

.panel-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-space-3);
    min-width: 0;
}

.panel-title-accent {
    width: 3px;
    min-width: 3px;
    height: 1.2rem;
    margin-top: 4px;
    border-radius: var(--ax-radius-pill);
    background: var(--ax-primary-700);
}

.panel-title {
    margin: 0;
    font-size: var(--ax-fs-18);
    line-height: 1.2;
    font-weight: 600;
    color: var(--ax-text-1);
    letter-spacing: -0.01em;
}

.panel-subtitle {
    margin-top: 4px;
    font-size: var(--ax-fs-13);
    line-height: 1.45;
    color: var(--ax-text-3);
}

.panel-body {
    min-width: 0;
}

/* =========================================================================
   Menu kebab "..." della Relazione tecnica.
   Posizionato a destra dell'header (allineato dal flex space-between sopra)
   e popup ancorato a destra. Coerente in tutti gli studi.
   ========================================================================= */
.relazione-card {
    overflow: visible;  /* il popup del menu deve poter uscire dal box card */
}

.menu-relazione-wrap {
    position: relative;
    flex: 0 0 auto;
}

.menu-relazione-toggle {
    appearance: none;
    min-width: 38px;
    height: 32px;
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-border-strong);
    background: var(--ax-gray-0);
    color: var(--ax-text-2);
    font-size: var(--ax-fs-16);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.menu-relazione-toggle:hover {
    background: var(--ax-panel-bg-soft);
    color: var(--ax-text-1);
    border-color: var(--ax-primary-500);
}

.menu-relazione-overlay {
    position: fixed;
    inset: 0;
    border: none;
    background: transparent;
    z-index: 70;
}

.menu-relazione-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 14rem;
    padding: var(--ax-space-1);
    border-radius: var(--ax-radius-md);
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-border-soft);
    box-shadow: var(--ax-shadow-3);
    z-index: 71;
}

.menu-relazione-item {
    width: 100%;
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ax-text-1);
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--ax-radius-sm);
    font-size: var(--ax-fs-13);
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.menu-relazione-item:hover:not(:disabled) {
    background: var(--ax-primary-50);
    color: var(--ax-primary-700);
}

.menu-relazione-item:disabled {
    opacity: 0.45;
    cursor: default;
    color: var(--ax-text-4);
}

/* =========================================================================
   Feedback/empty state della relazione (banner di esito copia/Word/PDF
   e placeholder quando la relazione non e' ancora stata generata).
   ========================================================================= */
.relazione-feedback,
.relazione-empty {
    border-radius: var(--ax-radius-md);
    padding: var(--ax-space-4);
    font-size: var(--ax-fs-13);
    line-height: 1.5;
}

.relazione-feedback-success {
    margin-bottom: var(--ax-space-3);
    background: var(--ax-success-bg);
    border: 1px solid var(--ax-success-border);
    color: var(--ax-success-strong);
}

.relazione-feedback-error {
    margin-bottom: var(--ax-space-3);
    background: var(--ax-danger-bg);
    border: 1px solid var(--ax-danger-border);
    color: var(--ax-danger-strong);
}

.relazione-empty {
    background: var(--ax-panel-bg-soft);
    border: 1px solid var(--ax-border-soft);
    color: var(--ax-text-3);
    text-align: center;
}

/* =========================================================================
   DOCUMENTO RELAZIONE TECNICA — tipografia e impaginazione.

   Centralizzata qui (globale, NON scoped) perché RelazioneTecnicaCard non ha
   un .razor.css proprio: le copie scoped nei singoli studi (b-xxxx) non
   colpivano gli elementi del componente condiviso, quindi la relazione
   girava sugli stili di default del browser ed era incoerente tra studi
   (a volte il capitolo più piccolo del paragrafo).

   Scala e stile derivati dal modello Word "Relazione tecnica": Titolo 28pt
   centrato, Capitolo = Titolo1 16pt Tahoma, Paragrafo = Titolo2 grassetto,
   corpo Normale 12pt, intestazioni blu #0F4761. La scala decresce sempre:
   titolo > capitolo > paragrafo > corpo.
   ========================================================================= */
:root {
    --ax-relazione-heading-font: "Tahoma", "Verdana", "Segoe UI", sans-serif;
    --ax-relazione-heading-color: #0f4761;
}

.relazione-documento {
    position: relative;
    overflow: hidden;
    border-radius: var(--ax-radius-md);
    border: 1px solid var(--ax-paper-border);
    background: var(--ax-paper-bg);
    color: var(--ax-paper-text);
    box-shadow: var(--ax-shadow-1);
}

/* Filigrana diagonale come nel foglio stampato. */
.relazione-documento::before {
    content: "Auxilium Engineering";
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(11, 61, 145, 0.04);
    white-space: nowrap;
    pointer-events: none;
    font-family: var(--ax-font-sans);
}

/* Il padding fa da margini di pagina; max-width = misura di lettura A4. */
.relazione-contenuto {
    position: relative;
    z-index: 1;
    max-width: 50rem;
    margin: 0 auto;
    padding: var(--ax-space-6);
}

/* Intestazione documento centrata, come la prima pagina del modello. */
.relazione-heading {
    padding-bottom: var(--ax-space-4);
    margin-bottom: var(--ax-space-5);
    border-bottom: 2px solid var(--ax-relazione-heading-color);
    text-align: center;
}

.relazione-kicker {
    font-size: var(--ax-fs-11);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ax-primary-700);
    margin-bottom: 6px;
    font-weight: 700;
}

/* Titolo documento — modello: "Titolo" 28pt centrato. */
.relazione-titolo {
    margin: 0;
    font-family: var(--ax-relazione-heading-font);
    font-size: 1.7rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ax-relazione-heading-color);
}

.relazione-capitolo-blocco + .relazione-capitolo-blocco {
    margin-top: var(--ax-space-6);
}

/* Capitolo — modello: Titolo1, 16pt Tahoma, con stacco sopra. */
.relazione-capitolo {
    margin: var(--ax-space-6) 0 var(--ax-space-3) 0;
    font-family: var(--ax-relazione-heading-font);
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ax-relazione-heading-color);
}

.relazione-capitolo-blocco:first-child .relazione-capitolo {
    margin-top: 0;
}

.relazione-paragrafo + .relazione-paragrafo {
    margin-top: var(--ax-space-4);
}

/* Paragrafo — modello: Titolo2, grassetto. Sempre < capitolo, > corpo. */
.relazione-paragrafo-titolo {
    margin: 0 0 var(--ax-space-2) 0;
    font-family: var(--ax-relazione-heading-font);
    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ax-relazione-heading-color);
}

/* Corpo — modello: Normale 12pt. */
.relazione-testo {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ax-paper-text);
    text-align: justify;
}

.relazione-testo + .relazione-formula,
.relazione-formula + .relazione-testo,
.relazione-formula + .relazione-formula {
    margin-top: var(--ax-space-3);
}

.relazione-formula {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-1);
}

.relazione-formula-intestazione {
    font-size: 0.9rem;
    color: var(--ax-paper-text-soft);
}

.relazione-formula-intestazione strong {
    color: var(--ax-relazione-heading-color);
}

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

.relazione-formula-box {
    width: 100%;
    padding: var(--ax-space-4);
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-paper-border);
    background: var(--ax-paper-bg-2);
    color: var(--ax-paper-text);
    overflow-x: auto;
}

.relazione-formula-nota {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ax-paper-text-soft);
}

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

    .relazione-titolo { font-size: 1.45rem; }
    .relazione-capitolo { font-size: 1.15rem; }
    .relazione-paragrafo-titolo { font-size: 1rem; }

    .relazione-testo {
        font-size: 0.9rem;
        line-height: 1.55;
        text-align: left;
    }
}