/* =========================================================================
   Promtek Mail — login page skin overrides for Roundcube Elastic
   Tested against Elastic in Roundcube 1.6.x / 1.7.x
   Scope: everything here is scoped to body.task-login, so the rest of the
   webmail UI is untouched.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --- Tokens ------------------------------------------------------------- */
body.task-login {
  --pk-accent:        #EC8A1A;  /* from the logo — the only accent */
  --pk-accent-hover:  #D2761D;
  --pk-accent-ring:   rgba(236,138,26,0.16);

  --pk-page:          #FAF8F5;  /* form side background */
  --pk-panel:         #221E1A;  /* brand panel background */
  --pk-field:         #FFFFFF;
  --pk-border:        #D8D2C9;
  --pk-rule:          #E6E1DA;

  --pk-ink:           #1F1B17;
  --pk-ink-2:         #4A443D;
  --pk-muted:         #6F675E;
  --pk-faint:         #8A8177;
  --pk-on-panel:      #F6F2EC;
  --pk-on-panel-mut:  #9A9188;

  --pk-radius:        8px;
  --pk-font:          "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pk-mono:          "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

/* --- Page frame: two panels -------------------------------------------- */
body.task-login {
  font-family: var(--pk-font);
  background: var(--pk-page);
  color: var(--pk-ink);
  -webkit-font-smoothing: antialiased;
}

body.task-login #layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background: var(--pk-page);
}

/* Left brand panel — markup added in templates/login.html (see login.html) */
body.task-login #login-brand {
  flex: 0 0 40%;
  max-width: 460px;
  box-sizing: border-box;
  padding: 40px 38px;
  background: var(--pk-panel);
  color: var(--pk-on-panel);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
body.task-login #login-brand .brand-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.task-login #login-brand .brand-head img { width: 34px; height: 34px; display: block; }
body.task-login #login-brand h2 {
  margin: 0 0 14px;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
body.task-login #login-brand p {
  margin: 0;
  max-width: 290px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pk-on-panel-mut);
  text-wrap: pretty;
}
body.task-login #login-brand .brand-foot {
  font-family: var(--pk-mono);
  font-size: 11px;
  color: var(--pk-on-panel-mut);
}

/* Right side: Elastic's own content column, re-centred */
body.task-login #layout-content,
body.task-login #layout > #layout-content.selected {
  flex: 1 1 auto;
  width: auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  text-align: left;
  background: var(--pk-page);
}

/* Elastic's default logo sits above the form; the brand panel replaces it.
   Delete this rule if you skip the template patch and keep the logo. */
body.task-login #logo { display: none; }

/* --- The form ---------------------------------------------------------- */
body.task-login #login-form {
  position: static;
  top: auto;
  margin: 0;
  width: 100%;
  max-width: 360px;
}

/* Heading injected by the template patch */
body.task-login #login-head { margin-bottom: 26px; }
body.task-login #login-head h1 {
  margin: 0 0 7px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pk-ink);
}
body.task-login #login-head p {
  margin: 0;
  font-size: 14px;
  color: var(--pk-muted);
}

/* Elastic may render the fields as a table or as .row divs — flatten both
   into a single vertical stack. */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td,
body.task-login #login-form .row {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
body.task-login #login-form tr,
body.task-login #login-form .row { margin-bottom: 16px; }

/* Labels above the fields (Elastic hides them and uses placeholders) */
body.task-login #login-form label {
  display: block;
  margin: 0 0 7px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--pk-ink-2);
  text-align: left;
}

