/* =========================================================
   JIWAKA.NET WEBMAIL LOGIN
   CSS ONLY + FONTAWESOME
   ========================================================= */

html,
body.task-login {
    margin: 0 !important;
    min-height: 100% !important;
    background: #031f00 !important;
}

body.task-login {
    overflow-x: hidden;
}

body.task-login #layout,
body.task-login #layout-content {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.jw-clean-page {
    --deep: #063B00;
    --green: #266210;
    --lime: #90B800;
    --gold: #E1E100;
    --gold2: #f4c900;
    --red: #c92020;

    position: relative;
    min-height: 100vh;

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

    box-sizing: border-box;

    padding: 70px 20px 110px;

    background:
        radial-gradient(circle at 75% 45%,
            rgba(225,225,0,.15),
            transparent 30%),
        radial-gradient(circle at 25% 75%,
            rgba(144,184,0,.10),
            transparent 28%),
        linear-gradient(
            145deg,
            #021a00 0%,
            #063B00 42%,
            #0a4304 68%,
            #031f00 100%
        );

    color: #fff;
    overflow: hidden;
}

/* subtle cultural pattern */
.jw-clean-page::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            45deg,
            transparent 0 34px,
            rgba(225,225,0,.025) 35px 37px,
            transparent 38px 70px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0 34px,
            rgba(225,225,0,.025) 35px 37px,
            transparent 38px 70px
        );

    pointer-events: none;
}

/* top Jiwaka/PNG pattern */
.jw-pattern-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 24px;

    background:
        linear-gradient(
            135deg,
            transparent 35%,
            #E1E100 36% 48%,
            transparent 49%
        ) 0 0 / 44px 22px repeat-x,

        linear-gradient(
            45deg,
            transparent 35%,
            #c92020 36% 48%,
            transparent 49%
        ) 22px 2px / 44px 22px repeat-x,

        #063B00;

    border-bottom: 2px solid #E1E100;
}

/* main card */
.jw-clean-card {
    position: relative;
    z-index: 2;

    width: min(520px, 100%);
    text-align: center;
}

/* emblem */
.jw-emblem {
    width: 92px;
    height: 92px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #0c5a07,
            #042f00
        );

    border: 3px solid var(--gold);

    box-shadow:
        0 8px 24px rgba(0,0,0,.35),
        inset 0 0 0 5px rgba(255,255,255,.04);
}

.jw-emblem i {
    font-size: 2.6rem;
    color: var(--gold);
}

/* title */
.jw-title {
    color: #ffd92a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(3rem, 7vw, 4.8rem);

    font-weight: 700;

    line-height: 1;

    text-shadow:
        0 2px 0 #705000,
        0 4px 14px rgba(0,0,0,.6);
}

.jw-title span {
    color: #ffe65c;
}

/* subtitle */
.jw-subtitle {
    margin-top: 12px;

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

    gap: 15px;

    font-size:
        clamp(1.35rem, 3vw, 1.8rem);

    font-weight: 800;

    letter-spacing: .38em;
}

.jw-subtitle span {
    width: 58px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );
}

.jw-subtitle span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}

.jw-tagline {
    margin-top: 13px;

    color: rgba(255,255,255,.92);

    font-size: .98rem;
    font-style: italic;
}

.jw-tagline b {
    color: var(--gold);
    padding: 0 10px;
}

/* auth area */
body.task-login .jw-auth {
    width: 100% !important;

    margin: 36px auto 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}

body.task-login #login-form {
    width: 100% !important;
    margin: 0 !important;
}

/* normalize rows */
body.task-login #login-form .row {
    margin: 0 0 15px !important;
}

/* input groups */
body.task-login #login-form .input-group {
    width: 100% !important;
    min-height: 62px;
}

/* icon section */
body.task-login #login-form .input-group-text {
    min-width: 68px;

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

    color: #fff !important;

    background:
        linear-gradient(
            180deg,
            #0c8b1b,
            #075f10
        ) !important;

    border:
        2px solid var(--gold) !important;

    border-right: 0 !important;

    border-radius:
        12px 0 0 12px !important;
}

/* fallback icons */
body.task-login #login-form .input-group:nth-of-type(1)
.input-group-text::before {
    content: "\f007";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

body.task-login #login-form .input-group:nth-of-type(2)
.input-group-text::before {
    content: "\f023";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* fields */
body.task-login #login-form .form-control {
    height: 62px !important;

    color: #fff !important;

    background:
        rgba(0,12,5,.88) !important;

    border:
        2px solid var(--gold) !important;

    border-left: 0 !important;

    border-radius:
        0 12px 12px 0 !important;

    padding: 0 18px !important;

    font-size: 1.05rem !important;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.25) !important;
}

body.task-login #login-form .form-control::placeholder {
    color: rgba(255,255,255,.60) !important;
}

body.task-login #login-form .form-control:focus {
    border-color: #fff05b !important;

    background:
        rgba(0,16,6,.95) !important;

    box-shadow:
        0 0 0 3px rgba(225,225,0,.13) !important;
}

