/**
 * Estilo moderno para o fundo da aplicação e correções de layout
 * Sobrescreve problemas do design antigo e implementa melhorias modernas
 */

/* ================================================== */
/* GRADIENTE MODERNO DO FUNDO                        */
/* ================================================== */

/* Gradiente principal do body - tons neutros elegantes */
body { 
    background: linear-gradient(135deg, #E0E8F9 0%, #A8C8E1 50%, #7FB8D3 100%) !important;    
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important; /* Previne scroll horizontal */
}

/* ================================================== */
/* HEADER FIXO - NOVA ESTRUTURA                      */
/* ================================================== */

/* Header fixo no topo - FORA da área de scroll */
#header.header-fixed {
    position: fixed !important;
    top: 0 !important;
    z-index: 1030 !important; /* Z-INDEX AUTORITATIVO: Header (supera app.min.1.css z-index: 11) */
    height: 50px !important; /* Altura fixa para referência */
    box-shadow: 0 2px 20px rgba(16, 148, 99, 0.15) !important;
    /* Layout será definido pelas regras específicas abaixo */
}

/* ================================================== */
/* CONTAINER PRINCIPAL - SEM HEADER                  */
/* ================================================== */

/* CORREÇÃO: Sobrescrever regra antiga do estilo.css que usava 90px */
.conteudo {
    height: calc(100% - 50px) !important; /* Corrigir de 90px para 50px */
    height: -moz-calc(100% - 50px) !important;
    height: -webkit-calc(100% - 50px) !important;
}

/* ============================================= */
/* PADDING-TOP AUTHORITY - SISTEMA CONSOLIDADO */
/* ============================================= */
/*
   PADDING-TOP MASTER STRATEGY:
   - Header fixo: 50px altura
   - Container principal usa margin-top: 50px no lugar de padding-top
   - Sistema de header fixo + container scrollável
   - REMOVE padding-top para evitar conflitos com framework
*/

/* CONSOLIDADO: Container principal SEM padding-top */
.app > .header-container.header-fixed + .main-container,
html body .app > .header-container.header-fixed + .main-container,
body .app > .header-container.header-fixed + .main-container,
.main-container,
#main,
html body #main,
body section#main,
section#main {
    padding-top: 0 !important; /* AUTORITATIVE: Remove padding-top para usar margin-top na .conteudo */
}

/* CONSOLIDADO: Aplicar em todos os contextos possíveis */
.app .main-container,
.app > .main-container,
html .app > .main-container,
body .app > .main-container {
    padding-top: 0 !important; /* AUTORITATIVE: Consistência total */
}

/* CONSOLIDADO: Media query para garantir consistência */
@media (min-width: 768px) {
    .app > .header-container.header-fixed + .main-container,
    html body .app > .header-container.header-fixed + .main-container,
    body .app > .header-container.header-fixed + .main-container,
    .main-container,
    #main,
    html body #main,
    body section#main,
    section#main {
        padding-top: 0 !important; /* AUTORITATIVE: Desktop consistency */
    }
}

/* Container de conteúdo scrollável - agora SEM header */
.conteudo.scroll-container {
    margin-top: 50px !important; /* Espaço para o header fixo */
    height: calc(100vh - 50px) !important; /* Altura total menos header */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    /* Scroll suave e elegante */
    scroll-behavior: smooth !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(16, 148, 99, 0.3) transparent !important;
}

/* Scroll personalizado para webkit no container principal */
.conteudo.scroll-container::-webkit-scrollbar {
    width: 8px !important;
}

.conteudo.scroll-container::-webkit-scrollbar-track {
    background: rgba(16, 148, 99, 0.05) !important;
    border-radius: 4px !important;
}

.conteudo.scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(16, 148, 99, 0.4), rgba(16, 148, 99, 0.6)) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.conteudo.scroll-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(16, 148, 99, 0.6), rgba(16, 148, 99, 0.8)) !important;
}

/* ================================================== */
/* CORREÇÕES DO LAYOUT DO SIDEBAR                    */
/* ================================================== */

/* Sidebar agora trabalha com o container de conteúdo */
#sidebar {
    top: 50px !important; /* Posicionar ABAIXO do header fixo */
    height: calc(100vh - 50px) !important; /* Altura total menos altura do header */

    left: 0 !important;
    z-index: 1040 !important; /* Z-INDEX AUTORITATIVO: Sidebar (supera app.min.1.css z-index: 5) */
    box-shadow: 2px 0 20px rgba(16, 148, 99, 0.08) !important;
    width: 240px !important; /* Largura fixa do sidebar */
    transform: translateX(-100%) !important; /* OCULTO por padrão */
    transition: transform 0.3s ease, width 0.3s ease !important;
}

/* Sidebar colapsado - todas as variações possíveis */
#sidebar.collapsed,
aside#sidebar.collapsed,
body.sidebar-is-collapsed #sidebar,
body.sidebar-is-collapsed aside#sidebar {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}

/* Sidebar VISÍVEL quando tem classe toggled */
#sidebar.toggled {
    transform: translateX(0) !important; /* VISÍVEL quando toggled */
}

/* Sidebar visível E colapsado - todas as combinações */
#sidebar.toggled.collapsed,
aside#sidebar.toggled.collapsed,
body.sidebar-is-collapsed #sidebar.toggled,
body.sidebar-is-collapsed aside#sidebar.toggled {
    transform: translateX(0) !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}

/* Remover margin-top do sidebar - não precisa mais */
#main > #sidebar:first-child,
#main > aside#sidebar:first-child {
    margin-top: 0 !important;
}

/* Conteúdo principal - estrutura base */
#main {
    padding-top: 0 !important;
    min-height: calc(100vh - 50px) !important;
    position: relative !important;
    width: 100% !important;
}

