:root {
    --sgjs-primaria: #0B4F6C; /* Azul institucional - menu lateral, cabeçalhos */
    --sgjs-secundaria: #0E9F6E; /* Verde saúde - destaques, botões */
    --sgjs-alerta-vencido: #D64545;
    --sgjs-alerta-hoje: #F2A93B;
    --sgjs-alerta-ok: #4CAF88;
    --sgjs-fundo: #F4F6F8;
    --sgjs-texto: #2B2F33;
    --sgjs-sidebar-largura: 260px;
}

body {
    background-color: var(--sgjs-fundo);
    color: var(--sgjs-texto);
}

/* ---------- Menu Vertical Lateral ---------- */
.sgjs-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sgjs-sidebar-largura);
    background-color: var(--sgjs-primaria);
    color: #fff;
    overflow-y: auto;
    z-index: 1030;
}

    .sgjs-sidebar .sgjs-brand {
        padding: 1.25rem 1rem;
        font-weight: 700;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .sgjs-sidebar .nav-link {
        color: rgba(255, 255, 255, .85);
        padding: .75rem 1.25rem;
        border-left: 3px solid transparent;
    }

        .sgjs-sidebar .nav-link:hover,
        .sgjs-sidebar .nav-link.active {
            background-color: rgba(255, 255, 255, .08);
            color: #fff;
            border-left-color: var(--sgjs-secundaria);
        }

        .sgjs-sidebar .nav-link i {
            width: 1.4rem;
            display: inline-block;
            text-align: center;
            margin-right: .5rem;
        }

/* Conteúdo desloca à direita do menu em telas >= md; em telas menores, o sidebar
   vira offcanvas (ver Bootstrap 5.3 offcanvas no Site.Master) e o conteúdo ocupa 100%. */
.sgjs-conteudo {
    margin-left: var(--sgjs-sidebar-largura);
    min-height: 100vh;
}

@media (max-width: 991.98px) {
    .sgjs-conteudo {
        margin-left: 0;
    }

    .sgjs-sidebar {
        display: none;
    }
}

.sgjs-topbar {
    background-color: #fff;
    border-bottom: 1px solid #e3e6ea;
    padding: .75rem 1.5rem;
}

/* ---------- Responsividade de Grids (Bloco 8) ----------
   Todas as telas de listagem usam o padrão "card-body p-0" envolvendo um GridView. Em vez de
   embrulhar cada uma manualmente em <div class="table-responsive">, resolvemos uma vez aqui:
   qualquer tabela larga (muitas colunas) ganha rolagem horizontal dentro do próprio card em
   telas estreitas, ao invés de espremer colunas ilegíveis ou estourar o layout da página. */
.card-body.p-0 {
    overflow-x: auto;
}

    .card-body.p-0 > table,
    .card-body.p-0 > .table {
        min-width: 640px;
    }

@media (min-width: 992px) {
    .card-body.p-0 > table,
    .card-body.p-0 > .table {
        min-width: 0;
    }
}

/* ---------- Badges de Situação do Mandado ---------- */
.badge-situacao-vencido {
    background-color: var(--sgjs-alerta-vencido);
    color: #fff;
}

.badge-situacao-vence-hoje {
    background-color: var(--sgjs-alerta-hoje);
    color: #2B2F33;
}

.badge-situacao-a-vencer {
    background-color: var(--sgjs-alerta-ok);
    color: #fff;
}

.badge-situacao-cumprido {
    background-color: #6c757d;
    color: #fff;
}

/* ---------- Acordeões (padrão único em toda a Solution) ----------
   Fundo verde (mesma cor dos botões de destaque/"Salvar"), tanto recolhido quanto expandido —
   antes só o estado expandido do Bootstrap ganhava uma cor (azul clara, sutil); agora os dois
   estados usam o mesmo verde, e a setinha (ícone padrão do Bootstrap, escuro por padrão) é
   invertida pra ficar branca e continuar legível sobre o fundo verde. */
.accordion-button,
.accordion-button:not(.collapsed) {
    background-color: var(--sgjs-primaria);
    color: #fff;
    box-shadow: none;
}

    .accordion-button::after {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    .accordion-button:focus {
        border-color: var(--sgjs-primaria);
        box-shadow: 0 0 0 .25rem rgba(11, 79, 108, .35);
    }

.btn-primary {
    background-color: var(--sgjs-primaria);
    border-color: var(--sgjs-primaria);
}

.btn-success {
    background-color: var(--sgjs-secundaria);
    border-color: var(--sgjs-secundaria);
}

/* ---------- Gráfico de barras simples do relatório "Objetos Mais Demandados" (Bloco 7) ----------
   Sem dependência de biblioteca de gráficos: cada barra é uma div cuja largura (%) é calculada
   no code-behind (Indicadores.aspx.cs) a partir da maior quantidade da consulta atual. */
.barra-relatorio {
    height: 1.6rem;
    border-radius: .25rem;
    background: var(--sgjs-secundaria);
    color: #fff;
    font-size: .78rem;
    display: flex;
    align-items: center;
    padding-left: .5rem;
    white-space: nowrap;
}

.item-relatorio-objeto {
    flex-wrap: wrap;
}

    .item-relatorio-objeto .rotulo {
        width: 260px;
        max-width: 100%;
    }

    .item-relatorio-objeto .barra-container {
        min-width: 160px;
    }