/* Cal.net login customization, extending Roundcube Elastic. */
body.task-login {
  --cal-blue: #367fae;
  --cal-blue-deep: #173e64;
  --cal-orange: #f58226;
  --cal-ink: #23344b;
  --cal-muted: #69798b;
  --cal-border: #dce5ed;
  background: #eff4f8;
  color: var(--cal-ink);
}
body.task-login #layout, body.task-login #layout-content {
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
}
body.task-login #layout-content.calnet-login {
  padding: 36px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: left;
}
body.task-login .calnet-shell {
  width: min(100%, 1050px);
  min-height: 625px;
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  border: 1px solid #e5ebf1;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 22px 80px rgba(23, 57, 90, .12), 0 3px 13px rgba(23, 57, 90, .035);
}
body.task-login .calnet-intro {
  background: linear-gradient(148deg, #286995 2%, #173e64 95%);
  color: #fff;
  padding: 65px 55px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body.task-login .calnet-intro::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  right: -275px;
  bottom: -175px;
  box-shadow: 0 0 0 75px rgba(255,255,255,.025), 0 0 0 150px rgba(255,255,255,.017);
  z-index: -1;
}
body.task-login .calnet-kicker, body.task-login .calnet-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}
body.task-login .calnet-kicker { color: #d8e9f7; }
body.task-login .calnet-status-dot {
  width: 8px;
  height: 8px;
  background: var(--cal-orange);
  border-radius: 50%;
  display: inline-block;
  margin-right: 9px;
}
body.task-login .calnet-intro h2 {
  margin: 100px 0 20px;
  color: #fff;
  font-size: clamp(31px, 3.2vw, 43px);
  line-height: 1.19;
  font-weight: 750;
  letter-spacing: -.035em;
}
body.task-login .calnet-intro h2 span { color: #ffad6b; }
body.task-login .calnet-intro p { font-size: 16px; line-height: 1.8; color: #d9e6f1; max-width: 330px; }
body.task-login .calnet-intro-bottom p { margin: 13px 0 0; font-size: 13px; }
body.task-login .calnet-line { width: 42px; height: 3px; display: block; background: var(--cal-orange); border-radius: 2px; }
body.task-login .calnet-form-panel {
  min-width: 0;
  padding: 60px 60px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.task-login .calnet-form-inner { width: 100%; max-width: 355px; margin: auto; }
body.task-login .calnet-brand img { width: 220px; height: auto; max-width: 100%; display: block; }
body.task-login .calnet-header { margin: 32px 0 25px; }
body.task-login .calnet-eyebrow { color: #d66c17; }
body.task-login .calnet-header h2 { margin: 9px 0 9px; font-size: 28px; font-weight: 760; color: #213b54; letter-spacing: -.025em; }
body.task-login .calnet-header p { margin: 0; color: var(--cal-muted); font-size: 14px; line-height: 1.6; }
/* Reset Elastic's absolute-position style on the login logo/form. */
body.task-login #login-form { position: static; top: auto; margin: 0; width: 100%; max-width: none; text-align: left; }
body.task-login #login-form table { width: 100%; }
body.task-login #login-form label { font-size: 13px; font-weight: 650; color: #34495f; margin-bottom: 7px; }
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="email"],
body.task-login #login-form input[type="password"],
body.task-login #login-form .form-control {
  min-height: 46px;
  border: 1px solid var(--cal-border);
  border-radius: 9px;
  background: #fbfcfe;
  box-shadow: none;
  color: var(--cal-ink);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
body.task-login #login-form input:focus { border-color: var(--cal-blue); box-shadow: 0 0 0 3px rgba(54,127,174,.12); outline: 0; }
body.task-login #login-form .formbuttons { margin-top: 22px; }
body.task-login #login-form #rcmloginsubmit,
body.task-login #login-form button[type="submit"] {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 9px;
  background: var(--cal-blue);
  color: white;
  font-weight: 750;
  font-size: 14px;
  box-shadow: 0 5px 12px rgba(54,127,174,.17);
}
body.task-login #login-form #rcmloginsubmit:hover,
body.task-login #login-form button[type="submit"]:hover { background: #286d9c; }
body.task-login .calnet-help { margin: 17px 0 0; font-size: 12px; line-height: 1.6; color: var(--cal-muted); }
body.task-login .calnet-help strong { color: #3f586f; }
body.task-login #login-footer { margin-top: 22px; font-size: 13px; text-align: center; color: var(--cal-muted); }
body.task-login #login-footer .support-link { color: var(--cal-blue); font-weight: 650; }
body.task-login .calnet-copyright { margin: 45px 0 0; text-align: center; color: #9aa6b1; font-size: 11px; }
body.task-login #logo { display: none; }
body.task-login .calnet-login .notice, body.task-login .calnet-login .alert { text-align: left; }
@media (max-width: 800px) {
  body.task-login #layout-content.calnet-login { padding: 16px; }
  body.task-login .calnet-shell { grid-template-columns: 1fr; min-height: auto; max-width: 510px; }
  body.task-login .calnet-intro { display: none; }
  body.task-login .calnet-form-panel { padding: 42px 35px 22px; min-height: 565px; }
  body.task-login .calnet-form-inner { max-width: 370px; }
}
@media (max-width: 420px) {
  body.task-login #layout-content.calnet-login { padding: 0; }
  body.task-login .calnet-shell { border: 0; border-radius: 0; box-shadow: none; min-height: 100dvh; }
  body.task-login .calnet-form-panel { padding: 42px 24px 20px; }
  body.task-login .calnet-header h2 { font-size: 25px; }
}

/* Make native Roundcube login errors visible inside the sign-in panel. */
body.task-login .calnet-form-inner #messagestack {
  position: static !important;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0 0 18px;
  padding: 0;
  transform: none !important;
  inset: auto !important;
  z-index: auto;
  text-align: left;
}
body.task-login .calnet-form-inner #messagestack:empty { display: none; }
body.task-login .calnet-form-inner #messagestack .notice,
body.task-login .calnet-form-inner #messagestack .alert,
body.task-login .calnet-form-inner #messagestack .error,
body.task-login .calnet-form-inner #messagestack .warning {
  position: static;
  display: block;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #f0b4b4;
  background: #fff0f0;
  color: #832525;
  font-size: 13px;
  line-height: 1.5;
  opacity: 1;
  visibility: visible;
}
/** hide the big ugly text page title from the world **/
body.task-login .voice {
    display: none !important;
}
/* Default message - informational (blue) */
#messagestack .notice,
#messagestack .confirmation,
#messagestack .loading {
    background-color: #e8f2fc !important;
    color: #175a9e !important;
    border: 1px solid #b8d7f2 !important;
    border-left: 4px solid #2878b8 !important;
}

/* Error messages - red */
#messagestack .error {
    background-color: #fce8e8 !important;
    color: #a12626 !important;
    border: 1px solid #efb5b5 !important;
    border-left: 4px solid #d93025 !important;
}

/* Warning messages - amber */
#messagestack .warning {
    background-color: #fff5df !important;
    color: #865900 !important;
    border: 1px solid #f0d49a !important;
    border-left: 4px solid #e5a100 !important;
}

/* Shared message appearance */
#messagestack > div {
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
    font-size: 14px;
    font-weight: 500;
}
.popover-header{
 min-width:80px;
}
/* Cal.net login page - readable in light and dark modes */

