/* ============================================================
   Cisco Catalyst 9000 – Switch Konfiguration
   Custom Styles (Bootstrap 5.3 Extension)
   ============================================================ */

/* ── Cisco Brand Colours ─────────────────────────────────── */
:root {
  --cisco-blue:        #049fd9;
  --cisco-blue-dark:   #0070ad;
  --cisco-blue-deeper: #00476b;
  --cisco-green:       #6abf69;
  --cisco-red:         #e2231a;
  --cisco-orange:      #f7941d;
}

/* ── Navbar ──────────────────────────────────────────────── */
.bg-cisco-blue {
  background-color: var(--cisco-blue-deeper) !important;
}

/* Rollen-Badge (SA) am User-Button der Frontend-Navbars – deckungsgleich
   zum Backend-Header (admin/css/admin.css). Im Frontend bislang nicht
   definiert, daher hier nachgezogen. */
.bg-cisco-green {
  background-color: var(--cisco-green) !important;
}

/* Rollen-Badge (A) fuer Admins – orange zur Abgrenzung vom gruenen SA. */
.bg-cisco-orange {
  background-color: var(--cisco-orange) !important;
}

.text-cisco-blue {
  color: var(--cisco-blue) !important;
}

.navbar-brand {
  letter-spacing: .02em;
}

/* ── Button variants ─────────────────────────────────────── */
.btn-cisco-blue {
  background-color: var(--cisco-blue);
  border-color:     var(--cisco-blue);
  color:            #fff;
  font-weight:      500;
}
.btn-cisco-blue:hover,
.btn-cisco-blue:focus {
  background-color: var(--cisco-blue-dark);
  border-color:     var(--cisco-blue-dark);
  color:            #fff;
}
.btn-cisco-blue:disabled {
  background-color: #a0d8ef;
  border-color:     #a0d8ef;
  color:            #fff;
  cursor:           not-allowed;
}

/* ── Progress Steps ──────────────────────────────────────── */
/* Sticky step indicator below the sticky navbar. The CSS variable
   --navbar-h is maintained by js/sticky-header.js so the offset
   adapts to navbar wrapping on narrow viewports. */
.step-progress-sticky {
  position: sticky;
  top: var(--navbar-h, 56px);
  z-index: 1019; /* one below Bootstrap's .sticky-top (1020) */
  background: var(--bs-secondary-bg);
}
[data-theme="dark"] .step-progress-sticky {
  background: #1a1d21;
}

/* ── Einfach-/Experten-Modus ──────────────────────────────────
   Im Einfach-Modus werden alle als .expert-only markierten
   Elemente (ganze Karten, Sektionen oder einzelne Felder)
   ausgeblendet. Default ist Einfach: solange js/wizard-mode.js
   noch keine Modus-Klasse gesetzt hat, bleiben Experten-Elemente
   verborgen, damit es kein Aufflackern beim Laden gibt. */
body:not(.wizard-mode-expert) .expert-only {
  display: none !important;
}

