/* ========================================================== FATURA FACIL SIDEBAR GLOBAL UNIFICADA ========================================================== */ :root { --ff-sidebar-open: 200px; --ff-sidebar-closed: 60px; --ff-sidebar-bg: #102a43; --ff-sidebar-active: #285b7c; --ff-sidebar-text: #f5f8fb; --ff-page-bg: #f4f7fb; } /* ========================================================== BODY / PAGINA ========================================================== */ html, body { margin: 0 !important; padding: 0 !important; min-height: 100% !important; } body { background: var(--ff-page-bg) !important; padding-left: var(--ff-sidebar-open) !important; transition: padding-left .18s ease !important; } /* ========================================================== SIDEBAR - ACEITA NOMES DIFERENTES ========================================================== */ .sidebar, #sidebar, .side-menu, .menu-lateral, aside.sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: var(--ff-sidebar-open) !important; min-width: var(--ff-sidebar-open) !important; max-width: var(--ff-sidebar-open) !important; height: 100vh !important; margin: 0 !important; background: var(--ff-sidebar-bg) !important; color: var(--ff-sidebar-text) !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 9999 !important; transition: width .18s ease, min-width .18s ease, max-width .18s ease !important; } /* links */ .sidebar a, #sidebar a, .side-menu a, .menu-lateral a { color: var(--ff-sidebar-text) !important; } /* item ativo */ .sidebar a.active, .sidebar .active, #sidebar a.active, #sidebar .active, .side-menu a.active, .side-menu .active, .menu-lateral a.active, .menu-lateral .active { background: var(--ff-sidebar-active) !important; color: #fff !important; } /* ========================================================== CONTEUDO REMOVE RECUOS ANTIGOS ========================================================== */ main, .main, .main-content, .content, .content-wrapper, .page-content, .page-wrapper, .container-main, .app-content { margin-left: 0 !important; left: auto !important; width: auto !important; max-width: none !important; } /* ========================================================== SIDEBAR RECOLHIDA ========================================================== */ body.ff-sidebar-collapsed { padding-left: var(--ff-sidebar-closed) !important; } body.ff-sidebar-collapsed .sidebar, body.ff-sidebar-collapsed #sidebar, body.ff-sidebar-collapsed .side-menu, body.ff-sidebar-collapsed .menu-lateral { width: var(--ff-sidebar-closed) !important; min-width: var(--ff-sidebar-closed) !important; max-width: var(--ff-sidebar-closed) !important; } /* esconde textos */ body.ff-sidebar-collapsed .sidebar .menu-text, body.ff-sidebar-collapsed .sidebar .nav-text, body.ff-sidebar-collapsed .sidebar .sidebar-text, body.ff-sidebar-collapsed .sidebar .brand-text, body.ff-sidebar-collapsed .sidebar .logo-text, body.ff-sidebar-collapsed .sidebar .sidebar-title, body.ff-sidebar-collapsed .sidebar .menu-label, body.ff-sidebar-collapsed .sidebar .submenu-label { display: none !important; } /* protege contra texto vazando */ body.ff-sidebar-collapsed .sidebar span:not(.badge):not(.icon) { max-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; } /* esconde submenu aberto */ body.ff-sidebar-collapsed .sidebar ul ul, body.ff-sidebar-collapsed .sidebar .submenu { display: none !important; } /* centraliza itens */ body.ff-sidebar-collapsed .sidebar a, body.ff-sidebar-collapsed .sidebar .nav-item, body.ff-sidebar-collapsed .sidebar .menu-item { width: 50px !important; margin-left: 5px !important; margin-right: 5px !important; padding-left: 0 !important; padding-right: 0 !important; justify-content: center !important; overflow: hidden !important; } /* ========================================================== BOTAO HAMBURGUER ========================================================== */ #ffGlobalSidebarToggle { width: 44px !important; height: 44px !important; margin: 4px auto 6px auto !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 23px !important; line-height: 1 !important; } #ffGlobalSidebarToggle:hover { background: rgba(255,255,255,.08) !important; } /* ========================================================== PADRONIZA FUNDO DAS PAGINAS ========================================================== */ main, .main, .main-content, .content, .content-wrapper, .page-content, .page-wrapper, .app-content { background: var(--ff-page-bg) !important; } /* ========================================================== EVITA SCROLL HORIZONTAL ========================================================== */ body { overflow-x: hidden !important; } * { box-sizing: border-box; } /* FF-SIDEBAR-NEON-START */ /* ========================================================== FATURA FÁCIL - ITEM ATIVO INSPIRADO NO EXPEDY + NEON SOMENTE VISUAL - NÃO ALTERA RECUO OU LARGURA ========================================================== */ .sidebar, #sidebar, .side-menu, .menu-lateral { background: #10233d !important; } /* itens normais */ .sidebar a, .sidebar .menu-item, .sidebar .nav-item { border: 1px solid transparent !important; border-radius: 8px !important; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease !important; } /* HOVER */ .sidebar a:hover, .sidebar .menu-item:hover, .sidebar .nav-item:hover { background: rgba(25, 122, 180, .18) !important; border-color: rgba(40, 198, 255, .22) !important; } /* ITEM ATIVO */ .sidebar a.active, .sidebar .active > a, .sidebar .menu-item.active, .sidebar .nav-item.active { background: linear-gradient( 180deg, rgba(22, 112, 180, .42), rgba(11, 76, 130, .46) ) !important; color: #ffffff !important; border: 1px solid rgba(43, 206, 255, .80) !important; border-radius: 8px !important; box-shadow: 0 0 0 1px rgba(25, 180, 255, .18), inset 0 0 10px rgba(20, 156, 255, .18), 0 0 9px rgba(0, 190, 255, .24) !important; } /* ícone do ativo */ .sidebar a.active i, .sidebar a.active svg, .sidebar .active > a i, .sidebar .active > a svg { color: #5ee7ff !important; filter: drop-shadow(0 0 3px rgba(44, 210, 255, .65)); } /* texto do ativo */ .sidebar a.active span, .sidebar .active > a span { color: #ffffff !important; font-weight: 600 !important; } /* barra recolhida: mantém o destaque em volta somente do ícone */ body.ff-sidebar-collapsed .sidebar a.active, body.ff-sidebar-collapsed .sidebar .active > a { box-shadow: inset 0 0 9px rgba(21, 156, 255, .18), 0 0 8px rgba(0, 190, 255, .22) !important; } /* FF-SIDEBAR-NEON-END */ /* ===== V4 — SIDEBAR COMPACTA / SCROLLBAR INVISÍVEL ===== */ .ff-sidebar,.sidebar,#sidebar,.side-menu,.menu-lateral,aside.sidebar{ overflow-y:auto!important; scrollbar-width:none!important; -ms-overflow-style:none!important; } .ff-sidebar::-webkit-scrollbar,.sidebar::-webkit-scrollbar,#sidebar::-webkit-scrollbar,.side-menu::-webkit-scrollbar,.menu-lateral::-webkit-scrollbar,aside.sidebar::-webkit-scrollbar{ width:0!important;height:0!important;display:none!important; } .ff-sidebar{padding-top:9px!important;padding-bottom:9px!important;} .ff-sidebar .ff-brand{margin:2px 6px 7px!important;padding:5px 2px 9px!important;font-size:17px!important;line-height:20px!important;} .ff-sidebar .ff-nav-link,.ff-sidebar .ff-menu-toggle{height:31px!important;min-height:31px!important;max-height:31px!important;padding:5px 9px!important;margin:1px 0!important;line-height:17px!important;} .ff-sidebar .ff-submenu{padding:2px 0 3px 14px!important;margin:0!important;} .ff-sidebar .ff-submenu a{height:29px!important;min-height:29px!important;max-height:29px!important;padding:4px 8px!important;margin:0!important;line-height:16px!important;} .ff-sidebar .ff-separator{margin:6px 2px!important;}