/* ═══════════════════════════════════════════════════════
   Database Studio — pele Supabase sobre o DS v2
   ═══════════════════════════════════════════════════════
   Âmbito: body[data-page="database-studio"] (DESIGN.md 2 e 11).
   Carrega DEPOIS do theme-v2.css, por isso vence nesta rota
   e só nesta.

   O truque: em vez de repintar componente a componente, esta
   folha remapeia os tokens de ação (--accent e família) para o
   verde Supabase dentro da rota. Botões, anéis de foco, inputs
   e chips do DS ficam verdes de graça, nos dois temas, sem
   tocar em estrutura nem em DOM.

   Regras herdadas: zero literais de cor fora do bloco de
   tokens, zero emojis, zero travessões na copy, light E dark.
   ═══════════════════════════════════════════════════════ */

/* ── Tokens da rota · claro ─────────────────────────────
   O verde de marca do Supabase (#3ecf8e) tem 2.0:1 sobre
   branco: serve para superfícies escuras, não para texto no
   tema claro. O acento claro é o verde fundo da mesma família
   (5.4:1 sobre branco, nos dois sentidos), e o #3ecf8e fica
   reservado para marcas decorativas. */
body[data-page="database-studio"] {
  --accent: #0f7a4d;
  --accent-hover: #0b6640;
  --accent-light: rgba(15, 122, 77, 0.09);
  --accent-glow: rgba(15, 122, 77, 0.20);
  --text-accent: #0f7a4d;

  --dbs-brand: #3fcf8e;              /* verde de marca, só decorativo */
  --dbs-on-accent: #ffffff;          /* texto por cima do acento cheio */
  --dbs-on-danger: #ffffff;          /* texto por cima do vermelho cheio */
  --dbs-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dbs-ui: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --dbs-rail: 248px;
  --dbs-chrome: 232px;               /* cabeçalho da rota + respiro da main-content */
  --dbs-row: 44px;                   /* linha confortável (era 40): mais legível, mais Supabase */
  --dbs-selw: 44px;                  /* largura da coluna de seleção (checkbox) */
}

/* ── Tokens da rota · escuro ────────────────────────────
   Aqui o dark-first do Supabase entra a sério: o verde de
   marca passa a acento (9.4:1 sobre --bg-card) e o preenchido
   leva texto quase preto, como nos botões do Supabase. */
body.dark[data-page="database-studio"] {
  --accent: #3ecf8e;
  --accent-hover: #5cdba4;
  --accent-light: rgba(62, 207, 142, 0.14);
  --accent-glow: rgba(62, 207, 142, 0.28);
  --text-accent: #3ecf8e;

  --dbs-brand: #3ecf8e;
  --dbs-on-accent: #04170e;
  /* No escuro o --danger clareia para #f87171: branco por cima dá 2.4:1, por
     isso o preenchido leva texto escuro, tal como o verde. */
  --dbs-on-danger: #2b0a0a;
}

/* O preenchido do DS assume texto branco sobre o acento; no
   escuro o acento é claro, por isso o texto tem de virar. */
body[data-page="database-studio"] .btn-primary,
body[data-page="database-studio"] .dbs-btn.primary { color: var(--dbs-on-accent); }

/* ── Cabeçalho da rota ──────────────────────────────── */
body[data-page="database-studio"] .dbs-sub {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
body[data-page="database-studio"] .dbs-headtools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Selo de leitura/escrita ────────────────────────────
   Estado, não decoração: a escrita é a única coisa nesta
   página que pode estragar dados de um cliente, por isso é o
   único sítio que usa --danger a cheio. */
body[data-page="database-studio"] .dbs-modebtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--bg-card);
  box-shadow: var(--elev-rest);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}
body[data-page="database-studio"] .dbs-modebtn:hover {
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--line-strong);
}
body[data-page="database-studio"] .dbs-modebtn.on {
  background: var(--danger-bg);
  color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}
body[data-page="database-studio"] .dbs-modebtn:active { transform: scale(0.97); }

/* ── Dropdown de projeto (padrão DESIGN.md 6.5) ─────────
   Nenhum antepassado deste bloco leva overflow: hidden. */
