.permissions-box{

display:grid;
grid-template-columns:1fr 1fr;
gap:12px;

background:#f5f5f5;
padding:15px;
border-radius:14px;

}

.permissions-box label{

display:flex;
align-items:center;
gap:10px;

font-size:15px;
font-weight:500;

}

/* =========================
   ACCOUNTS PERMISSIONS CLEAN UI
========================= */

.accounts-modal-content{
    max-width:850px !important;
    width:850px !important;
    max-height:82vh !important;
    overflow-y:auto !important;
    padding:32px 38px !important;
    border-radius:26px !important;
    box-sizing:border-box !important;
}

.accounts-modal-content input,
.accounts-modal-content select{
    width:100% !important;
    height:44px !important;
    padding:0 14px !important;
    margin-bottom:14px !important;
    border:1px solid #dbe3ee !important;
    border-radius:12px !important;
    font-size:15px !important;
    box-sizing:border-box !important;
}

.permissions-wrapper{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:18px;
    margin:18px 0;
}

.permissions-section{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:16px 18px;
    margin-bottom:14px;
}

.permissions-section:last-child{
    margin-bottom:0;
}

.permissions-section h3{
    margin:0 0 12px 0;
    color:#0f172a;
    font-size:16px;
    font-weight:900;
}

.permissions-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px 22px;
}

.permissions-grid label{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:700;
    color:#0f172a;
}

.permissions-grid input[type="checkbox"],
.permissions-grid input[type="radio"]{
    width:18px !important;
    height:18px !important;
    margin:0 !important;
    padding:0 !important;
}

.accounts-modal-content .save-user-btn{
    width:220px !important;
    height:46px !important;
    display:block !important;
    margin:18px auto 0 auto !important;
    border-radius:12px !important;
    font-size:15px !important;
    font-weight:900 !important;
}

.accounts-modal-content::-webkit-scrollbar{
    width:8px;
}

.accounts-modal-content::-webkit-scrollbar-track{
    background:#f1f5f9;
    border-radius:10px;
}

.accounts-modal-content::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:10px;
}

.accounts-modal-content::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}

@media(max-width:950px){

    .accounts-modal-content{
        width:92vw !important;
        max-width:92vw !important;
    }

    .permissions-grid{
        grid-template-columns:1fr;
    }

}

/* =========================
   USER TIMEZONE FIELD
========================= */

.account-field-label{
    display:block;
    margin:2px 0 7px 2px;
    color:#334155;
    font-size:13px;
    font-weight:800;
}

.account-field-note{
    margin:-7px 2px 14px 2px;
    color:#64748b;
    font-size:12px;
    line-height:1.45;
}

#newUserTimezone,
#editUserTimezone{
    cursor:pointer;
}


/* =========================
   CAMPAIGN SMTP PERMISSION NOTE
========================= */

.campaign-smtp-permission-note{
    margin-top:12px;
    padding:10px 12px;
    border-radius:10px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#64748b;
    font-size:12px;
    line-height:1.45;
}


/* =========================================================================
   ACCOUNTS PERMISSIONS UI
   Consolidated into this canonical page stylesheet.
   ========================================================================= */

/* =========================================================================
   CONEX MAILER - PERMISSION UI & USER MODAL LAYOUT v3.4.21
   ========================================================================= */

#addUserModal > div,
#editUserModal > div {
    width: min(920px, calc(100vw - 40px)) !important;
    max-width: 920px !important;
    box-sizing: border-box !important;
}

#addUserModal input:not([type="checkbox"]):not([type="radio"]),
#editUserModal input:not([type="checkbox"]):not([type="radio"]),
#addUserModal select,
#editUserModal select,
#addUserModal textarea,
#editUserModal textarea {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
}

#addUserModal textarea,
#editUserModal textarea {
    min-height: 90px !important;
    resize: vertical !important;
}

#addUserModal form,
#editUserModal form,
#addUserModal .user-form,
#editUserModal .user-form,
#addUserModal .modal-form,
#editUserModal .modal-form {
    gap: 5px !important;
    row-gap: 5px !important;
}

#addUserModal .form-group,
#editUserModal .form-group,
#addUserModal .input-group,
#editUserModal .input-group,
#addUserModal .field-group,
#editUserModal .field-group {
    margin: 0 0 5px 0 !important;
    gap: 5px !important;
}

#addUserModal h2,
#editUserModal h2 {
    margin: 0 0 10px 0 !important;
}

#addUserModal .permission-section,
#editUserModal .permission-section,
#addUserModal .permissions-section,
#editUserModal .permissions-section,
#addUserModal .permissions-group,
#editUserModal .permissions-group {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

#addUserModal .modal-actions,
#editUserModal .modal-actions,
#addUserModal .form-actions,
#editUserModal .form-actions {
    margin-top: 5px !important;
    gap: 8px !important;
}

#addUserModal .modal-actions button,
#editUserModal .modal-actions button,
#addUserModal .form-actions button,
#editUserModal .form-actions button {
    min-height: 44px !important;
    padding: 10px 18px !important;
}

#addUserModal label,
#editUserModal label {
    line-height: 1.3 !important;
}

@media (max-width: 760px) {
    #addUserModal > div,
    #editUserModal > div {
        width: calc(100vw - 20px) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}



/* =========================================================================
   ACCOUNTS MODAL PARITY — CONSOLIDATED CLEAN V7
   ========================================================================= */

/* Accounts modal: always open from the top and keep the exact two-column grid. */
.accounts-modal-content{
    max-height:82vh !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
}
.accounts-modal-content .permissions-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.accounts-modal-content .permissions-grid label{
    min-width:0 !important;
}

@media(max-width:950px){
    .accounts-modal-content .permissions-grid{grid-template-columns:1fr !important;}
}