/* =============================================================================
   SEDNA PAGE SHELL — guscio standard per pagine lista/consultazione
   =============================================================================
   Contratto: LA PAGINA NON SCROLLA MAI. Header, toolbar e footer sono fissi;
   scrolla solo __body. Le griglie mostrano quante piu' righe il viewport
   permette, su qualsiasi schermo.

   Uso:
     <div class="sedna-page">
       <header class="sedna-page__head">
         <span class="sedna-page__crest"><i class="bi bi-..."></i></span>
         <h1 class="sedna-page__title">Titolo <span class="sedna-page__sub">...</span></h1>
         <div class="sedna-page__actions">...</div>
       </header>
       <div class="sedna-page__tools">...filtri (1 riga)...</div>
       <div class="sedna-page__body">...tabella con scroll proprio...</div>
       <footer class="sedna-page__foot">...totali/pager...</footer>
     </div>

   Varianti __body:
   - default: overflow auto (tabelle HTML: thead sticky funziona qui dentro)
   - --host:  overflow hidden, il figlio riempie al 100% e gestisce lo scroll
              da solo (SednaDataGrid/DevExpress).

   Su viewport BASSI (laptop 13-14") le media query sull'ALTEZZA comprimono
   automaticamente gap, header e crest: +3/6 righe visibili senza toccare
   le pagine.
   ============================================================================= */

.sedna-page {
    /* 2 x padding di .sedna-main-content__inner (0.5rem) */
    --sedna-page-inset: 1rem;
    /* ⚠️ IL FIANCO DEL DOCUMENTO E' LA REGOLA DI TUTTI (Antonio, 20/08). Erano tre
       misure diverse: 22px sulle liste, 7px sul documento, 0 su otto pagine che se
       l'erano azzerato a mano — e passando da una pagina all'altra il contenuto si
       spostava di lato. Vince quella del documento perche' e' la pagina dove ogni
       millimetro orizzontale e' una colonna di griglia in piu': se basta li', basta
       ovunque. Chi vuole cambiarla la cambia QUI, non nel proprio foglio. */
    --sedna-page-pad-x: clamp(0.25rem, 0.5vw, 0.5rem);
    --sedna-page-gap: 0.75rem;
    /* ⚠️ TUTTI GLI HEADER DEL PORTALE HANNO LA MISURA DELLA FATTURA (Antonio, 20/08):
       42px di altezza, titolo 1rem, stemma 26px. Prima ognuno andava per conto suo —
       misurati a schermo: documento 42, registro IVA 44, ciclo attivo 50 — e passando
       da una pagina all'altra la testata "saltava".
       La fattura e' il riferimento perche' e' la pagina dove il corpo conta piu' di
       tutto: ogni pixel della testata e' altezza tolta alle righe del documento. */
    --sedna-page-crest-size: 1.25rem;   /* 20px */
    --sedna-page-title-size: 0.875rem;  /* 14px */

    display: flex;
    flex-direction: column;
    gap: var(--sedna-page-gap);
    height: calc(100vh - var(--sedna-page-inset));
    height: calc(100dvh - var(--sedna-page-inset));
    min-height: 420px;
    overflow: hidden;
    padding-inline: var(--sedna-page-pad-x);
    padding-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   HEAD — una sola riga: crest + titolo con sottotitolo IN LINEA + azioni
   --------------------------------------------------------------------------- */
.sedna-page__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--sedna-page-crest-size, 1.25rem);
}

.sedna-page__crest {
    width: var(--sedna-page-crest-size, 1.25rem);
    height: var(--sedna-page-crest-size, 1.25rem);
    border-radius: 0.5rem;
    background: var(--sedna-surface-hover, #eef0f3);
    color: var(--sedna-text-secondary);
    display: grid;
    place-items: center;
    font-size: 0.8125rem;
    flex: none;
}

/* Il titolo e' l'elemento CEDEVOLE della riga: min-width 0 + overflow hidden fanno
   si' che, quando titolo lungo e pulsantiera non ci stanno insieme, a stringersi sia
   il testo e non i pulsanti. Senza questo la barra azioni veniva spinta fuori dalla
   card (o a capo), e l'intestazione smetteva di essere "una riga sola". */
.sedna-page__title {
    margin: 0;
    font-size: var(--sedna-page-title-size, 0.875rem);
    font-weight: var(--sedna-font-semibold, 600);
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--sedna-text);
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
}

.sedna-page__sub {
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--sedna-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
}

    .sedna-page__sub .mono {
        font-family: var(--sedna-font-mono);
        color: var(--sedna-text);
        font-weight: 500;
    }

