/* ============================================================
   Tema Sicoob — design system compartilhado dos painéis internos
   (consolidado de plataforma_sla + painel_financeiro).

   Regra de cor (manual de marca Sicoob):
   - petróleo  = estrutura (navbar, sidebar, cabeçalho de tabela, texto forte)
   - folha     = ações (botão primário, item ativo) e o que é positivo
   - turquesa / lima = SÓ dentro de gráficos (e a faixa do chart-card).
     Nunca em botão, navegação ou badge de status.
   - status fora de gráfico usa tons contidos (âmbar/vermelho dessaturados).

   Dependências: Bootstrap 5.3.3 + Bootstrap Icons + fonte Asap.
   Dark mode: body.dark-mode + <html data-bs-theme="dark"> (ver app.js).
   ============================================================ */

:root {
    /* marca */
    --sicoob-petroleo: #003641;
    --sicoob-petroleo-escuro: #012932;
    --sicoob-folha: #7DB61C;
    --sicoob-folha-escuro: #679416;
    --sicoob-turquesa: #00AE9D;
    --sicoob-lima: #C9D200;

    /* superfícies e texto */
    --sicoob-papel: #F4F7F5;
    --sicoob-painel: #FFFFFF;
    --sicoob-tinta: #0D1B1F;
    --sicoob-texto-muted: #5B6663;
    --sicoob-borda: rgba(0, 54, 65, .12);
    --sicoob-texto-sobre-folha: #05230C; /* folha + branco dá ~2,4:1; texto escuro dá ~9:1 */

    /* status (fora de gráfico) */
    --sicoob-status-bom: var(--sicoob-folha);
    --sicoob-status-atencao: #B4790F;
    --sicoob-status-critico: #B23A3A;
    --sicoob-status-neutro: #8A9490;

    /* forma */
    --sicoob-radius: .75rem;
    --sicoob-radius-sm: .5rem;
    --sicoob-radius-lg: 1rem;
    --sicoob-sombra-destaque: 0 12px 28px -18px rgba(0, 54, 65, .35);

    /* shell */
    --sicoob-navbar-h: 64px;
    --sicoob-sidebar-w: 68px;
    --sicoob-sidebar-w-expandida: 240px;
}

.dark-mode {
    --sicoob-papel: #10201F;
    --sicoob-painel: #16302C;
    --sicoob-tinta: #F1F1F1;
    --sicoob-texto-muted: #B7C2BE;
    --sicoob-borda: rgba(255, 255, 255, .12);

    --sicoob-status-bom: #9ED45C;
    --sicoob-status-atencao: #E3A63F;
    --sicoob-status-critico: #E17575;
    --sicoob-status-neutro: #9AA6A2;
}

/* ===== Base ===== */

body {
    font-family: 'Asap', sans-serif;
    background: var(--sicoob-papel);
    color: var(--sicoob-tinta);
    transition: background-color .3s, color .3s;
}

.text-muted { color: var(--sicoob-texto-muted) !important; }
.tabular, .table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }

/* ===== Navbar (topo) ===== */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--sicoob-navbar-h);
    padding: 0 1rem;
    z-index: 9999;
    background: var(--sicoob-petroleo);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.navbar .logo { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.navbar .brand-mark { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.navbar .nav-icon { font-size: 1.3rem; color: rgba(255, 255, 255, .85); cursor: pointer; background: none; border: 0; padding: 0; line-height: 1; }
.navbar .nav-icon:hover, .navbar .nav-icon:focus-visible { color: #fff; }
.dark-mode .navbar { background: var(--sicoob-petroleo-escuro); }

.avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sicoob-folha); color: var(--sicoob-petroleo);
    font-weight: 800; font-size: .85rem; cursor: pointer;
}

/* navbar é fixed z-index:9999 (acima do modal padrão do Bootstrap ~1055) */
.modal-backdrop, .offcanvas-backdrop { z-index: 10000; }
.modal, .offcanvas { z-index: 10001; }
.dark-mode .offcanvas { background: var(--sicoob-painel); color: var(--sicoob-tinta); }

/* ===== Sidebar ===== */

.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sicoob-sidebar-w);
    height: 100vh;
    padding-top: calc(var(--sicoob-navbar-h) + 16px);
    background: var(--sicoob-petroleo);
    overflow: hidden;
    transition: width .25s ease;
    z-index: 1000;
}
.sidebar.expanded { width: var(--sicoob-sidebar-w-expandida); overflow-y: auto; }
.dark-mode .sidebar { background: var(--sicoob-petroleo-escuro); }

