/* ═══════════════════════════════════════════════════════════════════
   CHAT MERCATO — SIGN IN / AUTH PAGE THEME  (Light Mode)
   Drop this file after your main Bootstrap CSS on your auth pages.
   Mirrors the chatmercato.com landing page design system exactly.
   Supports [data-theme="dark"] and [data-theme="light"] on .
   DEFAULT is LIGHT — dark is the opt-in override.
═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts — identical to landing page & dashboard ── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800;12..96,900&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — LIGHT MODE (default)
═══════════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
  --bg-base:        #f4f9fe;
  --bg-elevated:    #ffffff;
  --bg-card:        #ffffff;
  --bg-glass:       rgba(15,40,80,0.03);
  --text-primary:   #0c1f35;
  --text-secondary: #2c4a6e;
  --text-muted:     #6b8aaa;
  --brand-cyan:     #0088a0;
  --brand-blue:     #1d6fe8;
  --brand-gradient: linear-gradient(135deg, #0088a0 0%, #1d6fe8 100%);
  --accent-green:   #16a34a;
  --accent-red:     #dc2626;
  --accent-gold:    #c97a0a;
  --border:         #d5e8f5;
  --border-strong:  rgba(0,136,160,0.3);
  --shadow:         0 8px 32px rgba(12,31,53,0.12);
  --shadow-sm:      0 2px 12px rgba(12,31,53,0.08);
  --shadow-glow:    0 0 40px rgba(0,136,160,0.12);
  --input-bg:       #f4f9fe;
  --input-border:   #d5e8f5;
  --font-display:   'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --radius:         14px;
  --radius-sm:      9px;
  --radius-xs:      6px;
  --transition:     300ms ease;
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — DARK MODE override
═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg-base:        #09172a;
  --bg-elevated:    #0f2035;
  --bg-card:        rgba(255,255,255,0.065);
  --bg-glass:       rgba(255,255,255,0.05);
  --text-primary:   #e6f4ff;
  --text-secondary: #8bb8d8;
  --text-muted:     #4e7190;
  --brand-cyan:     #00cfc4;
  --brand-blue:     #4da8ff;
  --brand-gradient: linear-gradient(135deg, #00cfc4 0%, #4da8ff 100%);
  --accent-green:   #22c55e;
  --accent-red:     #f43f5e;
  --accent-gold:    #ffc940;
  --border:         rgba(255,255,255,0.09);
  --border-strong:  rgba(0,207,196,0.25);
  --shadow:         0 8px 40px rgba(0,0,0,0.45);
  --shadow-sm:      0 2px 12px rgba(0,0,0,0.3);
  --shadow-glow:    0 0 40px rgba(0,207,196,0.14);
  --input-bg:       rgba(255,255,255,0.06);
  --input-border:   rgba(255,255,255,0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════════ */

html, body {
  font-family: var(--font-body) !important;
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
  transition: background-color var(--transition), color var(--transition);
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH WRAPPER  (#auth)
   — replaces: background: #dbdcde
═══════════════════════════════════════════════════════════════════ */

#auth {
  background: var(--bg-base) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Subtle background pattern — light geometric wash */
#auth::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 15% 20%, rgba(0,136,160,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 80%, rgba(29,111,232,0.06) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] #auth::before {
  background:
    radial-gradient(ellipse 80% 50% at 15% 20%, rgba(0,207,196,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 80%, rgba(77,168,255,0.07) 0%, transparent 55%);
}

#auth > * {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH CARD  (#auth .card)
   — replaces: background: #9fd5ff
═══════════════════════════════════════════════════════════════════ */

#auth .card {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow), var(--shadow-glow) !important;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
}

/* Card header area */
#auth .card .card-header,
#auth .card .auth-header {
  background: var(--bg-glass) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 2rem 2rem 1.5rem;
  text-align: center;
}

/* Card body */
#auth .card .card-body {
  background: transparent !important;
  padding: 2rem;
}

/* Card footer */
#auth .card .card-footer {
  background: var(--bg-glass) !important;
  border-top: 1px solid var(--border) !important;
  padding: 1rem 2rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH BRAND / LOGO
═══════════════════════════════════════════════════════════════════ */

#auth .auth-logo,
#auth .brand-logo,
#auth .logo {
  margin-bottom: 1rem;
}

#auth .auth-logo img,
#auth .brand-logo img {
  max-height: 48px;
  width: auto;
}

#auth .card-title,
#auth .auth-title,
#auth h1, #auth h2, #auth h3,
#auth h4, #auth h5, #auth h6 {
  font-family: var(--font-display) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary) !important;
  margin-bottom: 0.25rem;
}

