/*
 * Shared form controls
 *
 * This is deliberately loaded after module styles.  It gives every form one
 * accessible checkbox/switch language, a Select2 surface and a small-screen
 * layout without each module having to reimplement the same controls.
 */
:root{
  --form-control-height:44px;
  --form-control-radius:12px;
  --switch-width:46px;
  --switch-height:26px;
}

/* Keep the native select usable while Select2 is loading or unavailable. */
:where(.content-card,.guest-shell) select{
  min-height:var(--form-control-height);
}

/* A consistent, keyboard-accessible switch for every checkbox in the app. */
:where(.content-card,.guest-shell) input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  flex:0 0 var(--switch-width);
  inline-size:var(--switch-width)!important;
  min-inline-size:var(--switch-width)!important;
  block-size:var(--switch-height)!important;
  min-block-size:var(--switch-height)!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #aebfba!important;
  border-radius:999px!important;
  background:#c8d4d0!important;
  box-shadow:inset 0 1px 2px rgba(20,42,53,.13);
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
  vertical-align:middle;
}

:where(.content-card,.guest-shell) input[type="checkbox"]::before{
  content:"";
  position:absolute;
  inset-block-start:3px;
  inset-inline-start:3px;
  inline-size:18px;
  block-size:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 5px rgba(20,42,53,.25);
  transform:translateX(0);
  transition:transform .18s ease;
}

:where(.content-card,.guest-shell) input[type="checkbox"]:checked{
  border-color:var(--primary,#4c246d)!important;
  background:var(--primary,#4c246d)!important;
}

:where(.content-card,.guest-shell) input[type="checkbox"]:checked::before{
  transform:translateX(20px);
}

:where(.content-card,.guest-shell) input[type="checkbox"]:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary,#4c246d) 30%,transparent);
  outline-offset:3px;
}

:where(.content-card,.guest-shell) input[type="checkbox"]:disabled{
  cursor:not-allowed;
  opacity:.55;
}

/* A label containing a switch remains a readable control row. */
@supports selector(label:has(> input[type="checkbox"])){
  :where(.content-card,.guest-shell) label:has(> input[type="checkbox"]){
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:.8rem;
    min-block-size:var(--form-control-height);
    padding:.45rem .65rem;
    border:1px solid color-mix(in srgb,var(--line,#d9e3df) 88%,transparent);
    border-radius:var(--form-control-radius);
    background:color-mix(in srgb,var(--surface,#fff) 88%,#eef5f2);
  }
  :where(.content-card,.guest-shell) label:has(> input[type="checkbox"]) > input[type="checkbox"]{
    order:2;
    margin-inline-start:auto!important;
  }
}

/* Select2 uses the native select as its source of truth; these styles only
 * replace the visible control. */
.select2-container{
  min-width:0!important;
  width:100%!important;
  max-width:100%;
  font:inherit;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  min-height:var(--form-control-height);
  border:1px solid #bfd0c8;
  border-radius:var(--form-control-radius);
  background:#fff;
  color:var(--ink,#13243d);
  transition:border-color .18s ease,box-shadow .18s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-inline:12px 38px;
  color:var(--ink,#13243d);
  line-height:42px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder{
  color:#62728a;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
  inset-inline-end:10px;
  block-size:42px;
}

.select2-container--default .select2-selection--multiple{
  padding:4px 34px 4px 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered{
  display:block;
  padding:0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
  margin:3px 4px 3px 0;
  padding:3px 7px;
  border:0;
  border-radius:999px;
  background:color-mix(in srgb,var(--primary,#4c246d) 12%,#fff);
  color:var(--ink,#13243d);
  font-size:.82em;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple{
  border-color:var(--primary,#4c246d);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#4c246d) 16%,transparent);
}

.select2-dropdown{
  z-index:10050;
  overflow:hidden;
  border:1px solid #bfd0c8;
  border-radius:var(--form-control-radius);
  box-shadow:0 16px 32px rgba(17,37,53,.16);
}

.select2-search--dropdown{
  padding:8px;
  background:#f6faf8;
}

.select2-container--default .select2-search--dropdown .select2-search__field{
  min-height:38px;
  padding:8px 10px;
  border:1px solid #bfd0c8;
  border-radius:9px;
  font:inherit;
}

.select2-results__option{
  padding:9px 12px;
  font-size:.9rem;
  overflow-wrap:anywhere;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background:var(--primary,#4c246d);
}

/* Dialogs need their menus above the dialog surface and not below its clip. */
dialog .select2-container{z-index:1}

.locale-form .select2-container{width:154px!important}
.locale-form .select2-container--default .select2-selection--single{min-height:38px}
.locale-form .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:36px}
.locale-form .select2-container--default .select2-selection--single .select2-selection__arrow{block-size:36px}

@media(max-width:700px){
  :root{--form-control-height:46px}

  :where(.content-card,dialog,.guest-shell) :is(.patuh-form,.form-grid,.standard-form,.event-form-grid,.inspection-inline-support,.admin-role-fields){
    grid-template-columns:minmax(0,1fr)!important;
    gap:.8rem;
  }

  :where(.content-card,dialog,.guest-shell) :is(.span-2,.full){grid-column:auto!important}

  :where(.content-card,dialog,.guest-shell) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    font-size:16px;
  }

  :where(.content-card,dialog,.guest-shell) :is(.form-actions,.detail-actions,.hero-actions,.actions){
    align-items:stretch;
  }

  :where(.content-card,dialog,.guest-shell) .form-actions .button{
    flex:1 1 170px;
    min-height:44px;
  }

  :where(.content-card,dialog,.guest-shell) :is(.inline-form,.upload-form){
    align-items:stretch;
  }

  :where(.content-card,dialog,.guest-shell) :is(.inline-form,.upload-form) :is(input,select,.select2-container,.button){
    width:100%;
    max-width:none;
  }

  .select2-dropdown{max-width:calc(100vw - 20px)}
  .locale-form .select2-container{width:140px!important}
}