/* Cores personalizadas - Ajustado para monocromático com base em #488BF0 */
:root {
    --primary-color: #488BF0; /* Azul principal mais claro */
    --primary-dark-color: #356BBF; /* Um azul um pouco mais escuro para hover/foco dos botões */
    --secondary-color: #2A4E78; /* Azul escuro (usado nos cabeçalhos dos cards e navbar) */
    --light-bg: #FFF9F0; /* Fundo muito claro, um azul bem suave para o corpo do card e body */
    --dark-text: #343a40; /* Texto escuro padrão */
    --text-on-primary: #FFFFFF; /* Texto branco para fundos azuis */
    --border-light: #d1e2f7; /* Borda mais suave para elementos claros */
    --button-background-light: #C8E2FF; /* Cor específica para o fundo dos botões de ação (manter para outros botões, mas sobrescreveremos para o login) */
    --dropdown-hover-bg: #EFEFEF; /* Cinza bem claro para o hover do dropdown (valor que definimos por último) */
    --danger-text-color: #DC3545; /* Cor para texto de perigo/alerta forte, um vermelho mais direto */

    /* Cores de status, mantendo padrão Bootstrap, para alertas e contextos específicos */
    --success-color: #28a74662; /* Verde para sucesso */
    --warning-color: #ffc1075d; /* Amarelo para aviso */
    --danger-color: #dc354665; /* Vermelho para perigo */
    --info-color: #17a3b85b; /* Azul claro para info */
}

body {
    background-color: var(--light-bg);
    color: var(--dark-text);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Navbar com a mesma cor dos cabeçalhos dos cards */
.navbar {
    background-color: var(--secondary-color) !important;
}

.navbar-brand,
.nav-link {
    color: var(--text-on-primary) !important;
}

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

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Fundo do dropdown da navbar no mesmo tom do light-bg */
.dropdown-menu {
    background-color: var(--light-bg);
    border: 1px solid var(--border-light);
}

.dropdown-item {
    color: var(--dark-text);
}

/* Cor de fundo ao passar o mouse nas opções do dropdown */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--dropdown-hover-bg); /* Usa o novo cinza bem claro */
    color: var(--dark-text); /* Mantém o texto escuro para contraste */
}

.dropdown-divider {
    border-top: 1px solid var(--border-light);
}


/* Card overrides for color scheme */
.card-header {
    background-color: var(--secondary-color);
    color: var(--text-on-primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* Specific card headers if needed, using the status colors */
.card-header.bg-success {
    background-color: var(--success-color) !important;
    color: var(--text-on-primary) !important;
}
.card-header.bg-warning {
    background-color: var(--warning-color) !important;
    color: var(--dark-text) !important;
}
.card-header.bg-danger {
    background-color: var(--danger-color) !important;
    color: var(--text-on-primary) !important;
}
.card-header.bg-info {
    background-color: var(--info-color) !important;
    color: var(--text-on-primary) !important;
}

/* Estilizar o corpo do card com fundo mais claro */
.card .card-body {
    background-color: var(--light-bg);
}

/* NOVO: Ajusta altura para o input de busca e os botões de ação na seção de filtros */
.card-body form .form-control, /* Aponta para o input .form-control */
.card-body form .btn {      /* Aponta para qualquer botão .btn dentro do formulário */
    /* REMOVIDO: height: 38px !important; */ /* Removido para permitir que btn-lg tenha sua altura natural */
    display: flex; /* Para centralizar o conteúdo verticalmente */
    align-items: center; /* Centraliza verticalmente o texto e ícone */
    justify-content: center; /* Centraliza horizontalmente o texto e ícone */
}

/* Garante que os ícones fiquem alinhados verticalmente dentro dos botões */
.card-body form .btn i {
    vertical-align: middle;
}

/* Ajuste específico para garantir que o input de busca tenha a altura correta */
.card-body form #item_search_query {
    height: 38px !important; /* Garante que o input tenha a mesma altura */
}


/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-primary);
}
.btn-primary:hover {
    background-color: var(--primary-dark-color);
    border-color: var(--primary-dark-color);
    color: var(--text-on-primary);
}

/* Fundo dos botões de "Ações Rápidas" e o botão de Login com a cor do cabeçalho/navbar */
.d-grid .btn-lg {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--text-on-primary) !important;
}
.d-grid .btn-lg:hover {
    background-color: var(--primary-dark-color) !important;
    border-color: var(--primary-dark-color) !important;
    color: var(--text-on-primary) !important;
}

/* Botão de Aviso de Validade - "Ver Detalhes" */
.card-body .btn-warning {
    background-color: var(--primary-dark-color) !important;
    border-color: var(--primary-dark-color) !important;
    color: var(--text-on-primary) !important;
}
.card-body .btn-warning:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

/* Ajustes para botões de status gerais (fora do dashboard, ex: formulários) */
.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--text-on-primary);
}
.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: var(--text-on-primary);
}
.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--dark-text);
}
.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--text-on-primary);
}

/* Alerts */
.alert-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-primary);
}
.alert-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--text-on-primary);
}
.alert-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--dark-text);
}
.alert-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--text-on-primary);
}
.alert-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: var(--text-on-primary);
}

