/* ---------------------------------------------------------------------------
 * Camada de refinamento — 4.0.0
 *
 * Última folha carregada. Não redefine layout: normaliza o que as seis camadas
 * anteriores deixaram divergente e acrescenta os componentes novos.
 *
 * O que ela resolve, na ordem em que aparece:
 *   1. Ponte de tokens — três conjuntos descreviam as mesmas cores.
 *   2. Tipografia e números — KPI legível à distância, numerais tabulares.
 *   3. Rótulos de formulário — uma única gramática por tela.
 *   4. Tabelas — altura constante, cabeçalho fixo, zebra, menu de ações.
 *   5. Estados vazios — explicam, mostram e oferecem o botão.
 *   6. Sidebar — hover com intenção, tooltips do próprio produto.
 *   7. Componentes novos — histórico, força de senha, chips de resumo.
 * ------------------------------------------------------------------------- */

/* ---------- 1. Ponte de tokens ---------- */
:root{
  --ui-brand:var(--verde-escuro);
  --ui-brand-dark:var(--verde-escuro-2);
  --ui-accent:var(--verde-claro);
  --ui-surface:#FFFFFF;
  --ui-surface-muted:var(--cinza-050);
  --ui-border:var(--cinza-200);
  --ui-border-strong:var(--cinza-300);
  --ui-text:var(--cinza-900);
  --ui-muted:var(--cinza-500);
  --ui-danger:var(--nao-conforme);
  --ui-danger-soft:var(--nao-conforme-bg);
  --ui-warning:var(--faltando);
  --ui-warning-soft:var(--faltando-bg);
  --ui-info-soft:#EAF4DF;
  --ui-ease:cubic-bezier(.22,.78,.18,1);
  --ui-fast:150ms;
  --ui-normal:240ms;
  --ui-radius:14px;
  --ui-radius-sm:10px;
}

/* ---------- 2. Tipografia e números ---------- */

/*
 * Numerais tabulares na fonte de interface. A fonte monoespaçada alinhava
 * colunas de tabela, mas em cartão grande produzia "R$  13.277,09" com
 * espaçamento de terminal — legível, porém sem peso de indicador executivo.
 */
.kpi-value,
.chart-value,
.cell-numeric,
.budget-total span,
.calculated-field{
  font-family:var(--fonte-ui);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:-.015em;
}
.kpi-value{font-weight:800;line-height:1.05}
.kpi-meta{line-height:1.4}

/* Números de tabela alinhados pela unidade, não pela borda esquerda. */
td.cell-numeric{font-size:12.5px;color:var(--ui-muted);white-space:nowrap}

/* ---------- 3. Rótulos de formulário ---------- */

/*
 * Uma gramática só. Antes conviviam "KM atual *" em caixa de frase e
 * "PREÇO CALCULADO POR LITRO" em versalete na mesma seção do mesmo formulário.
 */
/* `.field-label` é o span que a camada de acessibilidade cria quando o rótulo
   não tem controle associado (um toggle, um valor calculado, um botão). Ele
   ficava de fora da normalização e era a origem dos rótulos em versalete. */
.field label,
.field>.field-label,
.desktop-form-section .field label,
.desktop-form-section .field>.field-label,
.filters .field label{
  text-transform:none;
  letter-spacing:0;
  font-size:12.5px;
  font-weight:700;
  color:var(--cinza-700);
}
.field-hint{display:block;margin-top:5px;font-size:11.5px;color:var(--ui-muted);line-height:1.4}
.field-hint-ok{color:var(--conforme);font-weight:700}
.field-hint-warn{color:var(--ui-warning);font-weight:700}
.section-kicker{text-transform:none;letter-spacing:.02em}

.input-with-action{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:8px;align-items:start}

