/* ══════════════════════════════════════════════════════════════════════════
   BAITSOL — UI Consistency Pass
   ──────────────────────────────────────────────────────────────────────────
   Fixes reported inconsistencies across the admin/dashboard chrome:
   buttons, toggle switches, checkboxes, corner rounding, and text
   alignment. Loaded last (after Bootstrap and every other app stylesheet
   — see includes/header.php) so it can safely finish what
   baitsol-admin-v2.css started without needing to touch that file's
   existing rules.

   ROOT CAUSE this addresses: baitsol-admin-v2.css already gives buttons,
   cards, and badges a consistent rounded style (10px/16px/pill), but never
   defined anything for .form-switch or .form-check-input — so every
   toggle and checkbox in the app was rendering as bare, unstyled
   Bootstrap defaults (square-ish corners, generic grey) next to
   consciously-rounded, brand-colored buttons and cards. That mismatch is
   the "switch/checkbox" half of the report; the rest below covers other
   corner-radius and alignment inconsistencies in the same chrome.

   Scoped to .ba-v2-admin (same container every /uzlb63/ dashboard page
   already renders with — see includes/header.php) so the storefront and
   POS, which each have their own separately-tuned design systems, are
   deliberately left untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared radius scale — one source of truth instead of a different
   hard-coded px value per component, which is how small drifts (10px here,
   8px there, browser-default 6px somewhere else) creep in over time. ── */
.ba-v2-admin {
  --ba-radius-sm: 8px;
  --ba-radius-md: 10px;
  --ba-radius-lg: 16px;
  --ba-radius-pill: 999px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   baitsol-admin-v2.css already sets border-radius + font-weight on .btn;
   this fills in the states and variants it didn't cover, so every button
   behaves the same regardless of which page or modal it's on. */
.ba-v2-admin .btn { border-radius: var(--ba-radius-md); }
.ba-v2-admin .btn-sm { border-radius: var(--ba-radius-sm); }
.ba-v2-admin .btn.rounded-pill,
.ba-v2-admin .btn-close { border-radius: var(--ba-radius-pill); }
.ba-v2-admin .btn:disabled,
.ba-v2-admin .btn.disabled { opacity: .55; cursor: not-allowed; }
.ba-v2-admin .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
}
/* Button groups: Bootstrap squares off the middle buttons' corners by
   design, but the FIRST/LAST buttons should still match the app's radius
   scale instead of Bootstrap's own smaller default. */
.ba-v2-admin .btn-group > .btn:first-child { border-top-left-radius: var(--ba-radius-md); border-bottom-left-radius: var(--ba-radius-md); }
.ba-v2-admin .btn-group > .btn:last-child { border-top-right-radius: var(--ba-radius-md); border-bottom-right-radius: var(--ba-radius-md); }

/* ── Toggle switches ──────────────────────────────────────────────────────
   Previously completely unstyled — bare Bootstrap default. Sized and
   colored to match the app's own primary color and rounded language
   instead of generic grey-on-grey. */
.ba-v2-admin .form-switch {
  padding-left: 2.75em;
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 1.6em;
}
.ba-v2-admin .form-switch .form-check-input {
  width: 2.5em;
  height: 1.4em;
  margin-left: -2.75em;
  border-radius: var(--ba-radius-pill);
  background-color: #e2e8f0;
  border-color: #cbd5e1;
  background-position: left center;
  transition: background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  cursor: pointer;
}
.ba-v2-admin .form-switch .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-position: right center;
}
.ba-v2-admin .form-switch .form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.ba-v2-admin .form-switch .form-check-label {
  cursor: pointer;
  line-height: 1.4em;
}

/* ── ON/OFF pill switch ───────────────────────────────────────────────────
   Opt-in variant with the ON/OFF text baked into the track itself, e.g. for
   payment-gateway / feature enable-disable toggles where the state should
   be readable at a glance without a separate text label next to it.
   Markup: <label class="ba-onoff"><input type="checkbox" name="..." value="1">
             <span class="ba-onoff-track"></span>
             <span class="ba-onoff-label ba-onoff-label-on">ON</span>
             <span class="ba-onoff-label ba-onoff-label-off">OFF</span>
             <span class="ba-onoff-knob"></span>
           </label> */