body[data-page="database-studio"] .dbs-dd { position: relative; }
body[data-page="database-studio"] .dbs-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  min-width: 260px;
  max-width: 360px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--bg-card);
  box-shadow: var(--elev-rest);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.15s ease;
}
body[data-page="database-studio"] .dbs-dd-trigger:hover { box-shadow: 0 0 0 1px var(--line-strong); }
body[data-page="database-studio"] .dbs-dd-trigger:disabled { opacity: 0.5; pointer-events: none; }
body[data-page="database-studio"] .dbs-dd-trigger > .dbs-i:first-child { color: var(--accent); flex-shrink: 0; }
body[data-page="database-studio"] .dbs-dd-val {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="database-studio"] .dbs-dd-val.placeholder { color: var(--text-tertiary); font-weight: 500; }
body[data-page="database-studio"] .dbs-dd-car {
  display: inline-flex;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
body[data-page="database-studio"] .dbs-dd.open .dbs-dd-car { transform: rotate(180deg); color: var(--text-primary); }

body[data-page="database-studio"] .dbs-dd-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  width: max-content;
  max-width: 420px;
  z-index: 80;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--elev-overlay);
}
body[data-page="database-studio"] .dbs-dd-pop[hidden] { display: none; }

/* Caixa de procura: fixa no topo do painel, a lista rola por baixo. */
body[data-page="database-studio"] .dbs-dd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-dd-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8125rem;
  outline: none;
}
body[data-page="database-studio"] .dbs-dd-search input::placeholder { color: var(--text-tertiary); }
body[data-page="database-studio"] .dbs-dd-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

body[data-page="database-studio"] .dbs-dd-list { max-height: min(300px, 46vh); overflow-y: auto; }
body[data-page="database-studio"] .dbs-dd-none {
  padding: 14px 10px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-dd-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}
body[data-page="database-studio"] .dbs-dd-opt:hover { background: var(--bg-card-2); color: var(--text-primary); }
body[data-page="database-studio"] .dbs-dd-opt.on { background: var(--accent-light); color: var(--text-accent); }
body[data-page="database-studio"] .dbs-dd-opt.active { background: var(--bg-card-2); color: var(--text-primary); }
body[data-page="database-studio"] .dbs-dd-opt.on.active { background: var(--accent-light); box-shadow: inset 0 0 0 1px var(--accent); }
body[data-page="database-studio"] .dbs-dd-opt mark {
  background: var(--accent-light);
  color: var(--text-accent);
  border-radius: 3px;
  padding: 0 1px;
  font-weight: 700;
}
body[data-page="database-studio"] .dbs-dd-opt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
body[data-page="database-studio"] .dbs-dd-opt-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="database-studio"] .dbs-dd-opt-ref {
  font-family: var(--dbs-mono);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-dd-tick { color: var(--accent); display: inline-flex; flex-shrink: 0; }

/* ── Esqueleto da página: rail + painel ────────────────── */
body[data-page="database-studio"] .dbs {
  display: grid;
  grid-template-columns: var(--dbs-rail) minmax(0, 1fr);
  gap: 12px;
  height: calc(100dvh - var(--dbs-chrome));
  min-height: 440px;
}
/* Lista recolhida: o painel devolve a coluna e ocupa toda a largura
   (espelha o reclaim da Sidebar, adaptado à grelha). O ≡ na barra de tabs reabre. */
body[data-page="database-studio"] .dbs.rail-collapsed { grid-template-columns: minmax(0, 1fr); }
body[data-page="database-studio"] .dbs.rail-collapsed .dbs-rail { display: none; }

/* ── Rail das tabelas ──────────────────────────────────── */
body[data-page="database-studio"] .dbs-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--elev-rest);
}
body[data-page="database-studio"] .dbs-rail-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-rail-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8125rem;
  outline: none;
}
body[data-page="database-studio"] .dbs-rail-search input::placeholder { color: var(--text-tertiary); }
body[data-page="database-studio"] .dbs-rail-search input:disabled { cursor: not-allowed; }
body[data-page="database-studio"] .dbs-rail-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

