/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.public-layout,
.caregiver-layout {
  background: url("/assets/silhouette-1b7155d9.png") bottom center / 400px auto no-repeat,
    linear-gradient(135deg, #2a327f 0%, #00aeef 100%);
}

@media (min-width: 1024px) {
  .public-layout,
  .caregiver-layout {
    background-position: right -20px bottom -20px, center;
  }
}

/* Shared controls across admin, caregiver, and public forms. */
:root {
  --form-control-height: 36px;
  --form-control-radius: 4px;
  --form-control-border: #cbd5e1;
  --form-control-focus: #00aeef;
}

.form-input,
.admin-search-input,
.ts-wrapper .ts-control,
.ts-dropdown .dropdown-input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--form-control-height);
  border: 1px solid var(--form-control-border);
  border-radius: var(--form-control-radius);
  padding: 7px 12px;
  background: #fff;
  color: #1e293b;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  box-shadow: none;
}

.ts-wrapper {
  width: 100%;
  padding: 0;
  border: 0;
}

.ts-control > input {
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
}

.form-input:focus,
.admin-search-input:focus,
.ts-dropdown .dropdown-input:focus,
.ts-wrapper.focus .ts-control {
  border-color: var(--form-control-focus);
  outline: none;
  box-shadow: 0 0 0 2px rgb(0 174 239 / 20%);
}

/* Keep the dropdown indicator visible with Tom Select's base theme. */
.ts-wrapper.single .ts-control {
  padding-right: 2.5rem;
}

.ts-wrapper.single .ts-control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.375rem 0 0;
  border: solid #2a327f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
  margin-top: -0.125rem;
  transform: rotate(225deg);
}

.admin-search-input {
  padding-right: 2.5rem;
}

textarea.form-input {
  resize: vertical;
}

gmp-place-autocomplete.address-search-input {
  box-sizing: border-box;
  height: var(--form-control-height);
  min-height: 0;
  color-scheme: light;
  background-color: #fff;
  border: 0;
  border-bottom: 1px solid var(--form-control-border);
  border-radius: 0;
  color: #1e293b;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  box-shadow: none;
}

gmp-place-autocomplete.address-search-input::part(input) {
  border: 0;
  outline: none;
  box-shadow: none;
  height: 100%;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
  line-height: 20px;
}

gmp-place-autocomplete.address-search-input:focus-within {
  outline: none;
  border: 0;
  border-bottom: 1px solid var(--form-control-focus);
  box-shadow: 0 1px 0 var(--form-control-focus);
}

gmp-place-autocomplete.address-search-input::part(focus-ring) {
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}

gmp-place-autocomplete.address-search-input::part(input):focus,
gmp-place-autocomplete.address-search-input::part(input):focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
}

select.form-input:not([multiple]) {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%232a327f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
}

.form-input:disabled,
.admin-search-input:disabled,
.ts-wrapper.disabled .ts-control {
  background-color: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

.field_with_errors .form-input,
.field_with_errors .ts-control,
.form-input[aria-invalid="true"] {
  border-color: #b91c1c;
}