/* ── Autosave-Pille (lokaler Entwurf) ─────────────────────── */
.autosave-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  padding: .3rem .65rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 999px;
  color: var(--bs-body-color, #212529);
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.autosave-pill .autosave-icon { font-size: .9rem; line-height: 1; }
.autosave-pill .autosave-time { color: var(--bs-secondary-color, #6c757d); }
.autosave-pill.saving {
  background: var(--bs-warning-bg-subtle, #fff3cd);
  border-color: var(--bs-warning-border-subtle, #ffe69c);
  color: var(--bs-body-color);
}
.autosave-pill.saving .autosave-icon {
  animation: autosave-pulse 1.2s ease-in-out infinite;
}
.autosave-pill.saved {
  background: var(--bs-success-bg-subtle, #d1e7dd);
  border-color: var(--bs-success-border-subtle, #a3cfbb);
}
.autosave-pill.error {
  background: var(--bs-danger-bg-subtle, #f8d7da);
  border-color: var(--bs-danger-border-subtle, #f1aeb5);
  color: var(--bs-danger-text-emphasis, #842029);
}
[data-theme="dark"] .autosave-pill {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
  color: #e9ecef;
}
[data-theme="dark"] .autosave-pill .autosave-time { color: #adb5bd; }
[data-theme="dark"] .autosave-pill.saving {
  background: rgba(255, 193, 7, .12);
  border-color: rgba(255, 193, 7, .3);
}
[data-theme="dark"] .autosave-pill.saved {
  background: rgba(25, 135, 84, .15);
  border-color: rgba(25, 135, 84, .35);
  color: #d1e7dd;
}
[data-theme="dark"] .autosave-pill.error {
  background: rgba(220, 53, 69, .15);
  border-color: rgba(220, 53, 69, .35);
  color: #f5c2c7;
}
@keyframes autosave-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: .45; }
}

/* Restore-Banner (wizard-autosave.js): Styling analog zu den
   Startseiten-Hinweisboxen (#site-hints .site-hint) – 4px breiter,
   farbiger linker Rand in der Info-Akzentfarbe. */
#autosave-restore-banner {
  border-left: 4px solid #0dcaf0;
}

.step-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  min-width:       60px;
}

.step-circle {
  width:            28px;
  height:           28px;
  border-radius:    50%;
  background:       #dee2e6;
  color:            #6c757d;
  font-weight:      600;
  font-size:        .78rem;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       background .25s, color .25s;
}

.step-circle.active {
  background: var(--cisco-blue);
  color:      #fff;
}

.step-circle.done {
  background: var(--cisco-green);
  color:      #fff;
}

/* UX-3: Rot fuer uebersprungene oder validation-fehlerhafte Schritte.
 * Wird in _recolorStepIndicators() gesetzt. Bootstrap-Danger als
 * Fallback, projekt-spezifische Farb-Var optional. */
.step-circle.error {
  background: var(--bs-danger, #dc3545);
  color:      #fff;
}

.step-label {
  font-size:    .68rem;
  color:        #6c757d;
  margin-top:   4px;
  text-align:   center;
  white-space:  nowrap;
}

.step-item.active .step-label {
  color:       var(--cisco-blue);
  font-weight: 600;
}

/* Hover am "ausgeblendete Optionen"-Badge: nach Schritt gruppierte Liste.
   Feste eigene Farben (dunkler Grund + helle Schrift) – unabhängig vom
   Theme, da die geerbten Tooltip-Variablen im Dark Mode dunkle Schrift
   auf dunklem Grund ergaben. Jeder Schritt mit Akzent-Kopf + Nummer. */
.wizmode-tooltip {
  --bs-tooltip-bg:      #1f2329;
  --bs-tooltip-color:   #f1f3f5;
  --bs-tooltip-opacity: 1;
}
.wizmode-tooltip .tooltip-inner {
  max-width:  340px;
  text-align: left;
  padding:    .5rem .65rem;
}
.wizmode-tip-head {
  font-weight:    600;
  padding-bottom: .3rem;
  margin-bottom:  .4rem;
  border-bottom:  1px solid rgba(255, 255, 255, .18);
}
.wizmode-tip-grp + .wizmode-tip-grp {
  margin-top: .45rem;
}
.wizmode-tip-step {
  display:      flex;
  align-items:  center;
  gap:          .4rem;
  font-weight:  600;
  color:        #74a8ff;          /* Akzent, kontrastreich auf dunklem Grund */
}
.wizmode-tip-num {
  flex:            0 0 auto;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.15rem;
  height:          1.15rem;
  border-radius:   50%;
  background:      #74a8ff;
  color:           #1f2329;
  font-size:       .62rem;
  font-weight:     700;
  line-height:     1;
}
.wizmode-tip-opts {
  margin-top:   .12rem;
  padding-left: 1.55rem;          /* unter dem Step-Namen ausrichten */
  opacity:      .9;
}

/* Kompaktes "Experte"-Badge direkt am Step (z. B. Schritt 6 / ACLs).
   Bewusst kleiner als die Feld-Badges, damit die Step-Leiste nicht
   visuell bricht. Erscheint nur im Experten-Modus, da der zugehörige
   Step-Indikator im Einfach-Modus ausgeblendet ist. */
.step-expert-badge {
  font-size:      .5rem;
  font-weight:    600;
  letter-spacing: .02em;
  padding:        .12em .4em;
  vertical-align: middle;
  line-height:    1;
}

/* ── Einfach/Experte-Umschalter (Segmented Control) ─────────
   Pillen-Track in tertiary-bg, aktives Segment als weiße „Karte"
   mit farbigem Text statt farbiger Fläche. Farbsemantik:
     Einfach = Cisco-Blau (Primär-Akzent der App)
     Experte = Amber (Farbe der „Experte"-Badges an den Sektionen)
   Die Inputs nutzen Bootstraps .btn-check (visually hidden);
   Fokus-Ring kommt daher per :focus-visible auf dem Label. */
.wizard-mode-seg {
  display:       inline-flex;
  background:    var(--bs-tertiary-bg);
  border:        1px solid var(--bs-border-color);
  border-radius: 2rem;
  padding:       3px;
  gap:           2px;
}
.wizard-mode-seg label {
  border:        0;
  border-radius: 2rem;
  padding:       .25rem .85rem;
  font-size:     .875rem;
  font-weight:   500;
  line-height:   1.5;
  color:         var(--bs-secondary-color);
  background:    transparent;
  cursor:        pointer;
  transition:    all .15s ease;
  user-select:   none;
}
.wizard-mode-seg label:hover {
  color: var(--bs-body-color);
}
.wizard-mode-seg .btn-check:focus-visible + label {
  outline:        2px solid var(--cisco-blue);
  outline-offset: 1px;
}
.wizard-mode-seg .btn-check:checked + label {
  background:  var(--bs-body-bg);
  box-shadow:  0 1px 3px rgba(0, 0, 0, .18);
  font-weight: 600;
}
#wizard-mode-simple:checked + label {
  color: var(--cisco-blue-dark);
}
#wizard-mode-simple:checked + label i {
  color: var(--cisco-blue);
}
#wizard-mode-expert:checked + label {
  color: #946c00;
}
#wizard-mode-expert:checked + label i {
  color: #d39e00;
}
/* Dark Mode: aktives Segment liegt auf dunklem body-bg – hellere
   Akzent-Töne, damit der farbige Text genug Kontrast behält. */
[data-bs-theme="dark"] #wizard-mode-simple:checked + label,
[data-bs-theme="dark"] #wizard-mode-simple:checked + label i {
  color: var(--cisco-blue);
}
[data-bs-theme="dark"] #wizard-mode-expert:checked + label,
[data-bs-theme="dark"] #wizard-mode-expert:checked + label i {
  color: #ffc107;
}

/* Hinweis-Pille „N erweiterte Optionen ausgeblendet": amber-getönt,
   weil die ausgeblendeten Optionen genau die Experte-Optionen sind
   (gleiche Farbfamilie wie die „Experte"-Badges). Nur im Einfach-
   Modus sichtbar. Feste Farben + Dark-Override, da die Pastelltöne
   im Dark Mode nicht genug Kontrast hätten. */
#wizard-mode-hint {
  background:   #fff8e1;
  border-color: #ffe08a !important;
  color:        #7a5b00;
}
[data-bs-theme="dark"] #wizard-mode-hint {
  background:   #3a2f10;
  border-color: #6b5618 !important;
  color:        #ffd866;
}

