/****** KODIX THEME - GLOBAL STYLES ******/

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

:root {
    /* Cores principais da identidade visual */
    --primary-color: #2A9D8F; /* Verde água */
    --secondary-color: #264653; /* Azul petróleo escuro */
    --accent-color: #FF6B35; /* Laranja vibrante */
    --accent-hover: #E85B25; /* Laranja mais escuro para hover */
    --accent-active: #D94F1A; /* Laranja ainda mais escuro para estado ativo */
    
    /* Cores para modo claro (padrão) */
    --sidebar-bg: #FFFFFF; /* Branco puro */
    --body-bg: #F4F4F4; /* Cinza muito claro */
    --text-color-light: #F4F4F4; /* Branco para texto em fundos escuros */
    --text-color-dark: #1A1A1A; /* Preto suave para texto em fundos claros */
    --card-bg: #FFFFFF; /* Branco para cards */
    --border-color: #E0E0E0; /* Cinza claro para bordas */
    --sidebar-header-bg: #FFFFFF; /* Branco para cabeçalho da sidebar */
    --font-family-base: 'Poppins', sans-serif;
    --disabled-bg: #E0E0E0; /* Cinza claro para botões desabilitados */
    --disabled-text: #AAAAAA; /* Cinza médio para texto desabilitado */
    --placeholder-color: #999999; /* Cinza médio para placeholders */
    --error-color: #D32F2F; /* Vermelho forte para erros */
    --error-bg: #FFE5E5; /* Rosa claro para fundo de campos com erro */
    --success-color: #2A9D8F; /* Verde água para sucesso */
    --info-color: #2196F3; /* Azul para informações */
    --table-header-bg: #E0E0E0; /* Cinza claro para cabeçalhos de tabela */
    --table-row-alt: #F9F9F9; /* Cinza muito claro para linhas alternadas */
    --table-hover: rgba(255, 107, 53, 0.15); /* Laranja translúcido para hover */
    --current-footer-bg: #F4F4F4;

    /* Variáveis para o modo atual (claro por padrão) */
    --current-body-bg: var(--body-bg);
    --current-card-bg: var(--card-bg);
    --current-text-color: var(--text-color-dark);
    --current-border-color: var(--border-color);
    --current-sidebar-bg: var(--sidebar-bg);
    --current-sidebar-text: var(--text-color-dark);
    --current-sidebar-header-bg: var(--sidebar-header-bg);
    --current-sidebar-link-hover-bg: rgba(255, 107, 53, 0.15);
    --current-header-bg: var(--body-bg);
    --current-table-header-bg: var(--table-header-bg);
    --current-table-row-alt: var(--table-row-alt);
}

body.dark-mode {
    /* Cores para modo escuro */
    --sidebar-bg-dark: #192028; /* Azul profundo */
    --sidebar-bg-header-dark: #192028; /* Azul profundo */
    --topo-bg-header-dark: #000000; /* Azul profundo */
    --body-bg-dark: #000000; /* Azul petróleo escuro */
    --text-color-light-dark: #F4F4F4; /* Branco para texto em fundos escuros */
    --text-color-dark-dark: #F4F4F4; /* Também branco para consistência */
    --card-bg-dark: #192028; /* Azul profundo para cards */
    --border-color-dark: #3A4A5C; /* Azul um pouco mais claro para bordas */
    --table-header-bg-dark: #264653; /* Azul petróleo para cabeçalhos de tabela */
    --table-row-alt-dark: #344559; /* Azul um pouco mais claro para linhas alternadas */
    

    /* Atualizar variáveis para o modo atual (escuro) */
    --current-body-bg: var(--body-bg-dark);
    --current-card-bg: var(--card-bg-dark);
    --current-text-color: var(--text-color-light-dark);
    --current-border-color: var(--border-color-dark);
    --current-sidebar-bg: var(--sidebar-bg-dark);
    --current-sidebar-text: var(--text-color-light-dark);
    --current-sidebar-header-bg: var(--sidebar-bg-header-dark);
    --current-sidebar-link-hover-bg: rgba(255, 107, 53, 0.15);
    --current-header-bg: var(--topo-bg-header-dark);
    --current-table-header-bg: var(--table-header-bg-dark);
    --current-table-row-alt: var(--table-row-alt-dark);
    --current-footer-bg-dark: var(--body-bg-dark);
}

.logo-placeholder {
    max-width: 150px;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--current-body-bg);
    color: var(--current-text-color);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.card-header {
    color: var(--text-color-light) !important;
}

/* --- Sidebar Base --- */
#sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--current-sidebar-bg);
    color: var(--current-sidebar-text);
    transition: all 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1030; /* Acima do header padrão */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: var(--current-sidebar-header-bg);
    text-align: center;
    flex-shrink: 0;
    position: relative; /* Para posicionar o botão de toggle */
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid var(--current-border-color);

    overflow-y: auto;
}

#sidebar ul p {
    color: var(--primary-color);
    padding: 10px 20px;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#sidebar ul li a {
    padding: 10px 20px;
    font-size: 1.1em;
    display: flex; /* Usar flex para alinhar ícone e texto */
    align-items: center;
    color: var(--current-sidebar-text);
    border-left: 3px solid transparent;
    white-space: nowrap; /* Evita quebra de linha */
    overflow: hidden; /* Esconde texto que transborda */
    text-overflow: ellipsis; /* Adiciona ... se o texto for muito longo */
}

#sidebar ul li a:hover {
    color: var(--text-color-dark);
    background: var(--current-sidebar-link-hover-bg);
    text-decoration: none;
    border-left-color: var(--accent-color);
}

#sidebar ul li.active > a,
#sidebar ul li.active > a:hover {
    color: var(--text-color-light);
    background: var(--accent-color);
    border-left-color: var(--accent-color);
}

#sidebar ul li a i {
    margin-right: 10px;
    color: var(--primary-color); /* Ícones sempre em verde água */
    min-width: 24px; /* Garante espaço para o ícone mesmo quando recolhido */
    text-align: center;
}

#sidebar ul.CTAs {

    flex-shrink: 0;
}

/* --- Sidebar Desktop (Collapsed/Expanded) --- */
@media (min-width: 769px) {
    #sidebar.collapsed {
        width: 80px;
        min-width: 80px;
    }

    #sidebar.collapsed .sidebar-header h1,
    #sidebar.collapsed ul p,
    #sidebar.collapsed ul li a span,
    #sidebar.collapsed ul.CTAs a span {
        display: none;
    }

    #sidebar.collapsed .sidebar-header {
        padding: 20px 10px;
    }

    #sidebar.collapsed ul li a {
        padding: 10px;
        justify-content: center; /* Centraliza o ícone */
    }

    #sidebar.collapsed ul li a i {
        margin-right: 0;
    }

    #sidebar.collapsed ul.CTAs {
        padding: 10px;
    }
    
    #sidebar.collapsed #sidebarToggle {
        right: -15px; /* Ajusta posição do botão quando recolhido */
    }

    #content {
        margin-left: 260px;
        transition: margin-left 0.3s ease-in-out;
    }

    #content.sidebar-collapsed {
        margin-left: 80px;
    }
    
    /* Esconde o toggle do header no desktop */
    #mobileSidebarToggle {
        display: none !important;
    }
}

/* --- Sidebar Mobile (Expanded/Collapsed) --- */
@media (max-width: 768px) {
    #sidebar {
        left: -260px; /* Começa totalmente fora da tela */
        transition: left 0.3s ease-in-out;
    }

    #sidebar.mobile-expanded {
        left: 0; /* Entra na tela */
    }

    #sidebar.mobile-collapsed {
        left: -260px; /* Sai da tela */
    }

    #content {
        margin-left: 0 !important; /* Conteúdo sempre ocupa 100% */
    }

    /* Mostra o toggle do header no mobile */
    #mobileSidebarToggle {
        display: block !important;
    }
    
    /* Esconde o toggle da sidebar por padrão no mobile, mostra só quando expandida */
    #sidebarToggle {
        display: none;
    }
    #sidebar.mobile-expanded #sidebarToggle {
        display: block;
    }
}

/* --- Content Area --- */
#content {
    width: 100%;
    padding: 0;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--current-body-bg);
}

/* --- Header --- */
.main-header {
    background: var(--current-header-bg);
    padding: 15px 30px;
    border-bottom: 1px solid var(--current-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    color: var(--current-text-color);

    top: 0;
    z-index: 1020; /* Abaixo da sidebar */
}

/* --- Sidebar Toggle Buttons --- */
#sidebarToggle, #mobileSidebarToggle {
    background: var(--accent-color);
    border: none;
    color: var(--text-color-light);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}

#sidebarToggle:hover, #mobileSidebarToggle:hover {
    background-color: var(--accent-hover);
}

/* Posicionamento do Toggle da Sidebar (Desktop) */
button#sidebarToggle {
    float: right;
}

/* --- Restante do CSS (sem alterações significativas na lógica da sidebar) --- */