#auth .card-subtitle,
#auth .auth-subtitle,
#auth p {
  font-family: var(--font-body) !important;
  color: var(--text-muted) !important;
  font-size: 0.875rem;
}

/* Gradient brand text (for "Chat Mercato" logo text if text-based) */
#auth .brand-name,
#auth .auth-brand {
  font-family: var(--font-display) !important;
  font-weight: 900;
  font-size: 1.5rem;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
}

/* ═══════════════════════════════════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════════════════════════════════ */

#auth .form-label {
  font-family: var(--font-body) !important;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary) !important;
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

#auth .form-control,
#auth .form-select {
  font-family: var(--font-body) !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  height: auto;
  transition: border-color 200ms, box-shadow 200ms, background 200ms;
}

#auth .form-control:focus,
#auth .form-select:focus {
  border-color: var(--brand-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,136,160,0.12) !important;
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  outline: none;
}

[data-theme="dark"] #auth .form-control:focus,
[data-theme="dark"] #auth .form-select:focus {
  box-shadow: 0 0 0 3px rgba(0,207,196,0.15) !important;
  background-color: var(--input-bg) !important;
}

#auth .form-control::placeholder {
  color: var(--text-muted) !important;
  font-weight: 400;
}

/* Input group (icon prefix/suffix) */
#auth .input-group-text {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color 200ms;
}

/* Sync input-group border on focus */
#auth .input-group:focus-within .input-group-text {
  border-color: var(--brand-cyan) !important;
  color: var(--brand-cyan) !important;
}

/* Checkbox & radio */
#auth .form-check-input {
  background-color: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: 4px;
}
#auth .form-check-input:checked {
  background-color: var(--brand-cyan) !important;
  border-color: var(--brand-cyan) !important;
}
#auth .form-check-label {
  font-family: var(--font-body) !important;
  font-size: 0.85rem;
  color: var(--text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN BUTTON  (.btn-primary)
   — replaces: background: #767786 / hover: #000000
═══════════════════════════════════════════════════════════════════ */

#auth .btn-primary,
.btn-primary {
  background: var(--brand-gradient) !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm) !important;
  color: #ffffff !important;
  padding: 0.65rem 1.5rem;
  width: 100%;
  transition: opacity 200ms, transform 150ms, box-shadow 200ms !important;
  position: relative;
  overflow: hidden;
}

/* Shimmer effect on hover */
#auth .btn-primary::after,
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 500ms ease;
}

#auth .btn-primary:hover::after,
.btn-primary:hover::after {
  transform: translateX(100%);
}

#auth .btn-primary:hover,
#auth .btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
  opacity: 0.92 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,136,160,0.3) !important;
  color: #ffffff !important;
}

[data-theme="dark"] #auth .btn-primary:hover,
[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(0,207,196,0.35) !important;
}

#auth .btn-primary:active,
.btn-primary:active {
  transform: translateY(0);
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECONDARY / OUTLINE BUTTONS
═══════════════════════════════════════════════════════════════════ */

#auth .btn-outline-primary {
  border: 1.5px solid var(--brand-cyan) !important;
  color: var(--brand-cyan) !important;
  background: transparent !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
  transition: background 200ms, box-shadow 200ms;
}
#auth .btn-outline-primary:hover {
  background: rgba(0,136,160,0.08) !important;
  box-shadow: 0 4px 12px rgba(0,136,160,0.15) !important;
}
[data-theme="dark"] #auth .btn-outline-primary:hover {
  background: rgba(0,207,196,0.1) !important;
}

#auth .btn-secondary,
#auth .btn-light {
  background: var(--bg-glass) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
  transition: background 200ms, border-color 200ms;
}
#auth .btn-secondary:hover,
#auth .btn-light:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DIVIDER  ("or continue with" separator)
═══════════════════════════════════════════════════════════════════ */

#auth .auth-divider,
#auth .divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
}
#auth .auth-divider::before,
#auth .auth-divider::after,
#auth .divider::before,
#auth .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   SOCIAL / SSO BUTTONS
═══════════════════════════════════════════════════════════════════ */

#auth .btn-social {
  background: var(--bg-glass) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius-sm) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  transition: background 200ms, border-color 200ms, box-shadow 200ms;
}
#auth .btn-social:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LINKS
═══════════════════════════════════════════════════════════════════ */

#auth a {
  color: var(--brand-cyan);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 200ms;
}
#auth a:hover { opacity: 0.75; }

