/* ═══════════════════════════════════════════════════════════════════════════
   HamModal — UI refined per SweetAlert2.
   Stili applicati SOLO quando il popup ha la classe .ham-modal-popup
   (impostata da window.HamModal). Le altre Swal.fire dell'app non sono toccate.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Backdrop ───────────────────────────────────────────────────────────── */
.swal2-container.ham-modal-container {
    background: rgba(15, 23, 42, 0.32) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Popup card ─────────────────────────────────────────────────────────── */
.ham-modal-popup.swal2-popup {
    padding: 0;
    border-radius: 24px;
    /* Default SWAL ha overflow-y:auto sul popup e overflow:auto sull'html-container:
       clippa qualsiasi floating widget (datepicker, dropdown) che esce dal box.
       Lo mettiamo visible — i nostri modali non hanno bisogno di scroll interno. */
    overflow: visible;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 250, 251, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 32px rgba(15, 23, 42, 0.08),
        0 32px 64px -16px rgba(15, 23, 42, 0.10);
    color: #0f172a;
    font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Variante danger: alone rossastro impercettibile + ring */
.ham-modal-popup.ham-modal-danger.swal2-popup {
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(254, 226, 226, 0.55) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 250, 251, 0.92) 100%);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 32px rgba(190, 18, 60, 0.10),
        0 32px 64px -16px rgba(15, 23, 42, 0.10);
}

/* ── Close button ───────────────────────────────────────────────────────── */
.ham-modal-popup .swal2-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    color: #64748b;
    font-size: 24px;
    line-height: 1;
    border-radius: 10px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ham-modal-popup .swal2-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    transform: none;
}
.ham-modal-popup .swal2-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* ── Icon (success / warning / error / info / question) ──────────────────
   SWAL2 disegna le icone con linee a coordinate assolute su un box 80×80:
   non si possono scalare per pezzi (rompe l'allineamento con il cerchio).
   Uso `zoom` invece di `transform: scale` perché zoom riduce anche il
   layout box (no ghost space sotto l'icona). Browser support:
   Chromium/WebKit da sempre, Firefox 126+ (May 2024).
   Le animazioni native del container (.swal2-icon) animano transform e
   farebbero glitch sovrascrivendo lo zoom → le disabilito.
   Le animazioni "draw" sulle linee figlie restano. */
.ham-modal-popup .swal2-icon {
    align-self: flex-start;
    /* zoom scala anche margin/padding. Per allineare l'icona al padding-left
       del title (28px), dichiaro 47px (47 * 0.6 ≈ 28px visivi).
       Top: 30px → ~18px visivi di gap dal bordo superiore. */
    margin: 30px 0 0 47px;
    zoom: 0.6;
    animation: none !important;
}

/* ── Title ──────────────────────────────────────────────────────────────── */
.ham-modal-popup .swal2-title {
    padding: 24px 56px 4px 28px;
    margin: 0;
    text-align: left;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.011em;
}
.ham-modal-popup .swal2-icon + .swal2-title {
    padding-top: 14px;
}

/* ── HTML container / body text ─────────────────────────────────────────── */
.ham-modal-popup .swal2-html-container {
    padding: 6px 28px 4px;
    margin: 0;
    text-align: left;
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
    overflow: visible; /* permette ai widget floating di uscire dal box */
}

/* ── Variante scrollable ────────────────────────────────────────────────
   Header (icon+title) e footer (actions) sticky, body scrollabile.
   Si attiva passando { scrollable: true } a HamModal.form.
   Trade-off: per clippare lo scroll del body, il popup ha overflow: hidden
   → i floating widget interni (datepicker) non possono uscire dal popup.
   Per modali con datepicker preferire la variante non-scrollable. */
.ham-modal-popup--scrollable.swal2-popup {
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh;
    overflow: hidden;
    /* override del grid-template-* di SWAL che lascerebbe i figli posizionati
       via grid-area e non rispetterebbe il flow column del flex. */
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
}
.ham-modal-popup--scrollable .swal2-close {
    /* close button resta absolute, non partecipa al flex */
    flex: none;
}
.ham-modal-popup--scrollable .swal2-icon,
.ham-modal-popup--scrollable .swal2-title,
.ham-modal-popup--scrollable .swal2-actions {
    flex: 0 0 auto;
    flex-shrink: 0;
}
.ham-modal-popup--scrollable .swal2-html-container {
    flex: 1 1 auto;
    /* min-height: 0 è obbligatorio: i flex children hanno min-height auto di
       default, che impedisce di scendere sotto la dimensione del contenuto.
       Senza questo, il body cresce all'infinito e il footer esce dal viewport. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    margin-top: 12px;
    padding-top: 16px;
}
/* Quando c'è un'icona, sopprimi il border-top del body perché il title già
   stacca visivamente. */
.ham-modal-popup--scrollable .swal2-icon ~ .swal2-html-container {
    border-top: none;
    margin-top: 8px;
    padding-top: 0;
}

/* Scrollbar tematizzata sul body */
.ham-modal-popup--scrollable .swal2-html-container::-webkit-scrollbar {
    width: 10px;
}
.ham-modal-popup--scrollable .swal2-html-container::-webkit-scrollbar-track {
    background: transparent;
}
.ham-modal-popup--scrollable .swal2-html-container::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.14);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}
.ham-modal-popup--scrollable .swal2-html-container::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.24);
    background-clip: padding-box;
}
.ham-modal-popup--scrollable .swal2-html-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

