.network-table {
  --nt-selected-tint: rgba(37, 99, 235, .14);
  --nt-row-bg-default: var(--c-surface-alt);
  --nt-row-bg-hover:   var(--c-accent-soft);
}

/* ============================================================
   Base
   ============================================================ */

.network-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-surface);
}

.network-table th {
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  text-align: left;
  white-space: nowrap;
  color: var(--c-text);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border-strong);
}

.network-table td {
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-text);
  white-space: nowrap;
  background-color: transparent;
  border-bottom: 1px solid var(--c-border);
  transition: background-color var(--t-fast);
}

.network-table tbody tr {
  cursor: pointer;
  user-select: none;
}

.network-table tbody tr:nth-child(even):not([data-has-prefix]) td {
  background-color: var(--c-surface-alt);
}

.network-table tbody tr:hover:not([data-has-prefix]) td {
  background-color: var(--c-accent-soft);
}

/* ============================================================
   Células específicas
   ============================================================ */

.network-table td.cell-trecho,
.network-table td.cell-ref {
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
}

.network-table td.cell-input  { min-width: 120px; }
.network-table td.cell-select { min-width: 160px; }
.network-table td.cell-check  { text-align: center; }

/* ============================================================
   Inputs e selects
   ============================================================ */

.network-table td.cell-input input[type="text"],
.network-table td.cell-input input[type="number"],
.network-table td.cell-select select {
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.network-table td.cell-input input:hover,
.network-table td.cell-select select:hover {
  border-color: var(--c-text-subtle);
}

.network-table td.cell-input input:focus-visible,
.network-table td.cell-select select:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.network-table td.cell-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--c-accent);
}

.network-table td.cell-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   Linhas com prefixo (coloridas via JS)
   ============================================================ */

.network-table tbody tr[data-has-prefix] {
  background-color: var(--row-bg, var(--nt-row-bg-default));
}

.network-table tbody tr[data-has-prefix]:hover {
  background-color: var(--row-bg-hover, var(--nt-row-bg-hover));
}

.network-table tbody tr[data-has-prefix] td {
  background-color: transparent;
}

.network-table tbody tr[data-has-prefix] td:first-child {
  padding-left: var(--sp-3);
  border-left: 4px solid var(--row-accent);
}

.network-table tbody tr[data-has-prefix] td.cell-trecho {
  font-weight: var(--fw-bold);
  color: var(--row-accent);
}

/* ============================================================
   Seleção
   ============================================================ */

.network-table tbody tr.row-selected td {
  background-image: linear-gradient(var(--nt-selected-tint), var(--nt-selected-tint));
}

.network-table tbody tr.row-selected td:first-child {
  border-left-color: var(--c-accent);
}

.network-table tbody tr.row-selected {
  outline: 1px solid var(--nt-selected-tint);
  outline-offset: -1px;
}

/* ============================================================
   Acessibilidade
   ============================================================ */

.network-table tbody tr:focus-within td {
  outline: 1px solid var(--c-accent);
  outline-offset: -1px;
}

@media (prefers-reduced-motion: reduce) {
  .network-table td,
  .network-table td.cell-input input,
  .network-table td.cell-select select {
    transition: none;
  }
}

@media (forced-colors: active) {
  .network-table th {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }

  .network-table td {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }

  .network-table tbody tr[data-has-prefix] td:first-child {
    border-left: 4px solid CanvasText;
  }

  .network-table tbody tr.row-selected td {
    background-image: none;
    border-top: 2px solid Highlight;
    border-bottom: 2px solid Highlight;
  }
}

/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 1024px) {
  .network-table th,
  .network-table td { padding: var(--sp-2); }
}

@media (max-width: 768px) {
  .network-table { font-size: var(--fs-sm); }

  .network-table th {
    padding: var(--sp-2);
    font-size: var(--fs-xs);
  }

  .network-table td { padding: var(--sp-2); }

  .network-table td.cell-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .network-table td.cell-input input,
  .network-table td.cell-select select {
    font-size: var(--fs-base);
  }
}