/* =========================================================
   ROKAN HULU - OFFICIAL WEBMAIL LOGIN
   ========================================================= */

html,
body.task-login {
    min-height: 100%;
}

body.task-login {
    background:
        radial-gradient(circle at 50% 25%, rgba(24, 150, 185, .18), transparent 32%),
        radial-gradient(circle at 10% 90%, rgba(0, 120, 95, .12), transparent 28%),
        linear-gradient(135deg, #031525 0%, #06263d 48%, #031a2b 100%);
    color: #fff;
    overflow-x: hidden;
}

/* Background decorative glow */
body.task-login::before {
    content: "";
    position: fixed;
    width: 520px;
    height: 520px;
    left: -280px;
    bottom: -280px;
    border-radius: 50%;
    background: rgba(17, 139, 173, .08);
    box-shadow: 0 0 120px rgba(26, 173, 204, .12);
    pointer-events: none;
}

body.task-login::after {
    content: "";
    position: fixed;
    width: 460px;
    height: 460px;
    right: -260px;
    top: -240px;
    border-radius: 50%;
    background: rgba(0, 125, 93, .07);
    box-shadow: 0 0 120px rgba(24, 185, 137, .10);
    pointer-events: none;
}

/* Main login area */
body.task-login #layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

body.task-login #layout-content {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 42px 42px 34px;
    box-sizing: border-box;

    background: rgba(6, 31, 49, .76);
    border: 1px solid rgba(74, 181, 225, .42);
    border-radius: 22px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .06);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Logo */
body.task-login #logo {
    display: block;
    width: 112px;
    height: 112px;
    object-fit: contain;
    margin: -108px auto 24px;

    filter:
        drop-shadow(0 0 18px rgba(46, 184, 218, .28))
        drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
}

/* Decorative line above branding */
body.task-login #layout-content::before {
    content: "";
    display: block;
    width: 110px;
    height: 2px;
    margin: 0 auto 22px;

    background: linear-gradient(
        90deg,
        transparent,
        #d5a62a,
        #f0cf62,
        #d5a62a,
        transparent
    );

    box-shadow: 0 0 10px rgba(213, 166, 42, .28);
}

/* Official branding */
body.task-login .rh-brand {
    text-align: center;
    margin-bottom: 28px;
}

body.task-login .rh-brand-title {
    margin: 0;
    font-family: Roboto, Arial, sans-serif;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .8px;
    color: #ffffff;
}

body.task-login .rh-brand-subtitle {
    margin: 9px 0 0;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .8px;
    color: #63d56b;
}

/* Login form */
body.task-login #login-form {
    margin: 0;
}

body.task-login #login-form .form-control {
    border-radius: 10px;
}

body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form input[type="email"] {
    height: 48px;
    box-sizing: border-box;

    background: rgba(3, 20, 34, .68);
    border: 1px solid rgba(92, 161, 194, .42);
    color: #fff;

    border-radius: 9px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .16);

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

body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="password"]:focus,
body.task-login #login-form input[type="email"]:focus {
    background: rgba(4, 28, 45, .88);
    border-color: #35aee0;

    box-shadow:
        0 0 0 3px rgba(53, 174, 224, .10),
        0 0 18px rgba(53, 174, 224, .08);

    outline: none;
}

body.task-login #login-form input::placeholder {
    color: rgba(220, 235, 242, .62);
}

/* Login button */
body.task-login #login-form button,
body.task-login #login-form input[type="submit"] {
    min-height: 46px;
    min-width: 145px;
    padding: 0 28px;

    border: 0;
    border-radius: 9px;

    background: linear-gradient(
        100deg,
        #0878d1,
        #078ed0 55%,
        #08b79d
    );

    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;

    box-shadow:
        0 8px 22px rgba(0, 119, 190, .24),
        inset 0 1px 0 rgba(255, 255, 255, .18);

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

body.task-login #login-form button:hover,
body.task-login #login-form input[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);

    box-shadow:
        0 11px 28px rgba(0, 142, 205, .32),
        inset 0 1px 0 rgba(255, 255, 255, .20);
}

