/* DockFlow Shared Switch V2 — R85
   Canonical visual owner for every on/off switch in DockFlow.
   Change the tokens below once and every connected switch follows.

   Product rule:
   - one geometry
   - one active color
   - one off state
   - one thumb
   - semantic/local modules may control placement only, never switch chrome
*/

:root,
.dfd-app,
.dfc-cal,
.dfc-cal__drawerportal,
.df-ui-root{
  --df-ui-switch-w:42px;
  --df-ui-switch-h:24px;
  --df-ui-switch-thumb:20px;
  --df-ui-switch-pad:2px;
  --df-ui-switch-travel:18px;
  --df-ui-switch-off:#dce4e0;
  --df-ui-switch-off-border:rgba(23,49,35,.04);
  --df-ui-switch-active:#1ed760;
  --df-ui-switch-active-hover:#1ed760;
  --df-ui-switch-thumb-bg:#ffffff;
  --df-ui-switch-thumb-shadow:0 1px 2px rgba(15,23,42,.14);
  --df-ui-switch-focus:rgba(30,215,96,.22);
  --df-ui-switch-transition:160ms cubic-bezier(.2,.8,.2,1);
}

/* Canonical primitive. It can be a button, span track, or label-owned track. */
html body .df-ui-switch{
  box-sizing:border-box !important;
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:0 0 var(--df-ui-switch-w) !important;
  width:var(--df-ui-switch-w) !important;
  min-width:var(--df-ui-switch-w) !important;
  max-width:var(--df-ui-switch-w) !important;
  height:var(--df-ui-switch-h) !important;
  min-height:var(--df-ui-switch-h) !important;
  max-height:var(--df-ui-switch-h) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:999px !important;
  background:var(--df-ui-switch-off) !important;
  box-shadow:inset 0 0 0 1px var(--df-ui-switch-off-border) !important;
  color:inherit !important;
  line-height:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer !important;
  vertical-align:middle !important;
  transition:background var(--df-ui-switch-transition), box-shadow var(--df-ui-switch-transition), opacity var(--df-ui-switch-transition) !important;
}

/* One thumb, always. Legacy child knobs are hidden below. */
html body .df-ui-switch::after{
  content:"" !important;
  position:absolute !important;
  top:var(--df-ui-switch-pad) !important;
  left:var(--df-ui-switch-pad) !important;
  width:var(--df-ui-switch-thumb) !important;
  height:var(--df-ui-switch-thumb) !important;
  border-radius:999px !important;
  background:var(--df-ui-switch-thumb-bg) !important;
  box-shadow:var(--df-ui-switch-thumb-shadow) !important;
  transform:translateX(0) !important;
  transition:transform var(--df-ui-switch-transition) !important;
  pointer-events:none !important;
}

html body .df-ui-switch > .df-ui-toggle__thumb,
html body .df-ui-switch > .dfd-switch__thumb,
html body .df-ui-switch > .dfd-scheduledrawer__switchknob,
html body .df-ui-switch > .dfc-cal__opsSwitchKnob,
html body .df-ui-switch > i{
  display:none !important;
}

/* Button-owned state. */
html body .df-ui-switch.is-on,
html body .df-ui-switch[aria-checked="true"]{
  background:var(--df-ui-switch-active) !important;
  box-shadow:inset 0 0 0 1px rgba(30,215,96,.05) !important;
}
html body .df-ui-switch.is-on::after,
html body .df-ui-switch[aria-checked="true"]::after{
  transform:translateX(var(--df-ui-switch-travel)) !important;
}

/* Input-owned state: Calendar/POS, staff, waiver and schedule switches. */
html body input:checked + .df-ui-switch,
html body .df-ui-toggle-row input:checked + .df-ui-switch,
html body .dfd-scheduledrawer__daytoggle input:checked + .df-ui-switch,
html body .dfd-staffmodal__switch input:checked + .df-ui-switch,
html body .dfc-cal__opsSwitch input:checked + .df-ui-switch,
html body .df-addbooking-v2__leadOption > input:checked + .df-ui-switch{
  background:var(--df-ui-switch-active) !important;
  box-shadow:inset 0 0 0 1px rgba(30,215,96,.05) !important;
}
html body input:checked + .df-ui-switch::after,
html body .df-ui-toggle-row input:checked + .df-ui-switch::after,
html body .dfd-scheduledrawer__daytoggle input:checked + .df-ui-switch::after,
html body .dfd-staffmodal__switch input:checked + .df-ui-switch::after,
html body .dfc-cal__opsSwitch input:checked + .df-ui-switch::after,
html body .df-addbooking-v2__leadOption > input:checked + .df-ui-switch::after{
  transform:translateX(var(--df-ui-switch-travel)) !important;
}

