/* =========================
🎯 GLOBAL LAYOUT
========================= */

*{

    box-sizing:border-box;
}

html,
body{

    margin:0;
    padding:0;

    overflow-x:hidden;
}

/* =========================
📦 APP
========================= */

.adpai-app{

    width:100%;

    min-height:100vh;

    background:#f5f7fb;
}

/* =========================
📊 DASHBOARD
========================= */

.adpai-dashboard{

    width:100%;

    padding:24px;

    font-family:
        system-ui,
        -apple-system,
        sans-serif;

    background:#f5f7fb;
}

/* =========================
🧩 GRID
========================= */

.dashboard-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(380px,1fr)
        );

    gap:20px;

    margin-bottom:24px;
}

/* =========================
📦 BOX
========================= */

.adpai-box{

    background:#fff;

    border-radius:20px;

    padding:22px;

    box-shadow:
        0 2px 10px rgba(0,0,0,.05);

    border:1px solid #edf2f7;

    min-height:420px;

    overflow:hidden;

    position:relative;
}

/* =========================
📈 CHARTS
========================= */

.adpai-box canvas{

    width:100% !important;

    height:320px !important;

    max-height:320px !important;
}

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

@media(max-width:768px){

    .adpai-dashboard{

        padding:16px;
    }

    .dashboard-grid{

        grid-template-columns:1fr;
    }
}



.dashboard-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(420px,1fr)
        );

    gap:20px;
}

/* =========================
🪟 OVERLAYS
========================= */

.adpai-overlays{

    position:relative;

    z-index:9999;
}


.adpai-box{

    min-height:420px;
}

.adpai-box canvas{

    width:100% !important;

    height:320px !important;
}


.box-title{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:18px;

    font-weight:700;

    color:#111827;

    margin-bottom:18px;
}

.box-title i{

    font-size:16px;

    color:#6b7280;

    width:18px;

    text-align:center;
}