/* Forms CSS - Contains all form and input-related styles */

/* Control Components */
.form-switch .form-check-input { transition: all;}

.control-label.toggle-label.text-body-tertiary {
  color: #000 !important;
  font-weight: 400;
}

.control-label.text-black {
  color: var(--Ward-Dark-Grey) !important;
  font-weight: 700;
}

/* Custom Toggle */
.custom-toggle {
  width: 66px !important;
  height: 32px !important;
  border: 2px solid #1d897a;
  background-color: #eaedf2;
  background-size: 22px;
  background-image: var(--bs-form-switch-unchecked) !important;
  background-position: 2px;
  transition: all 0.2s ease-in-out;
}

.custom-toggle.custom-toggle-vehicle-cards {
    border: 2px solid #444444df;
    background-color: #fff;
}

.custom-toggle:checked {
  border: none;
  background-size: 30px;
  background-position: right center;
  background-image: var(--bs-form-switch-bg) !important;
  transition: all 0.2s ease-in-out;
  background-color: #1d897a;
}

.custom-toggle:focus {
  box-shadow: none;
  border-color: #1d897a;
}

.custom-toggle.custom-toggle-vehicle-cards:focus { border-color: #444444df;}

.custom-toggle-active-inactive {
    width: 97px !important;
    height: 24px !important;
    border: none;
    background-color: transparent !important;
}

.custom-toggle-active-inactive:checked {
    background-image: var(--bs-form-custom-toggle-active) !important;
    transition: all 0.2s ease-in-out;
}

.custom-toggle-active-inactive:not(:checked) {
    background-image: var(--bs-form-custom-toggle-inactive) !important;
    transition: all 0.2s ease-in-out;
}

.custom-toggle-active-inactive:focus {
    box-shadow: none;
    border: none;
}

.custom-toggle-online-offline {
    width: 97px !important;
    height: 24px !important;
    border: none;
    background-color: transparent !important;
}

.custom-toggle-online-offline:checked {
    background-image: var(--bs-form-custom-toggle-online) !important;
    transition: all 0.2s ease-in-out;
}

.custom-toggle-online-offline:not(:checked) {
    background-image: var(--bs-form-custom-toggle-offline) !important;
    transition: all 0.2s ease-in-out;
}

.custom-toggle-online-offline:focus {
    box-shadow: none;
    border: none;
}

/* Custom Checkbox */
.form-check-input.custom-checkbox {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border-color: #444;
  background: none !important;
}

.form-check-input.custom-checkbox:checked {
  background-color: transparent !important;
  background-image: var(--bs-form-custom-check) !important;
  background-position: center !important;
}

.form-check-input.custom-checkbox:focus {
  box-shadow: none;
  border-color: #444;
}

.form-check-input:checked { background-color: #228878;}

/* Custom Range */
.form-control.form-control-range.custom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0px;
  border: 1px solid #939598;
  background: var(--Ward-Light-Grey);
  border-radius: 40px;
  height: 6px;
  margin-top: 16px;
}

.form-control.form-control-range.custom-range:focus { box-shadow: none;}

.form-control.form-control-range.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--primary-turquoise);
  cursor: pointer;
  border-radius: 100%;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25));
}

/* Custom Input */
.form-control.custom-input,
.select2-container .select2-selection.select2-selection--single {
  border: 1px solid #939598;
  color: var(--Ward-Dark-Grey);
  font-size: 14px !important;
  height: 48px !important;
}

.form-control.input-border {
  border: 1px solid var(--Ward-Grey);
  font-size: 14px !important;
}

.form-control.custom-input:focus { box-shadow: 0 0 0 2px var(--primary-blue);}
.form-control.custom-input:disabled { background-color: var(--Ward-Light-Grey);}

/* Custom Date Input */
.form-control.custom-date-input { position: relative;}
.form-control.custom-date-input::-webkit-calendar-picker-indicator { opacity: 0;}

.form-control.custom-date-input::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  background: var(--bs-date-picker);
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Custom Radio */
.form-check-input.custom-radio {
  width: 33px;
  height: 33px;
  border: 2px solid var(--Ward-Dark-Grey);
  position: relative;
}

.form-check-input.custom-radio::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background-color: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-check-input.custom-radio:focus { outline: none;}

