/* ════════════════════════════════════════════════════════════════════
 * Platfound UX Upgrade Phase 1 — Pure CSS (2026-05-13)
 *
 * Loaded LAST after design-system.css + mobile-v3.css.
 * Polishes state colors, touch targets, mobile-first refinements.
 * ════════════════════════════════════════════════════════════════════ */

:root {
  --bsx-green:    #10b981;
  --bsx-green-bg: rgba(16, 185, 129, 0.10);
  --bsx-red:      #ef4444;
  --bsx-red-bg:   rgba(239, 68, 68, 0.10);
  --bsx-yellow:   #f59e0b;
  --bsx-yellow-bg:rgba(245, 158, 11, 0.10);
}

/* ──── 1. Status pill colors uniform across deposit/withdraw/promo ──── */
body.ui-v3 .status-COMPLETED, body.ui-v3 .tx-status-COMPLETED,
body.ui-v3 .badge-completed, body.ui-v3 .badge-approved {
  background: var(--bsx-green-bg) !important;
  color: var(--bsx-green) !important;
  border-color: var(--bsx-green) !important;
}
body.ui-v3 .status-PENDING, body.ui-v3 .tx-status-PENDING,
body.ui-v3 .status-AI_REVIEW, body.ui-v3 .badge-pending {
  background: var(--bsx-yellow-bg) !important;
  color: var(--bsx-yellow) !important;
  border-color: var(--bsx-yellow) !important;
}
body.ui-v3 .status-FAILED, body.ui-v3 .tx-status-FAILED,
body.ui-v3 .status-REJECTED, body.ui-v3 .badge-failed,
body.ui-v3 .status-rejected {
  background: var(--bsx-red-bg) !important;
  color: var(--bsx-red) !important;
  border-color: var(--bsx-red) !important;
}

/* ──── 2. Minimum touch target 44px on mobile ──── */
@media (max-width: 768px) {
  body.ui-v3 button,
  body.ui-v3 .bnav-item,
  body.ui-v3 a.btn,
  body.ui-v3 .v3-btn {
    min-height: 44px !important;
  }
  /* Bottom nav: visible labels even on smallest viewport */
  body.ui-v3 .bnav-item .bnav-label {
    font-size: clamp(10px, 2.5vw, 11px) !important;
  }
}

/* ──── 3. Number-only inputs auto-trigger numeric keyboard hint ──── */
body.ui-v3 input[type="number"],
body.ui-v3 input[inputmode="decimal"],
body.ui-v3 input[inputmode="numeric"] {
  font-family: "JetBrains Mono", monospace !important;
  font-variant-numeric: tabular-nums !important;
}

/* ──── 4. Deposit/Withdraw step indicator (visible progress) ──── */
body.ui-v3 .step-indicator,
body.ui-v3 .flow-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--ds-surface, #1c1c21);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
body.ui-v3 .step-indicator .step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-text-3, #6b7280);
  font-size: 11px;
}
body.ui-v3 .step-indicator .step.active {
  background: var(--ds-gradient-gold, linear-gradient(135deg, #facc15, #ca8a04));
  color: #1a1a1a;
  font-weight: 700;
}
body.ui-v3 .step-indicator .step.done {
  background: var(--bsx-green);
  color: white;
}
body.ui-v3 .step-indicator .step.done::after { content: '✓'; }
body.ui-v3 .step-indicator .step + .step::before {
  content: '';
  width: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 4px;
}

/* ──── 5. Success/error toast — bigger emphasis on critical money ops ──── */
body.ui-v3 .toast.success,
body.ui-v3 [data-toast-type="success"] {
  background: linear-gradient(135deg, var(--bsx-green-bg), transparent) !important;
  border-left: 4px solid var(--bsx-green) !important;
}
body.ui-v3 .toast.error,
body.ui-v3 [data-toast-type="error"] {
  background: linear-gradient(135deg, var(--bsx-red-bg), transparent) !important;
  border-left: 4px solid var(--bsx-red) !important;
}

/* ──── 6. Quick-deposit amount chips: 8px gap on mobile ──── */
@media (max-width: 480px) {
  body.ui-v3 .dep-quick-row {
    gap: 6px !important;
  }
  body.ui-v3 .dep-quick-amt {
    flex: 1 1 calc(33% - 4px) !important;
    min-height: 44px !important;
  }
}

/* ──── 7. Card hover affordance for game tiles & promo cards ──── */
body.ui-v3 .game-tile,
body.ui-v3 .promo-card,
body.ui-v3 .bs-feature {
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
body.ui-v3 .game-tile:hover,
body.ui-v3 .promo-card:hover,
body.ui-v3 .bs-feature:hover {
  border-color: var(--ds-gold-400, #facc15) !important;
  transform: translateY(-2px);
}
body.ui-v3 .game-tile:active,
body.ui-v3 .promo-card:active {
  transform: scale(0.98);
}

/* ──── 8. Balance display: largest typography in app ──── */
body.ui-v3 .v3-balance .num,
body.ui-v3 .bs3-hero-amount {
  font-family: "JetBrains Mono", monospace !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -1px;
  line-height: 1.05;
}

/* ──── 9. Form labels — always visible (no floating label confusion) ──── */
body.ui-v3 .bs-input-label,
body.ui-v3 label.input-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-2, #9da4b8);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ──── 10. Loading skeleton ──── */
body.ui-v3 .bs-loading,
body.ui-v3 .skeleton-loading {
  position: relative;
  overflow: hidden;
  background: var(--ds-surface, #1c1c21);
  color: var(--ds-text-3, #6b7280) !important;
  border-radius: 6px;
}
body.ui-v3 .bs-loading::before,
body.ui-v3 .skeleton-loading::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: bsx-shimmer 1.5s infinite;
}
@keyframes bsx-shimmer { 100% { left: 100%; } }

/* ──── 11. Bottom nav: safe-area + visible active state ──── */
body.ui-v3 nav.bottom-nav,
body.ui-v3 .bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}
body.ui-v3 .bnav-item.active .bnav-label,
body.ui-v3 .bnav-item.active {
  color: var(--ds-gold-400, #facc15) !important;
}

/* ──── 12. Mobile: hide scrollbar on filter chips ──── */
@media (max-width: 768px) {
  body.ui-v3 .bs3-filters::-webkit-scrollbar,
  body.ui-v3 .cat-row::-webkit-scrollbar,
  body.ui-v3 .v3-stories::-webkit-scrollbar {
    display: none !important;
  }
  body.ui-v3 .bs3-filters,
  body.ui-v3 .cat-row,
  body.ui-v3 .v3-stories {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}

/* ──── 13. Confirm dialog danger emphasis ──── */
body.ui-v3 .confirm-danger,
body.ui-v3 [data-confirm-danger] {
  background: var(--bsx-red-bg) !important;
  border: 1px solid var(--bsx-red) !important;
  border-radius: 12px;
  padding: 16px;
}
body.ui-v3 .confirm-danger strong { color: var(--bsx-red); text-transform: uppercase; }

/* ──── 14. Focus visible (a11y) ──── */
body.ui-v3 *:focus-visible {
  outline: 2px solid var(--ds-gold-400, #facc15) !important;
  outline-offset: 2px !important;
}

/* ──── 15. Hero stats row — bigger on mobile (better readability) ──── */
@media (max-width: 480px) {
  body.ui-v3 .v3-hero-actions .v3-btn {
    font-size: 14px !important;
    padding: 14px 12px !important;
    min-height: 48px !important;
  }
}