/* ============================================ GLOBAL CHECKBOX → TOGGLE
   Renders every native checkbox as a modern switch (same look as the
   .toggle component in site.css). Single source, linked from every layout
   (_Layout, _VendorLayout, _SignItLayout, _UnsubLayout) so coverage is
   app-wide including the public e-sign and unsubscribe-preference pages.

   Shape properties use !important to override the scattered per-view
   checkbox sizing across the app. We deliberately do NOT set
   display / opacity / position, so any checkbox intentionally hidden for a
   custom switch stays hidden — this only restyles VISIBLE checkboxes.
   Radios (type=radio) are untouched. */
input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 40px !important;
    height: 22px !important;
    min-width: 40px !important;
    flex: 0 0 auto;
    border: none !important;
    border-radius: 11px !important;
    background: #cbd5e0 !important;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: background .2s ease;
    margin-top: 0;
    margin-bottom: 0;
}

    input[type="checkbox"]::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
        transition: transform .2s ease;
    }

    input[type="checkbox"]:checked {
        background: var(--accent, #2563eb) !important;
    }

        input[type="checkbox"]:checked::before {
            transform: translateX(18px);
        }

    input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--accent, #2563eb);
        outline-offset: 2px;
    }

    input[type="checkbox"]:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

/* Compact variant inside data-table cells (row-select columns + "select all"
   headers, e.g. Invoice/CheckRun's 34px checkbox column). Keeps the toggle
   look but smaller so dense financial/list tables stay tidy and the narrow
   column doesn't overflow. Higher specificity than the base rule. */
td input[type="checkbox"],
th input[type="checkbox"] {
    width: 34px !important;
    height: 19px !important;
    min-width: 34px !important;
}

    td input[type="checkbox"]::before,
    th input[type="checkbox"]::before {
        width: 13px;
        height: 13px;
        top: 3px;
        left: 3px;
    }

    td input[type="checkbox"]:checked::before,
    th input[type="checkbox"]:checked::before {
        transform: translateX(15px);
    }

/* Preserve the pre-existing .toggle component (site.css): re-hide its native
   input, which the global rule above would otherwise reveal. Higher
   specificity + !important so it wins regardless of source order. */
.toggle input[type="checkbox"] {
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

    .toggle input[type="checkbox"]::before {
        display: none !important;
    }