.main-header .user-profile-dropdown .dropdown-toggle,
.main-header .user-profile-dropdown .dropdown-toggle:hover,
.main-header .user-profile-dropdown .dropdown-toggle:focus {
    color: var(--current-text-color) !important;
}

.main-header .user-profile-dropdown .dropdown-menu {
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-border-color);
}

.main-header .user-profile-dropdown .dropdown-item {
    color: var(--current-text-color);
}

.main-header .user-profile-dropdown .dropdown-item:hover {
    background-color: var(--current-sidebar-link-hover-bg);
}

.main-header .user-profile-dropdown .dropdown-toggle::after {
    display: none;
}


.main-header .user-profile-dropdown img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.page-content {
    padding: 0px 20px 20px 20px;
    flex-grow: 1;
}

.main-footer {
    padding: 15px 30px;
    border-top: 1px solid var(--current-border-color);
    font-size: 0.9em;
    text-align: center;
    margin-top: auto;
    color: var(--text-color); /* Sempre texto branco */
    background-color: var(--current-body-bg); /* Fundo azul petróleo */
}

.main-footer a {
    color: var(--text-color);
}

.main-footer a:hover {
    color: var(--accent-color);
}

.card {
    border: 1px solid var(--current-border-color);
    background-color: var(--current-card-bg);
    color: var(--current-text-color);
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.card-header {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    font-weight: 500;
    border-bottom: 1px solid var(--current-border-color);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.alert.alert-primary.shadow-sm.mb-4 {
    padding: 10px;
}
h4.alert-heading.mb-1 {
    font-size: 19px;
}

/* Botões */
.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-color-light);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-color-light);
}

.btn-primary:active {
    background-color: var(--accent-active) !important;
    border-color: var(--accent-active) !important;
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-color-light);
}

.btn:disabled, .btn.disabled {
    background-color: var(--disabled-bg);
    border-color: var(--disabled-bg);
    color: var(--disabled-text);
}

/* Tabelas */
.table {
    color: var(--current-text-color);
}

.table thead th {
    background-color: var(--current-table-header-bg);
    color: var(--current-text-color);
    border-color: var(--current-border-color);
}

/* Linhas ímpares padrão (sem classe .negativo) */
.table-striped > tbody > tr:nth-of-type(odd):not(.negativo) > * {
    background-color: var(--current-table-row-alt);
    color: var(--current-text-color);
}

/* Hover */
.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover);
    color: var(--current-text-color);
}

/* Negativo em linha ímpar */
.table-striped > tbody > tr.negativo:nth-of-type(odd) > * {
    background-color: #905858 !important;
    color: #fff !important;
}

/* Negativo em linha par */
.table-striped > tbody > tr.negativo:nth-of-type(even) > * {
    background-color: #703838 !important;
    color: #fff !important;
}


/* Formulários */
.form-control {
    background-color: var(--current-card-bg);
    color: var(--current-text-color);
    border: 1px solid var(--current-border-color);
}

.form-control:focus {
    background-color: var(--current-card-bg);
    color: var(--current-text-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(42, 157, 143, 0.25);
}

.form-control::placeholder {
    color: var(--placeholder-color);
}

.form-control.is-invalid {
    border-color: var(--error-color);
    background-color: var(--error-bg);
}

.form-label {
    color: var(--current-text-color);
}

/* Alertas e notificações */
.alert-success {
    background-color: var(--success-color);
    color: var(--text-color-light);
    border-color: var(--success-color);
}

.alert-danger {
    background-color: var(--error-color);
    color: var(--text-color-light);
    border-color: var(--error-color);
}

.alert-warning {
    background-color: var(--accent-color);
    color: var(--text-color-light);
    border-color: var(--accent-color);
}

.alert-info {
    background-color: var(--info-color);
    color: var(--text-color-light);
    border-color: var(--info-color);
}

.alert-light {
    background-color: var(--current-card-bg);
    border-color: var(--current-border-color);
    color: var(--current-text-color);
}

.bi {
    vertical-align: -0.125em;
}

/* Dark Mode Toggle Switch */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 48px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    background-color: #fff;
    bottom: 3px;
    content: "";
    height: 18px;
    left: 3px;
    position: absolute;
    transition: .4s;
    width: 18px;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* Estilos para o layout público (login, cadastro) */
body.public-layout-body {
    background-color: var(--current-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 450px;
    padding: 30px;
    background-color: var(--current-card-bg);
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    color: var(--current-text-color);
}

.auth-header h3 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
}

.auth-card .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(42, 157, 143, 0.25);
}

.auth-card .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-color-light);
}

.auth-card .btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.auth-card a {
    color: var(--primary-color);
}

.auth-card a:hover {
    color: var(--accent-color);
}

/* Cards de dashboard */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-success {
    background-color: var(--success-color) !important;
}

.bg-info {
    background-color: var(--info-color) !important;
}

.bg-warning {
    background-color: var(--accent-color) !important;
}

.bg-danger {
    background-color: var(--error-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-light {
    background-color: var(--secondary-color) !important;
}

h4.card-title.display-6 {
    color: var(--text-color-light);
}

/* Modais e diálogos */
.modal-content {
    background-color: var(--current-card-bg);
    color: var(--current-text-color);
    border-color: var(--current-border-color);
}

.modal-header {
    border-bottom-color: var(--current-border-color);
}

.modal-footer {
    border-top-color: var(--current-border-color);
}

/* Hero section e banners */
.hero-section {
    position: relative;
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    padding: 3rem 0;
}

.hero-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(38, 70, 83, 0.3);
}

.hero-section h1 {
    color: var(--text-color-light);
}

.hero-section .accent {
    color: var(--accent-color);
}

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Cards de produto/receita/ingrediente */
.product-card {
    background-color: var(--current-card-bg);
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.product-card .price {
    color: var(--accent-color);
    font-weight: 600;
}

.product-card .status {
    color: var(--accent-color);
    font-weight: 500;
}

.meutexto {
    color: var(--current-text-color) !important;
}

/* Estilo para as logos */
.logo-container {
  display: inline-block;
  height: 40px; /* Ajuste conforme o tamanho da sua logo */
}

.logo {
    max-height: 100%;
    width: auto;
}

/* No modo claro (padrão), mostrar apenas a logo clara */
.logo-light {
  display: block;
}

.logo-dark {
  display: none;
}

/* No modo escuro, mostrar apenas a logo escura */
body.dark-mode .logo-light {
  display: none;
}

body.dark-mode .logo-dark {
  display: block;
}


h1.hide-when-collapsed {
    float: left;
    display: block;
    max-width: 160px;
    margin: 0;
}

/* Esconder texto quando sidebar está recolhida no desktop */
@media (min-width: 769px) {
    #sidebar.collapsed .hide-when-collapsed {
        display: none;
    }
}




/* --- Ajustes Personalizados (Ocultar Coluna ID) --- */

/* Ocultar coluna ID permanentemente na tabela de Receitas */
/* A coluna ID é a primeira coluna visível em desktop */
#tabelaReceitas thead th:nth-child(1),
#tabelaReceitas tbody td:nth-child(1) {
    display: none !important;
}



/* Tentativa de ocultar coluna ID na tabela de Estoque */
/* !! ATENÇÃO: Verificar o ID/classe da tabela de estoque e a posição da coluna ID se não funcionar !! */
/* Assumindo id="tabelaEstoque" e ID como primeira coluna visível em desktop */
#tabelaEstoque thead th:nth-child(1),
#tabelaEstoque tbody td:nth-child(1) {
    display: none !important;
}

/* --- Fim Ajustes Personalizados --- */




/* Ocultar colunas específicas do Estoque em mobile */
@media (max-width: 767px) {
    /* Assumindo que Validade, Estoque Mínimo e Última Atualização são as colunas 4, 5 e 6 */
    /* Ajustar os índices :nth-child() se a ordem das colunas for diferente */
    #tabelaEstoque thead th:nth-child(4),
    #tabelaEstoque tbody td:nth-child(4),
    #tabelaEstoque thead th:nth-child(5),
    #tabelaEstoque tbody td:nth-child(5),
    #tabelaEstoque thead th:nth-child(6),
    #tabelaEstoque tbody td:nth-child(6) {
        display: none !important;
    }
}




/* Ajustar botões de ação do Estoque em mobile */
@media (max-width: 767px) {
    /* Seleciona a última célula (td) de cada linha no corpo da tabela de estoque */
    #tabelaEstoque tbody tr td:last-child {
        white-space: nowrap; /* Evita que os botões quebrem linha */
    }

    /* Seleciona os links (botões) dentro da última célula */
    #tabelaEstoque tbody tr td:last-child a.btn {
        padding: 0.25rem 0.5rem; /* Reduz o padding para caberem melhor */
        margin-right: 2px; /* Pequeno espaço entre botões */
    }

    /* Oculta o texto dentro dos botões, mantendo o ícone */
    /* Assumindo que o texto vem depois do ícone <i> */
    #tabelaEstoque tbody tr td:last-child a.btn span,
    #tabelaEstoque tbody tr td:last-child a.btn::after, /* Tenta pegar texto adicionado via JS/Framework */
    #tabelaEstoque tbody tr td:last-child a.btn > *:not(i) /* Oculta tudo exceto o <i> */
    {
        display: none !important; 
    }
    
    /* Garante que o ícone tenha algum espaço */
    #tabelaEstoque tbody tr td:last-child a.btn i {
        margin-right: 0 !important; /* Remove margem direita do ícone se houver */
        font-size: 1rem; /* Ajusta tamanho do ícone se necessário */
    }
}

