/* v1.7.0: square brand icon in nav; watermark is configured separately. */
/* Ring Hosting x Roundcube Elastic — edit brand tokens here. */
:root {
  --rh-ink: #0d1830;
  --rh-ink-soft: #182947;
  --rh-deep: #081224;
  --rh-primary: #5266ed;
  --rh-primary-hover: #394dd1;
  --rh-mint: #00bfa6;
  --rh-text: #17223b;
  --rh-muted: #79839a;
  --rh-line: #e8eaf2;
  --rh-paper: #ffffff;
  --rh-canvas: #f5f7fc;
  --rh-radius: 15px;
}
/* Login: separated from the rest of Roundcube. No JS or external fonts. */
body.task-login { background: var(--rh-deep); color: var(--rh-text); }
body.task-login #layout { display:block !important; height: auto !important; min-height: 100vh; overflow: visible !important; background: var(--rh-deep); }
body.task-login #layout-content { display:block !important; width:100%; height:auto; min-height:100vh; overflow: visible !important; padding:0; margin:0; background:transparent !important; text-align:left !important; }
body.task-login .rh-login-shell { position:relative; display:grid; grid-template-columns: 1fr 1fr; width:100%; min-height:100vh; }
body.task-login .rh-promo { display:flex; position:relative; flex-direction:column; justify-content:space-between; gap:4rem; padding: clamp(2rem,5vw,5rem) clamp(2rem,5vw,6rem); background: radial-gradient(ellipse 80% 60% at 75% 60%,rgba(76,91,194,.21),transparent 74%),radial-gradient(ellipse 60% 55% at 0% 4%,rgba(0,191,166,.10),transparent 82%),linear-gradient(150deg,#111f38,#091529 76%); overflow:hidden; isolation:isolate; color:#fff; }
body.task-login .rh-promo:after { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(208,229,255,.24) .75px,transparent .75px); background-size:22px 22px; opacity:.15; pointer-events:none; z-index:-1; }
.rh-wordmark {
  display: block;
  position: relative;
  z-index: 2;
  width: min(360px, 100%);
  height: 52px;
  background: url('../images/logo-white.png') left center / contain no-repeat;
  text-decoration: none !important;
}
.rh-wordmark-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rh-promo-copy { position:relative; z-index:2; max-width:640px; }
.rh-kicker { display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; font-weight:750; letter-spacing:.23em; color:#b7c8ee; }
.rh-kicker-dot,.rh-status-dot,.rh-card-tag-dot { display:inline-block; background:var(--rh-mint); border-radius:100%; width:8px; height:8px; box-shadow:0 0 0 5px rgba(0,191,166,.14); }
.rh-promo h2 { margin: 1.5rem 0 1.25rem; letter-spacing:-.065em; line-height:1.075; font-size:clamp(2.8rem,5vw,5.9rem); font-weight:750; color:#fff; }
.rh-promo h2 em { font-style:normal; background:linear-gradient(110deg,#70f3d7,#9aa6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rh-promo-copy>p { max-width:510px; margin:0 0 2.2rem; color:#b8c3d9; font-size:1.06rem; line-height:1.8; }
.rh-promo-features { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.rh-promo-features > .rh-feature { box-sizing:border-box; display:inline-flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:.6rem; min-height:42px; border:1px solid rgba(202,218,255,.18); border-radius:100px; padding:.55rem 1rem; background:rgba(255,255,255,.055); color:#e0e8f7; font-weight:550; font-size:.85rem; line-height:1; backdrop-filter:blur(8px); white-space:nowrap; }
.rh-promo-features .rh-feature-label { display:block; line-height:1.2; white-space:nowrap; }
.rh-promo-features svg { display:block; flex:0 0 17px; align-self:center; width:17px; height:17px; color:#62e4cc; }
.rh-promo-foot { display:flex; align-items:center; gap:1rem; color:#9ca9c3; font-size:.82rem; z-index:2; }
.rh-orbit { position:absolute; border-radius:50%; pointer-events:none; border:1px solid rgba(107,157,218,.11); }
.rh-orbit-one { right:-25vw; top:15vh; width:54vw; height:54vw; max-width:1000px; max-height:1000px; }
.rh-orbit-two { right:-14vw; top:26vh; width:34vw; height:34vw; max-width:650px; max-height:650px; border-color:rgba(0,191,166,.15); }
body.task-login .rh-auth { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; padding:clamp(1.5rem,5vw,5rem); background:var(--rh-canvas); }
body.task-login .rh-login-card { width:100%; max-width:480px; margin:auto; padding:clamp(2rem,3.6vw,3.6rem); border:1px solid #e9edf6; border-radius:28px; box-shadow:0 22px 70px rgba(25,41,78,.06),0 2px 9px rgba(25,41,78,.02); background:var(--rh-paper); }
body.task-login .rh-logo-box { display:flex; align-items:center; min-height:55px; margin-bottom:2.15rem; }
body.task-login #logo { display:block; position:static !important; width:230px; max-width:100%; max-height:62px; height:auto; margin:0 !important; }
.rh-auth-heading h2 { color:var(--rh-ink); font-size:clamp(1.75rem,2.5vw,2.35rem); font-weight:800; line-height:1.16; letter-spacing:-.048em; margin:0 0:.8rem; }
.rh-accent { color:var(--rh-mint); }
.rh-auth-heading p { color:#718096; font-size:.99rem; line-height:1.6; margin:0 0:1.8rem; }
body.task-login #login-form { position:static !important; margin:0 !important; width:100% !important; max-width:none !important; text-align:left !important; }
body.task-login #login-form table { width:100%; }
body.task-login #login-form label { color:#33425e; font-weight:650; font-size:.85rem; margin-bottom:.45rem; }
body.task-login #login-form input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]),body.task-login #login-form select,body.task-login #login-form .form-control { min-height:52px; width:100%; color:#1b2943; border:1px solid #dbe1ed; border-radius:12px; background:#f8faff; padding:.8rem 1rem; box-shadow:none; font-size:.96rem; transition:border-color .2s,box-shadow .2s; }
body.task-login #login-form input:focus, body.task-login #login-form .form-control:focus {
  border-color: var(--rh-primary) !important;
  box-shadow: 0 0 0 3px rgba(82,102,237,.12) !important;
  outline: none;
  color: #17223b !important;
  background-color: #f8faff !important;
  -webkit-text-fill-color: #17223b !important;
  caret-color: #17223b !important;
}
/* Elastic's dark mode must not turn text white on the bright login card. */
html body.task-login .rh-auth,
html.dark-mode body.task-login .rh-auth,
html.dark-mode body.task-login .rh-login-card { color-scheme: light; }
html body.task-login #login-form input:not([type=hidden]):not([type=checkbox]):not([type=submit]),
html.dark-mode body.task-login #login-form input:not([type=hidden]):not([type=checkbox]):not([type=submit]),
html body.task-login #login-form select,
html.dark-mode body.task-login #login-form select {
  color: #17223b !important;
  -webkit-text-fill-color: #17223b !important;
  caret-color: #17223b !important;
  background-color: #f8faff !important;
}
body.task-login #login-form input::placeholder,
html.dark-mode body.task-login #login-form input::placeholder {
  color: #69788d !important;
  -webkit-text-fill-color: #69788d !important;
  opacity: 1;
}
body.task-login #login-form input:-webkit-autofill,
body.task-login #login-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #17223b !important;
  -webkit-box-shadow: 0 0 0 1000px #f8faff inset !important;
  caret-color: #17223b !important;
}

body.task-login #login-form .row { margin-bottom:.95rem; }
body.task-login #login-form .form-group { margin-bottom:.95rem; }
body.task-login #rcmloginsubmit,body.task-login #login-form .formbuttons button,body.task-login #login-form input[type=submit] { display:block; width:100%; min-height:54px; border:0 !important; border-radius:12px !important; background:linear-gradient(100deg,#5165ec,#6976e8) !important; color:#fff !important; box-shadow:0 10px 23px rgba(82,102,237,.20) !important; font-weight:750; text-shadow:none; font-size:1rem; transition:transform .16s,filter .16s; }
body.task-login #rcmloginsubmit:hover,body.task-login #login-form .formbuttons button:hover { filter:brightness(.93); transform:translateY(-1px); }
body.task-login #login-footer { font-size:.8rem; color:#8b96aa; text-align:center; margin-top:.75rem; }
body.task-login #login-footer>div { background:transparent; margin-top:.5rem; padding:0; }
.rh-login-bottom { display:flex; justify-content:center; flex-wrap:wrap; gap:.3rem; padding-top:1.4rem; margin-top:1.6rem; border-top:1px solid #edf0f5; font-size:.82rem; color:#8c98a9; }
.rh-login-bottom a,.rh-legal a { color:var(--rh-primary) !important; text-decoration:none !important; font-weight:700; }
.rh-login-bottom a:hover,.rh-legal a:hover { text-decoration:underline !important; }
.rh-legal { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:1.2rem; color:#8b97aa; font-size:.76rem; }
.rh-legal a { color:#7f8ba2 !important; font-weight:500; }

/* Roundcube/Elastic inserts a Bootstrap icon before each login field. The old
   100%-width input rule wrapped it onto its own line. Keep it INSIDE the field. */
body.task-login #login-form .input-group {
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  width:100%;
  min-width:0;
}
body.task-login #login-form .input-group > .input-group-prepend {
  position:absolute !important;
  display:flex !important;
  justify-content:center;
  align-items:center;
  z-index:2;
  top:0;
  bottom:0;
  left:0;
  width:49px;
  min-width:49px;
  height:100%;
  padding:0;
  margin:0 !important;
  pointer-events:none;
}
body.task-login #login-form .input-group > .input-group-prepend > .input-group-text,
body.task-login #login-form .input-group > .input-group-prepend > .icon {
  position:static !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#66788e !important;
  line-height:1 !important;
  font-size:1rem !important;
}
body.task-login #login-form .input-group > .input-group-prepend .icon::before {
  font-size:1rem !important;
  line-height:1 !important;
  margin:0 !important;
  vertical-align:middle;
}
body.task-login #login-form .input-group > input.form-control,
body.task-login #login-form .input-group > select.form-control {
  display:block;
  flex:1 1 auto;
  width:100% !important;
  min-width:0;
  margin:0 !important;
  padding-left:3.2rem !important;
  border-radius:12px !important;
}
/* Label and icon darken together on focus; no extra JS needed. */
body.task-login #login-form .input-group:focus-within > .input-group-prepend > .input-group-text,
body.task-login #login-form .input-group:focus-within > .input-group-prepend > .icon {
  color:#5266ed !important;
}


/* v1.5: Larger desktop login, better text contrast and responsive mobile layout. */
body.task-login { margin:0 !important; }
body.task-login #layout,
body.task-login #layout-content { box-sizing:border-box; width:100% !important; max-width:none !important; min-width:0; border:0; border-radius:0 !important; }
body.task-login .rh-login-shell,
body.task-login .rh-login-shell * { box-sizing:border-box; }

body.task-login .rh-promo { padding:clamp(2.25rem,4.6vw,5.4rem) clamp(2rem,4.6vw,6rem); gap:2.5rem; }
body.task-login .rh-promo-copy { max-width:750px; }
body.task-login .rh-kicker { font-size:.875rem; letter-spacing:.20em; color:#d2ddf3; }
body.task-login .rh-promo h2 { font-size:clamp(3.5rem,5.3vw,6.8rem); line-height:1.075; letter-spacing:-.065em; margin:1.55rem 0 1.3rem; }
body.task-login .rh-promo-copy>p { font-size:1.14rem; line-height:1.72; max-width:560px; color:#d4dff1; margin-bottom:2.3rem; }
body.task-login .rh-promo-features { gap:.85rem; }
body.task-login .rh-promo-features>.rh-feature { min-height:46px; padding:.72rem 1.15rem; font-size:.92rem; color:#f1f5fd; background:rgba(255,255,255,.085); border-color:rgba(222,232,255,.27); gap:.7rem; }
body.task-login .rh-promo-features svg { width:19px; height:19px; flex-basis:19px; }
body.task-login .rh-promo-foot { color:#c0cee5; font-size:.91rem; }
body.task-login .rh-auth { padding:clamp(1.6rem,3.8vw,4.4rem); background:#f4f7fd; }
body.task-login .rh-login-card { max-width:570px; padding:clamp(2.4rem,3.5vw,4rem); border-radius:30px; box-shadow:0 26px 80px rgba(25,41,78,.09),0 2px 12px rgba(25,41,78,.025); }
body.task-login .rh-logo-box { margin-bottom:2.55rem; min-height:62px; }
body.task-login .rh-brand-logo { display:block; width:min(100%,285px); height:62px; background:url('../images/logo.svg') left center / contain no-repeat; }
body.task-login .rh-auth-heading h2 { font-size:clamp(2rem,2.6vw,2.65rem); margin-bottom:.75rem; line-height:1.16; }
body.task-login .rh-auth-heading p { font-size:1.065rem; color:#4e607b; margin-bottom:2rem; line-height:1.55; }
body.task-login #login-form input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]),
body.task-login #login-form select,
body.task-login #login-form .form-control { min-height:62px; border-color:#cdd6e5; background:#f8faff; font-size:1.055rem; }
html body.task-login #login-form input:not([type=hidden]):not([type=checkbox]):not([type=submit]),
html.dark-mode body.task-login #login-form input:not([type=hidden]):not([type=checkbox]):not([type=submit]),
html body.task-login #login-form select,
html.dark-mode body.task-login #login-form select { background-color:#f8faff !important; }
body.task-login #login-form input::placeholder,
html.dark-mode body.task-login #login-form input::placeholder { color:#53647d !important; -webkit-text-fill-color:#53647d !important; }
body.task-login #login-form .input-group > .input-group-prepend { width:57px; min-width:57px; }
body.task-login #login-form .input-group > input.form-control,
body.task-login #login-form .input-group > select.form-control { padding-left:3.6rem !important; }
body.task-login #login-form .input-group > .input-group-prepend > .input-group-text,
body.task-login #login-form .input-group > .input-group-prepend > .icon { color:#53647d !important; }
body.task-login #rcmloginsubmit,
body.task-login #login-form .formbuttons button,
body.task-login #login-form input[type=submit] { min-height:62px; font-size:1.075rem; background:linear-gradient(108deg,#3f69ec 0%,#5666ed 48%,#7669e7 100%) !important; box-shadow:0 13px 26px rgba(82,102,237,.21) !important; }
body.task-login #rcmloginsubmit:focus-visible,
body.task-login #login-form .formbuttons button:focus-visible { outline:3px solid #172f73 !important; outline-offset:3px; }
body.task-login .rh-login-bottom { font-size:.91rem; color:#586981; border-color:#e5eaf3; }
body.task-login .rh-legal,
body.task-login .rh-legal a { font-size:.82rem; color:#52627a !important; }

/* Stacked layout: short branded header, form directly below, no empty area above card. */
@media(max-width:1050px) {
  body.task-login #layout,body.task-login #layout-content { min-height:100vh; min-height:100dvh; }
  body.task-login .rh-login-shell { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); min-height:100vh; min-height:100dvh; }
  body.task-login .rh-promo { justify-content:center; min-height:120px; padding:1.5rem 2rem 2.75rem; gap:0; overflow:hidden; }
  body.task-login .rh-wordmark { width:min(310px,80%); height:54px; }
  body.task-login .rh-promo-copy,body.task-login .rh-promo-foot,body.task-login .rh-orbit { display:none !important; }
  body.task-login .rh-auth { position:relative; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; min-height:0; gap:0; padding:0 1.5rem 1.5rem; }
  body.task-login .rh-login-card { position:relative; z-index:1; margin:-24px auto 0; width:100%; max-width:540px; padding:clamp(2rem,4vw,3rem); border-radius:25px; }
  body.task-login .rh-logo-box { display:none !important; }
  body.task-login .rh-legal { margin:auto auto 0; padding:1.5rem .5rem .25rem; line-height:1.5; }
}
@media(max-width:600px) {
  body.task-login .rh-promo { min-height:115px; padding:1.2rem 1.25rem 2.5rem; }
  body.task-login .rh-wordmark { width:min(268px,85vw); height:49px; }
  body.task-login .rh-auth { padding:0 1rem 1.25rem; }
  body.task-login .rh-login-card { margin:-22px auto 0; max-width:440px; padding:clamp(1.65rem,6vw,2.3rem); border-radius:22px; }
  body.task-login .rh-auth-heading h2 { font-size:clamp(1.85rem,6.8vw,2.25rem); margin-bottom:.6rem; letter-spacing:-.045em; }
  body.task-login .rh-auth-heading p { font-size:1rem; line-height:1.5; margin-bottom:1.65rem; }
  body.task-login #login-form input:not([type="hidden"]):not([type="checkbox"]):not([type="submit"]),
  body.task-login #login-form select,
  body.task-login #login-form .form-control { min-height:58px; font-size:1rem; border-radius:13px; }
  body.task-login #rcmloginsubmit,
  body.task-login #login-form .formbuttons button,
  body.task-login #login-form input[type=submit] { min-height:58px; font-size:1rem; }
  body.task-login .rh-login-bottom { padding-top:1.2rem; margin-top:1.35rem; font-size:.85rem; }
  body.task-login .rh-legal { margin-top:auto; padding-top:1.5rem; gap:.45rem 1rem; justify-content:center; text-align:center; }
}
@media(max-width:365px) {
  body.task-login .rh-auth { padding-left:.65rem; padding-right:.65rem; }
  body.task-login .rh-login-card { padding:1.6rem 1.2rem; }
  body.task-login .rh-auth-heading h2 { font-size:1.78rem; }
  body.task-login .rh-login-bottom { font-size:.8rem; }
}
@media(prefers-reduced-motion:reduce) { body.task-login #login-form input, body.task-login #rcmloginsubmit { transition:none !important; } }
@media print { body.task-login .rh-promo,.rh-legal,.rh-login-bottom { display:none; } }

/* v1.6: Bootstrap/Elastic gives focused .form-control a higher stacking level.
   Its opaque background was covering the decorative icon. Keep the icon layer
   above the input even when focused or filled by the password manager. */
body.task-login #login-form .input-group > .input-group-prepend {
  z-index: 10 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.task-login #login-form .input-group > .input-group-prepend .input-group-text,
body.task-login #login-form .input-group > .input-group-prepend .icon {
  visibility: visible !important;
  opacity: 1 !important;
}
body.task-login #login-form .input-group:focus-within > .input-group-prepend .input-group-text,
body.task-login #login-form .input-group:focus-within > .input-group-prepend .icon {
  color: #455ad9 !important;
}

/* Post-login: optically centered brand symbol in the narrow Elastic taskbar.
   No global sizing changes to the mail interface. */
body:not(.task-login) #layout-menu .popover-header img#logo {
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  max-width: 100%;
  max-height: 52px;
  padding: 3px;
  object-fit: contain;
}
@media (max-width: 480px) {
  body:not(.task-login) #layout-menu .popover-header img#logo {
    width: 54px;
    height: 54px;
    max-height: 54px;
  }
}

/* v1.8: icon-256.png has solid corners. Mask them without altering the source PNG.
   This applies only to the narrow left taskbar + mobile popover brand logo. */
body:not(.task-login) #layout-menu .popover-header img#logo {
  padding: 0 !important;
  border-radius: 22% !important;
  clip-path: inset(0 round 22%);
  object-fit: cover;
}