/* ============================================================
   MODALI — un solo linguaggio per tutte le finestre dell'app.

   Tre famiglie, stesso aspetto:
   • .doc-modal      il guscio grande che apre un documento in un iframe
                     (Dettagli / Storico / Modifica dalle liste)
   • .app-modal      i modal Bootstrap dell'app (nuovo cliente, mancanze,
                     import fornitore, merce in arrivo…)
   • .sheet-overlay  le finestrelle costruite a mano in JS, che non passano
                     da Bootstrap (nuovo metodo di pagamento, riuso logo)

   Due regole valgono per tutte e tre:

   1. Il contenuto respira. Bootstrap dà 1rem di padding, che con html a
      14px diventano 14px scarsi: testo e campi finiscono appiccicati al
      bordo. Qui intestazione, corpo e azioni hanno un passo loro.

   2. La finestra non supera mai l'altezza dello schermo: a scorrere è solo
      il corpo, intestazione e bottoni restano dove sono. Senza questo, su
      un modal lungo il bottone "Salva" sparisce sopra o sotto la piega.

   Sotto i 640px diventano fogli agganciati in basso, non pagine a tutto
   schermo: sopra resta una striscia di sfondo, quindi si capisce che è una
   finestra che si chiude e non una nuova pagina, e i bottoni cadono dove
   arriva il pollice.

   Caricato da _Layout e da _LayoutModale: le pagine dentro l'iframe hanno
   le loro finestre, e devono averle uguali a quelle a pagina intera.
   ============================================================ */

:root {
    --modal-radius: 12px;
    --modal-radius-sheet: 16px;
    --modal-pad-x: 22px;
    --modal-shadow: 0 24px 64px rgba(9, 9, 11, .20), 0 2px 8px rgba(9, 9, 11, .06);
    /* Quanto sfondo resta scoperto sopra il foglio su mobile: poco, ma
       abbastanza da vedere che sotto c'è la lista e da poterci toccare per chiudere. */
    --modal-sheet-gap: 34px;
}


/* ======================================================================
   1. SCHELETRO CONDIVISO — .app-modal (modal Bootstrap dell'app)
   ====================================================================== */