/* Parent-button state used by Experience/Fleet toggles. */
html body .df-ui-toggle[aria-pressed="true"] .df-ui-switch,
html body .dfd-switch[aria-pressed="true"] .df-ui-switch{
  background:var(--df-ui-switch-active) !important;
  box-shadow:inset 0 0 0 1px rgba(30,215,96,.05) !important;
}
html body .df-ui-toggle[aria-pressed="true"] .df-ui-switch::after,
html body .dfd-switch[aria-pressed="true"] .df-ui-switch::after{
  transform:translateX(var(--df-ui-switch-travel)) !important;
}

/* Interaction states. */
html body button.df-ui-switch:hover:not(:disabled):not([aria-disabled="true"]),
html body label:hover > input:checked + .df-ui-switch{
  filter:none !important;
}
html body button.df-ui-switch.is-on:hover:not(:disabled),
html body button.df-ui-switch[aria-checked="true"]:hover:not(:disabled),
html body label:hover > input:checked + .df-ui-switch{
  background:var(--df-ui-switch-active-hover) !important;
}
html body button.df-ui-switch:focus-visible,
html body label:focus-within > .df-ui-switch{
  outline:0 !important;
  box-shadow:0 0 0 3px var(--df-ui-switch-focus), inset 0 0 0 1px var(--df-ui-switch-off-border) !important;
}
html body button.df-ui-switch[aria-checked="true"]:focus-visible,
html body label:focus-within > input:checked + .df-ui-switch{
  box-shadow:0 0 0 3px var(--df-ui-switch-focus), inset 0 0 0 1px rgba(30,215,96,.05) !important;
}
html body .df-ui-switch:disabled,
html body .df-ui-switch[aria-disabled="true"],
html body input:disabled + .df-ui-switch{
  opacity:.48 !important;
  cursor:not-allowed !important;
}

/* --------------------------------------------------------------------------
   Legacy structural adapter.
   Experience builder still carries old layout class names, but every visible
   track also carries .df-ui-switch. This bridge prevents its historical CSS
   from changing V2 geometry or color.
   -------------------------------------------------------------------------- */
html body #dfd-experience-drawer .df-ui-toggle__track.df-ui-switch,
html body #dfd-experience-drawer .dfw-waiver-switch.df-ui-switch,
html body #dfd-experience-drawer .dfd-scheduledrawer__switch.df-ui-switch,
html body #dfd-experience-drawer .dfd-switch__track.df-ui-switch{
  width:var(--df-ui-switch-w) !important;
  min-width:var(--df-ui-switch-w) !important;
  max-width:var(--df-ui-switch-w) !important;
  height:var(--df-ui-switch-h) !important;
  min-height:var(--df-ui-switch-h) !important;
  max-height:var(--df-ui-switch-h) !important;
  background:var(--df-ui-switch-off) !important;
  border:0 !important;
  box-shadow:inset 0 0 0 1px var(--df-ui-switch-off-border) !important;
}
html body #dfd-experience-drawer .df-ui-toggle[aria-pressed="true"] .df-ui-toggle__track.df-ui-switch,
html body #dfd-experience-drawer .df-ui-toggle-row input:checked + .df-ui-toggle__track.df-ui-switch,
html body #dfd-experience-drawer .dfd-scheduledrawer__daytoggle input:checked + .df-ui-toggle__track.df-ui-switch,
html body #dfd-experience-drawer input:checked + .dfw-waiver-switch.df-ui-switch{
  background:var(--df-ui-switch-active) !important;
}

/* Add Booking keeps only a placement hook; visual ownership stays here. */
html body.dfd-app .dfc-cal__drawerportal .dfc-cal__guestdrawer[data-dfc-drawer-variant="add-booking-v2"] .df-addbooking-v2__leadOption .df-addbooking-v2__switch.df-ui-switch{
  justify-self:end !important;
}