/* ====================================================================
           FORCE OVERRIDE - LOADED LAST TO OVERRIDE custom.css
           ==================================================================== */

        /* CRITICAL: Override body background yang di-set putih di custom.css */
        html, body {
            background: linear-gradient(
                135deg,
                #f0fdf4 0%,
                #fefce8 25%,
                #f0f9ff 50%,
                #fef3f2 75%,
                #f0fdf4 100%
            ) !important;
            background-attachment: fixed !important;
            background-size: 400% 400% !important;
            animation: gradientShift 60s ease infinite !important;
            min-height: 100vh !important;
        }

        /* Override untuk layout-wrapper jika ada background putih */
        .layout-wrapper.landing {
            background: transparent !important;
        }

        /* Chart Container Responsive */
        .chart-container {
            position: relative;
            height: 400px;
            width: 100%;
        }

        @media (max-width: 768px) {
            .chart-container {
                height: 300px;
            }

            /* Optimize statistics section for mobile */
            #statistics {
                padding: 60px 0 !important;
            }

            #statistics .card-body {
                padding: 1.25rem !important;
            }

            #statistics .mb-4 {
                margin-bottom: 1.5rem !important;
            }

            /* Responsive data insights cards */
            #statistics .alert {
                padding: 0.75rem !important;
                font-size: 0.9rem;
            }

            #statistics .alert h6 {
                font-size: 0.9rem;
            }

            #statistics .alert .small {
                font-size: 0.8rem !important;
            }
        }

        @media (max-width: 576px) {
            .chart-container {
                height: 250px;
            }

            #statistics {
                padding: 50px 0 !important;
            }

            #statistics h2 {
                font-size: 1.5rem !important;
            }

            #statistics .fs-15, #statistics p {
                font-size: 0.9rem !important;
            }

            /* Extra compact for small devices */
            #statistics .alert {
                padding: 0.65rem !important;
            }

            #statistics .alert .fs-2 {
                font-size: 1.5rem !important;
            }

            /* Stat cards per tahun - more compact */
            .card-title {
                font-size: 1rem !important;
            }

            .fs-12 {
                font-size: 0.7rem !important;
            }

            .fs-13 {
                font-size: 0.75rem !important;
            }
        }

        /* Mini Sparkline Styling */
        .mini-sparkline-container {
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }

        .mini-sparkline-container:hover {
            opacity: 1;
        }

        .mini-sparkline-container canvas {
            display: block;
            max-width: 100%;
        }

        /* ========================================================================
           STATISTICS CARDS - 2025 MODERN DESIGN
           Best Practice: Color-coded, depth, typography, micro-interactions
           ======================================================================== */

        /* Base Stat Card - Enhanced with depth and modern styling */
        .stat-card-enhanced {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            background: white;
            border: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow:
                0 1px 2px rgba(0, 0, 0, 0.06),
                0 4px 8px rgba(0, 0, 0, 0.04);
        }

        .stat-card-enhanced::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #10b981, #14b8a6);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .stat-card-enhanced:hover::before {
            opacity: 1;
        }

        .stat-card-enhanced:hover {
            transform: translateY(-4px);
            box-shadow:
                0 4px 6px rgba(0, 0, 0, 0.07),
                0 12px 24px rgba(0, 0, 0, 0.1),
                0 20px 40px rgba(0, 0, 0, 0.06);
            border-color: rgba(0, 0, 0, 0.1);
        }

        /* Color Variants - Purpose-driven color coding */

        /* Primary/Green - Program Tersusun */
        .stat-card-enhanced:not(.secondary):not(.blue)::before {
            background: linear-gradient(90deg, #10b981, #14b8a6);
        }

        .stat-card-enhanced:not(.secondary):not(.blue):hover {
            box-shadow:
                0 4px 6px rgba(16, 185, 129, 0.1),
                0 12px 24px rgba(16, 185, 129, 0.12),
                0 20px 40px rgba(16, 185, 129, 0.08);
        }

        /* Secondary/Blue - Distribusi Disalurkan */
        .stat-card-enhanced.secondary::before {
            background: linear-gradient(90deg, #3b82f6, #06b6d4);
        }

        .stat-card-enhanced.secondary:hover {
            box-shadow:
                0 4px 6px rgba(59, 130, 246, 0.1),
                0 12px 24px rgba(59, 130, 246, 0.12),
                0 20px 40px rgba(59, 130, 246, 0.08);
        }

        /* Blue/Purple - Kelompok Tani Penerima */
        .stat-card-enhanced.blue::before {
            background: linear-gradient(90deg, #8b5cf6, #a855f7);
        }

        .stat-card-enhanced.blue:hover {
            box-shadow:
                0 4px 6px rgba(139, 92, 246, 0.1),
                0 12px 24px rgba(139, 92, 246, 0.12),
                0 20px 40px rgba(139, 92, 246, 0.08);
        }

        /* Icon Wrapper - Modern badge design */
        .stat-icon-wrapper {
            width: 64px;
            height: 64px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            margin-bottom: 20px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        /* Icon colors by card type */
        .stat-card-enhanced:not(.secondary):not(.blue) .stat-icon-wrapper {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            box-shadow:
                0 4px 12px rgba(16, 185, 129, 0.15),
                inset 0 1px 2px rgba(255, 255, 255, 0.8);
        }

        .stat-card-enhanced:not(.secondary):not(.blue) .stat-icon-wrapper i {
            color: #10b981;
            font-size: 28px;
        }

        .stat-card-enhanced.secondary .stat-icon-wrapper {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            box-shadow:
                0 4px 12px rgba(59, 130, 246, 0.15),
                inset 0 1px 2px rgba(255, 255, 255, 0.8);
        }

        .stat-card-enhanced.secondary .stat-icon-wrapper i {
            color: #3b82f6;
            font-size: 28px;
        }

        .stat-card-enhanced.blue .stat-icon-wrapper {
            background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
            box-shadow:
                0 4px 12px rgba(139, 92, 246, 0.15),
                inset 0 1px 2px rgba(255, 255, 255, 0.8);
        }

        .stat-card-enhanced.blue .stat-icon-wrapper i {
            color: #8b5cf6;
            font-size: 28px;
        }

        .stat-card-enhanced:hover .stat-icon-wrapper {
            transform: scale(1.08) rotate(5deg);
        }

        /* Stat Number - Large, bold, monospace */
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            line-height: 1.2;
            margin: 16px 0 8px;
            background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.02em;
        }

        /* Monospace for numbers (tabular-nums) */
        .stat-number .counter-value {
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum' 1;
        }

        /* Stat Label - Clear, readable */
        .stat-label {
            font-size: 1.125rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
            letter-spacing: -0.01em;
        }

        /* Stat Change Indicator - Delta values */
        .stat-change {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 600;
            gap: 4px;
            margin-top: 12px;
        }

        .stat-change.positive {
            background: #d1fae5;
            color: #059669;
        }

        .stat-change.positive i {
            color: #059669;
        }

        .stat-change.negative {
            background: #fee2e2;
            color: #dc2626;
        }

        .stat-change.negative i {
            color: #dc2626;
        }

        .stat-change.neutral {
            background: #f3f4f6;
            color: #6b7280;
        }

        /* Mini Sparkline Integration */
        .stat-card-enhanced:hover .mini-sparkline-container {
            opacity: 1;
            transform: scale(1.02);
            transition: all 0.3s ease;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .stat-number {
                font-size: 2.5rem;
            }

            .stat-label {
                font-size: 1rem;
            }

            .stat-icon-wrapper {
                width: 56px;
                height: 56px;
            }

            .stat-icon-wrapper i {
                font-size: 24px !important;
            }
        }

        @media (max-width: 576px) {
            .stat-number {
                font-size: 2rem;
            }

            .stat-icon-wrapper {
                width: 48px;
                height: 48px;
            }

            .stat-icon-wrapper i {
                font-size: 20px !important;
            }
        }

        /* Accessibility - Reduced Motion */
        @media (prefers-reduced-motion: reduce) {
            .stat-card-enhanced,
            .stat-icon-wrapper,
            .mini-sparkline-container {
                transition: none !important;
                animation: none !important;
            }

            .stat-card-enhanced:hover {
                transform: none;
            }

            .stat-card-enhanced:hover .stat-icon-wrapper {
                transform: scale(1.05);
            }
        }

        /* ========================================================================
           PRINT STYLES - 2025 BEST PRACTICE (FASE 1 ENHANCEMENT)
           Scoped print for statistics section only
           ======================================================================== */
        @media print {
            /* When printing statistics specifically */
            body.printing-statistics > *:not(#statistics) {
                display: none !important;
            }

            body.printing-statistics {
                background: white !important;
            }

            body.printing-statistics #statistics {
                display: block !important;
                padding: 20px;
                background: white;
            }

            /* Hide export buttons in print view */
            body.printing-statistics .d-flex.justify-content-center.gap-2 {
                display: none !important;
            }

            /* Hide navigation, footer, and other page elements */
            body.printing-statistics .navbar-landing,
            body.printing-statistics .footer,
            body.printing-statistics .hero-section,
            body.printing-statistics section:not(#statistics) {
                display: none !important;
            }

            /* Optimize stat cards for print */
            .stat-card-enhanced {
                box-shadow: none !important;
                border: 1px solid #e5e7eb;
                page-break-inside: avoid;
                break-inside: avoid;
            }

            .stat-card-enhanced::before {
                display: none;
            }

            .stat-number {
                background: none;
                -webkit-text-fill-color: initial;
                color: #1f2937;
            }

            /* Ensure charts print properly */
            .chart-container {
                page-break-inside: avoid;
                break-inside: avoid;
            }

            /* Print header for statistics */
            body.printing-statistics #statistics::before {
                content: 'SIMANTAN - Statistik Program Bantuan Tanaman Pangan';
                display: block;
                font-size: 1.5rem;
                font-weight: bold;
                text-align: center;
                margin-bottom: 10px;
                color: #1f2937;
            }

            body.printing-statistics #statistics::after {
                content: 'Dicetak pada: ' attr(data-print-date);
                display: block;
                font-size: 0.875rem;
                text-align: center;
                margin-top: 20px;
                color: #6b7280;
                border-top: 1px solid #e5e7eb;
                padding-top: 10px;
            }

            /* Optimize cards grid for print */
            .row.g-4, .row.g-3 {
                page-break-inside: avoid;
            }

            /* Ensure good contrast for print */
            .text-muted {
                color: #6b7280 !important;
            }
        }

        /* Focus States for Accessibility (WCAG 2.1 AA) */
        .stat-card-enhanced:focus-within {
            outline: 3px solid #3b82f6;
            outline-offset: 2px;
        }

        /* Progress Bar Custom Animation */
        @keyframes progressAnimation {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .progress-bar-animated {
            animation: progressAnimation 2s linear infinite;
            background-size: 200% 200%;
        }



        /* ========================================
           FASE 3: COMPARISON TOOLS STYLING
           ======================================== */

        /* Compare Checkbox in Navigation */
        .compare-checkbox-wrapper {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 10;
        }

        .compare-checkbox {
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: 2px solid #3cd188;
            border-radius: 4px;
        }

        .compare-checkbox:checked {
            background-color: #3cd188;
            border-color: #3cd188;
        }

        .compare-checkbox:hover {
            box-shadow: 0 0 0 4px rgba(60, 209, 136, 0.2);
        }

        /* Floating Compare Button */
        .floating-compare-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1020;
            animation: slideInUp 0.3s ease-out;
        }

        .floating-compare-btn .btn-primary {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border: none;
            font-weight: 600;
            padding: 1rem 2rem;
            border-radius: 50px;
            box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
            transition: all 0.3s ease;
        }

        .floating-compare-btn .btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(16, 185, 129, 0.5);
        }

        .floating-compare-btn .btn-light {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(100px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Comparison Modal Styling */
        #comparisonModal .modal-header {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }

        .comparison-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .comparison-card {
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid #e5e7eb;
            border-radius: 16px;
            padding: 1.5rem;
            transition: all 0.3s ease;
        }

        .comparison-card:hover {
            border-color: #3cd188;
            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
            transform: translateY(-4px);
        }

        .comparison-card-header {
            border-bottom: 2px solid #e5e7eb;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
        }

        .comparison-card-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 0.5rem;
        }

        .comparison-stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .comparison-stat-row:last-child {
            border-bottom: none;
        }

        .comparison-stat-label {
            font-weight: 500;
            color: #6b7280;
            font-size: 0.9rem;
        }

        .comparison-stat-value {
            font-weight: 700;
            color: #1f2937;
            font-size: 1.1rem;
        }

        .comparison-chart-container {
            margin-top: 2rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid #e5e7eb;
            border-radius: 16px;
        }

        .comparison-chart-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        /* Comparison Legend */
        .comparison-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            margin-top: 1rem;
        }

        .comparison-legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .comparison-legend-color {
            width: 20px;
            height: 20px;
            border-radius: 4px;
        }

        .comparison-legend-label {
            font-size: 0.9rem;
            color: #6b7280;
        }

        /* Responsive Comparison */
        @media (max-width: 768px) {
            .floating-compare-btn {
                bottom: 20px;
                right: 20px;
            }

            .floating-compare-btn .btn-primary {
                padding: 0.75rem 1.5rem;
                font-size: 0.9rem;
            }

            .comparison-grid {
                grid-template-columns: 1fr;
            }

            #comparisonModal .modal-dialog {
                margin: 0.5rem;
            }
        }

        /* Winner Badge */
        .winner-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: #1f2937;
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 700;
            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }