/* =====================================================================
   ALMA - sign-in screens (admin/login.php and userlogin.php)

   The sign-in pages are built on the old user template, not the admin
   shell, so they do not load alma-chrome.css. This file gives them the
   same tokens: Brahma Valley navy for the brand band and the primary
   action, a light canvas below, Inter for text. No photograph.
   ===================================================================== */

:root {
    --alma-login-brand: #1e3a5f;
    --alma-login-brand-dark: #0f3460;
    --alma-login-canvas: #eef2f7;
    --alma-login-line: #d0d5dd;
    --alma-login-ink: #1f2933;
    --alma-login-muted: #667085;
}

/*  A navy band across the top of the screen with the light canvas below:
    the card sits across the edge, so the page reads as branded rather
    than blank. Painted on html so it covers the full height however
    short the form is. */
html {
    min-height: 100%;
    background: linear-gradient(180deg, var(--alma-login-brand-dark) 0, var(--alma-login-brand) 42vh,
            var(--alma-login-canvas) 42vh, var(--alma-login-canvas) 100%) !important;
}

body {
    background: transparent !important;
    font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    color: var(--alma-login-ink);
}

/*  The sign-in card. */
.form-box .loginbg,
.form-box .bgoffsetbg {
    border-radius: 8px;
}
.form-box .loginbg {
    background: #fff;
    border: 1px solid var(--alma-login-line);
    box-shadow: 0 12px 32px rgba(15, 52, 96, .16);
    overflow: hidden;
}

.form-top h3,
.form-bottom h3,
.loginbg h3 {
    font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    color: #1a2e5a;
}

.logowidth .brand-name {
    font-family: "Poppins", "Inter", "Segoe UI", Arial, sans-serif;
    color: #1a2e5a !important;
}

/*  Inputs keep the template's underline style; only the focus colour
    follows the brand. */
.form-bottom input[type="text"]:focus,
.form-bottom input[type="password"]:focus,
.form-bottom input[type="email"]:focus {
    border-color: var(--alma-login-brand) !important;
    box-shadow: none !important;
}

/*  The primary action. The template painted it green, then saffron on
    focus, and faded it to 60% on hover. */
.form-bottom form button.btn,
button.btn {
    background: var(--alma-login-brand) !important;
    border-radius: 6px;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    opacity: 1 !important;
    transition: background-color .15s ease;
}
.form-bottom form button.btn:hover,
.form-bottom form button.btn:focus,
.form-bottom form button.btn:active,
button.btn:hover,
button.btn:focus,
button.btn:active {
    background: var(--alma-login-brand-dark) !important;
    color: #fff !important;
    opacity: 1 !important;
}
button.btn:focus-visible {
    outline: 2px solid rgba(30, 58, 95, .35);
    outline-offset: 2px;
}

.forgot,
.forgot a,
.form-bottom a {
    color: var(--alma-login-brand) !important;
}