/* 
 * styles.css - Estilos globais para o PedeMais1
 * Estilos compartilhados entre todas as páginas do sistema
 */

/* Importação da fonte Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* Nova paleta de cores - Identidade Visual PedeMais1 */
    --cor-primaria: #6f42c1;
    --cor-primaria-hover: #5a359a;
    --cor-primaria-light: #8a63d2;
    --cor-secundaria: #ffffff;
    --cor-fundo-neutro: #f8f9fa;
    --cor-texto: #333333;
    --cor-texto-light: #6c757d;
    
    /* Sistema de cores por status */
    --cor-pendente: #ffc107;
    --cor-preparo: #fd7e14;
    --cor-pronto: #38b000;
    --cor-entregue: #6c757d;
    --cor-cancelado: #dc3545;
    
    /* Sombras e efeitos */
    --sombra-suave: 0 2px 8px rgba(111, 66, 193, 0.1);
    --sombra-hover: 0 8px 25px rgba(111, 66, 193, 0.15);
    --sombra-card: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* Bordas */
    --border-radius: 8px;
    --border-radius-large: 12px;
}

/* === ESTILOS GLOBAIS === */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--cor-fundo-neutro);
    color: var(--cor-texto);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    padding-top: 100px; /* Compensar altura da navbar fixa */
}

/* === ESTILOS DO NAVBAR === */
.navbar {
    background-color: var(--cor-primaria) !important;
    box-shadow: var(--sombra-suave);
    padding: 0.8rem 0;
    border-bottom: 3px solid var(--cor-primaria-hover);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
}

.navbar-brand {
    color: var(--cor-secundaria) !important;
    font-weight: 700;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar-brand img {
    height: 60px;
    width: auto;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-link {
    color: var(--cor-secundaria) !important;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 0.8rem 1.5rem !important;
    border-radius: var(--border-radius);
    position: relative;
    margin: 0 0.25rem;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--cor-secundaria) !important;
    transform: translateY(-1px);
}

.nav-link.active {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: var(--border-radius);
    color: var(--cor-secundaria) !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* === ESPAÇAMENTO ESPECÍFICO PARA NAVEGAÇÃO DESKTOP === */
.navbar-expand-lg .navbar-nav .nav-item {
    margin: 0 0.2rem; /* Espaçamento horizontal equalizado entre todos os itens */
}

/* === BOTÕES === */
.btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    border-radius: var(--border-radius);
    padding: 0.6rem 1.5rem;
    transition: all 0.3s ease;
    border: none;
    text-transform: none;
}

.btn-primary {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    box-shadow: var(--sombra-suave);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cor-primaria-hover);
    border-color: var(--cor-primaria-hover);
    color: var(--cor-secundaria);
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    color: var(--cor-secundaria) !important;
    opacity: 0.8;
}

.btn-primary:disabled:hover,
.btn-primary.disabled:hover {
    background-color: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    color: var(--cor-secundaria) !important;
    transform: none;
    box-shadow: var(--sombra-suave);
}

.btn-outline-primary {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

.btn-outline-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: var(--cor-secundaria);
    box-shadow: var(--sombra-suave);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #c82333;
    border-color: #bd2130;
    color: var(--cor-secundaria);
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover);
}

/* === TIPOGRAFIA === */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
}

/* Exceção: cabeçalhos dentro de card-header devem manter cor branca */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: #fff !important;
}

.main-title {
    color: var(--cor-primaria);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* === CARDS === */
.card {
    border: none;
    box-shadow: var(--sombra-card);
    border-radius: var(--border-radius-large);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: var(--sombra-hover);
}

.card-header {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-light));
    color: var(--cor-secundaria);
    border-bottom: none;
    font-weight: 600;
    padding: 1rem 1.5rem;
}

.card-body {
    padding: 1.5rem;
}

.card-produto {
    transition: all 0.3s ease;
    cursor: pointer;
}

.card-produto:hover {
    box-shadow: var(--sombra-hover);
}

