/* ============================================
   Metrics Section Styles - Redesigned
   ============================================ */

#metrics-section {
    margin-bottom: var(--spacing-xl);
    animation: fadeIn 0.6s ease-out 0.2s backwards;
}

/* Metrics Grid Layout - 5 columns for top cards by default */
.metrics-grid#metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Journey Metrics Section - Grid Layout */
#journey-metrics-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}


/* Glass Card Base - Redesigned */
.glass-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(51, 65, 85, 0.8);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
    padding: 16px;
}

/* Metric Card Structure with Left Accent Bar */
.metric-card {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 16px 20px;
    position: relative;
    cursor: pointer;
    border-left: 3px solid #06b6d4;
    /* Cyan left accent bar */
}

/* Hover Effect - Scale and Border Color */
.metrics-grid .glass-card:hover,
#journey-metrics-section .glass-card:hover {
    transform: scale(1.02);
    border-color: rgba(6, 182, 212, 0.5);
}

/* Hover Colors by Card Type */
.glass-card.hover-purple:hover {
    border-color: rgba(168, 85, 247, 0.5);
}

.glass-card.metric-card.hover-purple {
    border-left-color: #a855f7;
}

.glass-card.hover-cyan:hover {
    border-color: rgba(6, 182, 212, 0.5);
}

.glass-card.metric-card.hover-cyan {
    border-left-color: #06b6d4;
}

.glass-card.hover-green:hover {
    border-color: rgba(34, 197, 94, 0.5);
}

.glass-card.metric-card.hover-green {
    border-left-color: #22c55e;
}

.glass-card.hover-yellow:hover {
    border-color: rgba(234, 179, 8, 0.5);
}

.glass-card.metric-card.hover-yellow {
    border-left-color: #eab308;
}

.glass-card.hover-emerald:hover {
    border-color: rgba(16, 185, 129, 0.5);
}

.glass-card.metric-card.hover-emerald {
    border-left-color: #10b981;
}

.glass-card.hover-blue:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.glass-card.metric-card.hover-blue {
    border-left-color: #3b82f6;
}

.glass-card.hover-pink:hover {
    border-color: rgba(236, 72, 153, 0.5);
}

.glass-card.metric-card.hover-pink {
    border-left-color: #ec4899;
}

/* NEW COLORS START */
.glass-card.hover-orange:hover {
    border-color: rgba(249, 115, 22, 0.5);
}

.glass-card.metric-card.hover-orange {
    border-left-color: #f97316;
}

.glass-card.hover-indigo:hover {
    border-color: rgba(99, 102, 241, 0.5);
}

.glass-card.metric-card.hover-indigo {
    border-left-color: #6366f1;
}

.glass-card.hover-rose:hover {
    border-color: rgba(244, 63, 94, 0.5);
}

.glass-card.metric-card.hover-rose {
    border-left-color: #f43f5e;
}

.glass-card.hover-violet:hover {
    border-color: rgba(139, 92, 246, 0.5);
}

.glass-card.metric-card.hover-violet {
    border-left-color: #8b5cf6;
}

.glass-card.hover-teal:hover {
    border-color: rgba(20, 184, 166, 0.5);
}

.glass-card.metric-card.hover-teal {
    border-left-color: #14b8a6;
}

/* NEW COLORS END */


/* Metric Label (Top) */
.metric-label {
    font-size: 12px;
    font-weight: 400;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

/* Match label color to card accent color */
.glass-card.hover-cyan .metric-label {
    color: #06b6d4;
}

.glass-card.hover-green .metric-label {
    color: #22c55e;
}

.glass-card.hover-yellow .metric-label {
    color: #eab308;
}

.glass-card.hover-emerald .metric-label {
    color: #10b981;
}

.glass-card.hover-purple .metric-label {
    color: #a855f7;
}

.glass-card.hover-blue .metric-label {
    color: #3b82f6;
}

.glass-card.hover-pink .metric-label {
    color: #ec4899;
}

/* New Label Colors */
.glass-card.hover-orange .metric-label {
    color: #f97316;
}

.glass-card.hover-indigo .metric-label {
    color: #6366f1;
}

.glass-card.hover-rose .metric-label {
    color: #f43f5e;
}

.glass-card.hover-violet .metric-label {
    color: #8b5cf6;
}

.glass-card.hover-teal .metric-label {
    color: #14b8a6;
}


/* Metric Value (Center - Large Number) */
.metric-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 4px;
}

/* Health colors for drop-off cards */
.metric-value.healthy {
    color: #ffffff;
}

.metric-value.warning {
    color: #ffffff;
}

.metric-value.critical {
    color: #ffffff;
}

/* Value Colors for Bottom Cards */
.metric-value.color-purple {
    color: #c084fc;
}

.metric-value.color-cyan {
    color: #22d3ee;
}

.metric-value.color-green {
    color: #4ade80;
}

.metric-value.color-yellow {
    color: #facc15;
}

.metric-value.color-emerald {
    color: #4ade80;
}

.metric-value.color-blue {
    color: #60a5fa;
}

.metric-value.color-pink {
    color: #f472b6;
}

/* New Value Colors */
.metric-value.color-orange {
    color: #fb923c;
}

.metric-value.color-indigo {
    color: #818cf8;
}

.metric-value.color-rose {
    color: #fb7185;
}

.metric-value.color-violet {
    color: #a78bfa;
}

.metric-value.color-teal {
    color: #2dd4bf;
}


