/* ARMANN login screen. Moved verbatim from the old index.php inline <style>. */
:root {
    --primary-blue:#09628f;
    --primary-green:#21833e;
    --dark-text:var(--aa-text);
    --muted-text:var(--aa-text-3);
    --border-color:var(--aa-border);
    --page-background:var(--aa-surface-2);
    --error-background:var(--aa-surface-2);
    --error-color:#c62828;
    --success-background:var(--aa-success-soft);
    --success-color:#176b32;
}

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

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

body {
    min-height:100vh;
    padding:28px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:radial-gradient(
            circle at top left,
            rgba(9, 98, 143, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(33, 131, 62, 0.10),
            transparent 30%
        ),
        var(--page-background);

    font-family:'Inter', sans-serif;
    color:var(--dark-text);
}

button,
input,
select {
    font-family:inherit;
}

.login-wrapper {
    width:min(1420px, 100%);
    min-height:730px;
    display:grid;
    grid-template-columns:39% 61%;
    background:var(--aa-surface);
    border-radius:28px;
    overflow:hidden;

    box-shadow:0 30px 70px rgba(25, 38, 53, 0.15),
        0 8px 24px rgba(25, 38, 53, 0.08);
}

.login-panel {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:48px 70px;
    background:var(--aa-surface);
    z-index:2;
}

.brand {
    position:absolute;
    top:38px;
    left:70px;
    right:70px;

    display:flex;
    align-items:center;
    gap:14px;
}

.brand img {
    width:auto;
    height:62px;
    object-fit:contain;
}

.brand-name {
    display:flex;
    flex-direction:column;
}

.brand-name h1 {
    margin:0;
    font-size:25px;
    line-height:1;
    font-weight:700;
    letter-spacing:-0.5px;
    color:var(--primary-blue);
}

.brand-name h1 span {
    color:inherit;
}

.brand-name p {
    margin-top:5px;
    max-width:225px;
    font-size:9px;
    line-height:1.35;
    font-weight:600;
    letter-spacing:1.3px;
    text-transform:uppercase;
    color:var(--aa-text-3);
}

.form-container {
    width:100%;
    max-width:440px;
    margin:78px auto 0;
}

.form-header {
    margin-bottom:26px;
}

.form-header h2 {
    margin-bottom:10px;
    font-size:clamp(29px, 3vw, 40px);
    line-height:1.15;
    font-weight:700;
    letter-spacing:-1.5px;
    color:var(--dark-text);
}

.form-header p {
    font-size:14px;
    line-height:1.6;
    color:var(--muted-text);
}

.alert-error,
.alert-success {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:20px;
    padding:13px 15px;
    border-radius:10px;
    font-size:13px;
    font-weight:500;
    line-height:1.45;
}

.alert-error {
    border:1px solid #ffcaca;
    background:var(--error-background);
    color:var(--error-color);
}

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

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

.form-group label {
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:600;
    color:var(--aa-text);
}

.input-wrapper {
    position:relative;
}

.emoji-input-icon {
    position:absolute;
    top:50%;
    left:16px;
    transform:translateY(-50%);

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

    width:24px;
    height:24px;

    font-size:19px;
    line-height:1;

    pointer-events:none;
    user-select:none;
    z-index:2;

    transition:opacity .18s ease, transform .18s ease;
}

.input-wrapper .form-control {
    transition:padding-left .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.input-wrapper.is-active .emoji-input-icon {
    opacity:0;
    transform:translateY(-50%) scale(.72);
}

.input-wrapper.is-active .form-control {
    padding-left:18px;
}

.form-control {
    width:100%;
    height:54px;
    padding:0 48px;

    border:1px solid var(--border-color);
    border-radius:10px;

    background-color:var(--aa-surface);
    color:var(--dark-text);

    font-size:14px;
    outline:none;

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

.form-control::placeholder {
    color:var(--aa-text-3);
}

.form-control:focus {
    border-color:var(--primary-blue);
    box-shadow:0 0 0 4px rgba(9, 98, 143, 0.10);
}

.form-select {
    padding-left:48px;
    padding-right:42px;
    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    background-image:linear-gradient(
            45deg,
            transparent 50%,
            #7f8794 50%
        ),
        linear-gradient(
            135deg,
            #7f8794 50%,
            transparent 50%
        );

    background-position:calc(100% - 19px) 23px,
        calc(100% - 14px) 23px;

    background-size:5px 5px,
        5px 5px;

    background-repeat:no-repeat;
}

.form-select:invalid {
    color:var(--aa-text-3);
}

.form-select option {
    color:var(--dark-text);
    background:var(--aa-surface);
}

.password-toggle {
    position:absolute;
    top:50%;
    right:16px;
    transform:translateY(-50%);

    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border:none;
    background:transparent;
    color:var(--aa-text-3);

    cursor:pointer;
}

.password-toggle:hover {
    color:var(--primary-blue);
}

.password-note {
    margin-top:7px;
    color:var(--aa-text-3);
    font-size:11px;
    line-height:1.4;
}

.form-options {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin-top:-2px;
    margin-bottom:25px;
}

.forgot-password,
.switch-link {
    color:var(--primary-blue);
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    transition:color 0.2s ease;
}

.forgot-password:hover,
.switch-link:hover {
    color:var(--primary-green);
    text-decoration:underline;
}

.btn-auth {
    width:100%;
    min-height:54px;

    border:none;
    border-radius:10px;

    background:linear-gradient(
            100deg,
            var(--primary-blue),
            var(--primary-green)
        );

    color:#ffffff;
    font-size:15px;
    font-weight:700;

    cursor:pointer;

    box-shadow:0 12px 24px rgba(9, 98, 143, 0.18);

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

.btn-auth:hover {
    transform:translateY(-2px);
    filter:brightness(1.04);

    box-shadow:0 16px 30px rgba(9, 98, 143, 0.25);
}

.btn-auth:active {
    transform:translateY(0);
}

.btn-auth:disabled {
    cursor:not-allowed;
    opacity:0.6;
    transform:none;
    box-shadow:none;
}

.switch-message {
    margin-top:20px;
    text-align:center;
    color:var(--muted-text);
    font-size:13px;
}

.image-panel {
    position:relative;
    min-height:730px;

    background-image:url("../../images/arman_background.png");

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    overflow:hidden;
}

.login-constellation {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
    opacity:.85;
    mix-blend-mode:screen;
}

.image-panel::before {
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
            180deg,
            rgba(5, 25, 39, 0.12) 0%,
            rgba(5, 25, 39, 0.30) 34%,
            rgba(4, 38, 43, 0.86) 62%,
            rgba(2, 30, 25, 0.96) 100%
        ),
        linear-gradient(
            110deg,
            rgba(9, 98, 143, 0.10),
            rgba(33, 131, 62, 0.18)
        );

    z-index:1;
}

.image-panel::after {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255, 255, 255, 0.03);
    z-index:2;
    pointer-events:none;
}

.image-content {
    position:absolute;
    right:60px;
    bottom:55px;
    left:60px;
    z-index:3;
    color:#ffffff;
}

.image-content h2,
.image-content h1,
.image-content h3 {
    color:#ffffff !important;
}

.image-content > p,
.image-content .feature-list,
.image-content .feature-list li,
.image-content .feature-list span {
    color:#ffffff;
}

.image-content h2 {
    max-width:680px;
    margin-bottom:13px;

    font-size:clamp(31px, 3.5vw, 49px);
    line-height:1.1;
    font-weight:700;
    letter-spacing:-1.3px;

    text-shadow:0 2px 10px rgba(0, 0, 0, 0.22);
}

.image-content > p {
    max-width:650px;

    font-size:clamp(15px, 1.6vw, 21px);
    line-height:1.55;

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

    text-shadow:0 2px 8px rgba(0, 0, 0, 0.22);
}

.feature-list {
    margin-top:32px;
    padding:0;

    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));

    gap:18px;
    list-style:none;
}

