/* ════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — FINAL TOUCHES (Story 2.4.3)
   Fonte: docs/design-system/proposals/2026-05-07-design-system-final.md
   Extraído de: pages/_internal/styles/_final_touches.py (259 LOC)

   ESCOPO: CROSS-TELA (global)
   Cobre padrões DS transversais que qualquer tela pode instanciar:
     1. Error State — 3 variantes (404 / 500 / sync)
     2. Modal overlay + modal card + animação modalCardIn 160ms
        + override st.dialog() nativo [data-testid="stDialog"]
     3. Tooltip CSS-only via [data-tooltip]::after (variante top + bottom)
     4. Button tokens secondary + primary cross-mode (dark/:root + light)
        — override global [data-testid="stBaseButton-*"]
   Toast (st.toast() nativo) NÃO tem CSS aqui — Constitutional Art. IV.
   Page transition — em _layout.py, NÃO aqui.

   Tokens consumidos (todos em THEME_TOKENS / design_tokens.py):
     --state-danger, --state-warning, --alert-*-bg, --alert-*-bdr,
     --backdrop-color, --surface-raised, --border-default, --shadow-elevated,
     --tooltip-bg, --tooltip-text, --tooltip-border, --radius-base, --radius-md,
     --btn-secondary-*, --btn-primary-*
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Error State — 3 variantes (404 / 500 / sync) ───────────────────
   Cenarios reais documentados (Art. IV):
   404: rota Streamlit invalida · 500: excecao Python · sync: Drive falhou
   Estrutura: <div class="error-state" data-variant="404|500|sync"> */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 12px;
  min-height: 200px;
  border-radius: var(--radius-md, 8px);
  background: var(--surface-base);
}
.error-state .error-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 4px;
}

/* Danger: variantes 404 + 500 */
.error-state[data-variant="404"] .error-icon,
.error-state[data-variant="500"] .error-icon { color: var(--state-danger); }

/* Warning: variante sync */
.error-state[data-variant="sync"] .error-icon { color: var(--state-warning); }

.error-state .error-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-base, 4px);
}
.error-state[data-variant="404"] .error-code,
.error-state[data-variant="500"] .error-code {
  background: var(--alert-danger-bg);
  border: 1px solid var(--alert-danger-bdr);
  color: var(--state-danger);
}
.error-state[data-variant="sync"] .error-code {
  background: var(--alert-warning-bg);
  border: 1px solid var(--alert-warning-bdr);
  color: var(--state-warning);
}
.error-state .error-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.error-state .error-desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.6;
  margin: 0;
}
.error-state .error-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: center;
}

/* ── 2. Modal overlay + card + animacao (160ms ease-out) ────────────────
   Decisao: scale(0.97) sutil (3%), 160ms = limiar instantaneo.
   Sem blur no backdrop: custo GPU extra nao justificado (Nyx §3).
   Estrutura: <div class="modal-overlay" role="dialog" aria-modal="true"> */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--backdrop-color);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

@keyframes modalCardIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1);    }
}

.modal-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-elevated);
  padding: 24px;
  width: 100%;
  max-width: 400px;
  margin: 16px;
}
.modal-overlay.is-open .modal-card {
  animation: modalCardIn 160ms ease-out forwards;
}

/* st.dialog() nativo Streamlit 1.36+ — override de animacao */
[data-testid="stDialog"] > div {
  animation: modalCardIn 160ms ease-out;
}

/* Reduced motion — anula animacoes, preserva visibilidade (AC7 / WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .modal-card                         { animation: none !important; }
  .modal-overlay                      { transition: none !important; }
  [data-testid="stDialog"] > div      { animation: none !important; }
}

/* ── 3. Tooltip CSS-only via data-tooltip (18 linhas) ───────────────────
   Decisao: custom ganha sobre title="" em todos os criterios (Nyx §5).
   Regra a11y: todo elemento com data-tooltip DEVE ter aria-label equivalente.
   Variante bottom: data-tooltip-pos="bottom" para elementos perto do topo. */
[data-tooltip] { position: relative; }

[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--tooltip-bg);
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease; z-index: 200;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 11px); left: 50%; transform: translateX(-50%);
  background: var(--tooltip-bg); color: var(--tooltip-text);
  border: 1px solid var(--tooltip-border);
  border-radius: 4px; font-size: 12px; font-weight: 400;
  line-height: 1.4; padding: 5px 9px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease; z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after { opacity: 1; }
/* Focus visible para tooltip (Echo P1 parcial) */
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after { opacity: 1; }

/* Variante bottom */
[data-tooltip-pos="bottom"]::before {
  bottom: auto; top: calc(100% + 6px);
  border-top-color: transparent; border-bottom-color: var(--tooltip-bg);
}
[data-tooltip-pos="bottom"]::after {
  bottom: auto; top: calc(100% + 11px);
}

/* Reduced motion — transicao de tooltip */
@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::before,
  [data-tooltip]::after { transition: none !important; }
}