/* Área de conteúdo - sistema layout correto - APENAS DESKTOP */
@media (min-width: 768px) {
    /* Ajuste para garantir que a margem só seja aplicada quando autenticado */
    body:not(.unauthenticated-layout) #content,
    body:not(.unauthenticated-layout) #content.page-view,
    body:not(.unauthenticated-layout) .page-view {
        margin-left: 240px !important; /* Default: sidebar expandida */
        width: calc(100% - 240px) !important;
        min-height: calc(100vh - 50px) !important;
        box-sizing: border-box !important;
        transition: margin-left 0.3s ease, width 0.3s ease !important;
        position: relative !important;
    }

    /* Layout não autenticado - sem margens */
    body.unauthenticated-layout #content,
    body.unauthenticated-layout #content.page-view,
    body.unauthenticated-layout .page-view {
        margin-left: 0 !important;
        width: 100% !important;
        min-height: 100vh !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
}

/* Header também deve acompanhar sidebar - DESKTOP ONLY */
@media (min-width: 768px) {
    body:not(.unauthenticated-layout) #header,
    body:not(.unauthenticated-layout) #header.header-fixed,
    body:not(.unauthenticated-layout) .header-container {
        left: 240px !important; /* Posição da sidebar expandida */
        width: calc(100% - 240px) !important;
        transition: left 0.3s ease, width 0.3s ease !important;
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        margin-left: 0 !important;
        z-index: 1030 !important;
    }

    /* Layout não autenticado - header sem margens */
    body.unauthenticated-layout #header,
    body.unauthenticated-layout #header.header-fixed,
    body.unauthenticated-layout .header-container {
        left: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
}

    /* Quando sidebar está colapsada - DESKTOP ONLY */
    body:not(.unauthenticated-layout).sidebar-is-collapsed #content,
    body:not(.unauthenticated-layout).sidebar-is-collapsed #content.page-view,
    body:not(.unauthenticated-layout).sidebar-is-collapsed .page-view {
        margin-left: 70px !important; /* Sidebar colapsada */
        width: calc(100% - 70px) !important;
    }

@media (min-width: 768px) {
    body:not(.unauthenticated-layout).sidebar-is-collapsed #header,
    body:not(.unauthenticated-layout).sidebar-is-collapsed #header.header-fixed,
    body:not(.unauthenticated-layout).sidebar-is-collapsed .header-container {
        left: 70px !important; /* Header acompanha sidebar colapsada */
        width: calc(100% - 70px) !important;
        margin-left: 0 !important;
    }
}

/* ================================================== */
/* SIDEBAR INTERNO - SCROLL OTIMIZADO                */
/* ================================================== */

/* Garantir que o sidebar-inner seja um flex container para o footer ficar no final */
#sidebar .sidebar-inner,
#sidebar .modern-sidebar-container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    /* Scroll personalizado mais elegante */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(16, 148, 99, 0.3) transparent !important;
}

/* Scroll personalizado para webkit no sidebar */
#sidebar .sidebar-inner::-webkit-scrollbar,
#sidebar .modern-sidebar-container::-webkit-scrollbar {
    width: 6px !important;
}

#sidebar .sidebar-inner::-webkit-scrollbar-track,
#sidebar .modern-sidebar-container::-webkit-scrollbar-track {
    background: transparent !important;
}

#sidebar .sidebar-inner::-webkit-scrollbar-thumb,
#sidebar .modern-sidebar-container::-webkit-scrollbar-thumb {
    background: rgba(16, 148, 99, 0.3) !important;
    border-radius: 3px !important;
}

#sidebar .sidebar-inner::-webkit-scrollbar-thumb:hover,
#sidebar .modern-sidebar-container::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 148, 99, 0.5) !important;
}

/* Menu principal deve ocupar espaço disponível */
.main-menu,
.modern-navigation {
    flex: 1 1 auto !important;
    margin-bottom: 0 !important;
    overflow-y: auto !important;
}

/* Footer do sidebar sempre visível no final */
.sidebar-footer {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding: 16px 20px 12px !important;
    border-top: 1px solid rgba(16, 148, 99, 0.1) !important;
    background: linear-gradient(180deg, rgba(248, 250, 251, 0.8) 0%, rgba(244, 247, 250, 0.9) 100%) !important;
    backdrop-filter: blur(8px) !important;
    position: relative !important;
    z-index: 10 !important;
    min-height: 80px !important;
}

/* ================================================== */
/* RESPONSIVIDADE APRIMORADA                         */
/* ================================================== */

/* Mobile - sidebar overlay */
@media (max-width: 768px) {
    body {
        background: linear-gradient(180deg, #f8fafb 0%, #f2f6f9 100%) !important;
    }
    
    .sidebar-footer {
        min-height: 70px !important;
        padding: 12px 16px 8px !important;
    }
    
    /* Overlay escuro quando sidebar está aberto em mobile */
    #sidebar.toggled::before {
        content: '' !important;
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 0 !important; /* Entre sidebar e conteúdo */
        backdrop-filter: blur(2px) !important;
        opacity: 1 !important;
        transition: opacity 0.3s ease !important;
    }
}

/* ================================================== */
/* COMPATIBILIDADE E LIMPEZA                         */
/* ================================================== */

/* Remove footer antigo que pode causar conflitos */
#footer {
    display: none !important;
}

/* Classes de compatibilidade */
body.sw-toggled {
    background: linear-gradient(135deg, #f8fafb 0%, #f4f7fa 25%, #f0f5f8 50%, #eef3f7 75%, #ecf1f6 100%) !important;
}

/* ================================================== */
/* ESTILOS DO FOOTER DO SIDEBAR                      */
/* ================================================== */

.sidebar-footer .system-details {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(16, 148, 99, 0.08) !important;
}

.sidebar-footer .system-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-bottom: 10px !important;
}

