/* ibenta_login: the Ibenta look for Roundcube's login page (elastic skin).
   The login page is always dark, like portal.ibenta.no, whatever the
   system colour scheme; the mailbox behind it still follows the user's
   preference. Colour tokens are ibenta.no's dark values
   (apps/main-site/app/assets/css/main.css). */

:root {
  --ib-base: #070E1A;
  --ib-surface: #0E1A2C;
  --ib-raised: #172235;
  --ib-accent: #5282FF;
  --ib-accent-strong: #3964DC;
  --ib-strong: #F4EFE4;
  --ib-text: #EEE9DF;
  --ib-muted: #8599B6;
  --ib-border: #1E2D42;
  --ib-base-0: rgba(7, 14, 26, 0);
  --ib-grid: rgba(255, 255, 255, 0.05);
  --ib-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Page: a column that centres the form and pushes the footer down.
   The skin sizes html, body and #layout to the viewport and hides overflow
   (the mailbox scrolls inside its panes). The footer sits inside #layout,
   so on a phone it was clipped at the bottom and the page would not scroll.
   Here the page grows with its content and the document scrolls. */
body.task-login {
  height: auto;
  min-height: 100%;
  overflow: auto;
  overflow-x: hidden;
  background: var(--ib-base);
  color: var(--ib-text);
  font-family: var(--ib-font);
  color-scheme: dark;
}

body.task-login #layout {
  flex-direction: column;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

/* The portal's glow-grid stack (apps/portal/app/assets/css/portal.css,
   .bg-glow-grid): three radial glows, a fade that hides the grid toward the
   top, and a 32 px grid. Same numbers. */
body.task-login #layout-content {
  flex: 1 0 auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem 3.5rem;
  background-color: var(--ib-base);
  background-image:
    radial-gradient(ellipse 70% 65% at 50% 105%, rgba(59, 111, 255, 0.32) 0%, rgba(59, 111, 255, 0.08) 50%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 88% 5%, rgba(139, 92, 246, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 8% 10%, rgba(20, 184, 166, 0.09) 0%, transparent 55%),
    linear-gradient(to bottom, var(--ib-base) 0%, var(--ib-base-0) 85%),
    linear-gradient(to right, var(--ib-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ib-grid) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 32px 32px, 32px 32px;
}

/* Logo and tagline. The skin dims the logo in its dark scheme; ours is made for it. */
body.task-login #logo {
  position: static;
  top: auto;
  max-height: 64px;
  width: auto;
  opacity: 1;
}

body.task-login .ibenta-tagline {
  margin: 0.5rem 0 1.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ib-muted);
}

/* The form as a card. */
body.task-login #login-form {
  position: static;
  top: auto;
  width: 100%;
  max-width: 380px;
  margin: 0;
  padding: 2rem 1.75rem 1.5rem;
  text-align: left;
  /* The portal's tinted card: a corner of blue fading into the raised surface. */
  background: linear-gradient(135deg, rgba(59, 111, 255, 0.1) 0%, var(--ib-raised) 65%) var(--ib-raised);
  border: 1px solid var(--ib-border);
  border-radius: 14px;
  box-shadow: 0 18px 48px -24px rgba(8, 16, 30, 0.35);
}

/* The skin turns each field into an input group with an icon on the left
   and the label as placeholder. Rows get air between them, the icon cell
   takes the raised surface, and only the outer corners are rounded. */
body.task-login #login-form .input-group {
  margin-bottom: 1rem;
}

body.task-login #login-form .input-group-text {
  background: var(--ib-raised);
  border: 1px solid var(--ib-border);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  color: var(--ib-muted);
  min-width: 3rem;
  justify-content: center;
}

body.task-login #login-form label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ib-muted);
}

body.task-login #login-form .form-control {
  font-family: var(--ib-font);
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  height: auto;
  background: var(--ib-raised);
  color: var(--ib-strong);
  border: 1px solid var(--ib-border);
  border-radius: 8px;
  box-shadow: none;
}

body.task-login #login-form .input-group .form-control {
  border-radius: 0 8px 8px 0;
}

body.task-login #login-form .form-control::placeholder {
  color: var(--ib-muted);
  opacity: 1;
}

body.task-login #login-form .formbuttons {
  margin: 1.5rem 0 0;
}

body.task-login #login-form .form-control:focus {
  border-color: var(--ib-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ib-accent) 25%, transparent);
}

body.task-login #login-form .btn-primary {
  font-family: var(--ib-font);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  background: var(--ib-accent);
  border-color: var(--ib-accent);
  border-radius: 8px;
  color: #fff;
}

body.task-login #login-form .btn-primary:hover,
body.task-login #login-form .btn-primary:focus {
  background: var(--ib-accent-strong);
  border-color: var(--ib-accent-strong);
}

/* Roundcube's own support link, centred under the button; the plugin strips
   the bullet the template puts before it. */
body.task-login #login-footer {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--ib-muted);
}

body.task-login #login-footer > div {
  margin-top: 0.75rem;
  padding: 0;
  background: transparent;
}

body.task-login #login-footer a {
  color: var(--ib-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.task-login #login-footer a:hover {
  color: var(--ib-strong);
}

/* Messages (wrong password, account locked) keep the skin's colours. */

/* Footer, after ibenta.no's. */
body.task-login .ibenta-footer {
  width: 100%;
  border-top: 1px solid var(--ib-border);
  background: var(--ib-base);
  font-family: var(--ib-font);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: left;
}

body.task-login .ibenta-footer__inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

body.task-login .ibenta-footer__brand {
  max-width: 20rem;
}

body.task-login .ibenta-footer__logo img {
  height: 34px;
  width: auto;
}

body.task-login .ibenta-footer__muted {
  margin: 0.75rem 0 0;
  color: var(--ib-muted);
}

body.task-login .ibenta-footer__promise {
  margin: 0.75rem 0 0;
  color: var(--ib-strong);
}

body.task-login .ibenta-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

body.task-login .ibenta-footer__label {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ib-muted);
}

body.task-login .ibenta-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body.task-login .ibenta-footer a {
  color: var(--ib-muted);
  text-decoration: none;
}

body.task-login .ibenta-footer a:hover {
  color: var(--ib-strong);
}

body.task-login .ibenta-footer__bottom {
  border-top: 1px solid var(--ib-border);
  color: var(--ib-muted);
}

body.task-login .ibenta-footer__bottom-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.task-login .ibenta-footer__bottom p {
  margin: 0;
}

body.task-login .ibenta-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  body.task-login .ibenta-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    padding: 3rem 2rem;
  }
  body.task-login .ibenta-footer__nav {
    gap: 4rem;
  }
  body.task-login .ibenta-footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
  }
}