.step-line {
  flex:             1;
  height:           1px;
  background:       #dee2e6;
  align-self:       center;
  min-width:        16px;
  max-width:        48px;
  margin-bottom:    18px; /* align with circle centre */
}

/* ── VLAN-Form (Step 3): Read-only-ID & Rename-Impact ───────
   Read-only-Optik nach Projekt-Konvention ([readonly]-Selektor wie
   im Feedback-Modal), hier zusätzlich für den Light Mode. Greift nur
   bei Template-gesperrten VLANs – regulär ist die ID editierbar. */
#vlan-add-panel .form-control[readonly] {
  background-color: var(--bs-secondary-bg);
  color:            var(--bs-secondary-color);
  cursor:           not-allowed;
}

/* Live-Hinweis unterm ID-Feld: amber (Farbfamilie der Hinweis-Pille),
   weil ein Rename Verweise in anderen Steps anpasst. is-error kippt
   auf Rot, wenn der Rename einen MST-Overlap erzeugen würde. */
.vlan-rename-hint {
  background:    #fff8e1;
  border:        1px solid #ffe08a;
  color:         #7a5b00;
  border-radius: .375rem;
  padding:       .3rem .55rem;
  font-size:     .78rem;
}
.vlan-rename-hint.is-error {
  background:   #fdecea;
  border-color: #f5c2c7;
  color:        #842029;
}
[data-bs-theme="dark"] .vlan-rename-hint {
  background:   #3a2f10;
  border-color: #6b5618;
  color:        #ffd866;
}
[data-bs-theme="dark"] .vlan-rename-hint.is-error {
  background:   #3a1518;
  border-color: #842029;
  color:        #ea868f;
}

/* ── Section Divider ─────────────────────────────────────── */
.section-divider {
  position:    relative;
  display:     flex;
  align-items: center;
}

.section-divider::before,
.section-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: #dee2e6;
}