.sidebar-footer .system-name {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.sidebar-footer .company-name {
    font-size: 10px !important;
    color: #7f8c8d !important;
    line-height: 1.2 !important;
}

.sidebar-footer .version-info {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.sidebar-footer .version-badge,
.sidebar-footer .build-info {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9px !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
    background: rgba(16, 148, 99, 0.1) !important;
    color: #16a085 !important;
    line-height: 1 !important;
}

.sidebar-footer .build-info {
    background: rgba(52, 73, 94, 0.1) !important;
    color: #34495e !important;
} 

/* ================================================== */
/* PHASE 4.5: CSS EXTERNALIZADO DOS TEMPLATES        */
/* ================================================== */

/* ========================================== */
/* SIDEBAR COMPONENTS - EXTRAÍDO DE sidebar-left.html */
/* ========================================== */

/* Design System Variables - Sidebar */
:root {
    /* Header Verde Moderno */
    --bg-header: #0F5132;
    --header-text: #F8FAFC;
    --header-text-secondary: #CBD5E1;
    --header-border: #166534;
    --header-accent: #10B981;
    --header-hover: #15803D;
    --header-shadow: 0 4px 12px rgba(16, 148, 99, 0.2);
    
    /* Sidebar */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e7eb;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --accent-color: #109463;
    --hover-bg: #f9fafb;
    --active-bg: #f3f4f6;
    --active-border: #109463;

    /* Larguras da Sidebar */
    --sidebar-width-expanded: 240px;
    --sidebar-width-collapsed: 70px;

    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    --radius: 6px;
    --transition: all 0.15s ease;
    --transition-standard: width 0.3s ease;
    --transition-transform: transform 0.3s ease;
}

/* Container Principal do Sidebar */
.clean-sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-border) !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: var(--font-family) !important;
    margin: 0 !important;
    padding: 15px 0 0 0 !important;
    width: var(--sidebar-width-expanded) !important;
    transition: var(--transition-standard) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Sidebar colapsado - APENAS reduz largura, NUNCA esconde */
.clean-sidebar.sidebar-collapsed {
    width: var(--sidebar-width-collapsed) !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Toggle Button do Sidebar */
.sidebar-toggle-container {
    padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md) !important;
    display: flex !important;
    justify-content: flex-end !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
    background: var(--sidebar-bg) !important;
    margin: 0 !important;
    min-height: 40px !important;
    align-items: center !important;
}

.sidebar-toggle-btn {
    background: transparent !important;
    border: 1px solid var(--sidebar-border) !important;
    border-radius: var(--radius) !important;
    padding: var(--spacing-xs) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    position: relative !important; /* Para controle dos ícones */
}

.sidebar-toggle-btn:hover {
    background: var(--hover-bg) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 2px 4px rgba(16, 148, 99, 0.1) !important;
}

.sidebar-toggle-btn .sidebar-icon {
    width: 18px !important;
    height: 18px !important;
    color: var(--text-secondary) !important;
    transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease !important;
    display: block !important;
    flex-shrink: 0 !important;
    position: absolute !important; /* Sobreposição */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.sidebar-toggle-btn:hover .sidebar-icon {
    color: var(--accent-color) !important;
}

/* CORREÇÃO DO BUG: Controle específico dos ícones durante transição */

/* Ícone de ABRIR (quando colapsado) */
.sidebar-toggle-btn .sidebar-icon-open {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}

/* Ícone de FECHAR (quando expandido) */
.sidebar-toggle-btn .sidebar-icon-close {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}

/* Estado colapsado: mostrar apenas ícone ABRIR */
.sidebar-collapsed .sidebar-toggle-btn .sidebar-icon-open {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.sidebar-collapsed .sidebar-toggle-btn .sidebar-icon-close {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
    pointer-events: none !important;
}

/* Estado expandido: mostrar apenas ícone FECHAR */
.clean-sidebar:not(.sidebar-collapsed) .sidebar-toggle-btn .sidebar-icon-open {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
    pointer-events: none !important;
}

.clean-sidebar:not(.sidebar-collapsed) .sidebar-toggle-btn .sidebar-icon-close {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Navegação do Sidebar */
.sidebar-nav {
    flex: 1 !important;
    padding: var(--spacing-md) 0 !important;
}

.nav-group {
    margin-bottom: var(--spacing-md) !important;
}

.nav-group-label {
    padding: 0 var(--spacing-md) var(--spacing-xs) var(--spacing-md) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.5 !important;
}

.nav-item {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    margin: 0 var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    border-radius: var(--radius) !important;
    transition: var(--transition) !important;
    text-decoration: none !important;
    color: var(--text-primary) !important;
    position: relative !important;
}

.nav-item:hover {
    background: var(--hover-bg) !important;
    color: var(--accent-color) !important;
    text-decoration: none !important;
    transform: translateX(1px) !important;
}

.nav-item.active {
    background: var(--active-bg) !important;
    color: var(--accent-color) !important;
    font-weight: 400 !important;
    transform: translateX(1px) !important;
}

.nav-item .zmdi {
    font-size: 18px !important;
    color: #6b7280 !important;
    transition: var(--transition) !important;
    flex-shrink: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.nav-item:hover .zmdi,
.nav-item.active .zmdi {
    color: var(--accent-color) !important;
}

.nav-text {
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--text-primary) !important;
}

/* Estados colapsados - APENAS esconder textos, manter ícones */
.sidebar-collapsed .nav-text,
.sidebar-collapsed .nav-group-label {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: opacity 0.3s ease, width 0.3s ease !important;
}

.sidebar-collapsed .nav-item {
    justify-content: center !important;
    padding: var(--spacing-sm) var(--spacing-xs) !important;
    margin: 0 var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) !important;
    min-height: 40px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-collapsed .nav-item .zmdi {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center !important;
    width: auto !important;
    font-size: 20px !important;
}

/* ===================================================================== */
/* HEADER STYLES - EXTERNALIZED FROM TEMPLATE (FASE 4.5)               */
/* ===================================================================== */

/* Header Visual Styling - Clean White Background */
#header {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid #e5e5e5 !important;
    position: relative !important;
}

/* Menu Hamburger - Clean Styling */
/* ===================================================================== */
/* HAMBURGER MENU - DESIGN MODERNO E ELEGANTE                          */
/* ===================================================================== */

/* Botão base com hover elegante */
#menu-trigger {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#menu-trigger:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

#menu-trigger:active {
    transform: translateY(0) scale(0.95) !important;
    transition: all 0.1s ease !important;
}

/* Container das linhas - design refinado com altura ajustada */
.line-wrap {
    width: 22px !important;
    height: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    margin: 0 auto !important;
}

/* Linhas do hamburger - design moderno */
.line-wrap .line {
    background: #ffffff !important;
    height: 2.5px !important;
    width: 100% !important;
    border-radius: 2px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-origin: center !important;
    display: block !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

/* Estados das linhas - usando flexbox para espaçamento automático perfeito */
#menu-trigger .line-wrap .line.top {
    position: relative !important;
    top: auto !important;
    transform: translateY(0) rotate(0deg) !important;
}

#menu-trigger .line-wrap .line.center {
    position: relative !important;
    top: auto !important;
    opacity: 1 !important;
    transform: translateY(0) scaleX(1) !important;
}

#menu-trigger .line-wrap .line.bottom {
    position: relative !important;
    top: auto !important;
    transform: translateY(0) rotate(0deg) !important;
}

