/*
Updated: Sarah: 01.08.2025 Checkboxes waren allgemein zu Switches umfunktioniert worden. (exclusions gebaut für form-check-input)
*/


select:invalid { color: gray; }

input, textarea, select {
    color: unset;
    font-size: unset;
    margin-bottom: unset;
    padding: unset;
    border: unset;
    border-radius: unset;	color: var(--vida-fontcolor-black) !important;
}

/* --- Buttons & Cards --- */
button, button:hover, a.button:hover, a.button:focus, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
    background: unset;
    background-color: unset;
    filter: unset;
    border: 1px solid transparent;
    color: unset;
    outline: unset;
    text-decoration: unset;
}
.btn, .card {
    border-radius: 12px;
    transition: color .15s, background-color .15s, border-color .15s, background-image .15s, box-shadow .15s;
}.card {	
	background-color: var(--vida-fontcolor-white) !important;
	border: 1px solid rgba(var(--vida-fontcolor-black-rgb), 0.125) !important;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(var(--vida-fontcolor-black-rgb), 0.075) !important;
}
.btn, .btn:hover { border-width: 2px; }
.btn.border-0, .btn.border-0:hover { border-width: 0px !important; }

/* --- Switches: keep original appearance, including knob --- */
.form-switch .form-check-input {
  width: 50px;
  height: 25px;
  margin-left: 0;
  margin-top: 0;
  border-radius: 2em;
  cursor: pointer;
  /* leave the native knob; do not override ::after or appearance here */
}
.form-switch.form-switch-small .form-check-input {
  width: 2em;
  height: 1em;
}
.form-switch .form-check-input:checked {
  background-color: var(--vida-green5);
  border-color: var(--vida-green5);
}
.android .form-switch .form-check-input:checked {
  background-color: var(--vida-vidablue4) !important;
  border-color: var(--vida-vidablue4) !important;
}

/* --- Switches remain as-is (no interference) --- */
.form-switch .form-check-input {
  width: 50px;
  height: 25px;
  margin-left: 0;
  margin-top: 0;
  border-radius: 2em;
  cursor: pointer;
}
.form-switch.form-switch-small .form-check-input {
  width: 2em;
  height: 1em;
}
.form-switch .form-check-input:checked {
  background-color: var(--vida-green5);
  border-color: var(--vida-green5);
}
.android .form-switch .form-check-input:checked {
  background-color: var(--vida-vidablue4) !important;
  border-color: var(--vida-vidablue4) !important;
}

/* --- Non-switch checkboxes: no background-image ever --- */
.form-check-input:not(.form-switch .form-check-input) {
  position: relative; /* for custom tick */
  background-image: none !important;
}

/* Focus halo (green) for non-switch checkboxes */
.form-check-input:not(.form-switch .form-check-input):focus {
  border-color: var(--vida-green5);
  box-shadow: 0 0 0 0.25rem rgba(43, 155, 99, 0.25);
  background-image: none !important;
}

/* Android focus override for non-switch checkboxes */
.android .form-check-input:not(.form-switch .form-check-input):focus {
  border-color: var(--vida-vidablue4) !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 175, 255, 0.25);
  background-image: none !important;
}

/* Checked state: keep background (if any) but no SVG interference */
.form-check-input:not(.form-switch .form-check-input):checked {
  background-image: none !important;
}

/* Custom tick for non-switch checkboxes */
.form-check-input:not(.form-switch .form-check-input):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 14px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  pointer-events: none;
  z-index: 1;
}

/* Cursor */
.cursor-pointer, .form-check-input {
  cursor: pointer;
}


/* --- Custom Radios --- */
input[type="radio"].form-radio {
    --radio-size: 18px;
    --radio-border-width: 2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0 !important;
    margin-right: 1em !important;
    appearance: none;
    width: var(--radio-size);
    height: var(--radio-size);
    min-width: var(--radio-size);
    min-height: var(--radio-size);
    border: var(--radio-border-width) solid var(--vida-grey3);
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
}
input[type="radio"].form-radio:checked { border-color: var(--vida-vidablue4); }
input[type="radio"].form-radio::before {
    --inner-size: 8px;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--inner-size);
    height: var(--inner-size);
    min-width: var(--inner-size);
    min-height: var(--inner-size);
    background-color: var(--vida-vidablue4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .2s;
}
input[type="radio"].form-radio:checked::before { opacity: 1; }

