/* ===========================
   Cards & Metric Components
=========================== */

/* Base Card Styles (PostHog-style: flatter, minimal) */
.card,
.metric-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle, var(--border-primary));
    border-radius: 0;
    padding: 1rem 1.25rem;
    box-shadow: none;
    transition: background-color 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card:hover,
.metric-card:hover {
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(180, 100, 255, 0.3);
}

/* Override Bootstrap Card Defaults */
.dbc .card,
.dbc-card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-subtle, var(--border-primary)) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Global: remove rounding from all card-like containers */
.card,
.metric-card,
.prosperi-card,
.dashboard-metric-card,
.stacked-projection-card,
.interactive-chart-card,
.account-card,
.shadcn-card,
.data-grid,
.calendar-running-balance-card,
.card-base,
.card-metric,
.card-interactive,
.card-entity,
.card-info {
    border-radius: 0 !important;
}

.dbc .card-body,
.dbc-card-body {
    background-color: transparent !important;
}

/* Metric Card Specific Styles */
.metric-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Metric cards with primary chart containers should match chart background */
.metric-card.chart-container-primary {
    background-color: var(--chart-bg-primary) !important;
}

.metric-card.chart-container-secondary {
    background-color: var(--chart-bg-secondary) !important;
}

/* Allow chart cards to use explicit height (e.g. style="height: 560px") so graphs stay contained.
   Do not set height: auto here so .metric-card flex + overflow: hidden can constrain chart height. */
.auto-expand-card {
    min-height: 0 !important;
    overflow: hidden !important;
}

.metric-card .card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.metric-card .chart {
    flex: 1;
    min-height: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Chart Card Title */
.chart .card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.chart-card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
    padding: 2px 8px 4px 4px;
    flex-shrink: 0;
}

/* Stacked Financial Projection Cards */
.stacked-projection-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle, var(--border-primary));
    border-radius: 0;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: none;
    transition: border-color 0.2s ease;
    cursor: pointer;
}

/* Stacked Card Header */
.stacked-card-header {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

/* Stacked Card Content */
.stacked-card-content {
    padding: 16px 20px;
}

/* Net Worth Section */
.net-worth-section {
    text-align: center;
    margin-bottom: 12px;
}

/* Transaction Cards */
.transaction-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 12px !important;
}

.transaction-card:active {
    opacity: 0.98;
}

.transaction-card .card-content {
    min-height: 60px !important;
    padding: 16px 20px !important;
    align-items: center !important;
}

/* Transaction Cards Container */
#top-transactions-cards {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    max-height: 400px !important;
    overflow-y: auto !important;
}

#top-transactions-cards::-webkit-scrollbar {
    width: 4px;
}

#top-transactions-cards::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 2px;
}