input.form-control.fator-correcao-input {
    min-width: 79px;
}

/* Ocultar coluna "ID Ing." (1ª) em todas as telas */
  .estoquelista tr th:nth-child(1),
  .estoquelista tr td:nth-child(1) {
    display: none;
  }

  /* Ocultar colunas 5, 6, 7, 8 somente no mobile (até 768px) */
  @media (max-width: 768px) {
    .estoquelista tr th:nth-child(5),
    .estoquelista tr td:nth-child(5),  /* Custo Médio Unit. */
    .estoquelista tr th:nth-child(6),
    .estoquelista tr td:nth-child(6),  /* Validade Próxima */
    .estoquelista tr th:nth-child(7),
    .estoquelista tr td:nth-child(7),  /* Estoque Mínimo */
    .estoquelista tr th:nth-child(8),
    .estoquelista tr td:nth-child(8)   /* Última Atualização */
    {
      display: none;
    }
    .btnestoque {
    padding: 5px;
}
th.minimo {
    min-width: 106px;
}
  }
  
  
      .recipe-title-icon {
        font-size: 1.2rem;
        vertical-align: middle;
    }
    .nav-tabs .nav-link {
        color: var(--primary-color); 
    }
    .nav-tabs .nav-link.active {
        color: var(--secondary-color); 
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
    }
    .nav-tabs .nav-link:hover {
        border-color: var(--current-sidebar-link-hover-bg); 
        color: var(--accent-hover);
    }
    .info-block dt {
        font-weight: 500;
        color: var(--secondary-color); 
    }
    body.dark-mode .info-block dt {
        color: var(--text-color-light-dark); 
    }
    .info-block dd { color: var(--current-text-color); }
    .print-only { display: none; }
    .print-section-title { display: none; } /* Hidden by default, shown in print */

    @media print {
        .no-print { display: none !important; }
        .print-only { display: block !important; }
        .print-section-title { 
            display: block !important; 
            font-size: 1.2em; 
            font-weight: bold; 
            margin-top: 20px; 
            margin-bottom: 10px;
            border-top: 1px solid #ccc;
            padding-top: 10px;
        }
        .tab-content > .tab-pane {
            display: block !important; opacity: 1 !important; visibility: visible !important;
            border: none !important; 
        }
        .tab-content > .tab-pane .card {
            margin-bottom: 20px !important; border: none !important; box-shadow: none !important;
        }
         .tab-content > .tab-pane .card-header { display: none; } /* Hide card headers within tabs for print */

        .nav-tabs { display: none !important; }
        body { font-size: 10pt; margin: 0.5cm !important; }
        
        main, .container-fluid, .col-lg-12, .col-md-3, .col-md-9, .col-md-4, .col-md-5, .col-md-7, .col-lg-6 {
            width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
            padding: 0 !important; margin: 0 !important; float: none !important;
        }
        .row { display: block !important; }
        .row > [class*="col-"] { width: 100% !important; padding: 0 2px !important; }
         .row.mb-4 > .col-md-3, .row.mb-4 > .col-md-9 {
            display: block; width: 98% !important; margin-bottom: 10px;
        }
        img.recipe-img-detail { max-height: 150px !important; display: block; margin: 0 auto 10px auto; }
        .table-responsive { overflow: visible !important; }
        table { page-break-inside: auto; }
        tr { page-break-inside: avoid; page-break-after: auto; }
        thead { display: table-header-group; }
        tfoot { display: table-footer-group; }
        #layoutSidenav_nav,
        .d-flex.justify-content-between.border-bottom .btn-toolbar,
        .alert,
        footer { display: none !important; }
        .d-flex.justify-content-between.border-bottom h1.h2 { display: none !important;} /* Hide screen title for print */
    }
    


/* ================================================================== */
/* CSS PARA SIDEBAR MODERNA (VERSÃO FINAL REFINADA)                   */
/* ================================================================== */

/* --- Base da Sidebar --- */
#sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--current-sidebar-bg);
    color: var(--current-sidebar-text);
    transition: all 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 15px rgba(0,0,0,0.05);
    border-right: 1px solid var(--current-border-color);
}

#sidebar .sidebar-header {
    padding: 20px;
    background: var(--current-sidebar-header-bg);
    flex-shrink: 0;
    position: relative;
    border-bottom: 1px solid var(--current-border-color);
}

/* Container para todos os links, agora rolável */
#sidebar .sidebar-links-container {
    padding: 10px 0;
    overflow-y: auto; /* Permite a rolagem de toda a lista */
    flex-grow: 1;
}

#sidebar ul {
    padding: 0;
    margin: 0;
}

#sidebar ul.list-unstyled p {
    color: var(--secondary-color);
    padding: 15px 25px 5px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

body.dark-mode #sidebar ul.list-unstyled p {
    color: var(--primary-color);
}

/* Divisória sutil entre os itens */
#sidebar ul li {
    border-bottom: 1px solid var(--current-border-color);
}
#sidebar ul li:last-child {
    border-bottom: none;
}

/* Divisória mais forte para separar seções */
#sidebar ul li.sidebar-divider {
    height: 1px;
    margin: 10px 25px;
    background-color: var(--current-border-color);
    border-bottom: none; /* A divisória não tem borda própria */
}


#sidebar ul li a {
    padding: 15px 25px; /* Mais espaçamento vertical */
    font-size: 1.05em;
    display: flex;
    align-items: center;
    color: var(--current-sidebar-text);
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar ul li a:hover {
    background: var(--current-sidebar-link-hover-bg);
    color: var(--accent-color);
    text-decoration: none;
    border-left-color: var(--accent-color);
}

/* Novo estado ATIVO: fundo sutil, texto e ícone destacados */
#sidebar ul li.active > a,
#sidebar ul li.active > a:hover {
    background: var(--current-sidebar-link-hover-bg);
    color: var(--accent-color);
    border-left-color: var(--accent-color);
    font-weight: 600; /* Deixa o texto do link ativo em negrito */
}

#sidebar ul li.active > a i,
#sidebar ul li a:hover i {
    color: var(--accent-color); /* Cor de destaque para o ícone */
}

/* Ícones mais vibrantes por padrão */
#sidebar ul li a i {
    margin-right: 15px;
    color: var(--primary-color); /* Ícones com a cor primária da marca */
    min-width: 24px;
    text-align: center;
    font-size: 1.2rem;
    transition: color 0.2s ease;
}

/* Botão de Upgrade na Sidebar */
#sidebar .upgrade-cta a {
    text-align: center;
    display: block;
    border-radius: 8px;
    font-weight: 600;
    margin: 15px 25px;
    background: var(--primary-color);
    color: #fff;
    padding: 15px;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    border-left: 4px solid transparent; /* Para manter o alinhamento */
}
#sidebar .upgrade-cta a:hover {
    background-color: var(--accent-hover);
    border-left-color: transparent;
}
#sidebar .upgrade-cta i {
    font-size: 1.2rem;
    margin-right: 10px;
    color: #fff; /* Ícone sempre branco no botão */
}/* ================================================================== */
/* ESTILOS PARA A PÁGINA DE PERFIL MODERNA                            */
/* ================================================================== */

/* Cabeçalho do Perfil (Avatar e Nome) */
.profile-header {
    display: flex;
    align-items: center;
    background-color: var(--current-card-bg);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--current-border-color);
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    background-color: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.5rem;
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.profile-info h2 {
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--current-text-color);
}

.profile-info .text-muted {
    color: var(--current-text-color) !important;
    opacity: 0.7;
}

/* Estilo das Abas de Navegação */
.profile-tabs .nav-tabs {
    border-bottom: 1px solid var(--current-border-color);
}

.profile-tabs .nav-link {
    color: var(--current-text-color);
    opacity: 0.7;
    font-weight: 500;
    border: 1px solid transparent;
    border-bottom: none;
}

.profile-tabs .nav-link:hover {
    border-color: var(--current-border-color);
    isolation: isolate;
}

.profile-tabs .nav-link.active {
    color: var(--accent-color);
    background-color: var(--current-card-bg);
    border-color: var(--current-border-color);
    border-bottom-color: var(--current-card-bg); /* Faz a aba "conectar" com o conteúdo */
    opacity: 1;
}

.profile-tabs .tab-content {
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-border-color);
    border-top: none;
    padding: 2rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
/* ================================================================== */
/* ESTILOS PARA A PÁGINA DE DADOS IMPORTANTES/CUSTOS                  */
/* ================================================================== */
.card-title-icon {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-right: 0.5rem;
    vertical-align: -2px;
}

