/* ==========================================================================
   Lumbi ERP - sign-in page
   --------------------------------------------------------------------------
   Previously these rules lived in an inline <style> block in index.php while
   the page also linked to this file, which did not exist and returned 404.
   The rules now live here and the 404 is gone.

   The page used to layer its gradient over assets/images/system/school-bg.jpg,
   another file that was never present. It is replaced with a self-contained
   gradient so the page renders identically with no network access and no
   missing-image request.
   ========================================================================== */

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

body {
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: #0d1b2a;
    background: #0a1428;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(25, 135, 84, .22) 0, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(13, 110, 253, .18) 0, transparent 45%),
        linear-gradient(160deg, #0a1428 0%, #10233f 55%, #0a1428 100%);
    background-attachment: fixed;
}

.login-container { width: 100%; max-width: 450px; }

.login-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    animation: fadeIn .5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Branding ----------------------------------------------------------- */
.logo-section { text-align: center; margin-bottom: 30px; }
.logo-section img { width: 90px; margin-bottom: 15px; }
.logo-section h2 { font-size: 28px; font-weight: 700; color: #0d1b2a; }
.logo-section p  { color: #6c757d; font-size: 14px; }

.system-badge {
    background: #e9f2ff;
    color: #0d6efd;
    padding: 6px 14px;
    border-radius: 30px;
    display: inline-block;
    font-size: 13px;
    margin-bottom: 15px;
    font-weight: 600;
}

/* --- Form --------------------------------------------------------------- */
.form-group { position: relative; margin-bottom: 20px; }

.form-control {
    height: 55px;
    border-radius: 12px;
    padding-left: 45px;
    padding-right: 45px;
    font-size: 15px;
}

.form-group > i.field-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

/*
   The eye toggle used to be positioned with `top:5%` plus a -50% translate,
   which put it above the field on short viewports. Centred properly here.
*/
.password-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 4px;
    line-height: 1;
    cursor: pointer;
    color: #6c757d;
    transition: .2s;
}
.password-toggle:hover,
.password-toggle:focus-visible { color: #0d6efd; }

.btn-login {
    width: 100%;
    height: 55px;
    border: none;
    border-radius: 12px;
    background: #012a4a;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    transition: .3s;
    cursor: pointer;
}
.btn-login:hover  { background: #024a76; }
.btn-login:active { background: #01203a; }
.btn-login:disabled { opacity: .65; cursor: progress; }

/* --- Supporting links --------------------------------------------------- */
.extra-links {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 14px;
}
.extra-links a { text-decoration: none; color: #0d6efd; }
.extra-links a:hover { text-decoration: underline; }

.footer-text {
    text-align: center;
    margin-top: 25px;
    font-size: 13px;
    color: #adb5bd;
}

@media (max-width: 576px) {
    .login-card { padding: 30px 20px; }
}