/* =========================================================================
   SEÇÃO 0: CABEÇALHO COM GRADIENTE AZUL→ROXO
   ========================================================================= */

.app-header {
    height: 1.4cm;
    background: linear-gradient(135deg, #007bff 0%, #6f42c1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1000;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

.header-logo i {
    margin-right: 8px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.header-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

.header-btn i {
    margin-right: 5px;
}

/* =========================================================================
   SEÇÃO 1: LAYOUT PRINCIPAL DO INDEX - CORRIGIDO
   ========================================================================= */

/* Container principal - AJUSTADO para compensar cabeçalho */
.main-container {
    display: flex;
    height: calc(100vh - 1cm);  /* Subtraindo altura do cabeçalho */
    overflow: hidden;
}

/* =========================================================================
   SEÇÃO 2: DEFINIÇÃO DOS PAINÉIS - CORRIGIDA COM SPLITTERS
   ========================================================================= */

#leftPanel, .panel-left {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}
.panel-center {
    flex: 1;
    background: white;
    min-width: 400px;
    overflow: hidden;
}

.panel-right {
    width: 300px;
    min-width: 250px;
    max-width: 450px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-left: 1px solid #e9ecef;
    overflow: hidden;
    transition: width 0.3s ease;
}

/* =========================================================================
   SEÇÃO 3: CONTEÚDO DOS PAINÉIS
   ========================================================================= */

.panel-content {
    height: 100%;
}

/* =========================================================================
   SEÇÃO 4: SISTEMA DE SPLITTERS FUNCIONAIS
   ========================================================================= */

 .panel-splitter {
    width: 1px;
    background: #e9ecef;
    cursor: col-resize;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
    position: relative;
    user-select: none;
    border: 1px solid #dee2e6;
    z-index: 10;
}

/*.panel-splitter {
    display: none !important;
}*/


.panel-splitter:hover {
    background: #007bff;
}

.panel-splitter:active {
    background: #0056b3;
}

/* Área de arraste maior (invisível) */
.panel-splitter::before {
    content: '';
    position: absolute;
    left: -3px;
    right: -3px;
    top: 0;
    bottom: 0;
    cursor: col-resize;
}

/* Splitter específicos */
#splitter {
    order: 2; /* Entre left e center */
}

#rightSplitter {
    order: 4; /* Entre center e right */
}

/* Ordem dos elementos */
.panel-left {
    order: 1;
}

.panel-center {
    order: 3;
}

.panel-right {
    order: 5;
}


/* =========================================================================
   SEÇÃO 5: RESPONSIVIDADE
   ========================================================================= */

@media (max-width: 768px) {
    .left-panel {
        width: 100%;
        position: fixed;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .left-panel.active {
        transform: translateX(0);
    }

    .right-panel {
        display: none;
    }

    .splitter {
        display: none;
    }
    
    /* Header responsivo */
    .header-left span {
        display: none;
    }
    
    .header-btn span {
        display: none;
    }
    
    .header-btn {
        padding: 8px 12px;
    }
}

/* =========================================================================
   SEÇÃO 6: AJUSTE DOS CONTEÚDOS INTERNOS
   ========================================================================= */

#leftContent,
#centerContent,
#rightContent {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

/* Settings específico para se ajustar ao painel */
#leftContent .settings-section,
#leftContent .user-header,
#leftContent .plan-footer {
    width: 100%;
    box-sizing: border-box;
    max-width: none;
}