/* Tokens globais do KPI Web. Os tokens --kpi-cor-* do skin são sobrescritos em runtime pelo serviço de tema. */
:root {
  --kpi-ds-lista-hover: #36485a;
  --kpi-ds-toolbar-hover: #36485a;
  --kpi-ds-menubar-hover: #36485a;
  /* ADR-0026: os tokens do shell apontam para o design system Dark Modern (ds.css). */
  --kpi-fonte: var(--kpi-ds-fonte);
  --kpi-cor-fundo: #101820;
  --kpi-cor-titulo: var(--kpi-ds-texto-forte);
  --kpi-cor-titulo-fundo: #1f3a5f;
  --kpi-cor-indicador: var(--kpi-ds-texto);
  --kpi-cor-indicador-fundo: #2b2b2b;
  --kpi-shell-fundo: var(--kpi-ds-fundo-editor);
  --kpi-shell-superficie: var(--kpi-ds-fundo-barra);
  --kpi-shell-borda: var(--kpi-ds-borda);
  --kpi-shell-texto: var(--kpi-ds-texto);
  --kpi-shell-texto-fraco: var(--kpi-ds-texto-fraco);
  --kpi-shell-destaque: var(--kpi-ds-foco);
  --kpi-shell-erro: var(--kpi-ds-erro);
  --kpi-shell-sucesso: var(--kpi-ds-sucesso);
  --kpi-shell-altura-topo: 28px;
  --kpi-shell-altura-status: 18px;
  --kpi-shell-largura-central: 280px;
  /* Lateral do KPI Config (ADR-0023), agora no visual do Explorer do VS Code (ADR-0026). */
  --kpi-lateral-fonte: var(--kpi-ds-fonte-corpo) var(--kpi-ds-fonte);
  --kpi-lateral-altura-linha: var(--kpi-ds-altura-linha-lista);
  --kpi-lateral-fundo: var(--kpi-ds-fundo-barra);
  --kpi-lateral-campo: var(--kpi-ds-campo);
  --kpi-lateral-borda: var(--kpi-ds-borda);
  --kpi-lateral-texto: var(--kpi-ds-texto);
  --kpi-lateral-texto-fraco: var(--kpi-ds-texto-fraco);
  --kpi-lateral-destaque: var(--kpi-ds-foco);
  --kpi-lateral-selecao: var(--kpi-ds-lista-selecao);
  --kpi-lateral-selecao-texto: var(--kpi-ds-lista-selecao-texto);
  --kpi-lateral-realce: var(--kpi-ds-lista-hover);
  --kpi-lateral-aba-ativa: var(--kpi-ds-fundo-editor);
  /* Semântica do KPI, sem equivalente no VS Code: ficam. */
  --kpi-lateral-pasta: #e3b341;
  --kpi-lateral-item: #8b9bb0;
  --kpi-lateral-item-aberto: #4caf50;
  --kpi-lateral-aviso: var(--kpi-ds-aviso);
  --kpi-lateral-fundo-aviso: var(--kpi-ds-valid-aviso);
  --kpi-lateral-erro: var(--kpi-ds-erro);
  color-scheme: dark;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--kpi-shell-fundo);
  color: var(--kpi-shell-texto);
  font-family: var(--kpi-fonte);
  font-size: var(--kpi-ds-fonte-corpo);
  overflow: hidden;
}

/* O display (grid) vem do :host do próprio elemento; aqui só a altura. */
kpi-shell-app {
  height: 100%;
}

.kpi-pwa {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(30px, env(safe-area-inset-bottom));
  z-index: 10000;
  max-width: min(360px, calc(100vw - 48px));
  padding: 12px;
  border: 1px solid var(--kpi-shell-borda);
  border-radius: 8px;
  background: var(--kpi-shell-superficie);
  color: var(--kpi-shell-texto);
  box-shadow: 0 4px 18px rgb(0 0 0 / 18%);
}

.kpi-pwa[hidden], .kpi-pwa [hidden] { display: none; }
.kpi-pwa p { margin: 0 0 8px; line-height: 1.5; }
.kpi-pwa p:last-child { margin-bottom: 0; }
.kpi-pwa button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--kpi-shell-destaque);
  border-radius: 4px;
  background: var(--kpi-shell-superficie);
  color: var(--kpi-shell-texto);
  font: inherit;
  cursor: pointer;
}
.kpi-pwa button:focus-visible { outline: 2px solid var(--kpi-shell-destaque); outline-offset: 2px; }

.kpi-splash {
  color: var(--kpi-shell-texto, #ccc);
  font-family: var(--kpi-fonte, 'Segoe UI', sans-serif);
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--kpi-shell-fundo);
}

.kpi-splash__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.kpi-splash__titulo {
  font-size: var(--kpi-ds-fonte-h2, 16px);
  font-weight: 600;
}

.kpi-splash__msg {
  color: var(--kpi-shell-texto-fraco);
  font-size: var(--kpi-ds-fonte-corpo);
  max-width: 80vw;
  text-align: center;
}