/* ============================================================
   Ximiti mobile OAuth2 sign-in/sign-up (#144/#145) - the pages
   `/login` and `/register` render in the system browser
   (flutter_web_auth_2, ADR 0009), not an embedded webview, so this
   matches the mobile app's own look (design/mobile/index.html's
   AuthScreen: brand mark, pill-shaped button, icon-led fields)
   rather than the back-office's admin-facing one - a real customer
   must recognize this as part of Ximiti, not land on what reads as
   an internal admin login form.

   Same conventions as backoffice.css (see its own header comment):
   shared tokens.css, plain semantic markup with no styling-only
   classes - selectors follow element path (`body[data-layout=...]
   > main form label`) instead.

   These pages are also shared with the Casino app (layouts/site-auth.ftl
   sets body[data-brand]) - button/focus styles below deliberately read
   the semantic --brand/--brand-strong/--on-brand tokens (tokens.css),
   not the raw --jaune/--cafe-700 scale, so casino-tokens.css's
   override reskins them without touching this file.
   ============================================================ */

@import url('tokens.css');

body[data-layout="mobile-auth"] {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  background: var(--creme-25);
  color: var(--cafe-700);
  font-family: var(--font-text);

  > main {
    width: 100%;
    max-width: 27.5rem;
    box-sizing: border-box;
    padding: 1.5rem 1.375rem 2.5rem;
    text-align: center;

    > img {
      height: 4rem;
    }

    /* The "by Epiximi" mark under the brand logo (login/register/forgot-
       password/reset-password/verify-email - see layouts/site-auth.ftl):
       small and muted, a trust signal rather than a second brand mark. */
    > img.brand-badge {
      display: block;
      position: relative;
      left: 50%;
      height: 1.75rem;
    }

    h1 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.75rem;
      letter-spacing: -0.02em;
      margin: 1rem 0 0;
    }

    > p {
      color: var(--creme-600);
      font-size: 0.875rem;
      max-width: 32ch;
      margin: 0.5rem auto 1.5rem;
    }

    form {
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 1.25rem;

      /* The input lives inside its label (implicit for/id association,
         same pattern as backoffice.css's own "Rester connecté" checkbox) -
         label and input read as one field, one gap between them, instead
         of both being separate flex children the form's own field-to-field
         gap would space apart identically. */
      label {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        font-weight: 600;
        font-size: 0.875rem;
      }

      input[type="text"],
      input[type="email"],
      input[type="password"] {
        width: 100%;
        box-sizing: border-box;
        height: 3.125rem;
        padding: 0 0.875rem;
        border: 0.09375rem solid var(--creme-300);
        border-radius: var(--radius-md);
        font-family: var(--font-text);
        font-size: 1rem;
        font-weight: 400;
      }

      /* Leading field icon, drawn straight from a CSS background rather than
         wrapping the input in its own markup just to position an <svg>. */
      input[type="email"],
      input[type="password"] {
        padding-left: 2.625rem;
        background-repeat: no-repeat;
        background-position: 0.875rem center;
        background-size: 1.125rem;
      }

      input[type="email"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A99C90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
      }

      input[type="password"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A99C90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
      }

      input:focus {
        outline: none;
        border-color: var(--brand-strong);
      }

      button {
        margin-top: 0.375rem;
        height: 3.5rem;
        border: none;
        border-radius: var(--radius-pill);
        background: var(--brand);
        color: var(--on-brand);
        font-family: var(--font-text);
        font-weight: 700;
        font-size: 1.125rem;
        cursor: pointer;
      }

      button:hover {
        background: var(--brand-strong);
      }
    }

    > p:last-child {
      font-size: 0.875rem;
      color: var(--creme-600);

      a {
        color: var(--cafe-700);
        white-space: nowrap;
      }
    }
  }
}