.section-label {
  padding:     0 .75rem;
  font-size:   .75rem;
  font-weight: 600;
  color:       var(--cisco-blue-dark);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* ── Input Validation Icons ──────────────────────────────── */
.validation-icon {
  min-width:   42px;
  justify-content: center;
}

.input-group .form-control.is-valid ~ .validation-icon {
  color:            var(--cisco-green);
  background-color: #f0fff0;
}

.input-group .form-control.is-invalid ~ .validation-icon {
  color:            var(--cisco-red);
  background-color: #fff5f5;
}

/* Override Bootstrap's padding-right injection for input-groups */
.input-group .form-control.is-valid,
.input-group .form-control.is-invalid {
  background-image: none !important;
  padding-right:    .75rem !important;
}

/* Feedback text positioning */
.invalid-feedback,
.valid-feedback {
  display: none;
  font-size: .8rem;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
  display: block;
}

.was-validated .form-control:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback {
  display: block;
}

/* ── CLI Preview ─────────────────────────────────────────── */
.cli-preview {
  background:   #1e1e1e;
  color:        #d4d4d4;
  font-family:  'Consolas', 'Courier New', monospace;
  font-size:    .78rem;
  line-height:  1.6;
  min-height:   160px;
  border-radius: 0 0 .375rem .375rem;
  overflow-x:   auto;
  white-space:  pre;
}

.cli-comment  { color: #6a9955; }
.cli-keyword  { color: #569cd6; }
.cli-value    { color: #ce9178; }
.cli-command  { color: #dcdcaa; }
.cli-prompt   { color: #4ec9b0; }

/* ── Card polish ─────────────────────────────────────────── */
.card {
  border-radius: .5rem;
}

.card-header {
  border-radius: .5rem .5rem 0 0 !important;
}

/* ── Char counter ────────────────────────────────────────── */
.char-counter {
  font-size: .75rem;
}

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
  border-radius: .4rem;
}

/* ── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 576px) {
  .step-line    { min-width: 6px; max-width: 24px; }
  .step-item    { min-width: 42px; }
  .step-label   { font-size: .58rem; }
  .step-circle  { width: 24px; height: 24px; font-size: .7rem; }
  .step-line    { margin-bottom: 16px; }
}

/* Theme-Toggle und Admin-Lock-Button nutzen die Bootstrap-Klasse
   .btn-outline-light (vereinheitlicht mit den restlichen Navbar-Buttons).
   Nur der aktive Admin-State des Lock-Buttons erhält weiterhin die
   eigene grüne Hervorhebung – siehe Sektion „Admin Lock Button" weiter unten. */

/* ── Projekt-Abschluss-Panel ──────────────────────────────── */
.project-done-card {
  border-left: 4px solid #198754 !important;
}
.project-done-header {
  background: linear-gradient(90deg, #d1e7dd 0%, #fff 100%);
  color: #0a3622;
}

/* ============================================================
   Dark Mode – [data-theme="dark"]
   ============================================================ */

/* Bootstrap overrides via custom properties */
[data-theme="dark"] {
  --bs-body-bg:            #1a1d21;
  --bs-body-color:         #dee2e6;
  --bs-secondary-bg:       #212529;
  --bs-tertiary-bg:        #2a2d31;
  --bs-border-color:       #3d4147;
  --bs-card-bg:            #23272b;
  --bs-card-border-color:  #3d4147;
  --bs-input-bg:           #2a2d31;
  --bs-input-color:        #dee2e6;
  --bs-input-border-color: #4d5157;
  color-scheme:            dark;
}

/* Page background */
[data-theme="dark"] body {
  background-color: #1a1d21 !important;
  color: #dee2e6;
}

/* Cards */
[data-theme="dark"] .card {
  background-color: #23272b;
  border-color: #3d4147;
  color: #dee2e6;
}
[data-theme="dark"] .card-header {
  background-color: #2a2d31 !important;
  border-color: #3d4147;
  color: #dee2e6;
}
[data-theme="dark"] .project-done-header {
  background: linear-gradient(90deg, #0f2d1a 0%, #1e2a22 100%) !important;
  color: #a3cfbb;
  border-color: #1f4d31;
}
[data-theme="dark"] .card-footer {
  background-color: #2a2d31;
  border-color: #3d4147;
}

/* Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-check-input {
  background-color: #2a2d31;
  border-color: #4d5157;
  color: #dee2e6;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #313539;
  border-color: var(--cisco-blue);
  color: #dee2e6;
  box-shadow: 0 0 0 .2rem rgba(4,159,217,.2);
}
[data-theme="dark"] .form-control::placeholder {
  color: #6c757d;
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
  background-color: #212529;
  color: #6c757d;
}
[data-theme="dark"] .form-check-input {
  background-color: #2a2d31;
  border-color: #4d5157;
}
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--cisco-blue);
  border-color: var(--cisco-blue);
}

/* Input groups */
[data-theme="dark"] .input-group-text {
  background-color: #313539;
  border-color: #4d5157;
  color: #adb5bd;
}

/* Buttons */
[data-theme="dark"] .btn-outline-secondary {
  color: #adb5bd;
  border-color: #4d5157;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #3d4147;
  color: #dee2e6;
  border-color: #5d6167;
}
[data-theme="dark"] .btn-outline-secondary.active,
[data-theme="dark"] .btn-outline-secondary:active,
[data-theme="dark"] .btn-check:checked + .btn-outline-secondary {
  background-color: #5a6168;
  color: #ffffff;
  border-color: #7a818a;
  font-weight: 500;
}
[data-theme="dark"] .btn-light {
  background-color: #2a2d31;
  border-color: #4d5157;
  color: #dee2e6;
}
[data-theme="dark"] .btn-light:hover {
  background-color: #3d4147;
}

/* Tables */
[data-theme="dark"] .table {
  color: #dee2e6;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  --bs-table-border-color: #3d4147;
}
[data-theme="dark"] .table thead th {
  border-bottom-color: #4d5157;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-color-state: #dee2e6;
  --bs-table-bg-state: rgba(255,255,255,.05);
}
[data-theme="dark"] .table-light {
  --bs-table-color: #dee2e6;
  --bs-table-bg: #2a2d31;
  --bs-table-border-color: #4d5157;
  color: #dee2e6;
  background-color: #2a2d31;
}

/* Borders & dividers */
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top {
  border-color: #3d4147 !important;
}

/* Text utilities */
[data-theme="dark"] .text-muted {
  color: #868e96 !important;
}
[data-theme="dark"] .text-dark {
  color: #dee2e6 !important;
}
[data-theme="dark"] .text-body-secondary {
  color: #868e96 !important;
}

/* Background utilities */
[data-theme="dark"] .bg-white {
  background-color: #23272b !important;
}
[data-theme="dark"] .bg-light {
  background-color: #2a2d31 !important;
}
[data-theme="dark"] .bg-body-secondary {
  background-color: #1a1d21 !important;
}

/* Alerts */
[data-theme="dark"] .alert-info {
  background-color: #1a3044;
  border-color: #1e4060;
  color: #a8d4f0;
}
[data-theme="dark"] .alert-warning {
  background-color: #332700;
  border-color: #4d3a00;
  color: #f0c060;
}
[data-theme="dark"] .alert-danger {
  background-color: #3a1018;
  border-color: #5a1520;
  color: #f0a0a8;
}
[data-theme="dark"] .alert-success {
  background-color: #0f2d1a;
  border-color: #154424;
  color: #80c898;
}

/* Badges */
[data-theme="dark"] .badge.bg-secondary {
  background-color: #495057 !important;
}
[data-theme="dark"] .badge.bg-light {
  background-color: #3d4147 !important;
  color: #dee2e6 !important;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
  background-color: #2a2d31;
  border-color: #4d5157;
}
[data-theme="dark"] .dropdown-item {
  color: #dee2e6;
}
[data-theme="dark"] .dropdown-item:hover {
  background-color: #3d4147;
  color: #fff;
}

/* Accordion */
[data-theme="dark"] .accordion-item {
  background-color: #23272b;
  border-color: #3d4147;
  color: #dee2e6;
}
[data-theme="dark"] .accordion-button {
  background-color: #2a2d31;
  color: #dee2e6;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #1a2d3d;
  color: var(--cisco-blue);
}
[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(1.5);
}
[data-theme="dark"] .accordion-body {
  background-color: #23272b;
}

/* Step indicator */
[data-theme="dark"] .step-circle {
  background: #3d4147;
  color: #adb5bd;
}
[data-theme="dark"] .step-line {
  background: #3d4147;
}
[data-theme="dark"] .step-label {
  color: #868e96;
}

/* Section divider */
[data-theme="dark"] .section-divider::before,
[data-theme="dark"] .section-divider::after {
  background: #3d4147;
}

/* Validation icons */
[data-theme="dark"] .input-group .form-control.is-valid ~ .validation-icon {
  background-color: #0f2d1a;
}
[data-theme="dark"] .input-group .form-control.is-invalid ~ .validation-icon {
  background-color: #3a1018;
}

/* Small / helper text */
[data-theme="dark"] .form-text {
  color: #868e96;
}
[data-theme="dark"] small {
  color: #868e96;
}

/* Modal (if any) */
[data-theme="dark"] .modal-content {
  background-color: #23272b;
  border-color: #3d4147;
  color: #dee2e6;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: #3d4147;
}

/* Scrollbar (webkit) */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1a1d21;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #4d5157;
  border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #6c757d;
}

/* ── Step 0: Landing Page ────────────────────────────────── */
.step-0-wrap {
  /* Kein zusaetzliches Top-Padding: <main class="py-4"> liefert bereits
     den Abstand unter der (sticky) Navbar. Das frühere padding-top:2rem
     stapelte sich darauf zu rund 56px totem Raum über dem ersten Element
     (Hinweis-/Admin-Banner bzw. Projekt-Karte). */
  padding: 0 0 2rem;
}

/* ── App Footer ──────────────────────────────────────────── */
.app-footer {
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
  padding: .5rem 0;
  position: sticky;
  bottom: 0;
  z-index: 100;
}
.footer-device-id {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cisco-blue);
}
[data-theme="dark"] .app-footer {
  background: #1e2124;
  border-top-color: #2d3238;
}

/* ── Bug Report Floating Button ──────────────────────────── */
.bug-report-trigger {
  position:         fixed;
  right:            0;
  top:              50%;
  transform:        translateY(-50%);
  z-index:          1039;
  background-color: var(--cisco-red);
  color:            #fff;
  border:           none;
  border-radius:    .375rem 0 0 .375rem;
  padding:          .85rem .5rem;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              .4rem;
  cursor:           pointer;
  transition:       background-color .2s, transform .2s, box-shadow .2s;
  box-shadow:       -2px 2px 10px rgba(0,0,0,.25);
}
.bug-report-trigger:hover {
  background-color: #c01a12;
  transform:        translateY(-50%) translateX(-4px);
  box-shadow:       -4px 2px 14px rgba(0,0,0,.3);
}
.bug-trigger-icon {
  font-size: 1.1rem;
}
.bug-trigger-label {
  writing-mode:   vertical-rl;
  transform:      rotate(180deg);
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .06em;
  white-space:    nowrap;
}

/* Mobile (≤576px): icon-only FAB, bottom-right */
@media (max-width: 576px) {
  .bug-report-trigger {
    top:             auto;
    bottom:          5rem;
    right:           1rem;
    transform:       none;
    border-radius:   50%;
    width:           48px;
    height:          48px;
    padding:         0;
    justify-content: center;
    box-shadow:      0 4px 12px rgba(0,0,0,.3);
  }
  .bug-report-trigger:hover {
    transform:       scale(1.08);
    background-color: #c01a12;
  }
  .bug-trigger-label {
    display: none;
  }
}

/* ── Bug Report Modal – Dark Mode ────────────────────────── */
[data-theme="dark"] #bug-report-modal .modal-content {
  background-color: #1e2126;
  border-color:     #3d4147;
}
[data-theme="dark"] #bug-report-modal .modal-header,
[data-theme="dark"] #bug-report-modal .modal-footer {
  border-color: #3d4147;
}
[data-theme="dark"] #bug-report-modal .modal-title,
[data-theme="dark"] #bug-report-modal label {
  color: #dee2e6;
}
[data-theme="dark"] #bug-report-modal .btn-close {
  filter: invert(1) brightness(1.5);
}
[data-theme="dark"] #bug-report-modal .form-control {
  background-color: #2b2f38;
  border-color:     #3d4147;
  color:            #dee2e6;
}
[data-theme="dark"] #bug-report-modal .form-control[readonly] {
  background-color: #23272e;
  color:            #adb5bd;
}
[data-theme="dark"] #bug-report-modal .form-check-label {
  color: #dee2e6;
}
[data-theme="dark"] #bug-report-modal .text-muted {
  color: #adb5bd !important;
}

