/* ============================================================
   Cisco Catalyst 9000 – VLAN Step (Step 3) Styles
   ============================================================ */

/* ── Add / Edit Form Panel ───────────────────────────────── */
#vlan-add-panel {
  background:    #f8f9ff;
  border-bottom: 1px solid #dee2e6;
}

/* ── Kompakte Konfigurator-Tabellen ──────────────────────────
   Die Klasse heisst historisch .vlan-table (Schritt 3), wird aber
   auch von den SVI- und Static-Routes-Tabellen in Schritt 4
   verwendet, damit alle Konfigurator-Tabellen ein einheitliches,
   schmaleres Erscheinungsbild haben (font-size, thead-Style,
   td-Padding). Dark-Mode-Regeln weiter unten greifen automatisch
   fuer alle Konsumenten. */
.vlan-table {
  font-size: .875rem;
  margin-bottom: 0;
}

.vlan-table thead th {
  font-weight:    600;
  font-size:      .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color:          #6c757d;
  border-bottom:  2px solid #dee2e6;
  white-space:    nowrap;
}

.vlan-table tbody tr:hover {
  background: rgba(0, 103, 184, .04);
}

.vlan-table td {
  vertical-align: middle;
  padding:        .4rem .75rem;
}

/* ── VLAN Accordion Groups ───────────────────────────────── */
#vlan-accordion .accordion-item {
  border-left:  none;
  border-right: none;
  border-radius: 0 !important;
}

#vlan-accordion .accordion-item:first-child {
  border-top: none;
}

#vlan-accordion .accordion-button {
  font-size:   .9rem;
  font-weight: 500;
  background:  #f8f9fa;
  padding:     .65rem 1rem;
  box-shadow:  none !important;
}

#vlan-accordion .accordion-button:not(.collapsed) {
  background: #e8f0fe;
  color:      var(--cisco-blue, #0067b8);
}

#vlan-accordion .accordion-button::after {
  /* keep Bootstrap default chevron */
}

#vlan-accordion .accordion-body {
  padding: 0;
}

/* ── VTP Alert ───────────────────────────────────────────── */
#vtp-risk-alert {
  font-size: .875rem;
}

/* ── Import Preview Table ────────────────────────────────── */
#vlan-import-preview .table {
  font-size: .85rem;
}

/* ── CLI Preview (VLAN) – extend shared .cli-preview ────── */
#vlan-cli-output {
  min-height: 260px;
}

/* ── Dark Mode ───────────────────────────────────────────── */
[data-theme="dark"] #vlan-add-panel {
  background: #1e2126;
  border-bottom-color: #3d4147;
}

[data-theme="dark"] .vlan-table thead th {
  color: #868e96;
  border-bottom-color: #4d5157;
}

[data-theme="dark"] .vlan-table tbody tr:hover {
  background: rgba(4,159,217,.08);
}

[data-theme="dark"] #vlan-accordion .accordion-button {
  background: #2a2d31;
  color: #dee2e6;
}

[data-theme="dark"] #vlan-accordion .accordion-button:not(.collapsed) {
  background: #1a2d3d;
  color: var(--cisco-blue, #049fd9);
}

/* Cell-Textfarbe greift fuer alle .vlan-table-Konsumenten (VLAN-,
   SVI-, Static-Routes-Tabellen). Bisher war sie an #vlan-accordion
   gebunden; die Routing-Tabellen liegen aber ausserhalb des
   Accordions und bekamen daher keine lesbare Textfarbe im Dark Mode. */
[data-theme="dark"] .vlan-table td,
[data-theme="dark"] .vlan-table th {
  color: #dee2e6;
}

[data-theme="dark"] .vlan-table .text-muted {
  color: #868e96 !important;
}

[data-theme="dark"] #vlan-add-panel .form-text {
  color: #868e96;
}