/* ============================================================================
   DrK Gestão — Design System
   ERP corporativo claro e denso. Paleta Azul Petróleo.
   ========================================================================== */

:root {
    /* Marca / cores */
    --petroleo: #0E6E78;
    --petroleo-700: #0A565E;
    --petroleo-600: #0C616B;
    --petroleo-100: #D6EAEC;
    --petroleo-50: #EAF4F5;

    --verde: #0E9F6E;
    --verde-700: #047857;
    --verde-50: #E7F6EF;

    --vermelho: #DC2626;
    --vermelho-50: #FDECEC;

    --ambar: #B45309;
    --ambar-50: #FDF4E7;

    /* Tinta / superfícies */
    --ink: #0F172A;
    --ink-2: #475569;
    --ink-3: #8A97A8;
    --bg: #FFFFFF;
    --surface: #F7F8FA;
    --surface-2: #F1F3F5;
    --border: #E2E8F0;
    --border-2: #EEF1F5;

    /* Forma */
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);

    /* Densidade (ERP) */
    --topbar-h: 56px;
    --sidebar-w: 240px;
    --row-h: 38px;

    --font: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
}

/* ===== Tema escuro ===== Sobrepõe só os tokens — o resto da folha herda. As tintas -50
   viram fundos escuros e os tons -700/cores ganham brilho para contraste nos badges. */
[data-theme="dark"] {
    color-scheme: dark;

    --petroleo: #1AA6B4;
    --petroleo-700: #41CEDB;   /* texto/realce: badges, sidebar ativo, abas */
    --petroleo-600: #1AA6B4;
    --petroleo-100: #1E4751;   /* bordas suaves */
    --petroleo-50: #15323A;    /* fundo suave: selecionado/hover/badge/síntese */

    --verde: #2BD27A;
    --verde-700: #34D399;
    --verde-50: #14302A;

    --vermelho: #F77272;
    --vermelho-50: #3A2220;

    --ambar: #F0A93C;
    --ambar-50: #352B19;

    --ink: #E7EDF6;
    --ink-2: #A8B6C8;
    --ink-3: #6F7E92;
    --bg: #121A27;
    --surface: #1A2330;
    --surface-2: #222D3D;
    --border: #2C3A4D;
    --border-2: #243042;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

[data-theme="dark"] #blazor-error-ui { background: #4A3A12; color: #F4E5B8; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--petroleo); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }

/* Números: monoespaçados, tabulares, alinhados à direita ----------------------*/
.num, .money, td.num, th.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    letter-spacing: -.02em;
}
.val-pos { color: var(--verde-700); }
.val-neg { color: var(--vermelho); }
.muted { color: var(--ink-3); }

/* ============================================================================
   Estrutura: sidebar + topbar + conteúdo
   ========================================================================== */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas: "brand topbar" "sidebar content";
    height: 100vh;
    overflow: hidden;
}

/* Marca (canto superior esquerdo) */
.brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--bg);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.brand img { width: 32px; height: 32px; border-radius: 8px; box-shadow: var(--shadow-sm); }
.brand .b-name { font-weight: 800; font-size: 15px; letter-spacing: -.02em; line-height: 1; }
.brand .b-sub { font-size: 11px; color: var(--petroleo); font-weight: 600; letter-spacing: .02em; }

/* Topbar */
.topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.topbar .search {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 0 10px; height: 34px;
    color: var(--ink-3); min-width: 240px;
}
.topbar .search input { border: 0; background: transparent; outline: none; font-size: 13px; color: var(--ink); width: 100%; }
.topbar .spacer { flex: 1; }

.selector {
    display: flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--r);
    background: var(--bg); color: var(--ink-2);
}
.selector i { color: var(--petroleo); }
.selector select { border: 0; background: transparent; outline: none; font-size: 13px; color: var(--ink); font-weight: 600; cursor: pointer; }

.user-chip { display: flex; align-items: center; gap: 8px; padding: 0 6px; color: var(--ink-2); font-weight: 600; }
.user-chip i { font-size: 20px; color: var(--petroleo); }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--r);
    border: 1px solid var(--border); background: var(--bg); color: var(--ink-2);
    cursor: pointer; transition: .12s; text-decoration: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }

/* Sidebar (módulos) */
.sidebar {
    grid-area: sidebar;
    background: var(--bg);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 10px 10px 24px;
}
.nav-group { margin-top: 14px; }
.nav-group:first-child { margin-top: 4px; }
.nav-group > .g-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--ink-3);
    padding: 4px 10px;
}
.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin: 1px 0;
    border-radius: var(--r-sm);
    color: var(--ink-2); font-weight: 550; font-size: 13px;
    border-left: 3px solid transparent;
    cursor: pointer; transition: .12s; text-decoration: none;
}
.nav-link i { font-size: 16px; width: 18px; text-align: center; color: var(--ink-3); }
.nav-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-link.active {
    background: var(--petroleo-50);
    color: var(--petroleo-700);
    border-left-color: var(--petroleo);
    font-weight: 700;
}
.nav-link.active i { color: var(--petroleo); }

/* Grupos recolhíveis (accordion) */
.g-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; background: none; border: 0; cursor: pointer;
    text-align: left; font: inherit; margin-bottom: 1px;
}
.g-toggle:hover { color: var(--ink-2); }
.g-toggle > i { font-size: 10px; color: var(--ink-3); transition: .12s; }
.nav-group.is-recolhido .nav-item-row { display: none; }
/* No modo só-ícone os rótulos somem; mostre todos os ícones independentemente do recolhimento. */
html.menu-collapsed .nav-group.is-recolhido .nav-item-row { display: block; }

/* Linha de item com estrela de favoritar */
.nav-item-row { position: relative; }
.nav-item-row .nav-link { padding-right: 28px; }
.nav-star {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--ink-3);
    padding: 3px 4px; border-radius: 4px; cursor: pointer;
    font-size: 11.5px; line-height: 1; opacity: 0;
    transition: opacity .12s, color .12s, background .12s;
}
.nav-item-row:hover .nav-star { opacity: .5; }
.nav-star:hover { opacity: 1; color: var(--ambar); background: var(--surface-2); }
.nav-star.on { opacity: 1; color: var(--ambar); }

/* Seções Favoritos / Recentes */
.nav-quick > .g-label { display: flex; align-items: center; gap: 6px; cursor: default; }
.nav-quick > .g-label .bi-star-fill { color: var(--ambar); }
html.menu-collapsed .nav-star { display: none; }
html.menu-collapsed .nav-item-row .nav-link { padding-right: 0; }
html.menu-collapsed .nav-quick { display: none; }

/* Anexos (títulos / notas) */
.anexos { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-2); }
.anexos-head { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.anexo-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.anexo-list li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-sm); }
.anexo-ico { color: var(--ink-3); font-size: 15px; }
.anexo-nome { flex: 1; color: var(--petroleo-700); font-size: 12.5px; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-nome:hover { text-decoration: underline; }
.anexo-meta { font-size: 11px; white-space: nowrap; }
.anexo-del { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 2px 5px; border-radius: 4px; line-height: 1; }
.anexo-del:hover { color: var(--vermelho); background: var(--vermelho-50); }
.anexo-add { cursor: pointer; }

/* Conteúdo */
.content { grid-area: content; overflow-y: auto; padding: 16px 20px 40px; }

/* ============================================================================
   Trilha (breadcrumb) + título de página + abas
   ========================================================================== */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.crumbs .sep { opacity: .5; }
.crumbs b { color: var(--ink-2); font-weight: 600; }

.page-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 14px; }
.page-head h1 { font-size: 20px; }
.page-head .sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab {
    padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2);
    border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active { color: var(--petroleo-700); border-bottom-color: var(--petroleo); }

/* ============================================================================
   Cartões / KPIs
   ========================================================================== */
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-2); }
.card-head h3 { font-size: 13.5px; font-weight: 700; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 14px 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--petroleo); }
.kpi.is-pos::before { background: var(--verde); }
.kpi.is-neg::before { background: var(--vermelho); }
.kpi .k-label { font-size: 11.5px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.kpi .k-label i { font-size: 14px; }
.kpi .k-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin-top: 6px; color: var(--ink); }
.kpi .k-foot { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }

/* ============================================================================
   Barra de ações (toolbar)
   ========================================================================== */
.toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 0; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }

.btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 13px;
    border-radius: var(--r); border: 1px solid var(--border);
    background: var(--bg); color: var(--ink-2);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: .12s; white-space: nowrap; text-decoration: none;
}
.btn i { font-size: 15px; }
.btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.btn-primary { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.btn-primary:hover { background: var(--petroleo-700); color: #fff; }
.btn-success { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-success:hover { background: var(--verde-700); color: #fff; }
.btn-danger { color: var(--vermelho); border-color: var(--border); }
.btn-danger:hover { background: var(--vermelho-50); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { height: 28px; padding: 0 9px; font-size: 12px; }

/* ============================================================================
   Grade de dados (densa)
   ========================================================================== */
.grid-wrap { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid thead th {
    background: var(--surface-2);
    text-align: left; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
    color: var(--ink-2); padding: 9px 12px;
    border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
table.grid thead th.num { text-align: right; }
table.grid tbody td { padding: 0 12px; height: var(--row-h); border-bottom: 1px solid var(--border-2); color: var(--ink); vertical-align: middle; }
table.grid tbody tr:hover { background: var(--petroleo-50); }
table.grid tbody tr.sel { background: var(--petroleo-100); }
table.grid .col-check { width: 36px; text-align: center; }
table.grid tfoot td { padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--border); font-weight: 700; }
.cell-strong { font-weight: 650; }
.row-actions { display: flex; gap: 4px; opacity: 0; transition: .1s; }
table.grid tbody tr:hover .row-actions { opacity: 1; }

/* Badges de situação */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.6; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-aberto { background: var(--petroleo-50); color: var(--petroleo-700); }
.badge-baixado { background: var(--verde-50); color: var(--verde-700); }
.badge-parcial { background: var(--ambar-50); color: var(--ambar); }
.badge-atraso { background: var(--vermelho-50); color: var(--vermelho); }
.badge-cancelado { background: var(--surface-2); color: var(--ink-3); }

/* Paginação */
.pager { display: flex; align-items: center; gap: 6px; }
.pager .pg { min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--ink-2); cursor: pointer; font-size: 12px; }
.pager .pg.active { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }

/* ============================================================================
   Formulários
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.input, .field input, .field select, .field textarea {
    height: 36px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--r);
    background: var(--bg); font-size: 13.5px; font-family: var(--font); color: var(--ink); outline: none; transition: .12s;
}
.field textarea { height: auto; padding: 9px 11px; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--petroleo); box-shadow: 0 0 0 3px var(--petroleo-50); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ============================================================================
   Login
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #0A4D54 0%, #0E6E78 55%, #11929B 100%); padding: 20px; }
.auth-card { width: 100%; max-width: 380px; background: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 30px 28px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-brand img { width: 56px; height: 56px; border-radius: 14px; box-shadow: var(--shadow); }
.auth-brand .t { font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.auth-brand .s { font-size: 12.5px; color: var(--petroleo); font-weight: 600; }
.auth-err { background: var(--vermelho-50); color: var(--vermelho); border-radius: var(--r); padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; }
.auth-card .btn-primary { width: 100%; justify-content: center; height: 40px; margin-top: 6px; }

/* ============================================================================
   Misc / utilitários
   ========================================================================== */
.empty { text-align: center; padding: 48px 20px; color: var(--ink-3); }
.empty i { font-size: 34px; display: block; margin-bottom: 10px; color: var(--border); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--verde-50); color: var(--verde-700); font-size: 11.5px; font-weight: 700; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.flex { display: flex; align-items: center; gap: 8px; }
.mt-16 { margin-top: 16px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { width: 100%; max-width: 560px; background: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-height: 92vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 15px; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.modal .resumo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; color: var(--ink-2); }
.filtros { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 10px; flex-wrap: wrap; }
.modal-foot .spacer { flex: 1; }
.sep-vert { display: inline-block; width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }

/* Painel executivo (geração on-demand) */
.spin { display: inline-block; animation: dg-spin 0.9s linear infinite; }
@keyframes dg-spin { to { transform: rotate(360deg); } }
.ok-msg { background: var(--verde-50, #eafaf2); border: 1px solid var(--verde, #2E7D5B); color: var(--verde-700, #1f6347); border-radius: var(--r); padding: 9px 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.painel-log { background: #0f172a; color: #cbd5e1; border-radius: var(--r); padding: 10px 12px; font-size: 11.5px; line-height: 1.5; max-height: 260px; overflow: auto; white-space: pre-wrap; margin: 8px 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Detalhe do lançamento (modal "abrir") */
.modal.modal-lg { max-width: 760px; }
.lnk-abrir { color: var(--petroleo, var(--ink-1)); font-weight: 600; text-decoration: none; }
.lnk-abrir:hover { text-decoration: underline; }
.det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.det-grid > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.det-grid .det-full { grid-column: 1 / -1; }
.det-lbl { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.det-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.det-valores > div { display: flex; flex-direction: column; gap: 3px; }
.det-valores b { font-size: 17px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cdd5df; border-radius: 8px; border: 2px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: #b7c0cd; }

:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 1px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media (max-width: 980px) {
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
}

#blazor-error-ui { background: #fff3cd; bottom: 0; box-shadow: 0 -1px 3px rgba(0,0,0,.2); display: none; left: 0; padding: 10px 18px; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

/* ============================================================================
   Menu lateral retrátil (toggle via classe em <html>)
   ========================================================================== */
.app { transition: grid-template-columns .15s ease; }
html.menu-collapsed .app { grid-template-columns: 56px 1fr; }
html.menu-collapsed .brand { padding: 0; justify-content: center; }
html.menu-collapsed .brand > div { display: none; }
html.menu-collapsed .sidebar { padding: 10px 6px 24px; }
html.menu-collapsed .sidebar .g-label { display: none; }
html.menu-collapsed .sidebar .nav-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-2); }
html.menu-collapsed .sidebar .nav-group:first-child { border-top: 0; padding-top: 0; }
html.menu-collapsed .nav-link { justify-content: center; gap: 0; padding: 9px 0; font-size: 0; border-left-width: 0; border-radius: var(--r); }
html.menu-collapsed .nav-link i { font-size: 17px; width: auto; }
html.menu-collapsed .nav-link.active { border-left-width: 0; box-shadow: inset 0 0 0 1.5px var(--petroleo-100); }

/* ============================================================================
   Fluxo de Caixa Gerencial (SAGG hierárquico)
   ========================================================================== */
.lnk-exp { background: none; border: 0; cursor: pointer; color: var(--ink-3); padding: 0 4px 0 0; width: 18px; line-height: 1; }
.lnk-exp:hover { color: var(--petroleo); }
.lnk-exp i { font-size: 11px; }
.mono-cod { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-right: 4px; }

/* Linhas de grupo (nível 1) e contas-pai (rollup) */
.grid tr.row-grupo > td { background: var(--surface-2); font-weight: 700; }
.grid tr.row-grupo .mono-cod { color: var(--ink-2); }
.grid tr.row-pai > td { font-weight: 600; }

/* Sínteses calculadas — a "tesoura" (3/5/7/9/13.x/14) */
.grid tr.row-sintese > td { background: var(--petroleo-50); font-weight: 700; color: var(--petroleo-700); border-top: 1px solid var(--petroleo-100); border-bottom: 1px solid var(--petroleo-100); }
.grid tr.row-sintese .mono-cod { color: var(--petroleo); }

/* Linha de registro inativo (estoque, cadastros) — esmaecida */
.grid tr.row-inativo > td { opacity: .55; }
.grid tr.row-inativo .cell-strong { font-weight: 500; }

/* ============================================================================
   Aging / vencimentos + Concentração (Pareto / ABC / matriz)
   ========================================================================== */
/* Barra empilhada de aging */
.aging-bar { display: flex; width: 100%; height: 26px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.aging-seg { height: 100%; min-width: 2px; }
.aging-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.leg-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }

/* Badge ABC */
.abc { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-weight: 700; font-size: 12px; }
.abc-a { background: var(--verde-50); color: var(--verde-700); }
.abc-b { background: var(--ambar-50); color: var(--ambar); }
.abc-c { background: var(--surface-2); color: var(--ink-3); }

/* Tiles de classificação */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.tile { border-radius: var(--r); padding: 14px; box-shadow: var(--shadow-sm); }
.tile-name { font-size: 12.5px; font-weight: 650; opacity: .92; }
.tile-val { font-size: 19px; font-weight: 700; margin-top: 4px; letter-spacing: -.01em; }
.tile-sub { font-size: 11px; opacity: .82; margin-top: 2px; }

/* Heatmap da matriz */
.grid.heat td.heat-strong { color: #fff; font-weight: 600; }

@media print {
    .aging-bar, .tile, .grid.heat td, .agbar-fill, .bl-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Cockpit: badge de variação, mini-aging e top parceiros ---- */
.k-delta { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; font-size: 12px; }
.k-delta i { font-size: 15px; margin-right: -2px; }
.k-delta.up { color: var(--verde-700); }
.k-delta.down { color: var(--vermelho); }

/* Aging — barras horizontais rotuladas (uma por faixa de vencimento) */
.agbars { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.agbar { display: grid; grid-template-columns: 84px 1fr minmax(116px, auto); align-items: center; gap: 12px; }
.agbar-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.agbar-lbl i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.agbar-track { height: 9px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.agbar-fill { height: 100%; border-radius: 6px; min-width: 2px; transition: width .4s ease; }
.agbar-val { text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.agbar-val.zero { color: var(--ink-3); font-weight: 600; }
.agbar-val .pct { color: var(--ink-3); font-weight: 600; font-size: 10.5px; margin-left: 5px; }

/* Bar list (ranking) — barra suave atrás, nome à esquerda, valor à direita */
.top-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; margin: 16px 0 8px; }
.barlist { display: flex; flex-direction: column; gap: 6px; }
.bl-row { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); overflow: hidden; }
.bl-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--petroleo-100), var(--petroleo-50)); z-index: 0; transition: width .4s ease; }
.bl-rank { position: relative; z-index: 1; font-size: 11px; font-weight: 700; color: var(--petroleo); width: 13px; flex: none; }
.bl-name { position: relative; z-index: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.bl-meta { position: relative; z-index: 1; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.bl-val { position: relative; z-index: 1; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
a.bl-row:hover .bl-bar { filter: brightness(.96); }

/* Linha de tabela clicável (drill-down) */
.grid tbody tr.row-clic { cursor: pointer; }
.grid tbody tr.row-clic:hover { background: var(--surface); }

/* ---- Sino de pendências (topbar) ---- */
.sino { position: relative; display: inline-flex; }
.sino-btn { position: relative; }
.sino-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--vermelho); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.sino-backdrop { position: fixed; inset: 0; z-index: 60; }
.sino-panel { position: absolute; top: calc(100% + 9px); right: 0; z-index: 61; width: 340px; max-height: 70vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px; }
.sino-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border-2); margin-bottom: 4px; }
.sino-vazio { padding: 22px 12px; text-align: center; color: var(--ink-2); font-size: 13px; }
.sino-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r); text-decoration: none; color: var(--ink); }
.sino-item:hover { background: var(--surface); }
.sino-item .si-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 15px; }
.sino-item .si-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sino-item .si-txt { font-size: 13px; font-weight: 600; }
.sino-item .si-det { font-size: 11.5px; color: var(--ink-3); }
.sino-item .si-chev { color: var(--ink-3); font-size: 12px; }
.sino-item.sev-alta .si-ico { background: var(--vermelho-50); color: var(--vermelho); }
.sino-item.sev-media .si-ico { background: var(--ambar-50); color: var(--ambar); }
.sino-item.sev-baixa .si-ico { background: var(--petroleo-50); color: var(--petroleo); }

/* ---- Ficha 360º do parceiro: semáforo + gauge de crédito ---- */
.cred-semaforo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r); font-size: 13px; margin-bottom: 14px; }
.cred-semaforo i { font-size: 18px; }
.cred-verde { background: var(--verde-50); color: var(--verde-700); }
.cred-amarelo { background: var(--ambar-50); color: var(--ambar); }
.cred-vermelho { background: var(--vermelho-50); color: var(--vermelho); }
.cred-box { margin-top: 14px; }
.cred-bar { height: 8px; border-radius: 5px; background: var(--border-2); overflow: hidden; margin-top: 6px; }
.cred-fill { height: 100%; border-radius: 5px; }
.cred-fill.cred-verde { background: var(--verde); }
.cred-fill.cred-amarelo { background: var(--ambar); }
.cred-fill.cred-vermelho { background: var(--vermelho); }