/* O atributo hidden SEMPRE vence display custom (flex/grid/…).
   Sem isto, qualquer regra `display:` do autor sobrepõe o hidden do UA
   — classe de bug já vista em .ov-alerts e .breadcrumb. */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════
   DESIGN TOKENS — fonte única de verdade do tema
   Trocar este bloco = trocar o tema inteiro.
═══════════════════════════════════════════ */
:root {
  /* Superfícies (mais escura → mais clara) */
  --bg:            #0f1117;
  --surface:       #1a1d27;
  --surface-2:     #121520;
  --surface-3:     #1f2235;
  --border:        #2d3148;
  --border-strong: #374151;

  /* Texto */
  --text:        #e2e8f0;
  --text-strong: #f9fafb;
  --text-muted:  #9ca3af;
  --text-subtle: #6b7280;
  --text-faint:  #4b5563;
  --white:       #ffffff;

  /* Marca */
  --primary:        #6366f1;
  --primary-hover:  #4f46e5;
  --primary-active: #4338ca;
  --primary-fg:     #a5b4fc;

  /* Sucesso */
  --success:        #34d399;
  --success-strong: #059669;
  --success-fg:     #6ee7b7;
  --success-bg:     #022c22;
  --success-border: #065f46;

  /* Aviso */
  --warning:        #fbbf24;
  --warning-strong: #f59e0b;
  --warning-bg:     #1c1508;
  --warning-border: #78350f;

  /* Perigo */
  --danger:        #f87171;
  --danger-strong: #ef4444;
  --danger-fg:     #fca5a5;
  --danger-bg:     #1f0a0a;
  --danger-border: #7f1d1d;

  /* Acentos */
  --info:          #60a5fa;
  --accent-purple: #a78bfa;
  --accent-cyan:   #22d3ee;

  /* Deltas de variação (TEXTO): custo que sobe = ruim (vermelho), que cai = bom
     (verde). Apontam para tokens que passam 4.5:1 como texto nos DOIS temas. No
     claro, o verde de fill (--success #059669) falha sobre branco (3.8:1), então
     --delta-down é sobrescrito para o -fg (mais escuro) lá. Ver bloco do tema claro. */
  --delta-up:   var(--danger);
  --delta-down: var(--success);

  /* Primária com alpha (overlays/realces) */
  --primary-soft:  rgba(99, 102, 241, 0.12);

  /* Layout (independente do tema) */
  --header-h:   57px;
  --sidebar-w:  188px;

  color-scheme: dark;
}

/* ═══════════════════════════════════════════
   TEMA CLARO — só redefine tokens, nenhuma regra de componente
═══════════════════════════════════════════ */
[data-theme="light"] {
  --bg:            #f4f5fa;
  --surface:       #ffffff;
  --surface-2:     #eef0f6;
  --surface-3:     #e4e7f0;
  --border:        #d6dae8;
  --border-strong: #c0c6d8;

  --text:        #1a1d27;
  --text-strong: #0f1117;
  --text-muted:  #5a6275;
  --text-subtle: #7c8499;
  --text-faint:  #a3aabb;
  --white:       #ffffff;

  --primary:        #4f46e5;
  --primary-hover:  #4338ca;
  --primary-active: #3730a3;
  --primary-fg:     #4f46e5;

  --success:        #059669;
  --success-strong: #047857;
  --success-fg:     #047857;
  --success-bg:     #d1fae5;
  --success-border: #6ee7b7;

  --warning:        #d97706;
  --warning-strong: #b45309;
  --warning-bg:     #fef3c7;
  --warning-border: #fcd34d;

  --danger:        #dc2626;
  --danger-strong: #b91c1c;
  --danger-fg:     #b91c1c;
  --danger-bg:     #fee2e2;
  --danger-border: #fca5a5;

  --info:          #2563eb;
  --accent-purple: #7c3aed;
  --accent-cyan:   #0891b2;

  /* delta-down sobre branco: o verde de fill (--success #059669) só dá 3.8:1 como
     texto; o -fg (#047857) dá 5.5:1. delta-up herda --danger (#dc2626, 4.8:1 → ok). */
  --delta-down: var(--success-fg);

  --primary-soft:  rgba(79, 70, 229, 0.10);

  color-scheme: light;
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ═══════════════════════════════════════════
   LAYOUT — HEADER
═══════════════════════════════════════════ */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}
header h1 { font-size: 18px; font-weight: 600; color: var(--text-strong); margin-right: auto; }
header span { font-size: 12px; color: var(--text-subtle); }
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.top-settings {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.locale-switcher,
.currency-switcher,
.decimals-switcher,
.currency-rate {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-subtle);
  font-size: 11px;
}
.theme-toggle {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 6px 9px;
  transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.locale-switcher select,
.currency-switcher select,
.decimals-switcher select,
.currency-rate input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  padding: 5px 7px;
}
.currency-rate {
  display: none;
}
.currency-rate.show {
  display: flex;
}
.currency-rate input {
  width: 76px;
}

/* ═══════════════════════════════════════════
   LAYOUT — SIDE MENU
═══════════════════════════════════════════ */
.side-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  z-index: 20;
  overflow-y: auto;
}
.side-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted);
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.side-menu-item:hover,
.side-menu-item.active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}
.side-menu-group.active .side-menu-item {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}
.side-submenu {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 10px 20px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.side-menu-group.active .side-submenu {
  display: flex;
}
.side-submenu button {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.25;
  padding: 8px 9px;
  text-align: left;
}
.side-submenu button:hover,
.side-submenu button.active {
  background: rgba(99,102,241,0.14);
  color: var(--text);
}

body.has-sidebar main {
  margin-left: var(--sidebar-w);
}

/* ─── Sidebar colapsada (trilho de ícones) ─────────────────
   Redefine --sidebar-w no body: o main acompanha sem regra extra. */
body.side-collapsed { --sidebar-w: 56px; }
body.side-collapsed .side-menu { padding: 14px 8px; }
body.side-collapsed .side-menu button span { display: none; }
body.side-collapsed .side-submenu { display: none; }
body.side-collapsed .side-menu-item,
body.side-collapsed .side-menu .side-menu-collapse {
  justify-content: center;
}
body.side-collapsed .side-menu-collapse i { transform: rotate(180deg); }
body.side-collapsed .side-section-head { display: none; }

/* Seções narrativas da sidebar (área + pergunta como subtítulo) */
.side-section { margin-top: 16px; }
.side-section-head { padding: 0 10px 6px; }
.side-section-head .t {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.side-menu-collapse {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  padding: 4px 8px 10px;
}
.side-menu-collapse:hover { color: var(--text); }

/* ─── Breadcrumb (rollup explícito) ───────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 12px;
}
.breadcrumb .crumb {
  background: transparent;
  border: none;
  padding: 2px 4px;
  font-size: 12px;
  color: var(--text-subtle);
  cursor: pointer;
  border-radius: 4px;
}
.breadcrumb button.crumb:hover { color: var(--primary); background: var(--surface-3); }
.breadcrumb .crumb.current { color: var(--text); font-weight: 600; cursor: default; }
.breadcrumb .crumb-sep { color: var(--text-subtle); opacity: 0.6; }

/* ─── Faixa de alertas do hub ─────────────────────────────── */
.ov-alerts[hidden] { display: none; }
/* Contêiner: empilha um ou mais alertas (anomalia de custo, taxa de erro…). */
.ov-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.ov-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}
.ov-alert i { width: 16px; height: 16px; color: var(--danger); flex: none; }
.ov-alert button {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.ov-alert button:hover { background: var(--danger); color: white; }

/* Boas-vindas / sem dados no hub */
.ov-empty[hidden] { display: none; }
.ov-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 56px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.ov-empty i { width: 40px; height: 40px; color: var(--text-faint); }
.ov-empty i.ov-empty-spin { color: var(--primary); animation: ov-empty-spin 0.9s linear infinite; }
@keyframes ov-empty-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ov-empty i.ov-empty-spin { animation: none; } }

/* Estado vazio page-level em Custos/Consumo: esconde o conteúdo, mantém a filter-bar
   (p/ ajustar período no caso "janela vazia") e o próprio banner. */
.tab-empty { margin-top: 12px; }
.costs-page.is-empty > :not(.filter-bar):not(.tab-empty),
.consumption-page.is-empty > :not(.filter-bar):not(.tab-empty) { display: none; }
.ov-empty h2 { margin: 4px 0 0; font-size: 18px; }
.ov-empty p { margin: 0; max-width: 420px; color: var(--text-muted); font-size: 14px; }
.ov-empty-actions { display: flex; gap: 10px; margin-top: 10px; }
.ov-empty-actions button {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ov-empty-actions button:hover { border-color: var(--primary); }
.ov-empty-actions .ov-empty-primary { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Card de domínio sem KPI numérico (Gestão) — ícone como valor */
.domain-icon i { width: 22px; height: 22px; }

/* ─── Insights do hub: veredito + economia estimada + drill ─── */
.insights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.insight-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}
.insight-card > i {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex: none;
}
.insight-body { flex: 1; min-width: 0; }
.insight-title { font-size: 13px; font-weight: 600; color: var(--text); }
.insight-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.insight-side {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.insight-savings {
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--success);
}
.insight-savings small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-subtle);
}
.insight-side button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.insight-side button:hover { border-color: var(--primary); color: var(--text); }

/* ─── Anomalia → causa (painel do dia selecionado) ─── */
.anomaly-item.clickable { cursor: pointer; transition: border-color 0.2s; }
.anomaly-item.clickable:hover { border-color: var(--primary); }
.anomaly-item.selected { outline: 2px solid var(--primary); outline-offset: -2px; }
.anomaly-caret { color: var(--text-subtle); display: flex; align-items: center; }
.anomaly-caret i { width: 16px; height: 16px; }

