/*
 * PM Shop - Checkbox Contrast Hotfix V1
 * Memastikan checkbox terlihat pada Light Mode dan tetap konsisten pada Dark Mode.
 */

:root {
    --pm-checkbox-size: 18px;
    --pm-checkbox-radius: 5px;
    --pm-checkbox-accent: #5b4df5;
    --pm-checkbox-accent-hover: #4938e6;
    --pm-checkbox-light-bg: #ffffff;
    --pm-checkbox-light-border: #64748b;
    --pm-checkbox-dark-bg: #0f172a;
    --pm-checkbox-dark-border: #94a3b8;
    --pm-checkbox-check: #ffffff;
}

/* Checkbox biasa. Switch/toggle dibiarkan memakai bentuk komponen aslinya. */
input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: var(--pm-checkbox-size) !important;
    min-width: var(--pm-checkbox-size) !important;
    height: var(--pm-checkbox-size) !important;
    min-height: var(--pm-checkbox-size) !important;
    margin: 0 8px 0 0 !important;
    display: inline-grid !important;
    place-content: center !important;
    vertical-align: middle !important;
    border: 2px solid var(--pm-checkbox-light-border) !important;
    border-radius: var(--pm-checkbox-radius) !important;
    background: var(--pm-checkbox-light-bg) !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .04) !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .08s ease !important;
}

input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"])::before {
    content: "" !important;
    width: 9px !important;
    height: 5px !important;
    border-left: 2px solid var(--pm-checkbox-check) !important;
    border-bottom: 2px solid var(--pm-checkbox-check) !important;
    transform: rotate(-45deg) scale(0) translateY(-1px) !important;
    transform-origin: center !important;
    transition: transform .12s ease !important;
}

input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]):checked {
    background: var(--pm-checkbox-accent) !important;
    border-color: var(--pm-checkbox-accent) !important;
    box-shadow: 0 0 0 3px rgba(91, 77, 245, .18) !important;
}

input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]):checked::before {
    transform: rotate(-45deg) scale(1) translateY(-1px) !important;
}

input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]):hover:not(:disabled) {
    border-color: var(--pm-checkbox-accent) !important;
}

input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]):active:not(:disabled) {
    transform: scale(.94) !important;
}

input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]):focus-visible {
    outline: 3px solid rgba(59, 130, 246, .30) !important;
    outline-offset: 2px !important;
}

input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]):disabled {
    cursor: not-allowed !important;
    opacity: .55 !important;
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
}

/* Bootstrap/Tailwind/custom classes yang sering menimpa checkbox. */
.form-check-input[type="checkbox"],
.checkbox-input,
.permission-checkbox,
input[type="checkbox"].rounded,
input[type="checkbox"].rounded-sm,
input[type="checkbox"].rounded-md {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Switch/toggle tetap terlihat tanpa mengubah bentuknya. */
input[type="checkbox"][role="switch"],
input[type="checkbox"][class*="switch"],
input[type="checkbox"][class*="toggle"] {
    accent-color: var(--pm-checkbox-accent) !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-color: #64748b !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08) !important;
}

/* Light mode eksplisit. */
html.light input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
html.light-mode input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
html.pm-light input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
html[data-theme="light"] input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body.light input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body.light-mode input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body[data-theme="light"] input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]) {
    background: #ffffff !important;
    border-color: #64748b !important;
}

html.light input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
html.light-mode input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
html.pm-light input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
html[data-theme="light"] input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body.light input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body.light-mode input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body[data-theme="light"] input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]) {
    background: var(--pm-checkbox-accent) !important;
    border-color: var(--pm-checkbox-accent) !important;
}

/* Dark mode. */
html.dark input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
html.dark-mode input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
html[data-theme="dark"] input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body.dark input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body.dark-mode input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body[data-theme="dark"] input[type="checkbox"]:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]) {
    background: var(--pm-checkbox-dark-bg) !important;
    border-color: var(--pm-checkbox-dark-border) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) !important;
}

html.dark input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
html.dark-mode input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
html[data-theme="dark"] input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body.dark input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body.dark-mode input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]),
body[data-theme="dark"] input[type="checkbox"]:checked:not([role="switch"]):not([class*="switch"]):not([class*="toggle"]) {
    background: var(--pm-checkbox-accent) !important;
    border-color: #8b7fff !important;
}

/* Checkbox yang dibungkus label harus tetap terbaca. */
label:has(> input[type="checkbox"]),
label:has(input[type="checkbox"]) {
    cursor: pointer;
}

/* Fallback untuk browser yang tidak mendukung :has tidak mengganggu aturan lain. */
.pm-checkbox-label {
    cursor: pointer;
}