/* Field = bordered shell; the prepended icon box becomes an inline icon */
body.task-login #login-form .input-group {
  display: flex;
  align-items: center;
  background: var(--pk-field);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  overflow: hidden;
}
body.task-login #login-form .input-group:focus-within {
  border-color: var(--pk-accent);
  box-shadow: 0 0 0 3px var(--pk-accent-ring);
}
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-append { border: 0; background: none; }
body.task-login #login-form .input-group-text {
  background: transparent;
  border: 0;
  color: var(--pk-faint);
  padding: 0 0 0 13px;
  font-size: 13px;
}
body.task-login #login-form input.form-control,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14px;
  color: var(--pk-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  height: auto;
}
/* Same treatment when a field is NOT wrapped in an .input-group */
body.task-login #login-form td > input.form-control:only-child,
body.task-login #login-form .row > input.form-control:only-child {
  background: var(--pk-field);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
}
body.task-login #login-form td > input.form-control:only-child:focus,
body.task-login #login-form .row > input.form-control:only-child:focus {
  border-color: var(--pk-accent);
  box-shadow: 0 0 0 3px var(--pk-accent-ring);
}
body.task-login #login-form input::placeholder { color: #A79E93; }

/* Select (host / language pickers, if enabled) */
body.task-login #login-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14px;
  color: var(--pk-ink);
  background: var(--pk-field);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
}

/* Checkbox (e.g. "stay signed in", if your setup offers it) */
body.task-login #login-form input[type="checkbox"] { accent-color: var(--pk-accent); }

/* --- Submit button ----------------------------------------------------- */
body.task-login #login-form .formbuttons { margin: 26px 0 0; }
body.task-login #rcmloginsubmit,
body.task-login #login-form button.mainaction,
body.task-login #login-form button[type="submit"] {
  display: block;
  width: 100%;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-transform: none;      /* Elastic uppercases it; sentence case reads calmer */
  letter-spacing: 0;
  color: #FFFFFF;
  background: var(--pk-accent);
  border: 1px solid var(--pk-accent);
  border-radius: var(--pk-radius);
  box-shadow: none;
  cursor: pointer;
}
body.task-login #rcmloginsubmit:hover,
body.task-login #login-form button.mainaction:hover,
body.task-login #login-form button[type="submit"]:hover {
  background: var(--pk-accent-hover);
  border-color: var(--pk-accent-hover);
}
body.task-login #rcmloginsubmit:focus-visible,
body.task-login #login-form button[type="submit"]:focus-visible {
  outline: 2px solid var(--pk-accent);
  outline-offset: 2px;
}

/* --- Footer / links ---------------------------------------------------- */
body.task-login #login-footer {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--pk-rule);
  font-size: 12px;
  color: var(--pk-muted);
  text-align: left;
}
body.task-login #login-footer > div {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
body.task-login a { color: #C9721B; text-decoration: none; }
body.task-login a:hover { color: #9E560F; text-decoration: underline; }

/* --- Error / notice messages ------------------------------------------- */
body.task-login #messagestack div.error,
body.task-login #messagestack div.warning {
  font-family: var(--pk-font);
  border-radius: var(--pk-radius);
}

/* --- Small screens: brand panel off ------------------------------------ */
@media screen and (max-width: 900px) {
  body.task-login #layout { display: block; }
  body.task-login #login-brand {
    max-width: none;
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 18px 20px;
  }
  body.task-login #login-brand h2,
  body.task-login #login-brand p,
  body.task-login #login-brand .brand-foot { display: none; }
  body.task-login #layout-content,
  body.task-login #layout > #layout-content.selected { padding: 32px 20px; min-height: auto; }
}

/* =========================================================================
   DARK MODE
   Elastic puts .dark-mode on <html> once the user turns it on, but on the
   login page there is no logged-in preference yet — hence the media query.
   Drop the @media block if you only want dark for signed-in users.
   ========================================================================= */
