/**
 * Estilos para o shortcode [locamais_gerenciar_usuarios].
 * @version 4.1.0 - CORRIGIDO: Alinhamento da coluna 'Unidades' e 'Grupos' para a esquerda no modo responsivo.
 */

/* ========================================================================
 * 1. LAYOUT GERAL E LARGURAS DE COLUNA
 * ======================================================================== */
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-data-table {
    table-layout: fixed;
    width: 100%;
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-data-table th,
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-data-table td {
    vertical-align: middle;
}

/* Larguras recalculadas para 7 colunas (prioriza Mail e Status) */
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-data-table .col-nome { width: 18%; }
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-data-table .col-email { width: 14%; }
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-data-table .col-mail { width: 16%; text-align: center; }
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-data-table .col-status { width: 14%; text-align: center; }
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-data-table .col-grupos { width: 12%; text-align: left; }
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-data-table .col-unidades { width: 12%; text-align: left; }
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-data-table .col-acoes { width: 14%; text-align: center; }

/* ========================================================================
 * 2. MELHORIAS DE UX/UI (Filtros, Ícones, Badges)
 * ======================================================================== */
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-card-filters {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--lm-border-light);
    justify-content: flex-start; /* Alinha o filtro de unidade à esquerda */
}
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-card-filters .locamais-form-control-item {
    max-width: 250px; /* Limita a largura do seletor de unidades */
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-users-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-users-mail-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin-top: 0.6rem;
    color: var(--lm-text-muted, #64748b);
    font-size: 0.85rem;
}
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-users-mail-legend .legend-title {
    font-weight: 600;
    color: var(--lm-text, #0f172a);
}
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-users-mail-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-users-toolbar .locamais-search-wrapper {
    flex: 1;
    min-width: 220px;
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-users-toolbar .locamais-form-control-item {
    min-width: 220px;
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .locamais-portal-page-subtitle {
    margin-top: 0.35rem;
    color: var(--lm-text-muted, #94a3b8);
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .col-unidades,
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .col-grupos {
    white-space: normal; /* Permite que os badges quebrem a linha se necessário */
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .col-email {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .col-nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.email-short {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: monospace;
    font-size: 0.9em;
    color: var(--lm-text-muted);
}
.btn-copy-email {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    border-radius: 50%;
    color: var(--lm-text-muted);
    transition: all 0.2s ease;
}
.btn-copy-email:hover {
    color: var(--lm-primary-dark);
    background-color: var(--lm-lighter);
}
.btn-copy-email .fa-regular {
    font-size: 14px;
}

.badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-start; /* Alinha os badges à esquerda por padrão */
}

.locamais-badge--group {
    background-color: #f8f9fb;
    color: #374151;
    border: 1px solid #e5e7eb;
    font-weight: 600;
    padding: 1px 6px;
    font-size: 0.68rem;
    border-radius: 999px;
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .col-mail .locamais-status-badge,
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .col-status .locamais-status-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    line-height: 1.1;
}

.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .col-unidades .locamais-badge {
    background-color: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
    padding: 1px 6px;
    font-size: 0.62rem;
    border-radius: 999px;
}

/* ÍCONES DE AÇÃO MINIMALISTAS E MODERNOS */
.col-acoes {
    white-space: nowrap;
}
.col-acoes .locamais-button--small {
    padding: 0;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    border-radius: 50%; /* Botões redondos */
    margin: 0 4px; /* Espaçamento sutil entre os botões */
    box-shadow: var(--lm-shadow);
}
.col-acoes .locamais-button--small:hover {
    transform: translateY(-1px);
    box-shadow: var(--lm-shadow-md);
}
.col-acoes .locamais-button--small i {
    font-size: 0.85rem;
    line-height: 1;
    margin: 0;
}
.col-acoes .locamais-button--small .dashicons {
    font-size: 18px;
    line-height: 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ✅ Modal de Usuário: padrão ouro minimalista (header/footer fixos, scroll no conteúdo) */
#modal-manage-user-edit.locamais-modal,
#modal-manage-user-add.locamais-modal {
    width: min(92vw, 760px);
    max-height: min(92vh, 720px);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
}

#modal-manage-user-edit .locamais-modal__content,
#modal-manage-user-add .locamais-modal__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#modal-manage-user-edit .locamais-modal__header,
#modal-manage-user-add .locamais-modal__header {
    flex-shrink: 0;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--lm-border, #e5e7eb);
    background: #ffffff;
}

#modal-manage-user-edit .locamais-modal__footer,
#modal-manage-user-add .locamais-modal__footer {
    flex-shrink: 0;
    padding: 1rem 1.6rem 1.2rem;
    border-top: 1px solid var(--lm-border, #e5e7eb);
    background: var(--lm-bg-light, #f9fafb);
}

#modal-manage-user-edit .locamais-modal__footer .locamais-button,
#modal-manage-user-add .locamais-modal__footer .locamais-button {
    margin-bottom: 0.1rem;
}

#modal-manage-user-edit .locamais-modal__body,
#modal-manage-user-add .locamais-modal__body {
    flex: 1;
    min-height: 0;
    overflow: hidden; /* scroll ficará no conteúdo das abas */
}

/* Abas no padrão do design system */
#modal-manage-user-edit.modal-tabs .tab-container,
#modal-manage-user-add.modal-tabs .tab-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#modal-manage-user-edit.modal-tabs .tab-navigation,
#modal-manage-user-add.modal-tabs .tab-navigation {
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--lm-border-light, #E2E8F0);
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
    background-color: #ffffff;
    overflow: hidden; /* sem rolagem na aba */
}

#modal-manage-user-edit.modal-tabs .tab-button,
#modal-manage-user-add.modal-tabs .tab-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.25rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--lm-text-muted, #6B7280);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
}

#modal-manage-user-edit.modal-tabs .tab-button:hover,
#modal-manage-user-add.modal-tabs .tab-button:hover {
    color: var(--lm-primary-dark, #2563EB);
}

#modal-manage-user-edit.modal-tabs .tab-button.active,
#modal-manage-user-add.modal-tabs .tab-button.active {
    color: var(--lm-primary-dark, #2563EB);
    font-weight: 600;
    border-bottom-color: var(--lm-primary-dark, #2563EB);
}

#modal-manage-user-edit.modal-tabs .tab-content-wrapper,
#modal-manage-user-add.modal-tabs .tab-content-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.5rem;
}

#modal-manage-user-edit .section-title,
#modal-manage-user-add .section-title {
    font-size: 1rem;
    color: var(--lm-text, #0f172a);
    margin-bottom: 0.75rem;
}

#modal-manage-user-edit .locamais-form-grid--2-cols,
#modal-manage-user-add .locamais-form-grid--2-cols {
    gap: 1rem;
}

#modal-manage-user-edit .locamais-input,
#modal-manage-user-add .locamais-input {
    min-height: 40px;
    font-size: 0.9rem;
}

/* Dropdown do TomSelect acima do conteúdo */
#modal-manage-user-edit .ts-wrapper,
#modal-manage-user-add .ts-wrapper {
    z-index: 20;
}
body .ts-dropdown {
    z-index: 10050 !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    background: #fff;
}
body .ts-dropdown .option {
    background: #fff;
}
body .ts-dropdown[data-sync-parent^="#modal-manage-user-"] {
    max-width: min(92vw, 760px);
}

