/* =====================================================================
 * Central checkbox/radio styling
 * ---------------------------------------------------------------------
 * This file is loaded late by the shared shells so visible checkbox and
 * radio controls keep one project-wide skin, regardless of legacy classes
 * such as form-check-input, team-checkbox, legend-checkbox, member-checkbox,
 * row-select, item-checkbox, or JS-created budget toggles.
 * ===================================================================== */

:root {
  --control-check-size: 1.05rem;
  --control-check-radius: 0.32rem;
  --control-check-border-width: 1.5px;
  --control-check-focus-ring: 0 0 0 0.2rem rgba(105, 190, 40, 0.22);
  --control-check-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  --control-check-checked-shadow: 0 6px 14px rgba(105, 190, 40, 0.22);
  --control-checkmark-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.35' d='M3.2 8.2 6.7 11.5 12.9 4.6'/%3E%3C/svg%3E");
}

body.dark-mode,
.dark-mode {
  --control-check-focus-ring: 0 0 0 0.2rem rgba(95, 180, 255, 0.28);
  --control-check-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --control-check-checked-shadow: 0 6px 14px rgba(95, 180, 255, 0.22);
}

.form-check {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: auto !important;
  padding-left: 0 !important;
  margin: 0 0 0.35rem !important;
}

.form-check .form-check-input {
  float: none !important;
  margin: 0 !important;
}

input[type="checkbox"]:not(.leaflet-control-layers-selector),
input[type="radio"]:not(.leaflet-control-layers-selector),
.form-check-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  inline-size: var(--control-check-size) !important;
  block-size: var(--control-check-size) !important;
  min-inline-size: var(--control-check-size) !important;
  min-block-size: var(--control-check-size) !important;
  flex: 0 0 var(--control-check-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: var(--control-check-border-width) solid var(--checkbox-border) !important;
  border-radius: var(--control-check-radius) !important;
  background-color: var(--checkbox-bg) !important;
  background-image: none !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 0.78rem 0.78rem !important;
  box-shadow: var(--control-check-shadow) !important;
  color: var(--checkbox-checked-color) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast) !important;
}

input[type="radio"]:not(.leaflet-control-layers-selector),
.form-check-input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"]::before,
input[type="checkbox"]::after,
input[type="radio"]::before,
input[type="radio"]::after,
.form-check-input::before,
.form-check-input::after {
  content: none !important;
}

input[type="checkbox"]:not(.leaflet-control-layers-selector):hover:not(
    :disabled
  ),
input[type="radio"]:not(.leaflet-control-layers-selector):hover:not(:disabled),
.form-check-input:hover:not(:disabled) {
  border-color: var(--checkbox-checked-border) !important;
  box-shadow: var(--control-check-focus-ring) !important;
}

input[type="checkbox"]:not(.leaflet-control-layers-selector):focus,
input[type="checkbox"]:not(.leaflet-control-layers-selector):focus-visible,
input[type="radio"]:not(.leaflet-control-layers-selector):focus,
input[type="radio"]:not(.leaflet-control-layers-selector):focus-visible,
.form-check-input:focus,
.form-check-input:focus-visible {
  border-color: var(--checkbox-checked-border) !important;
  outline: none !important;
  box-shadow: var(--control-check-focus-ring) !important;
}

input[type="checkbox"]:not(.leaflet-control-layers-selector):checked,
.form-check-input[type="checkbox"]:checked {
  border-color: var(--checkbox-checked-border) !important;
  background-color: var(--checkbox-checked-border) !important;
  background-image: var(--control-checkmark-svg) !important;
  box-shadow: var(--control-check-checked-shadow) !important;
}

input[type="radio"]:not(.leaflet-control-layers-selector):checked,
.form-check-input[type="radio"]:checked {
  border-color: var(--checkbox-checked-border) !important;
  background-color: var(--checkbox-bg) !important;
  background-image: radial-gradient(
    circle,
    var(--checkbox-checked-border) 0 42%,
    transparent 44%
  ) !important;
  box-shadow: var(--control-check-checked-shadow) !important;
}