body.task-login #login-form button:active,
body.task-login #login-form input[type="submit"]:active {
    transform: translateY(0);
}

/* Footer */
body.task-login #login-footer {
    margin-top: 25px;
    text-align: center;
    color: rgba(210, 225, 233, .56);
    font-size: 12px;
}

body.task-login #login-footer::before {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    margin: 0 auto 15px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(213, 166, 42, .7),
        transparent
    );
}

/* Remove old product information if any */
body.task-login #login-footer .product-info {
    display: none;
}

/* Mobile */
@media (max-width: 600px) {

    body.task-login #layout {
        padding: 28px 16px;
    }

    body.task-login #layout-content {
        max-width: 390px;
        padding: 36px 24px 28px;
        border-radius: 18px;
    }

    body.task-login #logo {
        width: 96px;
        height: 96px;
        margin-top: -88px;
    }

    body.task-login .rh-brand-title {
        font-size: 23px;
    }

    body.task-login .rh-brand-subtitle {
        font-size: 12px;
        letter-spacing: .5px;
    }
}

/* =========================================================
   ROKAN HULU LOGIN - FINAL POSITIONING
   ========================================================= */

body.task-login #layout-content {
    max-width: 460px;
    margin: 125px auto 0;
    padding: 58px 42px 34px;
    position: relative;
}

/* Logo berada DI ATAS card, tidak menimpa judul */
body.task-login #logo {
    position: absolute;
    z-index: 10;

    width: 112px;
    height: 112px;

    left: 50%;
    top: -128px;

    margin: 0;
    transform: translateX(-50%);

    object-fit: contain;

    filter:
        drop-shadow(0 0 18px rgba(46, 184, 218, .30))
        drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
}

/* Garis dekorasi berada tepat di atas judul */
body.task-login #layout-content::before {
    content: "";
    display: block;

    width: 110px;
    height: 2px;

    margin: 0 auto 20px;

    background: linear-gradient(
        90deg,
        transparent,
        #d5a62a,
        #f0cf62,
        #d5a62a,
        transparent
    );

    box-shadow: 0 0 10px rgba(213, 166, 42, .28);
}

/* Branding */
body.task-login .rh-brand {
    text-align: center;
    margin: 0 0 30px;
}

body.task-login .rh-brand-title {
    margin: 0;

    font-family: Roboto, Arial, sans-serif;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: .8px;
    color: #ffffff;
}

body.task-login .rh-brand-subtitle {
    margin: 9px 0 0;

    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .7px;
    color: #63d56b;
}

/* Form dibuat lebih rapih */
body.task-login #login-form {
    margin: 0;
}

body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form input[type="email"] {
    height: 50px;
    border-radius: 9px;
}

/* Tombol login */
body.task-login #login-form button,
body.task-login #login-form input[type="submit"] {
    min-width: 150px;
    min-height: 46px;

    border-radius: 9px;

    background: linear-gradient(
        100deg,
        #0878d1,
        #078ed0 55%,
        #08b79d
    );

    border: 0;

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

    box-shadow:
        0 8px 22px rgba(0, 119, 190, .24),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Footer branding */
body.task-login #login-footer {
    margin-top: 25px;
    text-align: center;
    color: rgba(210, 225, 233, .56);
    font-size: 12px;
}

/* Mobile */
@media (max-width: 600px) {

    body.task-login #layout {
        padding: 100px 16px 30px;
    }

    body.task-login #layout-content {
        max-width: 390px;
        margin: 55px auto 0;
        padding: 48px 24px 28px;
    }

    body.task-login #logo {
        width: 94px;
        height: 94px;
        top: -108px;
    }

    body.task-login .rh-brand-title {
        font-size: 23px;
    }

    body.task-login .rh-brand-subtitle {
        font-size: 12px;
    }
}

/* =========================================================
   ROKAN HULU - OFFICIAL WEBMAIL LOGIN
   ========================================================= */

html,
body.task-login {
    min-height: 100%;
}

