/**
 * METRIC CARDS - Chart Styles
 * Dedicated file for metric card chart/graph styles
 * Ensures charts always span full width of cards
 */

/* ========== CHART CONTAINERS ========== */

[data-chart-container], 
#deal-chart-container, 
#cost-chart-container,
.chart-container {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* ========== METRIC MINI GRAPHS (Full Width) ========== */

/* Enhanced Metric Cards */
.metric-card-enhanced .metric-mini-graph {
    width: 100%;
    height: 36px;
    margin-bottom: 12px;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.metric-card-enhanced .metric-mini-graph svg {
    width: 100%;
    height: 100%;
}

/* Admin Service Badge Compact */
.admin-service-badge-compact .metric-mini-graph {
    width: 100%;
    height: 36px;
    margin-bottom: 16px;
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.admin-service-badge-compact .metric-mini-graph svg {
    width: 100%;
    height: 100%;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .admin-service-badge-compact .metric-mini-graph {
        height: 28px;
    }
    
    .metric-card-enhanced .metric-mini-graph {
        height: 28px;
    }
}

/* ========== MOBILE - Hide Charts for Space ========== */

@media (max-width: 480px) {
    .metric-mini-graph {
        display: none;
    }
}