/**
 * INFOBMS ON/OFF toggle switch
 * Colors come from Color Schemes via --toggle-on-bg / --toggle-off-bg
 * (fallback: --btn-success-bg / --btn-danger-bg).
 */
.infobms-toggle,
.hc-on-off-switch {
    --toggle-on-bg: var(--btn-success-bg, var(--accent-success, #16a34a));
    --toggle-off-bg: var(--btn-danger-bg, var(--accent-danger, #dc2626));
    --toggle-knob-bg: var(--surface-elevated, #f8fafc);
    --toggle-on-label: var(--toggle-on-label-color, #14532d);
    --toggle-off-label: var(--toggle-off-label-color, #7f1d1d);
    margin-bottom: 0.75rem;
}

.infobms-toggle__row,
.hc-on-off-switch__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.infobms-toggle__text,
.hc-on-off-switch__text {
    flex: 1 1 12rem;
    min-width: 0;
}

.infobms-toggle__label,
.hc-on-off-switch__label {
    display: block;
    margin: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--pos-text-primary, var(--text-primary, #111827));
    cursor: pointer;
}

.infobms-toggle__help,
.hc-on-off-switch__help {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.infobms-toggle__control,
.hc-on-off-switch__control {
    position: relative !important;
    flex-shrink: 0;
    width: 4.35rem !important;
    min-width: 4.35rem;
    height: 1.9rem !important;
    min-height: 1.9rem;
}

.infobms-toggle__input,
.hc-on-off-switch__input {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
    z-index: 2;
}

.infobms-toggle__track,
.hc-on-off-switch__track {
    position: absolute !important;
    inset: 0;
    display: block !important;
    margin: 0 !important;
    border-radius: 9999px;
    background: var(--toggle-off-bg, #dc2626) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary, #000) 8%, transparent);
    cursor: pointer;
    transition: background-color 0.25s ease, box-shadow 0.2s ease;
    overflow: hidden;
    user-select: none;
}

.infobms-toggle__track:hover,
.hc-on-off-switch__track:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary, #000) 14%, transparent);
}

.infobms-toggle__state,
.hc-on-off-switch__state {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.infobms-toggle__state--on,
.hc-on-off-switch__state--on {
    left: 0.5rem;
    color: var(--toggle-on-label, #14532d);
    opacity: 0;
}

.infobms-toggle__state--off,
.hc-on-off-switch__state--off {
    right: 0.42rem;
    color: var(--toggle-off-label, #7f1d1d);
    opacity: 1;
}

.infobms-toggle__knob,
.hc-on-off-switch__knob {
    position: absolute;
    top: 50%;
    left: 0.2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--toggle-knob-bg, #f8fafc);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
    transform: translateY(-50%);
    transition: left 0.25s ease;
    pointer-events: none;
}

.infobms-toggle__input:checked + .infobms-toggle__track,
.hc-on-off-switch__input:checked + .hc-on-off-switch__track,
.infobms-toggle__input:checked + .hc-on-off-switch__track,
.hc-on-off-switch__input:checked + .infobms-toggle__track {
    background: var(--toggle-on-bg, #16a34a) !important;
}

.infobms-toggle__input:checked + .infobms-toggle__track .infobms-toggle__state--on,
.hc-on-off-switch__input:checked + .hc-on-off-switch__track .hc-on-off-switch__state--on,
.infobms-toggle__input:checked + .infobms-toggle__track .hc-on-off-switch__state--on,
.hc-on-off-switch__input:checked + .hc-on-off-switch__track .infobms-toggle__state--on {
    opacity: 1;
}

.infobms-toggle__input:checked + .infobms-toggle__track .infobms-toggle__state--off,
.hc-on-off-switch__input:checked + .hc-on-off-switch__track .hc-on-off-switch__state--off,
.infobms-toggle__input:checked + .infobms-toggle__track .hc-on-off-switch__state--off,
.hc-on-off-switch__input:checked + .hc-on-off-switch__track .infobms-toggle__state--off {
    opacity: 0;
}

.infobms-toggle__input:checked + .infobms-toggle__track .infobms-toggle__knob,
.hc-on-off-switch__input:checked + .hc-on-off-switch__track .hc-on-off-switch__knob,
.infobms-toggle__input:checked + .infobms-toggle__track .hc-on-off-switch__knob,
.hc-on-off-switch__input:checked + .hc-on-off-switch__track .infobms-toggle__knob {
    left: calc(100% - 1.7rem);
}

.infobms-toggle__input:focus-visible + .infobms-toggle__track,
.hc-on-off-switch__input:focus-visible + .hc-on-off-switch__track,
.infobms-toggle__input:focus-visible + .hc-on-off-switch__track,
.hc-on-off-switch__input:focus-visible + .infobms-toggle__track {
    outline: 2px solid var(--btn-primary-bg, var(--accent-primary, #3b82f6));
    outline-offset: 2px;
}

.infobms-toggle__input:active + .infobms-toggle__track .infobms-toggle__knob,
.hc-on-off-switch__input:active + .hc-on-off-switch__track .hc-on-off-switch__knob {
    transform: translateY(-50%) scale(0.94);
}

.infobms-toggle.is-disabled,
.hc-on-off-switch.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.infobms-toggle.has-error .infobms-toggle__track,
.hc-on-off-switch.has-error .hc-on-off-switch__track {
    box-shadow: inset 0 0 0 1px var(--btn-danger-bg, #dc2626);
}

.infobms-toggle--compact {
    margin-bottom: 0.4rem;
}

.infobms-toggle--compact .infobms-toggle__control {
    width: 3.75rem !important;
    min-width: 3.75rem;
    height: 1.65rem !important;
    min-height: 1.65rem;
}

.infobms-toggle--compact .infobms-toggle__knob {
    width: 1.25rem;
    height: 1.25rem;
}

.infobms-toggle--compact .infobms-toggle__input:checked + .infobms-toggle__track .infobms-toggle__knob {
    left: calc(100% - 1.45rem);
}

.infobms-toggle--compact .infobms-toggle__label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Dark mode */
body.dark-mode .infobms-toggle__label,
body.dark-mode .hc-on-off-switch__label {
    color: var(--text-primary, #e2e8f0);
}

body.dark-mode .infobms-toggle__knob,
body.dark-mode .hc-on-off-switch__knob {
    background: var(--toggle-knob-bg, #f1f5f9);
}

body.dark-mode .infobms-toggle__state--on,
body.dark-mode .hc-on-off-switch__state--on {
    color: var(--toggle-on-label, #bbf7d0);
}

body.dark-mode .infobms-toggle__state--off,
body.dark-mode .hc-on-off-switch__state--off {
    color: var(--toggle-off-label, #fecaca);
}

body.dark-mode .infobms-toggle__track,
body.dark-mode .hc-on-off-switch__track {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
}

/* Prevent iCheck from styling toggle inputs if class leaked */
.infobms-toggle .icheckbox_square-blue,
.hc-on-off-switch .icheckbox_square-blue {
    display: none !important;
}

@media (max-width: 575.98px) {
    .infobms-toggle__row,
    .hc-on-off-switch__row {
        gap: 0.75rem;
    }

    .infobms-toggle__control,
    .hc-on-off-switch__control {
        min-width: 4.35rem;
        min-height: 1.9rem;
    }
}