/**
 * Toggle color coding – on/off states visible regardless of theme pack or color pack.
 * Uses explicit hex only so theme/color overrides cannot hide toggles.
 * ON = green (#16a34a), OFF = grey (#94a3b8) or red in admin (#dc2626).
 */

/* Bootstrap form-switch: ON state (checked) – explicit green, theme-independent - APPLY EVERYWHERE */
.form-switch .form-check-input:checked,
.form-check-input.form-check-input[type="checkbox"]:checked,
#content .form-switch .form-check-input:checked,
#content .form-check-input[type="checkbox"]:checked,
.admin .form-switch .form-check-input:checked,
.admin .form-check-input[type="checkbox"]:checked {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}

/* Bootstrap form-switch: OFF state – explicit grey */
.form-switch .form-check-input:not(:checked),
.form-check-input.form-check-input[type="checkbox"]:not(:checked) {
  background-color: #94a3b8 !important;
  border-color: #94a3b8 !important;
}

/* Dark mode – OFF grey still visible */
.dark .form-switch .form-check-input:not(:checked),
[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
  background-color: #64748b !important;
  border-color: #64748b !important;
}

/* Hover: ON stays green, OFF slightly lighter */
.form-switch .form-check-input:hover:not(:checked) {
  background-color: #b8c4d4 !important;
  border-color: #b8c4d4 !important;
}

.dark .form-switch .form-check-input:hover:not(:checked),
[data-theme="dark"] .form-switch .form-check-input:hover:not(:checked) {
  background-color: #94a3b8 !important;
  border-color: #94a3b8 !important;
}

/* Backend/portal dark body – OFF grey */
body.portal-backend-dark .form-switch .form-check-input:not(:checked),
body[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) {
  background-color: #64748b !important;
  border-color: #64748b !important;
}

/* Admin & Site Settings: OFF = red (explicit hex, theme-independent) */
body.change-form .form-switch .form-check-input:not(:checked),
body.changelist .form-switch .form-check-input:not(:checked),
body.app-siteconfig .form-switch .form-check-input:not(:checked),
body.change-form .form-check-input[type="checkbox"]:not(:checked),
body.changelist .form-check-input[type="checkbox"]:not(:checked),
body.app-siteconfig .form-check-input[type="checkbox"]:not(:checked) {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

body.change-form .form-switch .form-check-input:hover:not(:checked),
body.changelist .form-switch .form-check-input:hover:not(:checked),
body.app-siteconfig .form-switch .form-check-input:hover:not(:checked) {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

[data-theme="dark"] body.change-form .form-switch .form-check-input:not(:checked),
[data-theme="dark"] body.changelist .form-switch .form-check-input:not(:checked),
[data-theme="dark"] body.app-siteconfig .form-switch .form-check-input:not(:checked),
body.portal-backend-dark.change-form .form-switch .form-check-input:not(:checked),
body.portal-backend-dark.app-siteconfig .form-switch .form-check-input:not(:checked) {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* =========================================================
   Unfold Admin switch widget (Tailwind-classed checkbox)
   - Unfold renders Boolean switches as <input type="checkbox" ... class="... w-8 h-5 rounded-full ...">
   - Our previous selectors targeted Bootstrap; these target Unfold switches explicitly.
   ========================================================= */

/* Switch track: OFF = red, ON = green (admin + site settings) */
body.change-form input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]:not(:checked),
body.changelist input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]:not(:checked),
body.app-siteconfig input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]:not(:checked) {
  background-color: #dc2626 !important;
}

body.change-form input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]:checked,
body.changelist input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]:checked,
body.app-siteconfig input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]:checked {
  background-color: #16a34a !important;
}

/* Switch knob: force high-contrast white in all themes */
body.change-form input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]::after,
body.changelist input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]::after,
body.app-siteconfig input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]::after {
  background-color: #ffffff !important;
}

/* Hover: slightly darker OFF red (keeps intent obvious) */
body.change-form input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]:hover:not(:checked),
body.changelist input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]:hover:not(:checked),
body.app-siteconfig input[type="checkbox"][class*="w-8"][class*="h-5"][class*="rounded-full"]:hover:not(:checked) {
  background-color: #b91c1c !important;
}

/* Backend (/backend) and dashboard: same red/green toggle semantics */
#content .form-switch .form-check-input:checked,
body[data-dashboard-page] .form-switch .form-check-input:checked,
body.portal-backend-dark .form-switch .form-check-input:checked,
body.portal-backend-light .form-switch .form-check-input:checked {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}
#content .form-switch .form-check-input:not(:checked),
body[data-dashboard-page] .form-switch .form-check-input:not(:checked),
body.portal-backend-dark .form-switch .form-check-input:not(:checked),
body.portal-backend-light .form-switch .form-check-input:not(:checked) {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}
/* Generic checkbox (no .form-switch) in admin/backend: ON=green, OFF=red when in content area */
#content input[type="checkbox"]:checked,
body.app-siteconfig #content input[type="checkbox"]:checked,
body[data-dashboard-page] input[type="checkbox"]:checked {
  accent-color: #16a34a;
}
#content input[type="checkbox"]:not(:checked),
body.app-siteconfig #content input[type="checkbox"]:not(:checked),
body[data-dashboard-page] input[type="checkbox"]:not(:checked) {
  accent-color: #dc2626;
}

/* Button state coding – "on/applied" vs "off/inactive" (Feature Control pattern site-wide) */
.btn-state-on,
.btn-success.btn-state-on {
  background-color: var(--brand-success, #22c55e);
  border-color: var(--brand-success, #22c55e);
  color: #fff;
}
.btn-state-off,
.btn-secondary.btn-state-off {
  background-color: var(--color-base-300, #cbd5e1);
  border-color: var(--color-base-300, #cbd5e1);
  color: var(--portal-text, #111827);
}
[data-bs-theme="dark"] .btn-state-off,
body.portal-backend-dark .btn-state-off {
  background-color: var(--color-base-600, #475569);
  border-color: var(--color-base-600, #475569);
  color: var(--backend-text, #e5e7eb);
}