/* ============================================
   DASHBOARD PAGE
   Home screen — wallet summary, quick actions,
   streak banner, recent transactions.
   ============================================ */

.dashboard-page {
  padding: var(--page-padding-y) var(--page-padding-x) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ─── HEADER ─────────────────────────────── */

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.greeting-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.greeting-name {
  font-size: var(--text-xl);
  font-weight: var(--font-semi);
  color: var(--text-primary);
  margin: 2px 0 0 0;
}

.dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.dashboard-header-actions .icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.dashboard-header-actions .icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ─── STREAK BANNER ──────────────────────── */

.streak-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--pending-soft);
  border: 1px solid var(--pending);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.streak-banner.hidden {
  display: none;
}

.streak-banner #streak-text {
  flex: 1;
  min-width: 0;
}

/* ─── QUICK ACTIONS ──────────────────────── */

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.quick-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xs);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.quick-action-tile:hover {
  background: var(--bg-hover);
  border-color: var(--border-active);
}

.quick-action-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.quick-action-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: center;
  line-height: var(--leading-tight);
}

/* ─── RECENT TRANSACTIONS ────────────────── */

.recent-transactions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ─── RESPONSIVE ──────────────────────────── */

@media (max-width: 380px) {
  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}