/* 📦 CRM HOLDER - CSS PRINCIPAL OTIMIZADO */

/* ==========================================================================
   1. IMPORTS ESSENCIAIS (Ordem Estratégica)
   ========================================================================== */
@import url('variables.css');    /* Tokens de design */
@import url('base.css');         /* Reset e tipografia */
@import url('layout.css');       /* Estrutura principal */
@import url('components.css');   /* Componentes UI */
@import url('utilities.css');    /* Utilitários */

/* ==========================================================================
   2. ESTRUTURA DO LAYOUT
   ========================================================================== */
.app-layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-page);
}

.main-content-wrapper {
    flex: 1;
    padding-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
}

.main-content {
    padding: var(--space-sm) var(--space-lg);
    min-height: calc(100vh - var(--header-height));
}

/* Sidebar desktop (1024px+) */
@media (min-width: 1024px) {
    body.sidebar-active .main-content-wrapper {
        margin-left: var(--sidebar-width);
    }
    
    body.sidebar-active .main-content {
        padding-left: calc(var(--space-lg) + var(--space-md));
    }
}

/* ==========================================================================
   5. RESPONSIVIDADE
   ========================================================================== */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.loaded) {
    visibility: hidden;
}

body.loaded {
    visibility: visible;
}

/* ==========================================================================
   7. CLASSES AUXILIARES PARA FORMULÁRIOS
   ========================================================================== */
.modal-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.form-section {
    margin-bottom: var(--space-xl);
}

.form-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-sm);
}

/* ==========================================================================
   STATUS CHANGER (Modal de Lead)
   ========================================================================== */
.status-controls-section .status-selector{
    display:flex;
    align-items:center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.status-controls-section .status-selector .form-select{
    flex: 1;
    height: 3rem; /* alinha com .btn */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2364758b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1.1rem;
}

.status-controls-section .btn-status-confirm{
    height: 3rem;
    padding: 0 1.25rem;
}

/* Melhor visual do placeholder */
.status-controls-section .status-selector .form-select option[value=""]{
    color: var(--text-color-tertiary);
}