/* ========================================================
   CUSTOM CSS
   Inspeção Inteligente
   Modal Novo usuário / Editar usuário
   ======================================================== */


/* Container identificado pelo custom-users-modal.js */

.inspecao-user-modal {
    box-sizing: border-box !important;
}


/* --------------------------------------------------------
   Modal
   -------------------------------------------------------- */

.inspecao-user-modal .custom-user-modal-content {
    width: min(960px, calc(100vw - 32px)) !important;
    max-width: 960px !important;

    box-sizing: border-box !important;

    border-radius: 20px !important;

    overflow: hidden !important;
}


/* --------------------------------------------------------
   Área dos campos
   -------------------------------------------------------- */

.inspecao-user-modal .custom-user-fields {

    display: grid !important;

    grid-template-columns:
        minmax(150px, 1.15fr)
        minmax(150px, 1.15fr)
        minmax(230px, 1.65fr)
        minmax(160px, 1fr) !important;

    column-gap: 20px !important;
    row-gap: 18px !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    align-items: start !important;

    flex: none !important;
}


/* --------------------------------------------------------
   Wrapper individual
   -------------------------------------------------------- */

.inspecao-user-modal .custom-user-field {

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    flex: none !important;
}


/* --------------------------------------------------------
   Labels
   -------------------------------------------------------- */

.inspecao-user-modal .custom-user-field > label,
.inspecao-user-modal .custom-user-field label {

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 0 8px 0 !important;

    font-weight: 700 !important;
    line-height: 1.25 !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    box-sizing: border-box !important;
}


/* --------------------------------------------------------
   Inputs
   -------------------------------------------------------- */

.inspecao-user-modal .custom-user-field input:not([type="checkbox"]),
.inspecao-user-modal .custom-user-field select,
.inspecao-user-modal .custom-user-field textarea {

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 48px !important;

    padding: 0 13px !important;

    box-sizing: border-box !important;

    border-radius: 10px !important;

    font-size: 16px !important;

    flex: none !important;
}


/* Senha */

.inspecao-user-modal
.custom-user-field[data-user-field="senha"] {

    min-width: 0 !important;
}


/* Perfil */

.inspecao-user-modal
.custom-user-field[data-user-field="perfil"] select {

    width: 100% !important;
}


/* --------------------------------------------------------
   Usuário ativo
   -------------------------------------------------------- */

.inspecao-user-modal .custom-user-active {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    margin-top: 24px !important;

    box-sizing: border-box !important;
}


.inspecao-user-modal .custom-user-active label {

    display: flex !important;

    align-items: center !important;

    gap: 7px !important;

    width: auto !important;

    margin: 0 !important;

    white-space: nowrap !important;
}


/* --------------------------------------------------------
   Tablet
   -------------------------------------------------------- */

@media (max-width: 800px) {

    .inspecao-user-modal .custom-user-fields {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
    }

}


/* --------------------------------------------------------
   Celular
   -------------------------------------------------------- */

@media (max-width: 560px) {

    .inspecao-user-modal .custom-user-modal-content {

        width: calc(100vw - 20px) !important;
    }

    .inspecao-user-modal .custom-user-fields {

        grid-template-columns: 1fr !important;

        gap: 16px !important;
    }

}