/* Every on/off checkbox in the app is a slide switch (grey off, theme colour on). */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; display: inline-block; vertical-align: middle;
  width: 46px !important; height: 26px !important; min-width: 46px; margin: 0; padding: 0; border: 0 !important; border-radius: 999px !important;
  background: #c8c8c8 !important; cursor: pointer; transition: background .2s; box-shadow: none !important; outline-offset: 2px;
}
input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s;
}
input[type="checkbox"]:checked { background: var(--switch-on, var(--accent, #2563eb)) !important; }
input[type="checkbox"]:checked::before { transform: translateX(20px); }
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
.switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0 !important; height: 0 !important; min-width: 0; }
/* Switches and tabs never turn black: themes whose accent is black/near-black use blue here. */
body.dash.theme-simple, html.ui-simple, body.home-theme-simple { --switch-on: #2563eb; --tab-on: #2563eb; }
.switch input:checked + span { background: var(--switch-on, var(--accent, #2563eb)) !important; }