/**
 * Padrão de UI: Modal de Tipo de Lançamento - Refatorado para Consistência
 * @version 3.0.0
 *
 * - REATORADO: Este arquivo foi completamente reescrito para herdar e replicar
 *   os estilos do modal de lançamento principal (`_modal-lancamento.css`).
 * - CONSISTÊNCIA: Garante que o layout, responsividade, espaçamento e o
 *   comportamento do TomSelect sejam idênticos em ambos os modais.
 */

/* ==========================================================
   1. ESTRUTURA E DIMENSÕES DO MODAL - RESPONSIVA
   ========================================================== */

/* Define a largura máxima do modal, igual ao modal de referência para consistência */
#locamais-add-edit-tipo-lancamento-modal.locamais-modal {
    max-width: 900px !important;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Garante que o corpo do modal possa ter rolagem interna se o conteúdo for muito grande */
#locamais-add-edit-tipo-lancamento-modal .locamais-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

/* ==========================================================
   2. LAYOUT DE GRID PARA O FORMULÁRIO
   ========================================================== */

/* A classe .locamais-form-grid--2-cols é herdada do design system (_fieldset.css).
   Esta regra garante seu comportamento dentro deste modal específico. */
#locamais-add-edit-tipo-lancamento-modal .locamais-form-grid--2-cols {
    display: grid;
    grid-template-columns: 1fr; /* Padrão mobile: uma coluna */
    gap: 2rem;
    align-items: start; /* Alinha os fieldsets pelo topo */
}

/* Em telas maiores, cria duas colunas de largura igual */
@media (min-width: 768px) {
    #locamais-add-edit-tipo-lancamento-modal .locamais-form-grid--2-cols {
        grid-template-columns: 1fr 1fr;
    }
}

/* Estilo para os fieldsets que agrupam os campos */
#locamais-add-edit-tipo-lancamento-modal .locamais-fieldset {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Espaçamento interno entre os campos do formulário */
    height: 100%; /* Faz com que ambos os fieldsets tenham a mesma altura */
    border: 1px solid var(--lm-border-light, #E2E8F0);
    border-radius: var(--lm-border-radius-lg, 0.75rem);
    padding: 1.5rem;
    margin: 0;
}

#locamais-add-edit-tipo-lancamento-modal .locamais-fieldset__legend {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--lm-secondary, #64748B);
    padding: 0 0.5em;
    margin-left: -0.5em; /* Ajuste fino para alinhar com o padding */
}

/* ==========================================================
   3. ESTILOS PARA TOM SELECT - GARANTINDO CONSISTÊNCIA
   ========================================================== */

/* Wrapper principal do TomSelect */
#locamais-add-edit-tipo-lancamento-modal .ts-wrapper .ts-control {
    background: var(--lm-lighter, #F3F4F6) !important;
    border: 1px solid var(--lm-border, #E5E7EB) !important;
    border-radius: var(--lm-border-radius, 0.375rem) !important;
    padding: 3px 8px !important;
    min-height: 40px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease;
}

/* Estado de foco */
#locamais-add-edit-tipo-lancamento-modal .ts-wrapper.focus .ts-control {
    border-color: var(--lm-primary-dark, #2563EB) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    background: var(--lm-background-main, #FFFFFF) !important;
}

/* Dropdown de opções */
/* Usamos um seletor de atributo para o dropdown injetado no body */
.ts-dropdown[data-sync-parent="#locamais-add-edit-tipo-lancamento-modal"] {
    background: var(--lm-background-main, #FFFFFF) !important;
    border: 1px solid var(--lm-border, #E5E7EB) !important;
    border-radius: var(--lm-border-radius-lg, 0.5rem) !important;
    box-shadow: var(--lm-shadow-md) !important;
    z-index: 10050 !important; /* Z-index alto para ficar sobre qualquer modal */
}

.ts-dropdown[data-sync-parent="#locamais-add-edit-tipo-lancamento-modal"] .option {
    padding: 10px 14px !important;
    font-size: 0.875rem !important;
    border-bottom: 1px solid var(--lm-border-light, #E2E8F0) !important;
    transition: all 0.15s ease !important;
}
.ts-dropdown[data-sync-parent="#locamais-add-edit-tipo-lancamento-modal"] .option:last-child {
    border-bottom: none !important;
}

.ts-dropdown[data-sync-parent="#locamais-add-edit-tipo-lancamento-modal"] .option:hover,
.ts-dropdown[data-sync-parent="#locamais-add-edit-tipo-lancamento-modal"] .option.active {
    background-color: var(--lm-primary-light, #eff6ff) !important;
    color: var(--lm-primary-dark, #2563EB) !important;
}

/* Z-index para garantir que o dropdown apareça sobre outros elementos do modal */
#locamais-add-edit-tipo-lancamento-modal .locamais-form-group {
    position: relative;
    z-index: 1;
}

#locamais-add-edit-tipo-lancamento-modal .locamais-form-group:has(.ts-wrapper.focus) {
    z-index: 15;
}

/* ========================================================================
   4. AJUSTES ESPECÍFICOS E RESPONSIVIDADE
   ======================================================================== */

#locamais-add-edit-tipo-lancamento-modal .currency-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Em telas pequenas, o grid de 2 colunas se torna uma única coluna */
@media (max-width: 768px) {
    #locamais-add-edit-tipo-lancamento-modal .locamais-modal-layout-grid,
    #locamais-add-edit-tipo-lancamento-modal .locamais-form-grid--2-cols {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Remove a altura fixa dos fieldsets no mobile para permitir que o conteúdo flua naturalmente */
    #locamais-add-edit-tipo-lancamento-modal .locamais-fieldset {
        height: auto;
    }
}