/* === FORMULÁRIOS === */
.form-control,
.form-select {
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

/* Melhorar quebra de linha em selects globalmente */
.form-select {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.form-select option {
    white-space: pre-wrap; /* Preserva quebras de linha e permite wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 0.4rem 0.75rem;
    line-height: 1.4;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.15);
    outline: none;
}

.form-label {
    font-weight: 500;
    color: var(--cor-texto);
    margin-bottom: 0.5rem;
}

.form-floating > label {
    color: var(--cor-texto-light);
    font-weight: 400;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--cor-primaria);
    font-weight: 500;
}

/* === SISTEMA DE STATUS === */
.status-badge {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.85rem;
    display: inline-block;
}

.status-pendente {
    background-color: var(--cor-pendente);
    color: #000;
}

.status-preparo {
    background-color: var(--cor-preparo);
    color: #fff;
}

.status-pronto {
    background-color: var(--cor-pronto);
    color: #fff;
}

.status-entregue {
    background-color: var(--cor-primaria);
    color: #fff;
}

.status-cancelado {
    background-color: var(--cor-cancelado);
    color: #fff;
}

/* === BADGES E ELEMENTOS AUXILIARES === */
.bg-purple {
    background-color: var(--cor-primaria) !important;
}

.badge.bg-purple {
    background-color: var(--cor-primaria) !important;
    color: #fff !important;
}

.text-purple {
    color: var(--cor-primaria) !important;
}

.border-purple {
    border-color: var(--cor-primaria) !important;
}

/* === BOTÃO ROXO PERSONALIZADO === */
.btn-purple {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
    box-shadow: var(--sombra-suave);
}

.btn-purple:hover,
.btn-purple:focus {
    background-color: var(--cor-primaria-hover);
    border-color: var(--cor-primaria-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover);
}

.btn-purple:active,
.btn-purple.active {
    background-color: var(--cor-primaria-hover);
    border-color: var(--cor-primaria-hover);
    color: #fff;
}

/* === BOTÕES DE DETALHES === */
.btn-ver-detalhes,
button[class*="btn-outline-primary"][class*="btn-sm"]:not(.btn-purple):not(.btn-warning):not(.btn-success) {
    background-color: transparent !important;
    border: 1px solid #dee2e6 !important;
    color: #333 !important;
    padding: 0.375rem 0.75rem; /* Padding consistente com botão deletar */
    min-width: 42px; /* Largura mínima para facilitar toque */
    font-size: 0.875rem; /* Tamanho de fonte consistente */
}

.btn-ver-detalhes i,
button[class*="btn-outline-primary"][class*="btn-sm"]:not(.btn-purple):not(.btn-warning):not(.btn-success) i {
    color: #333 !important;
}

.btn-ver-detalhes:hover,
button[class*="btn-outline-primary"][class*="btn-sm"]:not(.btn-purple):not(.btn-warning):not(.btn-success):hover {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #333 !important;
    transform: translateY(-1px);
}

/* === BOTÕES DE VER DETALHES NA PÁGINA DE PEDIDOS === */
.btn.btn-outline-primary.btn-sm[onclick*="ver-pedido"],
.btn.btn-outline-primary.btn-sm:has(i.fa-eye),
button:has(i.fa-eye) {
    background-color: transparent !important;
    border: 1px solid #dee2e6 !important;
    color: #333 !important;
}

.btn.btn-outline-primary.btn-sm[onclick*="ver-pedido"] i,
.btn.btn-outline-primary.btn-sm:has(i.fa-eye) i,
button:has(i.fa-eye) i {
    color: #333 !important;
}

.btn.btn-outline-primary.btn-sm[onclick*="ver-pedido"]:hover,
.btn.btn-outline-primary.btn-sm:has(i.fa-eye):hover,
button:has(i.fa-eye):hover {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #333 !important;
    transform: translateY(-1px);
}

/* === SIDEBAR === */
.sidebar {
    background-color: var(--cor-secundaria);
    border-right: 1px solid #dee2e6;
    height: calc(100vh - 100px);
    position: sticky;
    top: 100px;
    padding: 3rem 1.5rem 2rem 1.5rem;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

.sidebar h3 {
    color: var(--cor-primaria);
    font-weight: 600;
    font-size: 1.2rem;
}

/* === REGRAS GLOBAIS PARA SELECTS NA SIDEBAR === */
.sidebar .form-select {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    height: auto !important;
    min-height: 38px !important;
    line-height: 1.4 !important;
}

.sidebar .form-select option {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    padding: 0.4rem 0.75rem !important;
    line-height: 1.4 !important;
}

/* === CONTEÚDO PRINCIPAL === */
.content {
    padding: 2rem;
    flex: 1;
    padding-top: 3rem; /* Mais espaço do topo para títulos h2 */
}

/* === LOGIN/PÁGINA INICIAL === */
/* Layout principal para páginas de autenticação */
body:has(.login-container) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 0; /* Páginas de auth não precisam compensar navbar */
}

body:has(.cadastro-container) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 0; /* Páginas de auth não precisam compensar navbar */
}

/* Container principal das páginas de auth */
.auth-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Conteúdo principal centralizado */
.auth-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem;
    min-height: auto;
    padding-top: 1rem;
}

/* Container específico para login - mais compacto */
.login-container {
    margin: 0;
    max-width: 420px;
    width: 100%;
}

/* Container específico para cadastro - permite crescer */
.cadastro-container {
    margin: 0;
    max-width: 800px;
    width: 100%;
}

.logo-container {
    text-align: center;
    margin-bottom: 2.5rem;
}

.logo-text {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--cor-primaria);
    margin-bottom: 0.5rem;
    font-family: 'Poppins', sans-serif;
}

