/* Ported from src/pages/backoffice/login.astro. Self-contained on purpose —
   this page does not use the public site's header/footer/layout, so it
   defines its own tokens rather than relying on auchan.css.

   Every non-root selector below is scoped under .login-page (or
   body.backoffice-auth). Propshaft's `stylesheet_link_tag :app` links every
   file under app/assets/stylesheets on *every* page regardless of
   @import/layout, so an unscoped selector here would leak onto the public
   site (this happened for real with a bare `.field label` rule — it pushed
   the required-field asterisk on the public contact form to the far right). */
:root {
  --red-600: #e0001a;
  --red-700: #b80015;
  --red-50: #fff1f1;
  --gray-50: #f7f7fa;
  --gray-100: #f1f5f9;
  --gray-200: #e5e7eb;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-700: #334155;
  --gray-900: #0f172a;
  --auth-color-primary: var(--red-600);
  --auth-color-primary-dark: var(--red-700);
  --auth-color-border: var(--gray-200);
  --auth-color-text-title: var(--gray-900);
  --auth-color-text-body: var(--gray-700);
  --auth-color-text-muted: #475569;
  --auth-color-input-bg: var(--gray-50);
  --auth-color-surface: #ffffff;
  --auth-radius-sm: 8px;
  --auth-radius-md: 16px;
  --auth-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --auth-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

body.backoffice-auth {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--gray-50);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

.login-page { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: 100vh; }

/* ── Left panel — matches backoffice sidebar ── */
.login-page .login-left { background: var(--gray-900); color: #fff; padding: 48px; display: flex; flex-direction: column; gap: 48px; position: relative; overflow: hidden; }
.login-page .login-left::before { content: ''; position: absolute; top: -160px; right: -160px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(224,0,26,0.12) 0%, transparent 70%); pointer-events: none; }

.login-page .brand { display: flex; align-items: center; gap: 16px; }
.login-page .brand-logo { filter: brightness(0) invert(1); }
.login-page .brand-label { font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.07); padding: 4px 10px; border-radius: var(--auth-radius-sm); }

.login-page .tagline h1 { font-family: 'Outfit', sans-serif; font-size: clamp(28px, 3vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; }
.login-page .tagline p { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.6; }

.login-page .features { display: flex; flex-direction: column; gap: 16px; margin-top: auto; }
.login-page .feature-item { display: flex; align-items: center; gap: 16px; font-size: 14px; color: rgba(255,255,255,0.65); }
.login-page .feature-icon { width: 36px; height: 36px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--auth-radius-sm); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); flex-shrink: 0; }

/* ── Right panel ── */
.login-page .login-right { display: flex; align-items: center; justify-content: center; padding: clamp(32px, 5vw, 64px); background: var(--gray-50); min-width: 0; }

.login-page .login-card { width: 100%; max-width: 420px; animation: login-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes login-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.login-page .login-card-header { margin-bottom: 32px; }
.login-page .login-card-header h2 { font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 700; color: var(--auth-color-text-title); letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.25; }
.login-page .login-card-header p { font-size: 14px; color: var(--auth-color-text-muted); line-height: 1.5; }

.login-page .error-banner { display: flex; align-items: center; gap: 10px; background: var(--red-50); border: 1px solid #ffc7c7; border-radius: var(--auth-radius-sm); padding: 12px 16px; font-size: 13px; color: var(--auth-color-primary-dark); margin-bottom: 24px; }
.login-page .notice-banner { display: flex; align-items: center; gap: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: var(--auth-radius-sm); padding: 12px 16px; font-size: 13px; color: #047857; margin-bottom: 24px; }

.login-page .field { margin-bottom: 24px; }
.login-page .field label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--auth-color-text-muted); margin-bottom: 8px; }

.login-page .toggle-pw { background: none; border: none; cursor: pointer; color: var(--gray-400); padding: 0; display: flex; align-items: center; text-transform: none; letter-spacing: normal; font-weight: 500; }
.login-page .toggle-pw:hover { color: var(--auth-color-text-title); }

.login-page .field input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--auth-color-border); border-radius: var(--auth-radius-sm); font-family: inherit; font-size: 15px; font-weight: 500; color: var(--auth-color-text-title); outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: var(--auth-color-input-bg); }
.login-page .field input:focus { border-color: var(--auth-color-primary); box-shadow: 0 0 0 3px rgba(224,0,26,0.08); background: var(--auth-color-surface); }
.login-page .field input::placeholder { color: var(--gray-400); }

.login-page .forgot-pw-link { display: block; margin-top: -12px; margin-bottom: 20px; font-size: 13px; color: var(--auth-color-text-muted); text-decoration: none; transition: color 0.2s; }
.login-page .forgot-pw-link:hover { color: var(--auth-color-primary); }

.login-page .btn-login { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; background: var(--auth-color-primary); color: #fff; border: none; border-radius: var(--auth-radius-sm); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; box-shadow: var(--auth-shadow-sm); margin-bottom: 24px; }
.login-page .btn-login:hover:not(:disabled) { background: var(--auth-color-primary-dark); box-shadow: var(--auth-shadow-md); }
.login-page .btn-login:disabled { opacity: 0.7; cursor: not-allowed; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.login-page form.shake { animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

.login-page .back-link { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--auth-color-text-muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color 0.2s; }
.login-page .back-link:hover { color: var(--auth-color-text-title); }

@media (max-width: 768px) {
  .login-page { grid-template-columns: 1fr; }
  .login-page .login-left { display: none; }
  .login-page .login-right { padding: 32px 24px; align-items: flex-start; padding-top: max(80px, env(safe-area-inset-top)); min-height: 100vh; min-height: 100dvh; }
}