/* Paleta de cores mais refinada para um design moderno e profissional */
:root {
    --primary-color: #0056b3; /* Azul escuro, mais sóbrio */
    --secondary-color: #f0f4f8; /* Cinza claro, usado para fundos */
    --text-color: #333; /* Texto principal mais escuro */
    --subtle-text-color: #666; /* Texto secundário */
    --card-background: #fff;
    --shadow-light: 0 2px 4px rgba(0,0,0,0.05); /* Sombra suave para elevação */
    --shadow-medium: 0 4px 10px rgba(0,0,0,0.1);
}

body {
    background-color: var(--secondary-color);
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
}

.container-fluid {
    padding: 2rem;
}

/* Melhorias no card: bordas mais suaves e sombra para profundidade */
.card {
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    background-color: var(--card-background);
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

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

/* Tabela: Removido o overflow do container para usar o do Bootstrap */
.table-responsive {
    margin-top: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
}

.table {
    --bs-table-bg: var(--card-background);
    --bs-table-color: var(--text-color);
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 500;
    border: none;
    position: sticky; /* Fixa o cabeçalho em rolagens horizontais */
    top: 0;
}

.table tbody tr:hover {
    background-color: #f1f1f1;
}

.table td {
    font-weight: 400;
}

.header-section {
    padding: 1.5rem;
    margin-bottom: 2rem;
    /* Fundo suave para destacar o cabeçalho */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 244, 248, 0.9));
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Centraliza o nome da ferramenta */
.dashboard-info {
    flex-grow: 1; /* Permite que o título ocupe o espaço disponível */
}

/* Novo estilo para o título principal da ferramenta */
h1 {
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    font-size: 1.8rem;
}

/* Layout para o logo e nome da empresa */
.company-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.company-logo-lockup {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.posto-logo {
    max-height: 50px;
    width: auto;
}

.company-text {
    display: flex;
    flex-direction: column;
}

.company-name {
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    font-size: 1.25rem;
}

.company-slogan {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    margin: 0;
    font-style: italic;
}

.company-logo {
    max-height: 50px;
    width: auto;
    border-radius: 8px;
}

.ultima-atualizacao {
    color: var(--subtle-text-color);
    font-size: 0.9rem;
    font-style: italic;
    text-align: right;
    width: 100%;
    display: block;
    margin-top: 0.5rem;
}

/* Cards de métricas com ícones mais proeminentes */
.metric-card {
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    border: none;
    margin-bottom: 1.5rem;
    /* Alterado para que o flexbox organize em uma linha (padrão) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem; /* Diminui o padding vertical para achatar o card */
    color: #fff;
    /* Removido o min-height para deixar a altura ser definida pelo conteúdo */
}

.metric-card .card-body {
    /* Ajustado para um layout mais compacto, permitindo que os elementos se alinhem horizontalmente */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0; /* Removido o padding do body, pois o card já tem padding */
}

.metric-card .card-text {
    font-weight: 700;
    margin: 0; /* Remove a margem padrão para economizar espaço */
}

.metric-card .card-title {
    margin-bottom: 0.25rem; /* Reduz a margem abaixo do título */
    font-size: 1rem; /* Diminui o tamanho do título */
}

.metric-card .card-text.fs-2 {
    font-size: 1.75rem !important; /* Valor em destaque diminuído */
    margin-top: 0.25rem;
}

.metric-card .card-text.fs-6 {
    font-size: 0.9rem !important; /* Diminuído o tamanho da fonte */
    opacity: 0.9;
}

.metric-card i {
    font-size: 2.5rem; /* Diminuído o tamanho do ícone */
    opacity: 0.7;
}

/* Estilo para os cards de bicos */
.pump-card {
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    background-color: var(--card-background);
    border: none;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.pump-card .card-title {
    font-weight: 700;
    color: var(--primary-color);
}

.pump-card i {
    font-size: 3rem;
    color: var(--primary-color);
}

/* Estilo para a tabela no modal */
.modal-table {
    margin-top: 1rem;
}

.modal-table th, .modal-table td {
    font-size: 0.9rem;
    padding: 0.5rem;
}

/* Cores de fundo para os cards de combustível com maior contraste */
.bg-gasolina-comum { background-color: #E64A19; } /* Laranja vibrante */
.bg-gasolina-aditivada { background-color: #0277bd; } /* Azul escuro */
.bg-gasolina-premium { background-color: #FFB300; } /* Amarelo ouro */
.bg-etanol { background-color: #558B2F; } /* Verde escuro */
.bg-diesel-s10-comum { background-color: #388E3C; } /* Verde vibrante */
.bg-diesel-s500-comum { background-color: #3F51B5; } /* Azul profundo */
.bg-desconhecido { background-color: #9E9E9E; } /* Cinza neutro */

/* Media queries para melhor responsividade */
@media (max-width: 992px) {
    .container-fluid {
        padding: 1.5rem;
    }
    h1 {
        font-size: 1.5rem;
    }
    .metric-card .card-text.fs-2 {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .company-info {
        width: 100%;
        justify-content: center;
        margin-top: 1rem;
    }
    .dashboard-info {
        width: 100%;
        text-align: center;
    }
    .ultima-atualizacao {
        text-align: center;
    }
    .metric-card .card-body {
        padding: 1rem;
    }
    .metric-card i {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .container-fluid {
        padding: 1rem;
    }
    .table thead th, .table tbody td {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
    .metric-card .card-text.fs-2 {
        font-size: 1.2rem !important;
    }
    .pump-card i {
        font-size: 2rem;
    }
    .modal-table th, .modal-table td {
        font-size: 0.75rem;
        padding: 0.4rem;
    }
}