.form-check-input.custom-radio:checked {
  box-shadow: none;
  background-color: transparent !important;
  background-image: none;
}

.form-check-input.custom-radio:checked::after { background-color: var(--Ward-Dark-Grey);}

/* Custom Dropdown */
#custom-dropdown-wrapper,
#custom-dropdown.dropdown-menu { width: 346px;}

img.custom-dropdown-arrow {
  top: 45%;
  right: .8rem;
  transition: 0.2s ease-in-out all;
}

img.custom-dropdown-arrow-rotate { transform: rotate(180deg);}

.custom-dropdown-wrapper,
.custom-dropdown.dropdown-menu {
  width: 100% !important;
  left: 0;
  top: 100%;
}

.custom-dropdown.dropdown-menu { width: 100%;}

input.custom-multi-dropdown {
  border: none;
  outline: none;
  flex-grow: 1;
}

.pill {
  padding: 6px;
  display: flex;
  align-items: center;
  font-size: 16px;
  border-radius: 40px;
  border: 1px solid var(--Ward-Dark-Grey);
  background: var(--Ward-Light-Grey);
}

.pill .remove-btn {
  width: 24px;
  margin-right: 8px;
  cursor: pointer;
}

/* Filter Inputs */
.grid-filter-label {
  font-size: 16px;
  font-weight: 600;
  color: black;
}

.grid-filter-info-icon {
  width: 24px;
  height: 24px;
  position: relative;
  top: -3px;
  padding-left: 3px;
}

.grid-filter-input-box {
  border: 1px solid #939598;
  font-size: 16px;
  color: #444444;
  width: 100%;
}

.grid-filter-input-box-left { border-radius: 5px 0 0 5px;}
.grid-filter-input-box-right { border-radius: 0 5px 5px 0;}
.input-box-right { height: 42px; margin-left: -1px;}

.filter-select {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border: 1px solid #939598;
    border-radius: 5px;
    /* Typography */
    font-family: "Poppins", serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 24px;
    color: #444444;
    -o-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M10 0.5H0L5 5.5L10 0.5Z" fill="%23939598"/></svg>') right .8em center no-repeat white;
}

.filter-select-date {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border: 1px solid #939598;
    border-radius: 5px;
    padding-left: 12px;
    /* Typography */
    font-family: "Poppins", serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 24px;
    color: #444444;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 1;
  display: block;
  background: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.3333 2.6665V7.99984M10.6667 2.6665V7.99984M4 13.3332H28M6.66667 5.33317H25.3333C26.8061 5.33317 28 6.52708 28 7.99984V26.6665C28 28.1393 26.8061 29.3332 25.3333 29.3332H6.66667C5.19391 29.3332 4 28.1393 4 26.6665V7.99984C4 6.52708 5.19391 5.33317 6.66667 5.33317Z" stroke="%23444444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    right 0.8em center no-repeat white;
  width: 48px;
  height: 32px;
  border-width: thin;
}

.filter-select-date-label {
  font-family: "Poppins", serif;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 24px;
  color: #000000;
}

.dates-hidden {
  visibility: hidden;
  max-height: 0;
}

.dates-visible {
  visibility: visible !important;
  max-height: none !important;
}

/* Validation Styles */
.is-invalid {
  border-color: red;
  color: red;
  border-width: 1px;
  border-radius: 3px;
}

.is-invalid-warn {
  border-color: red;
  color: red;
  border-width: 1px;
  border-radius: 3px;
}

.error-icon-target-input-hover { box-shadow: 0 0 3px 3px red;}
.error-icon-target-select-hover { box-shadow: 0 0 3px 3px red;}

/* Select Styling */
select {
  appearance: none;
  padding-right: 3rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path fill="grey" d="M5 6L0 0h10z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
}

.form-control.terminal-edit-comments {
  border-radius: 5px;
  border: 1px solid var(--Ward-Grey);
  background: var(--Ward-Extra-Light-Grey);
  padding: 24px 16px;
}

.form-control { font-size: 15px !important;}

.form-control.code-block {
  border-radius: 5px;
  border: 1px solid var(--Ward-Grey);
}

.form-control.code-block:disabled {
  background: var(--Ward-Extra-Light-Grey);
}