/* ============================================================
   Cisco Catalyst 9000 – Admin Backend CSS
   Bootstrap 5.3 Overrides + Cisco-Farbpalette
   ============================================================ */

:root {
  --cisco-blue:        #049fd9;
  --cisco-blue-dark:   #0070ad;
  --cisco-blue-deeper: #00476b;
  --cisco-green:       #6abf69;
  --cisco-orange:      #f7941d;
  --cisco-teal:        #17a98a;
  --cisco-red:         #da1f12;
}

/* ── 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;
}
@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; }
}

/* ── 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, #049fd9);
  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: var(--cisco-blue-dark, #0070ad);
  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, #da1f12);
}
.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 Seite/Bereich-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-bs-theme="dark"] #feature-request-modal .modal-content {
  background-color: #1e2126;
  border-color:     #3d4147;
}
[data-bs-theme="dark"] #feature-request-modal .modal-header,
[data-bs-theme="dark"] #feature-request-modal .modal-footer {
  border-color: #3d4147;
}
[data-bs-theme="dark"] #feature-request-modal .modal-title,
[data-bs-theme="dark"] #feature-request-modal label {
  color: #dee2e6;
}
[data-bs-theme="dark"] #feature-request-modal .btn-close {
  filter: invert(1) brightness(1.5);
}
[data-bs-theme="dark"] #feature-request-modal .form-control,
[data-bs-theme="dark"] #feature-request-modal .form-select {
  background-color: #2b2f38;
  border-color:     #3d4147;
  color:            #dee2e6;
}
[data-bs-theme="dark"] #bug-report-modal .form-control[readonly],
[data-bs-theme="dark"] #feature-request-modal .form-control[readonly] {
  background-color: #23272e;
  color:            #adb5bd;
}
[data-bs-theme="dark"] #feature-request-modal .text-muted {
  color: #adb5bd !important;
}

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

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

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-cisco-blue {
  background-color: var(--cisco-blue);
  border-color:     var(--cisco-blue);
  color: #fff;
}
.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 {
  opacity: .65;
}

.btn-xs {
  padding:    .15rem .4rem;
  font-size:  .75rem;
  line-height: 1.4;
}

/* ── Tabellen ─────────────────────────────────────────────────── */
.table > :not(caption) > * > * {
  vertical-align: middle;
}

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