/* --- Floating Label Inputs --- */
.form-floating { position: relative; }
.form-floating .form-control, .form-floating .form-select {
    height: 2.8rem;
    padding: .8rem !important;
    padding-bottom: .4rem !important;
    border: 1px solid var(--vida-fontcolor-grey-light);
    border-radius: 4px;
    background: var(--vida-fontcolor-white);
}
.form-floating label {
    position: absolute;
    top: 50%; left: 1rem;
    transform: translateY(-50%);
    font-size: .8rem;
    color: var(--color-aaa);
    background: var(--vida-fontcolor-white);
    opacity: 1 !important;
    transition: .2s;
    pointer-events: none;
    height: unset;
    padding: 0;
}
.form-floating .form-control:focus + label,
.form-floating .form-control:not(:placeholder-shown) + label,
.form-floating .form-select + label {
    top: -9px; left: .75rem;
    transform: none;
    color: var(--vida-fontcolor-black);
    font-size: .75rem;
    padding: 0 5px;
}
.form-floating .form-control:focus, .form-floating .form-select:focus {
    border-color: var(--vida-vidablue4);
    box-shadow: none;
}
.form-floating .form-control:focus + label, .form-floating .form-select:focus + label {
    color: var(--vida-vidablue4);
}

/* --- Collapse / Offcanvas --- */
.transition { transition: transform .3s; }
.collapse:not(.navbar-collapse), .collapsing:not(.navbar-collapse) { font-size: 14px !important; }
.collapse { display: none; }
.collapse.show { display: block; }
@media only screen and (max-width: 576px) {
    .collapse.show { display: none; }
}
[data-bs-toggle="collapse"][aria-expanded="true"] .transition { transform: rotate(180deg); }
.offcanvas-body { max-height: calc(100vh - 56px); }

/* --- Passwort Tools --- */
.pw-container { width: 100%; margin-bottom: 1.5rem; }
.pw-container .pw-feedback { margin-top: 1rem; display: none; }
.pw-container:focus-within .pw-feedback { display: block; }
#pw-progress { transition: width .3s, background-color .3s; }
.pw-checklist { list-style: none; padding-left: 0; font-size: .9rem; margin-top: .5rem; }
.pw-checklist li { display: flex; align-items: center; margin-bottom: .25rem; color: var(--vida-red5); }
.pw-checklist li.valid { color: var(--vida-green6); }
.pw-checklist li::before { content: '✖'; display: inline-block; width: 1em; text-align: center; margin-right: .5em; }
.pw-checklist li.valid::before { content: '✔'; }

