/* ============================================================================
   VHM Modal Restyle — global, centralized
   ----------------------------------------------------------------------------
   Reworks every modal in the product (the multiuse modal + all native
   Bootstrap 5 modals) into the modern, "OrdineDetail"-inspired look:
   pill rounded corners, soft shadows, mandante-themed accents, spaced
   bodies, pill buttons in the footer with .main-bg-button theming.

   The selectors target the standard Bootstrap modal anatomy, so styles
   apply automatically to all modals without editing per-page markup.

   All color accents use the existing mandante CSS variables
   (--main-bg-color, --main-button-hover-*, --main-button-*) so theming
   per brand (Agita, Arval, BMW, SIXT, ...) "just works".
   ========================================================================= */


/* ----- Local tokens (scoped to modals, do not bleed into the page) ------- */
.modal {
    --vhm-modal-radius: 20px;
    --vhm-modal-radius-sm: 14px;
    --vhm-modal-radius-pill: 999px;

    --vhm-modal-ink: #1b1a17;
    --vhm-modal-ink-2: #43413c;
    --vhm-modal-muted: #797668;
    --vhm-modal-muted-2: #a09d92;

    --vhm-modal-surface: #ffffff;
    --vhm-modal-surface-2: #faf9f5;
    --vhm-modal-surface-3: #f3f1ea;

    --vhm-modal-border: #eeece5;
    --vhm-modal-border-strong: #d9d6cc;

    --vhm-modal-shadow-sm: 0 1px 2px rgba(20, 18, 14, 0.04), 0 4px 14px rgba(20, 18, 14, 0.05);
    --vhm-modal-shadow-lg: 0 2px 4px rgba(20, 18, 14, 0.06), 0 16px 40px rgba(20, 18, 14, 0.18);

    --vhm-modal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ----------------------------------------------------------------------------
   BACKDROP
   ------------------------------------------------------------------------- */
.modal-backdrop.show {
    opacity: 0.55;
}


/* ----------------------------------------------------------------------------
   DIALOG + CONTENT (the modal "card")
   ------------------------------------------------------------------------- */
.modal .modal-content {
    border: 0;
    border-radius: var(--vhm-modal-radius);
    box-shadow: var(--vhm-modal-shadow-lg);
    background: var(--vhm-modal-surface);
    overflow: hidden;
}

/* Fullscreen modals (iframe ones) get squared chrome + lighter shadow,
   only the header/footer get restyled, the iframe content is left alone. */
.modal .modal-fullscreen .modal-content,
.modal-fullscreen .modal-content {
    border-radius: 0;
    box-shadow: none;
}


/* ----------------------------------------------------------------------------
   OPEN / CLOSE ANIMATION
   ------------------------------------------------------------------------- */
.modal.fade .modal-dialog {
    transform: translateY(-24px) scale(0.97);
    transition: transform 240ms var(--vhm-modal-ease),
                opacity 200ms ease;
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}


/* ----------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------- */
.modal .modal-header {
    position: relative;
    /* Padding-right generoso per "riservare" l'area dove vola il close
       button in absolute. Lo spazio è dimensionato per garantire margine
       di sicurezza tra eventuali Header.Content items (es. info-box
       Targa/Telaio/Modello) e il close, così non si tocchino mai. */
    padding: 9px 64px 9px 24px;
    background:
        linear-gradient(135deg, var(--main-button-hover-bg-color, rgba(0, 0, 0, 0.02)) 0%, transparent 70%),
        var(--vhm-modal-surface);
    border-bottom: 2px solid var(--main-button-hover-border-color, var(--main-bg-color, #3b4f7a)) !important;
    border-top-left-radius: var(--vhm-modal-radius);
    border-top-right-radius: var(--vhm-modal-radius);
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between !important;
}

/* Login modal lives on the anonymous shell where /Content/GWTheme/variables.css
   defines mandante hover bg/border as solid greys (#595959) — applying the
   themed gradient there produces an unintentional dark-grey wash. Keep the
   login modal header pure white. */
#login-modal .modal-header {
    background: var(--vhm-modal-surface) !important;
}

/* Close button anchored to the top-right corner via absolute positioning.
   This makes it immune to the header height: even when Header.Content items
   (e.g. a multi-line info box) inflate the header, the close stays where
   the user expects it — top right. The combined top/right offsets together
   with the header's padding-right give a comfortable "safety zone" so the
   close glyph never touches or overlaps other header elements.

   Vertical centering: the close is placed at the vertical mid-point of the
   title's first line (header padding-top 9px + half of the title line-box
   ~0.65rem) and translated up by half its own height. This keeps it
   PERFECTLY centered with the title row no matter the close button's
   exact bounding-box size, and no matter how tall the rest of the header
   is. */
.modal .modal-header .btn-close {
    position: absolute;
    top: calc(9px + 0.65rem);
    right: 20px;
    margin: 0 !important;
    transform: translateY(-50%);
}

.modal .modal-fullscreen .modal-header,
.modal-fullscreen .modal-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Title wrapper: stays at its natural width, can shrink to make room for
   Header.Content items beside it. min-width: 0 allows text ellipsis when
   the title is very long. */
.modal .modal-header .vhm-modal-title-wrap {
    flex: 0 1 auto;
    min-width: 0;
}

/* Header.Content items injected by printMultiuseModalData (via .after on
   .modal-title) become siblings of .vhm-modal-title-wrap. They grow to fill
   the remaining horizontal space and can shrink if the header is narrow.
   Excludes the title wrapper, the close glyph, and the legacy vehicle-info
   button so they keep their own sizing rules. */
.modal .modal-header > :not(.vhm-modal-title-wrap):not(.btn-close):not(#vehicle-info-button) {
    flex: 1 1 auto;
    min-width: 0;
}

.modal .modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--vhm-modal-ink);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.25;
    margin: 0;
    word-break: break-word;
}

