/* Estilos gerais */
/* Importação das fontes */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');

body {
    background-color: #FFFFFF; /* Cor secundária: Branco puro */
    color: #333333; /* Cor do texto: Cinza-escuro */
    font-family: 'Lato', sans-serif; /* Fonte para textos e descrições */
}

/* Header */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

/* Navbar personalizada */
.navbar-dark.bg-dark {
    background-color: #2E7D32 !important; /* Cor primária: Verde-esmeralda */
}

/* Footer personalizado */
footer.bg-dark {
    background-color: #2E7D32 !important; /* Cor primária: Verde-esmeralda */
}

/* Cards de produtos */
.card-produto {
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 20px;
    height: 100%;
}

.card-produto:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.card-title {
    font-weight: bold;
    font-size: 1.2rem;
}

.card-text.descricao {
    height: 80px;
    overflow: hidden;
}

.card-text.valor {
    font-weight: bold;
    color: #00BFA5; /* Cor de destaque: Azul-acqua */
    font-size: 1.1rem;
}

/* Formulários */
.form-control:focus {
    border-color: #4FC3F7; /* Cor de destaque: Azul-claro */
    box-shadow: 0 0 0 0.2rem rgba(79, 195, 247, 0.25);
}

/* Botões */
.btn-primary {
    background-color: #2E7D32; /* Cor primária: Verde-esmeralda */
    border-color: #2E7D32;
}

.btn-primary:hover {
    background-color: #4CAF50; /* Cor primária alternativa: Verde-menta */
    border-color: #4CAF50;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Tabelas */
.table-hover tbody tr:hover {
    background-color: rgba(79, 195, 247, 0.075); /* Cor de destaque: Azul-claro com transparência */
}

/* Painel administrativo */
.admin-sidebar {
    background-color: #2E7D32; /* Cor primária: Verde-esmeralda */
    color: white;
    min-height: calc(100vh - 56px);
}

.admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.75);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    margin: 0.2rem 0;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    color: white;
    background-color: #4CAF50; /* Cor primária alternativa: Verde-menta */
}

.admin-sidebar .nav-link i {
    margin-right: 0.5rem;
}

/* Responsividade */
@media (max-width: 768px) {
    .admin-sidebar {
        min-height: auto;
    }
    
    .card-text.descricao {
        height: auto;
    }
}

/* Animações */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Pré-visualização de imagem */
.img-preview {
    max-width: 100%;
    max-height: 200px;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

/* Mensagens de alerta */
.alert {
    margin-bottom: 20px;
}

/* Footer */
footer {
    margin-top: auto;
}

/* Cards personalizados */
.card-header.bg-dark {
    background-color: #2E7D32 !important; /* Cor primária: Verde-esmeralda */
}

.card-header.bg-primary {
    background-color: #4CAF50 !important; /* Cor primária alternativa: Verde-menta */
}

/* Cards coloridos no dashboard */
.card.bg-primary {
    background-color: #2E7D32 !important; /* Cor primária: Verde-esmeralda */
    border-color: #2E7D32 !important;
}

.card.bg-success {
    background-color: #4CAF50 !important; /* Cor primária alternativa: Verde-menta */
    border-color: #4CAF50 !important;
}

/* Cores para list-group */
.list-group-item-action:hover {
    background-color: rgba(79, 195, 247, 0.1); /* Cor de destaque: Azul-claro com transparência */
}

/* Página de erro 404 */
.text-danger {
    color: #00BFA5 !important; /* Cor de destaque: Azul-acqua */
}

.btn-secondary {
    background-color: #4FC3F7; /* Cor de destaque: Azul-claro */
    border-color: #4FC3F7;
}

.btn-secondary:hover {
    background-color: #03A9F4; /* Versão mais escura do Azul-claro */
    border-color: #03A9F4;
}

/* Personalização do botão de perigo */
.btn-danger {
    background-color: #FF5722; /* Laranja para substituir o vermelho padrão */
    border-color: #FF5722;
}

.btn-danger:hover {
    background-color: #E64A19; /* Laranja mais escuro */
    border-color: #E64A19;
}

/* Personalização do botão de sucesso */
.btn-success {
    background-color: #4CAF50; /* Verde-menta */
    border-color: #4CAF50;
}

.btn-success:hover {
    background-color: #388E3C; /* Verde-menta mais escuro */
    border-color: #388E3C;
}

/* Personalização dos alertas */
.alert-success {
    background-color: rgba(76, 175, 80, 0.2); /* Verde-menta com transparência */
    border-color: #4CAF50;
    color: #2E7D32; /* Verde-esmeralda */
}

.alert-danger {
    background-color: rgba(255, 87, 34, 0.2); /* Laranja com transparência */
    border-color: #FF5722;
    color: #E64A19; /* Laranja escuro */
}

.alert-info {
    background-color: rgba(79, 195, 247, 0.2); /* Azul-claro com transparência */
    border-color: #4FC3F7;
    color: #0288D1; /* Azul mais escuro */
}

/* Personalização dos cards de produtos */
.card-produto {
    border-color: rgba(46, 125, 50, 0.2); /* Verde-esmeralda com transparência */
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.card-produto:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: #2E7D32; /* Verde-esmeralda */
}

.card-produto .card-title {
    color: #2E7D32; /* Verde-esmeralda */
    font-weight: 600;
}

.card-produto .card-text.descricao {
    color: #333333; /* Cinza-escuro */
}

/* Estilos para o modal de produto */
#produtoModal .modal-header {
    background-color: #2E7D32;
    color: white;
}

#produtoModal .modal-body {
    padding: 20px;
}

#produtoModal img {
    max-width: 100%;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#produtoModalDescricao {
    margin-top: 15px;
    line-height: 1.6;
}

#produtoModalDescricao img {
    max-width: 100%;
    height: auto;
}

#produtoModalDescricao table {
    width: 100%;
    margin-bottom: 15px;
    border-collapse: collapse;
}

#produtoModalDescricao table, #produtoModalDescricao th, #produtoModalDescricao td {
    border: 1px solid #ddd;
    padding: 8px;
}

#produtoModalDescricao th {
    background-color: #f2f2f2;
}

/* Estilização para links gerais */
a {
    color: #00BFA5; /* Azul-acqua */
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #008E76; /* Azul-acqua mais escuro */
}

/* Personalização de classes de background */
.bg-primary {
    background-color: #2E7D32 !important; /* Verde-esmeralda */
}

.bg-success {
    background-color: #4CAF50 !important; /* Verde-menta */
}

/* Sobrescrever a classe bg-dark do Bootstrap para usar a cor primária */
.bg-dark {
    background-color: #2E7D32 !important; /* Verde-esmeralda */
}

/* Aplicação das fontes */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar, .nav, .card-title, .btn {
    font-family: 'Raleway', sans-serif; /* Fonte para títulos e menus */
}

.navbar-brand {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

.nav-link {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}

p, div, span, li, td, th, input, textarea, select, option, label, .card-text {
    font-family: 'Lato', sans-serif; /* Reforçando fonte para textos e descrições */
}