/* dbv.css -- databasebrowser/-editor: zijbalkview, custom tab, grid.
 *
 * VS CODE-GRID-ACHTIG: compacte rijen (--row-h, hetzelfde token als de rest van de
 * studio), een subtiele zebra, sticky kop, focusrand op de actieve cel -- geen eigen
 * hex, alleen de variabelen uit core.css (BRIEFING-S.md/FASE-B.md: licht+donker volgen
 * daaruit vanzelf).
 *
 * TABS: hergebruikt .e3btab/.e3btab-cap/.e3btab-close LETTERLIJK (e3b.css) zodat een
 * dbv-tab niet te onderscheiden is van een editor-tab -- "mooi met de tabs" (Floris).
 */

/* ---- zijbalkview: verbinden, tabellenboom ------------------------------------------ */

.dbv-side { display: flex; flex-direction: column; height: 100%; font: var(--ui-fs) var(--font-ui); }

.dbv-connectbar {
  padding: 8px; border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
}
.dbv-connectbar .dbv-status {
  display: flex; align-items: center; gap: 6px; color: var(--text-dim);
}
.dbv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto; }
.dbv-dot.on { background: var(--ok); }
.dbv-dot.err { background: var(--danger); }
.dbv-connectbar .dbv-url { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbv-btnrow { display: flex; gap: 6px; }
.dbv-btn {
  background: var(--surface2); color: var(--text); border: 1px solid var(--rule); border-radius: 2px;
  padding: 4px 10px; font: var(--ui-fs) var(--font-ui); cursor: pointer;
}
.dbv-btn:hover { background: var(--rule); }
.dbv-btn:disabled { opacity: 0.5; cursor: default; }

.dbv-tables { flex: 1 1 auto; overflow: auto; }
.dbv-tablerow {
  display: flex; align-items: center; gap: 6px; padding: 0 10px; height: var(--row-h);
  cursor: pointer; color: var(--text); white-space: nowrap; overflow: hidden;
}
.dbv-tablerow:hover { background: var(--hover); }
.dbv-tablerow.on { background: var(--surface2); color: var(--text-strong); }
.dbv-tablerow .dbv-tname { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.dbv-tablerow .dbv-trows { color: var(--text-muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.dbv-tablerow .dbv-tkind {
  flex: 0 0 auto; font-size: calc(var(--ui-fs) * 10 / 13); color: var(--text-muted); border: 1px solid var(--rule);
  border-radius: 2px; padding: 0 4px; line-height: 14px;
}
.dbv-tablerow.readonly .dbv-tkind { color: var(--attn); border-color: var(--attn); }
.dbv-empty, .dbv-msg { padding: 10px; color: var(--text-dim); }
.dbv-msg.err { color: var(--danger-tx); }

/* ---- de grid, in een custom tab ----------------------------------------------------- */

.dbv-gridhost {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
}
.dbv-gridhost[hidden] { display: none; }

.dbv-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  border-bottom: 1px solid var(--rule); font: var(--ui-fs) var(--font-ui);
  flex: 0 0 auto;
}
.dbv-toolbar .dbv-count { color: var(--text-dim); margin-left: auto; font-variant-numeric: tabular-nums; }
.dbv-toolbar input.dbv-filter {
  background: var(--surface); color: var(--text); border: 1px solid var(--rule); border-radius: 2px;
  padding: 3px 6px; font: var(--ui-fs) var(--font-ui); width: 160px;
}
.dbv-toolbar input.dbv-filter:focus { outline: none; border-color: var(--focus); }

.dbv-body { flex: 1 1 auto; display: flex; overflow: hidden; }

.dbv-gridwrap { flex: 1 1 auto; overflow: auto; position: relative; }
.dbv-grid { border-collapse: collapse; width: 100%; font: var(--code-fs) var(--font-code); font-size: calc(var(--ui-fs) * 12 / 13); }
.dbv-grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface2); color: var(--text-strong);
  text-align: left; padding: 0 8px; height: var(--row-h);
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
  white-space: nowrap; cursor: pointer; user-select: none;
  font: var(--ui-fs) var(--font-ui); font-weight: 600;
}
.dbv-grid thead th:hover { background: var(--hover); }
.dbv-grid thead th .dbv-th-kind { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.dbv-grid thead th .dbv-th-sort { margin-left: 4px; color: var(--accent-hi); }

.dbv-grid tbody tr { height: var(--row-h); }
.dbv-grid tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.dbv-grid tbody tr:hover { background: var(--hover); }
.dbv-grid tbody tr.sel { background: var(--selection); }
.dbv-grid tbody tr.dead { opacity: 0.45; text-decoration: line-through; }
.dbv-grid td {
  padding: 0 8px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--surface2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
  color: var(--text);
}
.dbv-grid td.editable { cursor: text; }
.dbv-grid td.dirty { box-shadow: inset 0 0 0 1px var(--attn); background: rgba(217,164,65,0.08); }
.dbv-grid td.focused { box-shadow: inset 0 0 0 1px var(--focus); }
.dbv-grid td input.dbv-celledit {
  width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text-strong);
  border: 1px solid var(--accent); border-radius: 2px; padding: 0 4px; font: inherit;
  height: calc(var(--row-h) - 4px);
}

.dbv-pager {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  border-top: 1px solid var(--rule); font: var(--ui-fs) var(--font-ui); color: var(--text-dim);
}
.dbv-pager .dbv-btn { padding: 2px 8px; }

/* ---- detailpaneel: alle velden van de geselecteerde rij, hex desnoods ---------------- */

.dbv-detail {
  flex: 0 0 320px; border-left: 1px solid var(--rule); overflow: auto;
  padding: 8px; font: var(--ui-fs) var(--font-ui);
}
.dbv-detail[hidden] { display: none; }
.dbv-detail h3 { margin: 0 0 8px; font-size: calc(var(--ui-fs) * 12 / 13); color: var(--text-dim); font-weight: 600; text-transform: uppercase; }
.dbv-field { padding: 3px 0; border-bottom: 1px solid var(--surface2); }
.dbv-field .dbv-fname { color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13); }
.dbv-field .dbv-fval {
  color: var(--text); font: var(--code-fs) var(--font-code); font-size: calc(var(--ui-fs) * 12 / 13);
  word-break: break-all; white-space: pre-wrap;
}
.dbv-field .dbv-fval.link { color: var(--accent-hi); cursor: pointer; text-decoration: underline; }
.dbv-hex { font: var(--code-fs) var(--font-code); font-size: calc(var(--ui-fs) * 11 / 13); color: var(--text-dim); word-break: break-all; white-space: pre-wrap; margin-top: 8px; }

/* ---- nieuwe rij, verwijderen ---------------------------------------------------------- */
.dbv-grid tbody tr.newrow { background: rgba(58,157,67,0.08); }