/* Custom Design Overrides */
.form-container {
  background-color: transparent !important;
  background-image: none !important;
}

.club-logo {
  background-color: transparent !important;
  background-image: none !important;
}

/* Custom Text Color */
.form-container,
.form-container p,
.form-container div,
.form-container .col-form-label,
.form-container label,
.form-container .custom-header .title,
.form-container .form-check-label,
.form-title h1,
.form-title p,
.form-text,
.text-muted,
small.text-muted {
  color: #f2f7fdff !important;
}

.form-floating > label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not([value=""]) ~ label {
  color: #f2f7fdff !important;
}

/* Hide Club Logo */
.club-logo {
  display: none !important;
}

.form-header-default img {
  display: none !important;
}

.form-header-default .col-3 {
  display: none !important;
}

.form-header-default .col-9 {
  width: 100% !important;
  flex: 0 0 100% !important;
}

.club-header-outside {
  margin-bottom: 1rem !important;
}

.form-container {
  padding-top: 2.5rem !important;
}

@media (min-width: 768px) {
  .form-container {
    padding-top: 3rem !important;
  }
}


/* Additional Custom CSS */
/* ================================================
   MONOCHROME — Nur Lila-Farbwerte ersetzen
   Keine Änderungen an Seiten- oder Formular-Hintergründen
   ================================================ */

/* Bootstrap-interne Variablen (Radio-Dot, Focus-Ring) */
:root {
  --bs-primary:                               #888888;
  --bs-primary-rgb:                           136, 136, 136;
  --bs-form-check-input-checked-bg-color:     #888888;
  --bs-form-check-input-checked-border-color: #888888;
  --bs-form-check-radio-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
}

