/* ============================================================================
 * AUTH MODERN - "Copper & Petrol" Design for Login / Password Reset
 * ============================================================================
 *
 * PURPOSE
 * -------
 * Restyles the admin authentication pages (login, forgot-password,
 * reset-password) to match the "Copper & Petrol" design language
 * introduced in marketing-modern.css for the public marketing pages.
 *
 * This file is SELF-CONTAINED: it defines its own tokens and base
 * styles so it does NOT depend on marketing-modern.css being loaded.
 *
 * PAGES COVERED
 * -------------
 *   - auth/login.blade.php          (standalone HTML, loads this directly)
 *   - auth/passwords/email.blade.php (extends layouts.guest)
 *   - auth/passwords/reset.blade.php (extends layouts.guest)
 *
 * DESIGN NOTES
 * ------------
 * - The login page is used for BOTH /admin/login (global) AND
 *   /{tenant}/login (tenant). Tenant branding via --primary-color
 *   is preserved for the logo/heading area; submit buttons and
 *   accent colors use the Copper palette for consistency.
 * - Fraunces (editorial serif) + Inter (body) via Google Fonts,
 *   loaded in layouts/guest.blade.php and auth/login.blade.php.
 *
 * MAINTENANCE
 * -----------
 * - All new class names prefixed "auth-" to avoid collisions.
 * - If you change the color palette here, also update
 *   marketing-modern.css to stay in sync (shared design language).
 * ========================================================================== */


/* ============================================================
 * 1. DESIGN TOKENS
 * ============================================================ */
:root {
  /* Copper / terracotta (same as marketing-modern.css) */
  --auth-copper-300: #e0a37e;
  --auth-copper-400: #cf8355;
  --auth-copper-500: #bf6b3c;
  --auth-copper-600: #a5552b;
  --auth-copper-700: #8a4522;

  /* Petrol green (for links / secondary accents) */
  --auth-petrol-500: #33706c;
  --auth-petrol-700: #1f4e4b;
  --auth-petrol-900: #12312f;

  /* Warm neutrals */
  --auth-cream-bg:   #f6f1e8;
  --auth-cream-card: #fffdf9;
  --auth-line:       #e8ddcd;
  --auth-ink:        #2b2521;
  --auth-ink-soft:   #5d554c;
  --auth-ink-mute:   #8a8177;

  /* Effects */
  --auth-radius-lg: 28px;
  --auth-radius-md: 18px;
  --auth-radius-sm: 12px;
  --auth-shadow-soft: 0 10px 30px -12px rgba(43, 37, 33, 0.18);
  --auth-shadow-lift: 0 24px 50px -20px rgba(43, 37, 33, 0.28);
  --auth-grad-copper: linear-gradient(135deg, #d0834f 0%, #b85c33 55%, #a5522c 100%);

  /* Fonts */
  --auth-font-display: 'Fraunces', 'DM Serif Display', Georgia, serif;
  --auth-font-body: 'Inter', 'Poppins', 'Segoe UI', sans-serif;
}


/* ============================================================
 * 2. BASE / TYPOGRAPHY
 * ============================================================ */
body {
  font-family: var(--auth-font-body);
  color: var(--auth-ink-soft);
  background:
    radial-gradient(900px 450px at 50% -80px, rgba(208, 131, 79, 0.10), transparent 70%),
    var(--auth-cream-bg);
  min-height: 100vh;
  margin: 0;
}

::selection {
  background: var(--auth-copper-400);
  color: #fff;
}


/* ============================================================
 * 3. AUTH PAGE LAYOUT
 * ============================================================
 * Shared by login (standalone) and password pages (via guest layout).
 * Centered card with a warm cream surface.
 * ============================================================ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 440px;
}

/* Header / logo area */
.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-logo {
  display: inline-block;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 6px 14px rgba(43, 37, 33, 0.15));
  transition: transform 0.3s ease;
}
.auth-logo:hover {
  transform: scale(1.03);
}
.auth-logo img {
  height: 80px;
  width: auto;
}

.auth-title {
  font-family: var(--auth-font-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--auth-ink);
  margin: 0.5rem 0 0.3rem;
  letter-spacing: -0.01em;
}

.auth-subtitle {
  font-size: 0.95rem;
  color: var(--auth-ink-mute);
  margin: 0;
}

