/* Nuremberg Babylon — inherits Roundcube's Elastic skin, overrides only what is ours.
 *
 * The design system below is lifted from the real Babylon login page
 * (mail.babylon.so/sso/login), whose source is preserved at
 * tenants/mail/skin-babylon/admin-sso/base_sso.html. Colours, sizes and type
 * are copied from it exactly rather than eyeballed.
 */
@import url("../../elastic/styles/styles.min.css");

/* --- Brand typefaces ------------------------------------------------------ */
/* woff2, not otf: Roundcube's static.php only serves an allowlist of extensions
 * and .otf is not on it. The .otf masters are kept alongside as the source. */
@font-face {
  font-family: 'Overused Grotesk';
  src: url('../fonts/OverusedGrotesk-Roman.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Overused Grotesk';
  src: url('../fonts/OverusedGrotesk-Book.woff2') format('woff2');
  font-weight: 350; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Martina Plantijn';
  src: url('../fonts/MartinaPlantijn-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}

/* --- Brand tokens, copied from base_sso.html ------------------------------ */
:root {
  --bab-bg:          #252523;
  --bab-text:        #e0e0dc;
  --bab-title:       #ffffff;
  --bab-notice:      #E7E1DA;
  --bab-line:        #3D3936;
  --bab-placeholder: #6a6a65;
  --bab-footer:      #383836;
  --bab-sans: 'Overused Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --bab-serif: 'Martina Plantijn', Georgia, serif;
}

/* Roundcube's own dark-mode toggle: the skin decides, not the user. */
a.theme, a.theme.dark, .special-buttons a.theme { display: none !important; }

/* Body copy uses the brand sans everywhere, not Elastic's Roboto.
 * Icon fonts are untouched — no universal selector, no ::before rules. */
body, button, input, select, textarea, optgroup,
.popover, .ui-dialog, #layout, .menu, .listing, .toolbar {
  font-family: var(--bab-sans);
  font-weight: 350;
}

/* ==========================================================================
 * LOGIN PAGE — an exact rebuild of mail.babylon.so/sso/login
 *
 * Two things fight us and both are overridden explicitly rather than nudged:
 *
 * 1. Elastic's stylesheet positions the login with viewport units:
 *      .task-login #logo { position:relative; top:16vh; max-height:100px }
 *      #login-form      { position:relative; top:20vh; max-width:320px }
 *    That is what produced the large gap and the too-narrow form.
 *
 * 2. Elastic's ui.js REWRITES the form after load (ui.js:1154-1174). It adds
 *    `btn-lg text-uppercase w-100` to the submit button, turns each <tr> into
 *    `form-group row`, makes each td.input an `input-group input-group-lg`, and
 *    injects a `span.input-group-prepend` holding an icon. Those are the grey
 *    icon boxes. They are hidden here and the row is kept as flex so the input
 *    still fills it.
 * ========================================================================== */
body.task-login {
  background: var(--bab-bg) !important;
  color: var(--bab-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.task-login #layout,
html.dark-mode body.task-login #layout {
  background: var(--bab-bg) !important;
  border: none;
  box-shadow: none;
}

/* Undo Elastic's block/vh layout; centre the whole thing like the real page. */
body.task-login #layout-content {
  background: var(--bab-bg) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  text-align: center;
  border: none;
  box-shadow: none;
  padding: 0;
}

body.task-login .login-wrapper {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- wordmark: 336x54, 60px of air beneath, exactly as base_sso.html --- */
body.task-login .login-logo { text-align: center; margin-bottom: 60px; }
body.task-login .login-logo img,
html.dark-mode body.task-login .login-logo img {
  width: 336px; height: 54px;
  max-height: none;
  position: static; top: auto;
  opacity: 0.95;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}

body.task-login .login-title {
  font-family: var(--bab-serif);
  font-size: 24px; font-weight: 400; line-height: 1.2;
  color: var(--bab-title); text-align: center; margin: 0;
}

body.task-login .login-notice {
  font-family: var(--bab-sans);
  font-weight: 400; font-size: 15px; line-height: 120%;
  color: var(--bab-notice); text-align: center;
  margin: 12px 0 0 0;
}

/* --- the form: strip Elastic's vh offset and width cap --- */
body.task-login #login-form {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- the bordered field box, 386px --- */
body.task-login #login-form table {
  display: block;
  width: 386px;
  margin: 18px 0 0 0;
  outline: 1px solid var(--bab-line);
  border-radius: 4px;
  background: transparent;
  overflow: hidden;
  border-collapse: collapse;
}
body.task-login #login-form tbody { display: block; width: 100%; }
body.task-login #login-form tr {
  display: block;
  width: 100%;
  margin: 0 !important;
  border-bottom: 1px solid var(--bab-line);
}
body.task-login #login-form tr:last-of-type { border-bottom: none; }

/* Label cell is hidden by Elastic's JS too; belt and braces. */
body.task-login #login-form td.title,
body.task-login #login-form label { display: none !important; }

/* td.input becomes .input-group: keep it flex so the input fills the row. */
body.task-login #login-form td.input {
  display: flex !important;
  width: 100%;
  height: 42px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  align-items: stretch;
}

