/* ============================================================
   Cisco Catalyst 9000 – Interface Step Styles
   ============================================================ */

/* ── Port-Gruppen Farbpalette ────────────────────────────── */
:root {
  --grp-color-0: #0dcaf0;
  --grp-color-1: #ffc107;
  --grp-color-2: #20c997;
  --grp-color-3: #d63384;
  --grp-color-4: #6610f2;
  --grp-color-5: #fd7e14;
  --grp-color-6: #198754;
  --grp-color-7: #6f42c1;
}

/* Farbige Umrandung eines Ports, der zu einer Gruppe gehört */
.sw-port.grp-colored .port-frame {
  stroke: var(--grp-color, currentColor);
  stroke-width: 2.5;
}
.sw-port.grp-colored .port-inner {
  fill-opacity: 0.85;
}

/* Aktive Gruppe: zusätzlich heller Glow */
.sw-port.grp-active .port-frame {
  stroke-width: 3.5;
  filter: drop-shadow(0 0 3px var(--grp-color, currentColor));
}

/* L3-3: Routed-Mode-Markierung. Cyan/Aquamarin-Stroke ueberlagert die
 * Gruppenfarbe; L3-Label aus drawRoutedPortLabels sitzt mittig im
 * Slot. Dashed-Stroke unterscheidet visuell von solid (L2 + Port-
 * Channel) und Glow (aktive Gruppe). */
.sw-port.routed-mode .port-frame {
  stroke: #7fffd4;
  stroke-width: 2.8;
  stroke-dasharray: 2 1;
}
.sw-port.routed-mode .port-inner {
  filter: brightness(1.18);
}
.routed-label {
  pointer-events: none;
  user-select: none;
}

/* Legende für Gruppenfarben */
.port-group-row {
  transition: background-color .15s ease;
}
.port-group-row:hover {
  background-color: var(--bs-tertiary-bg) !important;
}
.port-group-color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--grp-color, #6c757d);
  vertical-align: middle;
}

/* ── Switch Panel Host (relativ positionierter Outer) ────── */
.switch-panel-host {
  position: relative;
}

/* ── Switch Panel Container ──────────────────────────────── */
.switch-panel-wrap {
  background:    #111;
  border-radius: .5rem;
  padding:       .75rem;
  overflow:      hidden;     /* Pan/Zoom uebernimmt panel-zoom.js */
  user-select:   none;
  position:      relative;
  cursor:        grab;
  touch-action:  pan-x pan-y;
}
.switch-panel-wrap.dragging { cursor: grabbing; }
.switch-panel-wrap.dragging .switch-panel-inner { transition: none; }

/* Innerer Container nimmt translate+scale auf. Wird beim ersten
   Aufruf von panel-zoom.js um die Render-Ausgabe gewickelt. */
.switch-panel-inner {
  transform-origin: 0 0;
  transition: transform .15s ease-out;
  will-change: transform;
}

.switch-panel-wrap svg {
  display: block;
  min-width: 400px;
}

/* ── Zoom-Toolbar ────────────────────────────────────────── */
.panel-zoom-toolbar {
  position: absolute;
  top:    .5rem;
  right:  .5rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  background: rgba(20, 20, 20, .85);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: .375rem;
  padding: .2rem .25rem;
  font-size: .75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.panel-zoom-toolbar .btn {
  padding: .1rem .45rem;
  line-height: 1;
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: rgba(255, 255, 255, .35);
  --bs-btn-hover-bg: rgba(255, 255, 255, .15);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255, 255, 255, .55);
  --bs-btn-active-bg: rgba(255, 255, 255, .25);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: rgba(255, 255, 255, .35);
  --bs-btn-disabled-border-color: rgba(255, 255, 255, .15);
}
.panel-zoom-toolbar .zoom-pct {
  display: inline-block;
  min-width: 3rem;
  text-align: center;
  color: #f8f9fa;
  font-variant-numeric: tabular-nums;
  padding: 0 .25rem;
  font-weight: 500;
}
.panel-zoom-toolbar .btn i { font-size: .85rem; }

