/* Importar fonte moderna */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =========================================
   RESET E BASE
   ========================================= */
body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-main);
    overflow-y: auto; overflow-x: hidden;
    transition: background-color 0.4s, color 0.4s;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.5px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; } 
::-webkit-scrollbar-track { background: rgba(93, 155, 62, 0.05); }
::-webkit-scrollbar-thumb { background: #9BC786; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--primary-color); }

/* =========================================
   HEADER FIXO
   ========================================= */
.header-fixed {
    position: fixed; top: 0; left: 0; right: 0; height: 80px;
    background: var(--bg-body); 
    display: flex; align-items: center; padding: 0 2rem; z-index: 1050;
    border-bottom: 1px solid var(--border-light);
}

/* =========================================
   LAYOUT GRID (2 Colunas)
   ========================================= */
.container-fluid { padding: 0; } 

.full-height-container {
    margin-top: 80px; 
    min-height: calc(100vh - 80px); 
    max-width: 1400px; 
    margin: 80px auto 0 auto; 
    padding: 1.5rem 2rem 2rem 2rem; 
    
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 3fr; /* Filtros | Lista */
    gap: 2rem;
}

@media (max-width: 992px) {
    .full-height-container { 
        grid-template-columns: 1fr; 
        padding: 1rem; 
        display: block; 
        margin: 80px auto 0 auto;
    }
    .modern-card { margin-bottom: 1.5rem; }
}

/* =========================================
   CARTÕES
   ========================================= */
.modern-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column; 
    height: 100%; 
    border: 1px solid rgba(255,255,255,0.5);
}

.card-header-modern {
    padding: 1.5rem; font-weight: 700; color: var(--text-main);
    background: transparent; display: flex; align-items: center; font-size: 1.1rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-light);
}
.card-header-modern i {
    color: var(--secondary-color); background: rgba(230, 179, 62, 0.15);
    padding: 8px; border-radius: 10px; margin-right: 12px;
}

.card-body-modern {
    padding: 1.5rem;
    flex-grow: 1;
    overflow-y: auto;
    display: flex; flex-direction: column;
}

/* =========================================
   CORREÇÃO MENU LATERAL
   ========================================= */
/* Forçar alinhamento à esquerda e aumentar largura */
.menu-lateral {
    width: 300px !important; /* Menu mais largo */
    left: -300px !important; /* Esconde com base na nova largura */
}

.menu-lateral.menu-lateral-ativo {
    left: 0 !important;
}

.menu-lateral .list-group-item {
    justify-content: flex-start !important;
    gap: 15px; /* Espaço entre ícone e texto */
}

/* =========================================
   LISTA DE PRATOS (Específico da Lista)
   ========================================= */
/* Aplica-se APENAS aos itens dentro da lista de resultados */
#listaPratos .list-group-item {
    background: #FAFAFA;
    border: none;
    margin-bottom: 8px;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between; /* Aqui queremos separado */
    align-items: center;
    border-left: 4px solid transparent;
}
#listaPratos .list-group-item:hover {
    background: var(--bg-body);
    transform: translateX(5px);
    border-left-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.badge-nutri {
    font-size: 0.75em;
    padding: 0.4em 0.8em;
    border-radius: 50px;
    font-weight: 600;
    margin-left: 5px;
}
.bg-prot { background: rgba(67, 97, 238, 0.15); color: #4361ee; }
.bg-cal { background: rgba(239, 35, 60, 0.15); color: #ef233c; }

/* =========================================
   DARK MODE
   ========================================= */
body.dark-mode .header-fixed { background: var(--bg-body); border-bottom: 1px solid var(--border-light); }
body.dark-mode .modern-card { border: 1px solid var(--border-light); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
body.dark-mode .card-header-modern { color: var(--text-main); }
body.dark-mode .form-control, body.dark-mode .form-select { background-color: #0B1410; border-color: #2A4530; color: white; }

/* Ajuste Dark Mode para lista de pratos */
body.dark-mode #listaPratos .list-group-item { background: #15221A; color: var(--text-main); border-bottom-color: #2A4530; }
body.dark-mode #listaPratos .list-group-item:hover { background: #0B1410; }

body.dark-mode .modal-content { background: #15221A; border: 1px solid #2A4530; }
body.dark-mode .bg-light { background-color: #1A2B21 !important; border-color: #2A4530 !important; color: #E3F2E6 !important; }

@media (min-width: 576px) {
    .modal-sm {
        --bs-modal-width: 500px;
    }
}