body[data-page="database-studio"] .dbs-rail-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
body[data-page="database-studio"] .dbs-rail-head {
  padding: 6px 8px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-tbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-secondary);
  font-family: var(--dbs-mono);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
}
body[data-page="database-studio"] .dbs-tbl:hover { background: var(--bg-card-2); color: var(--text-primary); }
body[data-page="database-studio"] .dbs-tbl.active {
  background: var(--accent-light);
  color: var(--text-accent);
  font-weight: 600;
}
body[data-page="database-studio"] .dbs-tbl-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ponto de acento: esta tabela está aberta numa tab. */
body[data-page="database-studio"] .dbs-tbl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
body[data-page="database-studio"] .dbs-tbl.open:not(.active) .dbs-tbl-name { color: var(--text-primary); }
body[data-page="database-studio"] .dbs-tbl-meta {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
body[data-page="database-studio"] .dbs-tbl.active .dbs-tbl-meta { color: inherit; opacity: 0.7; }

/* ── Painel da grelha ──────────────────────────────────── */
body[data-page="database-studio"] .dbs-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--elev-rest);
}
/* O corpo do painel (barra + grelha + rodapé) vive por baixo da barra de tabs;
   só ele é reescrito a cada leitura, a barra de tabs persiste. */
body[data-page="database-studio"] .dbs-pane-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* ── Barra de tabs (segmented control, padrão .vps-tab-bar) ── */
body[data-page="database-studio"] .dbs-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  min-height: 0;
}
body[data-page="database-studio"] .dbs-tabs[hidden] { display: none; }
body[data-page="database-studio"] .dbs-rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--text-secondary);
  cursor: pointer;
  transition: box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}
body[data-page="database-studio"] .dbs-rail-toggle:hover { color: var(--text-primary); box-shadow: 0 0 0 1px var(--line-strong); }
body[data-page="database-studio"] .dbs-rail-toggle[aria-pressed="true"] { background: var(--accent-light); color: var(--text-accent); box-shadow: 0 0 0 1px var(--accent); }
/* Rail = fundo recesso, pills brancas — o registo do segmented control. */
body[data-page="database-studio"] .dbs-tabbar {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  padding: 3px;
  border-radius: 10px;
  background: var(--bg-card-2);
  overflow-x: auto;
}
body[data-page="database-studio"] .dbs-tab {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  padding-right: 2px;
  color: var(--text-secondary);
  white-space: nowrap;
}
body[data-page="database-studio"] .dbs-tab.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--line);
}
body[data-page="database-studio"] .dbs-tab-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 5px 4px 5px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-family: var(--dbs-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
body[data-page="database-studio"] .dbs-tab.active .dbs-tab-main { font-weight: 600; }
body[data-page="database-studio"] .dbs-tab-main > .dbs-i { color: var(--text-tertiary); flex-shrink: 0; }
body[data-page="database-studio"] .dbs-tab.active .dbs-tab-main > .dbs-i { color: var(--accent); }
body[data-page="database-studio"] .dbs-tab-name { overflow: hidden; text-overflow: ellipsis; }
body[data-page="database-studio"] .dbs-tab-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0.6;
}
body[data-page="database-studio"] .dbs-tab-x:hover { opacity: 1; background: var(--danger-bg); color: var(--danger); }
body[data-page="database-studio"] .dbs-tab.active .dbs-tab-x { opacity: 0.85; }
body[data-page="database-studio"] .dbs-tab-x .dbs-i { width: 12px; height: 12px; }
body[data-page="database-studio"] .dbs-tab-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}
body[data-page="database-studio"] .dbs-tab-add:hover { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 0 0 1px var(--line); }

