/* crm-switch.css — one switch, for every screen that has an on/off choice.
 *
 * A tick box means "include this one in a list". A switch means "this is on".
 * Every control listed below answers the second question — send in batches,
 * only send between these hours, suggest deals, show this field — and every one
 * of them was drawn as the first. The platform's own settings rows are already
 * switches, so ours read as a second product bolted onto it.
 *
 * WHY ONE FILE. The same three hex values were once copied into seventeen
 * overlay stylesheets and light mode went faded everywhere, because a look kept
 * in seventeen places is a look nobody can change. The switch lives here, once,
 * and each screen only lends it a selector.
 *
 * HOW. It is the real <input type="checkbox"> with appearance:none — not a
 * <button role="switch"> — so every .checked, .disabled, change listener and
 * querySelector already written against these inputs keeps working, and a form
 * that submits still submits the same field. Nothing in any .js was touched to
 * get this look.
 *
 * ADDING A SCREEN. Put its label class in the list below, or give the input the
 * class `crm-switch`. Do NOT add a list of things to pick from: the agents in a
 * role, the columns of a table, the teams on a pipeline. Those are ticks.
 */

:root {
  --cs-off: #dfe4da;
  --cs-edge: #8a9384;
  --cs-knob: #ffffff;
  --cs-on: #d4fb08;
  --cs-on-knob: #1d1b1c;
  --cs-ring: #55606c;
  --cs-ink: #1d1b1c;
}

:root.dark,
.dark,
[data-theme="dark"] {
  --cs-off: #3a4048;
  --cs-edge: #59616b;
  --cs-knob: #e3e7ec;
  --cs-ring: #98a1ad;
  --cs-ink: #e8eaed;
}

/* ---------- the track ---------- */

.crm-pb__fbox input[type="checkbox"],
.crm-wz-check input[type="checkbox"],
.crm-switch input[type="checkbox"],
input[type="checkbox"].crm-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cs-off);
  /* An OFF switch is a pale pill on a pale card - measured at 1.6:1 against
     white, under the 3:1 a control's own shape is meant to keep. The ring is
     what makes it a control rather than a smudge, and it doubles as a second
     signal beside colour: off is outlined, on is filled. Drawn as an inset
     shadow, not a border, so the box stays exactly 30x18. */
  box-shadow: inset 0 0 0 1px var(--cs-edge);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .16s ease, box-shadow .16s ease;
}

/* ---------- the knob ---------- */

.crm-pb__fbox input[type="checkbox"]::after,
.crm-wz-check input[type="checkbox"]::after,
.crm-switch input[type="checkbox"]::after,
input[type="checkbox"].crm-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cs-knob);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .3);
  transition: transform .16s ease, background-color .16s ease;
}

/* ---------- on ----------
 *
 * The knob turns INK when the track turns lime, which is the same pairing an
 * active chip already uses. The platform leaves its knob white, and white on
 * #d4fb08 is a white shape on a near-white ground: the switch stops saying
 * which way it is pointing, which is the one thing a switch is for.
 */

.crm-pb__fbox input[type="checkbox"]:checked,
.crm-wz-check input[type="checkbox"]:checked,
.crm-switch input[type="checkbox"]:checked,
input[type="checkbox"].crm-switch:checked {
  background: var(--cs-on);
  box-shadow: none;
}

.crm-pb__fbox input[type="checkbox"]:checked::after,
.crm-wz-check input[type="checkbox"]:checked::after,
.crm-switch input[type="checkbox"]:checked::after,
input[type="checkbox"].crm-switch:checked::after {
  /* 30 wide − 12 knob − 3 either side = 12 of travel. */
  transform: translateX(12px);
  background: var(--cs-on-knob);
  box-shadow: none;
}

/* ---------- hover, focus, off ---------- */

.crm-pb__fbox input[type="checkbox"]:not(:disabled):hover,
.crm-wz-check input[type="checkbox"]:not(:disabled):hover,
.crm-switch input[type="checkbox"]:not(:disabled):hover,
input[type="checkbox"].crm-switch:not(:disabled):hover {
  background: #bcc6b3;
}

.crm-pb__fbox input[type="checkbox"]:not(:disabled):checked:hover,
.crm-wz-check input[type="checkbox"]:not(:disabled):checked:hover,
.crm-switch input[type="checkbox"]:not(:disabled):checked:hover,
input[type="checkbox"].crm-switch:not(:disabled):checked:hover {
  background: #c3e907;
}

/* The row is usually a <label>, so the keyboard ring has to sit on the input. */
.crm-pb__fbox input[type="checkbox"]:focus-visible,
.crm-wz-check input[type="checkbox"]:focus-visible,
.crm-switch input[type="checkbox"]:focus-visible,
input[type="checkbox"].crm-switch:focus-visible {
  outline: 2px solid var(--cs-ring);
  outline-offset: 2px;
}

.crm-pb__fbox input[type="checkbox"]:disabled,
.crm-wz-check input[type="checkbox"]:disabled,
.crm-switch input[type="checkbox"]:disabled,
input[type="checkbox"].crm-switch:disabled {
  cursor: not-allowed;
  opacity: .45;
}

/* ---------- the row around it ----------
 *
 * A 30px switch needs more air beside it than a 13px tick did, and the words
 * belonging to a switch that is ON are a live setting rather than one of
 * several things on offer — so they step forward out of the muted grey.
 *
 * Typed with the element as well as the class (label.crm-…) so this wins over
 * the gap each screen's own stylesheet sets, whichever order they load in.
 */

label.crm-pb__fbox,
label.crm-wz-check,
label.crm-switch {
  display: flex;
  align-items: center;
  gap: 9px;
}

.crm-pb__fbox input[type="checkbox"]:checked + span,
.crm-wz-check input[type="checkbox"]:checked + span,
.crm-switch input[type="checkbox"]:checked + span {
  color: var(--cs-ink);
  font-weight: 600;
}