/* --- Farben, Badges, Text, Border --- */
.bg-success { background-color: var(--vida-green2, #A2E2C1) !important; color: var(--vida-fontcolor-black); }
.bg-warning { background-color: var(--vida-yellow2, #FFDBA2) !important; color: var(--vida-fontcolor-black); }
.bg-danger { background-color: var(--vida-red2, #FEB4B6) !important; color: var(--vida-fontcolor-black); }
.bg-primary { background-color: var(--vida-vidablue4, #00aeff) !important; color: var(--vida-fontcolor-white); }
.bg-secondary { background-color: var(--vida-grey2) !important; color: var(--vida-fontcolor-black); }

.badge { display: inline-block; padding: 4px 8px; border-radius: 12px; letter-spacing: .6px; font-style: normal; font-weight: 500; }
.badge.bg-warning { background-color: var(--vida-yellow1, #FFEACA) !important; color: var(--vida-yellow5, #EA9F28) !important; }
.badge.bg-danger { background-color: var(--vida-red1, #FFD9DA) !important; color: var(--vida-red5) !important; }
.badge.bg-success { background-color: var(--vida-green1, #D4F5E4) !important; color: var(--vida-green5) !important; }
.badge.bg-secondary { background-color: var(--vida-grey1) !important; color: var(--vida-fontcolor-standard) !important; }

.text-success { color: var(--vida-green2, #A2E2C1) !important; }
.text-warning { color: var(--vida-yellow2, #FFDBA2) !important; }
.text-danger { color: var(--vida-red2, #FEB4B6) !important; }
.text-primary { color: var(--vida-vidablue4, #00aeff) !important; }
.text-secondary { color: var(--vida-grey2) !important; }
.text-vida-blue-4 { color: var(--vida-vidablue4); }

.border-primary { border-color: var(--vida-vidablue4) !important; }
.border-warning { border-color: var(--vida-yellow4) !important; }
.border-danger { border-color: var(--vida-red1) !important; }
.border-secondary { border-color: var(--vida-grey2) !important; }
.border-success { border-color: var(--vida-green2) !important; }
.border-outline-primary { border-color: var(--vida-vidablue4) !important; }
.border-outline-warning { border-color: var(--vida-yellow4) !important; }
.border-outline-danger { border-color: var(--vida-red4) !important; }
.border-outline-secondary { border-color: var(--vida-grey2) !important; }

/* --- Gradient-Buttons (Primary, Success, Danger, Warning, Secondary) --- */
/* Success */
.btn-success-gradient-left-right { color: var(--vida-fontcolor-white); background-image: linear-gradient(to right, var(--vida-other5), var(--vida-green5)); border-width: 0px; border-color: var(--vida-green5);}
.btn-success-gradient-left-right:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to right, var(--vida-green5), var(--vida-green7)); border-width: 0px; border-color: var(--vida-green7);}
.btn-success-gradient-right-left { color: var(--vida-fontcolor-white); background-image: linear-gradient(to left, var(--vida-other5), var(--vida-green5)); border-width: 0px; border-color: var(--vida-green5);}
.btn-success-gradient-right-left:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to left, var(--vida-green5), var(--vida-green7));border-width: 0px; border-color: var(--vida-green7);}
.btn-success-gradient-top-bottom { color: var(--vida-fontcolor-white); background-image: linear-gradient(to bottom, var(--vida-other5), var(--vida-green5)); border-width: 0px; border-color: var(--vida-green5);}
.btn-success-gradient-top-bottom:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to bottom, var(--vida-green5), var(--vida-green7)); border-width: 0px; border-color: var(--vida-green7);}
.btn-success-gradient-bottom-top { color: var(--vida-fontcolor-white); background-image: linear-gradient(to top, var(--vida-other5), var(--vida-green5)); border-width: 0px; border-color: var(--vida-green5);}
.btn-success-gradient-bottom-top:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to top, var(--vida-green5), var(--vida-green7));  border-width: 0px; border-color: var(--vida-green7);}
/* Warning */
.btn-warning-gradient-left-right { color: var(--vida-fontcolor-black); background-image: linear-gradient(to right, var(--vida-yellow4), var(--vida-yellow5)); border-width: 0px; border-color: var(--vida-yellow5);}
.btn-warning-gradient-left-right:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to right, var(--vida-yellow6), var(--vida-yellow7));  border-width: 0px;border-color: var(--vida-yellow7);}
.btn-warning-gradient-right-left { color: var(--vida-fontcolor-black); background-image: linear-gradient(to left, var(--vida-yellow4), var(--vida-yellow5)); border-width: 0px;border-color: var(--vida-yellow5);}
.btn-warning-gradient-right-left:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to left, var(--vida-yellow6), var(--vida-yellow7)); border-width: 0px;border-color: var(--vida-yellow7);}
.btn-warning-gradient-top-bottom { color: var(--vida-fontcolor-black); background-image: linear-gradient(to bottom, var(--vida-yellow4), var(--vida-yellow5)); border-width: 0px;border-color: var(--vida-yellow5);}
.btn-warning-gradient-top-bottom:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to bottom, var(--vida-yellow6), var(--vida-yellow7)); border-width: 0px;border-color: var(--vida-yellow7);}
.btn-warning-gradient-bottom-top { color: var(--vida-fontcolor-black); background-image: linear-gradient(to top, var(--vida-yellow4), var(--vida-yellow5)); border-width: 0px;border-color: var(--vida-yellow5);}
.btn-warning-gradient-bottom-top:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to top, var(--vida-yellow6), var(--vida-yellow7)); border-width: 0px;border-color: var(--vida-yellow7);}
/* Danger */
.btn-danger-gradient-left-right { color: var(--vida-red5); background-image: linear-gradient(to right, var(--vida-red4), var(--vida-red5)); border-width: 0px;border-color: var(--vida-red5);}
.btn-danger-gradient-left-right:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to right, var(--vida-red6), var(--vida-red7)); border-width: 0px;border-color: var(--vida-red7);}
.btn-danger-gradient-right-left { color: var(--vida-red5); background-image: linear-gradient(to left, var(--vida-red4), var(--vida-red5)); border-width: 0px;border-color: var(--vida-red5);}
.btn-danger-gradient-right-left:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to left, var(--vida-red6), var(--vida-red7)); border-width: 0px;border-color: var(--vida-red7);}
.btn-danger-gradient-top-bottom { color: var(--vida-red5); background-image: linear-gradient(to bottom, var(--vida-red4), var(--vida-red5)); border-width: 0px;border-color: var(--vida-red5);}
.btn-danger-gradient-top-bottom:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to bottom, var(--vida-red6), var(--vida-red7)); border-width: 0px;border-color: var(--vida-red7);}
.btn-danger-gradient-bottom-top { color: var(--vida-red5); background-image: linear-gradient(to top, var(--vida-red4), var(--vida-red5)); border-width: 0px;border-color: var(--vida-red5);}
.btn-danger-gradient-bottom-top:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to top, var(--vida-red6), var(--vida-red7)); border-width: 0px;border-color: var(--vida-red7);}
/* Primary */
.btn-primary-gradient-left-right { color: var(--vida-fontcolor-white); background-image: linear-gradient(to right, var(--vida-vidablue3), var(--vida-blue5)); border-width: 0px; border-color: var(--vida-vidablue5);}
.btn-primary-gradient-left-right:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to right, var(--vida-vidablue5), var(--vida-blue7)); border-width: 0px;border-color: var(--vida-vidablue7);}
.btn-primary-gradient-right-left { color: var(--vida-fontcolor-white); background-image: linear-gradient(to left, var(--vida-vidablue4), var(--vida-vidablue5)); border-width: 0px;border-color: var(--vida-vidablue5);}
.btn-primary-gradient-right-left:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to left, var(--vida-vidablue6), var(--vida-vidablue7)); border-width: 0px;border-color: var(--vida-vidablue7);}
.btn-primary-gradient-top-bottom { color: var(--vida-fontcolor-white); background-image: linear-gradient(to bottom, var(--vida-vidablue4), var(--vida-vidablue5)); border-width: 0px;border-color: var(--vida-vidablue5);}
.btn-primary-gradient-top-bottom:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to bottom, var(--vida-vidablue6), var(--vida-vidablue7)); border-width: 0px;border-color: var(--vida-vidablue7);}
.btn-primary-gradient-bottom-top { color: var(--vida-fontcolor-white); background-image: linear-gradient(to top, var(--vida-vidablue4), var(--vida-vidablue5)); border-width: 0px;border-color: var(--vida-vidablue5);}
.btn-primary-gradient-bottom-top:hover { color: var(--vida-fontcolor-white); background-image: linear-gradient(to top, var(--vida-vidablue6), var(--vida-vidablue7)); border-width: 0px;border-color: var(--vida-vidablue7);}
/* Secondary */
.btn-secondary-gradient-left-right { color: var(--vida-fontcolor-black); background-image: linear-gradient(to right, var(--vida-grey4), var(--vida-grey5)); border-width: 0px;border-color: var(--vida-grey5);}
.btn-secondary-gradient-left-right:hover { color: var(--vida-fontcolor-black); background-image: linear-gradient(to right, var(--vida-grey6), var(--vida-grey7)); border-width: 0px;border-color: var(--vida-grey7);}
.btn-secondary-gradient-right-left { color: var(--vida-fontcolor-black); background-image: linear-gradient(to left, var(--vida-grey4), var(--vida-grey5)); border-width: 0px;border-color: var(--vida-grey5);}
.btn-secondary-gradient-right-left:hover { color: var(--vida-fontcolor-black); background-image: linear-gradient(to left, var(--vida-grey6), var(--vida-grey7)); border-width: 0px;border-color: var(--vida-grey7);}
.btn-secondary-gradient-top-bottom { color: var(--vida-fontcolor-black); background-image: linear-gradient(to bottom, var(--vida-grey4), var(--vida-grey5)); border-width: 0px;border-color: var(--vida-grey5);}
.btn-secondary-gradient-top-bottom:hover { color: var(--vida-fontcolor-black); background-image: linear-gradient(to bottom, var(--vida-grey6), var(--vida-grey7)); border-width: 0px;border-color: var(--vida-grey7);}
.btn-secondary-gradient-bottom-top { color: var(--vida-fontcolor-black); background-image: linear-gradient(to top, var(--vida-grey4), var(--vida-grey5)); border-width: 0px;border-color: var(--vida-grey5);}
.btn-secondary-gradient-bottom-top:hover { color: var(--vida-fontcolor-black); background-image: linear-gradient(to top, var(--vida-grey6), var(--vida-grey7)); border-width: 0px;border-color: var(--vida-grey7);}