/* ── Admin Lock / Profil Button (Navbar) ─────────────────── */
/* Basis-Styling kommt von Bootstrap (.btn .btn-sm .btn-outline-*).
   Aktiver Zustand (eingeloggt): grüner Border + grüner Text. Gilt für den
   Lock-/Profil-Button in index.php (per JS getoggelt) UND den serverseitig
   gerenderten Profil-Button der public-navbar. */
#admin-lock-btn.admin-active,
.navbar .admin-active {
  border-color: var(--cisco-green);
  color:        var(--cisco-green);
}
#admin-lock-btn.admin-active:hover,
.navbar .admin-active:hover {
  background:   rgba(106,191,105,.15);
  border-color: var(--cisco-green);
  color:        var(--cisco-green);
}

/* ── Separater Logout-Button (Navbar) ────────────────────── */
/* Nur das Logout-Symbol, leicht rot eingefärbt, damit sich der Logout
   klar vom Profil-/Login-Button abhebt. Theme-unabhängig (funktioniert auf
   der dunklen index.php-Navbar wie auf der hellen public-navbar). */
.admin-logout-btn,
.admin-logout-btn:focus {
  color:        #e35d6a;
  border-color: rgba(227,93,106,.55);
}
.admin-logout-btn:hover {
  color:            #fff;
  background-color: #dc3545;
  border-color:     #dc3545;
}

