/* Auth pages (login + register) — skin for the feeberse/auth-bundle screens.
 *
 * The bundle ships these templates with their own inline "Twitter blue" <style>
 * (background #0f1923, accent #1d9bf0). Our overrides in
 *   templates/bundles/FeeberseAuthBundle/auth/{login,register}.html.twig
 * empty those style blocks; this file re-skins the SAME markup classes using v2
 * design tokens so the screens match the rest of the score.
 *
 * Everything is scoped under `.auth-page` (set on <body> by templates/auth/base.html.twig)
 * so the generic class names (.btn, .form-group, .hidden, .error-message…) can't
 * leak into other pages. Class names mirror the bundle markup 1:1 — we only
 * restyle, we don't rename.
 *
 * Loaded globally via app.js (like the other pages/*.css); inert outside .auth-page.
 */
@layer pages {
  .auth-page {
    /* background: var(--color-bg); */
    color: var(--color-text);
    font-family: var(--font-body);
  }

  /* Centered, single-purpose shell (replaces the bundle's body{flex;center}). */
  .auth-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
  }

  /* Card container — both login and register wrappers. */
  .auth-page .login-container,
  .auth-page .register-container {
    width: 100%;
    max-width: 400px;
    padding: var(--space-6);
    background: var(--color-surface);
    /* No card chrome: the form is the page surface (standalone) / the modal
       surface (porra gate). Both already paint --color-surface, so a border +
       radius here only reads as a stray card-in-card. */
    /* border: 1px solid var(--color-border-subtle); */
    /* border-radius: var(--radius-lg); */
  }

  /* Brand header (logo + subtitle). */
  .auth-page .login-header,
  .auth-page .register-header {
    text-align: center;
    margin-bottom: var(--space-6);
  }

  .auth-page .login-header__logo {
    height: 44px;
    width: auto;
    margin: 0 auto var(--space-3);
  }

  .auth-page .login-header p,
  .auth-page .register-header p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  /* Form fields. */
  .auth-page .form-group {
    margin-bottom: var(--space-4);
  }

  .auth-page label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .auth-page input[type="date"],
  .auth-page input[type="email"],
  .auth-page input[type="password"],
  .auth-page input[type="text"],
  .auth-page textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--duration-fast) var(--easing-default);
  }

  .auth-page input::placeholder,
  .auth-page textarea::placeholder {
    color: var(--color-text-subtle);
  }

  .auth-page input:focus,
  .auth-page textarea:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  .auth-page textarea {
    resize: vertical;
    min-height: 80px;
  }

  /* Buttons. */
  .auth-page .btn {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--easing-default);
  }

  .auth-page .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .auth-page .btn-primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }

  .auth-page .btn-primary:hover:not(:disabled) {
    opacity: 0.9;
  }

  .auth-page .btn-secondary {
    margin-top: var(--space-2);
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
  }

  .auth-page .btn-secondary:hover:not(:disabled) {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }

  /* Error banner. */
  .auth-page .error-message {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-loss) 40%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-loss) 14%, transparent);
    color: var(--color-loss);
    font-size: var(--text-sm);
  }

  /* Success banner (e.g. forgot-password "code sent" / "password updated"). */
  .auth-page .success-message {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
    font-size: var(--text-sm);
  }

  /* Footer links (login ⇄ register). */
  .auth-page .register-link,
  .auth-page .login-link {
    margin-top: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .auth-page .register-link a,
  .auth-page .login-link a {
    color: var(--color-accent);
  }

  .auth-page .register-link a:hover,
  .auth-page .login-link a:hover {
    text-decoration: underline;
  }

  /* Register multi-step indicator. */
  .auth-page .step-indicator {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }

  .auth-page .step-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    transition: background var(--duration-normal) var(--easing-default);
  }

  .auth-page .step-dot.active {
    background: var(--color-accent);
  }

  .auth-page .step-title {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .auth-page .step-description {
    margin-bottom: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  /* Verification code input — big, spaced digits. */
  .auth-page .verification-input {
    text-align: center;
    font-family: var(--font-title);
    font-size: var(--text-2xl);
    letter-spacing: 8px;
  }

  /* Nickname availability feedback (states toggled by the bundle JS). */
  .auth-page .nickname-status {
    min-height: 18px;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
  }

  .auth-page .nickname-status.checking {
    color: var(--color-text-muted);
  }

  .auth-page .nickname-status.available {
    color: var(--color-success);
  }

  .auth-page .nickname-status.taken,
  .auth-page .nickname-status.error {
    color: var(--color-loss);
  }

  /* Social buttons — feature OFF for now, kept token-aware for when it lands. */
  .auth-page .social-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0;
  }

  .auth-page .social-divider::before,
  .auth-page .social-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
  }

  .auth-page .social-divider span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .auth-page .social-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .auth-page .btn-social {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }

  .auth-page .btn-social svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* Step / element visibility toggled by the bundle JS via the `hidden` class.
     Must beat `display` set above (kept !important to mirror the documented
     pattern in pages/match-detail.css). */
  .auth-page .hidden {
    display: none !important;
  }
}

/* Password field enhancements: reveal ("eye") button, strength meter, requirement
   checklist + inline field hints. Scoped under `.auth-page`, so they apply both
   on the standalone /auth pages AND inside the porra auth-gate modal (its embed
   carries `.auth-page`). */
@layer pages {
  /* Reveal button sits over the right edge of the input. */
  .auth-page .password-field {
    position: relative;
  }

  .auth-page .password-field input {
    padding-right: var(--space-12);
  }

  .auth-page .password-reveal {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--easing-default);
  }

  .auth-page .password-reveal:hover {
    color: var(--color-text);
  }

  .auth-page .password-reveal:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .auth-page .password-reveal__icon {
    width: 20px;
    height: 20px;
  }

  .auth-page .password-reveal__icon[hidden] {
    display: none;
  }

  /* Strength bar + label. Fill width/colour are driven by `data-score` (0..4). */
  .auth-page .password-strength {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .auth-page .password-strength__track {
    flex: 1;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    overflow: hidden;
  }

  .auth-page .password-strength__fill {
    width: 0;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-loss);
    transition: width var(--duration-fast) var(--easing-default),
                background-color var(--duration-fast) var(--easing-default);
  }

  .auth-page .password-strength__label {
    min-width: 4em;
    text-align: right;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
  }

  .auth-page [data-score="1"] .password-strength__fill { width: 33%; background: var(--color-loss); }
  .auth-page [data-score="2"] .password-strength__fill { width: 55%; background: var(--color-loss); }
  .auth-page [data-score="3"] .password-strength__fill { width: 75%; background: var(--color-warning-strong); }
  .auth-page [data-score="4"] .password-strength__fill { width: 100%; background: var(--color-success); }

  /* Requirement checklist — each item greens up as its rule is met. */
  .auth-page .password-reqs {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1) var(--space-3);
  }

  .auth-page .password-reqs__item {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    transition: color var(--duration-fast) var(--easing-default);
  }

  .auth-page .password-reqs__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-border);
    transition: border-color var(--duration-fast) var(--easing-default),
                background-color var(--duration-fast) var(--easing-default);
  }

  .auth-page .password-reqs__item.is-met {
    color: var(--color-success);
  }

  .auth-page .password-reqs__item.is-met::before {
    border-color: var(--color-success);
    background: var(--color-success);
  }

  /* Inline field hint (spam notice, nickname rules). */
  .auth-page .field-hint {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--color-text-subtle);
  }
}