/* Notas passam a ser avisos com âncora visual, não texto centralizado solto. */
.report-note{
  text-align:left;
  margin-top:14px;
  padding:12px 14px;
  border-radius:var(--ui-radius-sm);
  background:var(--ui-surface-muted);
  border:1px solid var(--ui-border);
  border-left:3px solid var(--ui-border-strong);
  color:var(--cinza-700);
  font-size:12.5px;
  line-height:1.5;
}
.report-note-info{background:var(--ui-info-soft);border-color:#D4E4CD;border-left-color:var(--ui-brand)}
.report-note strong{color:var(--ui-text)}

/* ---------- 4. Tabelas ---------- */

/*
 * O cabeçalho fixo só funciona se o próprio contêiner rolar: qualquer ancestral
 * com overflow diferente de visible passa a ser o contexto de sticky. Por isso a
 * área da tabela ganha altura máxima e rolagem própria no desktop — o que
 * também evita percorrer 25 linhas perdendo a referência das colunas.
 */
.data-table-wrap{overflow:auto}
@media (min-width:1024px){
  .data-table-wrap{max-height:calc(100vh - 300px)}
}
.data-table th{position:sticky;top:0;z-index:2;background:var(--ui-surface-muted);box-shadow:inset 0 -1px 0 var(--ui-border)}
.data-table tbody tr:nth-child(even){background:#FCFDFB}
.data-table tbody tr:hover{background:#F4F8F1}
.data-table td{height:56px;padding-top:8px;padding-bottom:8px}

.cell-identity{display:flex;align-items:center;gap:10px;min-width:0}
.cell-identity strong{display:block;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-identity small{display:block;font-size:11.5px;color:var(--ui-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-sm{width:30px;height:30px;flex:0 0 30px;font-size:11.5px}
.cell-badges{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.cell-actions{width:104px;text-align:right;overflow:visible}
.cell-actions .btn{white-space:nowrap}
th.cell-actions{text-align:right}
.cell-locked{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ui-muted);white-space:nowrap}
.cell-locked svg{width:13px;height:13px}

/*
 * Menu de ações por linha.
 *
 * A ação destrutiva deixa de ser um botão vermelho repetido em toda linha —
 * que competia com as ações rotineiras e convidava ao clique acidental — e
 * passa a exigir uma abertura deliberada, como em qualquer produto maduro.
 */
.row-menu{position:relative;display:inline-block}
.row-menu>summary{list-style:none;cursor:pointer}
.row-menu>summary::-webkit-details-marker{display:none}
.row-menu-trigger{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--ui-radius-sm);
  border:1px solid transparent;color:var(--cinza-700);
  transition:background var(--ui-fast) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease);
}
.row-menu-trigger:hover,.row-menu[open] .row-menu-trigger{background:var(--ui-surface-muted);border-color:var(--ui-border)}
.row-menu-trigger svg{width:18px;height:18px}
.row-menu-panel{
  position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:212px;
  background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius);
  box-shadow:0 16px 38px rgba(23,43,54,.16);padding:6px;display:flex;flex-direction:column;gap:2px;
  animation:rowMenuIn 140ms var(--ui-ease);
}
@keyframes rowMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.row-menu-panel button{
  display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;
  border:0;background:transparent;border-radius:var(--ui-radius-sm);text-align:left;
  font-size:13px;font-weight:600;color:var(--cinza-700);
  transition:background var(--ui-fast) var(--ui-ease),color var(--ui-fast) var(--ui-ease);
}
.row-menu-panel button:hover{background:var(--ui-surface-muted);color:var(--ui-brand-dark)}
.row-menu-panel button svg{width:16px;height:16px;flex:0 0 16px}
.row-menu-separator{height:1px;background:var(--ui-border);margin:4px 2px}
.row-menu-danger{color:var(--ui-danger)}
.row-menu-danger:hover{background:var(--ui-danger-soft);color:var(--ui-danger)}

.summary-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px}
.summary-chip{
  display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--ui-surface-muted);border:1px solid var(--ui-border);
  font-size:12px;color:var(--ui-muted);
}
.summary-chip strong{font-size:14px;color:var(--ui-text);font-variant-numeric:tabular-nums}
.summary-chip.chip-warning{background:var(--ui-warning-soft);border-color:#EBD7B4;color:#7A5A1C}
.summary-chip.chip-warning strong{color:#7A5A1C}
.summary-chip.chip-info{background:var(--ui-info-soft);border-color:#D4E4CD;color:var(--ui-brand-dark)}
.summary-chip.chip-info strong{color:var(--ui-brand-dark)}

.detail-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.reference-list{margin:12px 0 0;padding-left:20px;font-size:13px;line-height:1.6;color:var(--cinza-700)}
.reference-list li{margin-bottom:5px}
.dashboard-spacer{height:16px}

/* ---------- 5. Estados vazios ---------- */

/*
 * Um estado vazio bom faz três coisas: explica o que aconteceu, mostra o que
 * fazer e oferece o botão. O anterior fazia só a primeira, ocupando 270 px.
 */
.chart-empty{
  height:auto;min-height:190px;gap:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 22px;text-align:center;
}
.chart-empty .chart-empty-icon{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:var(--ui-surface-muted);border:1px solid var(--ui-border);color:var(--ui-muted);
}
.chart-empty .chart-empty-icon svg{width:21px;height:21px}
.chart-empty strong{font-size:14px;color:var(--ui-text)}
.chart-empty span{max-width:42ch;font-size:12.5px;line-height:1.5;color:var(--ui-muted)}
.chart-empty .btn{margin-top:4px}

/* ---------- 6. Sidebar e movimento ---------- */

@media (min-width:1024px){
  /*
   * Expansão por hover com intenção. Sem o atraso, passar o mouse a caminho de
   * outro elemento abria o painel inteiro — movimento que distrai sem informar.
   */
  .desktop-sidebar-v2{transition-delay:0ms}
  .desktop-sidebar-v2:hover{transition-delay:110ms}
  .desktop-sidebar-v2.open,
  .desktop-sidebar-v2:focus-within{transition-delay:0ms}

  /* Tooltip do próprio produto: imediato e no estilo do sistema. O nativo do
     sistema operacional aparecia depois de ~1,5 s com tipografia estranha. */
  .desktop-sidebar-v2:not(.open):not(:hover):not(:focus-within) .nav-link{position:relative}
  .desktop-sidebar-v2:not(.open):not(:hover):not(:focus-within) .nav-link::after{
    content:attr(title);
    position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-4px);
    background:var(--ui-brand-dark);color:#FFF;font-size:12px;font-weight:700;
    padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;
    opacity:0;box-shadow:0 8px 20px rgba(23,43,54,.24);z-index:80;
    transition:opacity 120ms var(--ui-ease),transform 120ms var(--ui-ease);
  }
  .desktop-sidebar-v2:not(.open):not(:hover):not(:focus-within) .nav-link:hover::after,
  .desktop-sidebar-v2:not(.open):not(:hover):not(:focus-within) .nav-link:focus-visible::after{
    opacity:1;transform:translateY(-50%) translateX(0);
  }

  /* Conteúdo interno acompanha a expansão em vez de aparecer de uma vez. */
  .desktop-sidebar-v2 .nav-link span,
  .desktop-sidebar-v2 .sidebar-section-label,
  .desktop-sidebar-v2 .sidebar-user>div:not(.avatar){
    transition:opacity 180ms var(--ui-ease) 60ms,transform 180ms var(--ui-ease) 60ms;
  }

  /* Densidade: o conteúdo passa a ocupar a largura que já reservava. */
  .page-content{padding-bottom:56px}
  .professional-chart-card .chart-wrap{min-height:0}
  .professional-chart-card .chart-wrap svg{max-height:none}
}

/* Feedback tátil consistente em tudo que é clicável. */
.btn,.quick-card,.home-quick-link,.kpi-card,.chart-card,.list-item{
  transition:background var(--ui-fast) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease),
             box-shadow var(--ui-fast) var(--ui-ease),transform var(--ui-fast) var(--ui-ease),color var(--ui-fast) var(--ui-ease);
}
.quick-card:hover,.list-item:hover{transform:translateY(-1px)}

/* ---------- 7. Componentes novos ---------- */

/* Força de senha e requisitos ao vivo — primeiro acesso. */
.password-strength{display:flex;align-items:center;gap:10px;margin-top:12px}
.strength-track{flex:1;height:6px;border-radius:999px;background:var(--cinza-100);overflow:hidden}
.strength-fill{
  display:block;height:100%;width:0;border-radius:999px;background:var(--ui-danger);
  transition:width var(--ui-normal) var(--ui-ease),background var(--ui-normal) var(--ui-ease);
}
.strength-fill[data-strength-level="0"]{width:0}
.strength-fill[data-strength-level="1"]{width:25%;background:var(--ui-danger)}
.strength-fill[data-strength-level="2"]{width:50%;background:var(--ui-warning)}
.strength-fill[data-strength-level="3"]{width:75%;background:var(--verde-claro-2)}
.strength-fill[data-strength-level="4"]{width:100%;background:var(--conforme)}
.strength-label{font-size:11.5px;font-weight:800;color:var(--ui-muted);width:70px;flex:0 0 70px;text-align:right}

.password-rules{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.password-rules .rule{
  display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ui-muted);
  transition:color var(--ui-fast) var(--ui-ease);
}
.password-rules .rule-mark{
  display:grid;place-items:center;width:17px;height:17px;flex:0 0 17px;border-radius:50%;
  border:1.5px solid var(--cinza-300);color:#FFF;
  transition:background var(--ui-fast) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease);
}
.password-rules .rule-mark svg{width:11px;height:11px}
.password-rules .rule-ok{color:var(--conforme);font-weight:700}
.password-rules .rule-ok .rule-mark{background:var(--conforme);border-color:var(--conforme)}

.login-kicker{
  display:block;font-size:10.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ui-brand);margin-bottom:6px;
}
.btn-block{width:100%;margin-top:18px}

