/* =======================================================
   TOGGLE SWITCHES (.form-switch) - Estado ON/OFF claro
   -------------------------------------------------------
   O backoffice.css / backoffice-forms.css aplicam regras
   genericas a ".form-check-input" (pensadas para checkboxes)
   que tambem afetam os toggles ".form-switch", destruindo a
   forma de "pill" e o indicador deslizante, e usando cores
   pouco contrastantes (branco/cinza vs azul). Isso torna
   dificil perceber se um switch esta ligado ou desligado.

   Este ficheiro restaura a forma correta do switch e torna o
   estado inequivoco: AZUL (Bootstrap primary) = ligado (on),
   CINZENTO = desligado (off). As regras estao limitadas a
   ".form-switch"; os checkboxes normais (selecao de imagens,
   "Visible on Website" quando nao e switch, etc.) seguem uma
   logica de cores diferente (verde/vermelho com icones de
   check/X), definida em checkbox-toggles.css.
   ======================================================= */

.form-check.form-switch,
.backoffice-form .form-check.form-switch,
.backend-form-card .form-check.form-switch,
.image-upload-container .form-check.form-switch {
    padding-left: 3.25em !important;
}

.form-check.form-switch .form-check-input,
.backoffice-form .form-check.form-switch .form-check-input,
.backend-form-card .form-check.form-switch .form-check-input,
.image-upload-container .form-check.form-switch .form-check-input {
    width: 2.75em !important;
    height: 1.375em !important;
    margin-left: -3.25em !important;
    border-radius: 2em !important;
    background-color: #6c757d !important;
    border: 2px solid #5c636a !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-position 0.15s ease-in-out !important;
}

/* Ligado (ON) = azul (Bootstrap primary) */
.form-check.form-switch .form-check-input:checked,
.backoffice-form .form-check.form-switch .form-check-input:checked,
.backend-form-card .form-check.form-switch .form-check-input:checked,
.image-upload-container .form-check.form-switch .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0a58ca !important;
}

/* Foco (desligado) */
.form-check.form-switch .form-check-input:focus,
.backoffice-form .form-check.form-switch .form-check-input:focus,
.backend-form-card .form-check.form-switch .form-check-input:focus,
.image-upload-container .form-check.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.3) !important;
    outline: 0 !important;
}

/* Foco (ligado) */
.form-check.form-switch .form-check-input:checked:focus,
.backoffice-form .form-check.form-switch .form-check-input:checked:focus,
.backend-form-card .form-check.form-switch .form-check-input:checked:focus,
.image-upload-container .form-check.form-switch .form-check-input:checked:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.3) !important;
}

/* Desativado - mantem a cor de estado, so reduz opacidade */
.form-check.form-switch .form-check-input:disabled,
.backoffice-form .form-check.form-switch .form-check-input:disabled,
.backend-form-card .form-check.form-switch .form-check-input:disabled,
.image-upload-container .form-check.form-switch .form-check-input:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.form-check.form-switch .form-check-label,
.backoffice-form .form-check.form-switch .form-check-label,
.backend-form-card .form-check.form-switch .form-check-label,
.image-upload-container .form-check.form-switch .form-check-label {
    cursor: pointer;
}