body[data-page="database-studio"] .dbs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
body[data-page="database-studio"] .dbs-bar-id { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-tertiary); }
body[data-page="database-studio"] .dbs-bar-name {
  font-family: var(--dbs-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O popover dos filtros vive aqui dentro: nada de overflow: hidden. */
body[data-page="database-studio"] .dbs-bar-actions { display: flex; align-items: center; gap: 6px; position: relative; }

body[data-page="database-studio"] .dbs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-family: var(--dbs-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}
body[data-page="database-studio"] .dbs-badge.pk { background: var(--accent-light); color: var(--text-accent); }
body[data-page="database-studio"] .dbs-badge.warn { background: var(--warning-bg); color: var(--warning); }
body[data-page="database-studio"] .dbs-badge .dbs-i { width: 12px; height: 12px; }

body[data-page="database-studio"] .dbs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}
body[data-page="database-studio"] .dbs-btn:hover:not(:disabled) { color: var(--text-primary); box-shadow: 0 0 0 1px var(--line-strong); }
body[data-page="database-studio"] .dbs-btn:active:not(:disabled) { transform: scale(0.97); }
body[data-page="database-studio"] .dbs-btn:disabled { opacity: 0.45; pointer-events: none; }
body[data-page="database-studio"] .dbs-btn.primary { background: var(--accent); box-shadow: none; }
body[data-page="database-studio"] .dbs-btn.primary:hover { background: var(--accent-hover); color: var(--dbs-on-accent); box-shadow: none; }
body[data-page="database-studio"] .dbs-btn.danger { color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
body[data-page="database-studio"] .dbs-btn.danger:hover:not(:disabled) { color: var(--dbs-on-danger); background: var(--danger); box-shadow: none; }
/* Valor de ordenação atual, dentro do botão Ordenar (nome + seta). */
body[data-page="database-studio"] .dbs-btn-sub {
  font-family: var(--dbs-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-btn-dir { display: inline-flex; margin-left: -2px; color: var(--accent); }
body[data-page="database-studio"] .dbs-btn-dir .dbs-i { width: 13px; height: 13px; }
body[data-page="database-studio"] .dbs-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--dbs-on-accent);
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
}

/* ── Barra de seleção (aparece com linhas escolhidas) ──── */
body[data-page="database-studio"] .dbs-selbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--accent-light);
}
body[data-page="database-studio"] .dbs-selbar[hidden] { display: none; }
body[data-page="database-studio"] .dbs-selbar-n {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}
body[data-page="database-studio"] .dbs-selbar-actions { display: flex; align-items: center; gap: 6px; }

/* ── Barra de filtros (inline, sempre presente, à Supabase) ── */
body[data-page="database-studio"] .dbs-chips {
  position: relative;                /* âncora do popover "+ Adicionar filtro" */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card-2);
}
body[data-page="database-studio"] .dbs-chips-icon { display: inline-flex; color: var(--text-tertiary); margin-right: 2px; }
/* Chip = botão: clicar edita; o ✕ interno remove. */
body[data-page="database-studio"] .dbs-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 4px 0 9px;
  border: 0;
  border-radius: 7px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--line);
  font: inherit;
  font-size: 0.71875rem;
  color: var(--text-secondary);
  cursor: pointer;
}
body[data-page="database-studio"] .dbs-chip:hover { box-shadow: 0 0 0 1px var(--line-strong); }
body[data-page="database-studio"] .dbs-chip code {
  font-family: var(--dbs-mono);
  font-size: 0.6875rem;
  color: var(--text-accent);
}
body[data-page="database-studio"] .dbs-chip-op { color: var(--text-tertiary); }
body[data-page="database-studio"] .dbs-chip-x {
  display: inline-flex;
  padding: 2px;
  border-radius: 5px;
  color: var(--text-tertiary);
  cursor: pointer;
}
body[data-page="database-studio"] .dbs-chip-x:hover { background: var(--danger-bg); color: var(--danger); }
body[data-page="database-studio"] .dbs-chip-x .dbs-i { width: 12px; height: 12px; }
/* "+ Adicionar filtro": a entrada principal do filtro, inline na barra. */
body[data-page="database-studio"] .dbs-addfilter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px 0 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.71875rem;
  font-weight: 600;
  cursor: pointer;
}
body[data-page="database-studio"] .dbs-addfilter:hover { color: var(--text-accent); background: var(--accent-light); }
body[data-page="database-studio"] .dbs-addfilter .dbs-i { width: 13px; height: 13px; }
body[data-page="database-studio"] .dbs-chip-clear {
  border: 0;
  background: none;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 0.71875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 4px;
}
body[data-page="database-studio"] .dbs-chip-clear:hover { color: var(--danger); }

/* ── Popover de filtro ─────────────────────────────────── */
body[data-page="database-studio"] .dbs-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  width: 280px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--elev-overlay);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body[data-page="database-studio"] .dbs-pop[hidden] { display: none; }
/* Ancorado à esquerda: o popover do "+ Adicionar filtro" na barra de filtros. */
body[data-page="database-studio"] .dbs-pop.dbs-pop-left { left: 0; right: auto; }
body[data-page="database-studio"] .dbs-pop-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-pop-foot { display: flex; justify-content: flex-end; gap: 6px; }

