/* ===============================
   DASHBOARD PAGE
=================================*/

.hero{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:35px;

}

.heroCard{

background:#182235;

border:1px solid #27344A;

padding:35px;

border-radius:20px;

width:100%;

}

.heroCard h1{

font-size:38px;

font-weight:800;

margin-bottom:10px;

}

.heroCard p{

color:#94A3B8;

font-size:16px;

}

.statsGrid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin:35px 0;

}

.statCard{

background:#182235;

padding:28px;

border-radius:18px;

border:1px solid #27344A;

transition:.25s;

}

.statCard:hover{

border-color:#3B82F6;

transform:translateY(-3px);

}

.statCard h4{

font-size:14px;

color:#94A3B8;

margin-bottom:15px;

}

.statCard h2{

font-size:42px;

font-weight:800;

}

.panel{

margin-top:30px;

background:#182235;

padding:28px;

border-radius:18px;

border:1px solid #27344A;

}

.panel h3{

margin-bottom:20px;

font-size:24px;

}

.dashboardTable{

width:100%;

border-collapse:collapse;

}

.dashboardTable th{

padding:18px;

text-align:left;

border-bottom:1px solid #27344A;

color:#CBD5E1;

}

.dashboardTable td{

padding:18px;

border-bottom:1px solid #27344A;

}

.dashboardTable tr:hover{

background:#1B2436;

}

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

@media (max-width: 1100px) {

    .statsGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .heroCard {
        padding: 28px;
    }

}

@media (max-width: 700px) {

    .hero {
        margin-bottom: 22px;
    }

    .heroCard {
        padding: 22px;
    }

    .heroCard h1 {
        font-size: 30px;
    }

    .statsGrid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 22px 0;
    }

    .statCard {
        padding: 22px;
    }

    .statCard h2 {
        font-size: 34px;
    }

    .panel {
        padding: 18px;
        overflow-x: auto;
    }

    .dashboardTable {
        min-width: 620px;
    }

}

@media (max-width: 480px) {

    .heroCard h1 {
        font-size: 26px;
    }

    .heroCard p {
        font-size: 14px;
    }

    .statCard {
        padding: 18px;
    }

    .statCard h2 {
        font-size: 30px;
    }

    .panel {
        padding: 16px;
    }

}