html.dark-mode body.task-login {
  --pk-page:   #17140F;
  --pk-panel:  #0E0C09;
  --pk-field:  #211C17;
  --pk-border: #3A332B;
  --pk-rule:   #2A241E;
  --pk-ink:    #F6F2EC;
  --pk-ink-2:  #C4BCB2;
  --pk-muted:  #9A9188;
  --pk-faint:  #6F675E;
  --pk-accent-hover: #F59D33;
  --pk-accent-ring:  rgba(236,138,26,0.2);
}
html.dark-mode body.task-login #login-brand { border-right: 1px solid #2A241E; }
html.dark-mode body.task-login #login-form input::placeholder { color: #6F675E; }
html.dark-mode body.task-login #rcmloginsubmit,
html.dark-mode body.task-login #login-form button[type="submit"] { color: #17140F; }
html.dark-mode body.task-login a { color: #E9A254; }

@media (prefers-color-scheme: dark) {
  html:not(.light-mode) body.task-login {
    --pk-page:   #17140F;
    --pk-panel:  #0E0C09;
    --pk-field:  #211C17;
    --pk-border: #3A332B;
    --pk-rule:   #2A241E;
    --pk-ink:    #F6F2EC;
    --pk-ink-2:  #C4BCB2;
    --pk-muted:  #9A9188;
    --pk-faint:  #6F675E;
    --pk-accent-hover: #F59D33;
    --pk-accent-ring:  rgba(236,138,26,0.2);
  }
  html:not(.light-mode) body.task-login #login-brand { border-right: 1px solid #2A241E; }
  html:not(.light-mode) body.task-login #login-form input::placeholder { color: #6F675E; }
  html:not(.light-mode) body.task-login #rcmloginsubmit,
  html:not(.light-mode) body.task-login #login-form button[type="submit"] { color: #17140F; }
  html:not(.light-mode) body.task-login a { color: #E9A254; }
}

/* =========================================================================
   PROMTEK FULL-VIEWPORT LAYOUT
   Keep the previous, proven Roundcube fields untouched. Only remove the
   centered-card frame and let both panels occupy the complete browser view.
   ========================================================================= */
@media screen and (min-width: 901px) {
  html {
    margin: 0;
    padding: 0;
    background: #FAF8F5;
  }

  body.task-login {
    display: block;
    width: 100%;
    min-width: 0;
    height: 100vh;
    min-height: 540px;
    margin: 0;
    padding: 0;
    overflow: auto;
  }

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

  body.task-login #layout {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 540px;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.task-login #login-brand {
    flex: 0 0 37.5%;
    max-width: none;
    padding: 39px 37px;
  }

  body.task-login #layout-content,
  body.task-login #layout > #layout-content.selected {
    padding: 48px;
  }

  body.task-login #login-form {
    max-width: 348px;
  }
}

/* =========================================================================
   PASSWORD VISIBILITY BUTTON
   The button is positioned over the existing password field. It does not
   participate in the input group's flex layout, so the native Roundcube
   password control keeps its proven size and behaviour.
   ========================================================================= */
body.task-login #login-form .promtek-password-eye-host {
  position: relative !important;
}

body.task-login #login-form #rcmloginpwd {
  padding-right: 46px !important;
}

/* Preserve the normal field treatment on uncommon Roundcube builds where
   the password input is not wrapped in an .input-group. */
body.task-login #login-form .promtek-password-eye-host--standalone > #rcmloginpwd {
  width: 100%;
  background: var(--pk-field);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
}

body.task-login #login-form .promtek-password-eye-host--standalone:focus-within > #rcmloginpwd {
  border-color: var(--pk-accent);
  box-shadow: 0 0 0 3px var(--pk-accent-ring);
}

body.task-login #login-form .promtek-password-eye {
  all: unset;
  position: absolute !important;
  z-index: 3;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 42px;
  min-width: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pk-faint);
  background: transparent;
  border-radius: 0 calc(var(--pk-radius) - 1px) calc(var(--pk-radius) - 1px) 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.task-login #login-form .promtek-password-eye::before,
body.task-login #login-form .promtek-password-eye::after {
  display: none !important;
  content: none !important;
}

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

body.task-login #login-form .promtek-password-eye:focus-visible {
  outline: 2px solid var(--pk-accent);
  outline-offset: -4px;
}

body.task-login #login-form .promtek-password-eye svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

body.task-login #login-form .promtek-password-eye .promtek-eye-slash {
  display: none;
}

body.task-login #login-form .promtek-password-eye.is-visible .promtek-eye-slash {
  display: block;
}