/* ======================================================================
   Merged in from theme.css / theme-override.css.
   These loaded BEFORE this file did, so they sit at the top: everything
   below still overrides them, exactly as it did when they lived in the
   two old sheets.
   ====================================================================== */
/* ----- from theme.css ----- */


.checkbox label .toggle {
  margin-left: -20px;
  margin-right: 5px; }

.toggle {
  position: relative;
  overflow: hidden;
  padding: .6rem .5rem; }

.toggle input[type=checkbox] {
  display: none; }

.toggle.off .toggle-group {
  left: -100%; }
/* ----- from theme-override.css ----- */
/* Chromium's customizable <select>: opting in makes the popup a
   page-styled popover we control, replacing the OS listbox with its
   bright UA border and offset. Single-selects only — multiple/size
   selects keep native rendering. Non-supporting browsers ignore the
   whole block. */
/* bootstrap-toggle: the on/off button labels inherit a margin-bottom
   from Bootstrap's default `label { margin-bottom: 0.5rem }`, which
   shows as a gap inside the toggle pill. Zero it out. */
.toggle-on,
.toggle-off {
    margin-bottom: 0 !important;
    border: none;
    border-radius: 0 !important;
}
/* The pill carries .btn.btn-primary (or .btn-secondary when off), so it
   inherits the button variant's edge from components/buttons.css. A toggle
   is not a button — opt out of that edge here rather than weakening the
   shared .btn rules. */
.toggle.btn {
    border-radius: 0.25rem !important;
    border-width: 1px !important;
    border-color: transparent !important;
}
.toggle.btn:hover, .toggle-handle:hover, .toggle-on:hover, .toggle-off:hover, .toggle-group:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* bootstrap-toggle: disabled state.
   Match both the class bootstrap-toggle adds (`.disabled` / `:disabled`)
   AND the actual `input:disabled` inside via `:has()` so we don't depend
   on the plugin applying the class. Desaturate hard and block pointer
   events so it's obviously inert. */
.toggle.btn.disabled,
.toggle.btn:disabled,
.toggle.btn:has(input:disabled) {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.7);
}

/* bootstrap-toggle: wrap the compact pill in a form-control-height
   slot so it vertically aligns with sibling text inputs/selects. */
.toggle-field-slot {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 0.75rem + 3px);
}.toggle-field-slot .toggle.btn {
    /*border-radius: 0.25rem;*/
}

/* Extracted from theme.css.
   bootstrap-toggle switch styling. */

.toggle-on.btn {
  color: #ffffff !important; }
.toggle-handle {
  background: #ffffff !important; }
  .toggle-handle:hover {
    background: #ffffff !important; }
.toggle-group, .toggle-off, .toggle-on {
  position: absolute;
  top: 0;
  bottom: 0; }
.toggle-group {
  width: 200%;
  left: 0;
  transition: left .35s;
  -webkit-transition: left .35s;
  -moz-user-select: none;
  -webkit-user-select: none; }
.toggle-on {
  left: 0;
  right: 50%;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding-left: 12px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 11px !important; }
.toggle-off {
  left: 50%;
  right: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 11px !important;
  color: var(--text-primary) !important; }
.toggle-handle {
  position: relative;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  height: 100%;
  width: 0;
  border-width: 0 1px; }
.toggle.btn {
  min-width: 54px;
  height: 30px !important;
}
.toggle-on.btn {
  padding-right: 24px; }
.toggle-off.btn {
  padding-left: 27px; }
.toggle.btn-lg {
  min-width: 79px;
  min-height: 45px; }
.toggle-on.btn-lg {
  padding-right: 31px; }
.toggle-off.btn-lg {
  padding-left: 31px; }
.toggle-handle.btn-lg {
  width: 40px; }
.toggle.btn-sm {
  min-width: 50px;
  min-height: 30px; }
.toggle-on.btn-sm {
  padding-right: 20px; }
.toggle-off.btn-sm {
  padding-left: 20px; }
.toggle.btn-xs {
  min-width: 35px;
  min-height: 22px; }
.toggle-on.btn-xs {
  padding-right: 12px; }
.toggle-off.btn-xs {
  padding-left: 12px; }