#auth .forgot-link,
#auth .auth-link {
  font-size: 0.83rem;
  color: var(--brand-cyan) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ALERTS — validation, error messages
═══════════════════════════════════════════════════════════════════ */

#auth .alert {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.875rem;
  border: 1px solid transparent !important;
  padding: 0.75rem 1rem;
}
#auth .alert-danger  { background: rgba(220,38,38,0.08)  !important; border-color: rgba(220,38,38,0.2)   !important; color: var(--accent-red)   !important; }
#auth .alert-success { background: rgba(22,163,74,0.08)  !important; border-color: rgba(22,163,74,0.2)   !important; color: var(--accent-green) !important; }
#auth .alert-warning { background: rgba(201,122,10,0.08) !important; border-color: rgba(201,122,10,0.2)  !important; color: var(--accent-gold)  !important; }
#auth .alert-info    { background: rgba(0,136,160,0.08)  !important; border-color: rgba(0,136,160,0.2)   !important; color: var(--brand-cyan)   !important; }

[data-theme="dark"] #auth .alert-danger  { background: rgba(244,63,94,0.1)   !important; border-color: rgba(244,63,94,0.22)   !important; }
[data-theme="dark"] #auth .alert-success { background: rgba(34,197,94,0.1)   !important; border-color: rgba(34,197,94,0.22)   !important; }
[data-theme="dark"] #auth .alert-info    { background: rgba(0,207,196,0.1)   !important; border-color: rgba(0,207,196,0.22)   !important; }

/* Form validation states */
#auth .form-control.is-invalid {
  border-color: var(--accent-red) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1) !important;
}
#auth .invalid-feedback {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--accent-red) !important;
}
#auth .form-control.is-valid {
  border-color: var(--accent-green) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.1) !important;
}
#auth .valid-feedback {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--accent-green) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PASSWORD STRENGTH INDICATOR (if present)
═══════════════════════════════════════════════════════════════════ */

#auth .password-strength {
  height: 4px;
  border-radius: 20px;
  background: var(--border);
  margin-top: 0.5rem;
  overflow: hidden;
}
#auth .password-strength-bar {
  height: 100%;
  border-radius: 20px;
  transition: width 400ms ease, background 400ms ease;
}
#auth .password-strength-bar.weak   { background: var(--accent-red);   width: 30%; }
#auth .password-strength-bar.fair   { background: var(--accent-gold);  width: 60%; }
#auth .password-strength-bar.strong { background: var(--accent-green); width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   OTP / VERIFICATION CODE INPUTS (if present)
═══════════════════════════════════════════════════════════════════ */

#auth .otp-input,
#auth .code-input {
  width: 52px !important;
  height: 56px !important;
  text-align: center !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  background-color: var(--input-bg) !important;
  border: 2px solid var(--input-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  transition: border-color 200ms, box-shadow 200ms;
}
#auth .otp-input:focus,
#auth .code-input:focus {
  border-color: var(--brand-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,136,160,0.12) !important;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGE FOOTER TEXT  (T&C, privacy links etc.)
═══════════════════════════════════════════════════════════════════ */

#auth .auth-footer-text,
#auth .card-footer p,
#auth .card-footer small {
  font-family: var(--font-body) !important;
  font-size: 0.8rem;
  color: var(--text-muted) !important;
  line-height: 1.6;
}
#auth .card-footer a {
  color: var(--brand-cyan) !important;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR (for any overflow areas on auth page)
═══════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar            { width: 5px; height: 5px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: rgba(0,0,0,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,0.22); }
[data-theme="dark"] ::-webkit-scrollbar-thumb      { background: rgba(255,255,255,0.1); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.2); }

/* ═══════════════════════════════════════════════════════════════════
   SPINNER  (loading state on submit)
═══════════════════════════════════════════════════════════════════ */

#auth .spinner-border,
#auth .spinner-grow {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   THEME INIT SCRIPT — paste inline in  BEFORE 
   Defaults to LIGHT. Respects user toggle → OS preference → time.
   ---------------------------------------------------------------
   
   (function(){
     var s = localStorage.getItem('cm-theme');
     if (!s) {
       if (window.matchMedia('(prefers-color-scheme:dark)').matches)  s = 'dark';
       else if (window.matchMedia('(prefers-color-scheme:light)').matches) s = 'light';
       else { var h = new Date().getHours(); s = (h >= 6 && h < 20) ? 'light' : 'dark'; }
     }
     document.documentElement.setAttribute('data-theme', s);
   })();
   
═══════════════════════════════════════════════════════════════════ */