/* Syntax Highlighting – identisch mit Frontend */
.cli-preview .cli-comment,
.cli-comment { color: #6a9955 !important; }
.cli-preview .cli-keyword,
.cli-keyword  { color: #569cd6 !important; }
.cli-preview .cli-value,
.cli-value    { color: #ce9178 !important; }
.cli-preview .cli-command,
.cli-command  { color: #dcdcaa !important; }
.cli-preview .cli-prompt,
.cli-prompt   { color: #4ec9b0 !important; }

/* ── Login-Seite ─────────────────────────────────────────────── */
.card-header.bg-cisco-blue,
.modal-header.bg-cisco-blue,
.navbar.bg-cisco-blue {
  background-color: var(--cisco-blue-deeper) !important;
}

/* ── Badges ─────────────────────────────────────────────────────── */
.bg-cisco-blue {
  background-color: var(--cisco-blue) !important;
  color: #fff !important;
}

.bg-cisco-green {
  background-color: var(--cisco-green) !important;
}

.bg-cisco-orange {
  background-color: var(--cisco-orange) !important;
}

/* ── Step-2 Gesamtsummen-Badge ───────────────────────────────────
   Exakt die Card-Header-Farbe (--cisco-blue-deeper). Eigene Klasse
   (NICHT .bg-cisco-blue), da die Badges-Sektion .bg-cisco-blue auf
   das hellere --cisco-blue ueberschreibt. */
.sda-sum-badge {
  display:          inline-block;
  background-color: var(--cisco-blue-deeper) !important;
  color:            #fff !important;
  font-weight:      700;
  font-size:        .8rem;
  line-height:      1.1;
  padding:          .28rem .55rem;
  border-radius:    .375rem;
  white-space:      nowrap;
}

/* ── Platform-Badges (Firmware) ────────────────────────────────── */
.badge-plat-cat9k        { background-color: var(--cisco-blue-deeper); color: #fff; }
.badge-plat-cat9k-lite   { background-color: var(--cisco-blue);        color: #000; }
.badge-plat-cat9k-iosxe  { background-color: var(--cisco-green);       color: #000; }
.badge-plat-cat9k2-iosxe { background-color: var(--cisco-teal);        color: #fff; }
.badge-plat-other        { background-color: #6c757d;                  color: #fff; }

/* SDA Policy-Matrix: an das Grid-Card-Muster angelehnt. Innere
   Gitterlinien bleiben (Lesbarkeit der Kreuztabelle), aber der
   aeussere Tabellenrahmen entfaellt – Rahmen liefert die
   .border.rounded-Karte, damit kein doppelter Rand entsteht. */
.sda-matrix-table { border-collapse: separate; border-spacing: 0; }
.sda-matrix-table > :not(caption) > * > * { border-width: 0 1px 1px 0; }
.sda-matrix-table tr > *:last-child { border-right-width: 0; }
.sda-matrix-table tbody tr:last-child > * { border-bottom-width: 0; }

/* ── Dark-Mode Anpassungen ────────────────────────────────────── */
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: rgba(255, 255, 255, .05);
  --bs-table-color: var(--bs-body-color);
}

/* Hilfe-Seite: Rollen-Spalte (table-primary) im Dark Mode mit Cisco-Blue */
[data-bs-theme="dark"] .table .table-primary {
  --bs-table-bg:           rgba(4, 159, 217, .20);
  --bs-table-color:        var(--bs-body-color);
  --bs-table-border-color: rgba(4, 159, 217, .40);
  --bs-table-striped-bg:   rgba(4, 159, 217, .24);
  --bs-table-hover-bg:     rgba(4, 159, 217, .28);
}

/* Hilfe-Seite: Gruppen-Kopfzeilen (table-secondary) im Dark Mode */
[data-bs-theme="dark"] .table .table-secondary {
  --bs-table-bg:           rgba(255, 255, 255, .07);
  --bs-table-color:        var(--bs-body-color);
  --bs-table-border-color: rgba(255, 255, 255, .12);
}

[data-bs-theme="dark"] .card-header.fw-semibold {
  background-color: var(--bs-card-cap-bg);
}

/* ── Responsive Footer-Margin ─────────────────────────────────── */
@media (max-width: 576px) {
  main.container-xl {
    padding-left:  .75rem;
    padding-right: .75rem;
  }
}

/* ── Admin-Kommentar (Blizzard Blue Post Style) ──────────────── */
.comment-admin {
  border-left: 4px solid var(--cisco-blue) !important;
  background: rgba(4, 159, 217, .06) !important;
  padding: 0 !important;
}
.comment-admin-header {
  background: linear-gradient(90deg,
    rgba(4, 159, 217, .18) 0%,
    rgba(4, 159, 217, .04) 100%);
  padding: .45rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(4, 159, 217, .2);
}
.comment-admin-avatar {
  width: 26px;
  height: 26px;
  background: var(--cisco-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .78rem;
  flex-shrink: 0;
}
.comment-admin-name {
  color: var(--cisco-blue);
  font-weight: 600;
  font-size: .85rem;
}
.comment-admin-badge {
  font-size: .62rem;
  background: var(--cisco-blue);
  color: #fff;
  border-radius: 2rem;
  padding: .1rem .45rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.comment-admin-body {
  padding: .55rem .75rem;
  font-size: .875rem;
}
[data-bs-theme="dark"] .comment-admin {
  background: rgba(4, 159, 217, .1) !important;
}
[data-bs-theme="dark"] .comment-admin-header {
  background: linear-gradient(90deg,
    rgba(4, 159, 217, .25) 0%,
    rgba(4, 159, 217, .08) 100%);
  border-bottom-color: rgba(4, 159, 217, .35);
}
[data-bs-theme="dark"] .comment-admin-name {
  color: #3ec9f0;
}

/* ── Zeilennummern in CLI-Vorschau & Diff ───────────────────────────────── */
.cli-preview {
  counter-reset: cli-line;
}
.cli-preview > span {
  counter-increment: cli-line;
}
.cli-preview > span::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;
}

/* ── Diff-Vorschau ───────────────────────────────────────────────────────── */
.diff-line-added {
  background-color: rgba(70, 149, 74, 0.20);
  color: #89d185;
  display: block;
}
.diff-line-removed {
  background-color: rgba(200, 60, 60, 0.20);
  color: #f14c4c;
  display: block;
}
.diff-line-unchanged {
  color: #6e7681;
  display: block;
}
.diff-prefix {
  user-select: none;
  margin-right: .4em;
  font-weight: 700;
}

/* ── Dark-Mode: .btn-dark / .btn-outline-dark / .badge.bg-dark ─────
 * Bootstrap 5.3 invertiert die "dark"-Varianten im Dark-Mode nicht.
 * Das Ergebnis: dunkler Text/Border auf fast identisch dunklem
 * Body-BG – praktisch unsichtbar. Wird u. a. vom Feature-Request-
 * Label "Wird nicht umgesetzt" (color = dark) für Button und Badge
 * verwendet.
 */
[data-bs-theme="dark"] .btn-dark {
  --bs-btn-bg:                  #495057;
  --bs-btn-border-color:        #6c757d;
  --bs-btn-color:               #fff;
  --bs-btn-hover-bg:            #5a6268;
  --bs-btn-hover-border-color:  #6c757d;
  --bs-btn-hover-color:         #fff;
  --bs-btn-active-bg:           #343a40;
  --bs-btn-active-border-color: #495057;
  --bs-btn-active-color:        #fff;
}

[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color:               #adb5bd;
  --bs-btn-border-color:        #6c757d;
  --bs-btn-bg:                  transparent;
  --bs-btn-hover-bg:            #495057;
  --bs-btn-hover-border-color:  #6c757d;
  --bs-btn-hover-color:         #fff;
  --bs-btn-active-bg:           #495057;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-color:        #fff;
}

[data-bs-theme="dark"] .badge.bg-dark {
  background-color: #495057 !important;
  color:            #fff    !important;
}

/* ── Credential-Vault ──────────────────────────────────────── */
#vault-card .card-header .badge {
  font-size: .7rem;
  letter-spacing: .02em;
}
#vault-card .list-unstyled li {
  line-height: 1.6;
}
#vault-card .progress {
  background-color: rgba(0, 0, 0, .08);
}
[data-bs-theme="dark"] #vault-card .progress {
  background-color: rgba(255, 255, 255, .1);
}

/* ── SSH-Credentials: sortable table headers ─────────────────── */
#cred-table th.cred-sort {
  cursor:          pointer;
  user-select:     none;
  white-space:     nowrap;
}
#cred-table th.cred-sort:hover {
  background-color: rgba(0, 0, 0, .04);
}
[data-bs-theme="dark"] #cred-table th.cred-sort:hover {
  background-color: rgba(255, 255, 255, .06);
}
#cred-table th.cred-sort .cred-sort-ind::before {
  content:          '\2195';          /* up+down arrows – idle */
  color:            rgba(0, 0, 0, .3);
  margin-left:      .3rem;
  font-size:        .85em;
}
[data-bs-theme="dark"] #cred-table th.cred-sort .cred-sort-ind::before {
  color: rgba(255, 255, 255, .45);
}
#cred-table th.cred-sort.is-sorted-asc  .cred-sort-ind::before {
  content:          '\25B2';          /* triangle up */
  color:            var(--cisco-blue);
}
#cred-table th.cred-sort.is-sorted-desc .cred-sort-ind::before {
  content:          '\25BC';          /* triangle down */
  color:            var(--cisco-blue);
}

