/* Zinn webmail — the sign-in page, and ONLY the sign-in page.
 *
 * `auth.css` (shipped beside this file, and the SAME file the Keycloak sign-in page serves)
 * carries the design tokens and every `.auth-*` primitive. This file exists for one reason:
 * Roundcube's `loginform` template object emits a two-column `<table>`, and the house design
 * is a stacked form. Everything below reshapes that third-party markup into the primitives
 * `auth.css` already defines — it does not invent a second design (CLAUDE.md §2.42).
 *
 * ⛔ Logical properties only. Arabic, Urdu, Farsi, Hebrew and Pashto are five of the 58 and
 * they mirror this page; `margin-left` here is a bug that only shows up in five languages.
 */

/* ── The login form: table -> stack ──────────────────────────────────────────────────── */
.auth-form table,
.auth-form tbody,
.auth-form tr,
.auth-form td {
  display: block;
  inline-size: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: start;
}

.auth-form tr {
  margin-block-end: var(--space-4);
}

/* `td.title` holds the `<label for>` Roundcube generates. */
.auth-form td.title label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  margin-block-end: var(--space-2);
}

/* Roundcube puts our `class="auth-input"` on both inputs (the `class` attribute passed to
 * the `loginform` object is merged into every field it builds), so they already pick up the
 * shared primitive. These two rules only fix what a table cell does to them. */
.auth-form .auth-input {
  inline-size: 100%;
  max-inline-size: 100%;
}

.auth-form input[type="hidden"] {
  display: none;
}

/* The submit button. Roundcube emits `<p class="formbuttons"><button id="rcmloginsubmit">`. */
.auth-form p.formbuttons {
  margin: var(--space-6) 0 0;
}

.auth-form #rcmloginsubmit {
  /* Mirrors `.auth-btn` + `.auth-btn--primary` from auth.css. Kept as its own rule rather
	 * than adding the classes through a plugin hook: the hook would have to rewrite an HTML
	 * string Roundcube built, and a regex over generated markup breaks silently on an
	 * upstream change, where a missing CSS rule is visible the first time anyone looks. */
  inline-size: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding-inline: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  background: var(--brand);
  color: var(--brand-ink);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.auth-form #rcmloginsubmit:hover {
  background: var(--brand-strong);
}

.auth-form #rcmloginsubmit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* ── Roundcube's message stack, rendered as our alert ─────────────────────────────────── */
#messagestack {
  display: block;
}

#messagestack > div {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-4);
  border: 1px solid var(--crit-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--crit-soft);
  color: var(--crit);
}

#messagestack > div.confirmation {
  border-color: var(--ok-soft);
  background: var(--ok-soft);
  color: var(--ok);
}

#messagestack > div.notice,
#messagestack > div.loading {
  border-color: var(--info-soft);
  background: var(--info-soft);
  color: var(--info);
}

#messagestack > div.warning {
  border-color: var(--warn-soft);
  background: var(--warn-soft);
  color: var(--warn);
}

#messagestack:empty {
  display: none;
}

/* ── The language picker ──────────────────────────────────────────────────────────────── */
/* ⛔ The width matters. Without it the `<select>` is a block element with no constraint and
 * stretches the full viewport under a centred card — measured in a browser at 1280px, where it
 * ran edge to edge and looked like a rendering fault. `auth.css` styles `.auth-locale__select`
 * but not the form around it. */
.auth-locale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  inline-size: 100%;
  max-inline-size: 420px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.auth-locale .auth-label {
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}

.auth-locale__select {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* ── An empty footer must not draw a bar ─────────────────────────────────────────────────
 * The card's footer holds one optional link (the provider's support URL). With no URL
 * configured `auth.css` still paints its background and padding, so the card ended in a grey
 * strip containing nothing — visible on every deployment that has not set a support link, which
 * is the default. `:empty` does not match whitespace, hence `:not(:has(a))`. */
.auth-card__footer:not(:has(a)) {
  display: none;
}

/* ── Phone ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-shell {
    padding: var(--space-4);
    justify-content: flex-start;
    padding-block-start: var(--space-8);
  }

  .auth-card {
    inline-size: 100%;
  }
}