/* #852 F2 - Finestra di modifica del WMK SYS Designer dentro il BackOffice (SysDesignerEditorWindow).
   Foglio globale (non isolato): il riquadro e' creato in JS e il MudDialog e' reso dal provider, quindi il CSS isolato
   non li raggiungerebbe. Dimensioni dai dati: wwwroot/js/sys-designer-window.js imposta sul contenitore .wmk-sdw le
   custom property da numeri validati (larghezza massima e preferita in px, altezza massima in vh, margine in px) e la
   classe .wmk-sdw--telefono (pointer coarse o larghezza sotto la soglia dei dati). Senza le custom property il
   contenitore occupa lo spazio disponibile. Unica costante: bersagli di almeno 2.75rem (44px, AGID/WCAG 2.5.8).

   1.18.1 (correzione dal collaudo): le dimensioni le decide solo .wmk-sdw; dialog, contenuto e titolo non hanno limiti
   propri. wmk-dialogs.css ha regole generiche per tutti i dialog senza .metadata-designer-modal, fra cui
     .mud-dialog:not(:has(.metadata-designer-modal)):not(:has(.mud-dialog-actions)) .mud-dialog-content { max-height: 80vh }
   (specificita' 0,4,0, piu' alta della regola del contenuto della 1.18.0, 0,3,0) e
     .mud-dialog:not(:has(.metadata-designer-modal)) .mud-dialog-title { flex: 0 0 64px; min-height: 64px }.
   Il contenuto restava all'80% dell'altezza mentre il riquadro e' alto finestraAltezzaMassima (desktop) o tutto lo schermo
   (telefono): overflow hidden tagliava la parte bassa degli editor del Designer con i comandi (Annulla, Indietro,
   Continua, Conferma e scrivi). Le regole qui sotto partono dal contenitore del provider (.mud-dialog-container >
   .mud-dialog, struttura di MudBlazor 9.11) e valgono solo per la classe della finestra: specificita' 0,3,0 sul dialog e
   0,5,0 su contenuto e titolo, maggiore di ogni regola di wmk-dialogs.css che li tocca, senza !important e senza
   dipendere dall'ordine dei fogli. wmk-dialogs.css non cambia: gli altri dialog restano come prima (prova di layout
   WMK_ENGIME_BACKOFFICE.Tests/Browser852F2/Invoke-852F2LayoutTest.ps1). */

.mud-dialog-container > .mud-dialog.wmk-sys-designer-window {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
    overflow: hidden;
}

/* Contenuto alto quanto .wmk-sdw: niente max-height (80vh di wmk-dialogs.css), niente padding (Gutters=false lascia
   12px in alto e in basso con mud-dialog-no-side-padding) e nessuna riduzione nel dialog flex. */
.mud-dialog-container > .mud-dialog.wmk-sys-designer-window .mud-dialog-content.wmk-sdw-contenuto {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Titolo del dialog (etichetta dai metadata): nome accessibile, nascosto solo visivamente e senza spazio (niente
   min-height 64px e flex 0 0 64px di wmk-dialogs.css). */
.mud-dialog-container > .mud-dialog.wmk-sys-designer-window > .mud-dialog-title.wmk-sdw-titolo {
    position: absolute;
    flex: none;
    width: 1px;
    height: 1px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.wmk-sdw {
    position: relative;
    box-sizing: border-box;
    width: min(
        var(--wmk-sdw-larghezza, var(--wmk-sdw-larghezza-massima, 100vw)),
        var(--wmk-sdw-larghezza-massima, 100vw),
        calc(100vw - 2 * var(--wmk-sdw-margine, 0px)));
    height: min(
        var(--wmk-sdw-altezza-massima, 100vh),
        calc(100dvh - 2 * var(--wmk-sdw-margine, 0px)));
    overflow: hidden;
}

/* Contenitore stabile del riquadro (nessun figlio Blazor): l'iframe occupa tutto lo spazio. */
.wmk-sdw-host,
.wmk-sdw-host > iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Pannello opaco di caricamento e di ripiego, sopra il riquadro reso inert. */
.wmk-sdw-pannello {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    box-sizing: border-box;
    text-align: center;
    background: var(--mud-palette-surface, Canvas);
    color: var(--mud-palette-text-primary, CanvasText);
    overflow-y: auto;
}

.wmk-sdw-messaggio {
    margin: 0;
    max-width: 40rem;
}

.wmk-sdw-messaggio:focus {
    outline: none;
}

.wmk-sdw-messaggio:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 4px;
}

.wmk-sdw-azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.wmk-sdw-azioni .mud-button-root,
.wmk-sdw-uscita.mud-button-root {
    min-height: 2.75rem;
}

/* Uscita del BackOffice nello stato pronto: primo elemento del dialog, visibile solo quando riceve il fuoco (come uno
   skip-link). Serve se il Designer smette di trattenere il Tab. */
.wmk-sdw-uscita.mud-button-root {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;
}

.wmk-sdw-uscita.mud-button-root:not(:focus) {
    width: 1px;
    height: 1px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.wmk-sdw-uscita.mud-button-root:focus-visible {
    outline: 3px solid var(--mud-palette-primary-text, #fff);
    outline-offset: -6px;
}

/* Telefono (classe dai dati): schermo intero, nessuno scorrimento orizzontale. */
.wmk-sdw.wmk-sdw--telefono {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
}

.mud-dialog-container > .mud-dialog.wmk-sys-designer-window:has(.wmk-sdw--telefono) {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    overflow-x: hidden;
}

/* 1.18.2 (terza correzione dal collaudo): gli avvisi MudBlazor stanno sopra i dialog (--mud-zindex-snackbar sopra
   --mud-zindex-dialog) e quelli del Designer con Ricarica (bozza, incerto, rientro) restavano sopra la finestra riaperta,
   su titolo e X dell'editor, senza potersi chiudere (fuori dal dialog tutto e' bloccato). Il comando li chiude
   all'apertura vera della finestra e li fa ricomparire alla chiusura se servono ancora (SysDesignerNoticeBoard); questa
   regola e' la garanzia visiva anche per un avviso aggiunto con la finestra aperta: finche' una finestra del Designer e'
   nella pagina nessun avviso del Designer (classe wmk-sys-designer-avviso dall'opzione SnackbarTypeClass) si vede. Gli
   altri avvisi (errori) e gli altri dialog non cambiano. */
body:has(.mud-dialog-container > .mud-dialog.wmk-sys-designer-window) .mud-snackbar.wmk-sys-designer-avviso {
    display: none;
}

@media (forced-colors: active) {
    /* 1.18.1: cornice su .wmk-sdw (box-sizing border-box), compresa nella sua misura: sul telefono non supera lo schermo
       (sul dialog aggiungeva 2px in larghezza e in altezza e tagliava il riquadro). */
    .wmk-sdw {
        border: 1px solid CanvasText;
    }

    .wmk-sdw-pannello {
        background: Canvas;
        color: CanvasText;
    }

    .wmk-sdw-messaggio:focus-visible,
    .wmk-sdw-uscita.mud-button-root:focus-visible {
        outline-color: Highlight;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mud-dialog.wmk-sys-designer-window,
    .mud-dialog.wmk-sys-designer-window *,
    .wmk-sdw * {
        animation: none !important;
        transition: none !important;
    }
}