/*
            Page shell and background image.

            The body owns the full-screen branded background. The image URL goes
            through app_asset_url() so it works whether the app is served from the
            project root, public/index.php, or a nested folder.
        */
        body {
            margin: 0;
            height: 100vh;
            font-family: Arial, sans-serif;
            overflow: hidden;
            position: relative;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /*
            Background overlay.

            This pseudo-element leaves a light veil over the photo so the page
            keeps its branded image while the translucent form remains readable.
        */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to top right, #ed604e7e, #0695f77e);
            z-index: -1;
        }

        /*
            Centering container.

            Flexbox places the login card in the middle of the viewport both
            vertically and horizontally. The card itself controls width.
        */
        .container {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /*
            Login card.

            The translucent white background lets the photo show through. The
            blur and border give it a glass-panel effect. The width uses min() so
            the card can be wide on desktop while still fitting smaller screens.
        */
        .login-box {
            background: rgba(255, 255, 255, 0.42);
            backdrop-filter: blur(3px);
            border: 1px solid rgba(255, 255, 255, 0.45);
            padding: 30px;
            border-radius: 10px;
            width: min(1000px, 90vw);
            text-align: center;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
        }

        .logo {
            width: 6vw;
        }

        h2 {
            font-size: 2em;
            text-decoration: underline 1px;
            color: #10253f;
        }
        /*
            Shared text/password input styling.

            Both form fields use the same dimensions and rounded border so the
            email and password controls line up visually inside the card.
        */
        input {
            width: 90%;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        /*
            Remember-me row.

            The checkbox and label are kept in one flex row. This posts the
            remember_me field only when checked; AuthController decides whether to
            issue or clear the persistent remember cookie.
        */
        .remember-row {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 90%;
            margin: 2px auto 14px;
            color: #1f2937;
            font-size: 14px;
            text-align: right;
        }

        /* The checkbox should keep its natural size instead of inheriting text input width. */
        .remember-row input {
            width: auto;
            margin: 0;
        }

        /*
            Submit button.

            The button sends the form to the authenticate route. Hover styling
            provides a simple visual response without JavaScript.
        */
        button {
            width: 92%;
            padding: 10px;
            background: #0695f7;
            border: 1px solid #0572bb;
            color: #10253f;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }

        button:hover {
            background: #10253f;
            color: white;
        }

        /*
            Login error message.

            Failed authentication is stored briefly in the session by
            AuthController::authenticate(), then rendered here near the form so
            the user can immediately correct the email or password.
        */
        .error-message {
            background: #fee2e2;
            border: 1px solid #fca5a5;
            color: #991b1b;
            border-radius: 8px;
            margin: 0 0 14px;
            padding: 10px;
            font-size: 14px;
            font-weight: bold;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
        }