/* Auto-injected icon next to the modal title (added by JS for multiuse modal,
   manually possible for native modals via <i class="fa vhm-modal-title-icon">). */
.modal .modal-title .vhm-modal-title-icon,
.modal .modal-title > i.fa:first-child,
.modal .modal-title > i.fas:first-child,
.modal .modal-title > i.far:first-child {
    font-size: 1em;
    color: var(--main-button-hover-font-color, var(--main-bg-color, var(--vhm-modal-ink)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    background: var(--main-button-hover-bg-color, rgba(0, 0, 0, 0.04));
    border-radius: var(--vhm-modal-radius-pill);
    flex-shrink: 0;
    transition: transform 200ms var(--vhm-modal-ease);
}

.modal.show .modal-title .vhm-modal-title-icon {
    animation: vhmModalIconIn 360ms var(--vhm-modal-ease) both;
}

@keyframes vhmModalIconIn {
    from { transform: scale(0.7) rotate(-10deg); opacity: 0; }
    to   { transform: scale(1)   rotate(0);     opacity: 1; }
}


/* ----------------------------------------------------------------------------
   CLOSE BUTTON
   ------------------------------------------------------------------------- */
.modal .btn-close {
    width: 0.85em;
    height: 0.85em;
    padding: 0.6em;
    margin: 0;
    opacity: 0.55;
    border-radius: var(--vhm-modal-radius-pill);
    background-size: 0.75em;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 160ms ease, transform 240ms var(--vhm-modal-ease), background-color 160ms ease;
    flex-shrink: 0;
}

.modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
    background-color: var(--main-button-hover-bg-color, rgba(0, 0, 0, 0.06));
}

/* Close button inside .modal-header is absolutely positioned and translated
   vertically by -50% to keep it centered on the title row. The hover
   rotation must compose with that translate, otherwise the icon would
   snap downward when hovered. Specificity > the generic rule above. */
.modal .modal-header .btn-close:hover {
    transform: translateY(-50%) rotate(90deg);
}

.modal .btn-close:focus {
    box-shadow: 0 0 0 0.18rem var(--main-button-boxshadow-color, rgba(0, 0, 0, 0.1));
    outline: none;
}


/* ----------------------------------------------------------------------------
   BODY
   ------------------------------------------------------------------------- */
.modal .modal-body {
    padding: 22px 24px;
    background: var(--vhm-modal-surface);
    color: var(--vhm-modal-ink-2);
}

/* Iframe body: zero padding so the iframe fills the available area.

   01/09/2026 — La regola valeva per TUTTI i .modal-fullscreen, ma "fullscreen"
   non significa "iframe": i fullscreen a form (Consegna Veicolo di
   movimenti-module.js, firma digitale, associazione COC fisiche) restavano
   senza alcun respiro laterale, con label e campi incollati ai bordi e una
   scrollbar orizzontale generata dai margini negativi delle .row di Bootstrap
   (-12px) che, senza padding del body, escono dal contenitore.
   Il padding zero e' quindi riservato ai soli body che ospitano davvero un
   iframe (tutti i modali iframe del progetto lo mettono dentro .modal-body);
   gli altri ereditano il padding standard della regola qui sopra.
   Se un domani :has() non fosse supportato, il peggio che succede e' una
   cornice bianca di 22/24px attorno all'iframe: nessuna rottura funzionale. */
.modal .modal-fullscreen .modal-body:has(iframe),
.modal-fullscreen .modal-body:has(iframe) {
    padding: 0;
}

/* Labels inside modal bodies get the OrdineDetail uppercase muted look. */
.modal .modal-body label.bold-text,
.modal .modal-body > .mb-3 > label,
.modal .modal-body .form-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vhm-modal-muted);
    margin-bottom: 6px;
}

