/* ============================================================
   GesTask — Sovrapposizioni Prime
   Finestre, pannelli laterali, riquadri ancorati, avvisi e suggerimenti.
   ============================================================ */

/* ── Maschera ───────────────────────────────────────────────────── */

/* La maschera è anche il contenitore che centra: senza, ogni finestra
   dovrebbe posizionarsi da sé e le finestre alte uscirebbero dallo schermo
   invece di scorrere. */
.p-mask {
    align-items: center;
    background: var(--p-mask-background);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.5rem;
    position: fixed;
    z-index: 1100;
}

@supports (backdrop-filter: blur(1px)) {
    .p-mask { backdrop-filter: blur(3px); }
}

.p-mask[hidden] { display: none; }
.p-mask-enter { animation: p-fade-in var(--p-transition-duration) ease; }
.p-mask-leave { animation: p-fade-out var(--p-transition-duration) ease forwards; }

/* Le sovrapposizioni senza maschera (pannelli laterali) allineano invece di
   centrare: il contenuto va al bordo dello schermo. */
.p-mask-left   { justify-content: flex-start; padding: 0; }
.p-mask-right  { justify-content: flex-end;   padding: 0; }
.p-mask-top    { align-items: flex-start;     padding: 0; }
.p-mask-bottom { align-items: flex-end;       padding: 0; }

/* ── Finestra ───────────────────────────────────────────────────── */

.p-dialog {
    background: var(--p-overlay-background);
    border: 1px solid var(--p-overlay-border-color);
    border-radius: var(--p-overlay-border-radius);
    box-shadow: var(--p-shadow-xl);
    color: var(--p-overlay-color);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    max-width: 100%;
    width: var(--p-dialog-width, 32rem);
}

.p-dialog-enter { animation: p-scale-in var(--p-transition-duration) ease; }
.p-dialog-leave { animation: p-scale-out var(--p-transition-duration) ease forwards; }

.p-dialog-sm { --p-dialog-width: 24rem; }
.p-dialog-lg { --p-dialog-width: 46rem; }
.p-dialog-xl { --p-dialog-width: 64rem; }

/* La finestra a tutto schermo serve agli editor: il contenuto è troppo per
   una colonna, e ridurlo a una colonna sarebbe la scelta sbagliata. */
.p-dialog-maximized {
    border-radius: 0;
    height: 100%;
    width: 100%;
}

.p-dialog-header {
    align-items: center;
    border-bottom: 1px solid var(--p-content-border-color);
    display: flex;
    flex: 0 0 auto;
    gap: .75rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.p-dialog-title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}

.p-dialog-header-actions { display: flex; gap: .25rem; }

.p-dialog-header-icon {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--p-border-radius-md);
    color: var(--p-text-muted-color);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    transition: background-color var(--p-transition-fast), color var(--p-transition-fast);
    width: 2rem;
}

.p-dialog-header-icon:hover {
    background: var(--p-content-hover-background);
    color: var(--p-text-color);
}

/* Solo il corpo scorre: intestazione e piede restano fermi, così i pulsanti
   di conferma non scappano fuori schermo in una finestra lunga. */
.p-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
}

.p-dialog-footer {
    border-top: 1px solid var(--p-content-border-color);
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    padding: .875rem 1.25rem;
}

/* La finestra di conferma: icona a sinistra, messaggio accanto. L'icona è
   grande perché è quella che dice, prima del testo, quanto è grave. */
.p-confirmdialog .p-dialog-content {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
}

.p-confirmdialog-icon {
    color: var(--p-confirm-icon-color, var(--p-warn-color));
    flex: 0 0 auto;
    font-size: 1.75rem;
    line-height: 1;
}

.p-confirmdialog-message { margin: 0; }

/* ── Pannello laterale ──────────────────────────────────────────── */