.logo-tagline {
    color: var(--cor-texto-light);
    font-size: 1rem;
    font-weight: 400;
}

.login-card {
    border-radius: var(--border-radius-large);
    box-shadow: var(--sombra-hover);
    border: none;
    transition: box-shadow 0.3s ease;
}

.login-card:hover {
    box-shadow: 0 12px 35px rgba(111, 66, 193, 0.2);
}

.login-card .card-header {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-light));
    color: var(--cor-secundaria);
    border-bottom: none;
    padding: 1.5rem;
    text-align: center;
}

.login-card .card-body {
    padding: 2.5rem;
}

.login-btn {
    padding: 0.8rem;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Estados do botão de login durante carregamento */
.login-btn:disabled,
.login-btn.disabled {
    background-color: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    color: var(--cor-secundaria) !important;
    opacity: 0.8;
    cursor: not-allowed;
}

.login-btn:disabled:hover,
.login-btn.disabled:hover {
    background-color: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    transform: none;
    box-shadow: var(--sombra-suave);
}

.register-link {
    text-align: center;
    margin-top: 1.5rem;
    font-weight: 500;
}

.register-link a {
    color: var(--cor-primaria);
    text-decoration: none;
    font-weight: 600;
}

.register-link a:hover {
    text-decoration: underline;
}

/* === FOOTER === */
.login-footer,
footer {
    margin-top: auto;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    text-align: center;
    font-size: 0.85rem;
    border-top: 3px solid var(--cor-primaria-hover);
    flex-shrink: 0;
}

/* Footer das páginas internas (pedidos, cardápio, relatórios) */
footer.mt-0 {
    padding: .5rem 0;
}
footer.mt-5 {
    padding: .5rem 0;
}

/* Footer específico para páginas de autenticação */
.auth-footer {
    padding: 1rem 0;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    text-align: center;
    font-size: 0.85rem;
    border-top: 2px solid var(--cor-primaria-hover);
    flex-shrink: 0;
    margin-top: auto;
}

/* Remove padding do container dentro do auth-footer */
.auth-footer .container {
    padding: 0;
}

/* === ALERTAS E MENSAGENS === */
.alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 350px;
    z-index: 9999;
}

.error-message {
    color: var(--cor-cancelado);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: none;
    font-weight: 500;
}

/* === CATEGORIAS E PRODUTOS === */
.categoria-titulo {
    border-left: 4px solid var(--cor-primaria);
    padding-left: 15px;
    margin: 2rem 0 1.5rem 0;
    color: #333;
    font-weight: 600;
}

.produto-card {
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: var(--border-radius);
}

.produto-card:hover {
    box-shadow: var(--sombra-hover);
}

.produto-selecionado {
    border: 2px solid var(--cor-primaria) !important;
    box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
}

/* === PEDIDOS === */
.pedido-card {
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    border-left: 4px solid var(--cor-primaria);
}

.pedido-card:hover {
    box-shadow: var(--sombra-hover);
}

.pedido-titulo {
    color: #333;
    font-weight: 600;
}

/* Destacar número do pedido em roxo */
.numero-pedido {
    color: var(--cor-primaria);
    font-weight: 700;
}

.pedido-itens {
    color: var(--cor-texto-light);
    font-size: 0.9rem;
}

/* === CONTADOR E RESUMO === */
.contador-quantidade {
    border-radius: var(--border-radius);
}

.resumo-item {
    padding: 0.75rem;
    border-bottom: 1px solid #eee;
    border-radius: var(--border-radius);
}

#resumo-pedido {
    border-radius: var(--border-radius);
    max-height: 50vh; /* Altura máxima para permitir scroll */
    overflow-y: auto; /* Permitir scroll vertical */
    margin-bottom: 1rem; /* Espaçamento do total */
}

/* Estilo personalizado para scrollbar do resumo */
#resumo-pedido::-webkit-scrollbar {
    width: 6px;
}

#resumo-pedido::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#resumo-pedido::-webkit-scrollbar-thumb {
    background: var(--cor-primaria);
    border-radius: 3px;
}

#resumo-pedido::-webkit-scrollbar-thumb:hover {
    background: var(--cor-primaria-hover);
}

/* Garantir que o card do resumo mantenha posição fixa */
.sidebar .card {
    position: sticky;
    top: 120px; /* Compensar navbar fixa */
    max-height: calc(100vh - 140px); /* Altura máxima para o card */
    display: flex;
    flex-direction: column;
}

