/* ============================================================================
 * SACAI corporate login theme
 * ----------------------------------------------------------------------------
 * Brings the admin login screen in line with the SACAI left-menu identity
 * (see assets/css/menu-theme-sacai.css — same palette, same blue→navy gradient).
 * Loaded AFTER the vendor theme CSS from login/index.php so these rules win.
 *
 * The menu logo (sacai-logo-white.png) is a WHITE, transparent-background mark:
 * it is invisible on a white card, so it sits on the blue header band below.
 * ==========================================================================*/

:root {
    --sacai-blue:     #2E51A3;   /* royal / corporate blue   */
    --sacai-blue-mid: #21386F;
    --sacai-navy:     #17245A;   /* deep navy                */
    --sacai-green:    #1FA84C;   /* brand green (accent)     */
}

/* ---- Page background: the sidebar's blue → navy gradient ---------------- */
body {
    background: linear-gradient(160deg,
                var(--sacai-blue) 0%,
                var(--sacai-blue-mid) 55%,
                var(--sacai-navy) 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* ---- The login card: lifted off the blue. overflow:hidden lets the header
        band bleed to the card's rounded edges ------------------------------ */
.authentication-wrapper .card {
    border: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(23, 36, 90, 0.35);
}

/* ---- Blue header band carrying the white menu logo --------------------- */
.sacai-login-header {
    background: linear-gradient(135deg,
                var(--sacai-blue) 0%,
                var(--sacai-navy) 100%);
    border-bottom: 3px solid var(--sacai-green);   /* brand green accent rule */
    padding: 1.75rem 1.5rem;
    text-align: center;
}
.sacai-login-header .sacai-login-brand {
    display: inline-block;
    line-height: 0;
}
.sacai-login-header img {
    height: 78px;
    max-width: 100%;
}

/* ---- Headings ---------------------------------------------------------- */
.authentication-wrapper .card-body h5 {
    color: var(--sacai-navy);
    font-weight: 600;
}

/* ---- Inputs: SACAI blue focus ring ------------------------------------- */
.authentication-wrapper .form-control:focus {
    border-color: var(--sacai-blue) !important;
    box-shadow: 0 0 0 0.15rem rgba(46, 81, 163, 0.18) !important;
}
.authentication-wrapper .input-group-merge:focus-within .input-group-text {
    border-color: var(--sacai-blue) !important;
}
/* Show/hide password eye */
.authentication-wrapper .form-password-toggle .input-group-text {
    color: var(--sacai-blue);
}

/* ---- Sign in button: corporate blue, deepening to navy on hover -------- */
.authentication-wrapper .btn-primary {
    background: linear-gradient(135deg, var(--sacai-blue), var(--sacai-blue-mid)) !important;
    border-color: var(--sacai-blue) !important;
    color: #ffffff !important;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(46, 81, 163, 0.35);
}
.authentication-wrapper .btn-primary:hover,
.authentication-wrapper .btn-primary:focus,
.authentication-wrapper .btn-primary:active {
    background: linear-gradient(135deg, var(--sacai-blue-mid), var(--sacai-navy)) !important;
    border-color: var(--sacai-navy) !important;
    box-shadow: 0 4px 14px rgba(23, 36, 90, 0.45) !important;
}

/* ---- Links ------------------------------------------------------------- */
.authentication-wrapper a {
    color: var(--sacai-blue);
}
.authentication-wrapper a:hover,
.authentication-wrapper a:focus {
    color: var(--sacai-navy);
}