/* ================================================================== */
/* CORREÇÃO DE COR DE TEXTO PARA MODO ESCURO                          */
/* ================================================================== */

body.dark-mode .text-muted {
    color: var(--current-text-color) !important; /* Usa a cor de texto principal do tema escuro */
    opacity: 0.65; /* Aplica uma leve transparência para manter o efeito "muted" */
}
/* ================================================================== */
/* ESTILOS PARA A LISTAGEM DE RECEITAS (VERSÃO COMPACTA E CORRIGIDA)  */
/* ================================================================== */

.recipe-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid var(--current-border-color);
    background-color: var(--current-card-bg);
    display: flex;
    flex-direction: column;
}

.recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(38, 70, 83, 0.1);
}

.recipe-card-img-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3; /* Proporção mais comum e um pouco mais alta */
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-mode .recipe-card-img-wrapper {
    background-color: #2c3e50;
}

.recipe-card-img-wrapper .placeholder-icon {
    font-size: 3rem; /* Ícone do placeholder um pouco menor */
    color: var(--current-text-color);
    opacity: 0.2;
}

.recipe-card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-card .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem; /* Padding interno menor para um card mais compacto */
}

.recipe-card .card-title {
    font-weight: 600;
    font-size: 1.1rem; /* Fonte do título um pouco menor */
    color: var(--current-text-color);
    margin-bottom: 0.5rem;
}

.recipe-card .card-title a {
    color: inherit;
    text-decoration: none;
}

.recipe-card .card-title a:hover {
    color: var(--accent-color);
}

.recipe-card-info {
    font-size: 0.8rem; /* Fonte das informações menor */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--current-border-color);
    margin-bottom: 0.5rem;
}

.recipe-card-info .info-item {
    display: flex;
    align-items: center;
}

.recipe-card-info .info-item i {
    margin-right: 0.4rem;
    color: var(--primary-color);
}

.recipe-card-price {
    padding-top: 0.5rem;
    font-size: 0.85rem; /* Fonte dos preços menor */
}

.recipe-card-price strong {
    font-weight: 500;
    opacity: 0.8;
}

/* Ajusta o tamanho dos botões de ação para ficarem mais delicados */
.recipe-card .btn-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.recipe-card .btn-info {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
}
.recipe-card .btn-info:hover {
    background-color: #1a3540;
    border-color: #162d36;
}
/* ================================================================== */
/* ESTILOS PARA A LISTAGEM DE INGREDIENTES (VERSÃO FINAL ATRAENTE)    */
/* ================================================================== */

.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-border-color);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.table-toolbar .search-form {
    flex-grow: 1;
    min-width: 250px;
}

.table-toolbar .selection-actions {
    display: none; /* Começa escondido */
    align-items: center;
    gap: 0.5rem;
}

.modern-table {
    border-collapse: separate;
    border-spacing: 0 5px; /* Espaçamento vertical sutil entre as linhas */
    width: 100%;
}

.modern-table thead th {
    background: none !important;
    border: none !important;
    color: var(--current-text-color) !important;
    opacity: 0.7;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 1.25rem 0.5rem 1.25rem;
}

.modern-table tbody tr {
    background-color: var(--current-card-bg);
    transition: background-color 0.2s ease, transform 0.2s ease;
    border-radius: 0.5rem;
}

.modern-table tbody tr:hover {
    background-color: var(--current-sidebar-link-hover-bg);
    transform: scale(1.01); /* Leve efeito de zoom no hover */
}

.modern-table tbody td {
    padding: 1.25rem; /* Mais espaçamento interno */
    vertical-align: middle;
    border: none;
}

/* Arredonda as bordas da primeira e última célula da linha */
.modern-table tbody tr td:first-child { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
.modern-table tbody tr td:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }


/* Nome do ingrediente em destaque */
.ingredient-name2 {
    font-weight: 400;
    color: var(--current-text-color);
    font-size: 0.9rem;
    opacity: 0.9;
}
body.dark-mode .ingredient-name {
    color: #a7e0d9; /* Tom mais claro do verde para o modo escuro */
}