#anomaly-cause h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cause-day-total { font-size: 13px; font-weight: 600; color: var(--danger); }
.cause-hint { font-size: 12px; color: var(--text-subtle); margin: 6px 0 14px; }
.cause-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .cause-grid { grid-template-columns: 1fr; } }
.cause-block h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  margin-bottom: 8px;
}
.cause-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  margin-bottom: 6px;
  font-size: 12px;
}
.cause-row.clickable { cursor: pointer; transition: border-color 0.2s; }
.cause-row.clickable:hover { border-color: var(--primary); }
.cause-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cause-value { font-weight: 700; color: var(--text); }
.cause-delta { font-size: 11px; }
.cause-delta.up { color: var(--danger); }
.cause-delta.down { color: var(--success); }
.cause-empty { font-size: 12px; color: var(--text-subtle); padding: 6px 2px; }

/* ─── Explore-bar: tiles de navegação do canvas (gerados do TAB_META) ─── */
.explore-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 22px;
}
.explore-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 2px;
}
.explore-title-gap { margin-left: 14px; }
.explore-tile {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.explore-tile i { width: 14px; height: 14px; }
.explore-tile:hover {
  border-color: var(--primary);
  color: var(--text);
  transform: translateY(-1px);
}
.explore-tile.active {
  border-color: var(--primary);
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

/* Painel inline: a aba-filha selecionada é embutida abaixo da explore-bar. */
.explore-host {
  margin: 0 0 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.explore-host .tab-content.explore-embedded { padding: 0; }

/* ═══════════════════════════════════════════
   LAYOUT — API BAR
═══════════════════════════════════════════ */
.api-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 32px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.api-bar input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--text);
  font-size: 13px;
  font-family: monospace;
}
.api-bar input:focus { outline: none; border-color: var(--primary); }
.api-bar button {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}
.api-bar button:hover    { background: var(--primary); }
.api-bar button:disabled { background: var(--border-strong); cursor: not-allowed; }
.api-bar .hint { font-size: 11px; color: var(--text-subtle); white-space: nowrap; }

/* ═══════════════════════════════════════════
   LAYOUT — PERIOD FILTER
═══════════════════════════════════════════ */
.period-bar {
  background: transparent;
  border-bottom: 0;
  padding: 0;
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.period-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 132px;
}
.period-field.api-key-filter {
  min-width: min(360px, 100%);
  flex: 1;
}
.period-field label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.period-field label span {
  color: var(--primary);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.period-field input,
.period-field select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
}
.period-field select[multiple] {
  min-height: 112px;
  padding: 6px;
}
.period-field select[multiple] option {
  padding: 6px 8px;
}

.checkbox-dropdown {
  position: relative;
}
.checkbox-dropdown > button {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.checkbox-dropdown.open > button {
  border-color: var(--primary);
}
.checkbox-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  padding: 6px;
  max-height: 230px;
  overflow: auto;
  display: none;
  z-index: 60;
}
.checkbox-dropdown.open .checkbox-dropdown-menu {
  display: block;
}
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.checkbox-option:hover {
  background: var(--surface);
}
.checkbox-option input {
  width: auto;
  accent-color: var(--primary);
}
.period-field input:focus,
.period-field select:focus {
  outline: none;
  border-color: var(--primary);
}
/* Intervalo (filter-bar): label em cima; select + inputs inline (mês/início/fim) em linha */
.interval-field { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.interval-field > label { flex-basis: 100%; }
.interval-field .filter-period { min-width: 120px; }
.interval-field input { min-width: 130px; }
.interval-field input[hidden] { display: none; }

/* ═══════════════════════════════════════════
   PAGE — CUSTOS
═══════════════════════════════════════════ */
.costs-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.consumption-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.efficiency-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.management-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* A escala global de texto tem 3 tons (text › muted › subtle). O 3º tom
     (--text-subtle) é tonal demais para texto legível: falha 4.5:1 (AA) sobre
     as superfícies escuras E claras. Aqui, na Gestão, o tom "subtle" é
     recalibrado para o piso AA sobre bg/surface/surface-2 — sem colapsar no
     "muted" (mantém o degrau de hierarquia). Texto subtle que pousa em
     --surface-3 (pílulas/badges) migra para --text-muted caso a caso, pois o
     3º tom não cabe em AA na superfície mais clara sem virar o 2º. */
  --text-subtle: #838b9c;
}
[data-theme="light"] .management-page { --text-subtle: #646c80; }
.management-layout {
  display: block;
}
.management-view {
  display: none;
}
.management-view.active {
  display: block;
}
.management-head {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 0;
}
.management-head h2 {
  align-items: center;
  color: var(--text-strong);
  display: flex;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
  gap: 9px;
  margin: 0 0 3px;
}
.management-head h2 i { color: var(--text-muted); }
/* pill de contagem ao lado do título (igual ao protótipo) */
.mgmt-count {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  /* muted (não subtle): pílula sobre --surface-3, onde o 3º tom não atinge 4.5:1 */
  color: var(--text-muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.mgmt-count[hidden] { display: none; }
/* botão primário índigo (ações de criar) + ghost (secundárias) nos headers de gestão */
.management-head .btn-primary,
.management-head-actions .btn-primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 9px;
  color: #fff;
  font-weight: 600;
  padding: 9px 15px;
}
.management-head .btn-primary:hover,
.management-head-actions .btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.management-head .btn-ghost,
.management-head-actions .btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-muted);
  font-weight: 550;
  padding: 9px 14px;
}
.management-head .btn-ghost:hover,
.management-head-actions .btn-ghost:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.management-head p,
.management-item p,
.management-team p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 4px 0;
}
.management-head button,
.management-actions button,
.management-team button,
.management-modal-actions button {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  padding: 8px 11px;
}
.management-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.management-head button:hover,
.management-actions button:hover,
.management-team button:hover {
  border-color: var(--primary);
}
.management-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.management-concept-note {
  background: rgba(96,165,250,0.08);
  border: 1px solid rgba(96,165,250,0.22);
  border-radius: 8px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 4px;
  margin-bottom: 14px;
  padding: 10px 12px;
}
.management-concept-note strong {
  color: var(--info);
  font-size: 13px;
}
.management-filters input,
.management-filters select,
.management-form input,
.management-form textarea,
.management-form select,
.management-settings-grid input,
.management-settings-grid select,
.management-budget-card input,
.management-form-grid input,
.management-form-grid select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 9px 10px;
}
/* ── Filtros de gestão: busca que cresce + selects como chips ── */
.management-filters input[type="search"],
.management-filters select {
  background-color: var(--surface-2);
  height: 38px;
}
/* busca: cresce para ocupar a linha, com lupa embutida */
.management-filters input[type="search"] {
  flex: 1 1 240px;
  min-width: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  padding-left: 34px;
}
/* selects: chip compacto com chevron custom (sem a seta nativa) */
.management-filters select {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 550;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.management-filters select:hover { border-color: var(--border-strong); color: var(--text); }
.management-filters input[type="search"]:focus-visible,
.management-filters select:focus-visible { border-color: var(--primary); outline: none; }

.management-list {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.management-item {
  align-items: flex-start;
  border-bottom: 1px solid var(--surface-3);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px;
}
.management-item:last-child {
  border-bottom: 0;
}
.management-item h3,
.management-team h3,
.management-budget-card h3 {
  color: var(--text);
  font-size: 15px;
  margin: 0 0 6px;
}
.mgmt-status {
  color: var(--success);
  font-size: 12px;
  margin-left: 6px;
}
.management-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.management-progress {
  background: var(--surface-3);
  border-radius: 5px;
  height: 10px;
  margin: 8px 0;
  overflow: hidden;
}
.management-progress span {
  background: linear-gradient(90deg, var(--success), var(--warning));
  display: block;
  height: 100%;
}

/* ── Cards profissionais de gestão (projetos/chaves) ── */
.mgmt-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Grade lado a lado (projetos): 2+ colunas em telas largas, 1 no estreito.
   min(100%,…) evita overflow quando o painel é mais estreito que a coluna. */
.mgmt-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  align-items: stretch;
}
/* Em célula estreita o split main+lateral aperta as métricas — empilha a lateral
   embaixo, com o botão ocupando a largura e o menu ao lado. */
.mgmt-cards-grid .mgmt-card { flex-direction: column; }
.mgmt-cards-grid .mgmt-card-side {
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* Alternador de visão (Grade ↔ Lista) — reusa .mgmt-segment, alinhado à direita dos filtros */
.mgmt-view-toggle { margin: 0 0 0 auto; }
/* Barra de ferramentas da lista de Times (segmento sem filtros próprios) */
.mgmt-list-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.mgmt-list-toolbar .mgmt-view-toggle { margin: 0; }
.mgmt-view-toggle button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.mgmt-view-toggle button i { width: 15px; height: 15px; }

/* ── Tabela de comparação (visão "Comparar" das listagens) ── */
.mgmt-tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.mgmt-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.mgmt-tbl thead th {
  text-align: left; white-space: nowrap; cursor: pointer; user-select: none;
  color: var(--text-subtle); font-size: 0.7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.mgmt-tbl thead th:hover { color: var(--text); }
.mgmt-tbl thead th.sorted { color: var(--text); }
.mgmt-tbl th.num, .mgmt-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mgmt-th-arrow { display: inline-block; width: 1em; margin-left: 2px; color: var(--primary-fg); }
.mgmt-tbl tbody tr { cursor: pointer; transition: background .1s ease; }
.mgmt-tbl tbody tr:hover { background: var(--surface-2); }
.mgmt-tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--surface-3); color: var(--text); }
.mgmt-tbl tbody tr:last-child td { border-bottom: 0; }
.mgmt-tbl-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mgmt-tbl-name strong { font-weight: 600; color: var(--text-strong); }
/* Mini-barra de budget na célula de tabela (visão Lista): trilho + % colorido, alinhada à direita */
.mgmt-tbl-meter { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.mgmt-tbl-meter-track { width: 64px; height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.mgmt-tbl-meter-track i { display: block; height: 100%; border-radius: 4px; }
.mgmt-tbl-meter-track i.g { background: var(--success); }
.mgmt-tbl-meter-track i.w { background: var(--warning); }
.mgmt-tbl-meter-track i.d { background: var(--danger); }
.mgmt-tbl-meter-val { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 0.78rem; min-width: 2.6em; text-align: right; }

.mgmt-card {
  --rail: var(--border-strong);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  padding: 16px 18px 16px 20px;
  /* trilho de status à esquerda — inset respeita o radius e não clipa o menu (overflow visível) */
  box-shadow: inset 3px 0 0 var(--rail);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mgmt-card:hover {
  border-color: var(--surface-3);
  box-shadow: inset 3px 0 0 var(--rail), 0 1px 0 rgba(255,255,255,0.02), 0 12px 30px -18px rgba(0,0,0,0.7);
  transform: translateY(-1px);
}
.mgmt-card.is-ok     { --rail: var(--success); }
.mgmt-card.is-warn   { --rail: var(--warning); }
.mgmt-card.is-danger { --rail: var(--danger); }
.mgmt-card.is-idle   { --rail: var(--text-faint); }
@media (prefers-reduced-motion: reduce) { .mgmt-card:hover { transform: none; } }
.mgmt-card-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.mgmt-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.mgmt-card-head h3 {
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.mgmt-card-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mgmt-card-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin: 0;
}
.mgmt-meta-muted {
  color: var(--text-subtle);
  font-size: 12px;
}

/* Logos de provedor */
.mgmt-provider-logos { display: inline-flex; align-items: center; gap: 6px; }
.mgmt-provider-logo,
.mgmt-provider-chip {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.mgmt-provider-logo img { width: 13px; height: 13px; object-fit: contain; opacity: .92; }
.mgmt-provider-chip { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }

/* Badges (status / ambiente) */
.mgmt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.mgmt-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mgmt-badge-ok      { color: var(--success); background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.25); }
.mgmt-badge-warn    { color: var(--warning); background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.25); }
.mgmt-badge-danger  { color: var(--danger);  background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.28); }
.mgmt-badge-muted   { color: var(--text-muted); background: var(--surface-3); border-color: var(--border); }
.mgmt-badge-env     { color: var(--text-muted); background: var(--surface-3); border-color: var(--border); text-transform: capitalize; }
.mgmt-badge-env-production { color: var(--info); background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.25); }

/* Métricas tabuladas */
.mgmt-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 2px;
}
.mgmt-metric { display: flex; flex-direction: column; gap: 3px; }
.mgmt-metric-label {
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mgmt-metric strong { color: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mgmt-metric-ok strong, strong.mgmt-metric-ok { color: var(--success); }
.mgmt-metric-warn strong, strong.mgmt-metric-warn { color: var(--warning); }
.mgmt-metric-danger strong, strong.mgmt-metric-danger { color: var(--danger); }

.mgmt-key-mask {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
}
.mgmt-budget-line { display: flex; flex-direction: column; gap: 4px; }
.mgmt-budget-line .management-progress { margin: 0; max-width: 320px; }

/* Score como anel proporcional (conic-gradient) — comunica antes de ler o dígito */
.mgmt-score-ring {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--surface-3) 0);
}
.mgmt-score-ring::after {
  content: ""; position: absolute;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--surface-2);
}
.mgmt-score-ring span {
  position: relative; z-index: 1;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; font-weight: 700; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
/* Anel grande p/ o tile de score no detalhe */
.mgmt-score-ring-lg { width: 46px; height: 46px; }
.mgmt-score-ring-lg::after { width: 34px; height: 34px; }
.mgmt-score-ring-lg span { font-size: 14px; }
/* Anel pequeno p/ célula de tabela (visão Lista) */
.mgmt-score-ring-sm { width: 26px; height: 26px; }
.mgmt-score-ring-sm::after { width: 19px; height: 19px; }
.mgmt-score-ring-sm span { font-size: 9.5px; }
/* Anel no header do card (visão Grade) — empurrado p/ a direita; o trilho dá a cor, o anel o dígito */
.mgmt-card-head-score { margin-left: auto; }

/* ── Stat tiles (páginas de detalhe): o número como herói ── */
.mgmt-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}
.mgmt-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.mgmt-stat-label {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-subtle);
  font-size: 0.66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.mgmt-stat-label i { width: 13px; height: 13px; }