body.task-login {
    background:
        radial-gradient(circle at 50% 25%, rgba(24, 150, 185, .18), transparent 32%),
        radial-gradient(circle at 10% 90%, rgba(0, 120, 95, .12), transparent 28%),
        linear-gradient(135deg, #031525 0%, #06263d 48%, #031a2b 100%);
    color: #fff;
    overflow-x: hidden;
}

/* Decorative background */
body.task-login::before {
    content: "";
    position: fixed;
    width: 520px;
    height: 520px;
    left: -280px;
    bottom: -280px;
    border-radius: 50%;
    background: rgba(17, 139, 173, .08);
    box-shadow: 0 0 120px rgba(26, 173, 204, .12);
    pointer-events: none;
}

body.task-login::after {
    content: "";
    position: fixed;
    width: 460px;
    height: 460px;
    right: -260px;
    top: -240px;
    border-radius: 50%;
    background: rgba(0, 125, 93, .07);
    box-shadow: 0 0 120px rgba(24, 185, 137, .10);
    pointer-events: none;
}

/* Main layout */
body.task-login #layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 40px;
    box-sizing: border-box;
}

/* Login card */
body.task-login #layout-content {
    position: relative;
    width: 100%;
    max-width: 460px;

    margin: 55px auto 0;
    padding: 48px 42px 32px;

    box-sizing: border-box;

    background: rgba(6, 31, 49, .76);
    border: 1px solid rgba(74, 181, 225, .42);
    border-radius: 22px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .06);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    text-align: center;
}

/* Logo */
body.task-login #logo {
    position: absolute !important;
    z-index: 10;

    width: 105px !important;
    height: 105px !important;

    left: 50%;
    top: -118px !important;

    margin: 0 !important;

    transform: translateX(-50%);

    object-fit: contain;

    filter:
        drop-shadow(0 0 18px rgba(46, 184, 218, .30))
        drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
}

/* Gold decorative line */
body.task-login #layout-content::before {
    content: "";
    display: block;

    width: 110px;
    height: 2px;

    margin: 0 auto 20px;

    background: linear-gradient(
        90deg,
        transparent,
        #d5a62a,
        #f0cf62,
        #d5a62a,
        transparent
    );

    box-shadow: 0 0 10px rgba(213, 166, 42, .28);
}

/* Branding */
body.task-login .rh-brand {
    text-align: center;
    margin: 0 0 22px;
}

body.task-login .rh-brand-title {
    margin: 0;

    font-family: Roboto, Arial, sans-serif;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: .8px;
    color: #fff;
}

body.task-login .rh-brand-subtitle {
    margin: 9px 0 0;

    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .7px;
    color: #63d56b;
}

/* =========================================================
   OVERRIDE ELASTIC LOGIN FORM
   ========================================================= */

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

    top: 0 !important;

    width: 100% !important;
    max-width: 360px !important;

    margin: 0 auto !important;
}

/* Form table */
body.task-login #login-form table {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
}

body.task-login #login-form tbody {
    display: block !important;
    width: 100% !important;
}

body.task-login #login-form tr {
    display: block !important;
    width: 100% !important;
}

body.task-login #login-form td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;

    vertical-align: middle;
}

/* Input */
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form input[type="email"] {
    width: 100% !important;
    height: 50px !important;

    box-sizing: border-box !important;

    margin: 0 0 10px !important;

    background: rgba(3, 20, 34, .68) !important;

    border: 1px solid rgba(92, 161, 194, .42) !important;

    border-radius: 9px !important;

    color: #fff !important;

    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, .16);
}

body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="password"]:focus,
body.task-login #login-form input[type="email"]:focus {
    background: rgba(4, 28, 45, .88) !important;

    border-color: #35aee0 !important;

    box-shadow:
        0 0 0 3px rgba(53, 174, 224, .10),
        0 0 18px rgba(53, 174, 224, .08) !important;

    outline: none;
}

body.task-login #login-form input::placeholder {
    color: rgba(220, 235, 242, .62);
}