/* Tipp-Pille unter dem Panel */
.panel-zoom-hint {
  font-size: .8rem;
  color: var(--bs-body-color, #212529);
  opacity: .75;
  margin-top: .5rem;
  text-align: center;
  line-height: 1.5;
}
.panel-zoom-hint kbd {
  font-family: var(--bs-font-monospace, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 600;
  padding: .1rem .4rem;
  background: var(--bs-tertiary-bg, #e9ecef);
  color:      var(--bs-body-color, #212529);
  border:     1px solid var(--bs-border-color, #dee2e6);
  border-radius: .25rem;
  box-shadow: inset 0 -1px 0 var(--bs-border-color, #dee2e6);
  vertical-align: baseline;
}
[data-bs-theme="dark"] .panel-zoom-hint,
[data-theme="dark"] .panel-zoom-hint {
  color: #e9ecef;
  opacity: .8;
}
[data-bs-theme="dark"] .panel-zoom-hint kbd,
[data-theme="dark"] .panel-zoom-hint kbd {
  background: rgba(255, 255, 255, .08);
  color:      #f8f9fa;
  border-color: rgba(255, 255, 255, .25);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15);
}

/* ── SVG Port Elements ───────────────────────────────────── */

/* Default fills per port type */
.port-frame { transition: fill .12s, filter .12s; }

.type-rj45     .port-frame { fill: #424242; }
.type-rj45     .port-inner { fill: #1a1a1a; }

.type-sfp      .port-frame { fill: #2a3d5c; }
.type-sfp      .port-inner { fill: #16213a; }

.type-sfp-plus .port-frame { fill: #1d3a5e; }
.type-sfp-plus .port-inner { fill: #111e34; }

.type-sfp28    .port-frame { fill: #1a4a46; }
.type-sfp28    .port-inner { fill: #0d2624; }

.type-sfp56    .port-frame { fill: #1f4a3c; }
.type-sfp56    .port-inner { fill: #0f2820; }

.type-qsfp     .port-frame { fill: #3a2e5e; }
.type-qsfp     .port-inner { fill: #1e1734; }

.type-qsfp28   .port-frame { fill: #1a3650; }
.type-qsfp28   .port-inner { fill: #0d1e2e; }

/* Port label */
.port-num {
  fill:        #9aabb8;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size:   8px;
  pointer-events: none;
}

/* Hover state */
.sw-port { cursor: pointer; }
.sw-port:hover .port-frame { fill: #4a7fcf !important; filter: brightness(1.15); }
.sw-port:hover .port-num   { fill: #dce8f8; }

/* ── Speed-Mode-Toggle (C9600-LC-24C, C9400-LC-12QC) ─────────────
   - Disabled-Port (Sister-Port wenn Top-Port auf 100G/25G):
     gedimmt + nicht klickbar; das gestripte rote X-Overlay kommt
     direkt aus dem SVG (siehe buildPort()).
   - Top-Port mit aktiviertem 100G-/25G-Modus bekommt einen
     orangenen Akzent, damit der "Hu"/"TwentyFive"-Status auf einen
     Blick erkennbar ist.
   ─────────────────────────────────────────────────────────────── */
.sw-port.port-disabled                 { cursor: not-allowed; opacity: 0.42; }
.sw-port.port-disabled:hover .port-frame { fill: inherit !important; filter: none; }

.sw-port.port-mode-100g .port-frame { fill: #cf6a1a; }
.sw-port.port-mode-100g .port-inner { fill: #5d2f0d; }
.sw-port.port-mode-25g  .port-frame { fill: #2d8f6a; }
.sw-port.port-mode-25g  .port-inner { fill: #103e2c; }

.speed-mode-toggle             { cursor: pointer; }
.speed-mode-toggle rect        { transition: fill .12s, stroke .12s; }
.speed-mode-toggle:hover rect  { stroke: rgba(255,255,255,0.6); filter: brightness(1.15); }

/* Legend swatches in Step-2-Sidebar (#speed-mode-legend-card) */
.legend-swatch {
  display:        inline-block;
  width:          18px;
  height:         12px;
  border-radius:  2px;
  flex-shrink:    0;
}
.legend-swatch-disabled {
  position:        relative;
  background:      #1a3650;
  border:          1px solid rgba(255,255,255,0.18);
  opacity:         0.42;
}
.legend-swatch-disabled::before,
.legend-swatch-disabled::after {
  content:    '';
  position:   absolute;
  top:        50%;
  left:       0;
  right:      0;
  height:     1.5px;
  background: rgba(255,80,80,0.85);
  transform:  translateY(-50%) rotate(45deg);
}
.legend-swatch-disabled::after {
  transform:  translateY(-50%) rotate(-45deg);
}

/* Selected state */
.sw-port.selected .port-frame { fill: #0d6efd !important; }
.sw-port.selected .port-inner { fill: #0952b8 !important; }
.sw-port.selected .port-num   { fill: #ffffff; font-weight: bold; }

/* Chassis elements */
.chassis-bg   { }
.led-dot      { }
.panel-label  { fill: #8899aa; font-family: Arial, sans-serif; font-size: 9px; }
.panel-brand  { fill: #aabbcc; font-family: Arial, sans-serif; font-size: 8px; font-weight: bold; letter-spacing: .05em; }
.panel-sku    { fill: #7a8fa0; font-family: Arial, sans-serif; font-size: 7px; }
.group-label  { fill: #667788; font-family: Arial, sans-serif; font-size: 7px; }
.speed-badge  { fill: #4a6a88; font-family: Arial, sans-serif; font-size: 6.5px; }

/* Console / right block */
.con-port     { fill: #2a2a2a; stroke: #3a3a3a; stroke-width: .5; }
.con-label    { fill: #556677; font-family: Arial, sans-serif; font-size: 6.5px; }

/* ── Selection Toolbar ───────────────────────────────────── */
.selection-toolbar {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-wrap:   wrap;
  padding:     .5rem 0;
}

.selection-badge {
  background: #0d6efd;
  color:      #fff;
  font-size:  .78rem;
  padding:    .2rem .6rem;
  border-radius: .3rem;
  white-space: nowrap;
}

.selection-badge.none {
  background: #6c757d;
}

/* ── Legend ──────────────────────────────────────────────── */
.panel-legend {
  display:   flex;
  gap:       1rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color:     #6c757d;
  margin-top: .5rem;
}

.legend-dot {
  display:       inline-block;
  width:         12px;
  height:        12px;
  border-radius: 2px;
  margin-right:  4px;
  vertical-align: middle;
}

/* ── Specs Card ──────────────────────────────────────────── */
.specs-grid {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   .2rem .75rem;
  font-size:             .82rem;
}

.specs-key {
  color:       #6c757d;
  white-space: nowrap;
}

.specs-val {
  font-weight: 500;
}

/* ── Port Config Accordion ───────────────────────────────── */
#port-config-content .accordion-button {
  font-size:   .85rem;
  font-weight: 600;
  padding:     .6rem 1rem;
  color:       #212529;
  background:  #f8f9fa;
}

#port-config-content .accordion-button:not(.collapsed) {
  color:            var(--cisco-blue, #049fd9);
  background:       #f0f7fb;
  box-shadow:       none;
}

#port-config-content .accordion-button::after {
  /* keep Bootstrap's chevron but slightly smaller */
  background-size: .85rem;
}

#port-config-content .accordion-body {
  padding: 1rem 1rem .75rem;
}

#port-config-content .accordion-item:first-child {
  border-top: none;
}

/* Form labels inside port config */
#port-config-content label.form-label {
  font-size: .83rem;
  font-weight: 500;
  margin-bottom: .25rem;
}

#port-config-content .form-text {
  font-size: .75rem;
}

/* Routed-Modus: gemeinsame Label-Zeile fuer L3-Felder. Halte die
   Hoehe konstant (min-height = btn-group-sm), damit Spalten mit und
   ohne inline-Toggle (z. B. Subnetzmaske Dotted/CIDR) das darunter
   liegende Eingabefeld auf gleicher Hoehe rendern. */
#port-config-content .l3-field-head {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  flex-wrap:        wrap;
  gap:              .5rem;
  min-height:       1.95rem;
  margin-bottom:    .25rem;
}
#port-config-content .l3-field-head label.form-label {
  margin-bottom: 0;
}

/* Mode selector buttons */
.mode-btn-group .btn {
  font-size:  .78rem;
  padding:    .25rem .6rem;
}

/* ── CLI Preview (interfaces) ────────────────────────────── */
#iface-cli-output {
  background:   #1e1e1e;
  color:        #d4d4d4;
  font-family:  'Consolas', 'Courier New', monospace;
  font-size:    .76rem;
  line-height:  1.6;
  min-height:   200px;
  border-radius: 0 0 .375rem .375rem;
  overflow-x:   auto;
  white-space:  pre;
  padding:      .75rem;
}

/* ── Model Dropdown ──────────────────────────────────────── */
#switch-model-select {
  font-size: .875rem;
}

optgroup {
  font-weight: 700;
}

/* ── Placeholder text when no model selected ─────────────── */
.panel-placeholder {
  display:       flex;
  flex-direction:column;
  align-items:   center;
  justify-content: center;
  min-height:    120px;
  color:         #6c757d;
  font-size:     .9rem;
  gap:           .5rem;
}

/* ── Port config card ────────────────────────────────────── */
#port-config-card .card-header .port-count-badge {
  font-size:    .7rem;
  font-weight:  600;
  padding:      .2rem .5rem;
  border-radius:.25rem;
  background:   #0d6efd;
  color:        #fff;
}

/* ── Inline switch for toggles ───────────────────────────── */
.form-switch.form-switch-sm .form-check-input {
  width:  2.2em;
  height: 1.1em;
}

/* Collapse transition for conditional form groups */
.form-group-collapse {
  transition: max-height .25s ease, opacity .25s ease;
  overflow: hidden;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .specs-grid {
    grid-template-columns: 1fr;
  }
  .panel-legend {
    gap: .5rem;
  }
}

/* ── Dark Mode ───────────────────────────────────────────── */
[data-theme="dark"] #port-config-content .accordion-button {
  background: #2a2d31;
  color: #dee2e6;
}
[data-theme="dark"] #port-config-content .accordion-button:not(.collapsed) {
  background: #1a2d3d;
  color: var(--cisco-blue, #049fd9);
}

[data-theme="dark"] .specs-key {
  color: #868e96;
}

[data-theme="dark"] .panel-legend {
  color: #868e96;
}

[data-theme="dark"] .panel-placeholder {
  color: #868e96;
}

[data-theme="dark"] .selection-badge.none {
  background: #495057;
}

/* ── Chassis Panel ───────────────────────────────────────── */
.switch-panel-wrap.chassis-mode {
  overflow-y: auto;
  max-height: 85vh;
}

/* Chassis card header accent */
#chassis-card .card-header {
  background: linear-gradient(90deg, #fffbeb 0%, #fff 100%) !important;
  border-left: 3px solid #f59e0b !important;
}

[data-theme="dark"] #chassis-card .card-header {
  background: linear-gradient(90deg, #2a1f00 0%, #1e2124 100%) !important;
  border-left-color: #f59e0b !important;
}

/* Disabled LC options styling */
#chassis-lc-slots select option:disabled {
  color: #adb5bd;
  font-style: italic;
}

[data-theme="dark"] #chassis-lc-slots select option:disabled {
  color: #6c757d;
}

/* C9600 series badge */
.badge-c9600 { background-color: #8b5cf6 !important; color: #fff !important; }

/* C9600 chassis card header accent (purple) */
#chassis-card[data-chassis-series="C9600"] .card-header {
  background: linear-gradient(90deg, #f5f3ff 0%, #fff 100%) !important;
  border-left-color: #8b5cf6 !important;
}

[data-theme="dark"] #chassis-card[data-chassis-series="C9600"] .card-header {
  background: linear-gradient(90deg, #1e1030 0%, #1e2124 100%) !important;
  border-left-color: #8b5cf6 !important;
}

/* C9610 Smart Switch series badge */
.badge-c9610 { background-color: #14b8a6 !important; color: #fff !important; }

/* C9610 chassis card header accent (teal) */
#chassis-card[data-chassis-series="C9610"] .card-header {
  background: linear-gradient(90deg, #f0fdfa 0%, #fff 100%) !important;
  border-left-color: #14b8a6 !important;
}

[data-theme="dark"] #chassis-card[data-chassis-series="C9610"] .card-header {
  background: linear-gradient(90deg, #0d2626 0%, #1e2124 100%) !important;
  border-left-color: #14b8a6 !important;
}

/* ============================================================
   StackWise – vertikal gestapelte Member-Ansicht
   ============================================================ */
.stacked-panel-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stack-member-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stack-member-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .78rem;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid #6b7280;
  border-radius: 3px 3px 0 0;
}
.stack-member-label.role-active   { border-left-color: #22c55e; }
.stack-member-label.role-standby  { border-left-color: #fbbf24; }
.stack-member-label.role-member   { border-left-color: #6b7280; }
.stack-member-num  { font-weight: 600; color: #1f2937; }
.stack-member-role {
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
}
.stack-member-label.role-active   .stack-member-role { background: rgba(34, 197, 94, 0.18); color: #166534; }
.stack-member-label.role-standby  .stack-member-role { background: rgba(251, 191, 36, 0.25); color: #854d0e; }
.stack-member-sku  { color: #6b7280; font-family: monospace; font-size: .72rem; }
.stack-member-prio { margin-left: auto; color: #6b7280; font-size: .72rem; }
.stack-member-svg  { line-height: 0; }

.stack-cable-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  margin: 2px 0;
}
.stack-cable-left,
.stack-cable-right {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.45) 0, rgba(59, 130, 246, 0.45) 4px,
    transparent 4px, transparent 8px
  );
}
.stack-cable-label {
  font-size: .65rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

[data-theme="dark"] .stack-member-label {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .stack-member-num   { color: #e5e7eb; }
[data-theme="dark"] .stack-member-sku,
[data-theme="dark"] .stack-member-prio,
[data-theme="dark"] .stack-cable-label   { color: #9ca3af; }

/* Stack-Member-Tabelle – Nummerierung & Zellen im Dark Mode */
[data-theme="dark"] #stack-members-tbody td {
  color: #e5e7eb;
  border-color: #3d4147;
}
[data-theme="dark"] #stack-card .table-light,
[data-theme="dark"] #stack-card thead.table-light th {
  background-color: #2a2d31 !important;
  color: #e5e7eb !important;
  border-color: #3d4147 !important;
}

/* ============================================================
   StackWise – Kurzübersicht in Schritt 6 / Modal
   ============================================================ */
.stack-summary {
  border-left: 4px solid #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  border-radius: 4px;
  padding: 12px 14px;
}
.stack-summary-models {
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}
.stack-summary-role {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid #6b7280;
}
.stack-summary-role.role-active  { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.08); }
.stack-summary-role.role-standby { border-left-color: #fbbf24; background: rgba(251, 191, 36, 0.08); }
.stack-summary-role-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
  font-weight: 600;
}
.stack-summary-role-num {
  font-size: .95rem;
  font-weight: 600;
  color: #1f2937;
}
.stack-summary-role-meta {
  font-size: .72rem;
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
.stack-summary-role-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.08);
  color: #374151;
}
.stack-summary-role-pill.role-active  { background: rgba(34, 197, 94, 0.2);  color: #166534; }
.stack-summary-role-pill.role-standby { background: rgba(251, 191, 36, 0.25); color: #854d0e; }
.stack-summary-role-pill.role-member  { background: rgba(107, 114, 128, 0.2); color: #374151; }
.stack-summary-details summary {
  cursor: pointer;
  user-select: none;
}
.stack-summary-details summary:hover {
  color: #1f2937;
}
.stack-summary-table { font-size: .78rem; margin-bottom: 0; }

[data-theme="dark"] .stack-summary {
  background: rgba(59, 130, 246, 0.08);
  border-left-color: #60a5fa;
}
[data-theme="dark"] .stack-summary-models {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .stack-summary-role {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .stack-summary-role.role-active  { background: rgba(34, 197, 94, 0.12); }
[data-theme="dark"] .stack-summary-role.role-standby { background: rgba(251, 191, 36, 0.12); }
[data-theme="dark"] .stack-summary-role-num    { color: #e5e7eb; }
[data-theme="dark"] .stack-summary-role-label,
[data-theme="dark"] .stack-summary-role-meta   { color: #9ca3af; }
[data-theme="dark"] .stack-summary-role-pill   { background: rgba(255, 255, 255, 0.1); color: #e5e7eb; }
[data-theme="dark"] .stack-summary-details summary { color: #9ca3af; }
[data-theme="dark"] .stack-summary-details summary:hover { color: #e5e7eb; }
[data-theme="dark"] .stack-summary-table       { color: #e5e7eb; }
[data-theme="dark"] .stack-summary-table thead.table-light th {
  background-color: #2a2d31 !important;
  color: #e5e7eb !important;
  border-color: #3d4147 !important;
}
[data-theme="dark"] .stack-summary-table td {
  border-color: #3d4147;
}

/* ============================================================
   StackWise Virtual – SVL-Summary Roles (Step 6 / Modal)
   ============================================================ */
.svl-summary-role {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 4px;
  background: rgba(0,0,0,0.03); border-left: 3px solid #6b7280;
}
.svl-summary-role.role-active  { border-left-color: #22c55e; background: rgba(34,197,94,0.08); }
.svl-summary-role.role-standby { border-left-color: #fbbf24; background: rgba(251,191,36,0.08); }
.svl-summary-role-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; font-weight:600; }
.svl-summary-role-num   { font-size:.95rem; font-weight:600; color:#1f2937; }
.svl-summary-role-meta  { font-size:.72rem; color:#6b7280; font-family:ui-monospace,monospace; }
[data-theme="dark"] .svl-summary-role          { background:rgba(255,255,255,0.04); }
[data-theme="dark"] .svl-summary-role.role-active  { background:rgba(34,197,94,0.12); }
[data-theme="dark"] .svl-summary-role.role-standby { background:rgba(251,191,36,0.12); }
[data-theme="dark"] .svl-summary-role-num  { color:#e5e7eb; }
[data-theme="dark"] .svl-summary-role-label,
[data-theme="dark"] .svl-summary-role-meta { color:#9ca3af; }

/* SVL/DAD-reservierte Ports – visuell gesperrt */
.sw-port.svl-reserved { cursor: not-allowed; opacity: 0.7; }
.sw-port.svl-reserved .port-frame { fill: #1e3a5a !important; stroke: #3b82f6; stroke-width: 2; }
.sw-port.svl-reserved:hover .port-frame { fill: #1e3a5a !important; filter: none; }

/* ============================================================
   StackWise Virtual – horizontale Zwei-Chassis-Frontansicht (Stufe 3)
   ============================================================ */
.svl-panel-wrap {
  display: flex; flex-direction: row; align-items: stretch;
  gap: 0; flex-wrap: nowrap; overflow-x: auto;
}
.svl-chassis {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.svl-chassis-label {
  display: flex; align-items: center; gap: .6rem; padding: 4px 10px;
  background: rgba(0,0,0,.04); border-left: 3px solid #6b7280;
  border-radius: 3px 3px 0 0; font-size: .78rem;
}
.svl-chassis-label.role-active  { border-left-color: #22c55e; }
.svl-chassis-label.role-standby { border-left-color: #fbbf24; }
.svl-chassis-num  { font-weight: 600; color: #1f2937; }
.svl-chassis-role {
  font-weight: 500; padding: 1px 6px; border-radius: 10px;
  background: rgba(0,0,0,.08);
}
.svl-chassis-label.role-active  .svl-chassis-role { background: rgba(34,197,94,.18); color: #166534; }
.svl-chassis-label.role-standby .svl-chassis-role { background: rgba(251,191,36,.25); color: #854d0e; }
.svl-chassis-sku  { color: #6b7280; font-family: monospace; font-size: .72rem; }
.svl-chassis-prio { margin-left: auto; color: #6b7280; font-size: .72rem; }
.svl-chassis-svg  { line-height: 0; }

/* Connector-Block zwischen den Chassis */
.svl-connector {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-width: 90px; padding: 8px 6px; gap: 6px;
  background: rgba(59,130,246,.05);
  border-left:  1px dashed rgba(59,130,246,.3);
  border-right: 1px dashed rgba(59,130,246,.3);
}
.svl-domain-badge {
  font-size: .65rem; font-weight: 700; padding: 2px 8px;
  background: #3b82f6; color: #fff; border-radius: 10px;
  letter-spacing: .04em;
}
.svl-link-indicator, .svl-dad-indicator {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .62rem; font-weight: 600;
}
.svl-link-label  { color: #3b82f6; letter-spacing: .06em; }
.svl-dad-label   { color: #f59e0b; letter-spacing: .06em; }
.svl-link-cable {
  width: 100%; height: 3px; min-width: 70px;
  background: repeating-linear-gradient(
    90deg,
    #3b82f6 0, #3b82f6 6px, rgba(59,130,246,.3) 6px, rgba(59,130,246,.3) 10px
  );
  border-radius: 2px;
}
.svl-dad-cable {
  width: 100%; height: 2px; min-width: 70px;
  background: repeating-linear-gradient(
    90deg,
    #f59e0b 0, #f59e0b 3px, transparent 3px, transparent 7px
  );
}
.svl-link-count, .svl-dad-method {
  font-size: .62rem; color: #6b7280; font-weight: 500;
}

[data-theme="dark"] .svl-chassis-label { background: rgba(255,255,255,.04); }
[data-theme="dark"] .svl-chassis-num   { color: #e5e7eb; }
[data-theme="dark"] .svl-chassis-sku,
[data-theme="dark"] .svl-chassis-prio,
[data-theme="dark"] .svl-link-count,
[data-theme="dark"] .svl-dad-method    { color: #9ca3af; }
[data-theme="dark"] .svl-connector     {
  background: rgba(59,130,246,.08);
  border-left-color: rgba(96,165,250,.4);
  border-right-color: rgba(96,165,250,.4);
}