/* Badges de Categoria Coloridos */
.item-category-badge {
    font-size: 0.75rem;
    padding: 0.3em 0.8em;
    border-radius: 20px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

.badge-cat-primary { background-color: rgba(42, 157, 143, 0.15); color: #1e6b62; }
.badge-cat-secondary { background-color: rgba(38, 70, 83, 0.15); color: #17303a; }
.badge-cat-accent { background-color: rgba(255, 107, 53, 0.15); color: #c54820; }

body.dark-mode .badge-cat-primary { background-color: rgba(42, 157, 143, 0.25); color: #78c9c0; }
body.dark-mode .badge-cat-secondary { background-color: rgba(38, 70, 83, 0.3); color: #a4bbc4; }
body.dark-mode .badge-cat-accent { background-color: rgba(255, 107, 53, 0.25); color: #ff8a63; }
/* ================================================================== */
/* ESTILOS PARA A PÁGINA DE DETALHES DE INGREDIENTE                   */
/* ================================================================== */

/* --- Cabeçalho da Página de Detalhes --- */
.details-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--current-card-bg);
    border-radius: 0.5rem;
    border: 1px solid var(--current-border-color);
    margin-bottom: 2rem;
}

.details-page-header .header-title-section {
    flex-grow: 1;
}

.details-page-header .header-title {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0.25rem;
    color: var(--current-text-color);
}

.details-page-header .header-actions {
    flex-shrink: 0;
}

/* --- Abas de Navegação --- */
.details-tabs .nav-tabs {
    border-bottom: 1px solid var(--current-border-color);
    margin-bottom: -1px; /* Faz a aba conectar com o conteúdo */
}

.details-tabs .nav-link {
    color: var(--current-text-color);
    opacity: 0.7;
    font-weight: 500;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 0.75rem 1.25rem;
}

.details-tabs .nav-link:hover {
    border-color: var(--current-border-color);
    isolation: isolate;
}

.details-tabs .nav-link.active {
    color: var(--accent-color);
    background-color: var(--current-card-bg);
    border-color: var(--current-border-color);
    border-bottom-color: var(--current-card-bg);
    opacity: 1;
}

.details-tabs .tab-content {
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-border-color);
    padding: 2rem;
    border-radius: 0.5rem;
    border-top-left-radius: 0;
}

/* --- Lista de Nutrientes --- */
.nutrient-group-title {
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.nutrient-group-title:first-child {
    margin-top: 0;
}

.nutrient-list dt {
    font-weight: 500;
    color: var(--current-text-color);
    opacity: 0.9;
}
.nutrient-list dd {
    color: var(--current-text-color);
}
/* ================================================================== */
/* ESTILOS PARA A TELA DE ESTOQUE (VERSÃO FINAL RESPONSIVA)           */
/* ================================================================== */

/* --- Container da Lista --- */
.responsive-stock-list {
    width: 100%;
}

/* --- Cabeçalho (Visível apenas em Desktop) --- */
.responsive-stock-header {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    font-weight: 600;
}

/* --- Estilo do Item (Card no Mobile) --- */
.responsive-stock-item {
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-border-color);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.2s ease;
}

.responsive-stock-item:hover {
    box-shadow: 0 4px 20px rgba(38, 70, 83, 0.1);
}

.responsive-stock-item > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px dashed var(--current-border-color);
}
.responsive-stock-item > div:last-child {
    border-bottom: none;
}

/* Adiciona os títulos das colunas no mobile */
.responsive-stock-item > div::before {
    content: attr(data-label);
    font-weight: 600;
    opacity: 0.8;
}

.stock-item-name h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
.stock-item-name .text-muted {
    font-size: 0.85rem;
}

/* --- Layout de Tabela para Desktop (a partir de 992px) --- */
@media (min-width: 992px) {
    .responsive-stock-list {
        display: table;
        border-collapse: separate;
        border-spacing: 0 0.5rem;
    }
    .responsive-stock-header { display: table-header-group; }
    .responsive-stock-header .responsive-stock-item {
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }
    .responsive-stock-header .responsive-stock-item > div { display: table-cell; padding: 0.5rem 1rem; }
    .responsive-stock-item { display: table-row; }
    .responsive-stock-item:hover { transform: scale(1.01); }
    .responsive-stock-item > div {
        display: table-cell;
        vertical-align: middle;
        padding: 1.25rem 1rem;
        border: none;
    }
    .responsive-stock-item > div::before { display: none; } /* Esconde os labels no desktop */
    .responsive-stock-item > div:first-child { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
    .responsive-stock-item > div:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
}

/* Indicadores de Status (sem alteração na lógica, apenas na classe que será removida do CSS) */
.status-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 20px; font-size: 0.8rem; }
.status-ok { background-color: rgba(42, 157, 143, 0.15); color: #1e6b62; }
.status-low { background-color: rgba(211, 47, 47, 0.15); color: #a12727; }
body.dark-mode .status-ok { color: #78c9c0; }
body.dark-mode .status-low { color: #f08080; }
/* ================================================================== */
/* ESTILOS MODERNOS PARA PÁGINAS DE LOGIN E CADASTRO                  */
/* ================================================================== */

/* Container principal que ocupa toda a tela */
.auth-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
    font-family: var(--font-family-base);
}

/* Coluna da Esquerda (Branding) */
.auth-brand-col {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3rem;
    width: 50%;
    flex-shrink: 0;
}

.auth-brand-col .brand-logo {
    max-width: 220px;
    margin-bottom: 1.5rem;
}

.auth-brand-col h1 {
    font-weight: 700;
    font-size: 2.2rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.auth-brand-col .brand-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 400px;
}

/* Coluna da Direita (Formulário) */
.auth-form-col {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background-color: var(--current-body-bg);
    flex-grow: 1;
    overflow-y: auto;
    width: 50%;
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
}

.auth-form-container h2 {
    font-weight: 600;
    color: var(--current-text-color);
}

/* Esconde a coluna da marca em telas menores para focar no formulário */
@media (max-width: 991.98px) {
    .auth-brand-col {
        display: none;
    }
    .auth-form-col {
        width: 100%;
    }
}
/* ================================================================== */
/* ESTILOS VISUAIS PARA DASHBOARD KODIX (VERSÃO FINAL)                */
/* ================================================================== */

/* CORREÇÃO: Impede a rolagem horizontal em telas pequenas */
body {
    overflow-x: hidden;
}

/* --- Header da Dashboard --- */
.dashboard-header {
    padding: 1rem;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius);
    color: white;
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(var(--primary-color) 1px, transparent 1px);
    background-size: 15px 15px;
}
.dashboard-header h1 { font-weight: 700; font-size: 2.5rem; }
.dashboard-header p { font-size: 1.1rem; opacity: 0.8; }

/* --- Barra de Ações Rápidas --- */
.quick-actions-bar {
    display: flex; flex-wrap: wrap; gap: 1rem;
    margin-top: -2.25rem;
    margin-left: 1.5rem;
    margin-bottom: 2.5rem;
    position: relative; z-index: 2;
}
.quick-actions-bar .btn {
    padding: 0.8rem 1.5rem; font-weight: 600;
    border-radius: var(--border-radius);
    display: flex; align-items: center; gap: 0.75rem;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: none;
    background-image: linear-gradient(45deg, var(--primary-color), #2dd5c1);
    color: white;
}
.quick-actions-bar .btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* --- KPI Cards (Mantido como aprovado) --- */
.stat-card-rich {
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem; height: 100%;
    display: flex; flex-direction: column;
    transition: all 0.3s ease; position: relative; overflow: hidden;
}
.stat-card-rich:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}
body.dark-mode .stat-card-rich:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.stat-card-rich .stat-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.stat-card-rich .stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff; flex-shrink: 0;
}
.stat-card-rich.stat-primary .stat-icon { background-color: var(--primary-color); }
.stat-card-rich.stat-secondary .stat-icon { background-color: var(--secondary-color); }
.stat-card-rich.stat-accent .stat-icon { background-color: var(--accent-color); }
.stat-card-rich .stat-title { font-weight: 500; font-size: 1rem; color: var(--current-text-color); }
.stat-card-rich .stat-body { flex-grow: 1; display: flex; align-items: flex-end; justify-content: space-between; }
.stat-card-rich .stat-value { font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--current-text-color); }
.stat-card-rich .stat-chart { width: 80px; height: 40px; opacity: 0.7; }
.stat-card-rich .stat-chart-path { stroke-width: 3; stroke-linecap: round; }
.stat-card-rich.stat-primary .stat-chart-path { stroke: var(--primary-color); }
.stat-card-rich.stat-secondary .stat-chart-path { stroke: var(--secondary-color); }
.stat-card-rich.stat-accent .stat-chart-path { stroke: var(--accent-color); }
body.dark-mode .stat-card-rich.stat-secondary .stat-chart-path { stroke: #a4bbc4; }


/* --- Painéis de Lista (Novo Design) --- */
.info-panel {
    background: var(--current-card-bg);
    border: 1px solid var(--current-border-color);
    border-radius: var(--border-radius);
    height: 100%;
    display: flex; flex-direction: column;
}
.info-panel .panel-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--current-border-color);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--current-text-color);
}
.info-panel .panel-header i { color: var(--primary-color); margin-right: 0.75rem; }
.info-panel.panel-alert .panel-header { color: var(--accent-color); }
body.dark-mode .info-panel.panel-alert .panel-header { color: var(--accent-hover); }
.info-panel.panel-alert .panel-header i { color: var(--accent-color); }

.info-panel .panel-body { padding: 0.75rem; flex-grow: 1; }
.info-panel .info-list-item {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.75rem; border-radius: 0.375rem;
    transition: background-color 0.2s ease;
    color: var(--current-text-color);
}
.info-panel .info-list-item:hover { background-color: rgba(0,0,0,0.025); }
body.dark-mode .info-panel .info-list-item:hover { background-color: rgba(255,255,255,0.04); }

.info-panel .item-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.1rem;
}
.info-panel .item-icon.icon-rank { background-color: rgba(255, 193, 7, 0.15); color: #e6a700; font-weight: 700; }
.info-panel .item-icon.icon-alert { background-color: rgba(231, 111, 81, 0.1); color: var(--accent-color); }
.info-panel .item-icon.icon-activity { background-color: rgba(38, 70, 83, 0.1); color: var(--secondary-color); }
body.dark-mode .info-panel .item-icon.icon-activity { color: #a4bbc4; }

.info-panel .item-content { flex-grow: 1; }
.info-panel .item-content .title { font-weight: 500; color: var(--current-text-color); line-height: 1.2; }
.info-panel .item-content .title a { color: inherit; text-decoration: none; }
.info-panel .item-content .title a:hover { color: var(--primary-color); }
body.dark-mode .info-panel .item-content .title a:hover { color: var(--accent-hover); }
.info-panel .item-content .subtitle { font-size: 0.85rem; color: var(--light-text-muted); }
body.dark-mode .info-panel .item-content .subtitle { color: var(--dark-text-muted); }

/* NOVO: Barra de progresso para margem de lucro */
.profit-bar-container {
    width: 100px; /* Largura fixa para a barra */
    height: 8px;
    background-color: rgba(0,0,0,0.07);
    border-radius: 8px;
    overflow: hidden;
    margin-left: auto; /* Empurra para a direita */
}
body.dark-mode .profit-bar-container { background-color: rgba(255,255,255,0.1); }
.profit-bar {
    height: 100%;
    background-image: linear-gradient(45deg, var(--primary-color), #2dd5c1);
    border-radius: 8px;
}
.info-panel .item-action { font-weight: 600; min-width: 50px; text-align: right; }

.info-panel .panel-footer {
    padding: 0.75rem;
    margin-top: auto; /* Empurra o footer para o final do card */
    border-top: 1px solid var(--current-border-color);
}
.info-panel .panel-footer .btn-gerenciar {
    background-image: linear-gradient(45deg, var(--accent-color), #f4a261);
    border: none; color: white; font-weight: 600;
}
/* ================================================================== */
/* ESTILOS PARA O BANNER DE UPGRADE (CTA PLANO PRO)                   */
/* ================================================================== */

.upgrade-cta-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    background-color: var(--secondary-color);
    background-image: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
    color: white;
    box-shadow: 0 8px 25px -5px rgba(42, 157, 143, 0.5);
}

.upgrade-cta-banner .cta-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.upgrade-cta-banner .cta-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.upgrade-cta-banner .cta-text h5 {
    font-weight: 700;
    margin-bottom: 0.1rem;
    font-size: 1.2rem;
}

.upgrade-cta-banner .cta-text p {
    margin-bottom: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.upgrade-cta-banner .cta-button {
    flex-shrink: 0;
}


.upgrade-cta-banner .btn-upgrade {
    background-color: white;
    color: var(--primary-color);
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: all 0.2s ease-in-out;
}

.upgrade-cta-banner .btn-upgrade:hover {
    transform: scale(1.05);
    color: var(--secondary-color);
}
/* ================================================================== */
/* AJUSTES FINAIS DE RESPONSIVIDADE E ALINHAMENTO (V6.1)              */
/* ================================================================== */

/* --- Ajuste para o Banner de Upgrade (CTA) --- */
@media (max-width: 768px) {
    .upgrade-cta-banner {
        flex-direction: column; /* Empilha os itens verticalmente no mobile */
        text-align: center;
        gap: 1.5rem; /* Aumenta o espaçamento vertical */
    }
    .upgrade-cta-banner .cta-content {
        flex-direction: column;
        gap: 0.5rem;
    }
    .upgrade-cta-banner .cta-button {
        width: 100%;
        text-align: center;
    }
    .cta-button {
    margin: 0 auto;
}
}

/* --- Ajuste para Header e Ações Rápidas no Mobile --- */
@media (max-width: 576px) {
    .dashboard-header {
        padding: 1.5rem;
        text-align: center;
    }
    .dashboard-header h1 {
        font-size: 2rem;
    }
    .quick-actions-bar {
        margin-left: 0;
        margin-top: 1.5rem; /* Remove o margin-top negativo */
        justify-content: center; /* Centraliza os botões */
    }
    .cta-button {
    margin: 0 auto;
}
}

/* ================================================================== */
/* ESTILOS PARA O BOTÃO DE UPGRADE NA SIDEBAR (VERSÃO FINAL)          */
/* ================================================================== */

#sidebar .sidebar-cta {
    /* CORREÇÃO: Removemos o padding daqui para o botão poder ocupar todo o espaço */
    padding: 1rem 0.75rem; 
    margin-top: 1.5rem;
    border-top: 1px solid var(--current-border-color);
}

#sidebar .btn-upgrade-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* A largura 100% agora funciona, pois o pai não tem mais padding horizontal */
    padding: 0.75rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    color: white;
    background-image: linear-gradient(45deg, var(--accent-color), #f4a261);
    box-shadow: 0 4px 15px -5px rgba(231, 111, 81, 0.6);
    transition: all 0.2s ease-in-out;
    border: none;
    text-align: left;
    text-decoration: none;
}

#sidebar .btn-upgrade-sidebar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -5px rgba(231, 111, 81, 0.8);
    background-image: linear-gradient(45deg, var(--accent-color), var(--accent-hover));
    color: white;
    text-decoration: none;
}

#sidebar .btn-upgrade-sidebar i {
    font-size: 1.5rem;
    color: white !important;
    margin-right: 0.75rem;
}

.cta-button-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.cta-button-text .main-text {
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
}
.cta-button-text .sub-text {
    font-size: 0.75em;
    opacity: 0.8;
}

/* Estilo para a sidebar recolhida */
#sidebar.collapsed .sidebar-cta span,
#sidebar.collapsed .cta-button-text {
    display: none;
}
#sidebar.collapsed .btn-upgrade-sidebar i {
    margin-right: 0;
}
#sidebar.collapsed .sidebar-cta {
    padding: 0.5rem;
}
li.nav-item {
    max-width: 100%;
}
/* --- Estilo do Overlay e Links PRO --- */