/* Garantir que o card-body seja flexível */
.sidebar .card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Importante para flexbox funcionar */
}

/* Total e botão sempre fixos na parte inferior */
.total-pedido,
.sidebar .card .card-body > .mt-4 {
    flex-shrink: 0; /* Não encolher */
}

.total-pedido {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-light));
    color: var(--cor-secundaria);
    padding: 1rem;
    border-radius: var(--border-radius);
    font-weight: 600;
}

/* === FILTROS === */
.filtro-label {
    font-weight: 500;
    color: var(--cor-primaria);
    margin-bottom: 0.5rem;
}

.filters-container {
    background-color: var(--cor-fundo-neutro);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid #e9ecef;
}

/* === MODAIS === */
.modal-content {
    border-radius: var(--border-radius-large);
    border: none;
    box-shadow: var(--sombra-hover);
}

.modal-header {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-light));
    color: var(--cor-secundaria);
    border-bottom: none;
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}

.modal-title {
    font-weight: 600;
    color: #FFF;
}

/* === UTILITÁRIOS === */
.bg-claro {
    background-color: var(--cor-fundo-neutro);
}

.text-primary {
    color: var(--cor-primaria) !important;
}

/* === CHECKBOXES E FORMULÁRIOS ESPECIAIS === */
.form-check-input:checked {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.form-check-input:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.15);
}

.form-check-label {
    font-weight: 500;
    color: var(--cor-texto);
}

/* === CARDS DE ROLE (CADASTRO) === */
.role-card {
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    cursor: pointer;
}

.role-card:hover {
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-suave);
}

.role-card.selected {
    border-color: var(--cor-primaria);
    background-color: rgba(111, 66, 193, 0.05);
    box-shadow: var(--sombra-suave);
}

.role-card .form-check-input:checked ~ .form-check-label {
    color: var(--cor-primaria);
}

/* === RESPONSIVIDADE === */
@media (max-width: 992px) {
    .cadastro-container .card-body {
        padding: 2rem 3rem;
    }
}

/* === BREAKPOINT ESPECÍFICO PARA TABLETS E DESKTOPS PEQUENOS === */
@media (min-width: 769px) and (max-width: 1600px) {
    /* Aumentar largura da sidebar em tablets e desktops pequenos */
    .sidebar {
        flex: 0 0 25%; /* Aumenta de aproximadamente 16.67% (col-lg-2) para 25% */
        max-width: 25%;
    }
    
    /* Ajustar largura do conteúdo principal */
    .content {
        flex: 0 0 75%; /* Ajusta para 75% para compensar a sidebar maior */
        max-width: 75%;
    }
    
    /* Permitir quebra de linha nos selects */
    .sidebar .form-select {
        min-width: 120px; /* Largura mínima reduzida */
        white-space: normal; /* Permite quebra de linha */
        height: auto; /* Altura automática para acomodar múltiplas linhas */
        min-height: 38px; /* Altura mínima padrão */
        line-height: 1.3; /* Melhor espaçamento entre linhas */
        padding: 0.5rem 2rem 0.5rem 0.75rem; /* Padding ajustado */
    }
    
    /* Estilizar as opções dos selects para quebra de linha */
    .sidebar .form-select option {
        white-space: normal; /* Permite quebra de linha nas opções */
        word-wrap: break-word; /* Quebra palavras longas */
        padding: 0.4rem 0.75rem; /* Padding para opções */
        line-height: 1.3;
    }
    
    /* Melhorar espaçamento dos filtros */
    .filters-container {
        padding: 1.25rem; /* Aumentar padding interno */
    }
    
    .filtro-label {
        font-size: 0.9rem; /* Reduzir levemente o tamanho da fonte do label */
        margin-bottom: 0.4rem;
        word-wrap: break-word; /* Quebra de linha nos labels também */
    }
    
    /* Estilo específico para selects com texto longo */
    .sidebar .form-select[multiple] {
        height: auto;
        min-height: 80px; /* Altura mínima para selects múltiplos */
    }
}

