/* ============================================
   EVOLUTION PANEL
   Deck history and version tracking
   ============================================ */

/* Mobile Overrides */
@media (max-width: 768px) {

    /* Dashboard grid: single column on mobile */
    .evolution-dashboard {
        grid-template-columns: 1fr !important;
        padding: 1rem !important;
        gap: 1rem !important;
    }

    /* Allow chart containers to auto-expand their height */
    .chart-container {
        overflow: visible !important;
        max-height: none !important;
    }

    /* Ensure child divs don't clip */
    .chart-container>div {
        overflow: visible !important;
    }

    /* History layout: stack vertically on mobile */
    .evolution-layout>div[style*="display: flex; align-items: flex-start"] {
        flex-direction: column !important;
    }

    /* Version sidebar: full width on mobile */
    .version-sidebar {
        width: 100% !important;
        max-height: none !important;
        position: static !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color);
    }

    /* Diff view container: show below history on mobile (stacked layout) */
    .diff-view-container {
        padding: 1rem !important;
        border-top: 1px solid var(--border-color);
    }

    /* Mobile inline diff drawer (expands below version item) */
    .mobile-diff-drawer {
        display: block;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        margin: 8px 12px 16px 12px;
        padding: 12px;
        animation: evolutionSlideDown 0.2s ease-out;
    }

    @keyframes evolutionSlideDown {
        from {
            opacity: 0;
            max-height: 0;
        }

        to {
            opacity: 1;
            max-height: 2000px;
        }
    }

    /* Diff grid: single column on mobile */
    .diff-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Diff header: smaller text on mobile */
    .diff-header h3 {
        font-size: 1.1rem !important;
        flex-wrap: wrap;
    }

    /* Version compare select: full width on mobile */
    .version-compare-select {
        width: 100%;
        margin-top: 8px;
    }
}

/* Desktop: hide mobile-only drawer */
@media (min-width: 769px) {
    .mobile-diff-drawer {
        display: none !important;
    }
}