/* ── @-Mentions in Bug-/Feature-Kommentaren (Pass N) ─────────── */
.mention {
  background:    rgba(var(--bs-primary-rgb), .08);
  padding:       0 .25rem;
  border-radius: .2rem;
}
.mention:hover,
.mention:focus {
  background:      rgba(var(--bs-primary-rgb), .18);
  text-decoration: none;
}

/* ── Mention-Autocomplete-Dropdown (Pass N) ──────────────────── */
.mention-suggester {
  position:      absolute;
  z-index:       1090;
  min-width:     220px;
  max-height:    240px;
  overflow:      auto;
  background:    var(--bs-body-bg);
  border:        1px solid var(--bs-border-color);
  border-radius: .375rem;
  box-shadow:    0 .25rem .5rem rgba(0,0,0,.12);
  padding:       .25rem 0;
}
.mention-suggester .ms-item {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  padding:       .375rem .75rem;
  cursor:        pointer;
  font-size:     .875rem;
  color:         var(--bs-body-color);
}
.mention-suggester .ms-item.is-active,
.mention-suggester .ms-item:hover {
  background:    rgba(var(--bs-primary-rgb), .12);
}
.mention-suggester .ms-item .ms-username {
  font-weight:   600;
}
.mention-suggester .ms-item .ms-display {
  color:         var(--bs-secondary-color);
  font-size:     .78rem;
}
.mention-suggester .ms-empty {
  padding:       .5rem .75rem;
  color:         var(--bs-secondary-color);
  font-size:     .78rem;
  font-style:    italic;
}