.mgmt-stat-val {
  color: var(--text);
  font-size: 1.4rem; font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.mgmt-stat.is-ok .mgmt-stat-val     { color: var(--success); }
.mgmt-stat.is-warn .mgmt-stat-val   { color: var(--warning); }
.mgmt-stat.is-danger .mgmt-stat-val { color: var(--danger); }
/* O tile de score abriga o anel no lugar do número */
.mgmt-stat-score { gap: 9px; }

/* Header do detalhe com mais presença: badge de identidade maior */
.mgmt-key-detail-header .mgmt-key-detail-id .mgmt-provider-logo {
  width: 42px; height: 42px; border-radius: 11px;
}
.mgmt-key-detail-header .mgmt-key-detail-id .mgmt-provider-logo i { width: 21px; height: 21px; }
.mgmt-key-detail-header .mgmt-key-detail-id .mgmt-provider-logo img { width: 22px; height: 22px; }

/* Mini-meter de budget (projeto/chave): gasto real vs teto, cor por faixa */
.mgmt-meter { display: flex; flex-direction: column; gap: 5px; max-width: 420px; margin-top: 4px; }
.mgmt-meter-head { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--text-subtle); }
.mgmt-meter-val { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mgmt-meter-track { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.mgmt-meter-track i { display: block; height: 100%; border-radius: 4px; }
.mgmt-meter-track i.g { background: var(--success); }
.mgmt-meter-track i.w { background: var(--warning); }
.mgmt-meter-track i.d { background: var(--danger); }

.mgmt-meta-danger { color: var(--danger-fg); }

/* Célula de usuário na tabela de Usuários: avatar + nome (mesmo vocabulário dos Times) */
.mgmt-user-cell { display: inline-flex; align-items: center; gap: 9px; }
.mgmt-user-name { display: inline-flex; align-items: center; gap: 7px; }

/* View Usuários — header com ação, resumo por status, toolbar de busca/filtro */
.mgmt-users-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mgmt-userstat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 0.78rem;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
}
.mgmt-userstat strong { font-variant-numeric: tabular-nums; color: var(--text); }
.mgmt-userstat.is-ok     { border-color: var(--success-border); background: var(--success-bg); }
.mgmt-userstat.is-warn   { border-color: var(--warning-border); background: var(--warning-bg); }
.mgmt-userstat.is-danger { border-color: var(--danger-border);  background: var(--danger-bg); }
.mgmt-users-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.mgmt-users-search {
  flex: 1; min-width: 200px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px;
}
.mgmt-users-toolbar .mgmt-segment { margin: 0; }
/* Cabeçalho do modal de edição de usuário */
.mgmt-edit-user-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mgmt-edit-user-head strong { color: var(--text-strong); }

/* View Auditoria — trilha SaaS (quem fez o quê) */
.mgmt-audit-note { margin: 0 0 12px; font-size: 0.78rem; }
.mgmt-audit-search { flex: 1; min-width: 200px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; }
.mgmt-audit-cat { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; }
.mgmt-audit-action { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.mgmt-audit-restype { color: var(--text-subtle); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
.mgmt-audit-details > summary { cursor: pointer; color: var(--primary-fg); font-size: 0.8rem; }
.mgmt-audit-meta { margin: 8px 0 4px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--surface-3); border-radius: 6px; font-size: 11px; max-width: 380px; overflow-x: auto; white-space: pre; }
.mgmt-audit-ua { color: var(--text-subtle); font-size: 11px; margin-top: 4px; overflow-wrap: anywhere; max-width: 380px; }
.mgmt-audit-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; color: var(--text-subtle); font-size: 0.78rem; }
.mgmt-audit-pager button { width: 28px; height: 28px; border: 1px solid var(--border); background: var(--bg); border-radius: 6px; color: var(--text-muted); cursor: pointer; }
.mgmt-audit-pager button:disabled { opacity: 0.4; cursor: default; }

/* ─── Página de detalhe de chave operacional (drill-down na view de Chaves) ─── */
#mgmt-keys-list-view[hidden],
#mgmt-key-detail-view[hidden] { display: none; }

.mgmt-key-detail-bar { margin-bottom: 14px; }

/* ── Detalhe como card com trilho de saúde (redesign v2) ── */
.mgmt-key-detail {
  --rail: var(--border-strong);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: inset 3px 0 0 var(--rail);
  padding: 18px 22px 22px;
}
.mgmt-key-detail.is-ok     { --rail: var(--success); }
.mgmt-key-detail.is-warn   { --rail: var(--warning); }
.mgmt-key-detail.is-danger { --rail: var(--danger); }
.mgmt-key-detail.is-idle   { --rail: var(--text-faint); }

/* Hierarquia de ação no header: primária índigo, destrutiva em vermelho, resto neutro */
.provider-row-actions .btn-primary {
  background: var(--primary); border: 1px solid var(--primary); color: #fff;
  border-radius: 9px; padding: 8px 14px; font-weight: 600; cursor: pointer;
}
.provider-row-actions .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.provider-row-actions .btn-danger {
  background: transparent; border: 1px solid rgba(248,113,113,.3); color: var(--danger-fg);
  border-radius: 9px; padding: 8px 13px; cursor: pointer;
}
.provider-row-actions .btn-danger:hover { background: rgba(248,113,113,.1); border-color: var(--danger); }


/* Cross-link no detalhe (ex.: projeto da chave → detalhe do projeto) */
.mgmt-detail-link { color: var(--primary-fg); cursor: pointer; }
.mgmt-detail-link:hover { text-decoration: underline; }

/* Banner contextual de gestão (budget perto do teto / chave parada) */
.mgmt-detail-banner {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 12px 15px; border-radius: 11px; font-size: 0.85rem;
}
.mgmt-detail-banner i { width: 18px; height: 18px; flex: none; }
.mgmt-detail-banner .mdb-text { flex: 1; color: var(--text); }
.mgmt-detail-banner.warn   { background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25); color: var(--warning); }
.mgmt-detail-banner.danger { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.28); color: var(--danger-fg); }

