/* ============================================
   GLOBAL MOBILE OPTIMIZATION for MyAoCH
   ============================================ */

/* --- BASE SPACING --- */
body {
    padding: 0;
    margin: 0;
}

.container {
    padding: 10px 12px !important;  /* lebih kecil di HP */
}

/* --- CARD DEFAULT --- */
.card,
.chart-card {
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 18px;
}

/* --- TITLE TEXT --- */
h1, h2, h3 {
    line-height: 1.25;
    margin-bottom: 8px;
}

/* ================================
   MOBILE GRID FIX
   ================================ */
@media (max-width: 768px) {

    /* Semua grid jadi 1 kolom */
    .grid, .energy-grid, .energy-small-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Semua card mengecil font */
    .energy-box-value {
        font-size: 1.25rem !important;
    }

    /* Chart Card lebih kecil */
    .chart-card h2 {
        font-size: 1.1rem !important;
    }

    /* Padding chart dikurangi */
    .chart-card {
        padding: 12px !important;
    }
}

/* ================================
   FIX CANVAS RESPONSIVE
   ================================ */
.chart-card canvas,
canvas {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    display: block;
}

/* ================================
   MOBILE FONTS
   ================================ */
@media (max-width: 480px) {
    body, p, div, span {
        font-size: 0.9rem !important;
    }

    .energy-box-value {
        font-size: 1.1rem !important;
    }
}

/* ================================================
   PREVENT CHART MELAR KE SAMPING
================================================ */
.chart-container {
    width: 100%;
    overflow-x: hidden !important;
}