/* ── Gnoke DataForge — table.css ────────────────────────────────── */

table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 13px;
}

/* ── Header Row ──────────────────────────────────────────────────── */
thead tr#header-row th {
  background: var(--th-bg);
  border: 1px solid var(--border);
  padding: 0; position: relative;
  transition: background var(--transition), border-color var(--transition);
}

.th-inner {
  display: flex; align-items: center; gap: 4px;
  padding: 9px 11px;
}

.th-name {
  flex: 1; outline: none;
  background: transparent; color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.04em; border: none;
  min-width: 60px;
}
.th-name:focus { color: var(--amber); }

.pk-badge {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  background: var(--amber); color: #fff;
  border-radius: 3px; padding: 1px 5px;
  font-weight: 700; letter-spacing: 0.05em;
}
body.sqlite-mode .pk-badge        { display: inline; }
body.sqlite-mode .pk-badge.hidden { display: none !important; }

/* ── Schema Row ──────────────────────────────────────────────────── */
#schema-row { display: none; }
body.sqlite-mode #schema-row { display: table-row; }

#schema-row th {
  background: var(--schema-bg);
  border: 1px solid var(--border);
  padding: 6px 8px; vertical-align: top;
  transition: background var(--transition), border-color var(--transition);
}

.schema-cell {
  display: flex; flex-direction: column; gap: 5px; min-width: 130px;
}

.schema-cell select {
  width: 100%;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 6px;
  font-family: var(--font-mono); font-size: 0.72rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.schema-cell select:focus { outline: none; border-color: var(--amber); }

.constraint-row {
  display: flex; gap: 8px;
  font-size: 0.65rem; font-family: var(--font-mono);
  color: var(--muted); flex-wrap: wrap;
}
.constraint-row label {
  display: flex; align-items: center; gap: 3px;
  cursor: pointer; transition: color 0.15s;
}
.constraint-row label:hover { color: var(--amber); }
.constraint-row input[type=checkbox]:checked + span { color: var(--green); font-weight: 600; }

/* ── Data Rows ───────────────────────────────────────────────────── */
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: var(--row-hover); }

tbody td {
  border: 1px solid var(--border);
  padding: 8px 11px; outline: none;
  font-family: var(--font-sans); font-size: 0.85rem;
  vertical-align: middle; min-width: 80px;
  transition: border-color var(--transition);
  color: var(--text);
}
tbody td:focus {
  background: var(--surface);
  box-shadow: var(--cell-focus-shadow);
}

/* Empty state */
#tbody:empty::after {
  content: 'Add a row to get started';
  display: block;
  padding: 32px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.04em;
}