/* === BREAKPOINT PARA DESKTOPS MÉDIOS === */
@media (min-width: 993px) and (max-width: 1600px) {
    /* Em desktops médios, manter a sidebar um pouco maior que o padrão Bootstrap */
    .sidebar {
        flex: 0 0 20%; /* Ligeiramente maior que col-lg-2 (16.67%) */
        max-width: 20%;
    }
    
    .content {
        flex: 0 0 80%;
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        padding: 2rem 1rem 1rem 1rem;
        top: auto;
    }

    .content {
        padding: 1rem;
        padding-top: 2rem;
        padding-bottom: 100px;
    }

    /* === ESPAÇAMENTO DO MENU MOBILE === */
    .nav-link {
        padding: 1rem 1rem !important; /* Aumentado de 0.5rem para 1rem */
        margin: 0.25rem 0; /* Adiciona margem vertical entre itens */
        border-radius: var(--border-radius); /* Adiciona border-radius */
    }
    
    /* Espaçamento específico para itens de navegação mobile */
    .navbar-collapse .navbar-nav .nav-item {
        margin: 0.4rem 0; /* Margem entre itens de navegação */
    }
    
    /* Botão de logout com espaçamento especial */
    .navbar-collapse .navbar-nav .nav-item:last-child {
        margin-top: 1rem; /* Espaçamento extra antes do botão de logout */
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha divisória sutil */
    }

    .logo-text {
        font-size: 2.2rem;
    }

    .card {
        margin-bottom: 1rem;
    }

    .d-flex.gap-4 {
        flex-direction: column;
        gap: 1rem !important;
    }

    .role-card {
        margin-bottom: 1rem;
    }

    body:has(.login-container), 
    body:has(.cadastro-container) {
        min-height: 100vh;
        padding-top: 0;
    }

    .auth-content {
        padding: 1rem 1rem;
        align-items: flex-start;
        min-height: auto;
        justify-content: flex-start;
        padding-top: 1rem;
    }

    .login-container,
    .cadastro-container {
        max-width: 100%;
        margin: 0;
    }

    .auth-footer {
        font-size: 0.75rem;
        padding: 1rem 0;
    }

    .auth-footer img {
        height: 18px !important;
        margin-right: 6px !important;
    }

    .logo-container img {
        height: 60px !important;
    }
    
    .logo-text {
        font-size: 2rem !important;
    }

    .cadastro-container .card-body {
        padding: 1.5rem 2rem;
    }
    
    .cadastro-container h1 {
        font-size: 1.5rem;
    }
    
    .cadastro-container .d-flex.gap-3 {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    body {
        padding-top: 80px;
    }

    body:has(.login-container), 
    body:has(.cadastro-container) {
        padding-top: 0 !important;
    }

    .btn-floating {
        bottom: 30px;
        right: 20px;
    }
    
    /* === LAYOUT MOBILE ESPECÍFICO PARA CARDS DE PEDIDO === */
    /* Reorganizar estrutura do card para mobile */
    .pedido-card .card-body {
        position: relative;
        padding: 2rem 1.25rem; /* Aumentado para 2rem vertical e 1.25rem horizontal */
    }
    
    /* Título do pedido com espaço para badge à direita */
    .pedido-card .card-title.pedido-titulo {
        margin-bottom: 1.5rem; /* Aumentado de 1rem para 1.5rem */
        padding-right: 30%; /* Aumentado de 25% para 30% para dar mais espaço */
        line-height: 1.3;
    }
    
    /* Badge posicionada absoluta no topo direito */
    .pedido-card .status-badge {
        position: absolute;
        top: 2rem; /* Ajustado para acompanhar o novo padding */
        right: 1.25rem; /* Ajustado para acompanhar o novo padding horizontal */
        margin: 0;
        font-size: 0.75rem; /* Reduzir tamanho da fonte para economizar espaço */
        padding: 0.35rem 0.6rem; /* Reduzir padding para economizar espaço */
    }
    
    /* Descrição dos itens com espaçamento adequado */
    .pedido-card .pedido-itens {
        margin-bottom: 1.75rem; /* Aumentado de 1.25rem para 1.75rem */
        font-size: 0.85rem;
        clear: both;
        line-height: 1.5; /* Aumentado de 1.4 para 1.5 */
    }
    
    /* Container dos botões reorganizado */
    .pedido-card .d-flex.justify-content-between.align-items-center {
        display: flex !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        gap: 1rem; /* Aumentado de 0.75rem para 1rem */
        margin-top: 0;
    }
    
    /* Botões ocupam toda largura e dividem espaço */
    .pedido-card .action-buttons {
        display: flex !important;
        width: 100%;
        gap: 1rem; /* Aumentado de 0.75rem para 1rem */
    }
    
    .pedido-card .action-buttons .btn {
        flex: 1;
        font-size: 0.85rem;
        padding: 1rem 0.5rem; /* Aumentado padding vertical de 0.75rem para 1rem */
        white-space: nowrap;
    }

    .sidebar .card {
        position: static; /* Não fixar em mobile */
        max-height: none;
    }
    
    #resumo-pedido {
        max-height: 40vh; /* Altura menor em mobile */
    }
}