.sidebar a {
    display: flex; align-items: center;
    padding: 11px 15px; margin: 1px 8px;
    color: rgba(255, 255, 255, .75);
    text-decoration: none; font-size: .9rem;
    border-radius: var(--sicoob-radius-sm);
    border-left: 2px solid transparent;
    transition: background .15s, color .15s;
}
.sidebar a i { font-size: 1.1rem; width: 1.1rem; margin-right: 10px; flex-shrink: 0; text-align: center; }
.sidebar a span { display: none; white-space: nowrap; font-weight: 500; }
.sidebar.expanded a span { display: inline; }
.sidebar a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar a.active { background: rgba(125, 182, 28, .16); color: #fff; border-left-color: var(--sicoob-folha); }
.sidebar a.active i { color: var(--sicoob-folha); }

.menu-group { padding: 4px 0; }
.menu-group-title {
    display: flex; align-items: center; gap: 8px;
    margin: 16px 0 4px 21px;
    color: rgba(255, 255, 255, .4);
    font-size: .69rem; font-weight: 600; letter-spacing: .02em;
}
.menu-group-title i { font-size: .85rem; }
.menu-sub a { padding-left: 22px; font-size: .85rem; }
.sidebar:not(.expanded) .menu-group-title { margin-left: 0; justify-content: center; }
.sidebar:not(.expanded) .menu-group-title span,
.sidebar:not(.expanded) .menu-sub span { display: none; }
.sidebar:not(.expanded) .menu-sub a { padding-left: 15px; }

/* ===== Conteúdo + rodapé ===== */

.content {
    margin-left: var(--sicoob-sidebar-w);
    margin-top: var(--sicoob-navbar-h);
    padding: 28px 28px 80px;
    min-height: calc(100vh - var(--sicoob-navbar-h));
    transition: margin-left .25s ease;
}
.content.expanded { margin-left: var(--sicoob-sidebar-w-expandida); }

footer.app-footer {
    position: fixed; bottom: 0; left: 0;
    width: 100%;
    padding: 10px;
    text-align: center; font-size: .85rem;
    background: var(--sicoob-painel);
    color: var(--sicoob-texto-muted);
    border-top: 1px solid var(--sicoob-borda);
    z-index: 900;
}

/* celular: sidebar vira gaveta (só aparece expandida) */
@media (max-width: 767.98px) {
    .sidebar { width: 0; }
    .sidebar.expanded { width: var(--sicoob-sidebar-w-expandida); }
    .content, .content.expanded { margin-left: 0; padding: 20px 16px 80px; }
}

/* ===== Bootstrap: superfícies no dark mode ===== */

.dark-mode .card,
.dark-mode .dropdown-menu,
.dark-mode .modal-content { background: var(--sicoob-painel); color: var(--sicoob-tinta); border-color: var(--sicoob-borda); }
.dark-mode .modal-header, .dark-mode .modal-footer { border-color: var(--sicoob-borda); }
.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ===== Botões ===== */

.btn-primary, .btn-sicoob {
    --bs-btn-bg: var(--sicoob-folha);
    --bs-btn-border-color: var(--sicoob-folha);
    --bs-btn-color: var(--sicoob-texto-sobre-folha);
    --bs-btn-hover-bg: var(--sicoob-folha-escuro);
    --bs-btn-hover-border-color: var(--sicoob-folha-escuro);
    --bs-btn-hover-color: var(--sicoob-texto-sobre-folha);
    --bs-btn-active-bg: var(--sicoob-folha-escuro);
    --bs-btn-active-border-color: var(--sicoob-folha-escuro);
    --bs-btn-active-color: var(--sicoob-texto-sobre-folha);
    --bs-btn-disabled-bg: var(--sicoob-folha);
    --bs-btn-disabled-border-color: var(--sicoob-folha);
    --bs-btn-disabled-color: var(--sicoob-texto-sobre-folha);
    --bs-btn-focus-shadow-rgb: 125, 182, 28;
    font-weight: 600;
}
.btn-outline-primary { color: var(--sicoob-petroleo); border-color: var(--sicoob-folha); }
.btn-outline-primary:hover, .btn-outline-primary:active { background: var(--sicoob-folha); border-color: var(--sicoob-folha); color: var(--sicoob-texto-sobre-folha); }
.dark-mode .btn-outline-primary:not(:hover) { color: var(--sicoob-tinta); }

/* ===== Formulários ===== */

.form-label { font-size: .875rem; font-weight: 600; color: var(--sicoob-texto-muted); }
.form-control:focus, .form-select:focus { border-color: var(--sicoob-folha); box-shadow: 0 0 0 .2rem rgba(125, 182, 28, .25); }

/* ===== Abas (nav-tabs = abas de página; seg-tabs = alternador em pílula) ===== */

.nav-tabs { border-bottom-color: var(--sicoob-borda); }
.nav-tabs .nav-link { color: var(--sicoob-texto-muted); }
.nav-tabs .nav-link:hover { color: var(--sicoob-petroleo); border-color: transparent; }
.nav-tabs .nav-link.active { color: var(--sicoob-petroleo); font-weight: 600; background: transparent; border-color: transparent; border-bottom: 2px solid var(--sicoob-folha); }
.dark-mode .nav-tabs .nav-link:hover, .dark-mode .nav-tabs .nav-link.active { color: var(--sicoob-tinta); }

.seg-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.seg-tab {
    border: 0; background: transparent;
    padding: 8px 14px; border-radius: .6rem;
    color: var(--sicoob-texto-muted);
    font-size: .875rem; font-weight: 600; white-space: nowrap;
}
.seg-tab:hover { background: rgba(0, 174, 157, .08); }
.seg-tab.active { background: var(--sicoob-petroleo); color: #fff; }
.dark-mode .seg-tab.active { background: var(--sicoob-folha); color: var(--sicoob-texto-sobre-folha); }

/* ===== Cabeçalho de página ===== */

.page-header {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem; padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--sicoob-borda);
}
.page-header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; color: var(--sicoob-petroleo); }
.page-header p { margin: 0; color: var(--sicoob-texto-muted); }
.page-header .breadcrumb-mini { font-size: .78rem; font-weight: 600; color: var(--sicoob-texto-muted); }
.page-header .page-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.dark-mode .page-header h1 { color: var(--sicoob-tinta); }