/* ── Postfach-Button (Navbar) ────────────────────────────── */
/* Resting-Zustand erbt vom Bootstrap-Outline-Button. Bei ungelesenen
   Nachrichten (.has-unread) wird der Button amber eingefärbt, damit er
   – zusätzlich zur roten Zähler-Bubble – auffällt. Auf der dunklen
   index.php-Navbar (.navbar-dark) ein helleres Amber für Kontrast. */
.navbar-inbox-btn.has-unread,
.navbar-inbox-btn.has-unread:focus {
  color:        #cc8a00;
  border-color: rgba(204,138,0,.55);
}
.navbar-inbox-btn.has-unread:hover {
  background:   rgba(204,138,0,.14);
  color:        #cc8a00;
  border-color: #cc8a00;
}
.navbar-dark .navbar-inbox-btn.has-unread,
.navbar-dark .navbar-inbox-btn.has-unread:focus {
  color:        #ffd24d;
  border-color: rgba(255,210,77,.6);
}
.navbar-dark .navbar-inbox-btn.has-unread:hover {
  background:   rgba(255,210,77,.16);
  color:        #ffd24d;
  border-color: #ffd24d;
}

/* ── Admin Login Modal – Dark Mode ───────────────────────── */
[data-theme="dark"] #admin-login-modal .modal-content {
  background-color: #1e2126; border-color: #3d4147;
}
[data-theme="dark"] #admin-login-modal .modal-header,
[data-theme="dark"] #admin-login-modal .modal-footer {
  border-color: #3d4147;
}
[data-theme="dark"] #admin-login-modal .modal-title,
[data-theme="dark"] #admin-login-modal label { color: #dee2e6; }
[data-theme="dark"] #admin-login-modal .btn-close {
  filter: invert(1) brightness(1.5);
}
[data-theme="dark"] #admin-login-modal .form-control {
  background-color: #2b2f38; border-color: #4d5157; color: #dee2e6;
}
[data-theme="dark"] #admin-login-modal .form-control::placeholder { color: #6c757d; }
[data-theme="dark"] #admin-login-modal .form-control:focus {
  background-color: #313539;
  border-color:     var(--cisco-blue);
  box-shadow:       0 0 0 .2rem rgba(4,159,217,.2);
}

/* ── Zeilennummern in der Gesamtkonfig-Vorschau (Step 6) ─────────────────── */
.cli-preview {
  counter-reset: cli-line;
}
.cli-preview > span.cli-ln {
  counter-increment: cli-line;
}
.cli-preview > span.cli-ln::before {
  content:       counter(cli-line);
  display:       inline-block;
  min-width:     2.8em;
  text-align:    right;
  padding-right: .5em;
  margin-right:  .7em;
  color:         #4a4a4a;
  border-right:  1px solid #2d2d2d;
  user-select:   none;
  font-weight:   normal;
}

/* ── Kunden-Dropdown: Abstand zum Freitext-Feld bei "Manuell" ─────────── */
#proj-customer-select:not(.d-none) ~ #proj-customer:not(.d-none) {
  margin-top: .5rem;
}

/* ── Aktive Vorlage Card – Dark-Mode-Lesbarkeit ──────────────────────── */
.tpl-info-card .card-body {
  background: var(--bs-body-bg);
}
.tpl-info-card code {
  background: var(--bs-tertiary-bg);
  color: var(--bs-code-color);
  padding: .1rem .35rem;
  border-radius: .2rem;
  font-size: .78rem;
}
.tpl-info-card .text-muted {
  color: var(--bs-body-color) !important;
  opacity: .85;
}
.tpl-info-card .text-body {
  color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .tpl-info-card .text-primary {
  color: #6ea8fe !important;
}
[data-bs-theme="dark"] .tpl-info-card .text-danger {
  color: #ea868f !important;
}

/* ── Feedback FAB (Combined: Bug + Feature Request) ───────── */
.feedback-fab {
  position: fixed;
  right:    0;
  top:      50%;
  transform: translateY(-50%);
  z-index:  1039;
  display:  flex;
  flex-direction: row-reverse;
  align-items: center;
  gap:      .4rem;
}

.feedback-fab-main {
  background-color: var(--cisco-blue, #1B7FD1);
  color:            #fff;
  border:           none;
  border-radius:    .375rem 0 0 .375rem;
  padding:          .85rem .5rem;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              .4rem;
  cursor:           pointer;
  transition:       background-color .2s, transform .2s, box-shadow .2s;
  box-shadow:       -2px 2px 10px rgba(0,0,0,.25);
}
.feedback-fab-main:hover {
  background-color: #176bb3;
  transform:        translateX(-4px);
  box-shadow:       -4px 2px 14px rgba(0,0,0,.3);
}
.feedback-fab-icon {
  font-size: 1.1rem;
}
.feedback-fab-label {
  writing-mode:   vertical-rl;
  transform:      rotate(180deg);
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .06em;
  white-space:    nowrap;
}

.feedback-fab-menu {
  display:        none;
  flex-direction: column;
  gap:            .4rem;
  margin-right:   .2rem;
}
.feedback-fab.open .feedback-fab-menu {
  display: flex;
  animation: feedback-fab-slide-in .18s ease-out;
}
@keyframes feedback-fab-slide-in {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0);   }
}

