@layer components {
    .modal:has(> .modal-dialog) {
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
        display: none;
        padding: 0;
    }

        .modal:has(> .modal-dialog).show {
            display: block;
        }

        .modal:has(> .modal-dialog) .modal-header,
        .modal:has(> .modal-dialog) .modal-body,
        .modal:has(> .modal-dialog) .modal-footer {
            all: revert-layer;
        }

    /* The "Log In" label used to be faked here with font-size: 0 + a ::after on
       .slimoutv2-login/.mobile-drawer-login. Oqtane puts the SAME CssClass on the logged-out
       anchor and on the logged-in logout button, so that rule relabelled the logout control
       "Log In" too - a signed-in user saw a "Log In" button that submitted the logout form.
       Components/CustomLogin.razor now renders the real text per state instead. */

    /* .slimoutv2-login is only a marker class (main.js's transparent-header toggle); the
       text-sm it carries in style.css never reached the eye, because the old ::after label
       forced 1rem on the visible text. Now that the label is real text, keep the button at
       its .theme-btn size so it renders exactly as before. */
    .slimoutv2-login {
        font-size: var(--text-base);
    }

    /* Outside Hybrid runtime Oqtane wraps its logout button in a <form>, so that form - not
       the button - becomes the grid item in .mobile-drawer-actions and the button would
       shrink-wrap inside it. Let the wrapper stretch and hand its width to the button, so the
       Logout pill matches the Log In pill it replaces. */
    .theme-login-form {
        display: flex;
    }

        .theme-login-form > button {
            flex: 1 1 auto;
        }
}
@layer utilities {
    .collapse {
        visibility: revert-layer;
    }
}