/* Lanetti Roundcube branding — served from /lanetti-brand/ (outside Elastic). */

:root {
  --lanetti-brand: #8552d7;
  --lanetti-brand-600: #7541c6;
  --lanetti-brand-700: #6233a6;
  --lanetti-brand-50: #f4eefb;
  --lanetti-brand-100: #e9ddf7;
  --lanetti-ink: #17191c;
  --lanetti-muted: #5e636e;
  --lanetti-border: #e7e9ef;
  --lanetti-bg: #f7f8fb;
}

/* Login page */
body.task-login {
  color-scheme: light;
  background:
    radial-gradient(1200px 600px at 12% -10%, color-mix(in srgb, var(--lanetti-brand) 22%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, color-mix(in srgb, var(--lanetti-brand-700) 16%, transparent), transparent 55%),
    linear-gradient(165deg, #ffffff 0%, var(--lanetti-bg) 45%, #efe8fa 100%) !important;
}

body.task-login #layout {
  background: transparent !important;
}

body.task-login .formcontainer,
body.task-login #login-form,
body.task-login form#login-form {
  border-radius: 16px;
}

body.task-login #logo,
body.task-login .logo img,
body.task-login img#logo {
  display: block;
  margin: 0.5rem auto 2rem;
  max-height: none;
  height: auto;
  width: min(420px, 67.5vw);
  max-width: 100%;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 12px 32px color-mix(in srgb, var(--lanetti-brand) 22%, transparent));
}

body.task-login #login-form,
body.task-login form#login-form {
  padding-top: 0.5rem;
}



body.task-login input.button.mainaction,
body.task-login button.mainaction,
body.task-login .button.mainaction {
  background: var(--lanetti-brand) !important;
  border-color: var(--lanetti-brand) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--lanetti-brand) 28%, transparent);
}

body.task-login input.button.mainaction:hover,
body.task-login button.mainaction:hover,
body.task-login .button.mainaction:hover {
  background: var(--lanetti-brand-600) !important;
  border-color: var(--lanetti-brand-600) !important;
}

body.task-login input[type="text"]:focus,
body.task-login input[type="email"]:focus,
body.task-login input[type="password"]:focus,
body.task-login select:focus {
  border-color: var(--lanetti-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lanetti-brand) 22%, transparent) !important;
}

body.task-login a {
  color: var(--lanetti-brand-700);
}

/* Logged-in chrome accents */
#layout-menu,
#layout-sidebar {
  border-color: var(--lanetti-border);
}

#mailboxlist li.selected > a,
.menu a.selected {
  color: var(--lanetti-brand-700) !important;
}

/* Elastic's task menu (left bar) is dark #2f3a3f in light and dark mode, so the
   selected item uses light lavender: 7.5:1 on the bar (the old purple was 1.4:1). */
#taskmenu a.selected,
#taskmenu .selected {
  color: #d8c6fb !important;
}

input.button.mainaction,
button.mainaction,
.button.mainaction,
a.button.mainaction {
  background-color: var(--lanetti-brand) !important;
  border-color: var(--lanetti-brand) !important;
  color: #fff !important;
}

input.button.mainaction:hover,
button.mainaction:hover,
.button.mainaction:hover,
a.button.mainaction:hover {
  background-color: var(--lanetti-brand-600) !important;
  border-color: var(--lanetti-brand-600) !important;
}

/* Header logo sizing */
#logo img,
.header .logo img,
#topline .logo img {
  max-height: 28px;
  width: auto;
}

/* Dark mode (Elastic sets html.dark-mode). Accents switch to a light lavender so text
   on dark panels keeps WCAG AA contrast: #c9b0f7 is 6.1:1 to 9.1:1 on Elastic's dark
   backgrounds; the light-mode #6233a6 was 1.4:1 to 2.1:1. Buttons keep white on
   #8552d7 (5.0:1). */
html.dark-mode {
  --lanetti-accent-text: #c9b0f7;
  --lanetti-accent-strong: #d8c6fb;
}

html.dark-mode body.task-login {
  color-scheme: dark;
  background:
    radial-gradient(1200px 600px at 12% -10%, color-mix(in srgb, var(--lanetti-brand) 28%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, color-mix(in srgb, var(--lanetti-brand-700) 30%, transparent), transparent 55%),
    linear-gradient(165deg, #161b1d 0%, #1b1626 50%, #241a35 100%) !important;
}

html.dark-mode body.task-login #logo,
html.dark-mode body.task-login .logo img,
html.dark-mode body.task-login img#logo {
  filter: drop-shadow(0 12px 32px color-mix(in srgb, var(--lanetti-brand) 40%, transparent));
}

html.dark-mode body.task-login a {
  color: var(--lanetti-accent-text);
}

html.dark-mode body.task-login input[type="text"]:focus,
html.dark-mode body.task-login input[type="email"]:focus,
html.dark-mode body.task-login input[type="password"]:focus,
html.dark-mode body.task-login select:focus {
  border-color: var(--lanetti-accent-text) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lanetti-accent-text) 35%, transparent) !important;
}

html.dark-mode #mailboxlist li.selected > a,
html.dark-mode .menu a.selected {
  color: var(--lanetti-accent-strong) !important;
}

html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar {
  border-color: #2f3a3f;
}

/* Keyboard focus stays visible in both modes. */
:focus-visible {
  outline: 2px solid var(--lanetti-brand);
  outline-offset: 2px;
}

html.dark-mode :focus-visible {
  outline-color: var(--lanetti-accent-text);
}

@media (prefers-reduced-motion: reduce) {
  body.task-login #logo,
  body.task-login .logo img,
  body.task-login img#logo {
    filter: none;
  }
}

/* No "About" (Roundcube version/licence page) in the menu. */
#taskmenu a.about,
.menu a.about,
#taskmenu .special-buttons a.about {
  display: none !important;
}