/* Ponte para a análise — manda pro dashboard/logs, sem trazer o gráfico pro detalhe */
.mgmt-detail-bridge {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 13px 16px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.mgmt-detail-bridge .mdg-ico { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--surface-3); color: var(--primary-fg); }
.mgmt-detail-bridge .mdg-ico i { width: 16px; height: 16px; }
.mgmt-detail-bridge .mdg-text { flex: 1; font-size: 0.85rem; color: var(--text); }
.mgmt-detail-bridge .mdg-text small { display: block; font-size: 0.72rem; color: var(--text-subtle); margin-top: 2px; }
.mgmt-detail-bridge .mdg-cta { background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--primary-fg); padding: 7px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mgmt-detail-bridge .mdg-cta:hover { border-color: var(--primary); }

/* Linhas de cross-link (ex.: chaves deste projeto) */
.mgmt-detail-rows { display: flex; flex-direction: column; gap: 8px; }
.mgmt-detail-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 13px; cursor: pointer; box-shadow: inset 3px 0 0 var(--rr, transparent);
  transition: border-color .12s ease;
}
.mgmt-detail-row:hover { border-color: var(--border-strong); }
.mgmt-detail-row.is-ok     { --rr: var(--success); }
.mgmt-detail-row.is-warn   { --rr: var(--warning); }
.mgmt-detail-row.is-danger { --rr: var(--danger); }
.mgmt-detail-row .mdr-meta { margin-left: auto; display: flex; align-items: center; gap: 13px; }
.mgmt-detail-row .mdr-v { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 0.8rem; color: var(--text); font-variant-numeric: tabular-nums; }
.mgmt-detail-row .mdr-sub { font-size: 0.72rem; color: var(--text-subtle); }
.mgmt-detail-row .mdr-chev { color: var(--text-faint); }

.mgmt-key-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mgmt-key-detail-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mgmt-key-detail-id h2 { font-size: 1.15rem; margin: 0; word-break: break-word; }
.mgmt-key-detail-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.mgmt-key-detail-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--surface-3);
}
.mgmt-key-detail-section > h3 {
  color: var(--text-subtle);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.mgmt-key-detail-section .mgmt-budget-line { margin-top: 12px; }
.mgmt-key-detail-section .mgmt-budget-line .management-progress { max-width: none; }

/* Subabas por assunto no detalhe (mesmo princípio das subabas de Contas) */
.mgmt-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 16px; padding-top: 20px; border-top: 1px solid var(--surface-3); }
.mgmt-subtab {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--surface-3); border-radius: 999px;
  color: var(--text-subtle); cursor: pointer; font-size: 0.84rem; font-weight: 600; padding: 6px 12px;
}
.mgmt-subtab:hover { color: var(--text); }
.mgmt-subtab.active { background: color-mix(in srgb, var(--primary) 16%, transparent); border-color: var(--primary); color: var(--text); }
.mgmt-subtab i { width: 15px; height: 15px; flex: none; }
.mgmt-subtab-count {
  font-size: 0.68rem; font-variant-numeric: tabular-nums; padding: 0 6px;
  border-radius: 999px; background: var(--surface-3); color: var(--text-muted);
}
.mgmt-subtab.active .mgmt-subtab-count { background: var(--surface); }
.mgmt-members-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* ─── Detalhe de projeto (reusa .mgmt-key-detail*) ─── */
#mgmt-projects-list-view[hidden],
#mgmt-project-detail-view[hidden] { display: none; }

.mgmt-key-detail-id .mgmt-provider-logo i { width: 18px; height: 18px; }
.mgmt-proj-desc { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 4px; }

.mgmt-proj-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.mgmt-proj-link {
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mgmt-proj-link .mgmt-card-head { display: flex; align-items: center; gap: 8px; }
.mgmt-proj-link h4 { margin: 0; font-size: 0.9rem; flex: 1; min-width: 0; }

.mgmt-proj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mgmt-chip {
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.76rem;
  padding: 4px 10px;
}
.mgmt-chip-tag { color: var(--text-subtle); }

/* ─── Detalhe de time (reusa .mgmt-key-detail*) ─── */
#mgmt-teams-list-view[hidden],
#mgmt-team-detail-view[hidden] { display: none; }

.mgmt-detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mgmt-detail-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  min-width: 0;
}
.mgmt-detail-list-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mgmt-detail-list-text strong { font-size: 0.85rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgmt-detail-list-text small { font-size: 0.74rem; color: var(--text-subtle); }
.mgmt-detail-list-link { cursor: pointer; justify-content: space-between; }
.mgmt-detail-list-link:hover { border-color: var(--primary); }
.mgmt-detail-list-link i { width: 16px; height: 16px; color: var(--text-subtle); flex: none; }

/* Lado direito: ação primária + overflow */
.mgmt-card-side {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}
/* Botão "Ver detalhes" dos cards: secundário/quieto de propósito — o dado do item é o
   protagonista, não o CTA. Vira índigo só no hover/focus. */
.mgmt-btn-primary {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  white-space: nowrap;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.mgmt-btn-primary:hover,
.mgmt-btn-primary:focus-visible {
  border-color: var(--primary);
  color: var(--text);
  background: var(--surface-3);
}
.mgmt-btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  height: 34px;
  width: 34px;
}
.mgmt-btn-icon:hover { border-color: var(--primary); color: var(--text); }
.mgmt-icon { display: block; }

/* Menu overflow */
.mgmt-menu { position: relative; }
.mgmt-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 168px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.7);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.mgmt-menu-pop.open { display: flex; }
.mgmt-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  padding: 8px 10px;
}
.mgmt-menu-item:hover { background: var(--surface-3); }
.mgmt-menu-item.danger { color: var(--danger); }
.mgmt-menu-item.danger:hover { background: rgba(248,113,113,0.12); }
.mgmt-menu-item .mgmt-icon { opacity: .8; }

/* Avatares de time */
.mgmt-avatars { display: flex; margin: 4px 0; padding-left: 6px; }
.mgmt-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: -6px;
}
.mgmt-avatar-more { color: var(--text-subtle); }

/* Marcas da matriz de permissões (sem emoji) */
/* Matriz de permissões — wrapper rolável; cabeçalho e 1ª coluna fixos; células coloridas */
.mgmt-matrix-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: 10px; }
.mgmt-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.mgmt-matrix th, .mgmt-matrix td { border-bottom: 1px solid var(--surface-3); border-right: 1px solid var(--surface-3); padding: 9px 12px; }
.mgmt-matrix thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  color: var(--text-subtle); font-size: 0.7rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; text-align: center; white-space: nowrap;
}
.mgmt-matrix-corner { left: 0; z-index: 3 !important; text-align: left !important; }
.mgmt-matrix-cap {
  position: sticky; left: 0; z-index: 1; background: var(--surface-2);
  text-align: left; font-weight: 600; color: var(--text); white-space: nowrap;
}
.mgmt-matrix-cap small { display: block; color: var(--text-subtle); font-weight: 400; font-family: ui-monospace, Menlo, monospace; font-size: 10px; }
.mgmt-matrix-role.is-custom { color: var(--primary-fg); }
.mgmt-matrix-role.clickable { cursor: pointer; }
.mgmt-matrix-role.clickable:hover { color: var(--text); background: var(--surface-3); }
.mgmt-matrix-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); margin-left: 5px; vertical-align: middle; }
.mgmt-matrix-cell { text-align: center; }
.mgmt-matrix-cell.is-yes { color: var(--success); font-weight: 700; background: var(--success-bg); }
.mgmt-matrix-cell.is-no { color: var(--text-faint); }
.mgmt-matrix tbody tr:hover .mgmt-matrix-cap { background: var(--surface-3); }

/* Superfície de membros nos providers */
.mgmt-members-section { margin-bottom: 18px; }
.mgmt-members-section h4 {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.mgmt-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-3);
  flex-wrap: wrap;
}
.mgmt-member-row:last-child { border-bottom: 0; }
.mgmt-member-id { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.mgmt-member-id small { display: block; color: var(--text-subtle); font-size: 11px; }
.mgmt-member-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.mgmt-member-actions { display: flex; gap: 6px; }
.mgmt-btn-small {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 10px;
}
.mgmt-btn-small:hover { border-color: var(--primary); }
.mgmt-btn-small.danger { color: var(--danger); }
.mgmt-btn-small.danger:hover { border-color: var(--danger); background: rgba(248,113,113,0.1); }
.mgmt-provider-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.mgmt-provider-block h4 { margin: 0; font-size: 14px; color: var(--text); }
.mgmt-provider-member-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mgmt-provider-member-list li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text);
  padding: 4px 0;
  border-bottom: 1px solid var(--surface-3);
}
.mgmt-provider-member-list li:last-child { border-bottom: 0; }
.mgmt-members-notice {
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 12px;
  padding: 9px 11px;
}
.mgmt-members-notice.ok { color: var(--success); background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.25); }
.mgmt-members-notice.bad { color: var(--danger); background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.28); }
.management-error-text { color: var(--danger); font-size: 12px; margin: 4px 0; }