/* ── Comment-Reply-Quote-Block (Pass O) ──────────────────────── */
.comment-quote {
  display:        block;
  border-left:    3px solid var(--bs-secondary-bg);
  background:     rgba(var(--bs-secondary-rgb, 108,117,125), .06);
  padding:        .35rem .55rem;
  border-radius:  0 .25rem .25rem 0;
  color:          var(--bs-body-color);
  transition:     background-color .15s ease, border-color .15s ease;
}
.comment-quote:hover {
  background:     rgba(var(--bs-primary-rgb), .08);
  border-left-color: var(--bs-primary);
  text-decoration: none;
}
.comment-quote-meta {
  font-size:      .72rem;
  color:          var(--bs-secondary-color);
  margin-bottom:  .15rem;
}
.comment-quote-body {
  font-size:      .8rem;
  color:          var(--bs-body-color);
  white-space:    pre-wrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  display:        -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.comment-quote-orphan {
  color:          var(--bs-secondary-color);
  font-style:     italic;
  background:     none;
  border-left:    3px solid var(--bs-border-color-translucent);
  padding:        .35rem .55rem;
  border-radius:  0 .25rem .25rem 0;
}

/* Reply-Button im Comment-Footer */
.comment-reply-btn {
  font-size:      .72rem;
  padding:        .15rem .4rem;
  color:          var(--bs-secondary-color);
  text-decoration: none;
}
.comment-reply-btn:hover {
  color:          var(--bs-primary);
}

/* Reply-Form-Banner (zeigt 'Antwort an: ...' ueber dem Form) */
.comment-reply-banner {
  font-size:      .8rem;
  background:     rgba(var(--bs-primary-rgb), .08);
  border-left:    3px solid var(--bs-primary);
  padding:        .35rem .55rem;
  border-radius:  0 .25rem .25rem 0;
  margin-bottom:  .5rem;
  display:        flex;
  align-items:    center;
  gap:            .5rem;
}
.comment-reply-banner .crb-snippet {
  flex-grow:      1;
  min-width:      0;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
  color:          var(--bs-secondary-color);
  font-style:     italic;
}

/* Markdown-Output (.markdown-body) und CM6-Editor (.markdown-editor-*)
   leben jetzt in cisco-switch-config/css/markdown-editor.css und werden
   von admin/includes/header.php (Admin-Pages) sowie vom
   markdown-editor-loader.js (Frontend-FAB-Modals) geladen. */

/* ── Bootstrap-Tooltip-Box breiter ──────────────────────────────
   Default ist max-width: 200px – bei laengeren Hilfetexten an den
   ?-Icons in Admin-Forms (users, firmware, projects, webhooks ...)
   sonst zu schmal. Auf 360px erweitert, links-buendig fuer
   angenehmere Lesbarkeit. Symmetrisch zur Frontend-Regel in
   cisco-switch-config/css/style.css. */
.tooltip-inner {
  max-width:  360px;
  text-align: left;
}

/* ── Autosave-Pille (SDA-Wizard, Look identisch zum Konfigurator) ──── */
.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);
}
.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);
}
@keyframes autosave-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: .45; }
}