/* Espaçamento para o main content */
main.container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Footer style */
.footer {
    background-color: var(--light-bg);
    border-top: 1px solid var(--border-light);
}

/* Highlighting for expiring validities (GLOBAL) */
/* Maior especificidade para garantir que a linha da tabela seja destacada */
.table-responsive tbody tr.table-warning-row,
.table-responsive tbody tr.table-warning-row:nth-of-type(odd), /* Para sobrescrever table-striped */
.table-responsive tbody tr.table-warning-row:nth-of-type(even) { /* Para sobrescrever table-striped */
    background-color: var(--warning-color) !important; /* Cor de fundo do aviso */
}

.table-responsive tbody tr.table-warning-row td, /* Aplica a cor do texto às células */
.table-responsive tbody tr.table-warning-row th { /* Aplica a cor do texto ao cabeçalho da linha, se houver */
    background-color: var(--warning-color) !important; /* Repete para garantir que a célula tenha o fundo */
    color: var(--danger-text-color) !important; /* Texto em vermelho */
}

.table-responsive tbody tr.table-warning-row a { /* Garante que links dentro da linha destacada sejam legíveis */
    color: var(--danger-text-color) !important; /* Links em vermelho */
}

/* Estilo para hover na linha destacada */
.table-responsive tbody tr.table-warning-row:hover,
.table-responsive tbody tr.table-warning-row:hover td {
    background-color: var(--warning-color) !important; /* Mantém a cor de warning no hover */
    color: var(--danger-text-color) !important; /* Mantém o texto vermelho no hover */
    /* Você pode adicionar um leve box-shadow ou transição se quiser um efeito de hover mais sutil */
}

/* REVISADO: Fundo do card em mobile com a cor de aviso */
.card-warning-validity {
    background-color: var(--warning-color) !important; /* NOVO: Fundo do card em cor de aviso */
    border: 1px solid var(--warning-color); /* Borda com a cor de aviso */
    color: var(--danger-text-color) !important; /* Texto em vermelho */
}

/* Garante que o texto dentro dos elementos do card de warning seja vermelho */
.card-warning-validity .card-title,
.card-warning-validity .card-subtitle,
.card-warning-validity .card-text,
.card-warning-validity .badge,
.card-warning-validity strong {
    color: var(--danger-text-color) !important; /* Texto em vermelho para elementos internos */
}
/* Para o badge específico, pode precisar de ajuste de fundo se for o caso */
.card-warning-validity .badge.bg-primary {
    background-color: var(--secondary-color) !important; /* Um azul escuro para contraste no badge dentro do card amarelo */
    color: var(--text-on-primary) !important; /* Texto branco no badge */
}

/* Badge para estoque baixo */
.badge.bg-warning-custom {
    background-color: var(--warning-color) !important; /* Usa a cor de warning definida na sua paleta */
    color: var(--dark-text) !important; /* Garante que o texto seja escuro para contraste */
}


/* Ajustes para mobile para formulários e cards */
@media (max-width: 767.98px) {
    .card {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    .container, .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .d-md-flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .d-grid .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .d-grid .btn:last-child {
        margin-bottom: 0;
    }

    /* Esconder tabela e exibir cards em mobile */
    .table-responsive table {
        display: none;
    }

    .table-responsive .cards-mobile {
        display: block;
    }

    /* Estilos para os cards em mobile (table-to-card) */
    .cards-mobile .card-body {
        padding: 0.8rem;
    }

    .cards-mobile .card-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .cards-mobile .card-subtitle,
    .cards-mobile .card-text {
        font-size: 0.85rem;
        line-height: 1.3;
        margin-bottom: 0.2rem;
    }

    .cards-mobile .badge {
        font-size: 0.75rem;
        padding: 0.3em 0.5em;
    }

    .cards-mobile .dropdown .btn-sm {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }

    /* Garante que o texto em badges de aviso seja escuro em mobile se for aplicado */
    .cards-mobile .badge.bg-warning {
        color: var(--dark-text) !important;
    }
    /* Para o badge de Saldo Total no card principal do item, se ele também for destacado */
    .cards-mobile .card-body .badge.bg-primary {
        background-color: var(--primary-color) !important; /* Apenas para garantir que não seja afetado */
        color: var(--text-on-primary) !important;
    }

}

@media (min-width: 768px) {
    /* Esconder cards e exibir tabela em desktop/telas maiores */
    .table-responsive table {
        display: table;
    }

    .table-responsive .cards-mobile {
        display: none;
    }

    /* REFORÇO: Força o overflow: visible em todos os contêineres que podem estar cortando */
    .card, .card-body, .table-responsive {
        overflow: visible !important;
    }

    .table-responsive td {
        position: relative;
        vertical-align: middle;
        padding-right: 0 !important;
        white-space: nowrap;
    }
    .table-responsive th {
        white-space: nowrap;
    }

    .table-responsive td .dropdown {
        display: inline-block;
        position: relative;
        line-height: 1;
    }

    .table-responsive td .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        transform: translateX(0);
        min-width: 140px;
        z-index: 1051;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
        border-radius: 0.3rem;
    }
    /* Para o botão específico dentro da TD que aciona o dropdown */
    .table-responsive td .dropdown-toggle {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.2rem;
    }
}