/* login button */
body.task-login #login-form .btn-primary,
body.task-login #login-form button,
body.task-login #login-form input[type="submit"] {
    width: 100% !important;

    min-height: 62px !important;

    margin-top: 2px !important;

    background:
        linear-gradient(
            180deg,
            #ffe536 0%,
            #f0c800 58%,
            #d8ae00 100%
        ) !important;

    color: #063B00 !important;

    border:
        2px solid #fff36a !important;

    border-radius:
        12px !important;

    font-size: 1.2rem !important;
    font-weight: 900 !important;

    text-transform: uppercase;

    box-shadow:
        0 7px 16px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.60) !important;
}

body.task-login #login-form .btn-primary:hover,
body.task-login #login-form button:hover,
body.task-login #login-form input[type="submit"]:hover {
    filter: brightness(1.08);
}

/* footer */
body.task-login #login-footer {
    margin-top: 17px !important;

    color: #fff !important;
}

body.task-login #login-footer a {
    color: var(--gold) !important;
    font-weight: 800;
}

/* divider */
.jw-divider {
    display: flex;
    align-items: center;

    gap: 13px;

    margin: 28px auto 12px;

    color: var(--gold);
}

.jw-divider span {
    flex: 1;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );
}

.jw-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}

.jw-divider i {
    font-size: .7rem;
}

/* pride */
.jw-pride {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.25rem;

    font-style: italic;

    color: #fff;
}

.jw-pride b {
    color: var(--gold);
    padding: 0 10px;
}

/* bottom PNG colors */
.jw-bottom-bars {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 18px;

    background:
        linear-gradient(
            to bottom,
            #E1E100 0 25%,
            #063B00 25% 50%,
            #ffffff 50% 70%,
            #c92020 70% 100%
        );
}

/* hide old pseudo content */
body.task-login #layout-content::before,
body.task-login #layout-content::after {
    display: none !important;
    content: none !important;
}

/* mobile */
@media (max-width: 650px) {

    .jw-clean-page {
        padding:
            55px 16px
            80px;
    }

    .jw-emblem {
        width: 72px;
        height: 72px;
    }

    .jw-emblem i {
        font-size: 2rem;
    }

    .jw-subtitle {
        letter-spacing: .20em;
    }

    .jw-subtitle span {
        width: 30px;
    }

    .jw-tagline {
        font-size: .82rem;
    }
}


/* =========================================================
   JIWAKA.NET LOGIN — FINAL VIEWPORT FIX
   ========================================================= */

/* Break completely out of Elastic's narrow login column */
body.task-login,
body.task-login #layout {
    width: 100vw !important;
    height: 100vh !important;

    min-width: 100vw !important;
    min-height: 100vh !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #031f00 !important;
}


/* Our branded page owns the browser viewport */
body.task-login .jw-clean-page {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    min-width: 100vw !important;
    min-height: 100vh !important;

    max-width: none !important;

    margin: 0 !important;

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

    box-sizing: border-box !important;

    z-index: 100 !important;
}


/* Keep main login block properly centered */
body.task-login .jw-clean-card {
    position: relative !important;

    display: block !important;

    width: min(520px, calc(100vw - 40px)) !important;
    max-width: 520px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    transform: none !important;

    text-align: center !important;
}


/* Prevent inherited Roundcube positioning */
body.task-login .jw-auth,
body.task-login #layout-content,
body.task-login #login-form {
    position: static !important;

    inset: auto !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    float: none !important;

    transform: none !important;

    overflow: visible !important;
}


/* =========================================================
   FONT AWESOME BRAND ICON
   ========================================================= */

body.task-login .jw-emblem i {
    display: none !important;
}

body.task-login .jw-emblem::before {
    content: "\f0e0";

    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;

    font-size: 2.65rem;

    color: #E1E100;

    line-height: 1;
}


/* Username icon */
body.task-login .input-group:has(#rcmloginuser)
.input-group-text::before {
    content: "\f007";

    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;

    font-size: 1.15rem;

    color: #fff;
}


/* Password icon */
body.task-login .input-group:has(#rcmloginpwd)
.input-group-text::before {
    content: "\f023";

    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;

    font-size: 1.15rem;

    color: #fff;
}


/* Suppress any inherited icon content */
body.task-login .input-group-text::after {
    display: none !important;
}


/* =========================================================
   FORM ALIGNMENT
   ========================================================= */

body.task-login #login-form .row {
    position: static !important;

    display: block !important;

    width: 100% !important;

    margin: 0 0 15px !important;

    transform: none !important;
}


body.task-login #login-form .input-group {
    position: static !important;

    display: flex !important;

    width: 100% !important;

    margin: 0 !important;

    transform: none !important;
}


body.task-login #login-form .input-group-text {
    position: static !important;

    flex: 0 0 68px !important;

    width: 68px !important;
    height: 62px !important;

    margin: 0 !important;

    padding: 0 !important;
}


body.task-login #login-form .form-control {
    position: static !important;

    flex: 1 1 auto !important;

    width: auto !important;
    height: 62px !important;

    margin: 0 !important;

    transform: none !important;
}


/* =========================================================
   KEEP EVERYTHING BELOW FORM IN NORMAL FLOW
   ========================================================= */

