/*
 * The login page's stylesheet, ported from login.jsp's <style> block.
 *
 * WHY THIS WAS EMPTY UNTIL NOW
 *
 * The first auth increment reproduced the login page's BEHAVIOUR and its
 * visible text — which is what the characterisation suite compares — and
 * deliberately left its appearance for later. The template said so in a
 * comment. The result was a page that used .login-container, .login-card and
 * .login-header without anything defining them: correct, tested, and looking
 * like unstyled HTML.
 *
 * Nothing caught it, and nothing could have. The suite compares the visible
 * TEXT of a page, which was right the whole time; the tests added with the
 * CSP work check that referenced stylesheets exist, and this one did exist —
 * it just had a single rule in it. "Renders the right words" and "looks like
 * the application" are different properties, and only one of them has a test.
 *
 * The rules below are lifted verbatim from login.jsp. The one addition is
 * .login-brand-mark, which was a style="" attribute on the calendar icon and
 * had to become a class for the CSP.
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7A1F2B 0%, #4A0E14 100%);
    padding: 20px;
}

.login-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

@media (max-width: 480px) {
    .login-container { padding: 12px; }
    .login-card { padding: 24px 20px; }
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h3 {
    color: #333;
    font-weight: 600;
}

.login-header p {
    color: #666;
    font-size: 14px;
}

.btn-login {
    background: linear-gradient(135deg, #7A1F2B 0%, #4A0E14 100%);
    border: none;
    width: 100%;
    padding: 12px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.alert {
    margin-bottom: 20px;
}

footer {
    margin-top: auto;
}

/* Was a style="" attribute on the brand icon. A nonce covers <style>
   elements, never attributes, so it had to become a class. */
.login-brand-mark {
    font-size: 48px;
    color: #7A1F2B;
}

/* SSO landing page copy — added with the SSO-only login change (D9). */
.login-sso-copy {
    color: #666;
    font-size: 14px;
    margin-bottom: 24px;
}