:root {
    --brand: #1f2f3d;
    --brand-dark: #16232e;
    --accent: #3b6e8f;
    --ok: #2e7d55;
    --danger: #b3392c;
}

body {
    background-color: #f5f6f8;
    color: #2b2f33;
}

/* ---------- Navbar ---------- */
.app-navbar {
    background-color: var(--brand);
}
.app-navbar .navbar-brand { letter-spacing: .01em; }
.app-navbar .nav-link { font-size: .92rem; font-weight: 500; opacity: .85; }
.app-navbar .nav-link:hover { opacity: 1; }
.app-navbar .nav-link.active {
    opacity: 1;
    color: #fff;
    border-bottom: 2px solid var(--accent);
}

/* ---------- Cabeçalhos de página ---------- */
.page-title {
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--brand);
    margin-bottom: 1.1rem;
}
.page-title i { color: var(--accent); }

/* ---------- Cards de indicador ---------- */
.stat-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: .5rem;
    padding: 1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(16,24,32,.04);
}
.stat-card .stat-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    font-weight: 600;
}
.stat-card .stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    margin-top: .15rem;
}
.stat-card.is-ok .stat-value { color: var(--ok); }
.stat-card.is-danger .stat-value { color: var(--danger); }
.stat-card.is-neutral .stat-value { color: var(--brand); }
.stat-icon {
    font-size: 1.1rem;
    color: #b7bec4;
}

/* ---------- Seções em card ---------- */
.section-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: .5rem;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(16,24,32,.04);
}
.section-card h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 1rem;
}

/* ---------- Tabelas ---------- */
.table > thead {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    border-bottom-width: 1px;
}
.table td, .table th { vertical-align: middle; }

/* ---------- Botões / marca ---------- */
.btn-brand {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-brand:hover {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

/* ---------- Responsivo: tabelas viram cartões ---------- */
@media (max-width: 767.98px) {
    table.table-mobile-stack thead { display: none; }
    table.table-mobile-stack, table.table-mobile-stack tbody, table.table-mobile-stack tr, table.table-mobile-stack td {
        display: block;
        width: 100%;
    }
    table.table-mobile-stack tr {
        border: 1px solid #e6e8eb;
        border-radius: .4rem;
        margin-bottom: .6rem;
        padding: .3rem .2rem;
    }
    table.table-mobile-stack td {
        border: none;
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        padding: .35rem .6rem;
    }
    table.table-mobile-stack td::before {
        content: attr(data-rotulo);
        font-weight: 600;
        font-size: .72rem;
        color: #6c757d;
        text-transform: uppercase;
    }
}