/* RESET */

*{
    box-sizing:border-box;
}

body{

    margin:0;

    background:#081018;

    color:white;

    font-family:'Inter',sans-serif;

}

/* LAYOUT */

.dashboard{

    display:flex;

    min-height:100vh;

}

.sidebar{

    width:250px;

    background:#0F1722;

    padding:24px;

    border-right:
    1px solid rgba(255,255,255,.05);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.main{

    flex:1;

    padding:32px;

    overflow-y:auto;

}

/* LOGO */

.logo{

    margin-bottom:40px;

}

.logo h1{

    color:#3BA4FF;

    font-size:48px;

    margin:0;

}

.logo span{

    color:#8EA4C1;

    font-size:13px;

    letter-spacing:2px;

}

/* NAVIGATION */

.nav-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px;

    margin-bottom:10px;

    border-radius:16px;

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

    color:#8EA4C1;

    transition:.2s;

    cursor:pointer;

}

.nav-item:hover{

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

    color:white;

}

.nav-item.active{

    background:
    rgba(59,164,255,.14);

    color:white;

}

/* USER CARD */

.user-card{

    background:#111B29;

    border-radius:20px;

    padding:20px;

    border:1px solid rgba(255,255,255,.05);

}

/* TOPBAR */

.topbar{

    margin-bottom:30px;

}

.title h2{

    margin:0;

    font-size:34px;

    font-weight:800;

}

.title p{

    margin-top:10px;

    color:#8EA4C1;

    font-size:15px;

}

/* SUMMARY GRID */

.summary-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:32px;

}

.summary-card{

    background:#0F1722;

    border-radius:22px;

    padding:24px;

    border:1px solid rgba(255,255,255,.05);

}

.summary-label{

    color:#8EA4C1;

    font-size:12px;

    letter-spacing:1.5px;

    margin-bottom:14px;

}

.summary-value{

    font-size:34px;

    font-weight:800;

    color:white;

}

.summary-value span{

    font-size:13px;

    color:#8EA4C1;

    margin-left:6px;

}

/* MATERIAL FLOW */

.flow-section{

    margin-bottom:32px;

}

.section-title{

    font-size:20px;

    font-weight:700;

    margin-bottom:24px;

    letter-spacing:1px;

}

.flow-grid{

    display:grid;

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

    gap:18px;

}

.flow-card{

    background:#0F1722;

    border-radius:22px;

    padding:28px;

    position:relative;

    border:1px solid rgba(255,255,255,.05);

    overflow:hidden;

}

.flow-card::after{

    content:'→';

    position:absolute;

    right:-14px;

    top:50%;

    transform:translateY(-50%);

    font-size:34px;

    color:#3BA4FF;

    opacity:.4;

}

.flow-card:last-child::after{

    display:none;

}

.flow-label{

    color:#8EA4C1;

    font-size:12px;

    letter-spacing:1px;

    margin-bottom:18px;

}

.flow-value{

    font-size:36px;

    font-weight:800;

    margin-bottom:18px;

}

.flow-progress{

    height:8px;

    background:#1B2634;

    border-radius:20px;

    overflow:hidden;

}

.flow-progress-bar{

    height:100%;

    border-radius:20px;

    background:#3BA4FF;

}

/* MATERIAL BALANCE */

.balance-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:32px;

}

.balance-tile{

    background:
    linear-gradient(
    180deg,
    rgba(15,23,34,.96),
    rgba(10,17,28,.96)
    );

    border-radius:24px;

    padding:28px;

    border:1px solid rgba(255,255,255,.05);

    min-height:150px;

    position:relative;

    overflow:hidden;

}

.balance-tile::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at top left,
    rgba(59,164,255,.10),
    transparent 60%
    );

}

.tile-label{

    color:#8EA4C1;

    font-size:13px;

    letter-spacing:1px;

    margin-bottom:20px;

    position:relative;

    z-index:2;

}

.tile-value{

    position:relative;

    z-index:2;

    font-size:42px;

    font-weight:800;

}

.ready .tile-value{

    color:#00FFAE;

}

.scrap .tile-value{

    color:#FF5B6E;

}

/* CHART */

.content-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

}

.card{

    background:#0F1722;

    border-radius:24px;

    padding:28px;

    border:1px solid rgba(255,255,255,.05);

}

.card-title{

    margin-bottom:20px;

}

.card-title h3{

    margin:0;

    font-size:20px;

}

.chart{

    height:420px;

}

/* RESPONSIVE */

@media(max-width:1400px){

    .summary-grid{

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

    }

    .flow-grid{

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

    }

}

@media(max-width:992px){

    .dashboard{

        flex-direction:column;

    }

    .sidebar{

        width:100%;

    }

    .summary-grid{

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

    }

    .flow-grid{

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

    }

    .balance-grid{

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

    }

}

@media(max-width:768px){

    .summary-grid,
    .flow-grid,
    .balance-grid{

        grid-template-columns:1fr;

    }

    .main{

        padding:20px;

    }

}