.ba-onoff {
  position: relative;
  display: inline-block;
  width: 74px;
  height: 32px;
  cursor: pointer;
  flex-shrink: 0;
}
.ba-onoff input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ba-onoff-track {
  position: absolute;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: var(--ba-radius-pill);
  transition: background-color .15s ease-in-out;
}
.ba-onoff input:checked ~ .ba-onoff-track {
  background-color: var(--primary);
}
.ba-onoff-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .03em;
  pointer-events: none;
}
.ba-onoff-label-on { left: 10px; display: none; }
.ba-onoff-label-off { right: 9px; display: block; color: #64748b; }
.ba-onoff input:checked ~ .ba-onoff-label-on { display: block; }
.ba-onoff input:checked ~ .ba-onoff-label-off { display: none; }
.ba-onoff-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left .15s ease-in-out;
}
.ba-onoff input:checked ~ .ba-onoff-knob { left: 45px; }
.ba-onoff input:focus-visible ~ .ba-onoff-track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* ── Checkboxes & radios ──────────────────────────────────────────────────
   Same "previously unstyled" gap as switches — sized up slightly from
   Bootstrap's fairly small default so they're easier to hit on touch
   devices, and colored to match the app's primary instead of Bootstrap's
   default blue (which doesn't match every tenant's brand color). */
.ba-v2-admin .form-check-input[type="checkbox"] {
  width: 1.15em;
  height: 1.15em;
  border-radius: var(--ba-radius-sm);
  border-color: #cbd5e1;
  cursor: pointer;
  vertical-align: middle;
}
.ba-v2-admin .form-check-input[type="radio"] {
  /* FEATURE (requested directly): every radio button styled as an on/off
     toggle switch, everywhere — not just the purpose-built .ba-onoff
     widget (used where there's room to add its extra <span> markup), but
     ordinary bare <input type="radio"> elements too, with zero HTML
     changes needed on any of the pages that already have them. This uses
     the exact same technique Bootstrap's own .form-switch already uses to
     turn a checkbox into a slider (a background-image knob that slides via
     background-position on :checked) — applied to radios instead, which
     Bootstrap doesn't do out of the box.
     A multi-option radio GROUP (3+ mutually exclusive choices) still works
     correctly with this: only one can ever show "on" at a time (that's
     what makes it a radio group, not independent checkboxes), it just
     means each option reads as its own small switch rather than one
     wheel-style picker — the right call for the option counts this app
     actually uses (mostly binary pairs, or a handful of independent
     per-option toggles that happen to share a name attribute). */
  appearance: none;
  -webkit-appearance: none;
  width: 2.5em;
  height: 1.4em;
  border-radius: var(--ba-radius-pill, 999px);
  border: 1px solid #cbd5e1;
  background-color: #e2e8f0;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  padding: 0 .15em;
  cursor: pointer;
  vertical-align: middle;
  transition: background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  flex-shrink: 0;
}
.ba-v2-admin .form-check-input[type="radio"]:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-position: right center;
}
.ba-v2-admin .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.ba-v2-admin .form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.ba-v2-admin .form-check {
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 1.5em;
  padding-left: 0;
}
.ba-v2-admin .form-check .form-check-input { margin-left: 0; float: none; flex-shrink: 0; }
.ba-v2-admin .form-check .form-check-label { cursor: pointer; margin-bottom: 0; }

/* ── Toggle switches & checkboxes — developer/referral portal ────────────
   riptd4/listings.php, slider_ads.php and store_directory.php render
   .form-switch / .form-check-input too, but their <body> carries
   .ba-v2-app.ba-v2-developer, not .ba-v2-admin — so none of the rules
   above ever matched them and their toggles were still bare unstyled
   Bootstrap defaults (the same gap this file's intro describes, just
   missed for this one scope). Mirrors the admin styling above but keys
   off --ba-v2-primary / --ba-v2-radius-sm (defined on .ba-v2-app in
   baitsol-v2-platform.css) since --primary and --ba-radius-* are only
   ever set inside .ba-v2-admin and aren't guaranteed available here. */