.hero-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;position:relative;z-index:1;max-width:520px}
.hero-points li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;color:rgba(255,255,255,.9)}
.hero-points svg{width:16px;height:16px;margin-top:3px;padding:5px;box-sizing:content-box;border-radius:50%;background:rgba(255,255,255,.17)}
.hero-points strong{display:block;font-size:14px;color:#FFF;margin-bottom:2px}
.hero-points span{font-size:12.5px;line-height:1.5}

@media (min-width:1024px){
  /* A coluna do formulário deixa de ser uma faixa branca com um cartão solto
     no meio: ela ganha fundo próprio e centro óptico. */
  .first-access-page .login-panel{background:var(--cinza-050);display:flex;align-items:center}
  .first-access-page .login-card{width:100%}
}

/* Histórico de alterações. */
.history-modal{display:flex;flex-direction:column;gap:4px}
.history-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.history-modal-head h3{margin:4px 0 4px}
.history-modal-head p{margin:0;font-size:12.5px;color:var(--ui-muted)}
.history-details{
  margin:12px 0 0;padding:10px 12px;border-radius:var(--ui-radius-sm);
  background:var(--ui-surface-muted);border:1px solid var(--ui-border);
  font-size:12.5px;color:var(--cinza-700);
}
.history-diff{display:grid;gap:8px;margin-top:14px;max-height:52vh;overflow:auto}
.history-diff-row{
  display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,1.3fr) 18px minmax(0,1.3fr);
  gap:10px;align-items:center;padding:10px 12px;
  border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface);
}
.history-field{font-size:12px;font-weight:800;color:var(--cinza-700)}
.history-before{font-size:12.5px;color:var(--ui-muted);text-decoration:line-through;text-decoration-color:rgba(198,59,59,.5);word-break:break-word}
.history-arrow{color:var(--ui-muted);text-align:center;font-weight:800}
.history-after{font-size:12.5px;font-weight:700;color:var(--ui-brand-dark);word-break:break-word}
.history-snapshot{display:grid;gap:6px;margin-top:14px;max-height:52vh;overflow:auto}
.history-snapshot-row{
  display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,1.6fr);gap:12px;align-items:baseline;
  padding:9px 12px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-muted);
}
.history-snapshot-row span{font-size:12px;color:var(--ui-muted)}
.history-snapshot-row strong{font-size:12.5px;word-break:break-word}

@media (max-width:767px){
  .history-diff-row{grid-template-columns:1fr;gap:4px}
  .history-arrow{display:none}
  .history-before::before{content:"Antes: ";text-decoration:none;font-weight:700}
  .history-after::before{content:"Depois: ";font-weight:700;color:var(--ui-muted)}
  .cell-actions{width:auto}
  .summary-chips{gap:6px}
  .detail-actions{justify-content:stretch}
  .detail-actions .btn{flex:1}
  /* A última seção não pode ficar sob a navegação inferior. */
  .page-content{padding-bottom:96px}
}

@media (prefers-reduced-motion:reduce){
  .row-menu-panel{animation:none}
  .quick-card:hover,.list-item:hover{transform:none}
  .desktop-sidebar-v2:hover{transition-delay:0ms}
}