/* Wizard do modal de criação (layout enterprise) */
#modal-manage-user-add.modal-wizard .locamais-modal__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#modal-manage-user-add.modal-wizard .locamais-modal__body {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#modal-manage-user-add.modal-wizard #user-modal-create-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

#modal-manage-user-add.modal-wizard .stepper-container {
    padding: 0.9rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--lm-border-light, #E2E8F0);
    background: #ffffff;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#modal-manage-user-add.modal-wizard .step-content-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.5rem;
}

#modal-manage-user-add.modal-wizard .modal-wizard__footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.5rem 1.1rem;
    border-top: 1px solid var(--lm-border, #e5e7eb);
    background: var(--lm-bg-light, #f9fafb);
}

#modal-manage-user-add.modal-wizard .form-actions-right {
    display: inline-flex;
    gap: 0.6rem;
}

#modal-manage-user-add.modal-wizard .locamais-button {
    min-height: 38px;
    font-size: 0.88rem;
}

#modal-manage-user-add .locamais-credentials-card {
    border: 1px solid var(--lm-border-light, #e2e8f0);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    display: grid;
    gap: 0.75rem;
}

#modal-manage-user-add .locamais-credentials-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--lm-text, #0f172a);
}

#modal-manage-user-add .locamais-credentials-label {
    color: var(--lm-text-muted, #64748b);
    font-weight: 500;
}

#modal-manage-user-add .locamais-credentials-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 600;
}

#modal-manage-user-add .locamais-credentials-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

#modal-manage-user-add.modal-wizard .stepper-container .step-circle {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
}

#modal-manage-user-add.modal-wizard .stepper-container .step-label {
    font-size: 0.78rem;
    color: var(--lm-text-muted, #94a3b8);
}

#modal-manage-user-add.modal-wizard .progress-connector {
    top: 18px;
    opacity: 0.6;
    left: 70px;
    right: 70px;
    width: auto;
    transform: none;
}

#modal-manage-user-add.modal-wizard .step {
    flex: 1;
    width: auto;
}

#modal-manage-user-add .wizard-btn-hidden {
    display: none !important;
}

#modal-manage-user-add .wizard-btn-visible {
    display: inline-flex !important;
}

#modal-manage-user-add .locamais-form-grid--2-cols {
    gap: 1rem;
}

#modal-manage-user-add .locamais-input {
    min-height: 40px;
    font-size: 0.9rem;
}
.col-acoes .locamais-button--outline:hover {
    border-color: var(--lm-primary-dark);
    color: var(--lm-primary-dark);
    background-color: var(--lm-primary-light);
}
.col-acoes .locamais-button--error:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* Badge de status do mailserver */
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .mail-status {
    font-weight: 600;
    letter-spacing: 0.02em;
}
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .mail-status--ok {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .mail-status--missing {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .mail-status--na {
    background-color: #e2e8f0;
    color: #475569;
    border: 1px solid #cbd5f5;
}
.locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] .mail-status--error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}


/* ========================================================================
 * 3. RESPONSIVIDADE
 * ======================================================================== */
@media screen and (max-width: 992px) {
    .locamais-portal-ui-wrapper[data-module="gerenciar-usuarios"] td {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }
    
    /* ✅ REATORADO: Ações e badges com alinhamentos específicos */
    .col-acoes {
        /* A célula em si é um flex container, alinhamos seu conteúdo (os botões) ao final */
        justify-content: flex-end; 
    }

    .col-unidades .badge-list,
    .col-grupos .badge-list {
        /* O container dos badges é um flex container, alinhamos seu conteúdo (os badges) ao início */
        justify-content: flex-end; 
    }
}