body.task-login #login-footer,
body.task-login .jw-divider,
body.task-login .jw-pride {
    position: static !important;

    inset: auto !important;

    transform: none !important;

    float: none !important;
}


body.task-login .jw-divider {
    display: flex !important;

    width: 100% !important;

    margin: 27px auto 12px !important;
}


body.task-login .jw-pride {
    display: block !important;

    width: 100% !important;

    margin: 0 auto !important;

    text-align: center !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    body.task-login .jw-clean-page {
        overflow-y: auto !important;

        align-items: flex-start !important;

        padding-top: 55px !important;
        padding-bottom: 70px !important;
    }

    body.task-login .jw-clean-card {
        width: calc(100vw - 30px) !important;
    }
}


/* ============================================================
   JIWAKA.NET LOGIN — RESPONSIVE FORM WIDTH LOCK
   Fix username/password resizing on mobile/tablet
   KEEP THIS BLOCK LAST IN login-clean.css
   ============================================================ */


/* Entire login card */
body.task-login .jw-clean-card {
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: 520px !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* Authentication area */
body.task-login .jw-auth,
body.task-login #layout-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* Actual Roundcube form */
body.task-login #login-form {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* Every form row */
body.task-login #login-form .row,
body.task-login #login-form .form-group {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   IMPORTANT FLEX FIX

   Roundcube/Bootstrap input groups can retain min-widths.
   Force each group to use exactly the card width.
   ------------------------------------------------------------ */

body.task-login #login-form .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 62px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* Icon wrapper, if Roundcube creates one */
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-append {
    display: flex !important;

    flex: 0 0 64px !important;

    width: 64px !important;
    max-width: 64px !important;
    min-width: 64px !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}


/* Icon block */
body.task-login #login-form .input-group-text {
    display: flex !important;

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

    flex: 0 0 64px !important;

    width: 64px !important;
    max-width: 64px !important;
    min-width: 64px !important;

    height: 62px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   REAL USERNAME + PASSWORD FIELDS

   width:0 is intentional:
   flex-grow then consumes precisely the remaining space.
   ------------------------------------------------------------ */

body.task-login #rcmloginuser,
body.task-login #rcmloginpwd,
body.task-login #login-form .input-group .form-control {
    position: static !important;

    flex: 1 1 0 !important;

    width: 0 !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 62px !important;

    margin: 0 !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    box-sizing: border-box !important;

    transform: none !important;
}


/* Prevent long email addresses forcing the control wider */
body.task-login #rcmloginuser,
body.task-login #rcmloginpwd {
    overflow: hidden !important;
}


/* Login button follows same width */
body.task-login #login-form .btn-primary,
body.task-login #login-form button,
body.task-login #login-form input[type="submit"] {
    position: static !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 600px) {

    body.task-login .jw-clean-page {
        width: 100vw !important;
        min-width: 0 !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        box-sizing: border-box !important;
    }

    body.task-login .jw-clean-card {
        width: 100% !important;
        max-width: 430px !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.task-login #login-form .input-group {
        height: 56px !important;
    }

    body.task-login #login-form .input-group-prepend,
    body.task-login #login-form .input-group-append,
    body.task-login #login-form .input-group-text {
        flex-basis: 54px !important;

        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;

        height: 56px !important;
    }

    body.task-login #rcmloginuser,
    body.task-login #rcmloginpwd,
    body.task-login #login-form .input-group .form-control {
        height: 56px !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        font-size: 15px !important;
    }

    body.task-login #login-form .btn-primary,
    body.task-login #login-form button,
    body.task-login #login-form input[type="submit"] {
        min-height: 56px !important;
    }
}


/* Very small phones */
@media (max-width: 360px) {

    body.task-login .jw-clean-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.task-login #login-form .input-group-prepend,
    body.task-login #login-form .input-group-append,
    body.task-login #login-form .input-group-text {
        flex-basis: 48px !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    body.task-login #rcmloginuser,
    body.task-login #rcmloginpwd,
    body.task-login #login-form .input-group .form-control {
        padding-left: 12px !important;
        padding-right: 12px !important;

        font-size: 14px !important;
    }
}



/* ============================================================
   JIWAKA.NET LOGIN — REAL BRAND LOGO
   Replaces CSS envelope circle
   ============================================================ */

body.task-login .jw-emblem {
    width: 150px !important;
    height: 150px !important;

    margin: 0 auto 18px !important;
    padding: 0 !important;

    display: block !important;

    border: 0 !important;
    border-radius: 50% !important;

    background:
        url("../images/logo.png")
        center center / contain
        no-repeat !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.30) !important;
}


/* Remove old Font Awesome envelope */
body.task-login .jw-emblem::before,
body.task-login .jw-emblem::after,
body.task-login .jw-emblem i {
    display: none !important;
    content: none !important;
}


/* Tablet */
@media (max-width: 700px) {

    body.task-login .jw-emblem {
        width: 125px !important;
        height: 125px !important;
    }

}


/* Small phones */
@media (max-width: 420px) {

    body.task-login .jw-emblem {
        width: 105px !important;
        height: 105px !important;

        margin-bottom: 14px !important;
    }

}