/* Custom login layout for the webmail app — injected by nginx, independent of
   the theme system. Styling follows the Spectrum UI "Login Card" pattern
   (21st.dev/@arihantcodes_1f7b8c4d/components/login-card), rewritten as plain
   CSS: no Tailwind, no framer-motion, no external requests (the app's CSP
   allows same-origin assets only).

   Every rule is scoped to .LoginView, so the mailbox UI is untouched. */

:root {
  --wm-page:        #fafafa;
  --wm-card:        #ffffff;
  --wm-card-border: rgb(255 255 255 / .10);
  --wm-field:       #f3f4f6;
  --wm-field-brd:   #d1d5db;
  --wm-ink:         #111827;
  --wm-ink-soft:    #4b5563;
  --wm-ink-faint:   #6b7280;
  --wm-action:      #111827;
  --wm-action-ink:  #ffffff;
  --wm-radius:      24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wm-page:        #2a2a2a;
    --wm-card:        #3f3f3f;
    --wm-card-border: rgb(255 255 255 / .12);
    --wm-field:       #1b1b1b;
    --wm-field-brd:   rgb(255 255 255 / .20);
    --wm-ink:         #ffffff;
    --wm-ink-soft:    #d1d5db;
    --wm-ink-faint:   #9ca3af;
    --wm-action:      #ffffff;
    --wm-action-ink:  #111827;
  }
}

/* --- page ---------------------------------------------------------- */
body#rl-app:has(.LoginView) { background: var(--wm-page); }

.LoginView {
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: none;                 /* drop the theme's backdrop */
  font-family: var(--fontSans, ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif);
}

/* The template's own loading label, which carries the product name.
   Knockout's `visible:` binding writes display inline, so !important is the
   only thing that holds here. */
.LoginView .descWrapper { display: none !important; }

/* --- the card (the form itself) ------------------------------------ */
.LoginView form {
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
  background: var(--wm-card);
  border: 1px solid var(--wm-card-border);
  border-radius: var(--wm-radius);
  padding: 2rem;
  flex: 0 0 auto;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* the heading is injected by login.js; the app template has none */
#wm-head { text-align: center; margin-bottom: .5rem; }
#wm-head h1 {
  margin: 0 0 .5rem;
  font-size: 1.875rem;
  font-weight: 300;
  color: var(--wm-ink);
  letter-spacing: -.01em;
}
#wm-head p { margin: 0; font-size: .875rem; color: var(--wm-ink-soft); }

/* --- fields -------------------------------------------------------- */
.LoginView .controls { margin: 0; position: relative; }
.LoginView #plugin-Login-BottomControlGroup:empty { display: none; }
.LoginView .controls > .fontastic:first-child { display: none; }

#rl-app .LoginView input {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.5rem;
  background: var(--wm-field);
  border: 1px solid var(--wm-field-brd);
  border-radius: 9999px;
  color: var(--wm-ink);
  font-size: 1rem;
  transition: border-color .2s;
}
#rl-app .LoginView input::placeholder { color: var(--wm-ink-faint); }
#rl-app .LoginView input:hover  { background: var(--wm-field); border-color: var(--wm-field-brd); }
#rl-app .LoginView input:focus  { outline: none; border-color: var(--wm-ink-faint); }
.LoginView .controls.error input { border-color: #dc2626; }

/* --- remember-me / language row ------------------------------------ */
#rl-app .LoginView .controls[style] {
  align-items: center;
  gap: .5rem;
  padding: 0 .5rem;
  font-size: .875rem;
  color: var(--wm-ink-soft);
}
.LoginView .e-checkbox { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
/* the theme colours this label; force it back so it stays legible on the dark card */
#rl-app .LoginView .e-checkbox,
#rl-app .LoginView .e-checkbox * { color: var(--wm-ink-soft); }
.LoginView .e-checkbox .fontastic { font-size: 1.05rem; font-style: normal; line-height: 1; }
.LoginView .language-buttons { margin-left: auto; }
.LoginView .language-button { text-decoration: none; opacity: .55; filter: grayscale(1); }
.LoginView .language-button:hover { opacity: 1; }

/* --- submit -------------------------------------------------------- */
.LoginView .btn.buttonLogin {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--wm-action);
  color: var(--wm-action-ink);
  border: 0;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform .2s, filter .2s;
}
.LoginView .btn.buttonLogin::after {
  content: "→";
  font-size: 1.05rem;
  transition: transform .2s;
}
.LoginView .btn.buttonLogin:hover        { filter: brightness(1.15); }
.LoginView .btn.buttonLogin:hover::after { transform: translateX(4px); }
.LoginView .btn.buttonLogin:active       { transform: scale(.98); }

/* --- error alert --------------------------------------------------- */
.LoginView .alert {
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .875rem 1.25rem;
  border-radius: 16px;
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #991b1b;
  font-size: .875rem;
}
.LoginView .alert[hidden] { display: none; }

/* --- entrance (framer-motion's stagger, done in CSS) --------------- */
@keyframes wm-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.LoginView form > * {
  animation: wm-rise .6s cubic-bezier(.16, 1, .3, 1) backwards;
}
.LoginView form > *:nth-child(1) { animation-delay: .05s; }
.LoginView form > *:nth-child(2) { animation-delay: .15s; }
.LoginView form > *:nth-child(3) { animation-delay: .25s; }
.LoginView form > *:nth-child(4) { animation-delay: .35s; }
.LoginView form > *:nth-child(5) { animation-delay: .45s; }
.LoginView form > *:nth-child(6) { animation-delay: .55s; }
.LoginView form > *:nth-child(n+7) { animation-delay: .65s; }

@media (prefers-reduced-motion: reduce) {
  .LoginView form > * { animation: none; }
}

/* Remove the product wordmark: it is the boot screen's own text node.
   Zeroed rather than hidden so the loading layout keeps its place. */
#rl-loading-desc { font-size: 0; }
#rl-loading-desc::after {
  content: "Rebrind Mail";
  font-size: 1rem;
  color: var(--wm-ink-faint);
}

@media (max-width: 480px) {
  .LoginView form { padding: 1.5rem; }
  #wm-head h1 { font-size: 1.625rem; }
}