/* ------------------------------------------------------------------ *
 * Custom global checkbox styling — show a checkmark when checked
 * instead of the native solid-colour fill.
 *
 * base-styles-v0.0.17.css already styles checkboxes this way, but ONLY
 * for `.ui-form input[type="checkbox"]`. This file extends the exact
 * same treatment to every checkbox app-wide (onboarding raw forms,
 * admin custom forms, ActiveAdmin row-select / boolean inputs, etc.).
 * Loaded AFTER base-styles-v0.0.17.css in both Portal and Admin, so it
 * wins on equal-specificity ties. Uses the same --ui-checkbox-* tokens.
 *
 * Opt out on any individual checkbox with class="no-style".
 * ------------------------------------------------------------------ */
input[type="checkbox"]:not(.no-style) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  width: var(--ui-checkbox-dimension, 20px);
  height: var(--ui-checkbox-dimension, 20px);
  flex: 0 0 auto;
  vertical-align: middle;
  cursor: pointer;
  background-color: #fff;
  border-style: solid;
  border-width: var(--ui-checkbox-border-width, 1px);
  border-color: var(--ui-checkbox-border-color, #d1d5db);
  border-radius: var(--ui-checkbox-border-radius, 5px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="checkbox"]:not(.no-style):checked {
  background-color: var(--ui-checkbox-bg-color-checked, var(--ui-color-primary, #2563eb));
  border-color: var(--ui-checkbox-bg-color-checked, var(--ui-color-primary, #2563eb));
  /* Same white check mark glyph used by base-styles-v0.0.17.css */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}

input[type="checkbox"]:not(.no-style):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
 * Carve-outs: widgets that intentionally reuse a checkbox <input> but
 * render their own visual (the hidden input must stay hidden). These
 * selectors are more specific than the global rule above, so they win.
 * ------------------------------------------------------------------ */
.ui-switch input[type="checkbox"],
.ui-switch input[type="checkbox"]:checked,
label.container input[type="checkbox"],
label.container input[type="checkbox"]:checked {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  width: 0;
  height: 0;
  border: 0;
  background: none;
}

/* ------------------------------------------------------------------ *
 * IBM Plex Sans: more open counters than Inter, designed for screens.
 * Loaded last on both admin and portal so tokens/body win.
 * ------------------------------------------------------------------ */
:root {
  --ui-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-font-family-headings: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-font-size-base: 14px;
  --ui-shared-font-size-base: 13px;
  --ui-table-cell-padding-vertical: 6px;
  --ui-table-line-height: 36px;
}

html {
  font-size: 16px;
}

body {
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}