/**
 * DataTables responsive details modal (vertical-dots preview).
 *
 * Theme Tabler light mode uses a solid surface backdrop
 * (`[data-bs-theme=light] div.dtr-modal div.dtr-modal-background`).
 * Match that specificity and restore a translucent dimmed overlay.
 * Also make the close control obvious in light mode (dark mode already styles it).
 */

[data-bs-theme=light] div.dtr-modal div.dtr-modal-background,
div.dtr-modal div.dtr-modal-background {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.45) !important;
}

[data-bs-theme=dark] div.dtr-modal div.dtr-modal-background {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Light-mode close control: dark mode already gets a danger chip from theme-tabler */
[data-bs-theme=light] div.dtr-modal div.dtr-modal-display .dtr-modal-close,
div.dtr-modal div.dtr-modal-display .dtr-modal-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--tblr-danger, #d63939) !important;
    color: #fff !important;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.18);
    opacity: 1;
}

[data-bs-theme=light] div.dtr-modal div.dtr-modal-display .dtr-modal-close:hover,
div.dtr-modal div.dtr-modal-display .dtr-modal-close:hover {
    filter: brightness(0.92);
}