/**
 * Padrão de UI: Modal de Lançamento - VERSÃO RESPONSIVA REFATORADA
 * @version 4.0.0
 * - NOVO: Layout responsivo que elimina rolagem em desktop/telas maiores
 * - NOVO: Sistema de pills com botão "+X mais" para campos associados
 * - NOVO: Modal com altura controlada e scroll interno inteligente
 * - NOVO: Campo de valor com design profissional aprimorado
 * - MANTIDO: Todas as cores, arquitetura e funcionalidades existentes
 * - MANTIDO: Z-index para TomSelect funcionando corretamente
 */

/* ==========================================================
   1. ESTRUTURA E DIMENSÕES DO MODAL - RESPONSIVA
   ========================================================== */
.locamais-modal.modal-lancamento--wide {
    /* Responsividade inteligente */
    max-width: min(95vw, 1120px) !important;
    width: 95vw;
    
    /* Controle de altura para evitar rolagem externa */
    max-height: min(95vh, 750px) !important;
    height: auto;
    
    /* Estrutura flex para controle interno */
    display: flex;
    flex-direction: column;
    
    /* Melhoria visual sutil */
    border-radius: 12px;
    overflow: hidden;
}

/* Container principal flexível */
.locamais-modal.modal-lancamento--wide .locamais-modal__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Importante para flex shrinking */
}

/* Header fixo (não rola) */
.locamais-modal.modal-lancamento--wide .locamais-modal__header {
    flex-shrink: 0;
    padding: 1.25rem 2rem 1rem;
    border-bottom: 1px solid var(--lm-border, #e5e7eb);
}

/* Body com scroll interno quando necessário */
.locamais-modal.modal-lancamento--wide .locamais-modal__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem 2rem;
    
    /* Scroll customizado mais sutil */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.locamais-modal.modal-lancamento--wide .locamais-modal__body::-webkit-scrollbar {
    width: 6px;
}

.locamais-modal.modal-lancamento--wide .locamais-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.locamais-modal.modal-lancamento--wide .locamais-modal__body::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

.locamais-modal.modal-lancamento--wide .locamais-modal__body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.8);
}

