/* ============================================================
   Dashboard Voksen (Professional) — 2026 Redesign
   ============================================================
   Bento grid layout: 2 hero cards + 4 secondary cards.
   Clean white cards on off-white background. Layered shadows.
   Tinted icon circles. No decorative illustrations.
   ============================================================ */

/* ── Page Background — Warm neutral (no blue cast) ── */
.v-voksen .main-content {
  background: var(--color-bg, #FAFAF8);
}

/* ── Voksen Welcome ── */
.voksen-welcome {
  padding: var(--space-6) 0 var(--space-5);
}

.voksen-welcome h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary, #0F172A);
  margin-bottom: 2px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Brand echo — name in greeting picks up sidebar brand color */
.voksen-welcome h1 .greeting-name {
  color: var(--color-primary);
}

.voksen-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary, #64748B);
  font-weight: 400;
}

/* ── Demo item styles — subtle indicator ── */
.recent-doc-demo,
.cal-demo-item,
.email-demo-item,
.chat-demo-item,
.noter-demo-item {
  opacity: 0.85;
  transition: opacity 150ms ease;
}
.recent-doc-demo:hover,
.cal-demo-item:hover,
.email-demo-item:hover,
.chat-demo-item:hover,
.noter-demo-item:hover {
  opacity: 1;
}