@font-face {
    font-family: "Averia Sans Libre";
    src: url("../fonts/averia-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Gluten";
    src: url("../fonts/gluten-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --forest-900: #0c3f37;
    --forest-700: #17685a;
    --leaf: #5b9428;
    --blue: #167fc2;
    --blue-dark: #155c97;
    --gold: #e4aa1c;

    --text: #183339;
    --muted: #6e7e82;
    --border: #d8e4e5;
    --white: #ffffff;

    --danger-bg: #fdebed;
    --danger-text: #8c2831;
    --success-bg: #e4f7ed;
    --success-text: #176c49;

    --card-shadow:
        0 26px 72px rgba(23, 59, 66, 0.15);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    color: var(--text);
    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
    background: #f6f9f7;
}

button,
input {
    font: inherit;
}

a,
button,
input {
    -webkit-tap-highlight-color: transparent;
}

.erp-login-page {
    overflow: hidden;
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 48px;
}

/* ---------------------------------------------------------
   Shared page background and two-section layout
--------------------------------------------------------- */

.login-shell {
    position: relative;
    isolation: isolate;
    min-height: 0;
    overflow: hidden;

    display: grid;
    grid-template-columns:
        minmax(520px, 1.08fr)
        minmax(460px, 0.92fr);

    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(91, 148, 40, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 86% 17%,
            rgba(22, 127, 194, 0.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 78% 86%,
            rgba(91, 148, 40, 0.08),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            #fffaf0 0%,
            #f5f7ee 46%,
            #edf7f7 100%
        );
}

/*
   One large watermark only, centred across the complete
   two-section area rather than inside either section.
*/
.page-watermark {
    position: absolute;
    z-index: 0;

    left: 50%;
    top: 50%;

    width: min(46vw, 720px);
    height: min(76vh, 720px);

    transform: translate(-50%, -50%);

    object-fit: contain;
    object-position: center;

    opacity: 0.055;

    filter:
        saturate(78%)
        contrast(92%);

    pointer-events: none;
    user-select: none;
}

/* ---------------------------------------------------------
   Left branding section
--------------------------------------------------------- */

.login-brand-panel {
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;

    padding: clamp(52px, 6vw, 104px);

    background: transparent;
}

.brand-lockup {
    position: relative;
    z-index: 2;

    width: min(820px, 100%);

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

    gap: clamp(30px, 4vw, 64px);
}

.brand-mark {
    flex: 0 0 auto;

    width: clamp(170px, 17vw, 250px);
    height: auto;

    display: block;

    filter:
        drop-shadow(0 20px 38px rgba(68, 79, 33, 0.19));
}

.brand-wordmark {
    min-width: 0;

    width: min(530px, 60%);
    height: auto;

    display: block;

    filter:
        drop-shadow(0 14px 28px rgba(100, 48, 15, 0.13));
}

/* ---------------------------------------------------------
   Right login section
--------------------------------------------------------- */

.login-form-panel {
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;

    padding:
        clamp(58px, 7vh, 88px)
        clamp(32px, 5vw, 76px)
        clamp(34px, 5vh, 58px);

    background: transparent;
}

.environment-badge {
    position: absolute;
    z-index: 4;
    top: 24px;
    right: 24px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 13px;

    border: 1px solid rgba(21, 92, 151, 0.16);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.90);
    color: var(--blue-dark);

    font-family:
        "Averia Sans Libre",
        "Segoe UI",
        sans-serif;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;

    box-shadow:
        0 8px 22px rgba(23, 59, 66, 0.08);

    backdrop-filter: blur(10px);
}

.environment-badge span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow:
        0 0 0 4px rgba(228, 170, 28, 0.14);
}

.mobile-brand-lockup {
    display: none;
}

.login-form-card {
    position: relative;
    z-index: 2;

    width: min(430px, 100%);

    padding: 38px 38px 34px;

    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 28px;

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

    box-shadow: var(--card-shadow);

    backdrop-filter: blur(14px);
}

.form-kicker {
    margin-bottom: 9px;

    color: var(--leaf);

    font-family:
        "Averia Sans Libre",
        "Segoe UI",
        sans-serif;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.login-form-card h1 {
    margin: 0 0 8px;

    color: #183f37;

    font-family:
        "Gluten",
        "Segoe UI",
        sans-serif;

    font-size: clamp(33px, 3vw, 42px);
    font-weight: 400;
    line-height: 1.12;
}

.subtitle {
    margin: 0 0 27px;
    color: var(--muted);
    line-height: 1.55;
}

/* ---------------------------------------------------------
   Login form
--------------------------------------------------------- */

form > label {
    display: block;
    margin: 16px 0 7px;

    color: #223c41;

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

.input-group {
    position: relative;
}

.input-group input {
    width: 100%;
    height: 50px;

    padding: 0 48px 0 15px;

    border: 1px solid #cbdadb;
    border-radius: 13px;

    outline: none;

    background: rgba(251, 253, 253, 0.97);
    color: var(--text);

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

.input-group input::placeholder {
    color: #97a5a8;
}

.input-group input:focus {
    border-color: var(--blue);
    background: var(--white);
    box-shadow:
        0 0 0 4px rgba(22, 127, 194, 0.11);
}

.input-trailing-icon {
    position: absolute;
    right: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #80928f;
    pointer-events: none;
}

.password-group input {
    padding-right: 86px;
}

.password-lock-icon {
    position: absolute;
    right: 57px;
    top: 50%;

    transform: translateY(-50%);

    color: #80928f;
    pointer-events: none;
}

.password-group button {
    position: absolute;

    right: 6px;
    top: 6px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 9px;

    background: #edf3f3;
    color: #52707a;

    cursor: pointer;

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

.password-group button:hover {
    background: #e2eded;
    color: var(--blue-dark);
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin: 17px 0 20px;

    font-size: 13px;
}

.remember-option {
    display: flex;
    align-items: center;

    gap: 8px;
    margin: 0;

    color: #526366;

    font-weight: 500;
    cursor: pointer;
}

.remember-option input {
    width: 16px;
    height: 16px;
    accent-color: var(--forest-700);
}

.form-options a {
    color: var(--blue-dark);
    font-weight: 700;
    text-decoration: none;
}

.form-options a:hover {
    text-decoration: underline;
}

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

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

    gap: 10px;

    border: 0;
    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            var(--leaf) 0%,
            var(--forest-700) 52%,
            var(--blue-dark) 100%
        );

    color: var(--white);

    font-family:
        "Averia Sans Libre",
        "Segoe UI",
        sans-serif;

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

    cursor: pointer;

    box-shadow:
        0 13px 28px rgba(23, 104, 90, 0.23);

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

.login-button:hover {
    transform: translateY(-2px);
    filter: saturate(108%);
    box-shadow:
        0 17px 34px rgba(23, 104, 90, 0.28);
}

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

.login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.alert {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 13px 14px;
    margin-bottom: 18px;

    border-radius: 11px;

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

.alert.error {
    border: 1px solid #f0c9ce;
    background: var(--danger-bg);
    color: var(--danger-text);
}

.alert.success {
    border: 1px solid #bfe3d0;
    background: var(--success-bg);
    color: var(--success-text);
}

.security-note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid var(--border);

    color: var(--muted);

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

.security-note i {
    margin-top: 2px;
    color: var(--leaf);
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */

.site-footer {
    position: relative;
    z-index: 5;

    min-height: 48px;

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

    gap: 8px;

    padding: 8px 18px;

    border-top: 1px solid rgba(23, 104, 90, 0.10);

    background: rgba(255, 255, 255, 0.94);
    color: #68797c;

    font-size: 12px;
    text-align: center;
}

.footer-wordmark {
    width: 76px;
    max-height: 23px;
    display: block;
    object-fit: contain;
}

.footer-year,
.footer-rights {
    white-space: nowrap;
}

/* ---------------------------------------------------------
   Responsive layout
--------------------------------------------------------- */

@media (max-width: 1120px) {
    .login-shell {
        grid-template-columns:
            minmax(430px, 0.95fr)
            minmax(440px, 1.05fr);
    }

    .brand-mark {
        width: clamp(145px, 15vw, 205px);
    }

    .brand-wordmark {
        width: min(470px, 59%);
    }

    .page-watermark {
        width: min(52vw, 660px);
        height: min(72vh, 660px);
    }
}

@media (max-width: 900px) {
    html,
    body {
        height: auto;
        min-height: 100%;
    }

    .erp-login-page {
        overflow: auto;
    }

    .login-page {
        min-height: 100vh;
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

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

    .login-form-panel {
        min-height: calc(100vh - 48px);
        padding: 88px 22px 34px;
    }

    .page-watermark {
        left: 50%;
        top: 50%;
        width: min(88vw, 620px);
        height: min(68vh, 620px);
        opacity: 0.050;
    }

    .mobile-brand-lockup {
        position: relative;
        z-index: 2;

        width: min(430px, 100%);

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

        gap: 15px;

        margin-bottom: 22px;
    }

    .mobile-brand-mark {
        width: 74px;
        height: auto;
        display: block;
    }

    .mobile-brand-wordmark {
        min-width: 0;
        width: min(280px, 70%);
        height: auto;
        display: block;
    }

    .login-form-card {
        width: min(460px, 100%);
    }

    .environment-badge {
        top: 18px;
        right: 18px;
    }
}

@media (max-width: 520px) {
    .login-form-panel {
        padding:
            80px
            13px
            24px;
    }

    .page-watermark {
        width: 105vw;
        height: 62vh;
        opacity: 0.040;
    }

    .login-form-card {
        padding: 27px 21px;
        border-radius: 21px;
    }

    .login-form-card h1 {
        font-size: 32px;
    }

    .subtitle {
        font-size: 14px;
    }

    .form-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }

    .mobile-brand-lockup {
        gap: 11px;
        margin-bottom: 17px;
    }

    .mobile-brand-mark {
        width: 61px;
    }

    .mobile-brand-wordmark {
        width: min(235px, 72%);
    }

    .site-footer {
        gap: 5px;
        padding-inline: 8px;
        font-size: 10px;
    }

    .footer-wordmark {
        width: 61px;
        max-height: 20px;
    }
}

@media (min-width: 901px) and (max-height: 720px) {
    html,
    body {
        height: auto;
        min-height: 720px;
    }

    .erp-login-page {
        overflow: auto;
    }

    .login-page {
        min-height: 720px;
    }

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

    .subtitle {
        margin-bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}