/* Login button */
body.task-login #login-form .formbuttons {
    margin-top: 10px !important;
    text-align: center;
}

body.task-login #login-form input[type="submit"],
body.task-login #login-form button {
    display: inline-block;

    min-width: 150px;
    min-height: 46px;

    padding: 0 28px;

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

    background: linear-gradient(
        100deg,
        #0878d1,
        #078ed0 55%,
        #08b79d
    ) !important;

    color: #fff !important;

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

    box-shadow:
        0 8px 22px rgba(0, 119, 190, .24),
        inset 0 1px 0 rgba(255, 255, 255, .18);

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

body.task-login #login-form input[type="submit"]:hover,
body.task-login #login-form button:hover {
    transform: translateY(-1px);

    filter: brightness(1.08);

    box-shadow:
        0 11px 28px rgba(0, 142, 205, .32),
        inset 0 1px 0 rgba(255, 255, 255, .20);
}

/* Footer */
body.task-login #login-footer {
    margin-top: 22px;

    text-align: center;

    color: rgba(210, 225, 233, .56);

    font-size: 12px;
}

body.task-login #login-footer::before {
    content: "";

    display: block;

    width: 100px;
    height: 1px;

    margin: 0 auto 15px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(213, 166, 42, .7),
        transparent
    );
}

/* Mobile */
@media (max-width: 600px) {

    body.task-login #layout {
        padding: 90px 16px 30px;
    }

    body.task-login #layout-content {
        max-width: 390px;

        margin: 50px auto 0;

        padding: 45px 24px 28px;
    }

    body.task-login #logo {
        width: 94px !important;
        height: 94px !important;

        top: -106px !important;
    }

    body.task-login .rh-brand-title {
        font-size: 23px;
    }

    body.task-login .rh-brand-subtitle {
        font-size: 12px;
    }

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

/* =========================================================
   FINAL POLISH
   ========================================================= */

/* Hilangkan label Username / Password bawaan */
body.task-login #login-form label {
    display: none !important;
}

/* Rapikan posisi icon */
body.task-login #login-form .row {
    position: relative;
}

/* Input lebih compact */
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form input[type="email"] {
    height: 48px !important;
    margin-bottom: 10px !important;
}

/* Card lebih compact */
body.task-login #layout-content {
    padding-top: 44px !important;
    padding-bottom: 27px !important;
}

/* Branding sedikit lebih dekat ke form */
body.task-login .rh-brand {
    margin-bottom: 18px !important;
}

/* Logo sedikit lebih dekat dengan card */
body.task-login #logo {
    top: -112px !important;
}

/* Login button sedikit lebih dekat */
body.task-login #login-form .formbuttons {
    margin-top: 7px !important;
}

/* =========================================================
   REMOVE ELASTIC LABEL BACKGROUND / WHITE BLOCK
   ========================================================= */

/* Area label/icon dibuat transparan */
body.task-login #login-form td.title,
body.task-login #login-form td:first-child {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Hilangkan kotak putih bawaan label */
body.task-login #login-form td.title::before,
body.task-login #login-form td.title::after {
    background: transparent !important;
    box-shadow: none !important;
}

/* Tetap pertahankan area icon */
body.task-login #login-form td.title {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
}

/* Input mulai setelah icon */
body.task-login #login-form td:last-child {
    padding: 0 !important;
}

/* Pastikan tidak ada background putih pada seluruh row */
body.task-login #login-form tr,
body.task-login #login-form td {
    background-color: transparent !important;
}

/* =========================================================
   CLEAN LOGIN FORM
   Remove Elastic icon/label column
   ========================================================= */

/* Hilangkan kolom icon bawaan Elastic */
body.task-login #login-form td.title,
body.task-login #login-form td:first-child {
    display: none !important;
}

/* Input menggunakan seluruh lebar form */
body.task-login #login-form td:last-child {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Pastikan baris tidak menyisakan ruang */
body.task-login #login-form tr {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