input[type="radio"],
input[type="checkbox"] { accent-color: #888888; }

/* Logo — nur Rahmen & Shadow */
.club-logo {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(150, 150, 150, 0.3);
}

/* Container — nur Rahmen & Shadow, CSS-Variablen */
.form-container {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 1px rgba(150, 150, 150, 0.15) !important;
  border-color: rgba(150, 150, 150, 0.2);
  --bs-border-color:                 rgba(150, 150, 150, 0.3);
  --sw-toolbar-btn-background-color: #888888;
  --sw-anchor-default-primary-color: #333333;
  --sw-anchor-active-primary-color:  #888888;
  --sw-anchor-done-primary-color:    #555555;
  --sw-progress-color:               #888888;
}

/* Section Header — linke Linie */
.custom-header { border-left-color: white; }

/* Summary — Rahmen */
.summary-card { border-color: rgba(150, 150, 150, 0.25); }

.summary-card-header {
  background: rgba(150, 150, 150, 0.08);
  border-bottom-color: rgba(150, 150, 150, 0.2);
}

.summary-custom-fields { border-top-color: rgba(150, 150, 150, 0.2); }

#divFamMembersSumarize > div { border-left-color: #888888; }

@media (max-width: 767px) {
  .summary-item { border-color: rgba(150, 150, 150, 0.15); }
}

/* Input-Felder — neutraler Hintergrund & grauer Rahmen */
.form-control,
.form-select {
  background-color: #1e1e1e;
  border-color: rgba(150, 150, 150, 0.3);
}

.form-control:focus,
.form-select:focus {
  background-color: #252525;
  border-color: #888888;
  box-shadow: 0 0 0 0.2rem rgba(150, 150, 150, 0.25);
}

/* Buttons */
.btn-primary { background: linear-gradient(135deg, #888888 0%, #606060 100%); }

.btn-primary:hover {
  background: linear-gradient(135deg, #999999 0%, #707070 100%);
  box-shadow: 0 4px 16px rgba(150, 150, 150, 0.25);
}

.btn-check:checked + .btn-primary {
  background: linear-gradient(135deg, #888888 0%, #606060 100%);
  border-color: #888888;
}

.btn-outline-primary { border-color: #888888; color: #aaaaaa; }

.btn-outline-primary:hover {
  background: rgba(150, 150, 150, 0.12);
  border-color: #aaaaaa;
  color: #cccccc;
  box-shadow: 0 4px 12px rgba(150, 150, 150, 0.2);
}

/* Override compiled custom-hover-color (höhere Spezifizität als btn-outline-primary:hover) */
.btn-outline-primary.custom-hover-color:hover {
  background-color: rgba(150, 150, 150, 0.12) !important;
  color: #cccccc !important;
  border-color: #aaaaaa !important;
  box-shadow: 0 4px 12px rgba(150, 150, 150, 0.2) !important;
}

.btn-group .btn {
  background-color: #1e1e1e;
  border-color: rgba(150, 150, 150, 0.3);
}

.btn-group .btn:hover {
  background-color: #252525;
  border-color: #888888;
}

/* Anrede-Radio-Gruppe (btn-outline-secondary) */
.btn-outline-secondary {
  --bs-btn-border-color:        rgba(150, 150, 150, 0.3);
  --bs-btn-hover-border-color:  #888888;
  --bs-btn-active-border-color: #888888;
  --bs-btn-active-bg:           #888888;
  --bs-btn-bg:       #1e1e1e;
  --bs-btn-hover-bg: #252525;
}

.btn-check:checked + .btn-outline-secondary {
  background: linear-gradient(135deg, #888888 0%, #606060 100%) !important;
  border-color: #888888 !important;
}

/* Stepper-Punkte */
.sw-theme-dots > .nav::before                           { background-color: #333333; }
.sw-theme-dots .nav-link:not(.active):not(.done)::after { background-color: #333333 !important; }
.sw-theme-dots .nav-link.done::after                    { background-color: #555555 !important; }
.sw-theme-dots .nav-link.active::after                  { background-color: #888888 !important; }

/* Checkbox & Radio */
.form-check-input         { border-color: rgba(150, 150, 150, 0.3); }
.form-check-input:checked { background-color: #888888; border-color: #888888; }
.form-check-input:focus   { border-color: #888888; box-shadow: 0 0 0 0.2rem rgba(150, 150, 150, 0.25); }

/* Floating Labels */
.form-floating > .form-control,
.form-floating > .form-select {
  background-color: #1e1e1e;
  border-color: rgba(150, 150, 150, 0.3);
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
  background-color: #252525;
  border-color: #888888;
  box-shadow: 0 0 0 0.2rem rgba(150, 150, 150, 0.25);
}

/* Familienmitglieder-Rahmen */
.border         { border-color: rgba(150, 150, 150, 0.3) !important; }
.border.rounded { border-color: rgba(150, 150, 150, 0.3) !important; }

/* Signature Pad */
#signature-pad { border-color: rgba(150, 150, 150, 0.3); }

/* Gültig-Zustand → Grau statt Grün */
.valid.modified:not([type=checkbox]) {
  border-color: #888888 !important;
  background-color: rgba(150, 150, 150, 0.05);
}
.valid.modified:not([type=checkbox]):focus {
  border-color: #888888 !important;
  box-shadow: 0 0 0 0.2rem rgba(150, 150, 150, 0.2);
}

/* Multi-Select */
.multi-select,
.multi-select .multi-select-header {
  background-color: #1e1e1e;
  border-color: rgba(150, 150, 150, 0.3);
}

.multi-select .multi-select-header.multi-select-header-active { border-color: #888888; }

.multi-select .multi-select-header .multi-select-header-option {
  background-color: rgba(150, 150, 150, 0.2);
  border-color: rgba(150, 150, 150, 0.35);
}

.multi-select .multi-select-options {
  background-color: #1e1e1e;
  border-color: rgba(150, 150, 150, 0.3);
}

.multi-select .multi-select-options::-webkit-scrollbar-track { background: #252525; }
.multi-select .multi-select-options::-webkit-scrollbar-thumb { background: #3a3a3a; }
.multi-select .multi-select-options::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }

.multi-select .multi-select-options .multi-select-option:hover,
.multi-select .multi-select-options .multi-select-all:hover { background-color: rgba(150, 150, 150, 0.12); }

.multi-select .multi-select-options .multi-select-option-radio {
  border-color: rgba(150, 150, 150, 0.4);
  background-color: #252525;
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio {
  border-color: #888888;
  background-color: #888888;
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-text,
.multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-text { color: #aaaaaa; }

.multi-select .multi-select-options .multi-select-all { border-bottom-color: rgba(150, 150, 150, 0.2); }

.multi-select .multi-select-options .multi-select-search {
  background-color: #252525;
  border-color: rgba(150, 150, 150, 0.3);
}
.multi-select .multi-select-options .multi-select-search:focus { border-color: #888888; }

/* Info-Text */
.custom-field-infotext {
  border-left-color: white;
  background-color: rgba(150, 150, 150, 0.08);
}
.custom-field-infotext-icon svg { stroke: white; }