/* ===================================
   Chart Container Styles
   =================================== */

.vs-chart-container {
    position: relative;
    background: var(--vs-bg-card);
    border-radius: var(--vs-radius);
    padding: 24px;
    box-shadow: var(--vs-shadow);
    height: 400px;
}

.vs-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.vs-chart-wide { height: 420px; }
.vs-chart-tall { height: 500px; }

/* Loading state */
.vs-chart-container.loading::after {
    content: 'Loading data...';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vs-text-muted);
    font-size: 0.95rem;
    background: var(--vs-bg-card);
    border-radius: var(--vs-radius);
}

@media (max-width: 640px) {
    .vs-chart-container { height: 300px; padding: 16px; }
    .vs-chart-wide { height: 320px; }
    .vs-chart-tall { height: 400px; }
}