/* ==========================================================================
   Form-control polish for the kwik-plus web admin.
   Project-owned; loaded after the vendored theme so it wins. The SPRUHA build
   ships Bootstrap-4-era markup, so checkboxes and the file-input "Choose file"
   button render as raw native OS controls (ugly + inconsistent). This file
   gives them a branded, consistent look in BOTH themes. Dark-mode tweaks live
   in dark.css. Applies app-wide (plain element selectors).

   Brand colour is taken from `--primary-bg-color` — the SAME variable
   `.btn-primary` uses — so these controls always match the app's buttons.
   ========================================================================== */

/* ----------------------------------------------------------------- checkboxes */
/* The theme's `.form-check-input` only sets positioning, so checkboxes are left
   as native controls. Draw a custom box with an SVG tick painted via
   background-image (no ::after — works regardless of the input's `position`). */
input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 0;
  padding: 0;
  border: 1.5px solid #c5cce0;
  border-radius: 5px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74%;
  vertical-align: middle;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
input[type='checkbox']:hover {
  border-color: var(--primary-bg-color);
}
input[type='checkbox']:checked {
  background-color: var(--primary-bg-color);
  border-color: var(--primary-bg-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
input[type='checkbox']:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(3, 40, 82, 0.25);
}
input[type='checkbox']:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Checkbox + label layout: align the box to the FIRST line of the label so
   multi-line labels (e.g. "Set up", "Porters Payout" in narrow columns) don't
   leave the box floating between the wrapped lines. */
.form-check.form-check-inline {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.form-check.form-check-inline .form-check-input {
  margin: 2px 0 0 0;
}
.form-check.form-check-inline .form-check-label {
  margin-bottom: 0;
  line-height: 1.35;
}

/* ---------------------------------------------------------------- file inputs */
/* The field keeps `.form-control` (border / bg / dark-mode come from the theme +
   dark.css); only the native "Choose file" button needs branding. */
input[type='file'] {
  cursor: pointer;
}
input[type='file']::file-selector-button {
  margin: 0 12px 0 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
  background-color: var(--primary-bg-color);
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
input[type='file']::file-selector-button:hover {
  opacity: 0.9;
}
/* Legacy WebKit/Blink alias — kept as its own rule (mixing it with the standard
   pseudo-element in one selector list would invalidate the whole list). */
input[type='file']::-webkit-file-upload-button {
  margin: 0 12px 0 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
  background-color: var(--primary-bg-color);
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}