/* ══════════════════════════════════════════════════════════════
   GMES — Login page
   Centred sign-in card. Relies on the shared palette / button /
   input styles in main.css + components.css.
   ══════════════════════════════════════════════════════════════ */

html, body {
    height: 100%;
}

body {
    margin:          0;
    font-family:     "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    color:           #1d2b2a;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1.5em;
    box-sizing:      border-box;
    /* Subtle brand-teal wash behind the card */
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(12,110,106,0.18), rgba(12,110,106,0) 70%),
        linear-gradient(160deg, #f4f8f8 0%, #e7efef 100%);
}

/* ── The card ──────────────────────────────────────────────── */
.login-card {
    width:           100%;
    max-width:       360px;
    background:      #ffffff;
    border:          1px solid rgba(12,110,106,0.18);
    border-radius:   14px;
    padding:         2em 2em 1.75em;
    box-shadow:      0 12px 34px rgba(0,0,0,0.12),
                     0 2px 6px rgba(0,0,0,0.06);
    box-sizing:      border-box;
}

/* ── Logo (the source image is huge — scale it right down) ──── */
.login-logo {
    display:    block;
    width:      100%;
    max-width:  230px;
    height:     auto;
    margin:     0 auto 1.25em;
}

.login-card h1 {
    margin:        0 0 1.4em;
    text-align:    center;
    font-size:     0.78rem;
    font-weight:   600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:         rgb(var(--gm-gray1));
}

/* ── Fields ────────────────────────────────────────────────── */
.login-field {
    margin-bottom: 1em;
}

.login-field label {
    display:        block;
    margin-bottom:  0.35em;
    font-size:      0.8rem;
    font-weight:    600;
    color:          rgb(var(--gm-gray1));
}

.login-card input.loginBox {
    width:       100%;
    box-sizing:  border-box;
    padding:     0.6em 0.7em;
    font-size:   0.95rem;
    border:      1px solid #bcd0cf;
    border-radius: 8px;
    background:  rgba(239,255,145,0.10);
    transition:  border-color 0.12s, box-shadow 0.12s;
}

.login-card input.loginBox:focus {
    outline:      none;
    border-color: rgb(var(--gm-green1));
    box-shadow:   0 0 0 3px rgba(12,110,106,0.16);
}

/* ── Submit button ─────────────────────────────────────────── */
.login-card .ui-button#button_login {
    width:        100%;
    margin-top:   0.4em;
    padding:      0.7em 1em;
    font-size:    0.95rem;
    border-radius: 8px;
}

/* ── Password-reset dialog form ────────────────────────────── */
#setPassword .login-field { margin-bottom: 0.7em; }
#setPassword input { width: 100%; box-sizing: border-box; padding: 0.5em 0.6em; border-radius: 6px; }

/* ══════════════════════════════════════════════════════════════
   Dark theme
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] body {
    color: #e0e0e0;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(12,110,106,0.30), rgba(12,110,106,0) 70%),
        linear-gradient(160deg, #141818 0%, #0e1212 100%);
}

[data-theme="dark"] .login-card {
    background:   #1c1f1f;
    border-color: rgba(12,110,106,0.35);
    box-shadow:   0 12px 34px rgba(0,0,0,0.5);
}

[data-theme="dark"] .login-card input.loginBox {
    background:   rgba(255,255,255,0.06);
    border-color: #3a4a48;
    color:        #e0e0e0;
}

[data-theme="dark"] .login-card input.loginBox:focus {
    border-color: rgb(var(--gm-green1));
    box-shadow:   0 0 0 3px rgba(12,110,106,0.30);
}