/* ── 4. Button tokens — app_shell.py nao chama inject_unified_styles() ─────
   ui_components.py _UNIFIED_CSS nao e injetado no shell Onda 2 (apenas app.py
   legado e auth.py o chamam). Sem esta regra, Streamlit aplica sua paleta dark
   propria em ambos os modos. Regra base consome tokens do modo ativo (:root);
   bloco [data-theme="light"] sobrescreve via especificidade (0,1,0) > (0,0,0).
   Tokens fonte: design_tokens.py THEME_TOKENS['dark'/'light'] (secao Buttons).
   Confirmado Ciclo 2 LAV Geral: rgb(13,26,43) = --btn-secondary-bg dark
   aparecia em light mode porque :root nunca era sobrescrito. */
[data-testid="stBaseButton-secondary"] {
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-text) !important;
  font-weight: 500 !important;
  min-height: 38px !important;
  border-radius: var(--radius-base) !important;
  box-shadow: var(--btn-secondary-shadow) !important;
  transition: background 120ms ease !important;
}
[data-testid="stBaseButton-secondary"]:hover {
  background: var(--btn-secondary-bg-hover) !important;
  border-color: var(--btn-secondary-border) !important;
}
[data-testid="stBaseButton-secondary"] p {
  color: var(--btn-secondary-text) !important;
}
/* Light-mode explicit override — especificidade (0,1,0)+(0,1,0) = (0,2,0) */
[data-theme="light"] [data-testid="stBaseButton-secondary"] {
  background: var(--btn-secondary-bg) !important;
  border-color: var(--btn-secondary-border) !important;
  color: var(--btn-secondary-text) !important;
  box-shadow: var(--btn-secondary-shadow) !important;
}
[data-theme="light"] [data-testid="stBaseButton-secondary"]:hover {
  background: var(--btn-secondary-bg-hover) !important;
}
[data-theme="light"] [data-testid="stBaseButton-secondary"] p {
  color: var(--btn-secondary-text) !important;
}
/* Primary button — cobertura completa cross-mode */
[data-testid="stBaseButton-primary"] {
  background: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
  font-weight: 700 !important;
  min-height: 40px !important;
  border-radius: var(--radius-base) !important;
  box-shadow: var(--btn-primary-shadow) !important;
  transition: background 120ms ease, box-shadow 120ms ease !important;
}
[data-testid="stBaseButton-primary"]:hover {
  background: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-bg-hover) !important;
}
[data-testid="stBaseButton-primary"] p {
  color: var(--btn-primary-text) !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * BaseWeb inputs/selects override — R-Onda3.1 (2026-05-26)
 *
 * Streamlit BaseWeb tem cores hardcoded (#0F1B2B fundo) que ignoram tokens
 * semânticos. Sem override, no light mode os campos permanecem dark mesmo
 * com data-theme="light" ativo no documentElement.
 *
 * Solução: força background/color por data-theme — alcança st.text_input,
 * st.selectbox, st.date_input cross-tela. `!important` necessário pra superar
 * especificidade interna do BaseWeb.
 *
 * Aplica APENAS quando o wrapper tem nosso prefixo (.arh-* family) OU dentro
 * de data-testid Streamlit oficial. NÃO toca em popovers/menus internos do
 * BaseWeb que mantêm próprio look.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Light mode override — fundo claro + texto escuro */
[data-theme="light"] [data-baseweb="input"],
[data-theme="light"] [data-baseweb="base-input"] {
  background-color: var(--surface-sunken) !important;
  border-color: var(--border-default) !important;
}
[data-theme="light"] [data-baseweb="input"] input,
[data-theme="light"] [data-baseweb="base-input"] input,
[data-theme="light"] [data-baseweb="input"] textarea,
[data-theme="light"] [data-baseweb="base-input"] textarea {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] [data-baseweb="input"] input::placeholder,
[data-theme="light"] [data-baseweb="base-input"] input::placeholder {
  color: var(--text-muted) !important;
}

/* Select (st.selectbox) — wrapper externo + chevron */
[data-theme="light"] [data-baseweb="select"] > div:first-child,
[data-theme="light"] [data-baseweb="select"] [class*="control"] {
  background-color: var(--surface-sunken) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] [data-baseweb="select"] svg {
  color: var(--text-muted) !important;
  fill: var(--text-muted) !important;
}
[data-theme="light"] [data-baseweb="select"] [class*="placeholder"] {
  color: var(--text-muted) !important;
}

/* Dark mode override — paridade explícita (evita herança baseweb) */
[data-theme="dark"] [data-baseweb="input"],
[data-theme="dark"] [data-baseweb="base-input"] {
  background-color: var(--surface-sunken) !important;
  border-color: var(--border-default) !important;
}
[data-theme="dark"] [data-baseweb="input"] input,
[data-theme="dark"] [data-baseweb="base-input"] input {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] [data-baseweb="select"] > div:first-child,
[data-theme="dark"] [data-baseweb="select"] [class*="control"] {
  background-color: var(--surface-sunken) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] [data-baseweb="select"] svg {
  color: var(--text-muted) !important;
  fill: var(--text-muted) !important;
}