/* ============================================================
 * NextGen MIS — Switch (.ng-switch)
 * ------------------------------------------------------------
 * Toggle switch built on a REAL checkbox (keyboard + screen-reader
 * native). The visually-hidden input stays in the a11y tree and
 * drives the sibling track/thumb via :checked / :focus-visible.
 *
 *   <label class="ng-switch">
 *     <input type="checkbox" class="ng-switch__input">
 *     <span class="ng-switch__track"><span class="ng-switch__thumb"></span></span>
 *     <span class="ng-switch__label">Label</span>
 *   </label>
 * ============================================================ */
.ng-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--font-size-md);
  color: var(--color-text-default);
}
/* Visually hide the real checkbox (stays focusable + in the a11y tree). Qualify with
   `.ng-switch` so this beats Metronic's `input[type=checkbox]` styling — that vendor rule
   (size + border + grey fill) outranks a bare single class, and left unbeaten it renders a
   real checkbox box behind the track. */
.ng-switch .ng-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  opacity: 0;
}
/* Metronic ALSO dims disabled checkboxes (`input[type=checkbox]:disabled { opacity: .55 }`),
   which un-hides our input. On the off/on toggles the opaque track hides it, but the
   disabled track is semi-transparent (.4), so the checkbox shows THROUGH it as a ghost box
   on the left. Re-hide it — `.ng-switch …:disabled` outranks the vendor rule on specificity. */
.ng-switch .ng-switch__input:disabled {
  opacity: 0;
}
.ng-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;                /* meets the 24px target minimum (WCAG 2.5.8) */
  /* !important defeats Metronic's `span{border-radius:0!important}` (components.min.css) so
     the track stays a pill even on pages that load the non-rounded vendor build. */
  border-radius: var(--radius-full) !important;
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-border-strong);
  transition: background var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}
.ng-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full) !important;   /* same vendor `span{border-radius:0}` defeat as the track */
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-base) var(--ease-emphasis);
}
.ng-switch__input:checked + .ng-switch__track {
  background: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
}
.ng-switch__input:checked + .ng-switch__track .ng-switch__thumb {
  transform: translateX(20px);
}
.ng-switch__input:focus-visible + .ng-switch__track {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
/* Disabled = the OFF state, faded. Fade the WHOLE control as ONE group via `:has()`
   (track + thumb + label together) — identical geometry to off (round white thumb on a
   sunken track), just at 40% opacity. */
.ng-switch:has(.ng-switch__input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Borderless + flat when disabled — a low-emphasis off-toggle. Drop the track border and
   the thumb shadow so the faded control reads as a clean, quiet pill. */
.ng-switch__input:disabled + .ng-switch__track {
  border-color: transparent;
}
.ng-switch__input:disabled + .ng-switch__track .ng-switch__thumb {
  box-shadow: none;
}
/* Dim the label too so the whole control reads as disabled (e.g. the dark-mode
   switch while "Use system settings" is on). General sibling reaches past the
   track to the label. */
.ng-switch__input:disabled ~ .ng-switch__label {
  opacity: 0.5;
}