/* ============================================================================
   site-toggle.css - on/off toggle switch
   Replaces Telerik RadButton with ButtonType="ToggleButton" ToggleType="CheckBox",
   which rendered the existing /img/on.png and /img/off.png as its two toggle states.

   Part of the Telerik removal project. See .kiro/specs/telerik-removal/

   MARKUP CONTRACT:
     <span class="scc-toggle"><asp:CheckBox ID="chkFoo" runat="server" /></span>

   WHY A CHECKBOX RATHER THAN A STYLED BUTTON:
     The RadButton was declared ToggleType="CheckBox" and every consumer reads
     .Checked (19 call sites on Account.aspx alone), with handlers already shaped as
     CheckedChanged(sender, e As EventArgs). asp:CheckBox matches all of that exactly,
     so the code-behind needs no change at all - only the markup does. It is also
     natively keyboard-accessible and announces its checked state to screen readers,
     which the image-swap RadButton did not.

     The wrapping <span> exists because asp:CheckBox renders differently depending on
     whether Text is set (input alone, versus input plus label inside a span). Targeting
     `.scc-toggle input[type=checkbox]` is deterministic either way.

   The two images are the site's existing 50x28 assets, so this looks identical to what
   RadButton produced.
   ============================================================================ */

.scc-toggle {
    display: inline-block;
    line-height: 0;   /* stop the inline-block picking up text leading */
}

.scc-toggle input[type=checkbox] {
    /* Strip the native checkbox chrome so the images are the entire control */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 50px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;

    background-image: url('/img/off.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px 28px;
}

.scc-toggle input[type=checkbox]:checked {
    background-image: url('/img/on.png');
}

/* RadButton gave no keyboard focus indication at all. */
.scc-toggle input[type=checkbox]:focus-visible {
    outline: 2px solid #FF6B00;
    outline-offset: 2px;
}

.scc-toggle input[type=checkbox]:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Fallback for browsers that do not support appearance:none on checkboxes.
   Better a plain working checkbox than an invisible control. */
@supports not (appearance: none) {
    .scc-toggle input[type=checkbox] {
        width: auto;
        height: auto;
        background-image: none;
    }
}