/* DrkGestao.UI — componentes comuns do Leme e da Indústria (2ª rodada de usabilidade, 27/10/2026).
   Usa os tokens de cor e de letra da aplicação (--petroleo, --ink, --font, --mono…); não define cor própria. */

/* Abas: um estilo só */
.ui-abas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 0 12px; }
.ui-aba { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--bg); border-radius: 999px;
          padding: 5px 13px; font: 600 13px var(--font); color: var(--ink-2); cursor: pointer; }
.ui-aba:hover { background: var(--surface-2); }
.ui-aba.on { background: var(--petroleo-50); border-color: var(--petroleo); color: var(--petroleo-700); }
.ui-aba:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.ui-aba i { font-size: 13px; }
.ui-aba-n { font-family: var(--mono); font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: 0 7px; }
.ui-aba.on .ui-aba-n { background: var(--bg); color: var(--petroleo-700); }
.ui-aba-n.alerta { background: var(--vermelho-50); color: var(--vermelho); }
.ui-abas-extra { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }

/* Indicadores: o primordial da tela, grande e no topo (no máximo 4 por linha) */
.ui-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (min-width: 900px) { .ui-indicadores { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: 100%; } }
.ui-ind { display: flex; flex-direction: column; gap: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r, 8px);
          padding: 10px 14px; color: var(--ink); text-decoration: none; min-width: 0; }
a.ui-ind:hover { border-color: var(--petroleo); }
a.ui-ind:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.ui-ind-rot { font-size: 12.5px; font-weight: 700; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.ui-ind-rot i { color: var(--ink-3); }
.ui-ind-valor { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-ind-valor small, .ui-ind-valor span { font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.ui-ind-rod { font-size: 12px; color: var(--ink-3); }
.ui-ind.bom .ui-ind-valor { color: var(--verde-700, var(--verde)); }
.ui-ind.atencao .ui-ind-valor { color: var(--ambar); }
.ui-ind.ruim .ui-ind-valor { color: var(--vermelho); }
.ui-ind.ruim { border-color: var(--vermelho); }

/* Campo: rótulo ligado, erro embaixo do próprio campo */
.ui-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-width: 0; }
.ui-campo > label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ui-obrig { color: var(--vermelho); }
.ui-campo-dica { font-size: 12px; color: var(--ink-3); }
.ui-campo-erro { font-size: 12.5px; color: var(--vermelho); display: flex; gap: 6px; align-items: baseline; }
.ui-campo.com-erro input, .ui-campo.com-erro select, .ui-campo.com-erro textarea, .ui-campo.com-erro .input {
    border-color: var(--vermelho) !important; background: var(--vermelho-50) !important; }

/* Indicador que filtra a própria tela (botão) e o que está com o filtro aplicado */
button.ui-ind { font: inherit; text-align: left; cursor: pointer; }
button.ui-ind:hover { border-color: var(--petroleo); }
button.ui-ind:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.ui-ind.ativo { border-color: var(--petroleo); box-shadow: inset 0 0 0 1px var(--petroleo); background: var(--petroleo-50); }

/* Molde de tela (U3): cabeçalho com um botão principal e o menu "Mais" */
.ui-cab-ico { color: var(--petroleo); font-size: 19px; margin-right: 6px; vertical-align: -2px; }
.ui-mais { position: relative; }
.ui-mais > summary { list-style: none; }
.ui-mais > summary::-webkit-details-marker { display: none; }
.ui-mais-painel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px; display: flex; flex-direction: column;
                  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg, 10px); box-shadow: var(--shadow-lg); padding: 6px; }
.ui-mais-painel > button, .ui-mais-painel > a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none;
                  border-radius: var(--r, 8px); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ui-mais-painel > button:hover, .ui-mais-painel > a:hover { background: var(--surface-2); text-decoration: none; }
.ui-mais-painel i { width: 16px; text-align: center; color: var(--petroleo); }

/* Lista agrupada: a linha do grupo traz o subtotal de TODO o filtro (não só da página) */
tr.ui-grupo td { background: var(--surface-2); font-weight: 700; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--border); }
tr.ui-grupo .ui-grupo-n { font-weight: 500; color: var(--ink-3); margin-left: 8px; }
tr.ui-grupo td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }

/* Escolha dentro de um chip da barra de filtros (ex.: "Agrupar: cliente") */
.fchip.fsel { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fchip.fsel select { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; padding: 0; outline: none; }

/* Análise do mês recolhida (U3): os gráficos ficam a um clique; a lista vem logo abaixo dos números */
.ui-analise { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg, 10px); }
.ui-analise > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.ui-analise > summary::-webkit-details-marker { display: none; }
.ui-analise > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; color: var(--ink-3); transition: transform .15s; }
.ui-analise[open] > summary::after { transform: rotate(180deg); }
.ui-analise > summary i { color: var(--petroleo); }
.ui-analise > summary .muted { font-weight: 500; }
.ui-analise[open] { padding: 0 12px 2px; }
.ui-analise[open] > summary { padding: 10px 2px; }

/* Cadeia do documento (U4a): faixa de etapas no topo da ficha */
.ui-fluxo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 6px 0 12px; padding: 8px 10px; background: var(--surface-2);
            border: 1px solid var(--border); border-radius: var(--r-lg, 10px); }
.ui-fluxo-seta { align-self: center; color: var(--ink-3); font-size: 11px; }
.ui-fluxo-etapa { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ui-fluxo-nome { font-size: 11px; font-weight: 700; color: var(--ink-3); display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.ui-fluxo-etapa.atual .ui-fluxo-nome { color: var(--petroleo-700); }
.ui-fluxo-docs { display: flex; flex-wrap: wrap; gap: 4px; }
.ui-fluxo-doc { font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border);
                color: var(--petroleo-700); text-decoration: none; white-space: nowrap; }
a.ui-fluxo-doc:hover { border-color: var(--petroleo); text-decoration: none; }
.ui-fluxo-doc.atual { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.ui-fluxo-mais { font-size: 11.5px; font-weight: 700; color: var(--ink-3); align-self: center; cursor: help; }