/* ============================================================
   STOXGEN — World-Class UX Enhancements
   File: ux-enhance.css
   Include on ALL pages after mobile.css
   ============================================================ */

/* ── SKELETON LOADING ─────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(24,32,50,1) 25%,
    rgba(30,42,64,1) 50%,
    rgba(24,32,50,1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
}
.skeleton * { opacity: 0 !important; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-line   { height: 14px; border-radius: 4px; margin-bottom: 8px; }
.skeleton-title  { height: 20px; border-radius: 4px; margin-bottom: 12px; width: 60%; }
.skeleton-num    { height: 28px; border-radius: 4px; width: 40%; }
.skeleton-card   { border-radius: 12px; min-height: 80px; }

/* ── SMOOTH PAGE TRANSITIONS ──────────────────────────────── */
.main { animation: pageIn 0.3s ease; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── GLOBAL TOAST SYSTEM ──────────────────────────────────── */
#sx-toasts {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.sx-toast {
  background: #0C1220;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-family: 'Figtree', sans-serif;
  color: #E8EDF8;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: all;
  animation: toastIn 0.3s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  max-width: 320px;
  min-width: 200px;
}
.sx-toast.success { border-color: rgba(0,230,118,0.3); }
.sx-toast.error   { border-color: rgba(255,76,76,0.3); }
.sx-toast.warning { border-color: rgba(245,200,66,0.3); }
.sx-toast.info    { border-color: rgba(79,195,247,0.3); }
.sx-toast.out     { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn  { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }
@keyframes toastOut { from { opacity:1; transform: translateX(0); }   to { opacity:0; transform: translateX(20px); } }

/* ── BETTER SCROLLBARS ────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1E2A40; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #2A3A54; }

/* ── CARD HOVER EFFECTS ───────────────────────────────────── */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.12) !important;
}

/* ── FOCUS RINGS ──────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid rgba(245,200,66,0.5);
  outline-offset: 2px;
}

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}
.empty-state .es-icon  { font-size: 48px; margin-bottom: 16px; }
.empty-state .es-title { font-family: 'Oxanium', sans-serif; font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.empty-state .es-sub   { font-size: 13px; color: #7A8499; line-height: 1.6; margin-bottom: 20px; }

/* ── PULSE BADGE (Live indicator) ─────────────────────────── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #00E676;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.live-dot {
  width: 6px; height: 6px;
  background: #00E676;
  border-radius: 50%;
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* ── NUMBER ANIMATION ─────────────────────────────────────── */
.num-up   { color: #00E676 !important; }
.num-down { color: #FF4C4C !important; }
.flash-up   { animation: flashGreen 0.5s ease; }
.flash-down { animation: flashRed   0.5s ease; }
@keyframes flashGreen { 0%,100% { background: transparent; } 50% { background: rgba(0,230,118,0.15); } }
@keyframes flashRed   { 0%,100% { background: transparent; } 50% { background: rgba(255,76,76,0.15); } }

/* ── TRIAL BANNER ─────────────────────────────────────────── */
.trial-banner {
  background: linear-gradient(135deg, rgba(245,200,66,0.1), rgba(245,200,66,0.05));
  border: 1px solid rgba(245,200,66,0.25);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.trial-banner .tb-text { color: #E8EDF8; }
.trial-banner .tb-days { color: #F5C842; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.trial-banner .tb-btn  { background: #F5C842; color: #070B13; border: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }

/* ── UPGRADE WALL ─────────────────────────────────────────── */
.upgrade-wall {
  background: rgba(7,11,19,0.95);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid rgba(245,200,66,0.2);
}
.upgrade-wall .uw-icon  { font-size: 40px; margin-bottom: 12px; }
.upgrade-wall .uw-title { font-family: 'Oxanium',sans-serif; font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.upgrade-wall .uw-sub   { font-size: 13px; color: #7A8499; margin-bottom: 20px; line-height: 1.6; }
.upgrade-wall .uw-btn   { background: #F5C842; color: #070B13; border: none; padding: 12px 28px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'Figtree',sans-serif; }

/* ── MOBILE IMPROVEMENTS ──────────────────────────────────── */
@media (max-width: 768px) {
  .sx-toast { max-width: calc(100vw - 32px); }
  #sx-toasts { right: 16px; left: 16px; }
  .trial-banner { flex-direction: column; gap: 8px; text-align: center; }
}

/* ── PRINT STYLES ─────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .bottom-nav, #sx-bar, .trial-banner { display: none !important; }
  .main { padding: 0 !important; }
  body { background: white !important; color: black !important; }
}