/* ===== DevExtreme Dialog: pulsanti principali ===== */
/* YES / OK -> verde */
.dx-dialog .dx-dialog-buttons .dx-dialog-button[aria-label="Yes"],
.dx-dialog .dx-dialog-buttons .dx-dialog-button[aria-label="OK"] {
    background-color: #2e7d32 !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* NO / CANCEL -> rosso */
.dx-dialog .dx-dialog-buttons .dx-dialog-button[aria-label="No"],
.dx-dialog .dx-dialog-buttons .dx-dialog-button[aria-label="Cancel"] {
    background-color: #c62828 !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* CLOSE -> GRIGIO */
.dx-dialog .dx-dialog-buttons .dx-dialog-button[aria-label="Close"] {
    background-color: #546898 !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ===== DevExtreme Dialog: cambio colore caption della messagebox ===== */

.dx-dialog .dx-popup-title {
    background-color: #476936; /* colore che vuoi */
    color: white; /* per il testo */
}


/* ===== Cambio colori dei pulsanti della form di edit ===== */

/* Pulsante Save/OK */
.dx-datagrid-form-buttons-container .dx-button[aria-label="Save"],
.dx-datagrid-form-buttons-container .dx-button[aria-label="OK"],
.dx-datagrid-edit-popup .dx-toolbar .dx-button[aria-label="Save"],
.dx-datagrid-edit-popup .dx-toolbar .dx-button[aria-label="OK"] {
    background-color: #2e7d32 !important; /* verde */
    color: #fff !important;
    border-color: transparent !important;
}

/* Pulsante Cancel */
.dx-datagrid-form-buttons-container .dx-button[aria-label="Cancel"],
.dx-datagrid-edit-popup .dx-toolbar .dx-button[aria-label="Cancel"] {
    background-color: #c62828 !important; /* rosso */
    color: #fff !important;
    border-color: transparent !important;
}

/* ===== Cambio colori della caption del dxPopup e dei pulsanti ===== */

.popup-caption-green .dx-popup-title {
    color: #fff;
    background-color: #476936;
}

.dx-popup .popup-close-colored .dx-button-content {
    background-color: #546898 !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ===== Cambio colori della caption del dxPopup ===== */

.caption-green .modal-header {
    background: #476936;
    color: #fff;
}

/* ===== Send mail Popup ===== */

#sendMailModal .form-group {
    display: grid;
    grid-template-columns: max-content 1fr; /* label si adatta, input occupa il resto */
    column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: center; /* allinea verticalmente label e input */
    width: 100%;
}

/* Ogni coppia (label + input) */
#sendMailModal .form-group .pair {
    display: contents; /* fa partecipare label e input alla stessa griglia */
}

/* Label */
#sendMailModal .form-group label {
    white-space: nowrap;
    text-align: left;
    font-weight: normal; /* 🔹 niente grassetto */
    margin: 0;
    padding-top: 0.25rem; /* 🔹 piccolo offset per centrarla meglio con l’input */
}

/* Input */
#sendMailModal .form-group input {
    width: 100%;
    margin: 0;
}

/* Nasconde label+input insieme */
#sendMailModal .form-group .pair.hidden-pair {
    display: none;
}
/* Larghezza massima desiderata */
#sendMailModal .modal-dialog {
    max-width: 800px;
}

/* Colora SOLO l'header della modale #sendMailModal */
#sendMailModal .modal-header {
    background: #476936;
    color: #fff;
}

/* Imposta un'altezza massima "reale" al contenitore del modal */
#sendMailModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 800px; /* oppure: min(200px, calc(100vh - 2rem)) */
}

/* Header e footer occupano la loro altezza naturale */
#sendMailModal .modal-header,
#sendMailModal .modal-footer {
    flex: 0 0 auto;
}

/* Il corpo prende lo spazio rimanente e diventa scrollabile */
#sendMailModal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* --- Modifica per addressesGrid: grid a 3 colonne (label | input | btn) --- */
#sendMailModal #addressesGrid {
    display: grid;
    grid-template-columns: max-content 1fr max-content; /* 1) label  2) input  3) bottone */
    column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: center; /* allinea verticalmente i controlli sulla riga */
}

/* Importantissimo: fa "sparire" il wrapper .pair così i suoi figli
    si mappano direttamente sulle 3 colonne della grid. */
#sendMailModal #addressesGrid .pair {
    display: contents;
}

/* Label compatte e su una sola riga: determina la larghezza della prima colonna */
#sendMailModal #addressesGrid .pair label {
    margin: 0;
    font-weight: 400; /* no bold */
    white-space: nowrap;
}

/* Evita che il testo del bottone vada a capo (utile con 'Delete') */
#sendMailModal #addressesGrid .pair .btn {
    white-space: nowrap;
}

#sendMailModal #addressesGrid .remove-icon {
    cursor: pointer;
    justify-self: end;
    color: #dc3545;
    outline: none;
}

#sendMailModal #addressesGrid .remove-icon:hover {
    opacity: .85;
}

/* Mostra il focus SOLO quando la navigazione è da tastiera */
#sendMailModal #addressesGrid .remove-icon:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

#sendMailModal #addressesGrid .remove-icon:focus-visible {
    outline: 2px solid #2684ff; /* se vuoi tenerlo per tastiera */
    outline-offset: 2px;
}

/* (opzionale) Se vuoi un input leggermente più alto come gli screenshot */
/* #sendMailModal #addressesGrid .pair input.form-control { padding-top: .6rem; padding-bottom: .6rem; } */

/* ===== Gestione Z-Order Popups ===== */

/* manda il modal sempre sopra al dxPopup */
.modal {
    z-index: 50000 !important;
}

.modal-backdrop {
    z-index: 49999 !important;
}

/* Sempre sopra a tutto e in posizione fissa */
html body .dx-overlay-wrapper.dx-dialog-wrapper,
html body .dx-overlay-wrapper.dx-dialog-wrapper .dx-overlay-content,
html body .dx-overlay-wrapper.dx-dialog-wrapper .dx-overlay-shader,
html body > .dx-dialog-wrapper,
html body > .dx-dialog-wrapper .dx-overlay-content,
html body > .dx-dialog-wrapper .dx-overlay-shader {
    z-index: 1000000 !important;
    position: fixed !important;
}