/* === BREAKPOINT PARA TELAS MUITO PEQUENAS === */
@media (max-width: 480px) {
    /* Em telas muito pequenas, transformar badge em círculo colorido */
    .pedido-card .card-title.pedido-titulo {
        padding-right: 3rem; /* Espaço para o círculo (menor que o badge com texto) */
    }
    
    /* Badge como círculo colorido sólido */
    .pedido-card .status-badge {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        padding: 0;
        font-size: 0; /* Esconde o texto */
        display: inline-block;
        top: 2.25rem; /* Alinha melhor com o título */
        right: 1.25rem;
        position: absolute;
        
        /* Remove bordas e mantém apenas a cor de fundo */
        border: none;
        overflow: hidden;
        text-indent: -9999px; /* Esconde o texto completamente */
    }
    
    /* Cores específicas para cada status em círculo */
    .pedido-card .status-badge.status-pendente {
        background-color: #ffc107; /* Amarelo */
    }
    
    .pedido-card .status-badge.status-preparo {
        background-color: #fd7e14; /* Laranja */
    }
    
    .pedido-card .status-badge.status-pronto {
        background-color: #38b000; /* Verde */
    }
    
    .pedido-card .status-badge.status-entregue {
        background-color: #6f42c1; /* Roxo */
    }
    
    .pedido-card .status-badge.status-cancelado {
        background-color: #dc3545; /* Vermelho */
    }
    
    /* Reduzir espaçamentos em telas muito pequenas */
    .pedido-card .card-body {
        padding: 2rem 1rem; /* Reduzir padding horizontal */
    }
    
    .pedido-card .action-buttons .btn {
        font-size: 0.8rem;
        padding: 0.85rem 0.4rem;
    }
}

/* === ESTADO DE CARREGAMENTO === */
.spinner-border.text-primary {
    color: var(--cor-primaria) !important;
}

/* === ELEMENTOS ESPECIAIS === */
.input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.15);
}

.input-group:focus-within .input-group-text {
    border-color: var(--cor-primaria);
    background-color: rgba(111, 66, 193, 0.1);
}

/* === NOVOS ELEMENTOS ESPECÍFICOS === */
#novo-pedido-btn {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-light));
    border: none;
    box-shadow: var(--sombra-suave);
}

#novo-pedido-btn:hover {
    background: linear-gradient(135deg, var(--cor-primaria-hover), var(--cor-primaria));
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover);
}

.btn-ver-detalhes:hover i,
.btn.btn-outline-primary.btn-sm[onclick*="ver-pedido"]:hover i {
    transform: none; /* Remove transform para manter consistência */
}

/* === PÁGINA VER PEDIDO === */
#pedido-titulo {
    color: #ffffff !important;
}

/* Títulos específicos da página ver-pedido */
.total-section h5,
.action-section h5 {
    color: #333 !important;
}

/* Títulos dos itens de pedido */
.item-card h6 {
    color: #333 !important;
}

/* Ajustes específicos para página de cadastro */
body:has(.cadastro-container) .auth-content {
    align-items: center;
    padding: 1rem 1rem;
}

/* Cards de role mais compactos no cadastro */
.cadastro-container .role-card {
    transition: all 0.3s ease;
}

.cadastro-container .role-card .card-body {
    padding: 0.75rem;
}

/* Ajustes para layout mais compacto do cadastro */
.cadastro-container .row {
    margin-bottom: 0;
}

.cadastro-container .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.cadastro-container .input-group {
    margin-bottom: 0;
}

.cadastro-container .card-body {
    padding: 2rem 5rem;
}

.cadastro-container h1 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

/* Otimização dos cards de role */
.cadastro-container .role-card .form-check-label {
    font-size: 0.9rem;
    font-weight: 500;
}

.cadastro-container .role-description small {
    font-size: 0.75rem;
}

.cadastro-container .d-flex.gap-3 .role-card {
    min-height: auto;
}

/* === BADGES CUSTOMIZADAS PARA RELATÓRIOS === */
/* Usar exatamente as mesmas cores dos status da página de pedidos */
.badge.bg-warning {
    background-color: var(--cor-pendente) !important;
    color: #000 !important;
}

.badge.bg-warning-preparo {
    background-color: var(--cor-preparo) !important;
    color: #fff !important;
}

.badge.bg-danger {
    background-color: var(--cor-cancelado) !important;
    color: #fff !important;
}

.badge.bg-success {
    background-color: var(--cor-pronto) !important;
    color: #fff !important;
}

.badge.bg-primary {
    background-color: var(--cor-primaria) !important;
    color: #fff !important;
}

.badge.bg-secondary {
    background-color: var(--cor-entregue) !important;
    color: #fff !important;
}