/* Form controls: soft borders, smooth focus matching mandante color. */
.modal .modal-body .form-control,
.modal .modal-body .form-select,
.modal .modal-body .select2-container--default .select2-selection {
    border-radius: 10px;
    border: 1px solid var(--vhm-modal-border-strong);
    padding: 8px 12px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Select2 STRETTI (ora / minuti: getOraMinutiBlock li crea con
   data-width="70px") — 01/09/2026.
   Il padding 8px 12px della regola qui sopra e' pensato per i campi a
   larghezza piena, ma su un box da 70px si mangia 24px dei 70; quel che
   resta al testo e' ~16px, ossia quanto serve a due cifre. Poiche' custom.css
   forza white-space:normal + word-break su TUTTI i select2 single (serve per
   le descrizioni lunghe), il valore non viene troncato ma va a capo: "09"
   diventa "0" sopra e "9" sotto, il box raddoppia in altezza e i due picker
   non sono piu' allineati fra loro ne' con il campo data.
   Qui si azzera il padding laterale del CONTENITORE (il rendered ha gia' il
   suo: 8px a sinistra, 20px a destra per la freccia) e si tiene il valore su
   una riga sola. Il padding verticale scende a 4px cosi' l'altezza del box
   coincide con quella degli input accanto.
   Nota: custom.css ha lo stesso fix elencando i 4 id del modale Anomalia;
   questa regola e' la versione generica e copre anche quelli. */
.modal .modal-body select[data-width="70px"] + .select2-container--default .select2-selection {
    padding: 4px 0;
}

.modal .modal-body select[data-width="70px"] + .select2-container--default .select2-selection__rendered {
    white-space: nowrap !important;
    word-break: normal !important;
    word-wrap: normal !important;
    overflow: hidden;
    text-overflow: clip !important;
}

.modal .modal-body .form-control:focus,
.modal .modal-body .form-select:focus {
    border-color: var(--main-button-hover-border-color, var(--main-bg-color));
    box-shadow: 0 0 0 0.18rem var(--main-button-hover-bg-color, rgba(0, 0, 0, 0.06));
}

/* Tables inside modals: pill corners, soft alternating rows. */
.modal .modal-body .table,
.modal .modal-body table.dataTable,
.modal .modal-body table.toDatatable {
    border-radius: var(--vhm-modal-radius-sm);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

.modal .modal-body .table thead th,
.modal .modal-body table.dataTable thead th,
.modal .modal-body table.toDatatable thead th {
    background: var(--vhm-modal-surface-2);
    color: var(--vhm-modal-muted);
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--vhm-modal-border);
    padding: 10px 14px;
}

.modal .modal-body .table tbody td,
.modal .modal-body table.dataTable tbody td,
.modal .modal-body table.toDatatable tbody td {
    padding: 10px 14px;
    border-top: 1px solid var(--vhm-modal-border);
    color: var(--vhm-modal-ink);
    vertical-align: middle;
}

.modal .modal-body .table tbody tr:hover td {
    background: var(--main-button-hover-bg-color, var(--vhm-modal-surface-3));
}

/* Alerts inside modals get softer corners. */
.modal .modal-body .alert {
    border-radius: var(--vhm-modal-radius-sm);
    border: 1px solid transparent;
}

/* Spacing helper between top-level body blocks (only if not already spaced). */
.modal .modal-body > * + *:not(.mb-0):not(.mt-0) {
    margin-top: 12px;
}


/* ----------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.modal .modal-footer {
    padding: 7px 24px;
    background: var(--vhm-modal-surface-2);
    border-top: 1px solid var(--vhm-modal-border);
    border-bottom-left-radius: var(--vhm-modal-radius);
    border-bottom-right-radius: var(--vhm-modal-radius);
    gap: 8px;
    /* "Wrap-if-needed": with flex-wrap: wrap the footer items stay on one
       row whenever they all fit (the common case), and only wrap to a new
       row when their combined width would overflow the modal — avoiding
       the previous behaviour where nowrap caused buttons to spill out of
       the modal box. */
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    row-gap: 8px;
}

