/* =========================================================
   THEME VARIABLES (Extracted from app.css for self-sufficiency)
   ========================================================= */

:root{
  --bg:#0b0f14;
  --surface:#101722;
  --surface2:#0f1620;
  --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --soft:rgba(255,255,255,.07);
  --focus:rgba(255,255,255,.18);
  --danger:rgba(255,92,92,.92);
  --good:rgba(80,210,140,.96);
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --r:16px;
  --gap:12px;
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  --topbarH:52px;
  /* Specific tokens for Auth Polish/Card/Input (extracted from app.css) */
  --panel: #161e29;
  --input: #0c121b;
  --primary: #3b82f6; /* Common primary color */
}

html[data-theme="light"]{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface2:#ffffff;
  --border:rgba(0,0,0,.10);
  --text:rgba(0,0,0,.88);
  --muted:rgba(0,0,0,.56);
  --soft:rgba(0,0,0,.06);
  --focus:rgba(0,0,0,.14);
  --shadow:0 10px 28px rgba(0,0,0,.12);
  /* Specific tokens for Auth Polish/Card/Input (extracted from app.css) */
  --panel: #ffffff;
  --input: #fcfcfc;
  --primary: #3b82f6; /* Common primary color */
}

/* =========================================================
   GLOBAL RESETS & BASE STYLES (Extracted from app.css)
   ========================================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
}

/* =========================================================
   TOP BAR (Minimal, Auth Specific)
   Note: Topbar is kept simple as it appears in login.html
   ========================================================= */
.topbar{
  height:var(--topbarH);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:20;
  /* Need to ensure these mixins work, if not, use a solid color */
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(120%) blur(10px);
}

.topbar__left{display:flex;align-items:center;gap:10px}
.topbar__center{display:flex;justify-content:center}
.topbar__right{display:flex;justify-content:flex-end}

/* =====================================================
   AUTH PAGES — FINAL, STABLE, NO SIDE EFFECTS
   ===================================================== */

/* -------- PAGE -------- */
.auth-page{
  min-height: 100vh;
  /* Applying fancy background from app.css's polish section */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(60,120,255,.08), transparent 40%),
    radial-gradient(900px 500px at 90% 10%, rgba(120,200,255,.06), transparent 35%),
    var(--bg);
  color: var(--text);
}

/* Light mode auth background */
html[data-theme="light"] .auth-page {
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(0,0,0,.04), transparent 40%),
    radial-gradient(700px 400px at 90% 10%, rgba(0,0,0,.03), transparent 35%),
    var(--bg);
}

/* -------- CENTERED CONTAINER (FIX WIDTH ISSUE) -------- */
.auth-container{
  max-width: 520px;          /* 🔒 HARD LIMIT */
  margin: 48px auto;
  padding: 0 12px;
}

/* -------- CARD -------- */
.auth-card{
  /* Applying polish styles from app.css */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.01)
  ), var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
  padding: 20px;
}

/* Light mode auth card — stronger contrast */
html[data-theme="light"] .auth-page .card.auth-card {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.9),
      rgba(248,250,252,0.95)
    );
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 16px;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

/* -------- HEADER -------- */
.auth-title{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.auth-help{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

/* -------- FIELDS -------- */
.auth-card label{
  font-size: 12px;
  color: var(--muted);
}

.auth-card input{
  width: 100%;
  /* Applying polish styles from app.css */
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
}

/* Inputs in auth pages (light mode) */
html[data-theme="light"] .auth-page input {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.18);
}


/* -------- PRIMARY BUTTON (EXPLICIT, NO MAGIC) -------- */
 
 
 /* ===== AUTH PRIMARY BUTTON (FINAL FIX) ===== */

.auth-card .btn.primary{
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border-radius: 14px;

  /* main fill */
  background: var(--primary);

  /* 👇 FIX: Use solid color with better opacity */
  border: 1.5px solid rgba(0, 0, 0, 0.15);

  color: #ffffff;
  font-weight: 600;

  /* depth (Dark Mode Base) */
  box-shadow:
    0 4px 10px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.35); 

  cursor: pointer;
}
 
 /* Hover */