/* Progress bars com as mesmas cores */
.progress-bar.bg-warning {
    background-color: var(--cor-pendente) !important;
}

.progress-bar.bg-warning-preparo {
    background-color: var(--cor-preparo) !important;
}

.progress-bar.bg-danger {
    background-color: var(--cor-cancelado) !important;
}

.progress-bar.bg-success {
    background-color: var(--cor-pronto) !important;
}

.progress-bar.bg-primary {
    background-color: var(--cor-primaria) !important;
}

.progress-bar.bg-secondary {
    background-color: var(--cor-entregue) !important;
}

/* === BOTÃO FLUTUANTE === */
.btn-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    border-radius: 28px; /* Alterado de 50% para valor fixo para permitir expansão */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(111, 66, 193, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
    font-size: 24px;
    border: none;
    overflow: hidden;
    white-space: nowrap;
}

.btn-floating i {
    transition: all 0.3s ease;
    min-width: 24px; /* Garante que o ícone mantenha espaço fixo */
}

.btn-floating-text {
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    margin-left: 0;
    font-size: 16px;
    font-weight: 500;
    max-width: 0;
    overflow: hidden;
}

/* Estado expandido */
.btn-floating:hover,
.btn-floating:focus,
.btn-floating.expanded {
    width: auto;
    padding: 0 20px 0 16px;
    min-width: 56px;
    border-radius: 28px;
}

.btn-floating:hover .btn-floating-text,
.btn-floating:focus .btn-floating-text,
.btn-floating.expanded .btn-floating-text {
    opacity: 1;
    transform: translateX(0);
    margin-left: 12px;
    max-width: 200px; /* Valor suficiente para o texto "Novo Pedido" */
}

.btn-floating:hover,
.btn-floating:focus {
    background-color: var(--cor-primaria-hover);
    color: var(--cor-secundaria);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(111, 66, 193, 0.4);
    text-decoration: none;
}

.btn-floating:active {
    transform: translateY(0);
}

/* Estado oculto do botão flutuante */
.btn-floating-hidden {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    pointer-events: none;
}

/* Animação de pulsação para chamar atenção */
.btn-floating {
    animation: pulseFloat 2s infinite;
}

/* Remover animação quando oculto ou expandido */
.btn-floating-hidden,
.btn-floating:hover,
.btn-floating:focus,
.btn-floating.expanded {
    animation: none;
}

@keyframes pulseFloat {
    0% {
        box-shadow: 0 4px 16px rgba(111, 66, 193, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(111, 66, 193, 0.5);
    }
    100% {
        box-shadow: 0 4px 16px rgba(111, 66, 193, 0.3);
    }
}

/* Ajustes para garantir que o botão não interfira com o footer */
@media (max-width: 768px) {
    .btn-floating {
        bottom: 30px;
        right: 20px;
    }
    
    /* Adicionar padding inferior ao content em mobile para não sobrepor o botão */
    .content {
        padding-bottom: 100px;
    }
}

/* === LAYOUT DE ALTURA TOTAL DA VIEWPORT === */
/* Sistema para páginas com pouco conteúdo utilizarem toda a altura da tela */
/* Aplicado apenas aos containers de conteúdo, não ao body inteiro */

/* Específico para conteúdo que deve crescer */
.content-grow {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente quando há pouco conteúdo */
    min-height: calc(100vh - 200px); /* Altura total menos navbar e footer */
}

/* Quando há conteúdo suficiente, remove a centralização */
.content-grow.has-content {
    justify-content: flex-start;
    min-height: auto; /* Remove altura mínima quando há conteúdo */
}

/* Para mensagens de estado vazio */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cor-texto-light);
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--cor-texto-light);
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    .content-grow {
        min-height: calc(100vh - 180px); /* Ajuste para mobile */
    }
    
    .empty-state {
        padding: 2rem 1rem;
    }
    
    .empty-state i {
        font-size: 3rem;
    }
}

/* Variações de empty-state para diferentes contextos */
.empty-state.pedidos-vazio i {
    color: var(--cor-texto-light);
}

.empty-state.cardapio-vazio i {
    color: var(--cor-secundaria);
}

.empty-state.relatorios-vazio i {
    color: var(--cor-texto-light);
}

/* Template para botão no estado vazio */
.empty-state .btn {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    padding: 0.8rem 2rem;
}