/* --- Gradient-Backgrounds --- */
.bg-success-gradient-left-right, .bg-success-gradient-right-left, .bg-success-gradient-top-bottom, .bg-success-gradient-bottom-top {
    background-image: linear-gradient(to right, var(--vida-green4), var(--vida-green5)) !important; color: var(--vida-fontcolor-white);
}
.bg-warning-gradient-left-right, .bg-warning-gradient-right-left, .bg-warning-gradient-top-bottom, .bg-warning-gradient-bottom-top {
    background-image: linear-gradient(to right, var(--vida-yellow4), var(--vida-yellow5)) !important; color: var(--vida-fontcolor-black);
}
.bg-danger-gradient-left-right, .bg-danger-gradient-right-left, .bg-danger-gradient-top-bottom, .bg-danger-gradient-bottom-top {
    background-image: linear-gradient(to right, var(--vida-red4), var(--vida-red5)) !important; color: var(--vida-fontcolor-white);
}
.bg-primary-gradient-left-right, .bg-primary-gradient-right-left, .bg-primary-gradient-top-bottom, .bg-primary-gradient-bottom-top {
    background-image: linear-gradient(to right, var(--vida-vidablue4), var(--vida-vidablue5)) !important; color: var(--vida-fontcolor-white);
}
.bg-secondary-gradient-left-right, .bg-secondary-gradient-right-left, .bg-secondary-gradient-top-bottom, .bg-secondary-gradient-bottom-top {
    background-image: linear-gradient(to right, var(--vida-grey4), var(--vida-grey5)) !important; color: var(--vida-fontcolor-black);
}

/* --- Sonstige --- */
.fa-chevron-2x { font-size: 1.5em; color: var(--vida-vidablue4); }
.chevron-center { width: 50px; text-align: center; }

.form-control.is-invalid {
    border-color: var(--vida-red4) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

      .form-select {
        /* padding: 0.516rem 0.75rem; */
        font-size:1rem;
      }

/*bootstrap datepicker*/
td.day {padding: 5px !important}
.datepicker {border-radius: 6px;}
.table {	color: var(--vida-fontcolor-black) !important;	--bs-table-striped-color: var(--vida-fontcolor-black);	--bs-table-striped-bg: rgba(var(--vida-fontcolor-black-rgb), 0.05);	--bs-table-active-color: var(--vida-fontcolor-black);	--bs-table-active-bg: rgba(var(--vida-fontcolor-black-rgb, 0.1);	--bs-table-hover-color: var(--vida-fontcolor-black);	--bs-table-hover-bg: rgba(var(--vida-fontcolor-black-rgb, 0.075);}