.modal .modal-footer .btn {
    /* Each button keeps its own text on a single line; only the wrapping
       between buttons is allowed, never inside a button label. */
    white-space: nowrap;
}

.modal .modal-fullscreen .modal-footer,
.modal-fullscreen .modal-footer {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Buttons in the footer — pill shape, icon-aware, soft hover lift. */
.modal .modal-footer .btn {
    border-radius: var(--vhm-modal-radius-pill);
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1.3;
    transition: transform 150ms var(--vhm-modal-ease),
                background-color 150ms ease,
                color 150ms ease,
                border-color 150ms ease,
                box-shadow 180ms ease;
    box-shadow: 0 1px 2px rgba(20, 18, 14, 0.04);
}

.modal .modal-footer .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 18, 14, 0.08);
}

.modal .modal-footer .btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(20, 18, 14, 0.06);
}

.modal .modal-footer .btn-lg {
    padding: 10px 22px;
    font-size: 0.95rem;
}

.modal .modal-footer .btn-sm {
    padding: 6px 14px;
    font-size: 0.82rem;
}

/* Outline secondary close button (Bootstrap default in multiuse). */
.modal .modal-footer .btn-outline-secondary,
.modal .modal-footer #multiuse-close-button {
    background-color: transparent;
    border-color: var(--vhm-modal-border-strong);
    color: var(--vhm-modal-ink-2);
}

.modal .modal-footer .btn-outline-secondary:hover,
.modal .modal-footer #multiuse-close-button:hover {
    background-color: var(--vhm-modal-surface-3);
    border-color: var(--vhm-modal-border-strong);
    color: var(--vhm-modal-ink);
}

/* Danger buttons keep their semantic, just polished. */
.modal .modal-footer .btn-danger {
    background-color: #c63b3b;
    border-color: #c63b3b;
    color: #ffffff;
}

.modal .modal-footer .btn-danger:hover {
    background-color: #b03333;
    border-color: #b03333;
    color: #ffffff;
}


/* ----------------------------------------------------------------------------
   .main-bg-button INSIDE MODALS — keeps mandante theming, picks up new shape.
   The .main-bg-button color rules live in Colors.css; here we only adjust
   shape and motion so it sits well in the new layout.
   ------------------------------------------------------------------------- */
.modal .main-bg-button {
    border-radius: var(--vhm-modal-radius-pill);
    font-weight: 600;
}

