/* ============================================================
   Template-Felder im Wizard
   ------------------------------------------------------------
   Markiert Felder, die durch eine aktive Konfigurationsvorlage
   beeinflusst werden. Zwei Modi:
     .tpl-locked  – fest gesperrt, nicht bearbeitbar (gelb-warm)
     .tpl-preset  – vorbelegt, aber editierbar (dezenter blauer
                    linker Rand)
   Listen-Zeilen-Varianten:
     .tpl-row-locked / .tpl-row-preset
   ============================================================ */

/* ── Locked: gelb-warm + Schloss-Icon im Feld ─────────────── */
input.tpl-locked,
select.tpl-locked,
textarea.tpl-locked {
  background-color: var(--bs-warning-bg-subtle, #fff8e1) !important;
  border-color:     var(--bs-warning-border-subtle, #ffe69c) !important;
  cursor: not-allowed;
  /* Inline-SVG: lock-fill, gelb-bernstein */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b58900'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: .95rem .95rem;
  padding-right: 2rem !important;
}

input.tpl-locked:focus,
select.tpl-locked:focus,
textarea.tpl-locked:focus {
  box-shadow: 0 0 0 .15rem rgba(255, 193, 7, .25);
  border-color: var(--bs-warning, #ffc107) !important;
}

/* Selects mit Caret-Background brauchen das Icon links daneben.
   Wir lassen das native Caret weg und setzen NUR das Lock. */
select.tpl-locked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b58900'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}

/* Checkboxen / Radios */
.form-check-input.tpl-locked {
  background-color: var(--bs-warning-bg-subtle, #fff8e1) !important;
  border-color:     var(--bs-warning, #ffc107) !important;
  cursor: not-allowed;
}

/* Dark-Mode: gedaempftere Toene, hellere Lock-Farbe */
[data-theme="dark"] input.tpl-locked,
[data-theme="dark"] select.tpl-locked,
[data-theme="dark"] textarea.tpl-locked,
[data-bs-theme="dark"] input.tpl-locked,
[data-bs-theme="dark"] select.tpl-locked,
[data-bs-theme="dark"] textarea.tpl-locked {
  background-color: rgba(255, 193, 7, .07) !important;
  border-color:     rgba(255, 193, 7, .35) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffce5c'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}

/* ── Preset: dezenter blauer linker Rand ───────────────────── */
input.tpl-preset,
select.tpl-preset,
textarea.tpl-preset {
  border-left: 3px solid var(--bs-info, #0dcaf0) !important;
}
input.tpl-preset:focus,
select.tpl-preset:focus,
textarea.tpl-preset:focus {
  border-left-color: var(--bs-primary, #0d6efd) !important;
}

/* ── Listen-Zeilen (VLAN-Tabelle, SVI-Tabelle, Port-Profile) ─ */
.tpl-row-locked {
  background-color: var(--bs-warning-bg-subtle, #fff8e1) !important;
  position: relative;
}
.tpl-row-locked::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--bs-warning, #ffc107);
}
.tpl-row-preset {
  border-left: 3px solid var(--bs-info, #0dcaf0) !important;
}
[data-theme="dark"] .tpl-row-locked,
[data-bs-theme="dark"] .tpl-row-locked {
  background-color: rgba(255, 193, 7, .05) !important;
}
[data-theme="dark"] .tpl-row-locked::before,
[data-bs-theme="dark"] .tpl-row-locked::before {
  background: rgba(255, 206, 92, .9);
}

/* ── Bestehender Label-Badge "Gesperrt"/"Vorgabe" ──────────── */
.tpl-marker {
  vertical-align: middle;
  font-weight: 500;
}
.tpl-marker .bi {
  font-size: .7rem;
  vertical-align: -.05em;
}