/* Papéis customizados */
.mgmt-cap-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mgmt-cap-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); }
.mgmt-cap-chip.is-more { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mgmt-member-actions { flex: none; }

/* ── Papéis & Permissões — grade de cards (Padrão/Personalizados) + detalhe ── */
.mgmt-roles-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mgmt-roles-toolbar .mgmt-view-toggle { margin: 0; }
.mgmt-role-group { margin-bottom: 20px; }
.mgmt-role-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px;
}
.mgmt-role-group-head > span {
  color: var(--text-subtle); font-size: 0.72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.mgmt-role-lock { width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.mgmt-card-head .mgmt-role-lock { margin-right: 2px; }
/* Detalhe de papel (drill-down) — espelha a página de Projetos (mgmt-key-detail) */
.mgmt-role-detail-body { display: flex; flex-direction: column; gap: 12px; }
.mgmt-role-domain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.mgmt-role-domain-label { color: var(--text-subtle); font-size: 11px; font-weight: 600; min-width: 130px; }
.mgmt-role-full { color: var(--success); font-size: 13px; font-weight: 600; }
.mgmt-role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
}
.mgmt-role-badge i { width: 11px; height: 11px; }
.mgmt-role-badge.is-builtin { color: var(--text-muted); background: var(--surface-3); }
.mgmt-role-badge.is-custom  { color: var(--primary-fg); background: color-mix(in srgb, var(--primary) 14%, transparent); }

/* Picker de capabilities (modal de papel) — linhas alinhadas: domínio à esquerda, caps à direita */
.mgmt-role-caps-grouped {
  display: flex; flex-direction: column;
  max-height: 52vh; overflow-y: auto; margin-top: 4px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.mgmt-cap-group {
  display: grid; grid-template-columns: 172px 1fr; gap: 14px; align-items: center;
  margin: 0; padding: 9px 14px; min-width: 0; border: 0; border-top: 1px solid var(--surface-3);
}
.mgmt-cap-group:first-child { border-top: 0; }
.mgmt-cap-group-all { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.mgmt-cap-group-all strong { color: var(--text); font-size: 13px; font-weight: 600; }
/* Cada cap = [toggle] rótulo, lado a lado, com largura do conteúdo (sem cortar) */
.mgmt-cap-group-items { display: flex; flex-wrap: wrap; gap: 9px 20px; }
.mgmt-cap-pick {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--text-muted); font-size: 13px; white-space: nowrap;
}
.mgmt-cap-pick:hover { color: var(--text); }
/* Toggles (switch) no lugar de checkboxes — inputs continuam type=checkbox */
.mgmt-role-caps-grouped input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
  position: relative; width: 32px; height: 18px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border);
  transition: background .15s ease, border-color .15s ease;
}
.mgmt-role-caps-grouped input[type="checkbox"]::before {
  content: ""; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--text-subtle);
  transition: transform .15s ease, background .15s ease;
}
.mgmt-role-caps-grouped input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.mgmt-role-caps-grouped input[type="checkbox"]:checked::before { transform: translateX(14px); background: #fff; }
.mgmt-role-caps-grouped input[type="checkbox"]:indeterminate { background: var(--primary); border-color: var(--primary); }
.mgmt-role-caps-grouped input[type="checkbox"]:indeterminate::before { transform: translateX(7px); background: #fff; }
.mgmt-role-caps-grouped input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Nota de "reservado / ainda não aplicado" (permissões de chave operacional) */
.management-reserved-note {
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.22);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 14px;
  padding: 9px 11px;
}

@media (max-width: 720px) {
  .mgmt-card { flex-direction: column; }
  .mgmt-card-side { justify-content: flex-end; }
  .mgmt-metrics { gap: 16px; }
}

.management-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.management-budget-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 15px;
}
.mgmt-global-budget-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.mgmt-global-budget-head h3 { margin: 0; }
/* Budgets & Limites — limites consolidados (projeto/time/chave) ordenados por risco */
.mgmt-limit-list { display: flex; flex-direction: column; gap: 8px; }
.mgmt-limit-row {
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); cursor: pointer; transition: border-color .12s ease;
  box-shadow: inset 3px 0 0 var(--border-strong);
}
.mgmt-limit-row:hover { border-color: var(--surface-3); }
.mgmt-limit-row.is-over { box-shadow: inset 3px 0 0 var(--danger); }
.mgmt-limit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mgmt-limit-type {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  color: var(--text-subtle); font-size: 0.66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.mgmt-limit-type i { width: 13px; height: 13px; }
.mgmt-limit-name { color: var(--text-strong); font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgmt-limit-spend { margin-left: auto; font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--text); }
.mgmt-limit-edit { margin-left: auto; display: inline-flex; }
.mgmt-limit-spend + .mgmt-limit-edit { margin-left: 8px; }
.mgmt-limit-row .mgmt-meter { max-width: none; }
.management-team.blue { border-color: rgba(96,165,250,0.35); }
.management-team.green { border-color: rgba(52,211,153,0.35); }
.management-team.yellow { border-color: rgba(251,191,36,0.35); }
.management-permissions-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.management-permissions-card h3 {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}
.management-member-form input,
.management-member-form select,
.management-permissions-card select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  min-height: 36px;
  padding: 8px 10px;
}
.management-member-form button,
.management-permissions-card table button {
  background: var(--primary);
  border: 0;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  min-height: 36px;
  padding: 8px 12px;
}
.management-muted {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 12px;
}
.management-pill {
  background: rgba(79, 70, 229, 0.18);
  border: 1px solid rgba(129, 140, 248, 0.35);
  border-radius: 999px;
  color: var(--primary-fg);
  font-size: 11px;
  margin-left: 6px;
  padding: 2px 6px;
}
.management-budget-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.management-budget-card label,
.management-settings-grid label,
.management-form label,
.management-checks label {
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 6px;
}
.management-budget-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 90px minmax(130px, 1fr) 1fr;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--surface-3);
  color: var(--text-muted);
  padding: 9px 0;
}
.management-budget-row span,
.management-budget-row strong {
  color: var(--text);
}
.management-modal-backdrop {
  align-items: center;
  background: rgba(0,0,0,0.62);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 1000;
}
.management-modal-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 88vh;
  max-width: 620px;
  overflow: auto;
  padding: 16px;
  width: min(92vw, 620px);
}
.management-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.management-form-block {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--surface-3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px 0 0;
}
.management-form-block:first-child {
  border-top: 0;
  padding-top: 0;
}
.management-form-block .management-capability-picker,
.management-form-block .management-tag-picker,
.management-form-block .management-member-picker {
  border-top: 0;
  padding-top: 0;
}
.management-form textarea {
  min-height: 58px;
  resize: vertical;
}
.management-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.management-checks {
  display: flex;
  gap: 14px;
}
.management-provider-picker {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.management-provider-picker-key {
  margin-bottom: 2px;
}
.management-provider-card {
  cursor: pointer;
  min-width: 0;
}
.management-provider-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.management-provider-card-body {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  min-height: 44px;
  padding: 7px 8px;
  transition: border-color 0.16s, background 0.16s, color 0.16s;
}
.management-provider-card:hover .management-provider-card-body,
.management-provider-card input:checked + .management-provider-card-body {
  background: rgba(99,102,241,0.12);
  border-color: var(--primary);
  color: var(--text);
}
.management-provider-logo {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.management-provider-logo img {
  height: 17px;
  object-fit: contain;
  width: 17px;
}
.management-permission-picker {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.management-permission-picker label {
  cursor: pointer;
}
.management-permission-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.management-permission-picker span {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  display: flex;
  justify-content: center;
  min-height: 38px;
  padding: 8px;
}
.management-permission-picker input:checked + span,
.management-permission-picker label:hover span {
  background: rgba(99,102,241,0.12);
  border-color: var(--primary);
  color: var(--text);
}
.management-member-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.management-member-head {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.management-member-head strong {
  color: var(--text);
  font-size: 12px;
}
.management-member-head span {
  color: var(--text-subtle);
  font-size: 11px;
  white-space: nowrap;
}
.management-member-picker p,
.management-empty-note {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}
.management-member-list {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-height: 112px;
  overflow: auto;
}
.management-member-card {
  cursor: pointer;
  min-width: 0;
}
.management-member-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.management-member-card span {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 7px;
  display: flex;
  gap: 8px;
  min-height: 38px;
  padding: 6px 8px;
}
.management-member-card input:checked + span,
.management-member-card:hover span {
  background: rgba(99,102,241,0.12);
  border-color: var(--primary);
}
.management-member-avatar {
  align-items: center;
  background: var(--surface);
  border-radius: 999px;
  color: var(--text);
  display: flex;
  flex: 0 0 24px;
  font-size: 10px;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.management-member-copy {
  align-items: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 1px !important;
  min-height: 0 !important;
  min-width: 0;
  padding: 0 !important;
}
.management-member-card small {
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.management-member-add {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.management-member-add-action {
  grid-template-columns: minmax(0, 1fr) auto;
}
.management-member-add input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 9px;
}
.management-member-add button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  padding: 7px 9px;
  white-space: nowrap;
}
.management-capability-picker,
.management-tag-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.management-capability-dropdown {
  max-width: 100%;
  position: relative;
}
.management-capability-trigger {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 9px;
  width: 100%;
}
.management-capability-dropdown.open .management-capability-trigger {
  border-color: var(--primary);
}
.management-capability-menu {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  display: none;
  left: 0;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1200;
}
.management-capability-dropdown.open .management-capability-menu {
  display: grid;
  gap: 2px;
}
.management-capability-option {
  align-items: center;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  gap: 8px;
  padding: 7px 8px;
}
.management-capability-option:hover {
  background: var(--surface);
}
.management-capability-option input {
  accent-color: var(--primary);
  flex: 0 0 auto;
  width: auto;
}
.management-dropdown-add {
  border-top: 1px solid var(--surface-3);
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 4px;
  padding-top: 6px;
}
.management-dropdown-add input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 6px 8px;
}
.management-dropdown-add button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  padding: 6px 8px;
}
.management-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 26px;
}
.management-team-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.management-member-chip {
  align-items: center;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  padding: 5px 7px 5px 10px;
}
.management-member-chip button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 18px;
  justify-content: center;
  padding: 0;
  width: 18px;
}
.management-checks-wrap {
  flex-wrap: wrap;
}
.management-warning {
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 8px;
  color: var(--warning);
  padding: 10px;
}
.management-dialog-text {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.management-provider-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.management-provider-action-card {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto;
  padding: 10px;
}
.management-provider-actions span {
  color: var(--text);
  font-weight: 700;
}
.management-provider-actions button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 7px 9px;
}
.management-provider-actions button.danger {
  border-color: rgba(248,113,113,0.45);
  color: var(--danger-fg);
}
.management-provider-actions select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  padding: 7px 9px;
}
.management-provider-actions button:hover {
  background: rgba(99,102,241,0.12);
  border-color: var(--primary);
  color: var(--text);
}
.management-provider-actions button.danger:hover {
  background: rgba(248,113,113,0.12);
  border-color: var(--danger);
  color: var(--danger-fg);
}
.management-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.management-modal-actions .mgmt-btn-primary {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.management-modal-actions .mgmt-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.management-toast {
  background: var(--surface-2);
  border: 1px solid var(--success);
  border-radius: 8px;
  bottom: 24px;
  color: var(--text);
  padding: 12px 14px;
  position: fixed;
  right: 24px;
  z-index: 1000;
}
/* Paginação de tabelas de dados (ex.: Registros de uso no Consumo). */
.data-pagination {
  align-items: center;
  color: var(--text-subtle);
  display: flex;
  font-size: 12px;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}
.data-pagination button {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 7px 10px;
}
.data-pagination button:hover:not(:disabled) { border-color: var(--primary); color: var(--text); }
.data-pagination button:disabled { cursor: not-allowed; opacity: 0.45; }
/* Barra de filtros unificada (gerada por UI.initFilterBars).
   Une a caixa do antigo .costs-filter-bar com o layout flex do .overview-filters. */
.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 24px;
}
.filter-bar .period-field { min-width: 150px; }
.costs-kpis { margin-bottom: 0; }
.costs-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.costs-section-head h2 {
  margin-bottom: 0;
}
.costs-chart-controls,
.costs-dist-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-subtle);
  font-size: 12px;
}
.costs-chart-controls button,
.costs-dist-tabs button {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  padding: 6px 10px;
  cursor: pointer;
}
.costs-chart-controls button.active,
.costs-dist-tabs button.active,
.costs-chart-controls button:hover,
.costs-dist-tabs button:hover {
  color: var(--white);
  border-color: var(--primary);
  background: var(--primary);
}
.costs-chart-controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.consumption-action-row {
  display: flex;
  justify-content: flex-end;
}
.consumption-action-row button {
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 13px;
  cursor: pointer;
  font-weight: 600;
}
.consumption-inline-summary {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 12px;
}
.usage-heatmap {
  overflow-x: auto;
}
.usage-heat-row {
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(42px, 1fr));
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.usage-heat-row b {
  color: var(--text-subtle);
  font-size: 11px;
}
.usage-heat-head b {
  color: var(--text-muted);
  text-align: center;
}
.usage-heat-cell {
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-3);
}
.usage-heat-cell.empty { background: var(--surface-2); }
.usage-heat-cell.low { background: rgba(52,211,153,0.35); }
.usage-heat-cell.mid { background: rgba(251,191,36,0.55); }
.usage-heat-cell.high { background: rgba(248,113,113,0.75); }
.usage-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-subtle);
  font-size: 11px;
  margin-top: 10px;
}
.usage-legend span {
  width: 18px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.usage-legend .low { background: rgba(52,211,153,0.35); }
.usage-legend .mid { background: rgba(251,191,36,0.55); }
.usage-legend .high { background: rgba(248,113,113,0.75); }
.usage-rank-row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr minmax(80px, auto);
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--surface-3);
}
.usage-rank-row:last-child { border-bottom: none; }
.usage-rank-row strong {
  color: var(--info);
  text-align: right;
}
.usage-rank-button {
  width: 100%;
  background: transparent;
  color: inherit;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.usage-rank-button:hover {
  background: rgba(99,102,241,0.08);
}
.link-button {
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}
tbody tr[onclick] {
  cursor: pointer;
}
tbody tr[onclick]:hover,
tbody tr.active {
  background: rgba(99,102,241,0.08);
}
/* Linhas operáveis por teclado (role="button" tabindex="0"): foco visível. */
tbody tr[onclick]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: rgba(99,102,241,0.08);
}
.consumption-drilldown {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 16px;
}
.drilldown-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.drilldown-kicker {
  color: var(--info);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.drilldown-head h3 {
  color: var(--text);
  font-size: 18px;
  margin: 0;
}
.drilldown-head button {
  width: 32px;
  height: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
}
.drilldown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.drilldown-block {
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 8px;
  padding: 14px;
}
.drilldown-wide {
  grid-column: span 3;
}
.drilldown-block h4 {
  color: var(--text);
  font-size: 13px;
  margin: 0 0 10px;
}
.drilldown-block p,
.drilldown-block li {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.drilldown-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drilldown-block strong {
  color: var(--text);
}
.drilldown-block span {
  color: var(--text-subtle);
}
.drilldown-block .warn {
  color: var(--warning);
  margin-left: 6px;
}
.drilldown-block .danger {
  color: var(--danger);
  margin-left: 6px;
}
.drilldown-model-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--surface-3);
  color: var(--text-muted);
  cursor: pointer;
  padding: 7px 0;
  text-align: left;
}
.drilldown-model-row:last-child {
  border-bottom: 0;
}
.drilldown-model-row:hover span,
.drilldown-model-row:hover strong {
  color: var(--info);
}
.mini-timeline {
  display: flex;
  align-items: end;
  gap: 5px;
  min-height: 62px;
}
.mini-timeline span {
  flex: 1;
  min-width: 8px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--info), var(--primary));
}
.ghost-button {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 7px 10px;
}
.ghost-button:hover {
  border-color: var(--primary);
  color: var(--text);
}
.eff-score-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eff-score-total {
  color: var(--text);
  font-size: 15px;
  margin-bottom: 4px;
}
.eff-score-row {
  display: grid;
  grid-template-columns: minmax(140px, 190px) 1fr 70px;
  gap: 12px;
  align-items: center;
}
.eff-score-row span {
  color: var(--text-muted);
  font-size: 13px;
}
.eff-score-row strong {
  color: var(--text);
  font-size: 13px;
  text-align: right;
}
.eff-score-row small {
  grid-column: 2 / 4;
  color: var(--text-subtle);
  font-size: 11px;
}
.eff-score-track {
  height: 10px;
  background: var(--surface-3);
  border-radius: 5px;
  overflow: hidden;
}
.eff-score-track div {
  height: 100%;
  background: linear-gradient(90deg, var(--danger), var(--warning), var(--success));
  border-radius: 5px;
}
.eff-score-signals {
  color: var(--text-subtle);
  font-size: 11px;
  margin-top: 4px;
  font-style: italic;
}
.eff-score-row-na {
  opacity: 0.6;
}
.eff-score-track-na {
  background: repeating-linear-gradient(45deg, var(--surface-3), var(--surface-3) 4px, transparent 4px, transparent 8px);
}
.eff-score-row-na strong {
  color: var(--text-subtle);
  font-style: italic;
  cursor: help;
}
.eff-na {
  color: var(--text-subtle);
  font-style: italic;
  cursor: help;
  border-bottom: 1px dotted var(--text-subtle);
}
.eff-detail-note {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 14px;
}
.eff-score-pill {
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
}
.eff-score-pill.good {
  background: rgba(52,211,153,0.12);
  color: var(--success);
}
.eff-score-pill.warn {
  background: rgba(251,191,36,0.12);
  color: var(--warning);
}
.eff-score-pill.bad {
  background: rgba(248,113,113,0.12);
  color: var(--danger);
}
.eff-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.eff-insight {
  background: var(--bg);
  border: 1px solid var(--surface-3);
  border-radius: 8px;
  padding: 14px;
}
.eff-insight.high { border-color: rgba(248,113,113,0.45); }
.eff-insight.medium { border-color: rgba(251,191,36,0.45); }
.eff-insight.low { border-color: rgba(52,211,153,0.35); }
.eff-impact {
  color: var(--info);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}