.ba-v2-app.ba-v2-developer .form-switch {
  padding-left: 2.75em;
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 1.6em;
}
.ba-v2-app.ba-v2-developer .form-switch .form-check-input {
  width: 2.5em;
  height: 1.4em;
  margin-left: -2.75em;
  border-radius: 999px;
  background-color: #e2e8f0;
  border-color: #cbd5e1;
  background-position: left center;
  transition: background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  cursor: pointer;
}
.ba-v2-app.ba-v2-developer .form-switch .form-check-input:checked {
  background-color: var(--ba-v2-primary);
  border-color: var(--ba-v2-primary);
  background-position: right center;
}
.ba-v2-app.ba-v2-developer .form-switch .form-check-input:focus {
  border-color: var(--ba-v2-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ba-v2-primary) 25%, transparent);
}
.ba-v2-app.ba-v2-developer .form-switch .form-check-label {
  cursor: pointer;
  line-height: 1.4em;
}
.ba-v2-app.ba-v2-developer .form-check-input[type="checkbox"] {
  width: 1.15em;
  height: 1.15em;
  border-radius: var(--ba-v2-radius-sm, 6px);
  border-color: #cbd5e1;
  cursor: pointer;
  vertical-align: middle;
}
/* FEATURE (requested directly): same radio-as-toggle-switch treatment as
   .ba-v2-admin above (see that rule's comment for the full explanation),
   mirrored here since developer-panel pages carry .ba-v2-developer instead
   of .ba-v2-admin on <body> and key off --ba-v2-primary/--ba-v2-radius-*
   rather than --primary/--ba-radius-* for the same reason the checkbox
   rule above does. */
.ba-v2-app.ba-v2-developer .form-check-input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2.5em;
  height: 1.4em;
  border-radius: var(--ba-v2-radius-pill, 999px);
  border: 1px solid #cbd5e1;
  background-color: #e2e8f0;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  padding: 0 .15em;
  cursor: pointer;
  vertical-align: middle;
  transition: background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  flex-shrink: 0;
}
.ba-v2-app.ba-v2-developer .form-check-input[type="radio"]:checked {
  background-color: var(--ba-v2-primary);
  border-color: var(--ba-v2-primary);
  background-position: right center;
}
.ba-v2-app.ba-v2-developer .form-check-input:checked {
  background-color: var(--ba-v2-primary);
  border-color: var(--ba-v2-primary);
}
.ba-v2-app.ba-v2-developer .form-check-input:focus {
  border-color: var(--ba-v2-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ba-v2-primary) 25%, transparent);
}
.ba-v2-app.ba-v2-developer .form-check {
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 1.5em;
  padding-left: 0;
}
.ba-v2-app.ba-v2-developer .form-check .form-check-input { margin-left: 0; float: none; flex-shrink: 0; }
.ba-v2-app.ba-v2-developer .form-check .form-check-label { cursor: pointer; margin-bottom: 0; }

/* ── Corner rounding — modals, alerts, dropdowns, toasts, tooltips ────────
   These four all still had Bootstrap's own smaller default radius
   (.375rem–.5rem), which reads as "slightly square" sitting next to the
   app's 16px cards and pill badges. Brought up to the same scale. */