/* Input */
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form input[type="email"] {
    display: block !important;

    width: 100% !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    box-sizing: border-box !important;

    background: rgba(3, 20, 34, .72) !important;

    border: 1px solid rgba(92, 161, 194, .45) !important;
    border-radius: 9px !important;

    color: #fff !important;

    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, .16) !important;
}

/* Placeholder */
body.task-login #login-form input::placeholder {
    color: rgba(220, 235, 242, .62) !important;
}

/* Focus */
body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="password"]:focus,
body.task-login #login-form input[type="email"]:focus {
    border-color: #35aee0 !important;

    box-shadow:
        0 0 0 3px rgba(53, 174, 224, .10),
        0 0 18px rgba(53, 174, 224, .08) !important;

    outline: none !important;
}

/* Jarak password */
body.task-login #login-form tr + tr {
    margin-top: 10px !important;
}

/* =========================================================
   LOGIN FORM - CLEAN RESET
   ========================================================= */

/* Reset tabel login Elastic */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Setiap baris menjadi satu field */
body.task-login #login-form tr {
    position: relative !important;
    margin-bottom: 12px !important;
}

/* Hilangkan kolom label/icon Elastic */
body.task-login #login-form td.title {
    display: none !important;
}

/* Kolom input menjadi full width */
body.task-login #login-form td.input {
    display: block !important;
    width: 100% !important;
    height: auto !important;

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

    border: 0 !important;
    background: transparent !important;
}

/* Hilangkan semua pseudo-element bawaan */
body.task-login #login-form td.title::before,
body.task-login #login-form td.title::after,
body.task-login #login-form td.input::before,
body.task-login #login-form td.input::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Input final */
body.task-login #login-form #rcmloginuser,
body.task-login #login-form #rcmloginpwd {
    display: block !important;

    position: static !important;

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

    height: 48px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    box-sizing: border-box !important;

    background: rgba(3, 20, 34, .72) !important;

    border: 1px solid rgba(92, 161, 194, .45) !important;
    border-radius: 9px !important;

    color: #fff !important;

    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, .16) !important;
}

/* Placeholder */
body.task-login #login-form #rcmloginuser::placeholder,
body.task-login #login-form #rcmloginpwd::placeholder {
    color: rgba(220, 235, 242, .62) !important;
}

/* Focus */
body.task-login #login-form #rcmloginuser:focus,
body.task-login #login-form #rcmloginpwd:focus {
    outline: none !important;

    border-color: #35aee0 !important;

    box-shadow:
        0 0 0 3px rgba(53, 174, 224, .10),
        0 0 18px rgba(53, 174, 224, .08) !important;
}

/* Password row */
body.task-login #login-form #rcmloginpwd {
    margin-top: 0 !important;
}

/* Button area */
body.task-login #login-form p.formbuttons {
    display: block !important;

    width: 100% !important;

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

    text-align: center !important;

    background: transparent !important;
}

/* Remove any pseudo-element from button */
body.task-login #rcmloginsubmit::before,
body.task-login #rcmloginsubmit::after {
    display: none !important;
    content: none !important;
}

/* Login button */
body.task-login #login-form #rcmloginsubmit {
    display: inline-flex !important;

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

    width: 150px !important;
    height: 46px !important;

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

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

    background: linear-gradient(
        100deg,
        #0878d1,
        #078ed0 55%,
        #08b79d
    ) !important;

    color: #fff !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    box-shadow:
        0 8px 22px rgba(0, 119, 190, .24),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* =========================================================
   ROKAN HULU LOGIN - FINAL CLEAN OVERRIDE
   ========================================================= */

/* Jangan izinkan pseudo-element Elastic muncul di form login */
body.task-login #login-form *::before,
body.task-login #login-form *::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Form */
body.task-login #login-form {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
}

/* Reset tabel */
body.task-login #login-form table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}

body.task-login #login-form tbody {
    display: table-row-group !important;
    width: 100% !important;
}

body.task-login #login-form tr {
    display: table-row !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hilangkan kolom label Elastic */
body.task-login #login-form td.title,
body.task-login #login-form td:first-child {
    display: none !important;
}

