/* ============================================================
   THE ONE SWITCH SIZE — desktop and tablet (768px and up)
   ============================================================

   Every Bootstrap switch in the solution renders at the same size and in the
   same colours from tablet width upwards: 3.5rem x 1.75rem (56 x 28), grey with
   a grey knob when off, green with a white knob when on, and a clear gap before
   its label. This is the enlarged switch the tournament pages already used
   (.tournament-page .switch-lg) promoted to a house standard.

   Loaded by every page layout, LAST, so it wins over per-page rules; the
   !important flags are what beat the inline width/height styles a number of
   views still carry (bot game toggles, lobby message bar, championship panels).

   Phones are deliberately untouched — below 768px their compact switches stay,
   where screen width is scarce. */

@media (min-width: 768px) {

    /* --- The box itself: size and colours, wherever the switch sits --- */
    .form-switch .form-check-input,
    input.form-check-input[role="switch"] {
        width: 3.5rem !important;
        height: 1.75rem !important;
        margin-top: 0 !important;
        border: 2px solid #6c757d !important;
        background-color: #e9ecef !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236c757d'/%3e%3c/svg%3e") !important;
        cursor: pointer;
        flex-shrink: 0;
    }

    .form-switch .form-check-input:checked,
    input.form-check-input[role="switch"]:checked {
        background-color: #198754 !important;
        border-color: #198754 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    }

    .form-switch .form-check-input:disabled,
    input.form-check-input[role="switch"]:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* --- The wording never touches the switch: about two spaces, and on the
           correct side in right-to-left languages --- */
    .form-switch .form-check-input + .form-check-label,
    .form-switch .form-check-input + label {
        margin-inline-start: 0.5rem !important;
    }

    /* --- Room for the wider box in Bootstrap's own switch row layout, where the
           input floats into the row's start padding. Rows that place their switch
           with flex (classroom gear menus, the lobby message bar, toolbars) are
           left alone: they position it themselves. --- */
    .form-check.form-switch:not(.d-flex):not(.d-inline-flex) {
        padding-left: 3.75em;
        min-height: 1.75rem;
    }

    .form-check.form-switch:not(.d-flex):not(.d-inline-flex) > .form-check-input {
        margin-left: -3.75em !important;
    }
}