.app-modal .modal-content {
    border: 1px solid var(--border-default, #E4E4E7);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    /* L'altezza è un tetto, non una misura: i modal corti restano corti. */
    max-height: calc(100vh - 3.5rem);
    max-height: calc(100dvh - 3.5rem);
    overflow: hidden;
}

.app-modal .modal-header {
    position: relative;               /* aggancio per la maniglia del foglio su mobile */
    align-items: center;
    gap: 12px;
    padding: 16px var(--modal-pad-x);
    border-bottom: 1px solid var(--border-default, #E4E4E7);
    background: var(--bg-page, #fff);
}

.app-modal .modal-title {
    display: flex;
    align-items: center;
    /* min-width:0 lascia che un titolo lungo vada a capo invece di spingere
       fuori il tasto chiudi. */
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary, #18181B);
}

.app-modal .modal-body {
    padding: 20px var(--modal-pad-x);
    /* min-height:0 serve al flex: senza, il corpo non si lascia comprimere
       e a scorrere finisce la finestra intera invece del solo contenuto. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* L'ultimo campo porta con sé il margine di .form-group: sommato al padding
   del corpo lascia un buco sotto che non c'entra con quello sopra. */
.app-modal .modal-body > :last-child,
.app-modal .modal-body > :last-child > .form-group:last-child { margin-bottom: 0; }

.app-modal .modal-footer {
    gap: 10px;
    padding: 14px var(--modal-pad-x);
    border-top: 1px solid var(--border-default, #E4E4E7);
    background: var(--bg-subtle, #FAFAFA);
}
/* Bootstrap dà 0.25rem di margine a ogni figlio del footer: con gap diventa
   una spaziatura doppia e disallineata. */
.app-modal .modal-footer > * { margin: 0; }
.app-modal .modal-footer form { display: inline-flex; margin: 0; }


/* ======================================================================
   2. TASTO CHIUDI — quello di Bootstrap è una crocetta di 1em al 50%
      di opacità: piccola da centrare col dito e slavata sul bianco.
   ====================================================================== */
.app-modal .modal-header .btn-close,
.doc-modal .modal-header .btn-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: var(--radius-md, 6px);
    background-size: 12px 12px;
    background-position: center;
    opacity: .55;
    transition: opacity .12s ease, background-color .12s ease;
}
.app-modal .modal-header .btn-close:hover,
.doc-modal .modal-header .btn-close:hover {
    opacity: 1;
    background-color: var(--bg-hover, #F4F4F5);
}
.app-modal .modal-header .btn-close:focus-visible,
.doc-modal .modal-header .btn-close:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(255, 212, 0, .35));
}


/* ======================================================================
   3. MODAL DOCUMENTO — il guscio con dentro l'iframe
      Qui il corpo è una pagina intera, quindi prende tutto lo spazio che
      può: il padding lo mette la pagina dentro (.modale-main), non questo.
   ====================================================================== */
.doc-modal .modal-dialog { max-width: min(1180px, calc(100vw - 48px)); }

.doc-modal .modal-content {
    height: 92vh;
    height: 92dvh;
    border: 1px solid var(--border-default, #E4E4E7);
    border-radius: 14px;
    box-shadow: var(--modal-shadow);
    overflow: hidden;
}

.doc-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-default, #E4E4E7);
    background: var(--bg-subtle, #FAFAFA);
}

.doc-modal .modal-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-modal-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.doc-modal .modal-body {
    padding: 0;
    position: relative;
    overflow: hidden;
}

.doc-modal-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--bg-page, #fff);
    opacity: 0;
    transition: opacity .18s ease;
}
.doc-modal-frame.is-pronto { opacity: 1; }

.doc-modal-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-tertiary, #71767c);
    font-size: 13px;
    background: var(--bg-page, #fff);
}
.doc-modal-loader[hidden] { display: none; }


/* ======================================================================
   4. LA PAGINA DENTRO L'IFRAME
      Dentro il modal manca la cornice dell'app, che è quella che di norma
      tiene il contenuto lontano dal bordo. Senza questo margine i titoli
      partono incollati al lato del modal.
   ====================================================================== */
body.modale-shell {
    background: var(--bg-page, #fff);
    margin: 0;
}
.modale-main { padding: 24px 26px 32px; }

/* Il titolo grande della pagina è già scritto nell'intestazione del modal:
   qui dentro serve il contenuto, non un secondo titolo della stessa cosa. */
.modale-shell .page-header { margin-bottom: 18px; }
.modale-shell .page-header h1 { font-size: 18px; }

/* Anche i blocchi fuori dai pannelli (avvisi, riepiloghi, validazioni)
   devono respirare: da soli hanno padding poco o nulla. */
.modale-shell .alert-success,
.modale-shell .alert-danger,
.modale-shell .alert-warning,
.modale-shell .alert-info {
    padding: 12px 16px;
    margin-bottom: 16px;
}
.modale-shell .empty-state { padding: 20px 4px; }


/* ======================================================================
   5. FINESTRE FATTE A MANO (senza Bootstrap)
      .sheet-overlay/.sheet-dialog è la forma nuova; .nm-* e .riuso-logo-*
      sono i due casi già esistenti, tenuti agganciati alle stesse regole
      perché il markup lo costruisce il JS e non ha senso duplicarlo.
   ====================================================================== */
.sheet-overlay,
.nm-overlay,
.riuso-logo-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(9, 9, 11, .5);
    z-index: 1080;
}
.nm-overlay { z-index: 1090; }
.sheet-overlay[hidden],
.nm-overlay[hidden] { display: none; }

.sheet-dialog,
.nm-dialog,
.riuso-logo-dialog {
    width: 100%;
    background: var(--bg-page, #fff);
    border: 1px solid var(--border-default, #E4E4E7);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    padding: 22px 24px;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    /* La barra azioni esce nel padding con un margine negativo: senza questo
       il browser ci vedrebbe del contenuto oltre il bordo e aprirebbe una
       barra di scorrimento orizzontale. */
    overflow-x: hidden;
    overscroll-behavior: contain;
}
.sheet-dialog,
.nm-dialog { max-width: 520px; }
.riuso-logo-dialog { max-width: 460px; }

.sheet-title,
.nm-title,
.riuso-logo-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #18181B);
    margin: 0 0 6px;
}

.nm-hint,
.riuso-logo-text {
    font-size: 13.5px;
    color: var(--text-secondary, #52525B);
    margin: 0 0 12px;
}

.nm-field { margin-bottom: 14px; }
.nm-field .form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary, #71717A);
    margin-bottom: 4px;
}
.nm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.nm-error {
    background: var(--danger-bg, #FEE2E2);
    border: 1px solid #FECDCA;
    color: var(--danger-text, #991B1B);
    border-radius: var(--radius-md, 6px);
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 14px;
}
.nm-error[hidden] { display: none; }

/* Le azioni stanno in fondo, staccate dai campi da una riga: così si vede
   dove finisce il modulo e dove comincia la decisione. */
.sheet-actions,
.nm-actions,
.riuso-logo-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: 18px -24px -22px;
    padding: 14px 24px;
    border-top: 1px solid var(--border-default, #E4E4E7);
    background: var(--bg-subtle, #FAFAFA);
    border-radius: 0 0 var(--modal-radius) var(--modal-radius);
}


/* ======================================================================
   6. MOBILE — fogli agganciati in basso, non pagine a tutto schermo
   ====================================================================== */
@media (max-width: 639.98px) {

    /* ---- modal Bootstrap dell'app ---- */
    .app-modal .modal-dialog {
        /* fixed invece che nel flusso del .modal: il foglio resta agganciato
           in basso anche mentre il corpo scorre. display/min-height annullano
           il centraggio di .modal-dialog-centered, che qui non serve più. */
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        width: auto;
        max-width: none;
        min-height: 0;
        margin: 0;
    }
    .app-modal .modal-content {
        max-height: calc(100vh - var(--modal-sheet-gap));
        max-height: calc(100dvh - var(--modal-sheet-gap));
        border-radius: var(--modal-radius-sheet) var(--modal-radius-sheet) 0 0;
        border-bottom: 0;
    }
    /* Entra dal basso, come ci si aspetta da un foglio. */
    .app-modal.fade .modal-dialog { transform: translateY(100%); }
    .app-modal.show .modal-dialog { transform: none; }

    /* Maniglia: dice "questo si trascina via" prima ancora di leggere il titolo. */
    .app-modal .modal-header { padding-top: 22px; }
    .app-modal .modal-header::before {
        content: '';
        position: absolute;
        top: 9px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: var(--radius-pill, 999px);
        background: var(--border-strong, #D4D4D8);
    }

    .app-modal .modal-body { padding: 18px 18px 20px; }
    .app-modal .modal-header,
    .app-modal .modal-footer { padding-left: 18px; padding-right: 18px; }

    /* Bottoni a tutta riga e in colonna: uno sopra l'altro non si sbagliano,
       e column-reverse porta l'azione principale sopra l'annulla. */
    .app-modal .modal-footer {
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        align-items: stretch;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .app-modal .modal-footer > *,
    .app-modal .modal-footer form > button,
    .app-modal .modal-footer > .btn-primary,
    .app-modal .modal-footer > .btn-secondary,
    .app-modal .modal-footer > .btn-ghost {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }

    /* ---- modal documento: quasi tutto lo schermo, ma resta una finestra ---- */
    .doc-modal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        width: auto;
        max-width: none;
        min-height: 0;
        margin: 0;
    }
    .doc-modal .modal-content {
        height: calc(100vh - var(--modal-sheet-gap));
        height: calc(100dvh - var(--modal-sheet-gap));
        border-radius: var(--modal-radius-sheet) var(--modal-radius-sheet) 0 0;
        border-bottom: 0;
    }
    .doc-modal.fade .modal-dialog { transform: translateY(100%); }
    .doc-modal.show .modal-dialog { transform: none; }

    /* Il titolo del documento è lungo: senza spazio la barra diventa
       titolo tagliato + due icone appiccicate. */
    .doc-modal .modal-header { padding: 12px 14px; }
    .doc-modal-tools .doc-modal-full-label { display: none; }

    /* ---- finestre fatte a mano ---- */
    .sheet-overlay,
    .nm-overlay,
    .riuso-logo-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .sheet-dialog,
    .nm-dialog,
    .riuso-logo-dialog {
        max-width: none;
        border: 0;
        border-radius: var(--modal-radius-sheet) var(--modal-radius-sheet) 0 0;
        padding: 22px 18px 0;
        max-height: calc(100vh - var(--modal-sheet-gap));
        max-height: calc(100dvh - var(--modal-sheet-gap));
    }
    .nm-grid { grid-template-columns: 1fr; }

    .sheet-actions,
    .nm-actions,
    .riuso-logo-actions {
        /* sticky: se il foglio scorre, i bottoni restano visibili in fondo
           invece di finire sotto la piega insieme all'ultimo campo. */
        position: sticky;
        bottom: 0;
        flex-direction: column-reverse;
        align-items: stretch;
        margin: 18px -18px 0;
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
    }
    .sheet-actions > *,
    .nm-actions > *,
    .riuso-logo-actions > * {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }
}


/* Schermi molto stretti: il passo laterale si stringe ancora un po',
   ma non va sotto i 14px o si torna al problema di partenza. */
@media (max-width: 359.98px) {
    .app-modal .modal-body,
    .app-modal .modal-header,
    .app-modal .modal-footer { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 767.98px) {
    .modale-main { padding: 16px 16px 28px; }
}


/* Chi ha chiesto meno animazioni non deve vedere il foglio salire. */
@media (prefers-reduced-motion: reduce) {
    .app-modal.fade .modal-dialog,
    .doc-modal.fade .modal-dialog { transition: none; }
}