/* Kolom input */
body.task-login #login-form td.input,
body.task-login #login-form td:last-child {
    display: table-cell !important;

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

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

    border: 0 !important;

    background: transparent !important;

    vertical-align: middle !important;
}

/* Hilangkan label yang masih tersisa */
body.task-login #login-form label {
    display: none !important;
}

/* Input */
body.task-login #login-form #rcmloginuser,
body.task-login #login-form #rcmloginpwd {
    display: block !important;

    position: static !important;

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

    height: 48px !important;

    margin: 0 0 12px 0 !important;
    padding: 0 15px !important;

    box-sizing: border-box !important;

    background: rgba(3, 20, 34, .72) !important;

    border: 1px solid rgba(92, 161, 194, .45) !important;
    border-radius: 9px !important;

    color: #fff !important;

    font-size: 14px !important;

    outline: none !important;

    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, .16) !important;
}

/* Placeholder */
body.task-login #login-form #rcmloginuser::placeholder,
body.task-login #login-form #rcmloginpwd::placeholder {
    color: rgba(220, 235, 242, .62) !important;
    opacity: 1 !important;
}

/* Focus */
body.task-login #login-form #rcmloginuser:focus,
body.task-login #login-form #rcmloginpwd:focus {
    border-color: #35aee0 !important;

    box-shadow:
        0 0 0 3px rgba(53, 174, 224, .10),
        0 0 18px rgba(53, 174, 224, .08) !important;
}

/* Area tombol */
body.task-login #login-form .formbuttons {
    display: block !important;

    width: 100% !important;

    margin: 8px 0 0 !important;
    padding: 0 !important;

    text-align: center !important;

    background: transparent !important;
}

/* Tombol Login */
body.task-login #login-form #rcmloginsubmit {
    display: inline-flex !important;

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

    width: 150px !important;
    height: 46px !important;

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

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

    background: linear-gradient(
        100deg,
        #0878d1,
        #078ed0 55%,
        #08b79d
    ) !important;

    color: #fff !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    box-shadow:
        0 8px 22px rgba(0, 119, 190, .24),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* Hover */
body.task-login #login-form #rcmloginsubmit:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}

/* Jangan tampilkan informasi Roundcube */
body.task-login #login-footer {
    display: none !important;
}

/* =========================================================
   FINAL FIX - REMOVE REMAINING LOGIN ARTIFACTS
   ========================================================= */

/* Bersihkan seluruh elemen tabel login */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Kolom label benar-benar hilang */
body.task-login #login-form td.title,
body.task-login #login-form td:first-child {
    display: none !important;

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

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

/* Kolom input */
body.task-login #login-form td.input,
body.task-login #login-form td:last-child {
    display: block !important;

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

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

    position: static !important;

    background: transparent !important;
}

/* Hilangkan seluruh pseudo-element bawaan */
body.task-login #login-form td::before,
body.task-login #login-form td::after,
body.task-login #login-form tr::before,
body.task-login #login-form tr::after,
body.task-login #login-form table::before,
body.task-login #login-form table::after {
    display: none !important;
    content: none !important;

    width: 0 !important;
    height: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Pastikan input tidak punya pseudo-element */
body.task-login #login-form input::before,
body.task-login #login-form input::after {
    display: none !important;
    content: none !important;
}

/* Reset kemungkinan style icon Elastic */
body.task-login #login-form .icon,
body.task-login #login-form .icon.user,
body.task-login #login-form .icon.pass {
    display: none !important;
}

/* Reset spacing row */
body.task-login #login-form tr {
    margin: 0 0 12px !important;
    padding: 0 !important;
}

/* Input tetap rapi */
body.task-login #login-form #rcmloginuser,
body.task-login #login-form #rcmloginpwd {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    box-sizing: border-box !important;

    background: rgba(3, 20, 34, .72) !important;

    border: 1px solid rgba(92, 161, 194, .45) !important;
    border-radius: 9px !important;

    color: #fff !important;
}

