/* ═══════════════════════════════════════════════════════════════════════
   oms-rd-inputs.css — themed radio buttons and checkboxes, every page
   (admin, factory, customer portal, every public token page).

   The owner: "Radio buttons — are they stylised? or the default ones? They
   look kind of yuck? Fix them."

   Every native <input type=checkbox> / <input type=radio> drops the OS chrome
   (appearance:none) and is drawn in the redesign accent:
     • 16px box, 1.5px line-2 border, white fill; checkbox radius 4px, radio round;
     • hover → accent border; keyboard focus → the accent ring used by .rd .input;
     • checked → accent fill + white tick (checkbox) / accent ring + dot (radio);
     • indeterminate (select-all with a partial selection) → accent fill + dash;
     • disabled → sunk fill, muted, not-allowed cursor.
   It is still the native element: click, label-for, Space/arrow keys, form
   submission and :checked / .checked in JS are untouched. Margins are left
   alone so every label keeps its spacing.

   NOT touched — controls that already hide the native input and draw their
   own UI: .toggle-switch, .cws-switch, .vw-toggle, .vw-urgent-tg (switches),
   .tile-select (customer catalogue tile select), .rdfp-fup / .rdfp-upbtn,
   and any input marked hidden / .sr-only / inline opacity or display:none.

   Accent: the page's brand accent (--of-accent, set by oms-brand.js on the
   public pages) → the canvas --accent → the redesign indigo.
   The tick / dash are inline SVG data URIs — no external file, no third-party host.

   Specificity: `:not(#rdiA)` lifts the rule over generic `form input {width:100%}`
   style rules so a checkbox can never be stretched into a bar.
   Link LAST among a page's redesign stylesheets, ?v=N bumped on every edit.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --rdi-accent: var(--of-accent, var(--accent, #3D4EE8));
  --rdi-line: #C3C8D8;
  --rdi-ring: rgba(61, 78, 232, .18);
}
/* The navy sidebar redefines --of-accent as white; nothing there is a checkbox,
   but keep the control readable if one ever lands there. */
.sidebar { --rdi-accent: #8C97FF; }

:is(input[type="checkbox"], input[type="radio"]):not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not(.visually-hidden):not([style*="opacity"]):not(#rdiA) {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  border: 1.5px solid var(--rdi-line);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  color: var(--rdi-accent);
  vertical-align: -3px;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
input[type="checkbox"]:not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not(.visually-hidden):not([style*="opacity"]):not(#rdiA) {
  border-radius: 4px;
}
input[type="radio"]:not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not(.visually-hidden):not([style*="opacity"]):not(#rdiA) {
  border-radius: 50%;
}

/* hover */
:is(input[type="checkbox"], input[type="radio"]):not(:disabled):hover:not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not([style*="opacity"]):not(#rdiA) {
  border-color: var(--rdi-accent);
}
/* keyboard focus */
:is(input[type="checkbox"], input[type="radio"]):focus-visible:not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not([style*="opacity"]):not(#rdiA) {
  border-color: var(--rdi-accent);
  box-shadow: 0 0 0 3px var(--rdi-ring);
}

/* checkbox: checked → tick, indeterminate → dash */
input[type="checkbox"]:checked:not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not([style*="opacity"]):not(#rdiA) {
  background-color: var(--rdi-accent);
  border-color: var(--rdi-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:indeterminate:not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not([style*="opacity"]):not(#rdiA) {
  background-color: var(--rdi-accent);
  border-color: var(--rdi-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* radio: checked → accent ring + dot */
input[type="radio"]:checked:not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not([style*="opacity"]):not(#rdiA) {
  border-color: var(--rdi-accent);
  background-color: #fff;
  background-image: radial-gradient(circle, var(--rdi-accent) 0 3.6px, transparent 4.2px);
  background-size: 100% 100%;
}

/* disabled */
:is(input[type="checkbox"], input[type="radio"]):disabled:not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not([style*="opacity"]):not(#rdiA) {
  cursor: not-allowed;
  border-color: #D9DCE6;
  background-color: #F3F4F8;
}
input[type="checkbox"]:disabled:is(:checked, :indeterminate):not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not([style*="opacity"]):not(#rdiA) {
  background-color: #A9AFC6;
  border-color: #A9AFC6;
}
input[type="radio"]:disabled:checked:not(.toggle-switch *, .cws-switch *, .vw-toggle *, .vw-urgent-tg *, .tile-select *, .rdfp-fup *, .rdfp-upbtn *):not([hidden]):not(.sr-only):not([style*="opacity"]):not(#rdiA) {
  border-color: #A9AFC6;
  background-color: #F3F4F8;
  background-image: radial-gradient(circle, #A9AFC6 0 3.6px, transparent 4.2px);
}
/* a label wrapping a disabled control reads as disabled too */
label:has(> :is(input[type="checkbox"], input[type="radio"]):disabled) { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  :is(input[type="checkbox"], input[type="radio"]) { transition: none; }
}