/* CORREÇÃO: Deixando o overlay mais escuro */
#pro-feature-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); /* Mais escuro */
    z-index: 1045;
}

/* Garante que o link PRO pareça "especial" mas clicável */
.nav-link.disabled-link {
    cursor: pointer;
    opacity: 0.7; /* Um pouco apagado para indicar que é diferente */
    position: relative;
}

.nav-link.disabled-link:hover {
    opacity: 1; /* Opacidade total no hover para indicar que é clicável */
    background: var(--current-sidebar-link-hover-bg); /* Mantém o efeito de hover */
    color: var(--accent-color);
}

.nav-link .badge {
    font-size: 0.65em;
    padding: 0.3em 0.6em;
    font-weight: 700;
}

/* Ajusta o z-index do modal para garantir que ele fique sobre o nosso overlay */
.modal-backdrop {
    z-index: 1040;
}
.modal {
    z-index: 1050;
}

/* ================================================================== */
/* ESTILOS PARA LISTA RESPONSIVA DE CARDÁPIOS (NOVO)                  */
/* ================================================================== */

.cardapio-list-header {
    display: none; /* Escondido por padrão, visível só no desktop */
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    font-weight: 600;
    padding: 0 1rem 0.5rem 1rem;
}

.cardapio-list-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-border-color);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}
.cardapio-list-item:last-child {
    margin-bottom: 0;
}

.cardapio-list-item > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cardapio-list-item > div::before {
    content: attr(data-label);
    font-weight: 600;
    opacity: 0.8;
}

/* Layout de tabela para desktop */
@media (min-width: 768px) {
    .cardapio-list-header {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 1rem;
        align-items: center;
    }
    .cardapio-list-header .acoes { text-align: right; }

    .cardapio-list-item {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 1rem;
        align-items: center;
        flex-direction: row;
        padding: 0.75rem 1rem;
    }
    .cardapio-list-item > div::before {
        display: none;
    }
    .cardapio-list-item .acoes {
        justify-content: flex-end;
    }
}

/* ================================================================== */
/* BOTÃO DE UPGRADE NA MENSAGEM DE ALERTA (NOVO)                      */
/* ================================================================== */
.btn-upgrade-cta {
    background-color: #fff;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}
.btn-upgrade-cta:hover {
    background-color: var(--accent-color);
    color: #fff;
}

/* Ajuste do botão de upgrade para o modo escuro */
body.dark-mode .btn-upgrade-cta {
    background-color: #fff;
    color: var(--secondary-color); /* Texto escuro para contraste com fundo branco */
    border-color: #fff;
}
body.dark-mode .btn-upgrade-cta:hover {
    background-color: #f0f0f0;
    border-color: #f0f0f0;
}

/* ================================================================== */
/* COMPONENTE DE LISTA RESPONSIVA GENÉRICO (NOVO)                     */
/* ================================================================== */

/* --- Cabeçalho (escondido no mobile, visível no desktop) --- */
.responsive-list-header {
    display: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    font-weight: 600;
    padding: 0 1rem 0.5rem 1rem;
    border-bottom: 2px solid var(--current-border-color);
    margin-bottom: 0.5rem;
}

/* --- Estilo de Card para cada item no mobile --- */
.responsive-list-item {
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.responsive-list-item > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--current-border-color);
}
.responsive-list-item > div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* --- Adiciona os 'labels' (ex: "Nome:") no mobile --- */
.responsive-list-item > div::before {
    content: attr(data-label);
    font-weight: 600;
    opacity: 0.8;
}
.responsive-list-item > div .badge, .responsive-list-item > div .btn-group {
    margin-left: auto; /* Garante que badges e botões fiquem à direita */
}


/* --- Media Query para Desktop (a partir de 992px) --- */
@media (min-width: 992px) {
    .responsive-list-header {
        display: grid;
        /* Defina as colunas aqui. 5 colunas para esta tabela */
        grid-template-columns: 3fr 1.5fr 1fr 1fr 1.5fr;
        gap: 1rem;
        align-items: center;
    }

    .responsive-list-item {
        display: grid;
        grid-template-columns: 3fr 1.5fr 1fr 1fr 1.5fr;
        gap: 1rem;
        align-items: center;
        flex-direction: row; /* Volta para o layout de linha */
        margin-bottom: 0;
        border: none;
        border-top: 1px solid var(--current-border-color);
        border-radius: 0;
        padding: 0.75rem 1rem;
        transition: background-color 0.2s ease;
    }
    .responsive-list-item:hover {
        background-color: var(--table-hover);
    }
    .responsive-list-item:first-of-type {
        border-top: none;
    }

    .responsive-list-item > div {
        display: block; /* Reverte para o comportamento de célula */
        padding: 0;
        border: none;
    }
    
    .responsive-list-item > div::before {
        display: none; /* Esconde os labels no desktop */
    }

    /* Alinha o conteúdo das colunas no desktop */
    .responsive-list .col-valor,
    .responsive-list .col-acoes {
        text-align: right;
    }
}
/* ================================================================== */
/* CORREÇÃO PARA OVERFLOW HORIZONTAL (ROLAGEM LATERAL)               */
/* ================================================================== */

/*
  Esta regra é a principal correção. Ela diz ao container `.wrapper`, 
  que envolve a sidebar e o conteúdo principal, para esconder
  qualquer conteúdo que "vaze" para os lados, eliminando a
  barra de rolagem horizontal da página inteira.
*/
.wrapper {
    position: relative;
    overflow-x: hidden;
}

/* Este é um ajuste preventivo para a barra de ações rápidas na dashboard,
  removendo a margem lateral em telas pequenas que poderia contribuir 
  para o problema.
*/
@media (max-width: 576px) {
    .quick-actions-bar {
        margin-left: 0;
        justify-content: center;
    }
}


/* ================================================================== */
/* CSS FINAL PARA NAVEGAÇÃO E SIDEBAR v3.1 (Com Correções)            */
/* ================================================================== */

/* --- Layout Principal com Espaço para Barra Inferior --- */
body {
    padding-bottom: 70px;
}
@media (min-width: 769px) {
    body {
        padding-bottom: 0;
    }
}

/* --- Container Principal --- */
.wrapper {
    position: relative;
    overflow-x: hidden;
}

/* --- Barra de Navegação Inferior (Exclusiva para Mobile) --- */
.mobile-bottom-nav {
    display: flex;
    align-items: center; /* Alinha os itens verticalmente */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background: var(--current-sidebar-bg);
    border-top: 1px solid var(--current-border-color);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none;
    }
}

/* --- Itens da Barra Inferior (Dashboard, Receitas, etc.) --- */
.mobile-bottom-nav .nav-item {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--current-sidebar-text);
    opacity: 0.7;
    font-size: 0.75rem;
    padding: 5px 0;
    transition: all 0.2s ease;
    border: none;
    background: none;
}
.mobile-bottom-nav .nav-item i {
    font-size: 1.5rem;
    margin-bottom: 2px;
}
.mobile-bottom-nav .nav-item.active,
.mobile-bottom-nav .nav-item:hover {
    color: var(--accent-color);
    opacity: 1;
}

