/* =========================
🚀 DASHBOARD
========================= */

.adpai-dashboard{

    width:100%;

    min-height:100vh;

    padding:24px;

    background:#f5f7fb;

    font-family:
        Inter,
        system-ui,
        sans-serif;
}

/* =========================
🧠 HEADER
========================= */

.adpai-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    margin-bottom:28px;

    flex-wrap:wrap;
}

.dashboard-title h1{

    margin:0;

    font-size:34px;

    font-weight:800;

    color:#111827;
}

.dashboard-title p{

    margin-top:10px;

    color:#6b7280;

    line-height:1.7;
}

/* =========================
🎯 ACTIONS
========================= */

.dashboard-actions{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;
}

/* =========================
🧭 TABS
========================= */

.adpai-tabs{

    display:flex;

    gap:12px;

    margin-bottom:24px;

    flex-wrap:wrap;
}

.tab-btn{

    border:none;

    background:#fff;

    border-radius:14px;

    padding:12px 18px;

    font-weight:600;

    cursor:pointer;

    transition:.2s ease;

    border:1px solid #e5e7eb;
}

.tab-btn.active{

    background:#111827;

    color:#fff;
}

/* =========================
📊 KPI CARDS
========================= */

.dashboard-cards{

    display:grid;

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

    gap:20px;

    margin-bottom:24px;
}

.kpi-card{

    background:#fff;

    border-radius:20px;

    padding:22px;

    border:1px solid #edf2f7;

    box-shadow:
        0 2px 8px rgba(0,0,0,.04);
}

.card-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0 0 14px;

    font-size:15px;

    color:#6b7280;
}

.card-icon{

    width:34px;
    height:34px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#f3f4f6;

    color:#374151;
}

.kpi-card p{

    margin:0;

    font-size:30px;

    font-weight:800;

    color:#111827;
}

/* =========================
🧠 INTELLIGENCE
========================= */

.dashboard-intelligence{

    display:grid;

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

    gap:18px;

    margin-bottom:24px;
}

.intel-item{

    background:#fff;

    border-radius:18px;

    padding:20px;

    border:1px solid #edf2f7;
}

.intel-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0 0 14px;

    font-size:14px;

    font-weight:600;

    color:#6b7280;
}

.intel-title i{

    width:18px;

    text-align:center;

    font-size:14px;

    color:#6b7280;

}

.intel-item strong{

    color:#111827;

    font-size:17px;

    line-height:1.6;
}

/* =========================
📈 GRID
========================= */

.dashboard-grid{

    display:grid;

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

    gap:22px;

    margin-bottom:24px;
}

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

.adpai-box{

    background:#fff;

    border-radius:22px;

    padding:24px;

    border:1px solid #edf2f7;

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

    overflow:hidden;

    min-height:420px;
}

/* =========================
📦 TITLES
========================= */

.box-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0 0 18px;

    font-size:18px;

    font-weight:700;

    color:#111827;
}

.box-title i{

    color:#6b7280;

    font-size:15px;
}

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

.adpai-box canvas{

    width:100% !important;

    height:320px !important;

    max-height:320px !important;
}

/* =========================
🤖 AI PANEL
========================= */

.ai-panel{

    min-height:auto;
}

/* =========================
🔍 FILTERS
========================= */

.adpai-filters{

    display:grid;

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

    gap:14px;

    margin-bottom:24px;
}

.adpai-filters input,
.adpai-filters select{

    height:48px;

    border-radius:14px;

    border:1px solid #d1d5db;

    padding:0 14px;

    background:#fff;
}

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

@media(max-width:768px){

    .adpai-dashboard{

        padding:16px;
    }

    .dashboard-grid{

        grid-template-columns:1fr;
    }

    .dashboard-cards{

        grid-template-columns:1fr;
    }

    .dashboard-intelligence{

        grid-template-columns:1fr;
    }
}

/* =========================
🤖 AI SUMMARY
========================= */

.ai-summary{

    display:flex;

    flex-direction:column;

    gap:20px;
}

/* =========================
🧠 MAIN AI CARD
========================= */

.ai-card{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:22px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            #111827,
            #1f2937
        );

    color:#fff;

    overflow:hidden;

    position:relative;
}

.ai-card::before{

    content:"";

    position:absolute;

    top:-60px;
    right:-60px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        rgba(255,255,255,.05);
}

/* ICON */

.ai-card-icon{

    width:56px;
    height:56px;

    border-radius:18px;

    background:
        rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    flex-shrink:0;
}

/* CONTENT */

.ai-card-content{

    display:flex;

    flex-direction:column;

    gap:8px;

    position:relative;

    z-index:2;
}

.ai-label{

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.08em;

    opacity:.7;
}

#ai-summary-text{

    font-size:18px;

    line-height:1.7;

    font-weight:700;
}

/* =========================
📊 MINI GRID
========================= */

.ai-insights-grid{

    display:grid;

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

    gap:16px;
}

/* =========================
📦 MINI CARD
========================= */

.ai-mini-card{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:18px;

    border-radius:18px;

    border:1px solid #edf2f7;

    background:#f9fafb;

    transition:.2s ease;
}

.ai-mini-card:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 18px rgba(0,0,0,.06);
}

/* ICON */

.ai-mini-icon{

    width:42px;
    height:42px;

    border-radius:14px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#6b7280;

    border:1px solid #edf2f7;

    flex-shrink:0;
}

/* TEXT */

.ai-mini-card span{

    display:block;

    font-size:12px;

    color:#6b7280;

    margin-bottom:6px;
}

.ai-mini-card strong{

    font-size:15px;

    color:#111827;

    line-height:1.6;
}

/* =========================
📱 MOBILE
========================= */

@media(max-width:768px){

    .ai-insights-grid{

        grid-template-columns:1fr;
    }

    .ai-card{

        flex-direction:column;
    }
}