/* Hover nas linhas para feedback visual */
#menu-trigger:hover .line-wrap .line {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* ===================================================================== */
/* ANIMAÇÕES HAMBURGER → X (QUANDO ATIVO)                              */
/* ===================================================================== */

/* Estado ativo - transformação em X usando flexbox center */
#menu-trigger.collapsed .line-wrap .line.top,
#sidebar.toggled ~ .header-inner #menu-trigger .line-wrap .line.top,
#menu-trigger.active .line-wrap .line.top,
#menu-trigger[data-active="true"] .line-wrap .line.top,
body.sidebar-mobile-open #menu-trigger .line-wrap .line.top {
    position: absolute !important;
    top: 5px !important;
    left: 0 !important;
    transform: translateY(-50%) rotate(45deg) !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

#menu-trigger.collapsed .line-wrap .line.center,
#sidebar.toggled ~ .header-inner #menu-trigger .line-wrap .line.center,
#menu-trigger.active .line-wrap .line.center,
#menu-trigger[data-active="true"] .line-wrap .line.center,
body.sidebar-mobile-open #menu-trigger .line-wrap .line.center {
    opacity: 0 !important;
    transform: translateY(0) scaleX(0) !important;
}

#menu-trigger.collapsed .line-wrap .line.bottom,
#sidebar.toggled ~ .header-inner #menu-trigger .line-wrap .line.bottom,
#menu-trigger.active .line-wrap .line.bottom,
#menu-trigger[data-active="true"] .line-wrap .line.bottom,
body.sidebar-mobile-open #menu-trigger .line-wrap .line.bottom {
    position: absolute !important;
    top: 5px !important;
    left: 0 !important;
    transform: translateY(-50%) rotate(-45deg) !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Estado ativo - background do botão */
#menu-trigger.collapsed,
#menu-trigger.active,
#menu-trigger[data-active="true"] {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Hover no estado ativo */
#menu-trigger.collapsed:hover,
#menu-trigger.active:hover,
#menu-trigger[data-active="true"]:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* Desktop collapsed state - Hamburger to lines */
@media (min-width: 768px) {
    body.sidebar-is-collapsed #menu-trigger,
    #menu-trigger.collapsed {
        background: rgba(255, 255, 255, 0.15) !important;
    }
    
    body.sidebar-is-collapsed #menu-trigger .line-wrap .line.top,
    #menu-trigger.collapsed .line-wrap .line.top {
        transform: translateY(0) rotate(0deg) !important;
    }

    body.sidebar-is-collapsed #menu-trigger .line-wrap .line.center,
    #menu-trigger.collapsed .line-wrap .line.center {
        opacity: 1 !important;
    }

    body.sidebar-is-collapsed #menu-trigger .line-wrap .line.bottom,
    #menu-trigger.collapsed .line-wrap .line.bottom {
        transform: translateY(0) rotate(0deg) !important;
    }
}

/* Logo Styling */
.logo {
    margin-right: 15px !important;
}

.logo-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.logo-link:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.logo-image {
    max-height: 28px !important;
    margin-right: 10px !important;
    transition: transform 0.3s ease !important;
}

.logo-link:hover .logo-image {
    transform: scale(1.05) !important;
}

