/*
 * Promtek Mail — v4 fullscreen cascade and theme fix
 * Loaded after Roundcube Elastic and the existing Promtek eye-only stylesheet.
 * It changes appearance only; the working login fields and password-eye JS stay intact.
 */

/* Light palette is the default. Dark overrides are at the end of this file. */
html {
  margin: 0 !important;
  padding: 0 !important;
  background: #faf8f5 !important;
}

html body.task-login {
  --pk-accent: #ec8a1a !important;
  --pk-accent-hover: #d2761d !important;
  --pk-accent-ring: rgba(236, 138, 26, 0.18) !important;
  --pk-page: #faf8f5 !important;
  --pk-panel: #221e1a !important;
  --pk-field: #ffffff !important;
  --pk-border: #d9d2c9 !important;
  --pk-rule: #e7e1da !important;
  --pk-ink: #231f1b !important;
  --pk-ink-2: #4b443d !important;
  --pk-muted: #746b62 !important;
  --pk-faint: #aaa198 !important;
  --pk-on-panel: #f6f2ec !important;
  --pk-on-panel-mut: #9f968d !important;
  color: var(--pk-ink) !important;
  background: var(--pk-page) !important;
  color-scheme: light;
}

html body.task-login #layout,
html.dark-mode body.task-login #layout {
  background: var(--pk-page) !important;
}

html body.task-login #login-brand,
html.dark-mode body.task-login #login-brand {
  color: var(--pk-on-panel) !important;
  background: var(--pk-panel) !important;
  border-right: 0 !important;
}

html body.task-login #login-brand h2,
html.dark-mode body.task-login #login-brand h2,
html body.task-login #login-brand .brand-head,
html.dark-mode body.task-login #login-brand .brand-head {
  color: var(--pk-on-panel) !important;
}

html body.task-login #login-brand p,
html.dark-mode body.task-login #login-brand p,
html body.task-login #login-brand .brand-foot,
html.dark-mode body.task-login #login-brand .brand-foot {
  color: var(--pk-on-panel-mut) !important;
}

html body.task-login #login-brand .brand-foot,
html.dark-mode body.task-login #login-brand .brand-foot {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

html body.task-login #login-brand .brand-foot::before,
html.dark-mode body.task-login #login-brand .brand-foot::before {
  content: "";
  display: inline-block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8H4v-8a2 2 0 0 1 2-2h1Zm2 0h6V8a3 3 0 0 0-6 0v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8H4v-8a2 2 0 0 1 2-2h1Zm2 0h6V8a3 3 0 0 0-6 0v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body.task-login #layout-content,
html body.task-login #layout > #layout-content.selected,
html.dark-mode body.task-login #layout-content,
html.dark-mode body.task-login #layout > #layout-content.selected {
  color: var(--pk-ink) !important;
  background: var(--pk-page) !important;
}

html body.task-login #login-head h1,
html.dark-mode body.task-login #login-head h1 {
  color: var(--pk-ink) !important;
}

html body.task-login #login-head p,
html.dark-mode body.task-login #login-head p {
  color: var(--pk-muted) !important;
}

/* Undo Elastic's dark input backgrounds and icon boxes. */
html body.task-login #login-form .input-group,
html.dark-mode body.task-login #login-form .input-group {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  color: var(--pk-ink) !important;
  background: var(--pk-field) !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-radius) !important;
  box-shadow: none !important;
}

html body.task-login #login-form .input-group:focus-within,
html.dark-mode body.task-login #login-form .input-group:focus-within {
  border-color: var(--pk-accent) !important;
  box-shadow: 0 0 0 3px var(--pk-accent-ring) !important;
}

html body.task-login #login-form .input-group-prepend,
html body.task-login #login-form .input-group-append,
html body.task-login #login-form .input-group-text,
html.dark-mode body.task-login #login-form .input-group-prepend,
html.dark-mode body.task-login #login-form .input-group-append,
html.dark-mode body.task-login #login-form .input-group-text {
  color: var(--pk-faint) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.task-login #login-form .input-group-text,
html.dark-mode body.task-login #login-form .input-group-text {
  padding: 0 0 0 13px !important;
}

html body.task-login #login-form input.form-control,
html body.task-login #login-form input[type="text"],
html body.task-login #login-form input[type="email"],
html body.task-login #login-form input[type="password"],
html.dark-mode body.task-login #login-form input.form-control,
html.dark-mode body.task-login #login-form input[type="text"],
html.dark-mode body.task-login #login-form input[type="email"],
html.dark-mode body.task-login #login-form input[type="password"] {
  color: var(--pk-ink) !important;
  -webkit-text-fill-color: var(--pk-ink) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body.task-login #login-form input::placeholder,
html.dark-mode body.task-login #login-form input::placeholder {
  color: var(--pk-faint) !important;
  -webkit-text-fill-color: var(--pk-faint) !important;
  opacity: 1 !important;
}

/* Make Roundcube's real labels visible when this build renders title cells. */
html body.task-login #login-form td.title,
html.dark-mode body.task-login #login-form td.title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: auto !important;
  min-height: 17px !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--pk-ink-2) !important;
  background: transparent !important;
  border: 0 !important;
  clip: auto !important;
  clip-path: none !important;
}

html body.task-login #login-form td.title label,
html.dark-mode body.task-login #login-form td.title label {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  color: var(--pk-ink-2) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

html body.task-login #rcmloginsubmit,
html body.task-login #login-form button.mainaction,
html body.task-login #login-form button[type="submit"],
html.dark-mode body.task-login #rcmloginsubmit,
html.dark-mode body.task-login #login-form button.mainaction,
html.dark-mode body.task-login #login-form button[type="submit"] {
  color: #17140f !important;
  background: var(--pk-accent) !important;
  border-color: var(--pk-accent) !important;
}

html body.task-login #rcmloginsubmit:hover,
html body.task-login #login-form button[type="submit"]:hover,
html.dark-mode body.task-login #rcmloginsubmit:hover,
html.dark-mode body.task-login #login-form button[type="submit"]:hover {
  background: var(--pk-accent-hover) !important;
  border-color: var(--pk-accent-hover) !important;
}

html body.task-login #login-footer,
html.dark-mode body.task-login #login-footer {
  color: var(--pk-muted) !important;
  background: transparent !important;
  border-top-color: var(--pk-rule) !important;
}

html body.task-login #login-form .promtek-password-eye,
html.dark-mode body.task-login #login-form .promtek-password-eye {
  color: var(--pk-faint) !important;
  background: transparent !important;
}

html body.task-login #login-form .promtek-password-eye:hover,
html body.task-login #login-form .promtek-password-eye:focus-visible,
html body.task-login #login-form .promtek-password-eye.is-visible,
html.dark-mode body.task-login #login-form .promtek-password-eye:hover,
html.dark-mode body.task-login #login-form .promtek-password-eye:focus-visible,
html.dark-mode body.task-login #login-form .promtek-password-eye.is-visible {
  color: var(--pk-accent) !important;
}

/* Restore the proven v4 layout: both panels fill the entire browser view. */
@media screen and (min-width: 901px) {
  html body.task-login {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 540px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  @supports (height: 100dvh) {
    html body.task-login {
      height: 100dvh !important;
    }
  }

  html body.task-login #layout,
  html.dark-mode body.task-login #layout {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 540px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body.task-login #login-brand,
  html.dark-mode body.task-login #login-brand {
    flex: 0 0 37.5% !important;
    max-width: none !important;
    padding: 39px 37px !important;
  }

  html body.task-login #layout-content,
  html body.task-login #layout > #layout-content.selected,
  html.dark-mode body.task-login #layout-content,
  html.dark-mode body.task-login #layout > #layout-content.selected {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 48px !important;
  }

  html body.task-login #login-form,
  html.dark-mode body.task-login #login-form {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 348px !important;
    margin: 0 !important;
  }
}

/* Keep the existing compact mobile treatment, but prevent blue dark-mode fill. */
@media screen and (max-width: 900px) {
  html body.task-login,
  html.dark-mode body.task-login,
  html:not(.light-mode) body.task-login {
    background: var(--pk-page) !important;
  }

  html body.task-login #login-brand,
  html.dark-mode body.task-login #login-brand {
    background: var(--pk-panel) !important;
  }
}

/* Dark palette from the supplied dark mockup. Roundcube adds .dark-mode for
   either its saved dark preference or the operating-system dark preference. */
html.dark-mode {
  background: #17140f !important;
}

html.dark-mode body.task-login {
  --pk-page: #17140f !important;
  --pk-panel: #0e0c09 !important;
  --pk-field: #211c17 !important;
  --pk-border: #3a332b !important;
  --pk-rule: #2a241e !important;
  --pk-ink: #f6f2ec !important;
  --pk-ink-2: #c4bcb2 !important;
  --pk-muted: #9a9188 !important;
  --pk-faint: #746b62 !important;
  --pk-on-panel: #f6f2ec !important;
  --pk-on-panel-mut: #9a9188 !important;
  --pk-accent-hover: #f59d33 !important;
  --pk-accent-ring: rgba(236, 138, 26, 0.20) !important;
  color: var(--pk-ink) !important;
  background: var(--pk-page) !important;
  color-scheme: dark;
}

html.dark-mode body.task-login #login-brand {
  border-right: 1px solid var(--pk-rule) !important;
}