@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
@import url("../../elastic/styles/styles.min.css");

/* ==========================================================================
   Skin "lumbung" — derived from Elastic (see meta.json "extends").
   Elastic's stylesheet is imported above and never edited; everything below
   is scoped to `.task-login`, so the mailbox UI stays stock Elastic.

   Working WITH Elastic rather than against it, which the first attempt got
   wrong in two ways:
     · Elastic pushes #logo and #login-form down with `position:relative;
       top:16vh/20vh`. Relative offsets move pixels but not layout boxes, so
       anything given a background here spilled out of it. Both offsets are
       reset to 0 and the centring is redone with flexbox.
     · Elastic's ui.js rewrites each login field into a Bootstrap
       `.input-group` (icon + input on one line). Forcing the table cells to
       `display:block` tore that apart, so the structure is left alone and
       only the colours change.

   Palette follows lumbungmakmur.com, itself derived from the logo
   (#2a558a blue, #555555 grey).
   ========================================================================== */

.task-login {
    --lm-ink: #0a0d12;
    --lm-panel: #171d26;
    --lm-line: rgba(146, 178, 220, .16);
    --lm-brand: #31639f;
    --lm-accent: #528dd6;
    --lm-text: #e9edf2;
    --lm-dim: #97a2b0;
    --lm-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --lm-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.task-login {
    background:
        linear-gradient(rgba(10, 13, 18, .82), rgba(10, 13, 18, .94)),
        url("../images/hero-bg.jpg") center center / cover no-repeat fixed var(--lm-ink);
    font-family: var(--lm-sans);
    color: var(--lm-text);
}

/* Elastic sets body{overflow:hidden}; the card must still be reachable on
   short screens once the Turnstile widget is in play. */
.task-login #layout {
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.task-login #layout-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 24px 16px;
    background: none;
}

/* ---- the card ---- */
.task-login .lm-card {
    width: 100%;
    max-width: 384px;
    margin: auto;
    padding: 36px 32px 26px;
    background: var(--lm-panel);
    border: 1px solid var(--lm-line);
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    text-align: center;
}

/* neutralise Elastic's vh offsets — this is what broke the first version */
.task-login #logo {
    position: static;
    top: auto;
    display: block;
    margin: 0 auto 12px;
    max-height: 56px;
    width: auto;
    filter: brightness(1.35);
}

.task-login #login-form {
    position: static;
    top: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* explicit order so the widget lands between the fields and the button
   without having to alter Roundcube's generated form markup */
.task-login #login-form table {
    order: 1;
}

.task-login #login-form .lm-turnstile {
    order: 2;
}

.task-login #login-form .formbuttons {
    order: 3;
}

.task-login #login-form #login-footer {
    order: 4;
}

/* ---- brand lockup ---- */
.task-login .lm-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--lm-text);
    margin: 0 0 3px;
}

.task-login .lm-tag {
    font-family: var(--lm-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lm-accent);
    margin: 0 0 24px;
}

/* ---- fields: recolour only, Elastic keeps building the input groups ---- */
.task-login #login-form td.title {
    color: var(--lm-dim);
}

.task-login #login-form label {
    font-family: var(--lm-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lm-dim);
}

.task-login .input-group-text,
.task-login #login-form .input-group-prepend .input-group-text {
    background: rgba(255, 255, 255, .05);
    border-color: var(--lm-line);
    color: var(--lm-accent);
}

.task-login #login-form input.form-control,
.task-login #login-form input[type="text"],
.task-login #login-form input[type="password"] {
    font-family: var(--lm-sans);
    font-size: 15px;
    color: #fff;
    background: rgba(255, 255, 255, .04);
    border-color: var(--lm-line);
    box-shadow: none;
}

.task-login #login-form input.form-control:focus {
    border-color: var(--lm-accent);
    background: rgba(255, 255, 255, .07);
    box-shadow: none;
}

.task-login #login-form input::placeholder {
    color: #6f7986;
}

/* ---- Turnstile ---- */
.task-login .lm-turnstile {
    margin: 4px 0 14px;
    min-height: 65px;
    display: flex;
    justify-content: center;
}

/* ---- submit ---- */
.task-login .formbuttons {
    margin: 0;
}

.task-login #rcmloginsubmit,
.task-login button.mainaction.submit {
    display: block;
    width: 100%;
    font-family: var(--lm-sans);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    color: #fff;
    background: var(--lm-brand);
    border: 1px solid var(--lm-brand);
    border-radius: 2px;
    padding: 12px 20px;
    box-shadow: none;
    transition: background .2s, border-color .2s;
}

.task-login #rcmloginsubmit:hover,
.task-login button.mainaction.submit:hover {
    background: #3a7dd0;
    border-color: #3a7dd0;
}

/* ---- footer ---- */
.task-login #login-footer {
    flex: none;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--lm-line);
    text-align: center;
    font-size: 12px;
    color: var(--lm-dim);
}

.task-login #login-footer > div {
    background: none;
    padding: 0;
    margin-top: .5rem;
}

.task-login #login-footer a,
.task-login .support-link {
    color: var(--lm-accent);
    text-decoration: none;
}

.task-login #login-footer a:hover {
    color: #7aa3d7;
    text-decoration: underline;
}

/* ---- small screens ---- */
@media screen and (max-width: 480px) {

    .task-login .lm-card {
        padding: 28px 20px 22px;
    }

    .task-login #logo {
        max-height: 48px;
    }
}