.logo-text {
    color: #333333 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* Breadcrumb Integration */
.breadcrumb-area {
    flex: 1 !important;
    margin: 0 15px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}

.breadcrumb-area .modern-breadcrumb-container {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.breadcrumb-area .modern-breadcrumb-nav {
    width: 100% !important;
    min-height: 30px !important;
}

/* User Area */
.user-area {
    margin-left: auto !important;
}

.top-menu {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 15px !important;
}

/* User Avatar Complete Styling */
.user-avatar-container {
    position: relative !important;
}

.user-avatar-trigger {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    background: rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 20px !important;
    padding: 4px 8px 4px 4px !important;
    transition: all 0.3s ease !important;
    gap: 8px !important;
    min-width: 80px !important;
    height: 40px !important;
    position: relative !important;
    overflow: visible !important;
}

.user-avatar-trigger:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Força sobrescrita de todas as regras de sombra */
html body .user-avatar-trigger:hover::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Remove qualquer sombra que possa estar sendo aplicada pelo estilo.css */
html body .user-avatar-trigger:hover {
    box-shadow: none !important;
}

.user-avatar-circle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
    background: linear-gradient(45deg, #109463, #087c55) !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

.avatar-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

.user-avatar-trigger:hover .avatar-image {
    transform: scale(1.05) !important;
}

.status-indicator {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 10px !important;
    height: 10px !important;
    background: #10b981 !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    animation: pulse 2s infinite !important;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.dropdown-arrow {
    color: rgba(0, 0, 0, 0.6) !important;
    font-size: 14px !important;
    transition: transform 0.3s ease !important;
}

.user-avatar-container.open .dropdown-arrow {
    transform: rotate(180deg) !important;
}

/* User Dropdown Menu */
.user-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: 320px !important;
    background: white !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1020 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
}

.user-avatar-container.open .user-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* User Dropdown Header */
.user-dropdown-header {
    padding: 20px !important;
    background: linear-gradient(135deg, #109463, #087c55) !important;
    border-radius: 12px 12px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: white !important;
}

.user-header-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    flex-shrink: 0 !important;
}

.header-avatar-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.user-header-info {
    flex: 1 !important;
}

.user-dropdown-name {
    margin: 0 0 4px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
}

.user-dropdown-email {
    margin: 0 0 2px 0 !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.user-dropdown-title {
    margin: 0 !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* User Dropdown Sections */
.user-dropdown-section {
    padding: 16px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.user-dropdown-section:last-of-type {
    border-bottom: none !important;
}

.section-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.section-title .zmdi {
    font-size: 16px !important;
    color: #109463 !important;
}

/* User Roles */
.user-roles-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.role-badge-dropdown {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    background: #f8fafc !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.role-badge-dropdown .zmdi {
    font-size: 8px !important;
    color: #109463 !important;
}

/* Session Details */
.session-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.session-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
}

.session-label {
    color: #64748b !important;
    font-weight: 500 !important;
}

.session-value {
    color: #1e293b !important;
    font-weight: 600 !important;
}

.ip-status {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.ip-status.ip-internal {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.ip-status.ip-external {
    background: #fef3c7 !important;
    color: #92400e !important;
}

/* User Dropdown Actions */
.user-dropdown-actions {
    padding: 12px 8px !important;
}

.dropdown-action-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #475569 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

.dropdown-action-item:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
    text-decoration: none !important;
    transform: translateX(2px) !important;
}

.dropdown-action-item .zmdi {
    font-size: 18px !important;
    color: #64748b !important;
    transition: color 0.2s ease !important;
    flex-shrink: 0 !important;
}

.dropdown-action-item:hover .zmdi {
    color: #109463 !important;
}

.logout-action {
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 8px !important;
    padding-top: 16px !important;
}

.logout-action:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.logout-action:hover .zmdi {
    color: #dc2626 !important;
}

.dropdown-divider {
    height: 1px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    margin: 8px 0 !important;
}

/* Client Selector Styling */
.client-selector-minimal {
    position: relative !important;
}

.client-select-minimal {
    position: relative !important;
    display: inline-block !important;
}

.client-select-native {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.select-overlay {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    background: var(--header-hover) !important;
    border: 1px solid var(--header-border) !important;
    border-radius: 8px !important;
    color: var(--header-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    min-width: 120px !important;
    height: 32px !important;
}

.select-overlay:hover {
    background: var(--header-accent) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 148, 99, 0.2) !important;
}

.select-overlay .zmdi {
    font-size: 16px !important;
    color: var(--header-text) !important;
}

.select-text {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Client Single Display */
.client-single {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    background: var(--header-hover) !important;
    border-radius: 8px !important;
    color: var(--header-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 32px !important;
}

.client-single .zmdi {
    font-size: 16px !important;
    color: var(--header-text) !important;
}

/* UGs Dropdown */
.ugs-dropdown {
    position: relative !important;
}

.ugs-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: var(--header-hover) !important;
    border: 1px solid var(--header-border) !important;
    border-radius: 8px !important;
    color: var(--header-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    height: 32px !important;
}

.ugs-toggle:hover {
    background: var(--header-accent) !important;
    text-decoration: none !important;
    color: var(--header-text) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 148, 99, 0.2) !important;
}

.ugs-toggle .zmdi {
    font-size: 16px !important;
}

.ugs-label {
    font-weight: 500 !important;
}

.ugs-dropdown-content {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: 280px !important;
    max-width: 400px !important;
    background: white !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    z-index: 1020 !important;
}

.ugs-dropdown .listview {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.ugs-dropdown .lv-header {
    background: linear-gradient(135deg, #109463, #087c55) !important;
    color: white !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 600 !important;
}

.ugs-dropdown .lv-header .zmdi {
    font-size: 20px !important;
}

.ugs-scroll {
    max-height: 300px !important;
    overflow-y: auto !important;
}

.ug-item {
    border-bottom: 1px solid #f1f5f9 !important;
}

.ug-item:last-child {
    border-bottom: none !important;
}

.ug-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    text-decoration: none !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.ug-link:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
    text-decoration: none !important;
}

.ug-item.active .ug-link {
    background: #f0f9ff !important;
    color: #0369a1 !important;
}

.ug-link .zmdi-balance {
    font-size: 18px !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
}

.ug-item.active .ug-link .zmdi-balance {
    color: #0369a1 !important;
}

.ug-text {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.ug-check {
    font-size: 16px !important;
    color: #10b981 !important;
}

/* Top Search Styling */
#top-search-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100% !important;
    background: rgba(16, 148, 99, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    transform: translateY(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 1010 !important;
}

#top-search-wrap.active {
    transform: translateY(0) !important;
}

.tsw-inner {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

#top-search-close {
    color: white !important;
    font-size: 24px !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}

#top-search-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.tsw-inner input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-size: 18px !important;
    outline: none !important;
    padding: 10px 0 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
    transition: border-color 0.3s ease !important;
}

.tsw-inner input:focus {
    border-bottom-color: white !important;
}

.tsw-inner input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Non-Critical Responsive Media Queries */
@media (max-width: 768px) {
    .breadcrumb-area {
        display: none !important;
    }
    
    .user-avatar-circle {
        width: 32px !important;
        height: 32px !important;
    }
    
    .user-dropdown-menu {
        min-width: 300px !important;
        max-width: calc(100vw - 40px) !important;
        right: 10px !important;
        left: auto !important;
        margin-right: 0 !important;
    }
    
    .user-dropdown-header {
        padding: 16px !important;
    }
    
    .user-header-avatar {
        width: 42px !important;
        height: 42px !important;
    }
    
    .user-dropdown-section {
        padding: 12px 16px !important;
    }
}

@media (max-width: 480px) {
    .user-avatar-circle {
        width: 28px !important;
        height: 28px !important;
    }
    
    .dropdown-arrow {
        display: none !important;
    }
    
    .user-dropdown-menu {
        min-width: 280px !important;
        right: 5px !important;
        max-width: calc(100vw - 20px) !important;
    }
}

@media (min-width: 1200px) {
    .breadcrumb-area {
        margin: 0 15px !important;
    }
}

/* ============================================= */
/* SIDEBAR LAYOUT ADVANCED - MODERNIZED       */
/* ============================================= */

/* Sidebar Footing Styling */
.sidebar-footer {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-top: 1px solid var(--sidebar-border) !important;
    background: var(--hover-bg) !important;
}

.system-info {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-xs) !important;
}

.version-build-line {
    display: flex !important;
    align-items: center !important;
}

.system-version {
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    color: var(--accent-color) !important;
}

.system-name {
    font-size: var(--font-size-sm) !important;
    color: var(--text-secondary) !important;
}

.system-build {
    font-size: 11px !important;
    color: var(--text-muted) !important;
}

.system-context {
    font-size: 10px !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
}

.sidebar-collapsed .sidebar-footer {
    padding: var(--spacing-xs) var(--spacing-xs) !important;
    text-align: center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-collapsed .system-name,
.sidebar-collapsed .system-context,
.sidebar-collapsed .system-build {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    transition: opacity 0.3s ease, width 0.3s ease !important;
}

.sidebar-collapsed .system-version {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 10px !important;
    text-align: center !important;
}

/* Sistema Original Compatibility */
#sidebar {
    width: 60px !important;
    min-width: 60px !important;
    transition: width 0.3s ease !important;
}

.app:not(.nav-collapsed-min) #sidebar {
    width: 220px !important;
    min-width: 220px !important;
}

.clean-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    transition: all 0.3s ease !important;
}

.app.nav-collapsed-min .clean-sidebar .navigation > li > a > span,
.app.nav-collapsed-min .clean-sidebar .nav-text {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.app:not(.nav-collapsed-min) .clean-sidebar .navigation > li > a > span,
.app:not(.nav-collapsed-min) .clean-sidebar .nav-text {
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    overflow: visible !important;
}

/* ============================================= */
/* SIDEBAR RESPONSIVE LAYOUT - CONSOLIDADO     */
/* ============================================= */

/* DESKTOP: min-width 768px - Comportamento padrão */
@media (min-width: 768px) {
    /* Esconder botão menu mobile em desktop */
    #menu-trigger.mobile-only,
    li#menu-trigger.mobile-only {
        display: none !important;
    }
    
    /* Forçar visibilidade com especificidade máxima */
    html body #sidebar,
    html body #sidebar:not(.toggled),
    html body #sidebar.toggled,
    #sidebar,
    .clean-sidebar,
    #sidebar .clean-sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: var(--sidebar-width-expanded) !important;
        height: 100vh !important;
        z-index: 1040 !important; /* Z-INDEX CONSOLIDADO: Sidebar (acima header desktop, abaixo header mobile) */
        transform: translateX(0) !important;
        transition: var(--transition-standard) !important;
    }

    /* Container interno sempre visível */
    html body #sidebar .clean-sidebar,
    html body #sidebar:not(.toggled) .clean-sidebar,
    html body #sidebar.toggled .clean-sidebar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        transform: translateX(0) !important;
    }

    /* Estados colapsados mantêm visibilidade */
    html body.sidebar-is-collapsed #sidebar,
    html body #sidebar.sidebar-collapsed {
        width: var(--sidebar-width-collapsed) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Layout de conteúdo quando sidebar expandida */
    body:not(.sidebar-is-collapsed) .clean-sidebar {
        width: var(--sidebar-width-expanded) !important;
    }
}

/* MOBILE: max-width 767px - Overlay behavior */
/* ===================================================================== */
/* MOBILE - HAMBURGER MENU ELEGANTE                                     */
/* ===================================================================== */

@media (max-width: 767px) {
    /* Botão menu mobile com design moderno */
    #menu-trigger.mobile-only,
    li#menu-trigger.mobile-only {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 42px !important;
        height: 42px !important;
        cursor: pointer !important;
        z-index: 1060 !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        border-radius: 10px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        backdrop-filter: blur(12px) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Hover elegante em mobile */
    #menu-trigger.mobile-only:hover,
    li#menu-trigger.mobile-only:hover {
        background: rgba(255, 255, 255, 0.25) !important;
        border-color: rgba(255, 255, 255, 0.35) !important;
        transform: translateY(-1px) scale(1.05) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Active state para mobile */
    #menu-trigger.mobile-only:active,
    li#menu-trigger.mobile-only:active {
        transform: translateY(0) scale(0.95) !important;
        transition: all 0.1s ease !important;
    }
    
    /* Container das linhas otimizado para mobile */
    #menu-trigger.mobile-only .line-wrap,
    li#menu-trigger.mobile-only .line-wrap {
        display: block !important;
        width: 22px !important;
        height: 14px !important;
        position: relative !important;
        margin: auto !important;
    }
    
    /* Linhas do hambúrguer mobile - design refinado */
    #menu-trigger.mobile-only .line,
    li#menu-trigger.mobile-only .line {
        display: block !important;
        width: 100% !important;
        height: 2.5px !important;
        background: #ffffff !important;
        position: absolute !important;
        border-radius: 2px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
        transform-origin: center !important;
    }
    
    /* Posicionamento das linhas - flexbox automático em mobile */
    #menu-trigger.mobile-only .line.top,
    li#menu-trigger.mobile-only .line.top {
        position: relative !important;
        top: auto !important;
    }
    
    #menu-trigger.mobile-only .line.center,
    li#menu-trigger.mobile-only .line.center {
        position: relative !important;
        top: auto !important;
        transform: translateY(0) !important;
    }
    
    #menu-trigger.mobile-only .line.bottom,
    li#menu-trigger.mobile-only .line.bottom {
        position: relative !important;
        top: auto !important;
    }
    
    /* Hover effect nas linhas mobile */
    #menu-trigger.mobile-only:hover .line,
    li#menu-trigger.mobile-only:hover .line {
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    }
    
    /* Ocultar botão toggle interno */
    .sidebar-toggle-container {
        display: none !important;
    }

    /* Sidebar como overlay - LARGURA FIXA */
    #sidebar {
        position: fixed !important;
        top: 50px !important; /* Começar ABAIXO do header */
        left: 0 !important;
        width: var(--sidebar-width-expanded) !important; /* 240px - não toda a tela */
        height: calc(100vh - 50px) !important; /* Altura menos o header */
        z-index: 1040 !important; /* ABAIXO do header (1050) */
        pointer-events: none !important;
        transform: translateX(-100%) !important;
        transition: var(--transition-transform) !important;
    }

    /* Container interno em mobile */
    #sidebar .clean-sidebar {
        width: 100% !important; /* Ocupar toda largura da sidebar (240px) */
        transform: translateX(0) !important;
        left: 0 !important;
        position: absolute !important;
        padding: 0 !important; /* Sem padding-top extra, sidebar já está na posição correta */
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
        height: 100% !important; /* Ocupar toda altura disponível */
    }

    /* Layout SEMPRE expandido em mobile */
    #sidebar .clean-sidebar,
    #sidebar .clean-sidebar.sidebar-collapsed,
    .clean-sidebar,
    .clean-sidebar.sidebar-collapsed {
        width: var(--sidebar-width-expanded) !important;
    }

    /* Textos SEMPRE visíveis em mobile */
    #sidebar .clean-sidebar .nav-text,
    #sidebar .clean-sidebar .nav-group-label,
    #sidebar .clean-sidebar .navigation > li > a > span,
    .clean-sidebar .nav-text,
    .clean-sidebar .nav-group-label,
    .clean-sidebar .navigation > li > a > span {
        opacity: 1 !important;
        visibility: visible !important;
        display: inline !important;
        width: auto !important;
        overflow: visible !important;
    }

    /* Nav items expandidos */
    #sidebar .clean-sidebar .nav-item,
    .clean-sidebar .nav-item {
        justify-content: flex-start !important;
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        margin: 0 var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) !important;
    }

    /* Footer expandido */
    #sidebar .clean-sidebar .sidebar-footer,
    .clean-sidebar .sidebar-footer {
        padding: var(--spacing-md) var(--spacing-lg) !important;
        text-align: left !important;
    }

    /* Sistema informações sempre visível */
    #sidebar .clean-sidebar .system-name,
    #sidebar .clean-sidebar .system-context,
    #sidebar .clean-sidebar .system-build,
    .clean-sidebar .system-name,
    .clean-sidebar .system-context,
    .clean-sidebar .system-build {
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
    }

    /* Estado ativo do overlay */
    #sidebar.toggled {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    #sidebar.toggled::before {
        content: '' !important;
        position: fixed !important;
        top: 50px !important; /* Começar abaixo do header */
        left: 0 !important; /* Cobrir toda a área */
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: -1 !important; /* Atrás da sidebar mas na frente do conteúdo */
        backdrop-filter: blur(2px) !important;
    }

    /* Conteúdo sempre ocupa tela toda em mobile - ESPECIFICIDADE MÁXIMA */
    html body #main,
    html body #content,
    html body #content.page-view,
    html body .page-view,
    html body #footer,
    /* Garantir que estados específicos também funcionem em mobile */
    html body.sidebar-is-collapsed #main,
    html body.sidebar-is-collapsed #content,
    html body.sidebar-is-collapsed #content.page-view,
    html body.sidebar-is-collapsed .page-view,
    html body.sidebar-is-collapsed #footer {
        margin-left: 0 !important;
        width: 100% !important;
        left: 0 !important; /* Garantir posicionamento correto */
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* Header sempre full-width e no topo em mobile */
    body #header,
    body #header.header-fixed,
    body .header-container {
        margin-left: 0 !important;
        width: 100% !important;
        left: 0 !important;
        z-index: 1050 !important; /* ACIMA da sidebar (1040) */
        position: fixed !important;
        top: 0 !important;
    }
}