body.task-login,
body.task-login #layout,
body.task-login #layout-content {
    color: #263238;
}

/* Login form labels */
body.task-login label,
body.task-login .form-group label,
body.task-login .input-group label {
    color: #263238 !important;
}

/* Login form input text */
body.task-login input[type="text"],
body.task-login input[type="email"],
body.task-login input[type="password"] {
    color: #263238 !important;
    background-color: #ffffff !important;
}

/* Placeholder text */
body.task-login input::placeholder {
    color: #667085 !important;
    opacity: 1;
}

/* Prevent inherited dark-mode text styling */
html.dark-mode body.task-login,
html.dark-mode body.task-login label,
html.dark-mode body.task-login .form-group label {
    color: #263238 !important;
}
html.dark-mode body.task-login .login-card,
html.dark-mode body.task-login .login-card label,
html.dark-mode body.task-login .login-card p {
    color: #263238 !important;
}
/* Fix login input text visibility in dark mode */

#login-form input,
#login-form input:focus,
#login-form input:active,
#login-form .form-control {
    color: #263238 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #263238 !important;
    caret-color: #263238 !important;
    opacity: 1 !important;
}

/* Chrome autofill */
#login-form input:-webkit-autofill,
#login-form input:-webkit-autofill:hover,
#login-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #263238 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    caret-color: #263238 !important;
}

/* Login card background */
html.dark-mode #login-form,
html.dark-mode .login-card {
    background-color: #ffffff !important;
}

/* Ensure login text remains dark */
html.dark-mode #login-form,
html.dark-mode #login-form label,
html.dark-mode #login-form p {
    color: #263238 !important;
}

/* Prevent native form controls from switching to dark mode */
html.dark-mode body {
    color-scheme: light;
}