/* The injected icon box. This is the grey square that should not be there. */
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-text,
body.task-login #login-form td.input > span:first-child { display: none !important; }

body.task-login #login-form input.form-control {
  flex: 1 1 auto;
  width: 100%; height: 42px;
  padding: 0 16px;
  background: transparent !important;
  border: none !important; border-radius: 0 !important; box-shadow: none !important;
  color: var(--bab-text);
  font-family: var(--bab-sans); font-weight: 350; font-size: 14px;
  transition: background 0.2s ease;
  outline: none;
}
body.task-login #login-form input.form-control:focus {
  background: rgba(61, 57, 54, 0.15) !important;
}
body.task-login #login-form input::placeholder,
html.dark-mode body.task-login #login-form input::placeholder,
html.dark-mode body.task-login ::placeholder {
  color: var(--bab-placeholder) !important;
  font-family: var(--bab-sans); font-weight: 350; font-size: 14px;
  opacity: 1;
}

/* --- the white button. Elastic's JS adds text-uppercase; undo it. --- */
body.task-login #login-form .formbuttons { margin: 0; padding: 0; width: 386px; }
body.task-login #login-form #rcmloginsubmit,
body.task-login #login-form button.submit,
body.task-login #login-form .btn-lg {
  width: 386px; height: 42px;
  padding: 0; min-height: 0; line-height: 42px;
  background: #ffffff !important; color: #000000 !important;
  border: none !important; border-radius: 4px !important;
  font-family: var(--bab-sans); font-weight: 400; font-size: 13px;
  text-transform: none !important; letter-spacing: normal;
  cursor: pointer; transition: background 0.15s ease;
  margin: 12px 0 0 0; text-align: center;
  box-shadow: none;
}
body.task-login #login-form #rcmloginsubmit:hover { background: var(--bab-text) !important; }
body.task-login #login-form #rcmloginsubmit:active { background: #c8c8c4 !important; }

/* --- footer: one line, sits under the form inside the wrapper --- */
body.task-login #login-footer,
html.dark-mode body.task-login #login-footer {
  flex: none !important;
  text-align: center;
  margin-top: 1rem;
  padding: 0;
  background: none;
  white-space: nowrap;
  font-family: var(--bab-sans); font-weight: 350;
  font-size: 14px; color: var(--bab-footer) !important;
}
body.task-login #login-footer > div { margin: 0; padding: 0; background: none; border-radius: 0; }

/* Errors: Roundcube's message stack, dressed as the SSO page's toasts. */
/* ==========================================================================
 * LOGIN — the loading screen, copied from base_sso.html
 * ========================================================================== */
body.task-login .loader {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bab-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
}
body.task-login .loader.fade-out { opacity: 0; pointer-events: none; }

body.task-login .loader-bar-track {
  width: 200px; height: 3px;
  background: var(--bab-line);
  border-radius: 2px; overflow: hidden;
}
body.task-login .loader-bar-fill {
  width: 0%; height: 100%;
  background: var(--bab-text);
  border-radius: 2px;
  transition: width 0.15s linear;
}

body.task-login .login-wrapper {
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}
body.task-login .login-wrapper.visible {
  opacity: 1; visibility: visible;
  transition: opacity 0.4s ease;
}

/* Coming back from a Login click: no bar, no fade — the form is simply there,
 * and the toast slides in over it. Set by the script when it finds the one-shot
 * flag left by the submit. */
body.task-login.bab-instant .login-wrapper,
body.task-login.bab-instant .login-wrapper.visible { transition: none; }
body.task-login.bab-instant .loader { display: none; }

