/**
 * Export Charts Shortcode Styles
 */

.export-charts-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
}

/* Chart 1: Bar + Line Chart - Top left (Row 1, Column 1) */
.chart-wrapper.chart-bar-line {
    grid-column: 1;
    grid-row: 1;
}

/* Chart 2: First Pie Chart - Top right (Row 1, Column 2) */
.chart-wrapper.chart-pie-1 {
    grid-column: 2;
    grid-row: 1;
}

/* Chart 3: Second Pie Chart - Bottom center (Row 2, spans both columns, centered) */
.chart-wrapper.chart-pie-2 {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    max-width: 420px;
    width: 420px;
}

.chart-wrapper {
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    transform: translateY(30px);
}

/* Fade in up animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation delays for each chart when visible */
.chart-wrapper.chart-visible {
    animation: fadeInUp 0.8s ease-out forwards;
}

.chart-wrapper.chart-visible.chart-bar-line {
    animation-delay: 0.1s;
}

.chart-wrapper.chart-visible.chart-pie-1 {
    animation-delay: 0.2s;
}

.chart-wrapper.chart-visible.chart-pie-2 {
    animation-delay: 0.3s;
}

.chart-wrapper:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.chart-header {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.chart-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.3;
}

.chart-canvas-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bar + Line Chart specific styles - Flexible width */
.chart-bar-line .chart-canvas-wrapper {
    width: 100%;
    /* Aspect ratio for bar chart to prevent it becoming too short on mobile */
    aspect-ratio: 2 / 1;
    min-width: 0;
    min-height: 0;
    height: auto;
}

/* Pie Chart specific styles - Flexible width */
.chart-pie .chart-canvas-wrapper {
    width: 100%;
    /* Constrain max-width to design size on desktop */
    max-width: 380px;
    /* Maintain aspect ratio to scale down height naturally */
    aspect-ratio: 380 / 184;
    margin: 0 auto;
    /* Center in cell */
    min-width: 0;
    min-height: 0;
    height: auto;
}

/* Responsive Design */
@media (max-width: 1024px) {
    /* Tablet: Maintain 2-column grid */
    .charts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Ensure chart wrappers don't overflow */
    .chart-wrapper {
        padding: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Pie chart wrapper max-width adjustment for responsiveness */
    .chart-wrapper.chart-pie-2 {
        max-width: 100%;
        width: 100%;
    }

    .chart-title {
        font-size: 11px;
    }
}

/* Mobile: Single column layout */
@media (max-width: 768px) {
    .charts-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 15px;
    }

    /* All charts take full width on mobile */
    .chart-wrapper.chart-bar-line {
        grid-column: 1;
        grid-row: 1;
    }

    .chart-wrapper.chart-pie-1 {
        grid-column: 1;
        grid-row: 2;
    }

    .chart-wrapper.chart-pie-2 {
        grid-column: 1;
        grid-row: 3;
        max-width: 100%;
        width: 100%;
        justify-self: stretch;
    }

    /* Ensure charts fit mobile screen */
    .chart-wrapper {
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    /* Adjust pie chart canvas on mobile */
    .chart-pie .chart-canvas-wrapper {
        max-width: 100%;
        width: 100%;
    }

    .chart-title {
        font-size: 12px;
    }
}