/* ============================================= */
/* END SIDEBAR ADVANCED STYLES                 */
/* ============================================= */

/* ============================================= */
/* BREADCRUMB MODERNIZADO - NCY-BREADCRUMB      */
/* ============================================= */

/* Breadcrumb Area Container */
.breadcrumb-area {
    flex: 1 !important;
    margin: 0 15px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}

.modern-breadcrumb {
    width: 100% !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
}

/* Sobrescreve o template customizado breadcrumb.html */
.modern-breadcrumb .modern-breadcrumb-style,
.breadcrumb.modern-breadcrumb-style {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-family: var(--font-family) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
}

/* Remove separadores padrão do Bootstrap */
.modern-breadcrumb .modern-breadcrumb-style > li + li:before,
.breadcrumb.modern-breadcrumb-style > li + li:before {
    content: none !important;
    padding: 0 !important;
}

/* Estilo dos itens do breadcrumb */
.modern-breadcrumb .modern-breadcrumb-style > li,
.breadcrumb.modern-breadcrumb-style > li {
    display: flex !important;
    align-items: center !important;
    color: var(--header-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin-right: 8px !important;
    font-family: var(--font-family) !important;
}

/* Força a cor dos itens do breadcrumb - ESPECIFICIDADE MÁXIMA */
html body .modern-breadcrumb .modern-breadcrumb-style > li,
html body .breadcrumb.modern-breadcrumb-style > li {
    color: var(--header-text-secondary) !important;
}

/* Links do breadcrumb */
.modern-breadcrumb .modern-breadcrumb-style > li a,
.breadcrumb.modern-breadcrumb-style > li a {
    color: var(--header-text) !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    font-family: var(--font-family) !important;
    border: none !important;
}

/* Força a cor dos links do breadcrumb - ESPECIFICIDADE MÁXIMA */
html body .modern-breadcrumb .modern-breadcrumb-style > li a,
html body .breadcrumb.modern-breadcrumb-style > li a {
    color: var(--header-text) !important;
}

.modern-breadcrumb .modern-breadcrumb-style > li a:hover,
.breadcrumb.modern-breadcrumb-style > li a:hover {
    color: var(--header-accent) !important;
    background: var(--header-hover) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* Item ativo (último do breadcrumb) - Design minimalista e elegante */
.modern-breadcrumb .modern-breadcrumb-style > li.active,
.modern-breadcrumb .modern-breadcrumb-style > li.active span,
.breadcrumb.modern-breadcrumb-style > li.active,
.breadcrumb.modern-breadcrumb-style > li.active span {
    color: var(--header-accent) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    font-family: var(--font-family) !important;
    padding: 2px 4px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* Força a cor do item ativo do breadcrumb - ESPECIFICIDADE MÁXIMA */
html body .modern-breadcrumb .modern-breadcrumb-style > li.active,
html body .modern-breadcrumb .modern-breadcrumb-style > li.active span,
html body .breadcrumb.modern-breadcrumb-style > li.active,
html body .breadcrumb.modern-breadcrumb-style > li.active span {
    color: var(--header-accent) !important;
}

/* Remover qualquer pseudo-elemento do span para evitar sublinhados duplicados */
.modern-breadcrumb .modern-breadcrumb-style > li.active span:after,
.breadcrumb.modern-breadcrumb-style > li.active span:after {
    display: none !important;
    content: none !important;
}

/* Sublinhado sutil para o item ativo - apenas no li, não no span */
.modern-breadcrumb .modern-breadcrumb-style > li.active:after,
.breadcrumb.modern-breadcrumb-style > li.active:after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--header-accent), var(--header-accent-dark)) !important;
    border-radius: 1px !important;
    opacity: 0.8 !important;
}

