/* =======================================================
   CHECKBOXES (.form-check sem .form-switch) - Estado claro
   -------------------------------------------------------
   Complementa o switch-toggles.css: aplica a mesma logica de
   cores (VERDE = selecionado/ligado, VERMELHO = nao selecionado/
   desligado) aos checkboxes simples do backoffice (ex.: "Visible
   on Website", selecao de imagens para eliminacao em massa).

   Alem da cor, cada estado tem um icone proprio (check vs X) para
   que a leitura nao dependa so da cor - boa pratica de acessibilidade
   para utilizadores com daltonismo.

   As regras excluem ".form-switch" (tratado em switch-toggles.css)
   e aplicam-se apenas a inputs type="checkbox" (nao afeta radios).
   ======================================================= */

.backoffice-form .form-check:not(.form-switch) .form-check-input[type="checkbox"],
.backend-form-card .form-check:not(.form-switch) .form-check-input[type="checkbox"],
.image-upload-container .form-check:not(.form-switch) .form-check-input[type="checkbox"] {
    width: 1.25em !important;
    height: 1.25em !important;
    border-radius: 0.25rem !important;
    background-color: #dc3545 !important;
    border: 2px solid #b02a37 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 65% !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 6l8 8M14 6l-8 8'/%3e%3c/svg%3e") !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out !important;
}

/* Selecionado / Ligado (ON) = verde com check */
.backoffice-form .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked,
.backend-form-card .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked,
.image-upload-container .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
    background-color: #198754 !important;
    border-color: #146c43 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/* Foco (nao selecionado) */
.backoffice-form .form-check:not(.form-switch) .form-check-input[type="checkbox"]:focus,
.backend-form-card .form-check:not(.form-switch) .form-check-input[type="checkbox"]:focus,
.image-upload-container .form-check:not(.form-switch) .form-check-input[type="checkbox"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.3) !important;
    outline: 0 !important;
}

/* Foco (selecionado) */
.backoffice-form .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked:focus,
.backend-form-card .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked:focus,
.image-upload-container .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked:focus {
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.3) !important;
}

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

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