/* bottom nav (mobile) */
.bottom-nav{
position:fixed;left:10px;right:10px;bottom:12px;background:var(--primary);display:flex;justify-content:space-around;padding:8px;border-radius:12px;z-index:9999;box-shadow:0 10px 30px rgba(13,71,161,0.12);
}


.bottom-nav .nav-item{color:white;text-decoration:none;display:flex;flex-direction:column;align-items:center;font-size:0.8rem}
.bottom-nav .nav-item i{font-size:1.4rem}


/* desktop: hide bottom nav */
@media(min-width:768px){
.bottom-nav{display:none}
}


/* content spacing on small devices */
.container{max-width:960px}

/* ============================================
   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;
}