/*
 * Global toggle styling: every switch checkbox (the form theme renders ALL
 * checkboxes as .form-check.form-switch with role="switch") is drawn as the
 * flat segmented On/Off pill — the same look as the .bit-seg control
 * (_segmented-toggle.css) used by the segmented-checkbox Stimulus controller.
 *
 * CSS-only: the checkbox itself is the pill (appearance:none), its ::before
 * is the "On" chip and ::after the "Off" chip, so no markup or JS changes are
 * needed anywhere. Clicking anywhere on the pill toggles the checkbox.
 *
 * No glow: flat green when ON, flat dark red when OFF, tiny lift shadow only.
 *
 * Custom segment labels per field:
 *   <input ... data-on-label="Show" data-off-label="Hide">
 */

.form-switch .form-check-input,
.form-check-input[role="switch"],
input[type="checkbox"][role="switch"],
.business-hours-widget .form-switch .form-check-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 88px !important;
    height: 30px !important;
    flex: 0 0 auto;
    background-color: #eef1f6 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 9px !important;
    position: relative !important;
    cursor: pointer !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transition: none !important;
}

/* ===== the two segment chips ===== */

.form-switch .form-check-input::before,
.form-check-input[role="switch"]::before,
input[type="checkbox"][role="switch"]::before,
.form-switch .form-check-input::after,
.form-check-input[role="switch"]::after,
input[type="checkbox"][role="switch"]::after {
    position: absolute !important;
    top: 3px !important;
    bottom: 3px !important;
    width: calc(50% - 5px) !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #6c7686 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}

/* "On" chip (left) */
.form-switch .form-check-input::before,
.form-check-input[role="switch"]::before,
input[type="checkbox"][role="switch"]::before {
    content: 'On' !important;
    left: 3px !important;
}

/* "Off" chip (right) */
.form-switch .form-check-input::after,
.form-check-input[role="switch"]::after,
input[type="checkbox"][role="switch"]::after {
    content: 'Off' !important;
    right: 3px !important;
}

/* per-field label overrides */
.form-check-input[data-on-label]::before { content: attr(data-on-label) !important; }
.form-check-input[data-off-label]::after { content: attr(data-off-label) !important; }

/* ===== active segment: flat colors, no glow ===== */

/* checked → "On" chip flat green */
.form-switch .form-check-input:checked::before,
.form-check-input[role="switch"]:checked::before,
input[type="checkbox"][role="switch"]:checked::before {
    background: #2e7d3d !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* unchecked → "Off" chip flat dark red */
.form-switch .form-check-input:not(:checked)::after,
.form-check-input[role="switch"]:not(:checked)::after,
input[type="checkbox"][role="switch"]:not(:checked)::after {
    background: #b91c1c !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* hover: hint the inactive side */
.form-switch .form-check-input:hover:not(:disabled):checked::after,
.form-check-input[role="switch"]:hover:not(:disabled):checked::after,
.form-switch .form-check-input:hover:not(:disabled):not(:checked)::before,
.form-check-input[role="switch"]:hover:not(:disabled):not(:checked)::before {
    color: #1f2630 !important;
}

/* ===== focus: visible ring for keyboard users only, no glow on click ===== */
.form-switch .form-check-input:focus,
.form-check-input[role="switch"]:focus,
input[type="checkbox"][role="switch"]:focus {
    box-shadow: none !important;
    outline: 0 !important;
    border: none !important;
}

.form-switch .form-check-input:focus-visible,
.form-check-input[role="switch"]:focus-visible,
input[type="checkbox"][role="switch"]:focus-visible {
    outline: 2px solid #2674a6 !important;
    outline-offset: 2px !important;
}

/* ===== label beside the pill ===== */
.form-switch .form-check-label,
.form-check-input[role="switch"] ~ label,
input[type="checkbox"][role="switch"] ~ label {
    font-size: 0.75rem !important;
    color: #495057 !important;
    cursor: pointer;
    margin-left: 0.5rem !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    font-weight: normal !important; /* keep font weight normal, don't bold on check */
}

/* prevent global styles from bolding checked toggle labels */
.form-switch .form-check-input:checked ~ .form-check-label,
.form-check-input[role="switch"]:checked ~ label,
input[type="checkbox"][role="switch"]:checked ~ label {
    font-weight: normal !important;
    color: #495057 !important;
}

/* flex alignment for pill + label */
.form-switch,
.form-check:has(input[role="switch"]) {
    display: flex;
    align-items: center;
    padding-left: 0 !important;
    padding-right: 0.75rem !important;
    min-height: 30px;
    margin-bottom: 0.5rem;
}

/* ===== disabled ===== */
.form-switch .form-check-input:disabled,
.form-check-input[role="switch"]:disabled,
input[type="checkbox"][role="switch"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #e9ecef !important;
}

.form-switch .form-check-input:disabled ~ label,
.form-check-input[role="switch"]:disabled ~ label {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}