/* ── Campos ────────────────────────────────────────────── */
body[data-page="database-studio"] .dbs-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
body[data-page="database-studio"] .dbs-field[hidden] { display: none; }
body[data-page="database-studio"] .dbs-field > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-field > span em {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
body[data-page="database-studio"] .dbs-field > span em.pk { color: var(--text-accent); }
body[data-page="database-studio"] .dbs-field > span em.fk { color: var(--text-tertiary); }
body[data-page="database-studio"] .dbs-field > span em .dbs-i { width: 11px; height: 11px; }
body[data-page="database-studio"] .dbs-field.col > span {
  text-transform: none;
  letter-spacing: 0;
  flex-wrap: wrap;
}
body[data-page="database-studio"] .dbs-field.col > span code {
  font-family: var(--dbs-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}
body[data-page="database-studio"] .dbs-field-type {
  font-family: var(--dbs-mono);
  font-size: 0.625rem;
  font-style: normal;
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-input {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8125rem;
  outline: none;
  transition: box-shadow 0.15s ease;
}
body[data-page="database-studio"] .dbs-input.mono { font-family: var(--dbs-mono); font-size: 0.75rem; }
body[data-page="database-studio"] .dbs-input:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-light); }
body[data-page="database-studio"] .dbs-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 3px var(--danger-bg); }
/* Chevron próprio: `background-repeat` explícito, senão o shorthand do base
   repete o SVG em mosaico (bug já visto no Cost Calculator). O cinzento do
   traço vive dentro do data URI (um SVG embutido não lê custom properties);
   #a1a1aa é o --text-tertiary do claro e continua legível sobre o cartão
   escuro, por isso serve os dois temas sem duplicar o recurso. */
body[data-page="database-studio"] select.dbs-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px 14px;
  cursor: pointer;
}

/* ── Grelha ────────────────────────────────────────────── */
body[data-page="database-studio"] .dbs-grid-wrap { flex: 1; min-height: 0; overflow: auto; }
body[data-page="database-studio"] .dbs-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-family: var(--dbs-mono);
  font-size: 0.875rem;
  font-variant-ligatures: none;
}
body[data-page="database-studio"] .dbs-grid th,
body[data-page="database-studio"] .dbs-grid td {
  border-bottom: 1px solid var(--line);
  padding: 0;
  text-align: left;
  max-width: 360px;
  height: var(--dbs-row);
  vertical-align: middle;
}
/* Linhas verticais só no cabeçalho: o corpo sem grelha vertical lê-se muito mais
   limpo (o Supabase faz o mesmo). O realce de coluna vem do hover, não de riscas. */
body[data-page="database-studio"] .dbs-grid thead th { border-right: 1px solid var(--line); }
body[data-page="database-studio"] .dbs-grid thead th:last-child { border-right: 0; }
body[data-page="database-studio"] .dbs-grid td {
  padding: 0 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-page="database-studio"] .dbs-grid td.pk { color: var(--text-primary); font-weight: 500; }

body[data-page="database-studio"] .dbs-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--line-strong);
  user-select: none;
}
body[data-page="database-studio"] .dbs-th-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: var(--dbs-row);
  padding: 0 12px;
  border: 0;
  background: none;
  font: inherit;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
body[data-page="database-studio"] .dbs-th-btn:hover { background: var(--accent-light); color: var(--text-primary); }
body[data-page="database-studio"] .dbs-th-name { font-weight: 600; color: var(--text-primary); }
body[data-page="database-studio"] .dbs-th-type {
  font-size: 0.625rem;
  color: var(--text-tertiary);
  font-weight: 400;
}
body[data-page="database-studio"] .dbs-th-mark { display: inline-flex; flex-shrink: 0; }
body[data-page="database-studio"] .dbs-th-mark .dbs-i { width: 11px; height: 11px; }
body[data-page="database-studio"] .dbs-th-mark.pk { color: var(--accent); }
body[data-page="database-studio"] .dbs-th-mark.fk,
body[data-page="database-studio"] .dbs-th-mark.lock { color: var(--text-tertiary); }
body[data-page="database-studio"] .dbs-sort { display: inline-flex; margin-left: auto; color: var(--accent); }
body[data-page="database-studio"] .dbs-sort .dbs-i { width: 12px; height: 12px; }

body[data-page="database-studio"] .dbs-grid tbody tr:hover td { background: var(--bg-card-2); }
body[data-page="database-studio"] .dbs-grid tbody tr:last-child td { border-bottom: 0; }