input[type="checkbox"]:not(.leaflet-control-layers-selector):disabled,
input[type="checkbox"]:not(.leaflet-control-layers-selector)[disabled],
input[type="radio"]:not(.leaflet-control-layers-selector):disabled,
input[type="radio"]:not(.leaflet-control-layers-selector)[disabled],
.form-check-input:disabled,
.form-check-input[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

main#main-content .list-travel-day-checkbox input[type="checkbox"] {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-inline-size: 1px !important;
  min-block-size: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.form-check-label,
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  cursor: pointer;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
  cursor: not-allowed !important;
  opacity: 0.72 !important;
}

.form-switch {
  gap: 0.62rem !important;
}

.form-switch .form-check-input[type="checkbox"] {
  --control-check-switch-width: 2.35rem;
  --control-check-switch-height: 1.22rem;
  inline-size: var(--control-check-switch-width) !important;
  block-size: var(--control-check-switch-height) !important;
  min-inline-size: var(--control-check-switch-width) !important;
  min-block-size: var(--control-check-switch-height) !important;
  flex-basis: var(--control-check-switch-width) !important;
  border-radius: var(--radius-pill) !important;
  background-color: var(--surface-secondary) !important;
  background-image: radial-gradient(
    circle at 0.58rem 50%,
    var(--surface-primary) 0 0.34rem,
    transparent 0.36rem
  ) !important;
  background-size: 100% 100% !important;
}

.form-switch .form-check-input[type="checkbox"]:checked {
  background-color: var(--checkbox-checked-border) !important;
  background-image: radial-gradient(
    circle at calc(100% - 0.58rem) 50%,
    var(--checkbox-checked-color) 0 0.34rem,
    transparent 0.36rem
  ) !important;
}

.budget-show-all-networks-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.48rem !important;
  margin-top: 0.42rem !important;
}

.budget-show-all-networks-toggle .form-check-label {
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

body.dark-mode input[type="checkbox"]:not(.leaflet-control-layers-selector),
body.dark-mode input[type="radio"]:not(.leaflet-control-layers-selector),
body.dark-mode .form-check-input {
  border-color: var(--checkbox-border) !important;
  background-color: var(--checkbox-bg) !important;
  color: var(--checkbox-checked-color) !important;
}

body.dark-mode
  input[type="checkbox"]:not(.leaflet-control-layers-selector):hover:not(
    :disabled
  ),
body.dark-mode
  input[type="radio"]:not(.leaflet-control-layers-selector):hover:not(
    :disabled
  ),
body.dark-mode .form-check-input:hover:not(:disabled),
body.dark-mode
  input[type="checkbox"]:not(.leaflet-control-layers-selector):focus,
body.dark-mode
  input[type="checkbox"]:not(.leaflet-control-layers-selector):focus-visible,
body.dark-mode input[type="radio"]:not(.leaflet-control-layers-selector):focus,
body.dark-mode
  input[type="radio"]:not(.leaflet-control-layers-selector):focus-visible,
body.dark-mode .form-check-input:focus,
body.dark-mode .form-check-input:focus-visible {
  border-color: var(--checkbox-checked-border) !important;
}

body.dark-mode
  input[type="checkbox"]:not(.leaflet-control-layers-selector):checked,
body.dark-mode .form-check-input[type="checkbox"]:checked,
body.dark-mode .form-switch .form-check-input[type="checkbox"]:checked {
  border-color: var(--checkbox-checked-border) !important;
  background-color: var(--checkbox-checked-border) !important;
}

body.dark-mode
  input[type="radio"]:not(.leaflet-control-layers-selector):checked,
body.dark-mode .form-check-input[type="radio"]:checked {
  border-color: var(--checkbox-checked-border) !important;
  background-color: var(--checkbox-bg) !important;
}

body.dark-mode .budget-show-all-networks-toggle .form-check-label {
  color: var(--text-secondary) !important;
}