/* ================================================================
   CONTAINER DE PÁGINA — Centralização 760px via Opção B do anti-pattern
   wrapper st.markdown (KB feedback_streamlit_markdown_wrapper_anti_pattern
   + matriz pre-flight feedback_pre_flight_estrutural_streamlit).

   Histórico:
   - V1 (2026-05-18 Nyx): wrapper div via st.markdown('<div>')+'</div>'.
     FALHOU — Streamlit auto-fecha cada fragmento, wrapper fica VAZIO.
   - V2 (2026-05-19 manhã): Opção A (span marker + `:has() ~`).
     FALHOU — combinador `~` não atravessa stTabs > stTabPanel, conteúdo
     das 6 tabs (Aparência/Drive/...) manteve largura nativa.
   - V3 (2026-05-19 tarde): Opção B = `st.container(key="arh_cfg_main")`
     em configuracoes_visual.py + seletor `.st-key-arh_cfg_main` aqui.
     CSS atinge stVerticalBlock REAL que envolve o stTabs.

   Requer Streamlit ≥1.36 (`st.container(key=...)`). Projeto roda 1.55. OK.

   Classes legadas (.arh-cfg-settings-panel, .arh-cfg-main-content) mantidas
   vazias para não quebrar referências históricas.
   ================================================================ */
/* R-D29 2026-05-24 (Matias): centralização migrada para arquivo único
   `pages/_internal/styles/_centralization.py`. A key arh_cfg_main continua
   sendo emitida via st.container(key='arh_cfg_main') — apenas o CSS saiu daqui. */

/* Classes legadas — INTENCIONALMENTE VAZIAS (V1+V2 não funcionaram) */
.arh-cfg-settings-panel {
  /* V1 legado — wrapper st.markdown não funciona em Streamlit. */
}
.arh-cfg-main-content {
  /* V2 legado — combinador `~` não atravessa stTabs. */
}

/* ── Story 2.9 — Configurações DNA B Tabs (namespace .cfg-*) ─────────── */
/* LAV Ciclo 1 (2026-05-09): settings-section + panel-header + setting-row  */

/* ── Panel Header (kicker + h1 + desc por aba) ────────────────────────── */
/* Proto: margin-bottom:28px, padding-bottom:20px (section .panel-header) */
.cfg-panel-header {
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-subtle);
}

.cfg-panel-kicker {
font-size: 0.70em;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
}

/* Proto usa h1.panel-title — Streamlit não permite h1 via HTML raw,
   div com role="heading" aria-level="1" equivale semanticamente. */
.cfg-panel-title {
font-size: 1.15em;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}

.cfg-panel-desc {
font-size: 0.85em;
color: var(--text-secondary);
}

/* ── Todo badge (Em breve) — cor warning amarela fiel ao proto ──────────
   Proto usa .todo-badge: rgba(217,160,32,.15)/state-warning/border warning.
   Versão anterior usava surface-sunken/text-muted (neutro) — corrigido. */
.cfg-todo-badge {
display: inline-block;
font-size: 0.68em;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
padding: 1px 6px;
border-radius: 3px;
background: rgba(217, 160, 32, 0.15);
color: var(--state-warning);
border: 1px solid rgba(217, 160, 32, 0.25);
margin-left: 6px;
vertical-align: middle;
}

/* ── Settings Section (card wrapper) ─────────────────────────────────── */
.cfg-settings-section {
background: var(--surface-raised);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 16px;
}

/* ── Section Header ─────────────────────────────────────────────────── */
.cfg-section-header {
padding: 14px 20px 12px;
border-bottom: 1px solid var(--border-subtle);
}

.cfg-section-title {
font-size: 0.92em;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}

.cfg-section-desc {
font-size: 0.80em;
color: var(--text-muted);
}

/* ── Setting Row (flex inline: label-left, control-right) ─────────────── */
.cfg-setting-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--border-subtle);
gap: 16px;
}