.eff-insight h3 {
  color: var(--text);
  font-size: 14px;
  margin: 0 0 8px;
}
.eff-insight p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.eff-insight strong,
.eff-insight-total strong {
  color: var(--success);
}
.eff-insight-total {
  align-self: stretch;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 14px;
}
.eff-ratio-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 80px minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--surface-3);
  color: var(--text-muted);
  cursor: pointer;
  padding: 9px 0;
  text-align: left;
}
.eff-ratio-row:last-child {
  border-bottom: 0;
}
.eff-ratio-row:hover span,
.eff-ratio-row:hover strong {
  color: var(--info);
}
.eff-ratio-row strong {
  color: var(--text);
}
.eff-ratio-row small {
  color: var(--text-subtle);
}
@media (max-width: 900px) {
  .top-settings { justify-content: flex-start; }
  .management-provider-picker { grid-template-columns: 1fr; }
  .management-permission-picker { grid-template-columns: 1fr; }
  .management-provider-action-card {
    grid-template-columns: 1fr;
  }
  .management-member-add {
    grid-template-columns: 1fr;
  }
  .management-member-add-action {
    grid-template-columns: 1fr;
  }
  .costs-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .drilldown-grid { grid-template-columns: 1fr; }
  .drilldown-wide { grid-column: span 1; }
  .eff-score-row { grid-template-columns: 1fr; }
  .eff-score-row small { grid-column: auto; }
}
@media (max-width: 560px) {
  .data-pagination { align-items: flex-start; flex-direction: column; }
  .management-filters,
  .management-form-grid,
  .management-budget-row { grid-template-columns: 1fr; }
  .management-item { flex-direction: column; }
  .management-actions { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════
   LAYOUT — TABS NAV
═══════════════════════════════════════════ */
.tabs-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.tabs-nav button {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-subtle);
  padding: 14px 18px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-weight: 500;
}
.tabs-nav button:hover  { color: var(--text); }
.tabs-nav button.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ═══════════════════════════════════════════
   LAYOUT — MAIN / TABS
═══════════════════════════════════════════ */
main { padding: 28px 32px; max-width: 1300px; margin: 0 auto; position: relative; }
body.has-sidebar main {
  margin-left: var(--sidebar-w);
  margin-right: 0;
  max-width: none;
}

@media (max-width: 860px) {
  .side-menu {
    position: static;
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    display: flex;
  }
  body.has-sidebar .tabs-nav,
  body.has-sidebar main {
    margin-left: 0;
  }
  body.has-sidebar main { max-width: 1300px; }
}

.tab-content         { display: none; }
.tab-content.active  { display: block; }

/* ═══════════════════════════════════════════
   COMPONENTES — CARDS
═══════════════════════════════════════════ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.cards[hidden] { display: none; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  min-width: 0;          /* permite o item do grid encolher abaixo do conteúdo */
  overflow: hidden;
}
.card .label {
  font-size: 11px;
  /* muted (não subtle): rótulo do KPI; subtle falha 4.5:1 nos dois temas */
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.card .value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* nomes longos (modelo/projeto) truncam em vez de estourar */
}
.card .sub   {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* cards com drill-down para a aba detalhada */
.card-clickable {
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  position: relative;
}
.card-clickable::after {
  content: '↗';
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 13px;
  color: var(--text-subtle);
  opacity: 0;
  transition: opacity 0.18s;
}
.card-clickable:hover,
.card-clickable:focus-visible {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  outline: none;
}
.card-clickable:hover::after,
.card-clickable:focus-visible::after { opacity: 0.8; }

/* Card "Total" é um toggle (revela os Tops), não navegação: sem a seta ↗,
   com um chevron que gira quando expandido. */
#costs-total-card.card-clickable::after { content: none; }
#costs-total-card .label { display: flex; align-items: center; gap: 6px; }
.card-toggle-caret {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--text-subtle);
  transition: transform 0.18s;
}
#costs-total-card.expanded .card-toggle-caret { transform: rotate(180deg); }

