/* BARABD Webmail login — force-override Elastic layout bugs */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

body.task-login {
  min-height: 100vh !important;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
  color: #10253f !important;
  background:
    radial-gradient(900px 480px at 15% -10%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(800px 420px at 95% 10%, rgba(11,110,153,.18), transparent 50%),
    linear-gradient(160deg, #e7f3fa 0%, #c5dff0 50%, #9ec9e3 100%) !important;
  -webkit-font-smoothing: antialiased;
}

body.task-login #layout,
body.task-login #layout-content,
body.task-login .header,
body.task-login #layout > * {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.task-login #layout { min-height: 100vh !important; }
body.task-login #layout-menu,
body.task-login #layout-sidebar,
body.task-login #layout-list,
body.task-login #logo,
body.task-login .popover,
body.task-login #taskmenu { display: none !important; }

body.task-login #layout-content,
body.task-login #layout-content.bara-login {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 28px 16px !important;
  overflow: visible !important;
}

.bara-scene {
  width: min(400px, 94vw) !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
  animation: baraIn .45s ease-out both;
}
@keyframes baraIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.bara-envelope {
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  border-radius: 18px !important;
  padding: 28px 26px 22px !important;
  box-shadow: 0 22px 50px rgba(16, 45, 75, .16) !important;
  overflow: visible !important;
}

.bara-brand { text-align: center; margin: 0 0 20px; }
.bara-brand img {
  width: 96px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 12px !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.bara-brand h1 {
  margin: 2px 0 0 !important;
  line-height: 1.15 !important;
}
.bara-brand p {
  margin: 6px 0 0 !important;
  font-size: 12.5px !important;
  color: #617487 !important;
  font-weight: 500 !important;
}

.bara-pocket { position: relative !important; width: 100% !important; }

/* CRITICAL: kill Elastic absolute login-form positioning */
body.task-login #login-form,
body.task-login form#login-form.propform {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  float: none !important;
}

body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  float: none !important;
  position: relative !important;
}
body.task-login #login-form tr { margin: 0 0 12px !important; }
body.task-login #login-form td.title { display: none !important; }
body.task-login #login-form td.input { position: relative !important; }

body.task-login #login-form input.form-control,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  border: 1px solid #d5dee8 !important;
  border-radius: 12px !important;
  background: #f5f8fb !important;
  padding: 0 14px 0 44px !important;
  color: #10253f !important;
  font: 500 14.5px/1.2 "Plus Jakarta Sans", sans-serif !important;
  box-shadow: none !important;
}
body.task-login #login-form input.form-control::placeholder { color: #8b9aab; }
body.task-login #login-form input.form-control:focus {
  outline: none !important;
  border-color: #82bdd8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(11,110,153,.12) !important;
}

/* compact inline icons — NOT dark cubes */
body.task-login #login-form tr:nth-child(1) td.input::before,
body.task-login #login-form tr:nth-child(2) td.input::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  opacity: .7 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
body.task-login #login-form tr:nth-child(1) td.input::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235b6b7c' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.25a8.25 8.25 0 0115 0'/%3E%3C/svg%3E") !important;
}
body.task-login #login-form tr:nth-child(2) td.input::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235b6b7c' stroke-width='1.8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 10.5V7.875a4.125 4.125 0 10-8.25 0V10.5m-.75 0h9.75c.828 0 1.5.672 1.5 1.5v6.75c0 .828-.672 1.5-1.5 1.5H7.5c-.828 0-1.5-.672-1.5-1.5V12c0-.828.672-1.5 1.5-1.5z'/%3E%3C/svg%3E") !important;
}

body.task-login #login-form p.formbuttons {
  display: block !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  float: none !important;
}
body.task-login #login-form button#rcmloginsubmit,
body.task-login #login-form button.button.mainaction {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #0b6e99 !important;
  background-image: linear-gradient(180deg, #0f82b3, #0b6e99) !important;
  color: #fff !important;
  font: 700 14px/1 "Plus Jakarta Sans", sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  box-shadow: 0 10px 22px rgba(11,110,153,.25) !important;
  float: none !important;
}
body.task-login #login-form button#rcmloginsubmit:hover {
  filter: brightness(1.05);
}

body.task-login #login-footer {
  display: block !important;
  position: static !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #6a7c8d !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: transparent !important;
}

.bara-foot {
  margin: 14px 0 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  color: rgba(16,37,63,.55) !important;
  font-weight: 500 !important;
}

@media (max-width: 480px) {
  .bara-envelope { padding: 24px 18px 18px !important; }
  .bara-brand img { width: 74px !important; }
  .bara-brand h1 { font-size: 19px !important; }
}


/* Remove Elastic JS icon cubes */
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-append,
body.task-login #login-form .input-group-text,
body.task-login #login-form i.icon,
body.task-login #login-form i.input-group-text {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.task-login #login-form .input-group,
body.task-login #login-form .input-group.input-group-lg {
  display: block !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  position: relative !important;
}
body.task-login #login-form .input-group > input.form-control {
  width: 100% !important;
  max-width: none !important;
  border-radius: 12px !important;
  flex: none !important;
}

/* Animations */
.bara-envelope {
  animation: baraCard .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes baraCard {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.bara-brand img {
  animation: baraLogoPop .7s cubic-bezier(.22,1,.36,1) .05s both;
}
@keyframes baraLogoPop {
  from { opacity: 0; transform: translateY(-10px) scale(.9); }
  to { opacity: 1; transform: none; }
}
.bara-brand h1 {
  animation: baraFade .5s ease .15s both;
}
.bara-brand p {
  animation: baraFade .5s ease .22s both;
}
@keyframes baraFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
body.task-login #login-form tr:nth-child(1) {
  animation: baraFade .45s ease .28s both;
}
body.task-login #login-form tr:nth-child(2) {
  animation: baraFade .45s ease .36s both;
}
body.task-login #login-form p.formbuttons {
  animation: baraFade .45s ease .44s both;
}
body.task-login #login-footer,
.bara-foot {
  animation: baraFade .45s ease .52s both;
}
body.task-login #login-form button#rcmloginsubmit {
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
body.task-login #login-form button#rcmloginsubmit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(11,110,153,.32) !important;
}
body.task-login #login-form input.form-control {
  transition: border-color .15s, box-shadow .15s, background .15s, transform .15s !important;
}
body.task-login #login-form input.form-control:focus {
  transform: translateY(-1px);
}

/* Title typography */
.bara-brand h1.bara-title,
.bara-brand h1 {
  margin: 2px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #10253f !important;
  animation: baraFade .5s ease .15s both;
}
.bara-brand h1 .bara-name {
  font-size: 23px !important;
  font-weight: 750 !important;
  letter-spacing: .18em !important;
  text-indent: .18em !important; /* optical center with letter-spacing */
  background: linear-gradient(100deg, #0a3a5c 0%, #0b6e99 55%, #1483b5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.bara-brand h1 .bara-product {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .28em !important;
  text-indent: .28em !important;
  text-transform: uppercase !important;
  color: #6a7f91 !important;
  -webkit-text-fill-color: #6a7f91;
}