.auth-card .btn.primary:hover{
  filter: brightness(1.05);
  /* 👇 Darken border slightly on hover for better feedback */
  border-color: rgba(0, 0, 0, 0.25);
}

/* ===== DARK MODE OVERRIDE (for box-shadow fix) ===== */
/* This addresses the 'border on the top' issue in dark mode */
html[data-theme="dark"] .auth-card .btn.primary {
  box-shadow:
    0 4px 10px rgba(0,0,0,.5), /* Darker drop shadow */
    inset 0 1px 0 rgba(255,255,255,.1); /* Reduced inner glow for less "top border" */
}

/* ===== LIGHT MODE OVERRIDE ===== */
/* This addresses the visibility issue in light mode */
html[data-theme="light"] .auth-card .btn.primary{
  /* keep same primary color */
  background: var(--primary);
  color: #ffffff; /* ⬅️ ADDED: Ensure text is white for contrast */

  /* 👇 FIX: Slightly darker border for better contrast on light background */
  border: 1.5px solid rgba(0, 0, 0, 0.2);

  /* slightly stronger shadow in light mode */
  box-shadow:
    0 3px 8px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* Light mode hover */
html[data-theme="light"] .auth-card .btn.primary:hover{
  border-color: rgba(0, 0, 0, 0.3);
}

/* ============================
   AUTH BUTTON – DISABLED FIX
   ============================ */

.auth-card .btn.primary:disabled,
.auth-card .btn.primary[disabled]{
  opacity: 1;                 /* 🔥 critical */
  background: #e9ecef;        /* visible neutral */
  color: #9aa0a6;             /* readable */
  border: 1.5px solid #cfd4da;
  box-shadow: none;
  cursor: not-allowed;
}

/* Dark mode disabled - ensure border is visible */
html[data-theme="dark"] .auth-card .btn.primary:disabled{
  background: #1f2933;
  color: #7b8794;
  border: 1.5px solid #2d3748;
}

 
/* -------- QR -------- */
.mfa-qr-wrap{
  display: flex;
  justify-content: center;
  margin: 14px 0;
}
.mfa-qr-wrap img{
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
}


/* =========================
   TOAST (SUCCESS / ERROR)
   ========================= */
 
 /* =========================
   AUTH BRAND (LOGO + TITLE)
========================= */
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.auth-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.auth-brand__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.auth-brand__sub {
  font-size: 12px;
  color: var(--muted);
}
/* =========================================================
   AUTH ERROR MESSAGES (Add these to the bottom of your auth.css)
   ========================================================= */

/* Make error messages more visible and persistent */
.auth-msg {
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 12px;
  min-height: 24px;
  font-size: 13px;
  display: none; /* Hidden by default */
}

.auth-msg.error {
  background-color: rgba(220, 53, 69, 0.1);
  color: #ff6b6b; /* Using your existing error color */
  border: 1px solid rgba(220, 53, 69, 0.2);
  display: block;
}

.auth-msg.success {
  background-color: rgba(80, 210, 140, 0.1); /* Using your existing good color */
  color: #3ddc97; /* Your existing success color */
  border: 1px solid rgba(80, 210, 140, 0.3);
  display: block;
}

/* Light mode adjustments */
html[data-theme="light"] .auth-msg.error {
  background-color: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.15);
}

html[data-theme="light"] .auth-msg.success {
  background-color: rgba(80, 210, 140, 0.08);
  border: 1px solid rgba(80, 210, 140, 0.15);
}

/* Toast improvements */
#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

#toast.success {
  background: rgba(80, 210, 140, .15);
  color: #3ddc97;
  border: 1px solid rgba(80, 210, 140, .5);
}

#toast.error {
  background: rgba(229, 57, 53, .15);
  color: #ff6b6b;
  border: 1px solid rgba(229, 57, 53, .5);
}

#toast .icon {
  font-size: 16px;
}

/* Animation for toast */
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#toast {
  animation: fadeIn 0.3s ease;
}