/**
 * Tema: Claude
 * ─────────────────────────────────────────────────────────────────────────────
 * Varm mørk — ingen bredde-begrænsning, tabel-headers synlige, flex-layout.
 * Accent: rød (#e94560)
 */

:root {
  --bg:     #1a1a2e;
  --bg2:    #16213e;
  --bg3:    #0f3460;
  --accent: #e94560;
  --text:   #eeeeee;
  --text2:  #aaaaaa;
  --green:  #4ecca3;
  --red:    #e94560;
  --orange: #f0a500;
  --blue:   #4da6ff;
  --purple: #c060e0;
  --border: #333333;
}

/* Tabel-headers — synlige i Claude-tema */
.db-table thead { display: table-header-group; }

/* Host-rækker */
.db-table tr.host-row          { background: var(--bg); }
.db-table tr.host-row:hover    { background: rgba(255,255,255,0.02); }
.db-table tr.host-row.expanded { background: var(--bg2); border-left: 3px solid var(--accent); }

/* Host-bar: CSS grid — 7 faste kolonner, alle rækker aligned */
.host-bar {
  display: grid;
  grid-template-columns: 48px 150px 140px 52px 1fr 118px auto;
  align-items: center;
  column-gap: 8px;
  padding: 5px 10px;
}
.hb-left { width: auto; }
.hb-ip   { min-width: 0; }
.hb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-ch   { text-align: right; }
.hb-meta { min-width: 0; }
.hb-acts { justify-content: flex-end; }

/* Edit-mode: brug flex (grid passer ikke til 5-kolonne edit-layout) */
.host-bar.editing {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Kolonne-header: samme grid som .host-bar */
.col-header { grid-template-columns: 48px 150px 140px 52px 1fr 118px auto; }

/* Tema-badge farve */
.theme-badge.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(233,69,96,0.1);
}