/* ==========================================================
   STONEHENGEITS MIS
   PROFESSIONAL FULL-SCREEN LOGIN DESIGN
   PHP 7.3+ Compatible
========================================================== */


/* ----------------------------------------------------------
   GLOBAL RESET
---------------------------------------------------------- */

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
    overflow-x: hidden;
}

.login-body {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background: #102a56;

    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.login-body *,
.login-body *::before,
.login-body *::after {
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   FULL SCREEN BACKGROUND
---------------------------------------------------------- */

.login-screen {
    position: relative;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 10% 10%,
            rgba(59, 130, 246, 0.28),
            transparent 36%
        ),
        radial-gradient(
            ellipse at 90% 90%,
            rgba(20, 184, 166, 0.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #071a35 0%,
            #102a56 48%,
            #174b79 100%
        );
}


/* Background decorative circles */

.background-decoration {
    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;

    pointer-events: none;
}

.decoration-one {
    width: 700px;
    height: 700px;

    top: -400px;
    right: -200px;
}

.decoration-two {
    width: 550px;
    height: 550px;

    bottom: -330px;
    left: -150px;
}

.decoration-three {
    width: 250px;
    height: 250px;

    top: 35%;
    left: 8%;

    border-color: rgba(255, 255, 255, 0.035);
}


/* ----------------------------------------------------------
   MAIN LAYOUT
---------------------------------------------------------- */

.login-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    width: 100%;
    max-width: 1120px;

    min-height: 650px;

    background: #ffffff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.32),
        0 10px 30px rgba(0, 0, 0, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.25);
}


/* ----------------------------------------------------------
   LEFT BRAND PANEL
---------------------------------------------------------- */

.login-brand-panel {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-width: 0;

    padding: 55px 52px 35px;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(56, 189, 248, 0.22),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 95%,
            rgba(20, 184, 166, 0.15),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #102b59 0%,
            #123e70 55%,
            #15517b 100%
        );
}


/* Decorative brand circles */

.login-brand-panel::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -220px;
    bottom: -170px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 50%;
}

.login-brand-panel::after {
    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    right: -135px;
    bottom: -90px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;
}

.brand-panel-content {
    position: relative;
    z-index: 2;
}


/* ----------------------------------------------------------
   LOGO AND BRANDING
---------------------------------------------------------- */

.brand-logo-container {
    width: 82px;
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 9px;

    background: #ffffff;

    border-radius: 19px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.19),
        0 0 0 5px rgba(255, 255, 255, 0.07);
}

.brand-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.brand-logo-fallback {
    display: none;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #2563eb,
        #0f766e
    );

    border-radius: 12px;

    font-size: 27px;
    font-weight: 800;
    letter-spacing: -2px;
}

.brand-information {
    margin-top: 24px;
}

.brand-information h1 {
    margin: 0;

    color: #ffffff;

    font-size: 34px;
    font-weight: 800;

    letter-spacing: -0.8px;
    line-height: 1.2;
}

.brand-subtitle {
    margin: 10px 0 0;

    color: #bfdbfe;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.2px;
}

.brand-line {
    width: 55px;
    height: 4px;

    margin: 25px 0 35px;

    background: #38bdf8;

    border-radius: 10px;
}


/* ----------------------------------------------------------
   BRAND MESSAGE
---------------------------------------------------------- */

.brand-message {
    max-width: 440px;
}

