/* =============================================
   DebtManager Client Portal - Design System CSS
   Supplements brand.css with:
   - ux-reveal animation utilities
   - Typography utilities (user-page-title, user-content-title)
   ============================================= */

/* ── UX Reveal Animations ─────────────────────
   Apply .ux-reveal to each major page section.
   Stagger with .ux-delay-1 / .ux-delay-2 / .ux-delay-3
   Automatically disabled for prefers-reduced-motion.
   ─────────────────────────────────────────────── */
.ux-reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: ux-fade-up 520ms ease-out forwards;
}

@keyframes ux-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ux-delay-1 { animation-delay: 0ms; }
.ux-delay-2 { animation-delay: 100ms; }
.ux-delay-3 { animation-delay: 180ms; }
.ux-delay-4 { animation-delay: 270ms; }
.ux-delay-5 { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
    .ux-reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Typography Utilities ─────────────────────
   Page-level heading utilities that inherit
   brand.css CSS custom property colours so they
   automatically invert in dark mode.
   ─────────────────────────────────────────────── */
.user-page-title {
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 700;
    color: var(--app-text-strong);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.user-content-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--app-text-strong);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

/* ── Dark-mode Bootstrap Card Header fix ─────
   Bootstrap card-header uses bg-body-tertiary in
   dark mode. For any remaining .card-header that
   still has bg-white applied, override here.
   ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .card-header.bg-white {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .card.bg-white {
    background-color: var(--bs-body-bg) !important;
}

/* ── Dark-mode Bootstrap table ─────────────── */
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: rgba(148, 163, 184, 0.08);
    --bs-table-color: var(--bs-body-color);
}

/* ── Dark-mode text overrides ────────────────
   text-dark is Bootstrap's forced dark text — in
   dark mode it becomes invisible. Override to use
   body colour instead.
   ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .text-dark {
    color: var(--bs-body-color) !important;
}

/* ── Sidebar nav dark-mode link fix ─────────
   Bootstrap btn-link text-dark won't adapt.
   ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .btn-link.text-dark {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .btn-link.text-dark:hover {
    color: var(--bs-primary) !important;
}

/* ── Stat card label (uppercase tracking) ──── */
.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-subtle);
    margin-bottom: 0.5rem;
}

.dark .stat-label {
    color: var(--app-text-muted);
}