.feedback-fab-item {
  display:       flex;
  align-items:   center;
  border:        none;
  color:         #fff;
  padding:       .55rem .9rem;
  border-radius: 2rem;
  font-size:     .78rem;
  font-weight:   600;
  letter-spacing:.02em;
  white-space:   nowrap;
  cursor:        pointer;
  box-shadow:    -2px 2px 10px rgba(0,0,0,.25);
  transition:    transform .15s, box-shadow .15s, background-color .15s;
}
.feedback-fab-item:hover {
  transform:  translateX(-2px);
  box-shadow: -4px 2px 14px rgba(0,0,0,.3);
}
.feedback-fab-bug {
  background-color: var(--cisco-red, #D1291B);
}
.feedback-fab-bug:hover {
  background-color: #b8231a;
}
.feedback-fab-feature {
  background-color: #F5A623;
  color: #2a2000;
}
.feedback-fab-feature:hover {
  background-color: #dd9018;
}

/* Mobile (≤576px): icon-only main + stacked menu above it */
@media (max-width: 576px) {
  .feedback-fab {
    top:       auto;
    bottom:    5rem;
    right:     1rem;
    transform: none;
    flex-direction: column;
    align-items: flex-end;
    gap:       .6rem;
  }
  .feedback-fab-main {
    border-radius: 50%;
    width:         52px;
    height:        52px;
    padding:       0;
    justify-content: center;
    box-shadow:    0 4px 12px rgba(0,0,0,.3);
  }
  .feedback-fab-main:hover {
    transform: scale(1.08);
  }
  .feedback-fab-label {
    display: none;
  }
  .feedback-fab-menu {
    order:        -1;
    margin-right: 0;
    align-items:  flex-end;
  }
  .feedback-fab.open .feedback-fab-menu {
    animation: feedback-fab-slide-up .18s ease-out;
  }
  @keyframes feedback-fab-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
  }
}

/* ── Feedback-Modals: Readonly-Felder klar erkennbar ─────────
   Eingeloggt sind Name/E-Mail vorbelegt und nicht editierbar;
   das Schritt/Seite-Feld ist immer readonly. Bootstrap 5.3 stylt
   [readonly] nicht mehr automatisch – ohne diese Regel wirken die
   Felder beschreibbar. */
#bug-report-modal .form-control[readonly],
#feature-request-modal .form-control[readonly] {
  background-color: var(--bs-secondary-bg, #e9ecef);
  color:            var(--bs-secondary-color, #6c757d);
  cursor:           not-allowed;
}

/* ── Feature Request Modal – Dark Mode ───────────────────── */
[data-theme="dark"] #feature-request-modal .modal-content {
  background-color: #1e2126;
  border-color:     #3d4147;
}
[data-theme="dark"] #feature-request-modal .modal-header,
[data-theme="dark"] #feature-request-modal .modal-footer {
  border-color: #3d4147;
}
[data-theme="dark"] #feature-request-modal .modal-title,
[data-theme="dark"] #feature-request-modal label {
  color: #dee2e6;
}
[data-theme="dark"] #feature-request-modal .btn-close {
  filter: invert(1) brightness(1.5);
}
[data-theme="dark"] #feature-request-modal .form-control,
[data-theme="dark"] #feature-request-modal .form-select {
  background-color: #2b2f38;
  border-color:     #3d4147;
  color:            #dee2e6;
}
[data-theme="dark"] #bug-report-modal .form-control[readonly],
[data-theme="dark"] #feature-request-modal .form-control[readonly] {
  background-color: #23272e;
  color:            #adb5bd;
}
[data-theme="dark"] #feature-request-modal .text-muted {
  color: #adb5bd !important;
}

/* ── SSH-Kachel: "Credential aus Vault wählen" – Dark-Mode-Kontrast ────── */
/* Das Frontend toggelt Dark via [data-theme="dark"] auf <html>, nicht
   Bootstraps data-bs-theme. Deshalb greifen die bg-body-*-Utilities nicht
   automatisch – wir muessen die innere Card explizit einfaerben. */
#ssh-terminal-tile [data-ssh-when="vault"] > .card {
  border: 1px solid var(--bs-border-color-translucent) !important;
}
[data-theme="dark"] #ssh-terminal-tile [data-ssh-when="vault"] > .card {
  background-color: #2c3339 !important;
  border-color:     #4a525a !important;
}
[data-theme="dark"] #ssh-terminal-tile [data-ssh-when="vault"] strong,
[data-theme="dark"] #ssh-terminal-tile [data-ssh-when="vault"] .form-label {
  color: #f1f3f5 !important;
}
[data-theme="dark"] #ssh-terminal-tile [data-ssh-when="vault"] .text-muted {
  color: #b8c0c7 !important;
}
[data-theme="dark"] #ssh-terminal-tile [data-ssh-when="vault"] #ssh-vault-detail code {
  background-color: rgba(255, 255, 255, .08);
  color:            #e9ecef;
  padding:          .05rem .3rem;
  border-radius:    .2rem;
}
/* Select innerhalb der Vault-Card: passt farblich zum Card-Hintergrund */
[data-theme="dark"] #ssh-terminal-tile [data-ssh-when="vault"] select.form-select {
  background-color: #1f2429;
  color:            #e9ecef;
  border-color:     #4a525a;
}

/* ── Bootstrap-Tooltip-Box breiter ──────────────────────────────
   Default ist max-width: 200px – bei den ausfuehrlichen Hilfe-
   Texten an den ?-Icons (Configurator, ACL-Modals) wird die Box
   sonst sehr schmal und mehrzeilig. Auf 360px erweitert und links-
   buendig, damit laengere Texte angenehm lesbar sind. */
.tooltip-inner {
  max-width:  360px;
  text-align: left;
}