.brand-eyebrow {
    display: inline-block;

    margin-bottom: 17px;

    color: #7dd3fc;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}

.brand-message h2 {
    margin: 0;

    color: #ffffff;

    font-size: 35px;
    font-weight: 800;

    letter-spacing: -1px;
    line-height: 1.28;
}

.brand-message h2 span {
    display: block;

    color: #7dd3fc;
}

.brand-message p {
    max-width: 410px;

    margin: 19px 0 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 14px;
    line-height: 1.9;
}


/* ----------------------------------------------------------
   BRAND FEATURES
---------------------------------------------------------- */

.brand-features {
    display: grid;

    gap: 19px;

    margin-top: 38px;
}

.brand-feature {
    display: flex;
    align-items: center;

    gap: 14px;
}

.feature-icon {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #7dd3fc;

    background: rgba(255, 255, 255, 0.09);

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;
}

.feature-icon svg {
    width: 21px;
    height: 21px;
}

.brand-feature strong {
    display: block;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}

.brand-feature span {
    display: block;

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 11px;
}


/* ----------------------------------------------------------
   BRAND PANEL FOOTER
---------------------------------------------------------- */

.brand-panel-footer {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-top: 40px;
    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.brand-panel-footer span:first-child {
    color: #ffffff;

    font-size: 11px;
    font-weight: 600;
}

.brand-panel-footer span:last-child {
    color: rgba(255, 255, 255, 0.55);

    font-size: 10px;
}


/* ----------------------------------------------------------
   RIGHT LOGIN PANEL
---------------------------------------------------------- */

.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    padding: 55px 55px;

    background: #ffffff;
}

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


/* Mobile logo */

.mobile-brand {
    display: none;
}


/* ----------------------------------------------------------
   FORM HEADING
---------------------------------------------------------- */

.form-heading {
    margin-bottom: 37px;
}

.welcome-label {
    display: inline-block;

    margin-bottom: 13px;

    color: #2563eb;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}

.form-heading h2 {
    margin: 0;

    color: #102a56;

    font-size: 34px;
    font-weight: 800;

    letter-spacing: -1.1px;
}

.form-heading p {
    margin: 12px 0 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.7;
}


/* ----------------------------------------------------------
   FORM FIELDS
---------------------------------------------------------- */

.login-form {
    width: 100%;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;

    margin-bottom: 10px;

    color: #334155;

    font-size: 13px;
    font-weight: 700;
}

.input-container {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
}

.input-icon {
    position: absolute;

    left: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #94a3b8;

    pointer-events: none;
}

.input-icon svg {
    width: 19px;
    height: 19px;
}

.input-container input {
    display: block;

    width: 100%;
    height: 56px;

    padding: 0 49px 0 46px;

    color: #1e293b;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    outline: none;

    font-family: inherit;
    font-size: 14px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.input-container input::placeholder {
    color: #a0aec0;
    font-size: 13px;
}

.input-container input:hover {
    border-color: #cbd5e1;
}

.input-container input:focus {
    background: #ffffff;

    border-color: #3b82f6;

    box-shadow:
        0 0 0 4px rgba(59, 130, 246, 0.10);
}

.input-container:focus-within .input-icon {
    color: #2563eb;
}


/* ----------------------------------------------------------
   PASSWORD TOGGLE
---------------------------------------------------------- */

.password-toggle {
    position: absolute;

    right: 12px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #94a3b8;

    background: transparent;

    border: none;
    border-radius: 8px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.password-toggle svg {
    width: 19px;
    height: 19px;
}

.password-toggle:hover {
    color: #2563eb;
    background: #eff6ff;
}

.password-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}


/* ----------------------------------------------------------
   LOGIN BUTTON
---------------------------------------------------------- */

.login-button {
    width: 100%;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 8px;

    color: #ffffff;

    background: linear-gradient(
        110deg,
        #2563eb 0%,
        #1d4ed8 55%,
        #1e40af 100%
    );

    border: none;
    border-radius: 10px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(37, 99, 235, 0.19);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.login-button svg {
    width: 19px;
    height: 19px;

    transition: transform 0.2s ease;
}

.login-button:hover {
    transform: translateY(-2px);

    filter: brightness(1.06);

    box-shadow:
        0 12px 24px rgba(37, 99, 235, 0.27);
}

.login-button:hover svg {
    transform: translateX(4px);
}

.login-button:active {
    transform: translateY(0);
}

.login-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.30);
    outline-offset: 3px;
}


/* ----------------------------------------------------------
   SECURITY INFORMATION
---------------------------------------------------------- */

.security-information {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 34px;
    padding: 19px 16px;

    background: #f8fafc;

    border: 1px solid #edf2f7;
    border-radius: 11px;
}

.security-icon {
    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #059669;

    background: #dcfce7;

    border-radius: 10px;
}

.security-icon svg {
    width: 19px;
    height: 19px;
}

.security-information strong {
    display: block;

    margin-bottom: 4px;

    color: #334155;

    font-size: 12px;
    font-weight: 700;
}

.security-information p {
    margin: 0;

    color: #64748b;

    font-size: 11px;
    line-height: 1.6;
}


/* ----------------------------------------------------------
   FORM FOOTER
---------------------------------------------------------- */

.form-footer {
    margin-top: 32px;

    text-align: center;
}

.form-footer span {
    color: #94a3b8;

    font-size: 11px;
}

.form-footer p {
    margin: 6px 0 0;

    color: #475569;

    font-size: 12px;
    font-weight: 600;
}


/* ----------------------------------------------------------
   ALERT MESSAGES
---------------------------------------------------------- */

.login-alert {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 22px;
    padding: 13px 15px;

    border-radius: 9px;

    font-size: 12px;
    line-height: 1.6;
}

.login-alert-error,
.login-alert-danger {
    color: #991b1b;

    background: #fef2f2;

    border: 1px solid #fecaca;
}

.login-alert-success {
    color: #166534;

    background: #f0fdf4;

    border: 1px solid #bbf7d0;
}

.login-alert-warning {
    color: #92400e;

    background: #fffbeb;

    border: 1px solid #fde68a;
}

.login-alert-info {
    color: #1e40af;

    background: #eff6ff;

    border: 1px solid #bfdbfe;
}

.alert-icon {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid currentColor;

    border-radius: 50%;

    font-weight: 800;
}


/* ----------------------------------------------------------
   RESPONSIVE DESIGN - TABLETS
---------------------------------------------------------- */

@media (max-width: 1000px) {

    .login-screen {
        padding: 25px;
    }

    .login-layout {
        max-width: 850px;

        grid-template-columns: 0.9fr 1.1fr;

        min-height: 600px;
    }

    .login-brand-panel {
        padding: 40px 32px 30px;
    }

    .brand-information h1 {
        font-size: 28px;
    }

    .brand-message h2 {
        font-size: 29px;
    }

    .brand-message p {
        font-size: 13px;
    }

    .login-form-panel {
        padding: 40px 35px;
    }

}


/* ----------------------------------------------------------
   RESPONSIVE DESIGN - MOBILE
---------------------------------------------------------- */

@media (max-width: 700px) {

    .login-screen {
        display: block;

        min-height: 100vh;
        min-height: 100dvh;

        padding: 20px 14px;

        overflow: visible;
    }

    .login-layout {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 460px;

        min-height: auto;

        margin: 0 auto;

        border-radius: 17px;
    }

    /* Hide large desktop branding panel */

    .login-brand-panel {
        display: none;
    }

    /* Login panel */

    .login-form-panel {
        width: 100%;

        padding: 34px 25px 30px;
    }

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

    /* Mobile logo */

    .mobile-brand {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 12px;

        margin-bottom: 32px;
    }

    .mobile-brand img {
        width: 45px;
        height: 45px;

        object-fit: contain;
    }

    .mobile-brand span {
        color: #102a56;

        font-size: 20px;
        font-weight: 800;
    }

    .form-heading {
        margin-bottom: 28px;
    }

    .form-heading h2 {
        font-size: 29px;
    }

    .form-heading p {
        font-size: 13px;
    }

    .security-information {
        margin-top: 27px;
    }

}


/* ----------------------------------------------------------
   SMALL MOBILE DEVICES
---------------------------------------------------------- */

@media (max-width: 380px) {

    .login-screen {
        padding: 12px;
    }

    .login-form-panel {
        padding: 28px 18px 24px;
    }

    .mobile-brand {
        margin-bottom: 27px;
    }

    .form-heading h2 {
        font-size: 26px;
    }

    .input-container input {
        height: 52px;
    }

    .login-button {
        height: 53px;
    }

}


/* ----------------------------------------------------------
   SHORT SCREENS
---------------------------------------------------------- */

@media (min-width: 701px) and (max-height: 760px) {

    .login-screen {
        padding: 18px;
    }

    .login-layout {
        min-height: 570px;
    }

    .login-brand-panel {
        padding-top: 32px;
        padding-bottom: 25px;
    }

    .brand-logo-container {
        width: 68px;
        height: 68px;
    }

    .brand-information {
        margin-top: 16px;
    }

    .brand-message h2 {
        font-size: 29px;
    }

    .brand-features {
        gap: 12px;
        margin-top: 24px;
    }

    .login-form-panel {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .form-heading {
        margin-bottom: 25px;
    }

    .form-heading h2 {
        font-size: 30px;
    }

    .form-group {
        margin-bottom: 18px;
    }

    .security-information {
        margin-top: 24px;
    }

    .form-footer {
        margin-top: 22px;
    }

}


/* ----------------------------------------------------------
   ACCESSIBILITY
---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .login-body *,
    .login-body *::before,
    .login-body *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

}