/* Marcas de valor: NULL, vazio, booleano e segredo lêem-se de relance. */
body[data-page="database-studio"] .dbs-null,
body[data-page="database-studio"] .dbs-secret {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-card-2);
  color: var(--text-tertiary);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}
body[data-page="database-studio"] .dbs-grid tbody tr:hover .dbs-null,
body[data-page="database-studio"] .dbs-grid tbody tr:hover .dbs-secret { background: var(--bg-card); }
body[data-page="database-studio"] .dbs-secret .dbs-i { width: 10px; height: 10px; }
body[data-page="database-studio"] .dbs-bool { font-weight: 600; }
body[data-page="database-studio"] .dbs-bool.on { color: var(--success); }
body[data-page="database-studio"] .dbs-bool.off { color: var(--text-tertiary); }
body[data-page="database-studio"] td.secret { cursor: not-allowed; }

/* ── Coluna de seleção (checkbox), sempre a primeira e fixa à esquerda ── */
body[data-page="database-studio"] .dbs-th-sel,
body[data-page="database-studio"] .dbs-td-sel {
  width: var(--dbs-selw);
  min-width: var(--dbs-selw);
  padding: 0;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-card);
  border-right: 1px solid var(--line);
}
body[data-page="database-studio"] .dbs-grid thead .dbs-th-sel { z-index: 3; background: var(--bg-card-2); }
body[data-page="database-studio"] .dbs-grid tbody tr:hover .dbs-td-sel { background: var(--bg-card-2); }
body[data-page="database-studio"] .dbs-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--dbs-row);
  cursor: pointer;
}
body[data-page="database-studio"] .dbs-check input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  margin: 0;
}
body[data-page="database-studio"] .dbs-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: transparent;
  transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}
body[data-page="database-studio"] .dbs-check-box .dbs-i { width: 11px; height: 11px; }
body[data-page="database-studio"] .dbs-check input:checked + .dbs-check-box {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--dbs-on-accent);
}
/* Indeterminado (alguns, não todos): um traço, não o visto, à Supabase. */
body[data-page="database-studio"] .dbs-check input:indeterminate + .dbs-check-box {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
body[data-page="database-studio"] .dbs-check input:indeterminate + .dbs-check-box .dbs-i { display: none; }
body[data-page="database-studio"] .dbs-check input:indeterminate + .dbs-check-box::after {
  content: '';
  width: 8px; height: 2px;
  border-radius: 1px;
  background: var(--dbs-on-accent);
}
body[data-page="database-studio"] .dbs-check input:focus-visible + .dbs-check-box {
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-light);
}
/* Linha escolhida: realce suave da família do acento, por cima do hover. */
body[data-page="database-studio"] .dbs-grid tbody tr.sel td { background: var(--accent-light); }
body[data-page="database-studio"] .dbs-grid tbody tr.sel .dbs-td-sel { background: var(--accent-light); }

/* Coluna de ações: só existe em modo escrita; fica à direita da de seleção. */
body[data-page="database-studio"] .dbs-th-act,
body[data-page="database-studio"] .dbs-td-act {
  width: 34px;
  min-width: 34px;
  padding: 0;
  text-align: center;
  position: sticky;
  left: var(--dbs-selw);
  z-index: 1;
  background: var(--bg-card);
  border-right: 1px solid var(--line);
}
body[data-page="database-studio"] .dbs-grid thead .dbs-th-act { z-index: 3; background: var(--bg-card-2); }
body[data-page="database-studio"] .dbs-grid tbody tr:hover .dbs-td-act { background: var(--bg-card-2); }
body[data-page="database-studio"] .dbs-grid tbody tr.sel .dbs-td-act { background: var(--accent-light); }
body[data-page="database-studio"] .dbs-row-del {
  display: inline-flex;
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
body[data-page="database-studio"] .dbs-grid tbody tr:hover .dbs-row-del { opacity: 1; }
body[data-page="database-studio"] .dbs-row-del:focus-visible { opacity: 1; }
body[data-page="database-studio"] .dbs-row-del:hover { background: var(--danger-bg); color: var(--danger); }

/* Célula editável e editor inline. */
body[data-page="database-studio"] td.editable { cursor: text; }
body[data-page="database-studio"] td.editable:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
body[data-page="database-studio"] td.editing {
  padding: 0;
  max-width: none;
  overflow: visible;
  white-space: normal;
  background: var(--bg-card);
}
body[data-page="database-studio"] td.saving { opacity: 0.55; }
body[data-page="database-studio"] td.saved { box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-light); }
body[data-page="database-studio"] .dbs-cell-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-light);
  color: var(--text-primary);
  font: inherit;
  font-family: var(--dbs-mono);
  font-size: 0.75rem;
  outline: none;
  resize: vertical;
}

