/*
 * Brand-color pass, per brand/BRAND.md (pulled from clearlyeducation.com,
 * 2026-09). The purple gradient chrome that used to require overriding
 * here has since been fixed directly in web/css/style.css and
 * web/css/new-style.css (backups: *.bak-20260918-purple) - header,
 * sidebar, buttons, and the login form all use the real brand colors at
 * the source now, so this file only holds what's genuinely still
 * separate: two deliberate color choices that differ from a plain
 * find-replace, plus the login-page decoration (not in the source at
 * all). To revert only this file: delete it and its entry in
 * assets/AppAsset.php.
 */
:root {
    --brand-secondary: #235af3; /* blue */
    /* Not from BRAND.md - reused from Bootstrap's existing .btn-success
       green already used elsewhere in the app. Action buttons/hovers use
       this instead of brand pink-red, which reads as "stop/delete"
       (2026-09-18). */
    --action-green: #5cb85c;
    --action-green-border: #4cae4c;
}

body, .as-header, .as-sidebar-menu, input, textarea, select, .btn {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

/* Login input focus - source now maps this to brand navy (same as the
   heading/labels), but blue reads better as a focus indicator. */
.as-form .form-input input:focus {
    border-bottom-color: var(--brand-secondary);
}

/* Login submit button hover - source's blanket purple-to-navy fix landed
   here too (it was the same rgba() as the page's navy tint), but this is
   a hover state on a green button, so it should stay in the green family. */
.as-form .form-button button:hover,
.as-form .form-button button:focus {
    background-color: var(--action-green-border);
    box-shadow: 0px 0px 10px rgba(92, 184, 92, 0.5);
}

/* ---------------------------------------------------------------------
 * Login page decoration - replicates the staggered circular-photo curve
 * from the real clearlyeducation.com hero banner. Images are cropped
 * from that real site (web/images/login-decor-1..4.png, ring borders
 * already baked in). Attached via ::before on 4 elements that already
 * exist on the login page, so no HTML was touched - each is
 * position:fixed with z-index:-1, so they always sit behind the actual
 * login card regardless of which element hosts them, purely decorative.
 * --------------------------------------------------------------------- */
.login-page-wrap::before,
.login-header-text::before,
.account-form-box::before,
.login-form-wrap::before {
    content: '';
    position: fixed;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
.login-page-wrap::before {
    top: 8%;
    right: 10%;
    background-image: url(../images/login-decor-1.png);
}
.login-header-text::before {
    top: 30%;
    right: 4%;
    background-image: url(../images/login-decor-2.png);
}
.account-form-box::before {
    top: 52%;
    right: 10%;
    background-image: url(../images/login-decor-3.png);
}
.login-form-wrap::before {
    top: 74%;
    right: 4%;
    background-image: url(../images/login-decor-4.png);
}
@media (max-width: 991px) {
    /* Hide on narrower viewports - the login card is centered and would
       overlap these, same "don't let decoration break the real content"
       principle as the mobile work earlier. */
    .login-page-wrap::before,
    .login-header-text::before,
    .account-form-box::before,
    .login-form-wrap::before {
        display: none;
    }
}