/* App overrides loaded after style.bundle.css */
/* High-contrast radios for light and dark themes */

/* Base */
.form-check-input[type="radio"] {
 border-width:2px;
 border-color: var(--bs-gray-900);
}

.form-check-input[type="radio"]:hover {
 border-color: var(--bs-gray-900);
}

.form-check-input[type="radio"]:focus {
 border-color: var(--bs-primary);
 box-shadow:0 .25rem rgba(var(--bs-primary-rgb), .25) !important;
 outline: none;
}

.form-check-input[type="radio"]:checked {
 background-color: var(--bs-primary) !important;
 border-color: var(--bs-primary) !important;
}

/* Labels (light) */
.form-check .form-check-label,
label.form-check-label,
label.form-label,
label.col-form-label { color: var(--bs-gray-900) !important; font-weight:600; }

/* Dark theme: default on dark backgrounds -> light text */
[data-bs-theme="dark"] .form-check .form-check-label,
[data-bs-theme="dark"] label.form-check-label,
[data-bs-theme="dark"] label.form-label,
[data-bs-theme="dark"] label.col-form-label,
[data-bs-theme="dark"] label { color: var(--bs-gray-900) !important; }

/* Dark theme: BUT inside light background blocks (bg-gray-100/200) use dark text for contrast */
[data-bs-theme="dark"] .bg-gray-100 .form-check .form-check-label,
[data-bs-theme="dark"] .bg-gray-200 .form-check .form-check-label,
[data-bs-theme="dark"] .bg-gray-100 label.form-check-label,
[data-bs-theme="dark"] .bg-gray-200 label.form-check-label,
[data-bs-theme="dark"] .bg-gray-100 label.form-label,
[data-bs-theme="dark"] .bg-gray-200 label.form-label,
[data-bs-theme="dark"] .bg-gray-100 label.col-form-label,
[data-bs-theme="dark"] .bg-gray-200 label.col-form-label,
[data-bs-theme="dark"] .bg-gray-100 label,
[data-bs-theme="dark"] .bg-gray-200 label { color: var(--bs-gray-900) !important; }

/* Dark theme: muted text inside light blocks should be darker too */
[data-bs-theme="dark"] .bg-gray-100 .text-muted,
[data-bs-theme="dark"] .bg-gray-200 .text-muted { color: var(--bs-gray-700) !important; }

/* Dark theme tweaks for control borders */
[data-bs-theme="dark"] .form-check-input[type="radio"] { border-color: var(--bs-gray-200); }
[data-bs-theme="dark"] .form-check-input[type="radio"]:hover { border-color: var(--bs-gray-100); }
[data-bs-theme="dark"] .form-check-input[type="radio"]:focus { box-shadow:0 .35rem rgba(var(--bs-primary-rgb), .4) !important; }
[data-bs-theme="dark"] .form-check-input[type="radio"]:checked { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
/* Ensure dark theme labels are pure white for readability */
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .col-form-label,
[data-bs-theme="dark"] .form-check-label {
 color:#ffffff !important;
}

/* But when dark theme uses light backgrounds, switch labels to dark text for contrast */
[data-bs-theme="dark"] .bg-gray-100 label,
[data-bs-theme="dark"] .bg-gray-200 label,
[data-bs-theme="dark"] .bg-light label,
[data-bs-theme="dark"] .modal-content.bg-gray-100 label,
[data-bs-theme="dark"] .modal-content.bg-gray-200 label,
[data-bs-theme="dark"] .bg-gray-100 .form-label,
[data-bs-theme="dark"] .bg-gray-200 .form-label,
[data-bs-theme="dark"] .bg-light .form-label,
[data-bs-theme="dark"] .modal-content.bg-gray-100 .form-label,
[data-bs-theme="dark"] .modal-content.bg-gray-200 .form-label,
[data-bs-theme="dark"] .bg-gray-100 .col-form-label,
[data-bs-theme="dark"] .bg-gray-200 .col-form-label,
[data-bs-theme="dark"] .bg-light .col-form-label,
[data-bs-theme="dark"] .modal-content.bg-gray-100 .col-form-label,
[data-bs-theme="dark"] .modal-content.bg-gray-200 .col-form-label,
[data-bs-theme="dark"] .bg-gray-100 .form-check-label,
[data-bs-theme="dark"] .bg-gray-200 .form-check-label,
[data-bs-theme="dark"] .bg-light .form-check-label,
[data-bs-theme="dark"] .modal-content.bg-gray-100 .form-check-label,
[data-bs-theme="dark"] .modal-content.bg-gray-200 .form-check-label {
 color: var(--bs-gray-900) !important;
}