/* ── Rodapé de paginação ───────────────────────────────── */
body[data-page="database-studio"] .dbs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
}
body[data-page="database-studio"] .dbs-foot-count {
  font-size: 0.71875rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
body[data-page="database-studio"] .dbs-foot-nav { display: flex; gap: 6px; }

/* ── Estados de dados ──────────────────────────────────── */
body[data-page="database-studio"] .dbs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: auto;
  padding: 32px 20px;
  text-align: center;
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-pane-body > .dbs-empty { flex: 1; }
body[data-page="database-studio"] .dbs-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  border-radius: 10px;
  background: var(--bg-card-2);
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-empty-icon .dbs-i { width: 18px; height: 18px; }
body[data-page="database-studio"] .dbs-empty strong { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
body[data-page="database-studio"] .dbs-empty span { font-size: 0.75rem; }
body[data-page="database-studio"] .dbs-norows td {
  height: auto;
  border-right: 0;
  white-space: normal;
  font-family: var(--dbs-ui);   /* copy, não dados: sai da monoespaçada da grelha */
}

body[data-page="database-studio"] .dbs-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.75rem;
  line-height: 1.5;
}
body[data-page="database-studio"] .dbs-error .dbs-i { flex-shrink: 0; margin-top: 2px; }

body[data-page="database-studio"] .dbs-skel { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
body[data-page="database-studio"] .dbs-skel span {
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-card-2) 25%, var(--line) 50%, var(--bg-card-2) 75%);
  background-size: 200% 100%;
  animation: dbs-shimmer 1.3s ease-in-out infinite;
}
@keyframes dbs-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  body[data-page="database-studio"] .dbs-skel span { animation: none; }
}

/* ── Modais desta rota ─────────────────────────────────── */
body[data-page="database-studio"] .dbs-warn-lead {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 0.8125rem;
  line-height: 1.5;
}
body[data-page="database-studio"] .dbs-warn-lead strong { color: inherit; }
body[data-page="database-studio"] .dbs-warn-lead .dbs-i { flex-shrink: 0; margin-top: 2px; }
body[data-page="database-studio"] .dbs-hint {
  margin: 0 0 12px;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-hint code,
body[data-page="database-studio"] .dbs-kv code {
  font-family: var(--dbs-mono);
  font-size: 0.6875rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-card-2);
  color: var(--text-primary);
}
body[data-page="database-studio"] .dbs-kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
  align-items: center;
}
body[data-page="database-studio"] .dbs-kv dt {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
body[data-page="database-studio"] .dbs-kv dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-page="database-studio"] .dbs-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}
body[data-page="database-studio"] .btn-danger-solid {
  background: var(--danger);
  color: var(--dbs-on-danger);
  border: 0;
}
body[data-page="database-studio"] .btn-danger-solid:hover { filter: brightness(1.08); }

/* ── Acessibilidade ────────────────────────────────────── */
body[data-page="database-studio"] .dbs-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body[data-page="database-studio"] .dbs-i { flex-shrink: 0; pointer-events: none; }

/* ── Responsivo ────────────────────────────────────────── */
@media (max-width: 1024px) {
  body[data-page="database-studio"] { --dbs-chrome: 208px; --dbs-rail: 210px; }
}
@media (max-width: 860px) {
  body[data-page="database-studio"] .dbs {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  body[data-page="database-studio"] .dbs-rail { max-height: 240px; }
  body[data-page="database-studio"] .dbs-pane { height: 70dvh; min-height: 380px; }
  body[data-page="database-studio"] .dbs-headtools { width: 100%; }
  body[data-page="database-studio"] .dbs-dd { flex: 1; }
  body[data-page="database-studio"] .dbs-dd-trigger { width: 100%; min-width: 0; max-width: none; }
  body[data-page="database-studio"] .dbs-dd-pop { left: 0; right: auto; }
}