/* Efeito sutil no hover do item ativo */
.modern-breadcrumb .modern-breadcrumb-style > li.active:hover,
.modern-breadcrumb .modern-breadcrumb-style > li.active span:hover,
.breadcrumb.modern-breadcrumb-style > li.active:hover,
.breadcrumb.modern-breadcrumb-style > li.active span:hover {
    color: var(--header-accent-dark) !important;
}

.modern-breadcrumb .modern-breadcrumb-style > li.active:hover:after,
.breadcrumb.modern-breadcrumb-style > li.active:hover:after {
    opacity: 1 !important;
    height: 3px !important;
}

/* Separador customizado - seta moderna */
.modern-breadcrumb .modern-breadcrumb-style > li:not(:last-child):after,
.breadcrumb.modern-breadcrumb-style > li:not(:last-child):after {
    content: "›" !important;
    color: var(--header-text-secondary) !important;
    margin: 0 6px !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    font-family: var(--font-family) !important;
}

/* Força a cor do separador do breadcrumb - ESPECIFICIDADE MÁXIMA */
html body .modern-breadcrumb .modern-breadcrumb-style > li:not(:last-child):after,
html body .breadcrumb.modern-breadcrumb-style > li:not(:last-child):after {
    color: var(--header-text-secondary) !important;
}