/* --- Botão de Toggle do Menu na Barra Inferior (CORRIGIDO) --- */
.mobile-bottom-nav button#mobileSidebarToggle {
    width: 50px;
    height: 50px;
    border-radius: 0.75rem; /* Quadrado com cantos arredondados */
    background-image: linear-gradient(45deg, var(--accent-color), #f4a261);
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transform: none; /* Alinha o botão DENTRO da barra */
    opacity: 1;
    margin: 0 0.5rem; /* Adiciona um pequeno espaçamento nas laterais */
    flex-shrink: 0; /* Impede que o botão seja espremido */
}
.mobile-bottom-nav button#mobileSidebarToggle i {
    font-size: 1.8rem;
    margin: 0;
}


/* --- Ajustes Gerais da Sidebar --- */
#sidebar {
    display: flex;
    flex-direction: column;
}
.sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
}
.sidebar-footer {
    flex-shrink: 0;
    padding: 1rem;
    border-top: 1px solid var(--current-border-color);
}
.sidebar-footer .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
}

/* --- Seletor de Tema com Ícones na Sidebar (CORRIGIDO) --- */
.sidebar-footer .theme-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background-color: var(--current-sidebar-link-hover-bg);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}
.sidebar-footer .theme-icons {
    color: var(--current-text-color);
    opacity: 0.6;
    font-size: 1.2rem;
}

/* --- Toggle Superior da Sidebar (Desktop) --- */
#sidebarToggle {
    background: var(--accent-color);
    border: none;
    color: var(--text-color-light);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}
#sidebarToggle:hover {
    background-color: var(--accent-hover);
}

/* Oculta o toggle superior no mobile */
@media (max-width: 768px) {
    #sidebarToggle {
        display: none !important;
    }
}

/* --- Sidebar Recolhida (Desktop) --- */
#sidebar.collapsed .sidebar-links span,
#sidebar.collapsed .sidebar-footer span,
#sidebar.collapsed .sidebar-footer .theme-icons,
#sidebar.collapsed .logo-container,
#sidebar.collapsed .sidebar-footer hr {
    display: none;
}
#sidebar.collapsed .sidebar-header {
    justify-content: center; /* Centraliza o botão de toggle */
}


/* ================================================================== */
/* CSS PARA O MÓDULO DE TAREFAS (v7 - UI Fiel à Referência)           */
/* ================================================================== */

:root {
    /* Cores de Status baseadas na referência */
    --task-status-concluido: #00c875;
    --task-status-em-andamento: #fdab3d;
    --task-status-parado: #e2445c;
    --task-status-nao-iniciado: #33d391;
    --task-status-pendente: #808080; /* Usando a mesma cor de Não iniciado */
    
    /* Cores de Prioridade baseadas na referência */
    --task-priority-alta: #784bd1;
    --task-priority-media: #579bfc;
    --task-priority-baixa: #57cd92;
}

/* --- Estilos Gerais do Módulo --- */
.task-title-link { color: var(--current-text-color); text-decoration: none; font-weight: 500; cursor: pointer; }
.task-title-link:hover { color: var(--accent-color); }
.btn-ghost { background: transparent; border: none; padding: 0.2rem 0.5rem; color: var(--current-text-color); opacity: 0.6; border-radius: 4px; }
.btn-ghost:hover { opacity: 1; background-color: var(--current-sidebar-link-hover-bg); }

/* --- Subtarefas --- */
.subtarefa-item.concluida input[type="text"] { text-decoration: line-through; color: var(--bs-secondary-color); }
.subtask-list { font-size: 0.85rem; }
.subtask-list .form-check-label { opacity: 0.9; }
.subtask-list .subtask-done { text-decoration: line-through; opacity: 0.6; }

/* --- View Quadro (Lista) --- */
.task-group-table {
    border: 1px solid var(--current-border-color);
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: var(--current-card-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.task-group-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1.25rem;
    background-color: color-mix(in srgb, var(--primary-color) 4%, var(--current-card-bg));
    border-bottom: 1px solid var(--current-border-color);
}
body.dark-mode .task-group-header { background-color: color-mix(in srgb, var(--primary-color) 10%, var(--current-card-bg)); }
.modern-table-quadro { border-collapse: collapse; width: 100%; }
.modern-table-quadro thead th {
    background-color: var(--current-card-bg);
    border-bottom: 1px solid var(--current-border-color) !important;
    padding: 0.75rem 1.25rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--current-text-color);
    opacity: 0.7;
    font-weight: 600;
}
.modern-table-quadro tbody tr { transition: background-color 0.2s ease; }
.modern-table-quadro tbody tr:hover { background-color: var(--table-hover) !important; }
.modern-table-quadro td { padding: 0.75rem 1.25rem; vertical-align: middle; border-top: 1px solid var(--current-border-color); }
.modern-table-quadro td:first-child { border-left: 5px solid transparent; } /* Borda de prioridade */
.modern-table-quadro tr[data-priority="Alta"] td:first-child { border-left-color: var(--task-priority-alta); }
.modern-table-quadro tr[data-priority="Média"] td:first-child { border-left-color: var(--task-priority-media); }
.modern-table-quadro tr[data-priority="Baixa"] td:first-child { border-left-color: var(--task-priority-baixa); }