/* Affordability States */
.affordability-section.can-afford {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: var(--success-green, #22C55E);
}

.afford-icon.can-afford {
    color: var(--success-green, #22C55E);
}

.affordability-section.cannot-afford {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--error-red, #EF4444);
}

.afford-icon.cannot-afford {
    color: var(--error-red, #EF4444);
}

/* ===========================
   Interactive Chart Cards
=========================== */

/* Cards with interactive charts that users can click to filter data.
   These cards blend seamlessly with their chart backgrounds to signal interactivity.
   Used for: Sankey diagrams, pie charts with click-to-filter functionality.
   Uses chart-bg-secondary to match the actual chart backgrounds (which are rendered in secondary containers). */
.interactive-chart-card {
    background-color: var(--chart-bg-secondary) !important;
    /* Match chart background for seamless interactive experience */
}

/* Ensure card body also matches for complete blend */
.interactive-chart-card .card-body {
    background-color: transparent !important;
    /* Allow parent background to show through */
}

/* ===========================
   Prosperi Card Theme (flat, no top border)
=========================== */

.prosperi-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    position: relative;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.prosperi-card:hover {
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(180, 100, 255, 0.3);
}

/* ===========================
   Change Pill Badges (percentage up/down/neutral)
=========================== */

.change-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.change-pill--up {
    background: var(--change-pill-up-bg);
    color: var(--change-pill-up-text);
}

.change-pill--down {
    background: var(--change-pill-down-bg);
    color: var(--change-pill-down-text);
}

.change-pill--neutral {
    background: var(--change-pill-neutral-bg);
    color: var(--change-pill-neutral-text);
}

/* ===========================
   Standard Card Entrance Animations (all pages)
=========================== */

@keyframes card-entrance-left {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes card-entrance-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-entrance {
    animation: card-entrance-left 0.4s ease-out both;
}

.card-entrance--up {
    animation: card-entrance-up 0.4s ease-out both;
}

.card-entrance--d0 { animation-delay: 0s; }
.card-entrance--d1 { animation-delay: 0.06s; }
.card-entrance--d2 { animation-delay: 0.12s; }
.card-entrance--d3 { animation-delay: 0.18s; }
.card-entrance--d4 { animation-delay: 0.24s; }
.card-entrance--d5 { animation-delay: 0.3s; }
.card-entrance--d6 { animation-delay: 0.36s; }

/* ===========================
   Standardized Card System (6 types)
=========================== */

/* 1. Card Base — standard container */
.card-base {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle, var(--border-primary));
    border-radius: 0;
    padding: var(--card-padding);
    box-shadow: none;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.card-base__header {
    padding: 6px 10px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle, var(--border-primary));
}

.card-base__body {
    padding: var(--card-padding);
}

/* 2. Card Metric — KPI / stat display */
.card-metric {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle, var(--border-primary));
    border-radius: 0;
    padding: 16px 20px;
    box-shadow: none;
    text-align: center;
    min-height: 100px;
    position: relative;
    overflow: hidden;
}

.card-metric::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 2px;
    background: var(--border-primary);
}

.card-metric--purple::before {
    background: var(--brand-purple);
}

.card-metric--amber::before {
    background: var(--warning-yellow);
}

.card-metric--green::before {
    background: var(--success-green);
}

/* 3. Card Interactive — clickable / selectable (hover on by default) */
.card-interactive {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle, var(--border-primary));
    border-radius: 0;
    padding: var(--card-padding);
    box-shadow: none;
    cursor: pointer;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.2s ease;
}

.card-interactive:hover {
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(180, 100, 255, 0.3);
}

.card-interactive--active,
.card-interactive.card-interactive--active {
    border-color: var(--brand-purple);
    background-color: rgba(180, 100, 255, 0.08);
    box-shadow: var(--card-hover-shadow);
}

/* 4. Card Entity — account / goal / financial item */
.card-entity {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-ui);
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.card-entity__header {
    padding: 10px 12px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle, var(--border-primary));
}

.card-entity__body {
    padding: var(--card-padding);
}

.card-entity__footer {
    padding: 12px 24px;
    border-top: 1px solid var(--border-subtle, var(--border-primary));
}

.card-entity--configured::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 2px;
    background: var(--account-color, var(--border-primary));
}

.card-entity--unconfigured {
    background-color: var(--bg-secondary);
}

.card-entity--unconfigured::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 2px;
    background: var(--account-color, var(--brand-red));
}

.card-entity--inactive {
    opacity: 0.8;
}

/* 5. Card Info — inline info / callout box (side pip accent) */
.card-info {
    background-color: var(--bg-quaternary);
    border: 1px solid var(--border-secondary);
    border-radius: 0;
    padding: 12px 14px;
    box-shadow: none;
    position: relative;
}

.card-info::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 2px;
    background: var(--card-info-accent, var(--border-primary));
}

.card-info--purple::before {
    background: var(--brand-purple);
}

.card-info--green::before {
    background: var(--success-green);
}

.card-info--amber::before {
    background: var(--warning-yellow);
}

/* 6. Card Base — accent-left modifier (side pip, insight / recommendation cards) */
.card-base--accent-left::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 2px;
    background: var(--card-accent, var(--brand-purple));
}

.card-base--accent-left-purple::before {
    background: var(--brand-purple);
}

.card-base--accent-left-green::before {
    background: var(--success-green);
}

.card-base--accent-left-amber::before {
    background: var(--warning-yellow);
}

.card-base--expanded {
    border-color: rgba(180, 100, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(180, 100, 255, 0.15);
}

/* Shared modifiers (apply to any card type) */
.card--hoverable:hover {
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(180, 100, 255, 0.3);
}

.card-base.card--hoverable,
.card-metric.card--hoverable,
.card-entity.card--hoverable {
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.card--compact {
    padding: var(--card-padding-compact) !important;
}

.card--spacious {
    padding: var(--card-padding-spacious) !important;
}

.card--nested {
    background-color: var(--bg-secondary) !important;
}

.card--secondary {
    background-color: var(--bg-secondary) !important;
}

.card-entity.card--secondary .card-entity__header,
.card--secondary .account-card-header {
    background-color: var(--bg-secondary) !important;
}