.page-title-icon {
    width: 3rem; height: 3rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--sicoob-radius-sm);
    background: var(--sicoob-petroleo); color: #fff; font-size: 1.4rem;
}
.dark-mode .page-title-icon { background: rgba(255, 255, 255, .08); color: var(--sicoob-folha); }

/* ===== Cartões de página ===== */

.filter-card, .chart-card, .table-card {
    background: var(--sicoob-painel);
    border: 1px solid var(--sicoob-borda);
    border-radius: var(--sicoob-radius);
    box-shadow: none;
}
/* chart-card = sempre contém gráfico → faixa turquesa + sombra de destaque */
.chart-card { border-top: 3px solid var(--sicoob-turquesa); box-shadow: var(--sicoob-sombra-destaque); }

.card-title-sm { font-size: 1rem; font-weight: 600; margin: 0; }
.chart-caption { text-align: center; font-size: .875rem; font-weight: 600; color: var(--sicoob-texto-muted); margin-bottom: .25rem; }

/* cabeçalho recolhível (Bootstrap collapse) */
.collapsible-header { cursor: pointer; }
.collapsible-header .collapsible-chevron { transition: transform .2s ease; }
.collapsible-header[aria-expanded="true"] .collapsible-chevron { transform: rotate(180deg); }

/* ===== KPIs ===== */

/* outcome-card: cartão neutro + chip de ícone colorido (a cor fica só no chip) */
.outcome-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--sicoob-painel);
    border: 1px solid var(--sicoob-borda);
    border-radius: var(--sicoob-radius);
}
.outcome-card .outcome-icon {
    width: 3rem; height: 3rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--sicoob-radius-sm);
    font-size: 1.3rem; color: #fff;
    background: var(--sicoob-petroleo);
}
.outcome-card .outcome-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.outcome-card .outcome-label { font-size: .8rem; font-weight: 600; color: var(--sicoob-texto-muted); }

.outcome-card--total { background: var(--sicoob-petroleo); border-color: transparent; }
.outcome-card--total .outcome-value, .outcome-card--total .outcome-label { color: #fff; }
.outcome-card--total .outcome-icon { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

.outcome-card--mini { flex-direction: column; justify-content: center; text-align: center; gap: .35rem; padding: .85rem .4rem; }
.outcome-card--mini .outcome-icon { width: 2.1rem; height: 2.1rem; font-size: .95rem; border-radius: .55rem; }
.outcome-card--mini .outcome-value { font-size: 1.15rem; }
.outcome-card--mini .outcome-label { font-size: .68rem; }

/* cores do chip por semântica */
.chip-petroleo { background: var(--sicoob-petroleo) !important; }
.chip-bom      { background: var(--sicoob-status-bom) !important; color: var(--sicoob-texto-sobre-folha) !important; }
.chip-andamento{ background: var(--sicoob-turquesa) !important; }
.chip-atencao  { background: var(--sicoob-status-atencao) !important; }
.chip-critico  { background: var(--sicoob-status-critico) !important; }
.chip-neutro   { background: var(--sicoob-status-neutro) !important; }

.card-clicavel { cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.card-clicavel:hover { transform: translateY(-2px); border-color: var(--sicoob-folha); }

/* indicador-card: KPI com comparativos + minigráfico (painel_financeiro) */
.indicador-card {
    position: relative; min-height: 220px;
    background: var(--sicoob-painel);
    border: 1px solid var(--sicoob-borda);
    border-radius: var(--sicoob-radius);
    box-shadow: var(--sicoob-sombra-destaque);
    transition: box-shadow .2s, border-color .2s;
}
.indicador-card.card-clicavel:hover { border-color: var(--sicoob-turquesa); box-shadow: 0 14px 30px -16px rgba(0, 54, 65, .45); transform: none; }
.indicador-icone {
    width: 2.35rem; height: 2.35rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: .65rem; font-size: 1.1rem;
    background: rgba(0, 174, 157, .12); color: var(--sicoob-turquesa);
}
.indicador-titulo { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .35rem; }
.indicador-valor { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--sicoob-petroleo); font-variant-numeric: tabular-nums; }
.dark-mode .indicador-valor { color: #fff; }
.indicador-direcao { font-size: .8rem; font-weight: 600; color: var(--sicoob-folha-escuro); margin-bottom: .75rem; }
.indicador-direcao--pior { color: var(--sicoob-status-critico); }
.indicador-direcao--neutra { color: var(--sicoob-texto-muted); }
.dark-mode .indicador-direcao { color: var(--sicoob-folha); }
.indicador-comparativo { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.indicador-grafico { height: 110px; }
.card-spinner {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    background: var(--sicoob-painel); border-radius: inherit;
}

/* status-pill: linha "● rótulo ........ contagem" */
.status-pill {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem 1rem;
    background: var(--sicoob-painel);
    border: 1px solid var(--sicoob-borda);
    border-radius: var(--sicoob-radius-sm);
}
.status-pill .dot { width: .65rem; height: .65rem; border-radius: 50%; flex-shrink: 0; }
.status-pill .count { margin-left: auto; font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* ===== Badges ===== */

.status-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; border-radius: .5rem; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.status-badge--bom     { background: var(--sicoob-status-bom); color: var(--sicoob-tinta); }
.status-badge--atencao { background: var(--sicoob-status-atencao); color: #1a1a19; }
.status-badge--critico { background: var(--sicoob-status-critico); color: #fff; }
.status-badge--neutro  { background: var(--sicoob-status-neutro); color: #fff; }
.dark-mode .status-badge--bom { color: var(--sicoob-texto-sobre-folha); }

/* selo suave (fundo 14% + texto na cor) — para tabelas densas */
.soft-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: .4rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.soft-badge--bom     { background: rgba(125, 182, 28, .14); color: var(--sicoob-folha-escuro); }
.soft-badge--atencao { background: rgba(180, 121, 15, .14); color: var(--sicoob-status-atencao); }
.soft-badge--critico { background: rgba(178, 58, 58, .14); color: var(--sicoob-status-critico); }
.soft-badge--neutro  { background: rgba(138, 148, 144, .16); color: var(--sicoob-texto-muted); }
.soft-badge--info    { background: rgba(0, 54, 65, .08); color: var(--sicoob-petroleo); }
.dark-mode .soft-badge--bom { color: var(--sicoob-status-bom); }
.dark-mode .soft-badge--info { background: rgba(255, 255, 255, .08); color: var(--sicoob-tinta); }

/* ranking: número em círculo petróleo; só o 1º lugar em folha */
.ranking-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    font-weight: 700; font-size: .85rem;
    background: var(--sicoob-petroleo); color: #fff;
}
.ranking-badge--top { background: var(--sicoob-folha); color: var(--sicoob-texto-sobre-folha); }
.dark-mode .ranking-badge:not(.ranking-badge--top) { background: rgba(255, 255, 255, .14); }

/* barra de progresso fina (ex.: % da meta na tabela) */
.mini-progress { height: .35rem; min-width: 90px; border-radius: 1rem; background: var(--sicoob-borda); overflow: hidden; }
.mini-progress > div { height: 100%; border-radius: 1rem; }

/* ===== Tabelas (dentro de .sc-page) ===== */

.sc-page .table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--sicoob-petroleo); color: #fff;
    border: 0;
    font-size: .78rem; font-weight: 600;
    padding: .75rem;
}
.sc-page .table td { vertical-align: middle; padding: .75rem; }
.sc-page .table tbody tr:hover > * { background: rgba(125, 182, 28, .08); }
.sc-page .table tfoot td { font-weight: 700; border-top: 2px solid var(--sicoob-borda); background: rgba(0, 174, 157, .06); }
.sc-page .modal .table tbody td { font-size: .8rem; }
.dark-mode .sc-page .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sicoob-tinta);
    --bs-table-border-color: var(--sicoob-borda);
}
.dark-mode .sc-page .table thead th { background: var(--sicoob-petroleo-escuro); }

/* ===== Botões utilitários ===== */

.info-icon-btn { background: none; border: 0; padding: 0; margin-left: .35rem; line-height: 1; font-size: .85rem; color: var(--sicoob-texto-muted); vertical-align: middle; }
.info-icon-btn:hover, .info-icon-btn:focus-visible { color: var(--sicoob-folha); }
.link-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.link-btn:hover { color: var(--sicoob-folha); }

/* ===== Estado vazio ===== */

.empty-state { padding: 3rem 1rem; text-align: center; color: var(--sicoob-texto-muted); }
.empty-state > i { display: block; font-size: 2.5rem; margin-bottom: .75rem; }
.empty-state .empty-title { font-weight: 600; color: var(--sicoob-tinta); }

/* ===== Modais largos ===== */

.modal-fit-content { width: fit-content; max-width: min(95vw, 1400px); }
.modal-content { border: 0; border-radius: var(--sicoob-radius-lg); }

/* ===== Loader de página ===== */

.page-loader {
    position: fixed; inset: 0; z-index: 20000;
    display: none; flex-direction: column; gap: 1rem;
    align-items: center; justify-content: center;
    background: rgba(244, 247, 245, .85);
    backdrop-filter: blur(2px);
}
.page-loader.show { display: flex; }
.page-loader img { width: 64px; height: auto; }
.page-loader .page-loader-text { font-weight: 600; }
.dark-mode .page-loader { background: rgba(16, 32, 31, .85); color: var(--sicoob-tinta); }

/* ===== Login (layout limpo) ===== */

.login-shell { min-height: 100vh; background: var(--sicoob-petroleo); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-card { width: 100%; max-width: 420px; border: 0; border-radius: 1.25rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); }
.brand-box {
    width: 56px; height: 56px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--sicoob-petroleo), var(--sicoob-folha));
}
.brand-box img { width: 32px; height: 32px; object-fit: contain; }

/* ===== Acessibilidade ===== */

:focus-visible { outline: 2px solid var(--sicoob-folha); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}