.cfg-setting-row:last-child {
border-bottom: none;
}

.cfg-setting-label {
font-size: 0.88em;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 1px;
}

.cfg-setting-hint {
font-size: 0.78em;
color: var(--text-muted);
}

.cfg-setting-control {
flex-shrink: 0;
}

/* ── Drive status row (flex: label-left, badge-right) ───────────────────
   Proto: .drive-status-row = flex, space-between, 16px 20px, flex-wrap */
.cfg-drive-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── Sync item list ──────────────────────────────────────────────────── */
.cfg-sync-list {
  padding: 0 20px 16px;
}

.cfg-sync-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
  gap: 8px;
}

.cfg-sync-item:last-child {
  border-bottom: none;
}

/* ── Drive buttons row ───────────────────────────────────────────────── */
.cfg-drive-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 20px;
}

/* ── Metric Grid ─────────────────────────────────────────────────────── */
/* Proto: .metrics-grid padding:16px 20px. Removido margin-left via 20px inline. */
.cfg-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 20px;
}

.cfg-metric-card {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  padding: 12px 14px;
}

.cfg-metric-label {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cfg-metric-value {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--text-primary);
}

.cfg-metric-sub {
  font-size: 0.75em;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ── RAM Bar ─────────────────────────────────────────────────────────── */
.cfg-ram-bar-wrap {
  padding: 4px 0 16px 0;
}

.cfg-ram-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.80em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.cfg-ram-bar-track {
  height: 8px;
  background: var(--surface-sunken);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.cfg-ram-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--state-success);
  transition: width 400ms ease;
}

.cfg-ram-bar-fill.warn {
  background: var(--state-warning);
}

.cfg-ram-bar-fill.danger {
  background: var(--state-danger);
}

.cfg-ram-bar-thresholds {
  display: flex;
  justify-content: space-between;
  font-size: 0.72em;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Toggle HTML (for disabled a11y items) ───────────────────────────── */
.cfg-toggle-wrap {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
}

.cfg-toggle-track {
position: absolute;
inset: 0;
background: var(--border-default);
border-radius: 22px;
}

.cfg-toggle-track::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
left: 3px;
top: 3px;
background: var(--surface-base);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ── Chip Group ──────────────────────────────────────────────────────── */
/* margin-top:6px removido — dentro de setting-control o gap vem do
   setting-row (gap:16px). Quando standalone, aplicar via wrapper. */
.cfg-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cfg-chip {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.80em;
  font-weight: 500;
  border: 1px solid var(--border-default);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.cfg-chip:hover {
  border-color: var(--accent-brand);
  color: var(--accent-brand-text);
}

.cfg-chip.selected {
  background: rgba(29, 78, 216, 0.12);
  border-color: var(--accent-brand);
  color: var(--accent-brand-text);
  font-weight: 600;
}

.cfg-chip:focus-visible {
  outline: 2px solid var(--focus-ring);  /* FIX-H4: --focus-ring AAA (era --accent-brand 2.0:1 FALHA dark) */
  outline-offset: 2px;
}

/* ── Reduced Motion injection (AD-5 — desativa transições quando ativo) ─ */
/* Scoped apenas a elementos com custom CSS da app (.arh-*, .dir-*, .ua-*,
   .cfg-*). Transições nativas Streamlit não são afetadas por esta classe.
   Ressalva documentada: componentes Streamlit internos continuam com
   animação nativa (fora do escopo desta implementação — AD-5). */
.cfg-reduced-motion *,
.cfg-reduced-motion *::before,
.cfg-reduced-motion *::after {
  transition: none !important;
  animation: none !important;
}

/* stTabs underline override REMOVIDO 2026-05-26:
   st.tabs nativo substituído por Pill Group custom (Modelo B canônico).
   CSS de override BaseWeb era dead code — vetado por root cause analysis. */

/* ── Fim Story 2.9 — stTabs substituído por Pill Group Modelo B ─────── */