/* Form card: cream surface, hairline border, soft shadow */
.auth-form-card {
  background: var(--auth-cream-card);
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius-lg);
  box-shadow: var(--auth-shadow-soft);
  padding: 2.2rem 2rem;
}

/* Decorative copper glow (behind the card, bottom-right) */
.auth-glow {
  position: fixed;
  bottom: -200px;
  right: -120px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208, 131, 79, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.auth-page { position: relative; }
.auth-card { position: relative; z-index: 1; }


/* ============================================================
 * 4. FORM ELEMENTS
 * ============================================================ */
.auth-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--auth-ink);
  margin-bottom: 0.4rem;
}

.auth-input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1.5px solid var(--auth-line);
  border-radius: var(--auth-radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--auth-ink);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}
.auth-input::placeholder {
  color: var(--auth-ink-mute);
  opacity: 0.7;
}
.auth-input:focus {
  outline: none;
  border-color: var(--auth-copper-400);
  box-shadow: 0 0 0 4px rgba(191, 107, 60, 0.14);
}

/* Error state */
.auth-input.input-error {
  border-color: #e74c3c;
}
.auth-input.input-error:focus {
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.14);
}

/* Read-only input (email in reset form) */
.auth-input[readonly] {
  background: var(--auth-cream-bg);
  color: var(--auth-ink-mute);
  cursor: not-allowed;
}

/* Password toggle button */
.auth-input-group {
  position: relative;
}
.auth-input-group .auth-input {
  padding-right: 2.8rem;
}
.auth-toggle-pw {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--auth-ink-mute);
  cursor: pointer;
  padding: 0.3rem;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}
.auth-toggle-pw:hover { color: var(--auth-ink); }
.auth-toggle-pw svg { width: 20px; height: 20px; }

/* Error messages */
.auth-error {
  font-size: 0.85rem;
  color: #c0392b;
  margin-top: 0.4rem;
}

/* Alert boxes */
.auth-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: var(--auth-radius-sm);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.auth-alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  border-radius: var(--auth-radius-sm);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}


/* ============================================================
 * 5. BUTTONS
 * ============================================================ */
/* Primary submit: copper gradient pill */
.auth-btn-submit {
  display: block;
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: var(--auth-grad-copper);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 14px 28px -12px rgba(165, 82, 44, 0.60);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.auth-btn-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -12px rgba(165, 82, 44, 0.70);
}
.auth-btn-submit:active {
  transform: translateY(0);
}


/* ============================================================
 * 6. LINKS
 * ============================================================ */
.auth-link {
  color: var(--auth-copper-600);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.auth-link:hover {
  color: var(--auth-copper-700);
  text-decoration: underline;
}

.auth-link-petrol {
  color: var(--auth-petrol-700);
}
.auth-link-petrol:hover {
  color: var(--auth-petrol-900);
}


/* ============================================================
 * 7. CHECKBOX
 * ============================================================ */
.auth-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--auth-copper-500);
  border-radius: 4px;
  cursor: pointer;
}


/* ============================================================
 * 8. SOCIAL LOGIN
 * ============================================================ */
.auth-social-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  color: var(--auth-ink-mute);
  font-size: 0.8rem;
}
.auth-social-divider::before,
.auth-social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--auth-line);
}

.auth-btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.7rem 1rem;
  background: #fff;
  border: 1.5px solid var(--auth-line);
  border-radius: var(--auth-radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--auth-ink-soft);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.auth-btn-social:hover {
  border-color: var(--auth-copper-300);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.1);
  background: #fffdf9;
}

.auth-btn-social img {
  height: 20px;
  width: 20px;
  margin-right: 0.6rem;
}

.auth-btn-social:disabled,
.auth-btn-social.disabled {
  background: var(--auth-cream-bg);
  color: var(--auth-ink-mute);
  border-color: var(--auth-line);
  cursor: not-allowed;
  opacity: 0.7;
}
.auth-btn-social:disabled img {
  opacity: 0.35;
}


/* ============================================================
 * 9. RESPONSIVE
 * ============================================================ */
@media (max-width: 480px) {
  .auth-page { padding: 1rem 0.75rem; }
  .auth-form-card { padding: 1.6rem 1.3rem; }
  .auth-title { font-size: 1.7rem; }
}