/**
 * MB4 Category 9 — Finance page premium redesign (mobile)
 * Luxury balance card + transaction feed + expandable expenses + empty states.
 */

@media (max-width: 768px) {

  /* ── Premium balance card ─────────────────────────────────────────── */
  .finance-balance-card,
  .finance-wallet-card,
  [data-finance-balance] {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  .finance-balance-card::before,
  .finance-wallet-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.08), transparent 70%);
    pointer-events: none;
  }

  .finance-balance-amount,
  .finance-total,
  [data-finance-amount] {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2rem, 8vw, 3rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.1 !important;
  }

  .finance-balance-currency,
  .finance-currency {
    font-size: 1rem !important;
    color: rgba(212, 175, 55, 0.7) !important;
    margin-inline-start: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
  }

  /* ── Transaction feed (replaces alert cards) ──────────────────────── */
  .transaction-feed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 8px;
  }
  .transaction-feed-row .tx-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .transaction-feed-row .tx-dot.income  { background: #10B981; box-shadow: 0 0 8px rgba(16,185,129,0.45); }
  .transaction-feed-row .tx-dot.expense { background: #EF4444; box-shadow: 0 0 8px rgba(239,68,68,0.45); }
  .transaction-feed-row .tx-dot.alert   { background: #F59E0B; box-shadow: 0 0 8px rgba(245,158,11,0.45); }
  .transaction-feed-row .tx-main { flex: 1; min-width: 0; }
  .transaction-feed-row .tx-title { color: #F3F4F6; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .transaction-feed-row .tx-subtitle { color: #9CA3AF; font-size: 12px; margin-top: 2px; }
  .transaction-feed-row .tx-amount { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
  .transaction-feed-row .tx-amount.positive { color: #10B981; }
  .transaction-feed-row .tx-amount.negative { color: #EF4444; }

  /* ── Expandable expense cards ─────────────────────────────────────── */
  .finance-expense-card,
  [data-expense-row] {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    transition: background-color 180ms ease, border-color 180ms ease;
  }
  .finance-expense-card[aria-expanded="true"] {
    background: rgba(245, 158, 11, 0.06) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
  }
  .finance-expense-card .expense-title {
    font-weight: 600; color: #F3F4F6; font-size: 14px;
  }
  .finance-expense-card .expense-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #F59E0B;
  }
  .finance-expense-card .expense-details {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    color: #9CA3AF;
    font-size: 12px;
    line-height: 1.6;
  }
  .finance-expense-card[aria-expanded="true"] .expense-details {
    display: block;
  }

  /* ── Force tabular numbers everywhere in finance ──────────────────── */
  .finance-page *,
  [data-page="finance"] *,
  .finance-stat-value,
  .finance-number {
    font-variant-numeric: tabular-nums !important;
  }

  /* ── Export PDF button — outline premium style ────────────────────── */
  .finance-export-btn,
  .export-pdf-btn,
  [data-action="export-pdf"] {
    background: transparent !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    color: #F59E0B !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    transition: all 200ms ease;
  }
  .finance-export-btn:active,
  .export-pdf-btn:active,
  [data-action="export-pdf"]:active {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: #F59E0B !important;
    transform: scale(0.98);
  }

  /* ── Mobile empty state slot (real content injected by JS) ────────── */
  .mobile-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #6B7280;
    font-size: 14px;
    line-height: 1.7;
  }
  .mobile-empty-state .empty-illustration {
    width: 80px; height: 80px; margin: 0 auto 16px;
    opacity: 0.7;
  }
  .mobile-empty-state .empty-title {
    color: #F3F4F6; font-weight: 600; font-size: 16px; margin-bottom: 8px;
  }
  .mobile-empty-state .empty-cta {
    margin-top: 20px;
    display: inline-block;
    padding: 10px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #0a0a0a;
    font-weight: 700;
    border: none;
    cursor: pointer;
  }
}