/* ── Floating widget interni (datepicker TD6, dropdown selectpicker) ─────
   Tempus Dominus v6 appende il widget come figlio dell'elemento target,
   ma in alcune configurazioni il widget popup risale via portal/append a
   body. In quel caso esce dallo stacking context del popup SWAL e finisce
   DIETRO .swal2-container (z-index 1060): si vede il calendario sfocato
   sotto il backdrop (backdrop-filter: blur). Forziamo z-index globale.
   Il bootstrap-selectpicker già va a 9999 via `data-container="body"`. */
.tempus-dominus-widget,
.tempus-dominus-widget.show,
[class*="tempus-dominus-widget"] {
    z-index: 9999 !important;
}

/* ── Input label (prompt nativo SWAL) ───────────────────────────────────── */
.ham-modal-popup .swal2-input-label {
    display: block;
    text-align: left;
    margin: 18px 28px 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    letter-spacing: 0.01em;
}

/* ── Inputs (text / number / email / select / textarea SWAL nativi) ─────── */
.ham-modal-popup .swal2-input,
.ham-modal-popup .swal2-textarea,
.ham-modal-popup .swal2-select,
.ham-modal-popup .swal2-file {
    box-sizing: border-box;
    display: block;
    width: calc(100% - 56px);
    margin: 0 28px;
    padding: 11px 14px;
    height: auto;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.ham-modal-popup .swal2-input::placeholder,
.ham-modal-popup .swal2-textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}
.ham-modal-popup .swal2-input:hover,
.ham-modal-popup .swal2-textarea:hover,
.ham-modal-popup .swal2-select:hover {
    border-color: #cbd5e1;
}
.ham-modal-popup .swal2-input:focus,
.ham-modal-popup .swal2-textarea:focus,
.ham-modal-popup .swal2-select:focus {
    outline: none;
    border-color: #60a5fa;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}
.ham-modal-popup .swal2-textarea {
    min-height: 96px;
    resize: vertical;
}

/* ── Form custom dentro html: (HamModal.form / inline) ──────────────────── */
.ham-modal-popup form[data-ham-modal-form] {
    padding: 8px 28px 4px;
    text-align: left;
}
.ham-modal-popup form[data-ham-modal-form] .swal2-input,
.ham-modal-popup form[data-ham-modal-form] .swal2-textarea {
    width: 100%;
    margin: 0;
}

/* ── Validation message ─────────────────────────────────────────────────── */
.ham-modal-popup .swal2-validation-message {
    margin: 14px 28px 0;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 10px;
    text-align: left;
    line-height: 1.4;
}
.ham-modal-popup .swal2-validation-message::before {
    display: none;
}

/* ── Actions / footer ───────────────────────────────────────────────────── */
.ham-modal-popup .swal2-actions {
    margin: 0;
    padding: 16px 24px;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.55) 100%);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}
.ham-modal-popup .swal2-actions:not(.swal2-loading) .swal2-styled {
    margin: 0;
}

/* Variante a tre bottoni (HamModal.confirmOrDeny): tutti su un'unica riga. */
.ham-modal-popup--triple .swal2-actions {
    flex-wrap: nowrap;
}

/* Quando i bottoni hanno la classe component tw-btn, neutralizziamo eventuali
   override SWAL e lasciamo il design system gestire colore/spaziatura. */
.ham-modal-popup .swal2-styled.tw-btn {
    background-image: none;
}


/* Loader spinner (preConfirm async) */
.ham-modal-popup .swal2-loader {
    margin: 0 16px 0 0;
    border-color: #3b82f6 transparent #3b82f6 transparent;
    width: 22px;
    height: 22px;
}

/* ── Toast / footer text opzionale ──────────────────────────────────────── */
.ham-modal-popup .swal2-footer {
    margin: 0;
    padding: 12px 28px 16px;
    border-top: none;
    font-size: 12.5px;
    color: #64748b;
    text-align: left;
    background: transparent;
}

/* ── Animazione in/out ──────────────────────────────────────────────────── */
.ham-modal-popup.swal2-show {
    animation: hamModalIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.ham-modal-popup.swal2-hide {
    animation: hamModalOut 0.18s ease-in;
}
@keyframes hamModalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes hamModalOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(4px) scale(0.99);
    }
}

.swal2-container.ham-modal-container.swal2-backdrop-show {
    animation: hamModalBackdropIn 0.22s ease-out;
}
@keyframes hamModalBackdropIn {
    from { background-color: rgba(15, 23, 42, 0); }
    to { background-color: rgba(15, 23, 42, 0.32); }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ham-modal-popup.swal2-popup {
        border-radius: 20px;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
    .ham-modal-popup .swal2-title,
    .ham-modal-popup .swal2-html-container,
    .ham-modal-popup .swal2-input-label,
    .ham-modal-popup .swal2-validation-message {
        padding-left: 20px;
        padding-right: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .ham-modal-popup .swal2-input,
    .ham-modal-popup .swal2-textarea,
    .ham-modal-popup .swal2-select {
        margin-left: 20px;
        margin-right: 20px;
        width: calc(100% - 40px);
    }
    .ham-modal-popup .swal2-actions {
        padding: 14px 18px;
    }
    /* Su mobile i tre bottoni non ci stanno in riga: tornano impilati. */
    .ham-modal-popup--triple .swal2-actions {
        flex-wrap: wrap;
    }
}