/* Botão específico para o estado vazio de pedidos - mais elegante */
.empty-state.pedidos-vazio .btn {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.empty-state.pedidos-vazio .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.empty-state.pedidos-vazio .btn i {
    font-size: 0.9rem;
    margin-right: 0.5rem;
    color: #fff !important; /* Força o ícone a ser branco */
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-bottom: 0;
    margin-top: 0;
}

/* Melhorar espaçamento geral do empty-state de pedidos */
.empty-state.pedidos-vazio {
    padding: 2.5rem 1rem 1rem 1rem;
}

.empty-state.pedidos-vazio h3 {
    margin-bottom: 0.8rem;
}

.empty-state.pedidos-vazio p {
    margin-bottom: 0.5rem;
}

/* Animação suave para mudança de estado */
.content-grow {
    transition: justify-content 0.3s ease;
}

.content-grow.has-content {
    transition: justify-content 0.3s ease;
}

/* === CARD DE CADASTRO === */
.cadastro-container .card.shadow-sm {
    transition: box-shadow 0.3s ease;
}

.cadastro-container .card.shadow-sm:hover {
    box-shadow: 0 12px 35px rgba(111, 66, 193, 0.2) !important;
}

/* === ESTILOS PARA BOTÃO DELETAR PRODUTO === */
.btn-deletar-produto {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
    transition: all 0.3s ease;
    padding: 0.375rem 0.75rem; /* Aumentado padding horizontal de 0.5rem para 0.75rem */
    border-radius: var(--border-radius);
    min-width: 42px; /* Largura mínima para facilitar toque */
    font-size: 0.875rem; /* Tamanho de fonte consistente */
}

.btn-deletar-produto:hover,
.btn-deletar-produto:focus {
    background-color: #c82333;
    border-color: #bd2130;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.btn-deletar-produto:active {
    background-color: #bd2130;
    border-color: #b21f2d;
    transform: translateY(0);
}

/* Estilo para botões com acesso restrito (funcionários) */
.btn-deletar-produto[title*="administradores"],
.btn-primary[title*="administradores"] {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    opacity: 0.8;
    cursor: not-allowed;
}

.btn-deletar-produto[title*="administradores"]:hover,
.btn-primary[title*="administradores"]:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    transform: none;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
}

/* Ajustes para grupo de botões no card do produto */
.produto-card .btn-group {
    gap: 0.25rem;
}

.produto-card .btn-group .btn {
    border-radius: var(--border-radius);
}

/* Ajustes específicos para mobile */
@media (max-width: 768px) {
    .btn-deletar-produto {
        padding: 0.5rem 0.875rem; /* Padding maior em mobile */
        min-width: 48px; /* Largura mínima maior para melhor toque */
        font-size: 0.9rem; /* Fonte ligeiramente maior em mobile */
        min-height: 38px; /* Altura mínima para área de toque adequada */
    }
    
    /* Ajustar espaçamento do grupo de botões em mobile */
    .produto-card .btn-group {
        gap: 0.375rem; /* Maior espaçamento entre botões em mobile */
    }
    
    /* Garantir que os botões tenham tamanho adequado para toque */
    .produto-card .btn-group .btn {
        min-height: 38px; /* Altura mínima recomendada para toque (44px iOS, 48dp Android, mas 38px é aceitável) */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Ajustes específicos para mobile - aplicar também aos botões de detalhes */
@media (max-width: 768px) {
    .btn-ver-detalhes,
    button[class*="btn-outline-primary"][class*="btn-sm"]:not(.btn-purple):not(.btn-warning):not(.btn-success) {
        padding: 0.5rem 0.875rem; /* Padding maior em mobile */
        min-width: 48px; /* Largura mínima maior para melhor toque */
        font-size: 0.9rem; /* Fonte ligeiramente maior em mobile */
        min-height: 38px; /* Altura mínima para área de toque adequada */
    }
}

/* === RESUMO DO PEDIDO - ALINHAMENTO MELHORADO === */
#resumo-pedido .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    gap: 0.5rem;
}

#resumo-pedido .list-group-item .item-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 0; /* Permite que o texto seja truncado se necessário */
}

#resumo-pedido .list-group-item .item-nome {
    flex: 1;
    font-weight: 500;
    margin-right: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#resumo-pedido .list-group-item .item-preco {
    font-weight: 600;
    color: var(--cor-primaria);
    white-space: nowrap;
    min-width: 70px; /* Largura mínima para alinhar preços */
    text-align: right;
}

#resumo-pedido .list-group-item .btn-remover {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    #resumo-pedido .list-group-item {
        padding: 0.875rem 0.75rem;
        gap: 0.375rem;
    }
    
    #resumo-pedido .list-group-item .item-nome {
        margin-right: 0.75rem;
        font-size: 0.9rem;
    }
    
    #resumo-pedido .list-group-item .item-preco {
        font-size: 0.9rem;
        min-width: 65px;
    }
    
    #resumo-pedido .list-group-item .btn-remover {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
}