/* ── SDA HLD-Vorschau (Phase 6) ───────────────────────────────────── */
.sda-diagram-box {
  border:        1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  background:    var(--bs-body-bg, #fff);
  padding:       .75rem;
  overflow-x:    auto;
}
.sda-diagram-box .sda-diagram { display: block; margin: 0 auto; }
.sda-hld-h { scroll-margin-top: 1rem; }

@media print {
  .d-print-none,
  header, footer, .navbar,
  .admin-sidebar, .admin-sidebar-backdrop, .admin-topbar,
  #toast-stack, .feedback-fab { display: none !important; }
  body.admin-has-sidebar { padding-left: 0 !important; }
  .sda-hld { font-size: 11px; }
  .sda-hld-h { break-after: avoid; }
  .sda-diagram-box {
    break-inside: avoid;
    border-color: #999;
    overflow:     visible;
  }
  a[href]::after { content: ""; }
  body { background: #fff; }
}

/* ── Cart: rotierendes Icon während eines laufenden Prüflaufs ───────────── */
@keyframes cart-spin { to { transform: rotate(360deg); } }
.cart-spin { display: inline-block; animation: cart-spin .8s linear infinite; }
/* Deutlicher Akzent (Amber) während der Prüfung – hebt den Button klar vom
   blauen Card-Header ab und signalisiert „läuft". Klicks gesperrt. */
.cart-busy {
  pointer-events:   none;
  background-color: #ffc107 !important;
  border-color:     #ffc107 !important;
  color:            #1c2436 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Admin-Seitenleiste (Navigation – Variante A)
   Ersetzt die frühere horizontale Top-Navbar. Ab dem lg-Breakpoint ist die
   Leiste fest links verankert; der Body bekommt dann links Innenabstand.
   Unterhalb von lg fährt sie als Off-Canvas-Overlay ein (Toggle in der
   Topbar). Farben spiegeln das Bestands-Schema (--cisco-blue-deeper).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --admin-sb-w: 264px;
}

/* Body-Verschiebung nur, wenn die Sidebar gerendert wird (eingeloggt). */
@media (min-width: 992px) {
  body.admin-has-sidebar { padding-left: var(--admin-sb-w); }
}

.admin-sidebar {
  position:       fixed;
  top: 0; left: 0; bottom: 0;
  width:          var(--admin-sb-w);
  z-index:        1045;
  display:        flex;
  flex-direction: column;
  background:     linear-gradient(180deg, var(--cisco-blue-deeper) 0%, #013a57 100%);
  color:          #cfe6f3;
  box-shadow:     2px 0 12px rgba(0, 0, 0, .12);
}

.admin-sidebar__brand {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  flex:          0 0 auto;
  padding:       .85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-decoration: none;
}
.admin-sidebar__brand .brand-name { color: #fff; font-weight: 600; }

.admin-sidebar__scroll {
  flex:          1 1 auto;
  overflow-y:    auto;
  padding:       .5rem .55rem 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.admin-sidebar__scroll::-webkit-scrollbar       { width: 8px; }
.admin-sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 4px; }

.admin-sb-section {
  font-size:      .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:          #7fb0c9;
  font-weight:    600;
  padding:        .85rem .65rem .3rem;
}
.admin-sb-spacer { height: .75rem; }

.admin-nav-link {
  display:        flex;
  align-items:    center;
  gap:            .6rem;
  color:          #cfe6f3;
  text-decoration: none;
  padding:        .46rem .65rem;
  border-radius:  .45rem;
  font-weight:    500;
  line-height:    1.25;
}
.admin-nav-link > i {
  font-size:   1.02rem;
  width:       1.2rem;
  text-align:  center;
  opacity:     .9;
  flex:        0 0 auto;
}
.admin-nav-link:hover,
.admin-nav-link:focus { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-nav-link.active {
  background: var(--cisco-blue);
  color:      #fff;
  box-shadow: 0 2px 8px rgba(4, 159, 217, .35);
}
.admin-nav-link.active > i { opacity: 1; }

/* Akkordeon-Gruppen (System-Bereiche) */
.admin-nav-group > summary {
  display:       flex;
  align-items:   center;
  gap:           .6rem;
  list-style:    none;
  cursor:        pointer;
  color:         #cfe6f3;
  padding:       .46rem .65rem;
  border-radius: .45rem;
  font-weight:   500;
}
.admin-nav-group > summary::-webkit-details-marker { display: none; }
.admin-nav-group > summary > i.grp-ico {
  font-size: 1.02rem; width: 1.2rem; text-align: center; opacity: .9; flex: 0 0 auto;
}
.admin-nav-group > summary > .grp-chev {
  margin-left: auto; font-size: .8rem; opacity: .7; transition: transform .15s ease;
}
.admin-nav-group > summary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-nav-group[open] > summary { color: #fff; }
.admin-nav-group[open] > summary > .grp-chev { transform: rotate(90deg); }

.admin-nav-sub {
  margin:       .1rem 0 .35rem .95rem;
  padding-left: .5rem;
  border-left:  1px solid rgba(255, 255, 255, .12);
}
.admin-nav-sub .admin-nav-link     { padding: .38rem .6rem; font-size: .875rem; font-weight: 400; }
.admin-nav-sub .admin-nav-link > i { font-size: .95rem; }

/* Off-Canvas-Backdrop (nur < lg sichtbar, s. u.) */
.admin-sidebar-backdrop {
  position:   fixed;
  inset:      0;
  z-index:    1044;
  background: rgba(0, 0, 0, .45);
  opacity:    0;
  visibility: hidden;
  transition: opacity .2s ease;
}

/* ── Topbar (Breadcrumb + Konto-Steuerung) ───────────────────────────── */
.admin-topbar {
  position:      sticky;
  top:           0;
  z-index:       1030;
  display:       flex;
  align-items:   center;
  gap:           .6rem;
  padding:       .55rem 1rem;
  background:    var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.admin-topbar__crumb { color: var(--bs-secondary-color); font-size: .9rem; min-width: 0; flex: 0 0 auto; }
.admin-topbar__crumb .crumb-page { color: var(--bs-body-color); font-weight: 600; }
/* Breite Suchleiste, zwischen Breadcrumb und Steuerung mittig per
   Auto-Außenabständen; schrumpft auf schmalen Topbars mit. */
.admin-topbar__search { flex: 0 1 600px; min-width: 0; margin-inline: auto; }
.admin-topbar__right { flex: 0 0 auto; }

/* ── Off-Canvas-Verhalten unterhalb von lg ───────────────────────────── */
@media (max-width: 991.98px) {
  .admin-sidebar {
    transform:  translateX(-100%);
    transition: transform .25s ease;
  }
  body.sidebar-open .admin-sidebar          { transform: translateX(0); }
  body.sidebar-open .admin-sidebar-backdrop { opacity: 1; visibility: visible; }
  /* Hintergrund nicht scrollen, solange das Overlay offen ist. */
  body.sidebar-open { overflow: hidden; }
}