body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; } /* Sidebar */ .sidebar-icon { transition: all 0.2s ease-in-out; } .sidebar-icon:hover { transform: scale(1.1); } /* Opções de pagamento */ .payment-option input:checked + label { border-color: #3b82f6; background-color: #eff6ff; color: #2563eb; } /* Modal */ .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.3s ease; } /* Scrollbar personalizada */ .product-list::-webkit-scrollbar { width: 8px; } .product-list::-webkit-scrollbar-track { background: #f1f1f1; } .product-list::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } .product-list::-webkit-scrollbar-thumb:hover { background: #555; } /* Firefox */ .product-list { scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; } /* Botões */ .filter-btn.active { background-color: #3b82f6; color: white; } /* Exibição */ .view { display: block; } .hidden { display: none; } /* Página de erro */ .error-page { padding: 2rem; text-align: center; color: #6b7280; } .error-page h1, .error-page h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; color: #374151; } .error-page a { color: #3b82f6; text-decoration: underline; } /* Background extra */ .bg-gray-700 { background-color: #374151; } /* ============================= 🚀 Layout Tela Cheia (Correção) ============================= A seção de CSS para "Layout Tela Cheia" que existia anteriormente foi removida pois estava em conflito com as classes do Tailwind CSS utilizadas no arquivo `header.php`. O layout de tela cheia já é corretamente implementado no HTML pelas classes: - `flex h-screen` na tag `` - `flex-1` na tag `

` Manter as regras CSS antigas forçava uma `flex-direction: column` no body, o que quebrava o layout da sidebar ao lado do conteúdo principal. A remoção deste código corrige o problema e permite que o Tailwind gerencie o layout. */