/* Jarak antar input */
body.task-login #login-form tr + tr {
    margin-top: 12px !important;
}

/* =========================================================
   ROKAN HULU - COMPOSE PAGE
   Clean Government Mail UI
   ========================================================= */

/* Area utama compose */
body.task-mail.action-compose #layout-content {
    background: #071923 !important;
}

/* Header compose */
body.task-mail.action-compose #compose-headers {
    background: rgba(5, 25, 38, .92) !important;
    border-bottom: 1px solid rgba(92, 161, 194, .20) !important;
}

/* Label From / To / Subject */
body.task-mail.action-compose #compose-headers label,
body.task-mail.action-compose .compose-headers label {
    color: rgba(220, 235, 242, .82) !important;
    font-weight: 500 !important;
}

/* Semua input header compose */
body.task-mail.action-compose #compose-headers input,
body.task-mail.action-compose #compose-headers textarea,
body.task-mail.action-compose .compose-headers input,
body.task-mail.action-compose .compose-headers textarea {
    background: rgba(3, 20, 34, .78) !important;

    border: 1px solid rgba(92, 161, 194, .38) !important;
    border-radius: 7px !important;

    color: #eaf6fb !important;

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, .15) !important;
}

/* Focus */
body.task-mail.action-compose #compose-headers input:focus,
body.task-mail.action-compose #compose-headers textarea:focus {
    border-color: #35aee0 !important;

    box-shadow:
        0 0 0 2px rgba(53, 174, 224, .10) !important;

    outline: none !important;
}

/* =========================================================
   TO / CC / BCC
   ========================================================= */

body.task-mail.action-compose #_to,
body.task-mail.action-compose #_cc,
body.task-mail.action-compose #_bcc {
    min-height: 38px !important;
}

/* Recipient container */
body.task-mail.action-compose .recipient-input {
    min-height: 38px !important;

    background: rgba(3, 20, 34, .78) !important;

    border: 1px solid rgba(92, 161, 194, .38) !important;
    border-radius: 7px !important;
}

/* =========================================================
   SUBJECT
   ========================================================= */

body.task-mail.action-compose #compose-subject {
    width: 100% !important;
}

body.task-mail.action-compose #compose-subject input {
    width: 100% !important;
    min-height: 40px !important;

    box-sizing: border-box !important;

    padding: 8px 12px !important;
}

/* =========================================================
   MESSAGE BODY
   ========================================================= */

/* Composer area */
body.task-mail.action-compose #composebodycontainer {
    background: #071923 !important;

    border-top: 1px solid rgba(92, 161, 194, .12) !important;
}

/* Textarea mode */
body.task-mail.action-compose #composebody {
    background: #071923 !important;

    color: #eaf6fb !important;
}

/* TinyMCE */
body.task-mail.action-compose .tox-tinymce {
    border: 1px solid rgba(92, 161, 194, .28) !important;
    border-radius: 8px !important;

    overflow: hidden !important;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

body.task-mail.action-compose .mce-toolbar,
body.task-mail.action-compose .tox-toolbar,
body.task-mail.action-compose .tox-toolbar__primary {
    background: #0b2433 !important;

    border-color: rgba(92, 161, 194, .18) !important;
}

/* =========================================================
   SEND BUTTON
   ========================================================= */

body.task-mail.action-compose #rcmbtn107,
body.task-mail.action-compose .button.mainaction,
body.task-mail.action-compose button.mainaction {
    background: linear-gradient(
        100deg,
        #0878d1,
        #078ed0 55%,
        #08b79d
    ) !important;

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

    color: #fff !important;

    font-weight: 700 !important;

    box-shadow:
        0 6px 18px rgba(0, 119, 190, .20) !important;

    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease !important;
}

body.task-mail.action-compose #rcmbtn107:hover,
body.task-mail.action-compose .button.mainaction:hover,
body.task-mail.action-compose button.mainaction:hover {
    transform: translateY(-1px) !important;

    filter: brightness(1.08) !important;

    box-shadow:
        0 9px 24px rgba(0, 142, 205, .28) !important;
}

/* =========================================================
   RIGHT OPTIONS PANEL
   ========================================================= */

body.task-mail.action-compose #compose-options {
    background: #0a202d !important;

    border-left: 1px solid rgba(92, 161, 194, .20) !important;
}

