/* ==========================================================================
   QFS PREMIUM BRIDGE — compatibility layer for the user dashboard area
   --------------------------------------------------------------------------
   Loads AFTER qfs-premium.css on all USER pages (via includes/page_chrome.php).
   Maps the legacy component classes (.glass-card, .badge-*, .qfs-modal, ...)
   onto the QFS PREMIUM blue→emerald design tokens so every user page gets
   the premium look without touching its markup.
   ADMIN keeps css/aurora.css — this file is never loaded there.
   ========================================================================== */

/* ---------- legacy aliases over premium tokens ---------- */
:root {
  --qfs-radius: 22px;
}

/* aurora backdrop alias -> premium aurora + blobs
   (legacy markup: <div class="aurora-bg"><span class="aurora-blob b3"></span>...) */
.aurora-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(90% 70% at 100% 10%, rgba(16,185,129,.14), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
}
.aurora-blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: var(--blob-op); will-change: transform;
}
.aurora-blob.b1 { width:46vw; height:46vw; min-width:340px; min-height:340px; top:-14vw; left:-8vw;
  background: radial-gradient(circle at 30% 30%, #0ea5e9, transparent 68%); animation: drift1 26s ease-in-out infinite; }
.aurora-blob.b2 { width:40vw; height:40vw; min-width:300px; min-height:300px; top:22vh; right:-12vw;
  background: radial-gradient(circle at 60% 40%, #10b981, transparent 68%); animation: drift2 32s ease-in-out infinite; }
.aurora-blob.b3 { width:44vw; height:44vw; min-width:320px; min-height:320px; bottom:-16vw; left:16vw;
  background: radial-gradient(circle at 50% 50%, #0284c7, transparent 66%); animation: drift3 38s ease-in-out infinite; }
.aurora-blob.b4 { width:28vw; height:28vw; min-width:220px; min-height:220px; top:52vh; left:-6vw;
  background: radial-gradient(circle at 50% 50%, #22d3ee, transparent 66%); animation: drift2 30s ease-in-out infinite reverse; }
.aurora-bg::before, .aurora-bg::after { content: none; }

/* glass system */
.glass, .glass-card, .glass-hi, .glass-pill {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--qfs-radius);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease);
}
.glass-card { padding: 1.5rem; overflow: hidden; }
.glass-hi {
  background: linear-gradient(150deg, rgba(56,189,248,.14), rgba(16,185,129,.07) 55%, var(--glass));
  border-color: var(--stroke-2);
}
.glass-pill { border-radius: 999px; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; }
.glass-card:hover, .glass:hover { border-color: var(--stroke-2); }
a.glass-card:hover { transform: translateY(-3px); box-shadow: var(--glow); }

/* typography helpers */
.text-mute { color: var(--mute) !important; }
.text-dim  { color: var(--mute) !important; opacity: .85; }
.text-emerald { color: var(--emerald-soft); }
.text-teal    { color: var(--cyan); }
.text-mint    { color: var(--mint); }
.font-mono, .counter { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gradient-emerald-teal {
  background: linear-gradient(100deg, var(--blu-400), var(--emerald) 55%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* buttons */
.btn-primary {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(135deg, var(--blu-400), var(--emerald) 65%, var(--cyan));
  color: #022030; font-weight: 700; font-size: .92rem;
  padding: .72rem 1.35rem; border-radius: 16px; border: none; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s ease; text-decoration: none;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 26px 58px -18px rgba(14,165,233,.95); color: #022030; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--glass-3); border: 1px solid var(--stroke); color: var(--text);
  font-weight: 600; font-size: .92rem; padding: .72rem 1.35rem; border-radius: 16px; cursor: pointer;
  transition: transform .35s var(--ease), border-color .35s ease, color .35s ease; text-decoration: none;
}
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--em-400); color: var(--em-300); box-shadow: var(--glow); }
.btn-danger {
  display: inline-flex; align-items: center; gap: .6rem;
  background: linear-gradient(135deg, #f87171, #ef4444); color: #2a0509;
  font-weight: 700; padding: .72rem 1.35rem; border-radius: 16px; border: none; cursor: pointer;
  transition: transform .35s var(--ease); text-decoration: none;
}
.btn-danger:hover { transform: translateY(-3px); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .68rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--glass-3); border: 1px solid var(--stroke); color: var(--text-soft);
}
.badge-success { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.35); color: #6ee7b7; }
.badge-warning { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); color: #fcd34d; }
.badge-danger  { background: rgba(244,63,94,.14);  border-color: rgba(244,63,94,.35);  color: #fda4af; }
.badge-info    { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.35); color: #7dd3fc; }
.badge-violet  { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.35); color: #c4b5fd; }

/* forms */
.qfs-label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: .45rem; font-weight: 600; }
.qfs-input {
  width: 100%; background: var(--glass-3); color: var(--text);
  border: 1px solid var(--stroke); border-radius: 14px;
  padding: .8rem 1rem; font-size: .95rem; outline: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.qfs-input:focus { border-color: var(--em-400); box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
.qfs-input::placeholder { color: var(--mute); }
select.qfs-input option { background: #061426; color: var(--text); }

/* passcode keypad */
.passcode-row { display: flex; gap: .65rem; justify-content: center; }
.passcode-row input {
  width: 52px; height: 62px; text-align: center; font-size: 1.6rem; font-weight: 700;
  font-family: var(--font-mono); color: var(--text);
  background: var(--glass-3); border: 1px solid var(--stroke); border-radius: 14px; outline: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.passcode-row input:focus { border-color: var(--em-400); box-shadow: 0 0 0 3px rgba(56,189,248,.18); }

/* toasts */
.qfs-toast {
  display: flex; align-items: center; gap: .8rem;
  background: var(--glass-2); border: 1px solid var(--stroke-2);
  border-radius: 16px; padding: .9rem 1.1rem; margin-top: .6rem;
  color: var(--text); font-size: .9rem; max-width: 380px;
  box-shadow: var(--shadow); backdrop-filter: blur(20px);
  animation: qfsToastIn .45s var(--ease) both;
}
.qfs-toast.is-success { border-left: 3px solid var(--emerald); }
.qfs-toast.is-error   { border-left: 3px solid #f87171; }
.qfs-toast.is-warning { border-left: 3px solid #fbbf24; }
.qfs-toast.is-info    { border-left: 3px solid var(--blu-400); }
.qfs-toast.is-leaving { opacity: 0; transform: translateX(24px); transition: all .35s ease; }
@keyframes qfsToastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* modals */
.qfs-modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(2, 8, 18, .66); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.qfs-modal {
  position: relative; width: 100%; max-width: 520px;
  background: linear-gradient(160deg, rgba(9,28,48,.92), rgba(4,16,30,.96));
  border: 1px solid var(--stroke-2); border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow), var(--glow);
  padding: 1.6rem; color: var(--text);
  animation: qfsModalIn .45s var(--ease) both;
}
@keyframes qfsModalIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }

/* ticker tape (dashboard) */
.ticker-tape {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke);
  background: var(--glass); border-radius: 14px; padding: 10px 0;
}
.ticker-tape__track { display: flex; width: max-content; animation: qfsTicker 46s linear infinite; }
.ticker-tape:hover .ticker-tape__track { animation-play-state: paused; }
@keyframes qfsTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 0 1.4rem; font-size: .82rem; white-space: nowrap;
  border-right: 1px solid var(--stroke); font-family: var(--font-mono);
}
.ticker-item .coin-symbol { font-weight: 600; letter-spacing: .06em; color: var(--text-soft); }
.ticker-item .price { color: var(--text); }
.ticker-item .change-up   { color: #6ee7b7; font-size: .74rem; }
.ticker-item .change-down { color: #fda4af; font-size: .74rem; }

/* animations */
.fade-up { animation: qfsFadeUp .8s var(--ease) both; }
@keyframes qfsFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.fade-in { animation: qfsFadeIn .7s ease both; }
@keyframes qfsFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pulse-glow { animation: qfsPulseGlow 2.4s ease-in-out infinite; }
@keyframes qfsPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,.45); }
  50%      { box-shadow: 0 0 22px 4px rgba(16,185,129,.35); }
}
.glow-emerald { filter: drop-shadow(0 0 14px rgba(16,185,129,.45)); }
.glow-teal    { filter: drop-shadow(0 0 14px rgba(34,211,238,.45)); }
.float-y { animation: qfsFloatY 5s ease-in-out infinite; }
@keyframes qfsFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* misc legacy bits */
.skeleton { position: relative; overflow: hidden; background: var(--glass-3); border-radius: 10px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(125,211,252,.12), transparent);
  animation: qfsShimmer 1.6s infinite;
}
@keyframes qfsShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--stroke-2); border-top-color: var(--em-400);
  animation: qfsSpin .8s linear infinite;
}
@keyframes qfsSpin { to { transform: rotate(360deg); } }
.tilt-hover { transition: transform .4s var(--ease), box-shadow .4s ease; }
.tilt-hover:hover { transform: perspective(700px) rotateX(3deg) rotateY(-3deg) translateY(-4px); box-shadow: var(--glow); }
.qfs-avatar { border-radius: 50%; object-fit: cover; border: 2px solid var(--stroke-2); }

/* premium scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(125,211,252,.22); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(125,211,252,.4); border: 2px solid transparent; background-clip: content-box; }

/* ---------- app sidebar (user chrome) ---------- */
.qfs-side {
  background: var(--glass-2);
  border-right: 1px solid var(--stroke);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}
.qfs-side-link {
  display: flex; align-items: center; padding: .62rem .8rem;
  border-radius: 14px; font-size: .875rem; font-weight: 500;
  color: var(--mute); border: 1px solid transparent;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.qfs-side-link:hover { color: var(--text); background: var(--glass-3); }
.qfs-side-link.is-active {
  color: var(--text);
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(16,185,129,.10));
  border-color: rgba(56,189,248,.35);
}
.qfs-side-link.is-active i { color: var(--blu-300); }

/* mobile top bar */
.qfs-nav {
  background: var(--glass-2);
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}

/* ---------- light theme parity (html[data-theme="light"] / .qfs-light) ---------- */
html[data-theme="light"] .qfs-toast,
html.qfs-light .qfs-toast { background: rgba(255,255,255,.9); color: #031f33; }
html[data-theme="light"] .qfs-modal,
html.qfs-light .qfs-modal { background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(236,247,253,.98)); color: #031f33; }
html[data-theme="light"] select.qfs-input option,
html.qfs-light select.qfs-input option { background: #fff; color: #031f33; }
html[data-theme="light"] .text-mute, html.qfs-light .text-mute { color: #4a7290 !important; }
html[data-theme="light"] .badge-success, html.qfs-light .badge-success { color: #047857; }
html[data-theme="light"] .badge-warning, html.qfs-light .badge-warning { color: #b45309; }
html[data-theme="light"] .badge-danger,  html.qfs-light .badge-danger  { color: #be123c; }
html[data-theme="light"] .badge-info,    html.qfs-light .badge-info    { color: #0369a1; }

/* ==========================================================================
   FIXES 2026-09 (user request bundle)
   --------------------------------------------------------------------------
   A) #qfs-toast-wrap is the dynamically-created container that holds toast
      notifications. The Aurora admin CSS positions it top-right; the USER
      area was missing the rule, so toasts were appearing as plain stacked
      text at the bottom of the page. This forces top-right positioning
      BELOW the user-area header (which sits at top:0 with height ~4rem).
   B) Force .badge* to render as a styled pill even when Tailwind preflight
      or other resets clobber them. The user reported "<span class='badge
      badge-success text-xs'>Yes</span>" showing as plain text — this is
      because .badge uses var(--glass-3)/var(--text-soft) which were
      unresolved in some contexts. We hard-code fallbacks with !important.
   ========================================================================== */

/* A) Toast wrapper — top-right, below header (header height = 4rem on desktop, 3.5rem mobile) */
#qfs-toast-wrap {
  position: fixed !important;
  top: 5rem !important;
  right: 1rem !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  pointer-events: none !important;
  max-width: 380px !important;
  width: max-content !important;
}
/* On small screens, push it a bit lower to clear the mobile sticky nav */
@media (max-width: 768px) {
  #qfs-toast-wrap {
    top: 4.5rem !important;
    right: 0.75rem !important;
    max-width: calc(100vw - 1.5rem) !important;
    width: auto !important;
  }
}
/* Each toast inside should accept pointer events (so buttons/links work) */
#qfs-toast-wrap .qfs-toast { pointer-events: auto; }

/* B) Force-render badges as styled pills — these !important rules GUARANTEE
   the badge look even when Tailwind preflight or some other reset tries to
   turn them into plain text. */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.3rem 0.68rem !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  white-space: nowrap !important;
}
.badge-success {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #6ee7b7 !important;
}
.badge-warning {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #fcd34d !important;
}
.badge-danger {
  background: rgba(244, 63, 94, 0.18) !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
  color: #fda4af !important;
}
.badge-info {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  color: #7dd3fc !important;
}
.badge-violet {
  background: rgba(139, 92, 246, 0.18) !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
  color: #c4b5fd !important;
}
/* Allow the .text-xs Tailwind helper to size the badge text smaller without
   breaking the pill background. */
.badge.text-xs { font-size: 0.65rem !important; padding: 0.22rem 0.5rem !important; }

/* Light theme parity for forced badges */
html[data-theme="light"] .badge,
html.qfs-light .badge {
  background: rgba(2, 8, 18, 0.06) !important;
  border-color: rgba(2, 8, 18, 0.15) !important;
  color: #475569 !important;
}
html[data-theme="light"] .badge-success, html.qfs-light .badge-success { background: rgba(16,185,129,.14) !important; color: #047857 !important; }
html[data-theme="light"] .badge-warning, html.qfs-light .badge-warning { background: rgba(245,158,11,.14) !important; color: #b45309 !important; }
html[data-theme="light"] .badge-danger,  html.qfs-light .badge-danger  { background: rgba(244,63,94,.14) !important;  color: #be123c !important; }
html[data-theme="light"] .badge-info,    html.qfs-light .badge-info    { background: rgba(56,189,248,.14) !important; color: #0369a1 !important; }