/* Rankings: card da dimensão selecionada (cuja lista de tops está aberta). */
#costs-rank-cards .card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary) inset;
}

.card.green  .value { color: var(--success); }
.card.yellow .value { color: var(--warning); }
.card.blue   .value { color: var(--info); }
.card.purple .value { color: var(--accent-purple); }
.card.red    .value { color: var(--danger); }
.card.cyan   .value { color: var(--accent-cyan); }

/* ═══════════════════════════════════════════
   COMPONENTES — SECTION
═══════════════════════════════════════════ */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.section h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section h2 .badge {
  background: var(--primary);
  color: white;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: none;
  letter-spacing: 0;
}

/* ═══════════════════════════════════════════
   COMPONENTES — GRID
═══════════════════════════════════════════ */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }

/* Gráfico com tabela ABAIXO (ex.: distribuição de custos) */
.dist-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ═══════════════════════════════════════════
   COMPONENTES — TABLE
═══════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 11px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 8px 12px 8px;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 11px 8px;
  font-size: 13px;
  border-bottom: 1px solid var(--surface-3);
}
tr:last-child td { border-bottom: none; }
tr:hover td      { background: var(--surface-3); }

/* ═══════════════════════════════════════════
   COMPONENTES — BADGES & PILLS
═══════════════════════════════════════════ */
.model-badge {
  display: inline-block;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-family: monospace;
  color: var(--accent-purple);
}
.pill { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.pill.up   { background: var(--danger-border); color: var(--danger-fg); }
.pill.down { background: var(--success-bg); color: var(--success-fg); }
.pill.same { background: var(--surface-3); color: var(--text-muted); }

/* Selo "Em breve" para seções de preview ainda sem backend */
.badge.soon {
  background: var(--surface-3);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
/* Grupo de controles em preview: visíveis mas inativos */
.preview-disabled { opacity: 0.55; }
.preview-disabled :is(input, select, textarea, button) { cursor: not-allowed; }

/* ═══════════════════════════════════════════
   COMPONENTES — TEXTO COLORIDO
═══════════════════════════════════════════ */
.cost-value   { color: var(--success); font-weight: 600; }
/* No claro o verde de fill falha como texto (3.8:1); usa o -fg (5.5:1). Escuro fica igual. */
[data-theme="light"] .cost-value { color: var(--success-fg); }
.token-value  { color: var(--info); }
.alert-high   { color: var(--danger); font-weight: 600; }
.alert-medium { color: var(--warning); font-weight: 600; }

/* ═══════════════════════════════════════════
   COMPONENTES — BAR INLINE
═══════════════════════════════════════════ */
.bar-inline { height: 6px; background: var(--surface-3); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.bar-inline-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg,var(--primary),var(--accent-purple)); }

/* ═══════════════════════════════════════════
   COMPONENTES — STATE BOX (empty/loading)
═══════════════════════════════════════════ */
.state-box { text-align: center; padding: 50px 20px; color: var(--text-faint); }
.state-box .icon { font-size: 40px; margin-bottom: 10px; }
.state-box p { font-size: 14px; }
.state-box.state-error .icon { color: var(--danger, #ef4444); }
.state-box.state-error button { margin-top: 14px; }

/* Skeleton das listas de gestão enquanto os dados carregam (reusa .skeleton-*) */
.mgmt-skeleton { padding: 8px 0; }
.mgmt-skeleton .skeleton-line { margin-bottom: 16px; }

/* Seletor segmentado (Times | Membros) e roster de membros */
.mgmt-segment { display: inline-flex; gap: 2px; margin: 4px 0 16px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.mgmt-segment button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: 6px; cursor: pointer; }
.mgmt-segment button:hover { color: var(--text); }
.mgmt-segment button.active { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.mgmt-roster-name { display: inline-flex; align-items: center; gap: 8px; }

/* Lista de roadmap "em breve" (Configurações) */
.mgmt-soon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mgmt-soon-list li { font-size: 13px; color: var(--text-muted); }
.mgmt-soon-list strong { color: var(--text); font-weight: 600; }

.accounts-empty {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
}
.accounts-empty-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.accounts-empty-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  font-weight: 700;
  font-size: 13px;
}
.accounts-empty h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}
.accounts-empty p {
  margin: 0;
  max-width: 620px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.accounts-empty-steps {
  display: grid;
  gap: 10px;
}
.accounts-empty-steps div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.accounts-empty-steps strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 13px;
}
.accounts-empty-steps span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.ob-provider-hint.muted {
  color: var(--text-faint);
}
.ob-btn-connect.secondary {
  width: auto;
  margin-top: 10px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

@media (max-width: 760px) {
  .accounts-empty {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════
   COMPONENTES — LOADER SPINNER
═══════════════════════════════════════════ */
.loader {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════
   COMPONENTES — ERROR BOX
═══════════════════════════════════════════ */
.error-msg {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--danger-fg);
  margin-bottom: 20px;
}
.error-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.error-title { font-weight: 600; }
.error-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.error-retry {
  background: var(--danger-border);
  color: var(--danger-fg);
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.error-retry:hover { opacity: 0.85; }
.error-fix {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.error-fix:hover { opacity: 0.9; }
.error-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--danger-fg);
  opacity: 0.9;
}
/* card de credencial recusada na verificação */
.key-provider-card.key-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 1px var(--danger);
}
.error-dismiss {
  background: transparent;
  border: none;
  color: var(--danger-fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.error-dismiss:hover { opacity: 0.7; }
.error-list {
  margin: 8px 0 0;
  padding-left: 18px;
}
.error-list:empty { display: none; }
.error-list li { margin-top: 2px; }

/* ─── Loading overlay + skeleton ─────────────── */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 32px;
  background: color-mix(in srgb, var(--bg, #0b0d16) 72%, transparent);
  backdrop-filter: blur(1.5px);
  z-index: 50;
}
.skeleton-card {
  width: min(100%, 1100px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.skeleton-line, .skeleton-chart, .skeleton-tile {
  border-radius: 8px;
  background: linear-gradient(90deg,
    var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-line { height: 18px; }
.skeleton-line.w40 { width: 40%; }
.skeleton-chart { height: 260px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.skeleton-tile { height: 110px; }
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line, .skeleton-chart, .skeleton-tile { animation: none; }
}

/* ═══════════════════════════════════════════
   COMPONENTES — RANGE TABS
═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   OVERVIEW — barra de filtros (multi-seleção)
═══════════════════════════════════════════ */
.ov-filters-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  margin-right: 4px;
}
.ov-filter { position: relative; }
.ov-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.ov-filter-btn:hover { border-color: var(--primary); }
.ov-filter.has-active .ov-filter-btn {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.ov-filter-count {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 0 6px;
  min-width: 16px;
  text-align: center;
}
.ov-filter-count:empty { display: none; }
/* Seleção única mostra o nome no botão (herdado do antigo checkbox-dropdown). */
.ov-filter-value {
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-filter-value:empty { display: none; }
.ov-filter-caret { font-size: 9px; opacity: 0.7; }
.ov-filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 200px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.ov-filter-menu[hidden] { display: none; }
.ov-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.ov-opt:hover { background: var(--surface-3); }
.ov-opt input { accent-color: var(--primary); cursor: pointer; }
.ov-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-opt-empty {
  padding: 8px;
  font-size: 12px;
  color: var(--text-subtle);
  text-align: center;
}
.ov-filter-clear {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-subtle);
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.ov-filter-clear:hover { color: var(--danger); border-color: var(--danger); }

/* delta no card de total */
.card .sub.delta { font-weight: 600; }
.card .sub.delta.up   { color: var(--delta-up); }   /* gasto subiu = ruim (texto: passa AA nos 2 temas) */
.card .sub.delta.down { color: var(--delta-down); } /* gasto caiu = bom  (texto: passa AA nos 2 temas) */

/* cabeçalho de seção com toggle de dimensão */
.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.section-head-row h2 { margin-bottom: 0; }
.dim-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.dim-toggle button {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.dim-toggle button.active,
.dim-toggle button:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* ═══════════════════════════════════════════
   COMPONENTES — CANVAS
═══════════════════════════════════════════ */
canvas { max-height: 280px; }

/* ═══════════════════════════════════════════
   COMPONENTES — PROJECTION CARDS
═══════════════════════════════════════════ */
.projection-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.proj-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.proj-card .plabel { font-size: 11px; color: var(--text-subtle); margin-bottom: 6px; }
.proj-card .pvalue { font-size: 22px; font-weight: 700; }
.proj-card.optimistic  .pvalue { color: var(--success); }
.proj-card.realistic   .pvalue { color: var(--warning); }
.proj-card.pessimistic .pvalue { color: var(--danger); }

/* ═══════════════════════════════════════════
   COMPONENTES — ANOMALY ITEMS
═══════════════════════════════════════════ */
.anomaly-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--border);
}
.anomaly-item.high   { background: var(--danger-bg); border-color: var(--danger-border); }
.anomaly-item.medium { background: var(--warning-bg); border-color: var(--warning-border); }
.anomaly-item.low    { background: var(--surface); border-color: var(--border); }
.anomaly-icon { font-size: 20px; }
.anomaly-info { flex: 1; }
.anomaly-info .title { font-size: 13px; font-weight: 600; color: var(--text); }
.anomaly-info .desc  { font-size: 12px; color: var(--text-subtle); margin-top: 2px; }
.anomaly-value { font-size: 15px; font-weight: 700; }
.anomaly-item.high   .anomaly-value { color: var(--danger); }
.anomaly-item.medium .anomaly-value { color: var(--warning); }
.anomaly-item.low    .anomaly-value { color: var(--success); }

/* ═══════════════════════════════════════════
   COMPONENTES — COMPARISON BARS
═══════════════════════════════════════════ */
.compare-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--surface-3);
}
.compare-row:last-child { border-bottom: none; }
.compare-label { width: 100px; font-size: 12px; color: var(--text-subtle); }
.compare-bars  { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.compare-bar-wrap { display: flex; align-items: center; gap: 8px; }
.compare-bar-bg   { flex: 1; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.compare-bar-fill { height: 100%; border-radius: 4px; }
.compare-bar-fill.current  { background: var(--primary); }
.compare-bar-fill.previous { background: var(--border-strong); }
.compare-val { font-size: 11px; color: var(--text-muted); width: 70px; text-align: right; }

/* ═══════════════════════════════════════════
   GESTÃO — MAPEAMENTOS
═══════════════════════════════════════════ */
.management-mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.mgmt-mapping-row strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.mgmt-mapping-row small {
  display: block;
  color: var(--text-subtle);
  font-size: 11px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════
   CONTAS — SAÚDE DO SYNC
═══════════════════════════════════════════ */
.provider-sync-health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
}
.provider-sync-health span {
  color: var(--text);
  font-weight: 600;
}
.provider-sync-health small {
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}
.provider-sync-synced {
  border-color: var(--success-border);
  background: var(--success-bg);
}
.provider-sync-partial,
.provider-sync-no_data,
.provider-sync-never_synced {
  border-color: var(--warning-border);
  background: var(--warning-bg);
}
.provider-sync-error {
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

/* ═══════════════════════════════════════════
   SINCRONIZAÇÃO — aba Gestão → Sincronização
═══════════════════════════════════════════ */
.sync-kpis {
  margin-bottom: 18px;
}
.sync-readonly-note {
  color: var(--text-subtle);
  font-size: 12px;
  margin: 0 0 12px;
}
.sync-accounts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sync-account-card {
  margin: 0;
}
.sync-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.sync-account-id {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sync-account-kicker {
  color: var(--text-subtle);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sync-account-name {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.sync-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-faint);
}
.sync-dot-synced  { background: var(--success); }
.sync-dot-syncing { background: var(--info); }
.sync-dot-partial,
.sync-dot-no_data,
.sync-dot-never_synced { background: var(--warning); }
.sync-dot-error   { background: var(--danger); }
.sync-account-meta {
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 4px;
  margin: 10px 0;
}
.sync-account-error {
  color: var(--danger);
  overflow-wrap: anywhere;
}
.sync-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sync-jobs-table {
  margin-top: 12px;
}
.sync-jobs-table table { width: 100%; }
.sync-job-error {
  color: var(--danger);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.sync-jobs-empty {
  color: var(--text-faint);
  font-size: 12px;
  margin-top: 12px;
}
.sync-backfill-card {
  max-width: 420px;
}
.sync-backfill-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 6px;
}
.sync-backfill-fields label {
  color: var(--text-subtle);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 5px;
}
.sync-backfill-fields input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 13px;
  padding: 7px 9px;
}
.sync-backfill-note {
  color: var(--text-faint);
  font-size: 11.5px;
  margin: 4px 0 14px;
}

/* ═══════════════════════════════════════════
   ÍCONES — Lucide (substituem os emojis)
═══════════════════════════════════════════ */
svg.lucide {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.135em;
  flex-shrink: 0;
}
.side-menu-item svg.lucide,
.side-submenu svg.lucide {
  width: 15px;
  height: 15px;
}
.state-box .icon svg.lucide {
  width: 38px;
  height: 38px;
  opacity: 0.7;
}
.cards .label svg.lucide,
.costs-kpis .label svg.lucide {
  margin-right: 4px;
}
h2 svg.lucide {
  margin-right: 4px;
  vertical-align: -0.115em;
}
.sync-job-ok      { color: var(--success); }
.sync-job-partial { color: var(--warning); }
.sync-job-err     { color: var(--danger); }
.sync-ops-section { margin-top: 18px; }
.sync-ops-counts {
  display: flex;
  gap: 8px;
}
.sync-ops-count {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 10px;
}
.sync-ops-queued  { border-color: var(--warning-border); background: var(--warning-bg); }
.sync-ops-running { border-color: var(--border-strong); }
.sync-ops-error   { border-color: var(--danger-border); background: var(--danger-bg); }
.sync-ops-section code {
  background: var(--surface-2);
  border-radius: 5px;
  font-size: 11px;
  padding: 2px 6px;
}

/* ═══════════════════════════════════════════
   MAPEAMENTOS — cards de impacto + drill-down
═══════════════════════════════════════════ */
.mgmt-mapping-cards {
  margin-bottom: 10px;
}
.mgmt-map-drill-hint {
  color: var(--primary);
  font-size: 11px;
  margin-top: 6px;
}
.mgmt-map-note {
  color: var(--text-faint);
  font-size: 12px;
  margin: 4px 0 0;
}
/* Drill-down: lista de recursos detectados — linha = identidade | ações (select + vincular + menu) */
.mgmt-mapping-list { display: flex; flex-direction: column; gap: 8px; }
.mgmt-mapping-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.mgmt-mapping-row.has-suggestion { box-shadow: inset 3px 0 0 var(--success); }
.mgmt-mapping-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.mgmt-mapping-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.mgmt-mapping-actions select {
  min-width: 180px; max-width: 240px; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px;
}
@media (max-width: 720px) {
  .mgmt-mapping-actions { width: 100%; }
  .mgmt-mapping-actions select { flex: 1; max-width: none; }
}
.sync-jobs-table svg.lucide { vertical-align: -0.18em; }
.anomaly-icon svg.lucide { width: 1.2em; height: 1.2em; }
.auth-logo svg.lucide { width: 1em; height: 1em; }

/* Projetos detectados no provedor (não importados) */
.mgmt-card-detected {
  border-style: dashed;
  opacity: 0.92;
}