/* Footer/Actions fixo (não rola) */
.locamais-modal.modal-lancamento--wide .locamais-form-actions {
    flex-shrink: 0;
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid var(--lm-border, #e5e7eb);
    background: var(--lm-bg-light, #f9fafb);
    
    /* Flexbox para botões */
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ==========================================================
   2. LAYOUT RESPONSIVO DOS CAMPOS - OTIMIZADO
   ========================================================== */
.locamais-modal.modal-lancamento--wide .locamais-modal-layout-grid {
    display: grid;
    gap: 2rem;
    
    /* Layout responsivo inteligente */
    grid-template-columns: 1fr;
}

/* Breakpoint para desktop - elimina scroll */
@media (min-width: 900px) {
    .locamais-modal.modal-lancamento--wide .locamais-modal-layout-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

/* Fieldsets com espaçamento otimizado */
.locamais-modal.modal-lancamento--wide .locamais-fieldset {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border: none;
    margin: 0;
    padding: 0;
}

.locamais-modal.modal-lancamento--wide .locamais-fieldset__legend {
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding: 0;
    border: none;
}

/* ==========================================================
   3. GRID PARA VALOR E DATA - RESPONSIVO
   ========================================================== */
.locamais-modal.modal-lancamento--wide .locamais-form-grid--2-cols {
    display: grid;
    gap: 1.25rem;
    align-items: end;
    
    /* Mobile first */
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .locamais-modal.modal-lancamento--wide .locamais-form-grid--2-cols {
        grid-template-columns: 1.2fr 1fr; /* Valor um pouco maior que data */
    }
}

/* ==========================================================
   4. CAMPO DE VALOR PROFISSIONAL - R$ ESTILIZADO MANTIDO
   ========================================================== */
.locamais-modal.modal-lancamento--wide .locamais-input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.locamais-modal.modal-lancamento--wide .locamais-input-with-icon span {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lm-text-muted, #6b7280);
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    
    pointer-events: none;
    user-select: none;
    line-height: 1;
    
    /* Sombra para destacar */
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    
    transition: all 0.2s ease;
}

.locamais-modal.modal-lancamento--wide .locamais-input-with-icon input {
    width: 100%;
    padding-left: 3.5rem !important;
    padding-right: 1rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    
    font-weight: 500;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    text-align: left;
    
    position: relative;
    z-index: 2;
    background-color: white;
    
    transition: all 0.3s ease;
}

/* Estados do campo de valor */
.locamais-modal.modal-lancamento--wide .locamais-input-with-icon input.auto-filled {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.03) 0%, white 20%);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.1);
}

.locamais-modal.modal-lancamento--wide .locamais-input-with-icon input:focus {
    padding-left: 3.5rem !important;
    border-color: var(--lm-primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
    outline: none;
}

/* R$ reage ao focus do input */
.locamais-modal.modal-lancamento--wide .locamais-input-with-icon input:focus + span,
.locamais-modal.modal-lancamento--wide .locamais-input-with-icon:focus-within span {
    color: var(--lm-primary, #2563eb);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-50%) scale(1.02);
}

.locamais-modal.modal-lancamento--wide .locamais-input-with-icon input::placeholder {
    color: var(--lm-text-muted, #9ca3af);
    opacity: 0.6;
    font-weight: normal;
}

/* ==========================================================
   5. SISTEMA DE PILLS COM BOTÃO "+X MAIS" - NOVO
   ========================================================== */

/* Container para TomSelect com pills */
.locamais-modal.modal-lancamento--wide .ts-wrapper.multi .ts-control {
    min-height: 42px !important;
    max-height: 80px; /* Altura máxima antes do "+X mais" */
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
    
    /* Padding para acomodar o botão "+X mais" */
    padding-right: 70px !important;
}

/* Quando expandido, permite altura maior */
.locamais-modal.modal-lancamento--wide .ts-wrapper.multi .ts-control.is-expanded {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    
    /* Scroll interno das pills */
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

.locamais-modal.modal-lancamento--wide .ts-wrapper.multi .ts-control.is-expanded::-webkit-scrollbar {
    width: 4px;
}

.locamais-modal.modal-lancamento--wide .ts-wrapper.multi .ts-control.is-expanded::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
    border-radius: 2px;
}

/* Botão "+X mais" */
.locamais-modal.modal-lancamento--wide .ts-wrapper.multi .ts-control.has-hidden-items::after {
    content: "+" attr(data-hidden-count);
    position: absolute;
    top: 50%;
    right: 35px; /* Espaço para seta dropdown */
    transform: translateY(-50%);
    
    background: var(--lm-primary, #2563eb);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 12px;
    cursor: pointer;
    
    min-width: 24px;
    text-align: center;
    line-height: 1.4;
    
    /* Hover effect */
    transition: all 0.2s ease;
}

.locamais-modal.modal-lancamento--wide .ts-wrapper.multi .ts-control.has-hidden-items:hover::after {
    background: var(--lm-primary-dark, #1d4ed8);
    transform: translateY(-50%) scale(1.05);
}

/* Quando expandido, esconde o botão "+X mais" */
.locamais-modal.modal-lancamento--wide .ts-wrapper.multi .ts-control.is-expanded::after {
    display: none;
}

/* Pills (items) com espaçamento otimizado */
.locamais-modal.modal-lancamento--wide .ts-wrapper.multi .ts-control .item {
    margin: 2px 3px 2px 0;
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 6px;
    
    /* Quebra de linha inteligente */
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

/* ==========================================================
   6. Z-INDEX PARA TOMSELECT - MANTIDO E APRIMORADO
   ========================================================== */
.locamais-modal.modal-lancamento--wide .locamais-form-group {
    position: relative;
    z-index: 1;
    margin-bottom: 1.25rem;
}

.locamais-modal.modal-lancamento--wide .locamais-form-group:has(.ts-wrapper.focus) {
    z-index: 15; /* Aumentado para garantir sobreposição */
}

.locamais-modal.modal-lancamento--wide .ts-wrapper {
    width: 100%;
}

/* Dropdown do TomSelect com z-index alto */
.locamais-modal.modal-lancamento--wide .ts-dropdown {
    z-index: 20 !important;
}

/* ==========================================================
   7. RESPONSIVIDADE MOBILE - OTIMIZADA
   ========================================================== */
@media (max-width: 575px) {
    .locamais-modal.modal-lancamento--wide {
        max-width: 100vw !important;
        width: 100vw;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0;
    }
    
    .locamais-modal.modal-lancamento--wide .locamais-modal__header,
    .locamais-modal.modal-lancamento--wide .locamais-modal__body,
    .locamais-modal.modal-lancamento--wide .locamais-form-actions {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .locamais-modal.modal-lancamento--wide .locamais-form-actions {
        justify-content: stretch;
    }
    
    .locamais-modal.modal-lancamento--wide .locamais-form-actions button {
        flex: 1;
        min-width: 0;
    }
}

/* ==========================================================
   8. MELHORIAS DE UX - SUTIS
   ========================================================== */

/* Animação suave para mudanças de estado */
.locamais-modal.modal-lancamento--wide .locamais-form-group {
    transition: transform 0.2s ease;
}

/* Destaque sutil quando dropdown está ativo */
.locamais-modal.modal-lancamento--wide .locamais-form-group:has(.ts-wrapper.focus) {
    transform: translateZ(0); /* Force GPU layer */
}

/* Espaçamento interno otimizado para melhor densidade */
.locamais-modal.modal-lancamento--wide .locamais-form-group:last-child {
    margin-bottom: 0;
}

/* Info text com melhor hierarquia visual */
.locamais-modal.modal-lancamento--wide .locamais-form-text-muted {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
    min-height: 1.2em; /* Reserva espaço para alinhamento */
}