.p-drawer {
    background: var(--p-overlay-background);
    box-shadow: var(--p-shadow-xl);
    color: var(--p-overlay-color);
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.p-drawer-left,
.p-drawer-right {
    height: 100%;
    width: var(--p-drawer-size, 22rem);
}

.p-drawer-top,
.p-drawer-bottom {
    height: var(--p-drawer-size, 18rem);
    width: 100%;
}

.p-drawer-left   { border-right: 1px solid var(--p-overlay-border-color); animation: p-drawer-in-left var(--p-transition-duration) ease; }
.p-drawer-right  { border-left: 1px solid var(--p-overlay-border-color);  animation: p-drawer-in-right var(--p-transition-duration) ease; }
.p-drawer-top    { border-bottom: 1px solid var(--p-overlay-border-color); animation: p-drawer-in-top var(--p-transition-duration) ease; }
.p-drawer-bottom { border-top: 1px solid var(--p-overlay-border-color);    animation: p-drawer-in-bottom var(--p-transition-duration) ease; }

@keyframes p-drawer-in-left   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes p-drawer-in-right  { from { transform: translateX(100%); }  to { transform: translateX(0); } }
@keyframes p-drawer-in-top    { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes p-drawer-in-bottom { from { transform: translateY(100%); }  to { transform: translateY(0); } }

.p-drawer-header {
    align-items: center;
    border-bottom: 1px solid var(--p-content-border-color);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.p-drawer-title { font-size: 1rem; font-weight: 700; margin: 0; }

.p-drawer-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
}

.p-drawer-footer {
    border-top: 1px solid var(--p-content-border-color);
    padding: .875rem 1.25rem;
}

/* ── Riquadro ancorato ──────────────────────────────────────────── */

/* Ancorato a un elemento della pagina invece che allo schermo. La posizione
   la calcola JavaScript; il foglio si occupa solo dell'aspetto e del
   verso di comparsa. */
.p-popover {
    background: var(--p-overlay-background);
    border: 1px solid var(--p-overlay-border-color);
    border-radius: var(--p-overlay-border-radius);
    box-shadow: var(--p-overlay-shadow);
    color: var(--p-overlay-color);
    display: none;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: .875rem;
    position: absolute;
    z-index: 1200;
}

.p-popover.p-connected-overlay-visible {
    animation: p-slide-down var(--p-transition-duration) ease;
    display: block;
}

.p-popover-header {
    border-bottom: 1px solid var(--p-content-border-color);
    font-weight: 700;
    margin: -.875rem -.875rem .75rem;
    padding: .75rem .875rem;
}

/* La punta è un quadrato ruotato di 45 gradi con due soli lati bordati: si
   incastra sul bordo del riquadro e ne continua la cornice. */
.p-popover-arrow {
    background: var(--p-overlay-background);
    border: 1px solid var(--p-overlay-border-color);
    height: .625rem;
    position: absolute;
    transform: rotate(45deg);
    width: .625rem;
}

.p-popover-arrow-top    { border-bottom: 0; border-right: 0; top: -.375rem; }
.p-popover-arrow-bottom { border-left: 0; border-top: 0; bottom: -.375rem; }

/* ── Suggerimento ───────────────────────────────────────────────── */

.p-tooltip {
    background: var(--p-surface-900);
    border-radius: var(--p-border-radius-md);
    box-shadow: var(--p-shadow-md);
    color: var(--p-surface-0);
    font-size: var(--p-font-size-sm);
    line-height: 1.4;
    max-width: 18rem;
    padding: .375rem .625rem;
    pointer-events: none;
    position: absolute;
    z-index: 1300;
}

[data-bs-theme='dark'] .p-tooltip {
    background: var(--p-surface-700);
    color: var(--p-surface-0);
}

.p-tooltip-visible { animation: p-fade-in var(--p-transition-fast) ease; }

/* ── Avvisi temporanei ──────────────────────────────────────────── */

/* La colonna degli avvisi vive sopra ogni altra sovrapposizione: un errore
   sollevato da una finestra deve restare leggibile sopra la finestra che lo
   ha sollevato. Non intercetta i clic tranne che sui messaggi stessi. */
.p-toast {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
    position: fixed;
    width: 22rem;
    z-index: 1400;
}

.p-toast-top-right    { right: 1.25rem; top: calc(var(--p-header-height) + 1rem); }
.p-toast-top-center   { left: 50%; top: calc(var(--p-header-height) + 1rem); transform: translateX(-50%); }
.p-toast-bottom-right { bottom: 1.25rem; right: 1.25rem; }

.p-toast-message {
    align-items: flex-start;
    animation: p-slide-up var(--p-transition-duration) ease;
    background: var(--p-overlay-background);
    border: 1px solid var(--p-toast-border, var(--p-content-border-color));
    border-left: 4px solid var(--p-toast-accent, var(--p-primary-color));
    border-radius: var(--p-border-radius-lg);
    box-shadow: var(--p-shadow-lg);
    color: var(--p-overlay-color);
    display: flex;
    gap: .75rem;
    padding: .875rem 1rem;
    pointer-events: auto;
}

.p-toast-message-leave { animation: p-fade-out var(--p-transition-duration) ease forwards; }

.p-toast-message-icon {
    color: var(--p-toast-accent, var(--p-primary-color));
    flex: 0 0 auto;
    font-size: 1.125rem;
    line-height: 1.35;
}

.p-toast-message-text { flex: 1 1 auto; min-width: 0; }

.p-toast-summary { font-weight: 700; line-height: 1.35; }

.p-toast-detail {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    line-height: 1.4;
    margin-top: .125rem;
}

.p-toast-close {
    background: none;
    border: 0;
    color: var(--p-text-muted-color);
    cursor: pointer;
    flex: 0 0 auto;
    line-height: 1;
    padding: .125rem;
}

.p-toast-close:hover { color: var(--p-text-color); }

.p-toast-message-success { --p-toast-accent: var(--p-success-color); }
.p-toast-message-info    { --p-toast-accent: var(--p-info-color); }
.p-toast-message-warn    { --p-toast-accent: var(--p-warn-color); }
.p-toast-message-error   { --p-toast-accent: var(--p-danger-color); }

/* ── Messaggio in linea ─────────────────────────────────────────── */

/* Non è temporaneo: sta nella pagina e ci resta. Lo usano gli avvisi di
   Yii e le spiegazioni sopra un modulo. */
.p-message {
    --p-message-accent: var(--p-info-color);
    --p-message-bg: var(--p-info-subtle-color);
    --p-message-color: var(--p-info-emphasis-color);

    align-items: flex-start;
    background: var(--p-message-bg);
    border: 1px solid transparent;
    border-left: 4px solid var(--p-message-accent);
    border-radius: var(--p-border-radius-lg);
    color: var(--p-message-color);
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
}

.p-message-success { --p-message-accent: var(--p-success-color); --p-message-bg: var(--p-success-subtle-color); --p-message-color: var(--p-success-emphasis-color); }
.p-message-info    { --p-message-accent: var(--p-info-color);    --p-message-bg: var(--p-info-subtle-color);    --p-message-color: var(--p-info-emphasis-color); }
.p-message-warn    { --p-message-accent: var(--p-warn-color);    --p-message-bg: var(--p-warn-subtle-color);    --p-message-color: var(--p-warn-emphasis-color); }
.p-message-error   { --p-message-accent: var(--p-danger-color);  --p-message-bg: var(--p-danger-subtle-color);  --p-message-color: var(--p-danger-emphasis-color); }
.p-message-secondary { --p-message-accent: var(--p-surface-400); --p-message-bg: var(--p-content-alt-background); --p-message-color: var(--p-text-color); }

.p-message-icon { flex: 0 0 auto; font-size: 1.125rem; line-height: 1.35; }
.p-message-text { flex: 1 1 auto; min-width: 0; }
.p-message-summary { font-weight: 700; }
.p-message-detail { font-size: var(--p-font-size-sm); }

.p-message-close {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    flex: 0 0 auto;
    line-height: 1;
    opacity: .6;
    padding: .125rem;
}

.p-message-close:hover { opacity: 1; }

/* La variante compatta, senza fondo: sotto un campo o dentro una riga di
   tabella il rettangolo colorato peserebbe più del messaggio. */
.p-message-simple {
    background: transparent;
    border: 0;
    margin-bottom: 0;
    padding: 0;
}