.modal .modal-footer .main-bg-button {
    padding: 8px 20px;
}


/* ----------------------------------------------------------------------------
   Vehicle-info button in multiuse modal header (legacy structure)
   ------------------------------------------------------------------------- */
.modal #vehicle-info-button {
    border-radius: var(--vhm-modal-radius-pill);
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* [CSS-AUDIT 2026-07-31] VARIANT MODIFIERS — mai assegnate: .vhm-modal-success/
   -danger/-warn erano destinate a essere aggiunte via JS al .modal per temare
   l'header/icona dei modal di conferma/errore/warning, ma nessun punto del
   progetto (front-end, back-end, markup) le assegna mai. L'unico riferimento
   rimasto e' una .removeClass() difensiva in custom-Functions.js che ripulisce
   uno stato mai impostato ("Drop variant classes that might have been set by a
   previous open") — probabile residuo di una feature pianificata/rimossa senza
   ripulire il CSS collegato. Verificato su tutta la solution (10.226 file,
   inclusi i progetti Batch/API/ClassLibrary): nessuna costruzione dinamica,
   nessuno schema di nomi alternativo, nessun concetto di "severity" nel codebase.
.modal.vhm-modal-danger .modal-header {
    border-bottom-color: #c63b3b;
    background:
        linear-gradient(135deg, rgba(198, 59, 59, 0.10) 0%, transparent 70%),
        var(--vhm-modal-surface);
}

.modal.vhm-modal-danger .modal-title .vhm-modal-title-icon,
.modal.vhm-modal-danger .modal-title > i.fa:first-child {
    color: #c63b3b;
    background: rgba(198, 59, 59, 0.10);
}

.modal.vhm-modal-success .modal-header {
    border-bottom-color: #4f8a4c;
    background:
        linear-gradient(135deg, rgba(79, 138, 76, 0.10) 0%, transparent 70%),
        var(--vhm-modal-surface);
}

.modal.vhm-modal-success .modal-title .vhm-modal-title-icon,
.modal.vhm-modal-success .modal-title > i.fa:first-child {
    color: #4f8a4c;
    background: rgba(79, 138, 76, 0.10);
}

.modal.vhm-modal-warn .modal-header {
    border-bottom-color: #c98b1f;
    background:
        linear-gradient(135deg, rgba(201, 139, 31, 0.10) 0%, transparent 70%),
        var(--vhm-modal-surface);
}

.modal.vhm-modal-warn .modal-title .vhm-modal-title-icon,
.modal.vhm-modal-warn .modal-title > i.fa:first-child {
    color: #c98b1f;
    background: rgba(201, 139, 31, 0.10);
}
*/


/* ----------------------------------------------------------------------------
   RESPONSIVE — phones: lighter rounding, tighter padding.
   ------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .modal .modal-content {
        border-radius: var(--vhm-modal-radius-sm);
    }

    .modal .modal-header {
        padding: 8px 16px;
        border-top-left-radius: var(--vhm-modal-radius-sm);
        border-top-right-radius: var(--vhm-modal-radius-sm);
    }

    .modal .modal-title {
        font-size: 1rem;
    }

    .modal .modal-body {
        padding: 16px;
    }

    .modal .modal-footer {
        padding: 6px 16px;
        border-bottom-left-radius: var(--vhm-modal-radius-sm);
        border-bottom-right-radius: var(--vhm-modal-radius-sm);
        /* Mobile: re-enable wrap so buttons stack vertically when needed,
           and let them grow to full row width for easier tapping. */
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .modal .modal-footer > * {
        flex-shrink: 1;
    }

    .modal .modal-footer .btn {
        padding: 7px 14px;
        font-size: 0.85rem;
        flex: 1 1 auto;
    }
}


/* ----------------------------------------------------------------------------
   Avoid double-styling of OrdineDetail modals already styled by OrdineDetail.css
   (they declare .od-modal). We leave them alone so their existing scope wins.
   The .od-modal selectors in OrdineDetail.css are more specific anyway, so
   this is more for documentation: no override needed.
   ------------------------------------------------------------------------- */