/* --- Cores de Status e Prioridade (Layout Monday.com) --- */
.status-pill { padding: 0.5em 0; width: 120px; border-radius: 4px; font-weight: 500; color: #fff; text-align: center; display: inline-block; }
.status-Pendente { background-color: var(--task-status-pendente); }
.status-Em-andamento { background-color: var(--task-status-em-andamento); }
.status-Parado { background-color: var(--task-status-parado); }
.status-Concluído { background-color: var(--task-status-concluido); }

.priority-tag { font-weight: 500; padding: 0.5em 0; width: 100px; border-radius: 4px; color: #fff; text-align: center; display: inline-block; }
.priority-Alta { background-color: var(--task-priority-alta); }
.priority-Média, .priority-Media { background-color: var(--task-priority-media); }
.priority-Baixa { background-color: var(--task-priority-baixa); }

/* --- Kanban --- */
.kanban-board-wrapper { width: 100%; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.kanban-board { display: flex; gap: 1.5rem; }
.kanban-column {
    background-color: var(--current-body-bg);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    width: 350px;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.kanban-column-header { padding: 0.75rem 1rem; font-weight: 700; font-size: 1rem; color: #fff !important; border-radius: 10px 10px 0 0; }
.kanban-column[data-status="Concluído"] .kanban-column-header { background-color: var(--task-status-concluido); }
.kanban-column[data-status="Em andamento"] .kanban-column-header { background-color: var(--task-status-em-andamento); }
.kanban-column[data-status="Parado"] .kanban-column-header { background-color: var(--task-status-parado); }
.kanban-column[data-status="Pendente"] .kanban-column-header { background-color: var(--task-status-pendente); }

.kanban-column-body { padding: 1rem; background-color: #e8e8e8; border-radius: 0 0 10px 10px; min-height: 150px; flex-grow: 1; }
body.dark-mode .kanban-column-body { background-color: #1A202C; }
.kanban-column-body.sortable-ghost .kanban-card { opacity: 0.5; }
.kanban-card { background: var(--current-card-bg); border: 1px solid var(--current-border-color); border-radius: 8px; margin-bottom: 1rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 1rem; transition: all 0.2s ease; }
.kanban-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.kanban-card:active { cursor: grabbing; transform: scale(0.98); }
.add-item-link-kanban { padding: 0.75rem; text-align: left; cursor: pointer; color: var(--current-text-color); opacity: 0.7; display: block; border-radius: 8px; margin: 0.5rem 1rem 1rem; text-decoration: none;     background: #f1c903;}
.add-item-link-kanban:hover { background-color: var(--current-sidebar-link-hover-bg); }
.card-meta { font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; opacity: 0.9; margin-top: 1rem; }
.meta-tag { background-color: color-mix(in srgb, var(--bs-secondary) 15%, transparent); padding: 0.2rem 0.6rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.3rem; }
body.dark-mode .meta-tag { background-color: color-mix(in srgb, var(--bs-secondary) 30%, transparent); }

/* --- Layout Responsivo --- */
@media (max-width: 991.98px) {
    /* Kanban Mobile: Scroll horizontal já está definido */
    
    /* Quadro (Lista) Mobile: Transforma em cards */
    .modern-table-quadro thead { display: none; }
    .modern-table-quadro tbody, .modern-table-quadro tr, .modern-table-quadro td { display: block; width: 100%; }
    .modern-table-quadro tr {
        margin-bottom: 1rem;
        border: 1px solid var(--current-border-color);
        border-radius: 0.5rem;
        padding: 0.5rem;
        border-left: 5px solid; /* Mantém a borda de prioridade no mobile */
    }
    .modern-table-quadro td {
        display: flex; justify-content: space-between; align-items: center;
        text-align: right !important; border: none; border-bottom: 1px dashed var(--current-border-color);
        padding: 0.75rem 0.5rem;
    }
    .modern-table-quadro td:last-child { border-bottom: none; }
    .modern-table-quadro td::before {
        content: attr(data-label);
        font-weight: 600; text-align: left; margin-right: 1rem;
        opacity: 0.8;
    }
    .modern-table-quadro .task-title-link { font-size: 1.1rem; }
    .modern-table-quadro td.text-center { text-align: right !important; }
    .modern-table-quadro td:first-child { border-left: none; }
}
/* --- CORREÇÕES FINAIS DE UI --- */

/* Correção para o input da subtarefa no modo escuro */
body.dark-mode #tarefaModal .subtarefa-item input.form-control {
    background-color: #2c3e50 !important; /* Um tom de cinza escuro para contraste */
    color: #f8f9fa !important; /* Texto branco/claro */
    border-color: var(--border-color-dark) !important;
}

/* Ajuste no botão de remover subtarefa no modo escuro */
body.dark-mode #tarefaModal .subtarefa-item .remove-subtarefa {
    border-color: var(--border-color-dark) !important;
    color: var(--text-color-light-dark) !important;
}
body.dark-mode #tarefaModal .subtarefa-item .remove-subtarefa:hover {
    background-color: var(--error-color) !important;
    border-color: var(--error-color) !important;
    color: #fff !important;
}
/* ================================================================== */
/* ESTILOS MODERNOS PARA ANÁLISE DE CUSTOS (RECEITAS)                */
/* ================================================================== */

.cost-analysis-card {
    background-color: var(--current-card-bg);
    border: 1px solid var(--current-border-color);
    border-radius: 0.75rem; /* Cantos mais arredondados */
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    height: 100%; /* Garante que todos os cards tenham a mesma altura */
    transition: all 0.2s ease-in-out;
}

.cost-analysis-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.cost-analysis-card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--current-border-color);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cost-analysis-card .card-header .bi {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.cost-analysis-card .card-header h6 {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--current-text-color);
}

.cost-analysis-card .list-group-item {
    background-color: transparent;
    border-left: none;
    border-right: none;
    border-top-color: var(--current-border-color);
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
    color: var(--current-text-color);
    opacity: 0.9;
}
.cost-analysis-card .list-group-item:first-child {
    border-top: none;
}
.cost-analysis-card .list-group-item .fw-bold {
    font-weight: 600 !important;
}

/* Destaque para o resultado principal de cada card */
.cost-analysis-card .card-footer {
    background-color: var(--secondary-color);
    color: #fff;
    padding: 1.25rem;
    text-align: center;
    margin-top: auto; /* Empurra o footer para o final do card */
    border-top: none;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.cost-analysis-card .card-footer .footer-title {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cost-analysis-card .card-footer .footer-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Card de Lucratividade com estilo diferente no corpo */
.profit-analysis-card .card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-grow: 1;
}

.profit-analysis-card .profit-block {
    text-align: center;
    padding: 1rem;
}

.profit-analysis-card .profit-block .profit-label {
    font-size: 0.85rem;
    color: var(--current-text-color);
    opacity: 0.7;
}

.profit-analysis-card .profit-block .profit-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--success-color);
    line-height: 1.2;
}

.profit-analysis-card .profit-block .profit-percentage {
     font-size: 2.25rem;
}

/* Ajustes para o Tooltip */
.tooltip-trigger {
    cursor: help;
    border-bottom: 1px dotted var(--secondary-color);
    font-size: 0.8em;
    color: var(--secondary-color);
    opacity: 0.8;
    white-space: nowrap;
}
body.dark-mode .tooltip-trigger {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}

/* ================================================================== */
/* CSS FINAL E ESPECÍFICO PARA O CABEÇALHO DE DETALHES DA RECEITA     */
/* ================================================================== */

.recipe-profile-card .card-body {
    padding: 1.25rem;
}

/* --- Bloco da Imagem --- */
.recipe-profile-image-wrapper {
    max-width: 200px; /* Tamanho máximo da imagem no desktop */
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.recipe-profile-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.recipe-profile-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px dashed var(--current-border-color);
    background-color: var(--current-card-bg-light);
    color: var(--current-text-color);
    opacity: 0.6;
    border-radius: 0.75rem;
}
.recipe-profile-placeholder .bi {
    font-size: 3rem;
}

/* --- Bloco de Detalhes --- */
.recipe-profile-details {
    height: 100%;
    display: flex;
    align-items: center; /* Centraliza as métricas verticalmente */
}

.recipe-metrics-wrapper {
    width: 100%;
    text-align: center;
}

.recipe-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

.recipe-metric .bi {
    font-size: 1.75rem; /* Tamanho do Ícone */
    color: var(--primary-color);
    opacity: 0.8;
    margin-bottom: 0.75rem;
}

.recipe-metric .recipe-metric-value {
    font-size: 1rem; /* Tamanho do Valor */
    font-weight: 600;
    color: var(--current-text-color);
    line-height: 1.3;
}

.recipe-metric .recipe-metric-label {
    font-size: 0.7rem; /* Tamanho do Rótulo */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--current-text-color);
    opacity: 0.7;
}

/* Ajustes para telas menores (mobile) */
@media (max-width: 767.98px) {
    .recipe-profile-image-wrapper {
        max-width: 150px; /* Imagem um pouco menor no mobile */
    }
    .recipe-profile-details {
        margin-top: 1.5rem;
    }
    .recipe-metric .bi {
        margin-bottom: 0.5rem;
    }
}
/* Adicione/Substitua este CSS no seu arquivo kodix-theme.css */
.recipe-profile-card .card-body {
    padding: 1.5rem;
}
.recipe-profile-image-wrapper {
    max-width: 180px; /* Tamanho ajustado */
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.recipe-profile-image-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
}
.recipe-profile-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border: 1px dashed var(--current-border-color);
    background-color: var(--current-card-bg-light);
    color: var(--current-text-color); opacity: 0.6; border-radius: 0.75rem;
}
.recipe-profile-placeholder .bi {
    font-size: 2.5rem;
}
.recipe-profile-details {
    height: 100%; display: flex; flex-direction: column; justify-content: center;
}
.recipe-metrics-wrapper {
    width: 100%;
}
.recipe-metric {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 0 0.5rem;
}
.recipe-metric .bi {
    font-size: 1.5rem; /* Ícones menores */
    opacity: 0.6; margin-bottom: 0.5rem; display: block;
}
.recipe-metric .recipe-metric-value {
    font-size: 1rem; font-weight: 600; color: var(--current-text-color); line-height: 1.3;
}
.recipe-metric .recipe-metric-label {
    font-size: 0.65rem; /* Rótulos ainda menores */
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--current-text-color); opacity: 0.7;
}
.recipe-last-update {
    width: 100%;
    padding-right: 0.5rem; /* Alinha com as métricas */
}


/* ================================================================== */
/* CSS FINAL PARA A NOVA LISTA DE INGREDIENTES DETALHADOS             */
/* ================================================================== */

/* Sub-cabeçalho com os títulos "Quantidade" e "Custo" */
.ingredient-list-header {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--current-text-color);
    opacity: 0.6;
    border-bottom: 1px solid var(--current-border-color);
    gap: 1.5rem;
}
.ingredient-list-header .header-quantity,
.ingredient-list-header .header-cost {
    text-align: right;
}
.ingredient-list-header .header-cost {
    min-width: 80px;
}

/* Lista de ingredientes */
.ingredient-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ingredient-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--current-border-color);
    transition: background-color 0.2s ease;
}
.ingredient-item:last-child {
    border-bottom: none;
}
.ingredient-item:hover {
    background-color: var(--current-card-bg-light);
}

/* Detalhes de cada item */
.ingredient-item .ingredient-name {
    font-weight: 600;
    color: var(--current-text-color);
    flex-grow: 1;
    padding-right: 1rem;
}
.ingredient-item .ingredient-details {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}
.ingredient-item .ingredient-quantity {
    text-align: right;
    color: var(--current-text-color);
    opacity: 0.8;
}
.ingredient-item .ingredient-cost {
    font-weight: 600;
    color: var(--success-color);
    min-width: 80px;
    text-align: right;
}

.ingredients-card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--current-border-color);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cingredients-card .card-header .bi {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.ingredients-card .card-header h5 {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--current-text-color);
}

/* --- Estilos para Mobile --- */
@media (max-width: 575.98px) {
    .ingredient-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .ingredient-item .ingredient-name {
        padding-right: 0;
        margin-bottom: 0.25rem;
    }
    .ingredient-item .ingredient-details {
        width: 100%;
        justify-content: space-between;
        border-top: 1px dashed var(--current-border-color);
        padding-top: 0.75rem;
    }
    .ingredient-item .ingredient-quantity,
    .ingredient-item .ingredient-cost {
        text-align: left;
    }
}