/* Hover effect para todo o breadcrumb */
.modern-breadcrumb:hover .modern-breadcrumb-style > li a,
.breadcrumb.modern-breadcrumb-style:hover > li a {
    opacity: 0.7 !important;
}

.modern-breadcrumb:hover .modern-breadcrumb-style > li a:hover,
.breadcrumb.modern-breadcrumb-style:hover > li a:hover {
    opacity: 1 !important;
}

/* Breadcrumb Responsivo */
@media (max-width: 767px) {
    /* Breadcrumb oculto em mobile */
    .breadcrumb-area {
        display: none !important;
    }
}

/* ============================================= */
/* CORREÇÃO FORÇADA PARA BREADCRUMB ESCURO       */
/* ============================================= */

/* Força cores claras para todos os elementos do breadcrumb */
html body .breadcrumb-area .modern-breadcrumb .modern-breadcrumb-style > li,
html body .breadcrumb-area .breadcrumb.modern-breadcrumb-style > li {
    color: var(--header-text-secondary) !important;
}

html body .breadcrumb-area .modern-breadcrumb .modern-breadcrumb-style > li a,
html body .breadcrumb-area .breadcrumb.modern-breadcrumb-style > li a {
    color: var(--header-text) !important;
}

html body .breadcrumb-area .modern-breadcrumb .modern-breadcrumb-style > li.active,
html body .breadcrumb-area .modern-breadcrumb .modern-breadcrumb-style > li.active span,
html body .breadcrumb-area .breadcrumb.modern-breadcrumb-style > li.active,
html body .breadcrumb-area .breadcrumb.modern-breadcrumb-style > li.active span {
    color: var(--header-accent) !important;
}

html body .breadcrumb-area .modern-breadcrumb .modern-breadcrumb-style > li:not(:last-child):after,
html body .breadcrumb-area .breadcrumb.modern-breadcrumb-style > li:not(:last-child):after {
    color: var(--header-text-secondary) !important;
}

/* ============================================= */
/* ANIMAÇÕES MODERNAS DE TRANSIÇÃO DE ROTA      */
/* ============================================= */

/* DESABILITAR ANIMAÇÕES PROBLEMÁTICAS ANTIGAS - ABORDAGEM TOTAL */
.content-container.ng-enter,
.content-container.ng-leave,
.page-view.ng-enter,
.page-view.ng-leave,
.animate-fade-up.ng-enter,
.animate-fade-up.ng-leave,
.animate-flip-y.ng-enter,
.animate-flip-y.ng-leave,
.ainmate-scale-up.ng-enter,
.ainmate-scale-up.ng-leave,
.ainmate-slide-in-right.ng-enter,
.ainmate-slide-in-right.ng-leave,
[data-ui-view].animate-fade-up.ng-enter,
[data-ui-view].animate-fade-up.ng-leave,
[data-ui-view].animate-flip-y.ng-enter,
[data-ui-view].animate-flip-y.ng-leave,
[data-ui-view].ainmate-scale-up.ng-enter,
[data-ui-view].ainmate-scale-up.ng-leave,
[data-ui-view].ainmate-slide-in-right.ng-enter,
[data-ui-view].ainmate-slide-in-right.ng-leave {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
}

/* CORREÇÃO ESPECÍFICA PARA Z-INDEX PROBLEMÁTICO */
/* Sobrescrever os z-index ruins do ui.css e main.css */
.content-container.ng-leave {
    z-index: 999 !important; /* Era 9999 - problemático */
}

.content-container.ng-enter {
    z-index: 1000 !important; /* Era 8888 - problemático */
}

/* DESABILITAR COMPLETAMENTE O NGANIMATE PARA UI-VIEW */
#content, #content *, 
#content.page-view, #content.page-view *,
[data-ui-view], [data-ui-view] *,
.ng-animate, .ng-animate *,
.ng-enter, .ng-enter *,
.ng-leave, .ng-leave *,
.ng-enter-active, .ng-enter-active *,
.ng-leave-active, .ng-leave-active * {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    -moz-animation-duration: 0s !important;
    animation-delay: 0s !important;
    -webkit-animation-delay: 0s !important;
    -moz-animation-delay: 0s !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
}

/* FORÇAR POSIÇÃO E LAYOUT CORRETO */
#content [data-ui-view],
#content [data-ui-view].ng-animate,
#content [data-ui-view].ng-enter,
#content [data-ui-view].ng-leave,
#content [data-ui-view].ng-enter-active,
#content [data-ui-view].ng-leave-active {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* NENHUMA ANIMAÇÃO - DESABILITAÇÃO TOTAL */
[data-ui-view] {
    display: block !important;
    width: 100% !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Container pai - configuração mínima */
#content.page-view {
    display: block !important;
    width: 100% !important;
    position: relative !important;
}

/* SEM OTIMIZAÇÕES DE PERFORMANCE - NÃO HÁ ANIMAÇÕES */

/* ============================================= */
/* END ANIMAÇÕES MODERNAS DE TRANSIÇÃO          */
/* ============================================= */

/* SEM OTIMIZAÇÕES DE PERFORMANCE - NÃO HÁ ANIMAÇÕES */

/* FORÇA BRUTA - DESABILITAR NGANIMATE COMPLETAMENTE */
body #content [data-ui-view],
body #content [data-ui-view] *,
html body #content [data-ui-view],
html body #content [data-ui-view] * {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: auto !important;
}

/* ESPECIFICIDADE MÁXIMA PARA UI-VIEW */
html body .app #content.page-view [data-ui-view],
html body .app #content.page-view [data-ui-view] * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================= */
/* END ANIMAÇÕES MODERNAS DE TRANSIÇÃO          */
/* ============================================= */