/* Counts (below value) */
.metric-counts,
.dropoff-card-counts {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Trend Container */
.trend-container {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-top: 6px;
}

.trend-arrow {
    font-weight: 500;
}

.trend-arrow.positive {
    color: #4ade80;
}

.trend-arrow.negative {
    color: #f87171;
}

.trend-arrow.neutral {
    color: #94a3b8;
}

.trend-text {
    color: #94a3b8;
}

/* Cost Metric Styling (Bottom Cards) */
.cost-metric {
    margin-top: 8px;
    font-size: 14px;
}

.cost-metric .amount {
    color: #22d3ee;
    font-weight: 500;
}

.cost-metric .label {
    color: #94a3b8;
    margin-left: 4px;
}

/* Dropoff Card - Combined glass-card + metric-card */
.dropoff-card {
    border-left: 3px solid #06b6d4;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .metrics-grid#metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .metrics-grid#journey-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .metrics-grid#metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .metrics-grid#journey-metrics-grid {
        grid-template-columns: 1fr;
    }

    .metric-value {
        font-size: 24px;
    }
}

/* ============================================
   Step Conversion Rate Cards (Dropoff)
   ============================================ */

.dropoff-cards-container {
    display: contents;
}

/* Comparison badge with background */
.comparison-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comparison-badge.positive {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.comparison-badge.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.comparison-badge.neutral {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

/* Comparison text (gray) */
.comparison-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Light Theme Overrides */
[data-theme="light"] .metrics-grid .glass-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .comparison-badge.positive {
    background: rgba(34, 197, 94, 0.1);
}

[data-theme="light"] .comparison-badge.negative {
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="light"] .comparison-badge.neutral {
    background: rgba(0, 0, 0, 0.06);
}

/* Light theme - Fix text visibility */
[data-theme="light"] .trend-text,
[data-theme="light"] .metric-counts,
[data-theme="light"] .dropoff-card-counts,
[data-theme="light"] .cost-metric .label {
    color: #475569;
}

/* Light theme - Fix percentage value visibility */
[data-theme="light"] .metric-value {
    color: #1e293b;
}

/* ============================================
   Card Flip Animation - Full Card Flip
   ============================================ */

/* 1. Parent Container - Reset styles to be transparent wrapper */
.metric-card.flippable {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    perspective: 1000px;
    overflow: visible !important;
}

/* 2. Card Inner Wrapper - Handles the 3D rotation */
.metric-card.flippable .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* Matches parent height (defined by front face) */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Smoother bounce */
    transform-style: preserve-3d;
}

.metric-card.flippable.flipped .card-inner {
    transform: rotateY(180deg);
}

/* 3. Front Face - Re-apply full card styling here */
.metric-card.flippable .card-front {
    position: relative;
    width: 100%;
    height: 100%;
    /* Glass card styles transferred from parent */
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(51, 65, 85, 0.8);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    /* Metric card styles transferred from parent */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 16px 16px 20px;
    border-left: 3px solid transparent;
    /* Colored by modifiers below */

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 4. Back Face - Full card styling matching front */
.metric-card.flippable .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Glass card styles */
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(51, 65, 85, 0.8);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    /* Metric card styles */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 16px 16px 20px;
    border-left: 3px solid transparent;
    /* Colored by modifiers below */

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
}

/* 5. Transfer Border Colors to Front Face Only */
.hover-purple.flippable .card-front {
    border-left-color: #a855f7 !important;
}

.hover-blue.flippable .card-front {
    border-left-color: #3b82f6 !important;
}

.hover-indigo.flippable .card-front {
    border-left-color: #6366f1 !important;
}

.hover-cyan.flippable .card-front {
    border-left-color: #06b6d4 !important;
}

.hover-violet.flippable .card-front {
    border-left-color: #8b5cf6 !important;
}

.hover-green.flippable .card-front {
    border-left-color: #22c55e !important;
}

.hover-orange.flippable .card-front {
    border-left-color: #f97316 !important;
}

.hover-pink.flippable .card-front {
    border-left-color: #ec4899 !important;
}

.hover-rose.flippable .card-front {
    border-left-color: #f43f5e !important;
}

.hover-teal.flippable .card-front {
    border-left-color: #14b8a6 !important;
}

.hover-yellow.flippable .card-front {
    border-left-color: #eab308 !important;
}

.hover-emerald.flippable .card-front {
    border-left-color: #10b981 !important;
}

.accent-cyan.flippable .card-front {
    border-left-color: #06b6d4 !important;
}

/* 6. Back Face Styling - Always Orange for Yesterday */
.metric-card.flippable .card-back {
    border-left-color: #f97316 !important;
}

.metric-card.flippable .card-back .metric-label {
    color: #f97316 !important;
}

.metric-card.flippable .card-back .metric-value {
    color: #f97316 !important;
}

/* 7. Back Face Typography */
.metric-card.flippable .card-back .metric-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.metric-card.flippable .card-back .metric-value {
    opacity: 1;
    /* Remove opacity to let orange pop */
    font-weight: 600;
}

.metric-card.flippable .card-back .yesterday-date {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

/* 8. Light Theme Adjustments */
[data-theme="light"] .metric-card.flippable .card-front,
[data-theme="light"] .metric-card.flippable .card-back {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(226, 232, 240, 0.8);
}

[data-theme="light"] .metric-card.flippable .card-back .yesterday-date {
    color: #64748b;
}

/* Fix hover border color in light theme (apply to front face only) */
[data-theme="light"] .metric-card.flippable:hover .card-front {
    border-color: rgba(var(--primary-rgb), 0.5);
    /* simplified */
}