/* QuidTalk brand + layout
 *
 * Login = AuthPage con password field, SENZA CompleteSecurity.
 * Verifica dispositivi = .mx_CompleteSecurityBody (card LARGHA).
 */

/* ========== AuthPage base ========== */
.mx_AuthPage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
}

.mx_AuthPage_modal {
    margin: 0 auto !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28) !important;
}

.mx_AuthPage_modalContent {
    display: flex !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* ========== COMPLETE SECURITY (verifica dispositivo / recovery key) ========== */
.mx_AuthPage:has(.mx_CompleteSecurityBody) .mx_AuthPage_modal {
    width: min(680px, 96vw) !important;
    max-width: 680px !important;
    overflow: visible !important;
}

.mx_AuthPage:has(.mx_CompleteSecurityBody) .mx_AuthPage_modalContent {
    flex-direction: column !important;
}

.mx_CompleteSecurityBody {
    width: 100% !important;
    max-width: none !important;
    padding: 36px 40px 44px !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    color: #111827 !important;
}

.mx_CompleteSecurity_header,
.mx_CompleteSecurityBody h1,
.mx_CompleteSecurityBody h2 {
    color: #111827 !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
}

.mx_CompleteSecurity_body,
.mx_CompleteSecurityBody p,
.mx_SetupEncryptionBody,
.mx_SetupEncryptionBody p,
.mx_SetupEncryptionBody li {
    color: #374151 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

/* Bottoni azione (NON il pulsante skip a icona) a tutta larghezza */
.mx_CompleteSecurityBody .mx_AccessibleButton_kind_primary,
.mx_CompleteSecurityBody .mx_AccessibleButton_kind_primary_outline,
.mx_CompleteSecurityBody .mx_AccessibleButton_kind_danger,
.mx_CompleteSecurityBody .mx_AccessibleButton_kind_link,
.mx_SetupEncryptionBody .mx_AccessibleButton_kind_primary,
.mx_SetupEncryptionBody .mx_AccessibleButton_kind_primary_outline,
.mx_SetupEncryptionBody .mx_AccessibleButton_kind_danger,
.mx_SetupEncryptionBody .mx_AccessibleButton_kind_link {
    white-space: normal !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    margin: 8px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.mx_CompleteSecurityBody .mx_AccessibleButton_kind_primary,
.mx_SetupEncryptionBody .mx_AccessibleButton_kind_primary {
    background-color: #1F3864 !important;
    color: #FFFFFF !important;
    border-radius: 24px !important;
}

/* Pulsante "salta" (icona X): dimensione icona corretta, in alto a destra */
.mx_CompleteSecurity_skip {
    position: absolute !important;
    top: 16px !important;
    right: 20px !important;
    width: 24px !important;
    height: 24px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    flex: 0 0 auto !important;
}

.mx_CompleteSecurity_skip svg,
.mx_CompleteSecurity_header svg,
.mx_E2EIcon.mx_CompleteSecurity_headerIcon,
.mx_CompleteSecurityBody svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex: 0 0 auto !important;
}

.mx_CompleteSecurity_header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 40px !important;
}

.mx_CompleteSecurityBody .mx_AccessibleButton_kind_primary_outline,
.mx_SetupEncryptionBody .mx_AccessibleButton_kind_primary_outline,
.mx_CompleteSecurityBody .mx_AccessibleButton_kind_link,
.mx_SetupEncryptionBody .mx_AccessibleButton_kind_link {
    color: #1F3864 !important;
    border-color: #1F3864 !important;
}

/* ========== LOGIN verticale (password field presente) ========== */
.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthPage_modal {
    width: min(420px, 94vw) !important;
    max-width: 420px !important;
    overflow: hidden !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthPage_modalContent {
    flex-direction: column !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthHeader {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 32px 28px 4px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: #FFFFFF !important;
    order: 1 !important;
}

/* Lingua nascosta in header: la sposta lo script sotto il form */
.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthHeader .mx_Dropdown,
.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthHeader .mx_LanguageDropdown,
.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthHeader .mx_AuthBody_language {
    display: none !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthHeaderLogo {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    display: flex !important;
    justify-content: center !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthHeaderLogo img {
    width: 320px !important;
    max-width: 88% !important;
    max-height: 110px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthHeader::after {
    content: "La comunicazione sovrana del tuo ente";
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: #4B5563;
    font-style: italic;
    font-size: 15px;
    line-height: 1.45;
    margin: 4px 0 8px !important;
    padding: 0 8px !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthBody,
.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthBody.mx_AuthBody_flex {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 8px 28px 28px !important;
    box-sizing: border-box !important;
    border-radius: 0 0 16px 16px !important;
    background: #FFFFFF !important;
    order: 2 !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthBody h1 {
    text-align: center !important;
    margin: 0 0 12px !important;
    font-size: 22px !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_ServerPicker,
.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_ServerPicker_server {
    display: none !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthBody .mx_Field {
    margin-top: 14px !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthBody .mx_Field input {
    padding-top: 18px !important;
    padding-bottom: 10px !important;
    background-color: #F7F8FB !important;
    border-color: #D0D5DD !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_Field input:focus {
    border-color: #1F3864 !important;
    caret-color: #1F3864 !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_Field label {
    color: #1F3864 !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AuthBody a {
    color: #1F3864 !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_Login_submit,
.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AccessibleButton_kind_primary {
    background-color: #1F3864 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 24px !important;
    min-height: 48px !important;
    font-weight: 600 !important;
    width: 100% !important;
    margin-top: 14px !important;
    cursor: pointer !important;
}

.mx_AuthPage:has(input[type="password"]):not(:has(.mx_CompleteSecurityBody)) .mx_AccessibleButton_kind_primary:hover {
    background-color: #2A4A82 !important;
}

.mx_AuthBody .mx_QuidTalk_langMoved,
.mx_AuthBody .mx_Dropdown.mx_QuidTalk_langMoved {
    display: block !important;
    width: 100% !important;
    max-width: 220px !important;
    margin: 18px auto 0 !important;
}

.mx_AuthFooter a {
    color: #FFFFFF !important;
}

/* ========== APP ========== */
.mx_LeftPanel_wrapper::before {
    content: "";
    display: block;
    height: 64px;
    background-color: #1F3864;
    background-image: url("../img/logos/quidtalk-logo-vertical.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 44px;
    border-bottom: 3px solid #B8860B;
    margin-bottom: 8px;
}

.mx_SpacePanel {
    background-color: #F5F6FA !important;
    border-right: 1px solid #E5E7EB !important;
}