/* Kemet POS — global checkbox -> toggle switch restyle.
   The app uses the iCheck plugin (checkboxClass: 'icheckbox_square-blue') for every
   checkbox with class="input-icheck" — the plugin wraps the native <input> in a
   single <div class="icheckbox_square-blue [checked]"> that iCheck's own JS toggles
   the "checked" class on. This overrides ONLY that div's visuals (sprite-image based
   square, per public/css/vendor.css) into a track+thumb switch via a ::after pseudo
   element, so the plugin's wiring (programmatic .iCheck('check') calls elsewhere in
   app.js) keeps working untouched. Radio buttons (.iradio_square-blue) are a
   different class and are intentionally left alone — a toggle look doesn't fit them. */

.icheckbox_square-blue{
  background: #cbd5e1 !important;
  background-image: none !important;
  width: 38px !important;
  height: 21px !important;
  border-radius: 999px !important;
  position: relative !important;
  transition: background .18s;
  flex: 0 0 auto;
}
.icheckbox_square-blue::after{
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: inset-inline-start .18s;
}
.icheckbox_square-blue.hover{ background: #b6c2d4 !important; }
.icheckbox_square-blue.checked{ background: #004eeb !important; }
.icheckbox_square-blue.checked::after{ inset-inline-start: 19px; }
.icheckbox_square-blue.disabled{ background: #e5e7eb !important; cursor: default; }
.icheckbox_square-blue.disabled::after{ background: #f8fafc; }
.icheckbox_square-blue.checked.disabled{ background: #93b4f5 !important; }

/* dark mode */
html[data-app-theme="dark"] .icheckbox_square-blue{ background: #3a3f52 !important; }
html[data-app-theme="dark"] .icheckbox_square-blue.hover{ background: #454b61 !important; }
html[data-app-theme="dark"] .icheckbox_square-blue.checked{ background: #5c8dff !important; }
html[data-app-theme="dark"] .icheckbox_square-blue.disabled{ background: #262a38 !important; }
html[data-app-theme="dark"] .icheckbox_square-blue.disabled::after{ background: #6d7285; }

@media (prefers-reduced-motion: reduce){
  .icheckbox_square-blue, .icheckbox_square-blue::after{ transition-duration: .001ms; }
}