/*
 * Canonical DigiRadius checkbox presentation.
 * The labelled variant is the iCheck Bootstrap asset bundled by AdminLTE 3;
 * standalone/table checkboxes retain their DOM and use compact geometry.
 */
:root {
    --dg-checkbox-size: 14.3px;
    --dg-checkbox-label-gap: 5px;
    /* Match the separator used by Bootstrap/DigiRadius table cells. A table's
     * scoped --bs-table-border-color is inherited by its checkbox; form and
     * modal checkboxes fall back to the equivalent theme border token. */
    --dg-checkbox-border-width: var(--bs-border-width, 1px);
    --dg-checkbox-border-color: var(--bs-table-border-color, var(--theme-border, var(--bs-border-color, #dee2e6)));
    --dg-checkbox-border-outset: 1px;
    --dg-checkbox-inner-bg: #fff;
}
@media (max-width: 767.98px) {
    :root { --dg-checkbox-size: 16.5px; }
}

html body input.form-check-input[type="checkbox"] {
    width: var(--dg-checkbox-size) !important;
    min-width: var(--dg-checkbox-size);
    height: var(--dg-checkbox-size) !important;
    min-height: var(--dg-checkbox-size);
    margin-block-start: 0;
    border: var(--dg-checkbox-border-width) solid var(--dg-checkbox-border-color) !important;
    border-radius: 2px;
    vertical-align: middle;
}

html body .form-check {
    min-height: var(--dg-checkbox-size);
}

/* A switch is still a boolean checkbox. Normalize it to the approved square
 * AdminLTE shape even before the progressive iCheck enhancer runs. */
html body .form-switch {
    padding-inline-start: calc(var(--dg-checkbox-size) + var(--dg-checkbox-label-gap));
}
html body .form-switch > input.form-check-input[type="checkbox"] {
    margin-inline-start: calc((var(--dg-checkbox-size) + var(--dg-checkbox-label-gap)) * -1);
    border: var(--dg-checkbox-border-width) solid var(--dg-checkbox-border-color);
    border-radius: 2px;
    background-image: var(--bs-form-check-bg-image) !important;
    background-position: center;
    background-size: contain;
}

html body input.form-check-input[type="checkbox"]:not(:checked):not(:indeterminate) {
    border-color: var(--dg-checkbox-border-color);
    background-color: var(--dg-checkbox-inner-bg);
    box-shadow: 0 0 0 var(--dg-checkbox-border-outset) var(--dg-checkbox-border-color);
}
html body input.form-check-input[type="checkbox"]:is(:checked, :indeterminate) {
    border-color: var(--theme-primary, var(--bs-primary, #337ab7));
    background-color: var(--theme-button, var(--bs-primary, #337ab7));
}
html body input.form-check-input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--theme-focus, var(--bs-primary, #337ab7));
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Theme bridge for the official iCheck Bootstrap selectors. */
html body .dg-icheck.icheck-primary {
    position: relative;
    display: block;
    min-height: var(--dg-checkbox-size);
    gap: 0;
    padding: 0;
}
html body .dg-icheck.icheck-primary > label {
    min-height: var(--dg-checkbox-size);
    padding-inline-start: calc(var(--dg-checkbox-size) + var(--dg-checkbox-label-gap)) !important;
    line-height: 1.375rem;
}
html body .dg-icheck.icheck-primary > input[type="checkbox"]:first-child + label::before {
    width: var(--dg-checkbox-size);
    height: var(--dg-checkbox-size);
    margin-inline-start: calc((var(--dg-checkbox-size) + var(--dg-checkbox-label-gap)) * -1);
    border: var(--dg-checkbox-border-width) solid var(--dg-checkbox-border-color) !important;
    border-radius: 2px;
    background: var(--dg-checkbox-inner-bg);
}
html body .dg-icheck.icheck-primary > input[type="checkbox"]:first-child:not(:checked):not(:indeterminate) + label::before {
    box-shadow: 0 0 0 var(--dg-checkbox-border-outset) var(--dg-checkbox-border-color);
}
html body .dg-icheck.icheck-primary > input[type="checkbox"]:first-child:checked + label::after {
    top: 0;
    left: 0;
    width: 4px;
    height: 6px;
    border-width: 1px;
    transform: translate(
        calc((var(--dg-checkbox-size) - 4px) / 2),
        calc((var(--dg-checkbox-size) - 8px) / 2)
    ) rotate(45deg);
}
html body .dg-icheck.icheck-primary > input[type="checkbox"]:first-child:checked + label::before {
    border-color: var(--theme-primary, var(--bs-primary, #337ab7));
    background: var(--theme-button, var(--bs-primary, #337ab7));
}
html body .dg-icheck.icheck-primary > input[type="checkbox"]:first-child:not(:checked):not(:disabled):hover + label::before {
    border-color: var(--theme-primary, var(--bs-primary, #337ab7));
    border-width: var(--dg-checkbox-border-width) !important;
}
html body .dg-icheck.icheck-primary > input[type="checkbox"]:first-child:focus-visible + label::before {
    outline: 2px solid var(--theme-focus, var(--bs-primary, #337ab7));
    outline-offset: 2px;
}

/* DataTables and raw table checkboxes intentionally keep their original DOM.
 * Only their geometry/visual state is normalized, preserving delegated events. */
html body :is(.table, .dg-data-table, .dataTable) input.form-check-input[type="checkbox"] {
    display: inline-block;
    float: none;
    flex: 0 0 var(--dg-checkbox-size);
    margin: 0 !important;
    vertical-align: middle;
}
/* DataTables' vendor skin may paint the final cell separator with a literal
 * palette colour after the table variable is defined. Direct table controls
 * therefore inherit the rendered cell border itself. Full-cell labels carry
 * the same inheritance without changing their border width or hit area. */
html body :is(.table, .dg-data-table, .dataTable) :is(th, td) > input.form-check-input[type="checkbox"],
html body :is(.table, .dg-data-table, .dataTable) :is(th, td) > label:has(> input.form-check-input[type="checkbox"]) {
    border-color: inherit !important;
}
html body :is(.table, .dg-data-table, .dataTable) :is(th, td) > label > input.form-check-input[type="checkbox"] {
    border-color: inherit !important;
}

/* A checkbox embedded by an existing action control may consume horizontal
 * content space, but must never increase the control's line box/height. */
html body :is(button, .btn) input.form-check-input[type="checkbox"] {
    display: inline-block;
    float: none;
    flex: 0 0 var(--dg-checkbox-size);
    margin: 0 0.25rem 0 0 !important;
    vertical-align: -2px;
}

@media (forced-colors: active) {
    html body input.form-check-input[type="checkbox"],
    html body .dg-icheck.icheck-primary > input[type="checkbox"]:first-child + label::before {
        border: 1px solid CanvasText;
    }
}