/* Safety the original does not have: if scripting is off, nothing would ever
 * reveal the form. Show it and hide the loader instead of a blank page. */
body.task-login.no-js .login-wrapper { opacity: 1; visibility: visible; }
body.task-login.no-js .loader { display: none; }

/* --- the toast, top right, exactly as mail.babylon.so/sso/login ------------
 * Values copied from admin-sso/base_sso.html: #1a1a18 on a 1px #3D3936 border,
 * radius 6, padding 12/20, 13px at weight 350, max-width 340, a 3px accent on
 * the left edge, and the slide: opacity 0 + translateX(20px) transitioning over
 * 0.3s to opacity 1 + translateX(0), then back out again.
 *
 * This restyles Roundcube's OWN message box rather than adding a second toast
 * system alongside it — an earlier attempt did that, and when its script failed
 * to run the result was a giant unstyled box. Elastic forces width:320px and
 * min-height:4.2rem here; both are overridden.
 *
 * The slide IN needs no script: it is a keyframe animation that runs when
 * Roundcube inserts the element. Only the exit is scheduled from JavaScript, so
 * if that never runs the toast simply stays on screen rather than vanishing.
 * The failure mode is a message that lingers, never one you cannot see.
 * ------------------------------------------------------------------------- */
body.task-login #messagestack {
  position: fixed !important;
  top: 24px !important; right: 24px !important;
  left: auto !important; bottom: auto !important;
  width: auto !important; max-width: 340px;
  max-height: none !important; height: auto !important;
  z-index: 9998;
  display: flex; flex-direction: column; gap: 8px;
  background: none; padding: 0; margin: 0;
}

body.task-login #messagestack div {
  position: static;
  width: auto; height: auto;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  background: #1a1a18 !important;
  color: var(--bab-text) !important;
  border: 1px solid var(--bab-line) !important;
  border-left: 3px solid #e06070 !important;
  border-radius: 6px !important;
  font-family: var(--bab-sans); font-weight: 350; font-size: 13px;
  line-height: 1.35;
  max-width: 340px;
  box-shadow: none;
  display: flex; align-items: center; gap: 10px;
}

/* The slide IN is a keyframe animation, not a transition.
 *
 * base_sso.html can use a transition because it builds the element already in
 * the hidden state, then adds .visible on a later frame. Here Roundcube inserts
 * the element itself, so adding a hidden class and a visible class from script
 * lands both in the same style recalculation — the browser sees only the final
 * state and there is nothing to interpolate. That is why it teleported in.
 * A keyframe animation runs on insertion with no script at all, so it cannot
 * miss. Same 0.3s ease, same 20px, same result — just reliably.
 *
 * The slide OUT stays a transition: five seconds later the element is settled,
 * so adding .bab-out interpolates correctly. */
@keyframes bab-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
body.task-login #messagestack div {
  animation: bab-toast-in 0.3s ease both;
}
/* several at once stagger by 150ms, as they do on the real page */
body.task-login #messagestack div:nth-child(2) { animation-delay: 0.15s; }
body.task-login #messagestack div:nth-child(3) { animation-delay: 0.30s; }
body.task-login #messagestack div:nth-child(n+4) { animation-delay: 0.45s; }

body.task-login #messagestack div.bab-out {
  animation: none;
  opacity: 0; transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Roundcube raises display_message('', 'loading') into this same box, so
 * restyling it turned the "Loading..." spinner into what looked like an error.
 * The login page already has the loading bar. Scoped to .task-login, so the
 * indicator still behaves normally inside the mailbox. */
body.task-login #messagestack div.loading,
body.task-login #messagestack div.uploading,
body.task-login #messagestack div.voice { display: none !important; }

/* Logout shows nothing on the legacy system: base.py's logout() destroys the
 * session and redirects to /sso/login without setting a flash. Roundcube instead
 * announces "You have successfully terminated the session. Goodbye!" as a
 * 'notice'. Notices are the only thing Roundcube raises on this page that the
 * legacy one does not, so they are suppressed here — errors (red) and
 * confirmations (green) are exactly the two the SSO page defines. */
body.task-login #messagestack div.notice { display: none !important; }

/* Only errors and warnings are red; the SSO page uses green for success. */
body.task-login #messagestack div.confirmation { border-left-color: #50c878 !important; }

/* Elastic drops an icon into the box; the Babylon toast has none. */
body.task-login #messagestack div i,
body.task-login #messagestack div .icon { display: none !important; }