/*!***/
/* * Global styling for form toggle switches*/
/* * Matches toggleSwitchSample.png design exactly*/
/* *!*/

/*!* Base toggle switch styling - OFF state (light gray background) *!*/
.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: 34px !important;
    height: 18px !important;
    background-color: #e5e5ea !important;  /*!* Light gray for OFF state *!*/
    border: none !important;
    border-radius: 18px !important;
    position: relative !important;
    cursor: pointer !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transition: background-color 0.3s ease !important;
}

/*!* Toggle circle/thumb *!*/
.form-switch .form-check-input::before,
.form-check-input[role="switch"]::before,
input[type="checkbox"][role="switch"]::before {
    content: '' !important;
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    top: 2px !important;
    left: 2px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    transition: transform 0.3s ease !important;
}

/*!* Checked state - ON (bright cyan matching sample) *!*/
.form-switch .form-check-input:checked,
.form-check-input[role="switch"]:checked,
input[type="checkbox"][role="switch"]:checked,
.business-hours-widget .form-switch .form-check-input:checked {
    background-color: #00bcd4 !important;  /*!* Cyan matching sample *!*/
    border: none !important;
}

/*!* Move thumb to right when checked *!*/
.form-switch .form-check-input:checked::before,
.form-check-input[role="switch"]:checked::before,
input[type="checkbox"][role="switch"]:checked::before {
    transform: translateX(16px) !important;
}

/*!* Focus state *!*/
.form-switch .form-check-input:focus,
.form-check-input[role="switch"]:focus,
input[type="checkbox"][role="switch"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.25) !important;
    outline: 0 !important;
}

/*!* Hover state - slightly transparent *!*/
.form-switch .form-check-input:hover:not(:disabled),
.form-check-input[role="switch"]:hover:not(:disabled),
input[type="checkbox"][role="switch"]:hover:not(:disabled) {
    opacity: 0.9 !important;
}

/*!* Label styling - positioned after the switch *!*/
.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;
}

/*!* Ensure proper flex alignment for switch and 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: 18px;
    margin-bottom: 0.5rem;
}

/*!* Disabled state *!*/
.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;
}

/*!* Remove any background images from Bootstrap *!*/
.form-switch .form-check-input {
    background-image: none !important;
}