.ba-v2-admin .modal-content { border-radius: var(--ba-radius-lg); overflow: hidden; }
.ba-v2-admin .modal-header,
.ba-v2-admin .modal-footer { border-color: var(--border-color, #e5e7eb); }
.ba-v2-admin .alert { border-radius: var(--ba-radius-md); }
.ba-v2-admin .dropdown-menu { border-radius: var(--ba-radius-md); overflow: hidden; padding: 6px; }
.ba-v2-admin .dropdown-item { border-radius: var(--ba-radius-sm); }
.ba-v2-admin .toast { border-radius: var(--ba-radius-md); }
.ba-v2-admin .tooltip-inner { border-radius: var(--ba-radius-sm); }
.ba-v2-admin .nav-tabs .nav-link { border-radius: var(--ba-radius-sm) var(--ba-radius-sm) 0 0; }
.ba-v2-admin .pagination .page-link { border-radius: var(--ba-radius-sm); margin: 0 2px; }
.ba-v2-admin .avatar,
.ba-v2-admin .rounded-circle { border-radius: 50% !important; }

/* ── Text alignment ───────────────────────────────────────────────────────
   A handful of recurring alignment inconsistencies across admin pages:
   table headers not matching the alignment of their own column's data,
   modal footer buttons drifting between left/center/right depending on
   which page built the modal, and form-check rows where the label text
   baseline didn't line up with its checkbox. */
.ba-v2-admin .table th { text-align: left; vertical-align: middle; }
.ba-v2-admin .table td { text-align: left; vertical-align: middle; }
.ba-v2-admin .table th.text-end,  .ba-v2-admin .table td.text-end  { text-align: right; }
.ba-v2-admin .table th.text-center, .ba-v2-admin .table td.text-center { text-align: center; }
.ba-v2-admin .modal-footer { justify-content: flex-end; text-align: right; }
.ba-v2-admin .modal-footer.justify-content-center { justify-content: center; text-align: center; }
.ba-v2-admin .card-header { display: flex; align-items: center; text-align: left; }
.ba-v2-admin .form-label { text-align: left; display: block; }
.ba-v2-admin .btn { text-align: center; }
.ba-v2-admin .stat-card, .ba-v2-admin .card-body h3, .ba-v2-admin .card-body h5 { text-align: left; }

/* ── Storefront (.ba-v2-storefront) ──────────────────────────────────────
   FEATURE (requested directly): the tenant's own customer-facing storefront
   (checkout forms, account pages, etc.) never had ANY of this checkbox/
   radio consistency styling — includes/header.php only ever loaded this
   whole stylesheet for admin pages until that was fixed alongside this.
   Self-contained (doesn't lean on .ba-v2-admin's --ba-radius-* variables,
   which don't exist in this scope) so it works regardless of load order. */
.ba-v2-storefront .form-check-input[type="checkbox"] {
  width: 1.15em;
  height: 1.15em;
  border-radius: 6px;
  border-color: #cbd5e1;
  cursor: pointer;
  vertical-align: middle;
}
.ba-v2-storefront .form-check-input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2.5em;
  height: 1.4em;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background-color: #e2e8f0;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  padding: 0 .15em;
  cursor: pointer;
  vertical-align: middle;
  transition: background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  flex-shrink: 0;
}
.ba-v2-storefront .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.ba-v2-storefront .form-check-input[type="radio"]:checked {
  background-position: right center;
}
.ba-v2-storefront .form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.ba-v2-storefront .form-check {
  display: flex;
  align-items: center;
  gap: .5em;
}

/* Dark mode: keep the same rounding, just re-tint the switch/checkbox
   "off" state so it doesn't look like a stray light-mode element. */
html[data-theme-mode="dark"] .ba-v2-admin .form-switch .form-check-input,
html[data-theme-mode="dark"] .ba-v2-admin .form-check-input[type="checkbox"],
html[data-theme-mode="dark"] .ba-v2-admin .form-check-input[type="radio"],
html[data-theme-mode="dark"] .ba-v2-storefront .form-check-input[type="checkbox"],
html[data-theme-mode="dark"] .ba-v2-storefront .form-check-input[type="radio"] {
  background-color: var(--card-bg, #1a1d24);
  border-color: var(--border-color, #2a2d35);
}
html[data-theme-mode="dark"] .ba-onoff-track {
  background-color: var(--card-bg, #1a1d24);
  border: 1px solid var(--border-color, #2a2d35);
}
html[data-theme-mode="dark"] .ba-onoff-label-off {
  color: var(--text-secondary, #94a3b8);
}