/* Mutiara Abadi Mail — clean login layout */
:root {
  --ma-navy: #17365d;
  --ma-navy-dark: #102844;
  --ma-gold: #c6a15b;
  --ma-text: #253449;
  --ma-border: #d5deea;
}

body.task-login {
  min-height: 100vh;
  background: linear-gradient(135deg, #eaf0f8 0%, #f8fafc 55%, #e8eef7 100%) !important;
  color: var(--ma-text);
}

body.task-login #layout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

body.task-login #layout-content {
  position: static !important;
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 32px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  background: #fff !important;
  border: 1px solid #e1e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgb(23 54 93 / 12%) !important;
}

body.task-login #logo {
  position: static !important;
  top: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 175px !important;
  max-height: 85px !important;
  margin: 0 auto 28px !important;
  object-fit: contain;
}

body.task-login #login-form {
  position: static !important;
  top: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.task-login #login-form table,
body.task-login #login-form tbody {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
}

body.task-login #login-form tr {
  display: block !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
}

body.task-login #login-form td,
body.task-login #login-form td.title,
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;
  text-align: left !important;
  box-sizing: border-box !important;
}

body.task-login #login-form td.title {
  margin-bottom: 7px !important;
  color: #34445a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.task-login #login-form td.title label {
  display: block !important;
  margin: 0 !important;
}

body.task-login #login-form #rcmloginuser,
body.task-login #login-form #rcmloginpwd {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  color: var(--ma-text) !important;
  background: #fff !important;
  border: 1px solid var(--ma-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 15px !important;
}

body.task-login #login-form #rcmloginuser:focus,
body.task-login #login-form #rcmloginpwd:focus {
  border-color: var(--ma-navy) !important;
  outline: 3px solid rgb(23 54 93 / 10%) !important;
}

body.task-login #login-form p.formbuttons {
  display: block !important;
  width: 100% !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
}

body.task-login #login-form #rcmloginsubmit {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  color: #fff !important;
  background: var(--ma-navy) !important;
  border: 1px solid var(--ma-navy) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

body.task-login #login-form #rcmloginsubmit:hover {
  background: var(--ma-navy-dark) !important;
  border-color: var(--ma-navy-dark) !important;
}

body.task-login #login-footer {
  display: block !important;
  margin-top: 20px !important;
  color: #7b8798 !important;
  font-size: 12px !important;
  text-align: center !important;
}

body.task-login a {
  color: var(--ma-navy);
}

@media (max-width: 480px) {
  body.task-login #layout {
    padding: 16px !important;
  }

  body.task-login #layout-content {
    padding: 26px 22px !important;
  }
}


/* Hilangkan ikon dekoratif bawaan yang bertumpuk di atas input login */
body.task-login #login-form td.title::before,
body.task-login #login-form td.input::before,
body.task-login #login-form label::before,
body.task-login #login-form #rcmloginuser::before,
body.task-login #login-form #rcmloginpwd::before {
  content: none !important;
  display: none !important;
}


/* Fix ikon dekoratif form login */
body.task-login #login-form .icon,
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-text,
body.task-login #login-form td.title::before,
body.task-login #login-form td.input::before {
    display: none !important;
    content: none !important;
}
body.task-login #login-form td.title,
body.task-login #login-form td.input {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}