.feature-list li {
    min-height:70px;

    display:flex;
    align-items:flex-start;
    gap:12px;

    padding-right:17px;

    border-right:1px solid rgba(255, 255, 255, 0.35);

    font-size:13px;
    line-height:1.45;

    color:rgba(255, 255, 255, 0.94);
}

.feature-list li:last-child {
    border-right:none;
}

.feature-list i {
    flex:0 0 auto;
    margin-top:2px;
    font-size:24px;
    color:#ffffff;
}

@media (max-width: 1050px) {
    body {
        padding:20px;
    }

    .login-wrapper {
        grid-template-columns:44% 56%;
        min-height:680px;
    }

    .login-panel {
        padding:45px 42px;
    }

    .brand {
        top:34px;
        left:42px;
        right:42px;
    }

    .brand img {
        height:55px;
    }

    .brand-name h1 {
        font-size:21px;
    }

    .image-panel {
        min-height:680px;
    }

    .image-content {
        right:40px;
        bottom:42px;
        left:40px;
    }

    .feature-list {
        grid-template-columns:1fr;
        gap:12px;
    }

    .feature-list li {
        min-height:auto;
        padding-right:0;
        border-right:none;
    }
}

@media (max-width: 760px) {
    body {
        padding:0;
        align-items:stretch;
        background:var(--aa-surface);
    }

    .login-wrapper {
        min-height:100vh;

        display:flex;
        flex-direction:column;

        border-radius:0;
        box-shadow:none;
    }

    .login-panel {
        order:2;
        padding:40px 25px 45px;
    }

    .brand {
        position:static;
        margin-bottom:30px;
    }

    .brand img {
        height:52px;
    }

    .brand-name h1 {
        font-size:20px;
    }

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

    .form-header h2 {
        font-size:31px;
    }

    .image-panel {
        order:1;
        min-height:330px;
        background-position:center;
    }

    .image-content {
        right:25px;
        bottom:28px;
        left:25px;
    }

    .image-content h2 {
        margin-bottom:8px;
        font-size:28px;
    }

    .image-content > p {
        font-size:14px;
    }

    .feature-list {
        display:none;
    }
}

@media (max-width: 420px) {
    .login-panel {
        padding:32px 20px 40px;
    }

    .brand-name p {
        max-width:185px;
        font-size:7px;
    }

    .image-panel {
        min-height:280px;
    }

    .image-content h2 {
        font-size:24px;
    }

    .form-control,
    .btn-auth {
        min-height:52px;
        height:52px;
    }
}