/* Panel title */
body.task-mail.action-compose #compose-options .panel-title,
body.task-mail.action-compose #compose-options h2,
body.task-mail.action-compose #compose-options h3 {
    color: #eaf6fb !important;
}

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

@media (max-width: 700px) {

    body.task-mail.action-compose #compose-headers {
        padding: 10px !important;
    }

    body.task-mail.action-compose #compose-headers input,
    body.task-mail.action-compose #compose-headers textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.task-mail.action-compose #compose-options {
        border-left: 0 !important;
    }
}


/* =========================================================
   ROKAN HULU - FORGOT PASSWORD / WHATSAPP FOOTER
   ========================================================= */

body.task-login #login-footer .rh-forgot-password {
    margin-bottom: 6px;
    color: rgba(235, 242, 246, .82);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .15px;
}

body.task-login #login-footer .rh-contact-admin {
    color: rgba(210, 225, 233, .58);
    font-size: 12px;
    line-height: 1.6;
}

body.task-login #login-footer .rh-whatsapp-link {
    display: inline-block;
    margin-top: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(72, 210, 118, .38);
    border-radius: 7px;
    background: rgba(37, 211, 102, .08);
    color: #63e28a;
    font-weight: 700;
    text-decoration: none;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .18s ease;
}

body.task-login #login-footer .rh-whatsapp-link:hover {
    background: rgba(37, 211, 102, .16);
    border-color: rgba(72, 210, 118, .68);
    color: #8af0a8;
    box-shadow: 0 5px 18px rgba(37, 211, 102, .12);
    transform: translateY(-1px);
}

body.task-login #login-footer .rh-whatsapp-link:active {
    transform: translateY(0);
}

@media (max-width: 600px) {
    body.task-login #login-footer .rh-whatsapp-link {
        padding: 6px 11px;
    }
}


/* =========================================================
   FINAL FIX - SHOW ROKAN HULU LOGIN FOOTER
   ========================================================= */

body.task-login #layout-content #login-footer {
    display: block !important;
    margin-top: 18px !important;
    padding: 0 !important;
    text-align: center !important;
    color: rgba(210, 225, 233, .70) !important;
    font-size: 12px !important;
}

body.task-login #layout-content #login-footer::before {
    content: "" !important;
    display: block !important;
    width: 100px !important;
    height: 1px !important;
    margin: 0 auto 12px !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(213, 166, 42, .70),
        transparent
    ) !important;
}

body.task-login #layout-content #login-footer .rh-forgot-password {
    display: block !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    background: transparent !important;
    color: rgba(235, 242, 246, .85) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body.task-login #layout-content #login-footer .rh-contact-admin {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: rgba(210, 225, 233, .62) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

body.task-login #layout-content #login-footer .rh-whatsapp-link {
    display: inline-block !important;
    margin: 4px 0 0 !important;
    padding: 4px 10px !important;
    background: rgba(37, 211, 102, .08) !important;
    border: 1px solid rgba(72, 210, 118, .38) !important;
    border-radius: 6px !important;
    color: #63e28a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

body.task-login #layout-content #login-footer .rh-whatsapp-link:hover {
    background: rgba(37, 211, 102, .16) !important;
    border-color: rgba(72, 210, 118, .68) !important;
    color: #8af0a8 !important;
}


/* =========================================================
   FINAL - FORGOT PASSWORD WHATSAPP LINK
   ========================================================= */

body.task-login #layout-content #login-footer .rh-forgot-password {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(210, 225, 233, .72) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color .2s ease, text-shadow .2s ease !important;
}

body.task-login #layout-content #login-footer .rh-forgot-password:hover {
    color: #63e28a !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-shadow: 0 0 10px rgba(37, 211, 102, .18);
}