.sedna-page__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.3rem;
    flex: none;
}

/* Pulsanti della pulsantiera COMPATTI: altezza 24px e font 12px (erano 31/13),
   padding stretto e icona un filo piu' piccola. Recuperano spazio senza perdere
   leggibilita'; vale ovunque compaia la pulsantiera standard (CRUD e frecce).
   Vale ANCHE per i pulsanti che la pagina mette nello slot <Actions>: il canone
   chiede SizeMode.Small, ma se qualcuno lo dimentica la barra non si sfalsa —
   una riga di pulsanti di due altezze diverse e' la cosa che si nota per prima. */
.sedna-page__actions .dxbl-btn {
    height: 24px;
    min-height: 24px;
    padding: 0 0.5rem;
    font-size: 12px;
    line-height: 1;
}

/* I pulsanti avvolti in <span title="..."> (Elimina/Modifica, dove il tooltip deve
   funzionare anche da disabilitati) restano elementi di flex come gli altri: senza
   questo lo span si allunga in altezza e disallinea il pulsante che contiene. */
.sedna-page__actions > span {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.sedna-page__actions .dxbl-btn .dxbl-image,
.sedna-page__actions .dxbl-btn svg {
    width: 0.9em;
    height: 0.9em;
}

/* Variante CARD: l'header resta la card standard del design system senza
   costare una riga in piu' (stesso contenuto a una riga, solo vestito). */
/* Freccetta INDIETRO della testata: presenza minima. Nessun bordo, nessuno sfondo a
   riposo, colore terziario e larghezza appena sufficiente al glifo — si accende solo
   al passaggio del mouse. Sta a sinistra del crest e non entra nel flusso del titolo,
   così le testate compatte (bilancio, documento) non crescono di un pixel. */
.sedna-page__back {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: -0.25rem;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    border-radius: var(--sedna-radius-base, 0.375rem);
    color: var(--sedna-text-tertiary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.sedna-page__back:hover {
    background: var(--sedna-surface-hover, #eef0f3);
    color: var(--sedna-text);
}

.sedna-page__back:focus-visible {
    outline: 2px solid var(--sedna-primary);
    outline-offset: 1px;
}

.sedna-page__head--card {
    background: var(--sedna-surface);
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-lg, 0.75rem);
    /* 8px sopra e sotto: e' quello che rende l'altezza 42px con lo stemma da 26. */
    padding: 8px var(--sedna-space-4, 1rem);
    box-shadow: var(--sedna-shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.04));
}

/* ---------------------------------------------------------------------------
   TOOLS — riga filtri/ricerca (budget: 1 riga; l'avanzato va dietro disclosure)
   --------------------------------------------------------------------------- */
.sedna-page__tools {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   BODY — l'unica zona che scrolla
   --------------------------------------------------------------------------- */
.sedna-page__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    position: relative;
}

/* Variante per griglie con scroll interno proprio (SednaDataGrid/DevExpress):
   il wrapper non scrolla, il figlio riempie e scrolla lui. */
.sedna-page__body--host {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .sedna-page__body--host > * {
        flex: 1 1 auto;
        min-height: 0;
    }

/* ---------------------------------------------------------------------------
   FOOT — totali / pager, sempre visibile
   --------------------------------------------------------------------------- */
.sedna-page__foot {
    flex: none;
}

/* ---------------------------------------------------------------------------
   COMPRESSIONE VERTICALE AUTOMATICA (media query sull'ALTEZZA)
   Laptop 14" (~768-820px utile): meno aria, stesso stile.
   --------------------------------------------------------------------------- */
@media (max-height: 860px) {
    .sedna-page {
        --sedna-page-gap: 0.5rem;
        padding-top: 0.25rem;
    }
    /* ⚠️ QUI PRIMA SI RIDEFINIVANO crest e titolo (2rem / 1.25rem). Era una COMPRESSIONE
       quando la base era 2.25/1.375; con la base di adesso (1.25/0.875) quegli stessi
       numeri sono un INGRANDIMENTO — e su un portatile, cioe' proprio dove serviva
       risparmiare, la testata cresceva invece di stringersi. Tolti: la base e' gia'
       compatta e non ha bisogno di una seconda misura. */
}

/* Schermi molto bassi (finestre ridotte, 720p): il crest sparisce,
   il sottotitolo pure — resta l'essenziale. */
@media (max-height: 740px) {
    .sedna-page {
        --sedna-page-gap: 0.375rem;
    }

    .sedna-page__crest {
        display: none;
    }

    .sedna-page__sub {
        display: none;
    }
}