/*
 * CampusStock — Style tiga kartu Posisi Stok Atribut
 * File ini harus ditempatkan di:
 * assets/css/public-stock-overview-kpi-v1.css
 */

.unej-stock-section .public-stock-overview,
.unej-stock-section .public-stock-overview *,
.unej-stock-section .public-stock-overview *::before,
.unej-stock-section .public-stock-overview *::after{
    box-sizing:border-box;
}

/* =========================================================
   TIGA KARTU POSISI STOK — PANEL KPI BIRU MENYATU
   ========================================================= */

.public-stock-overview{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:0 !important;
    margin:18px 0 24px !important;
    overflow:hidden !important;
    border:1px solid #d9e3f2 !important;
    border-radius:18px !important;
    background:#ffffff !important;
    box-shadow:0 16px 34px rgba(35,73,132,.12) !important;
}

.public-stock-overview-card{
    position:relative !important;
    min-width:0 !important;
    min-height:180px !important;
    padding:0 !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    background:#ffffff !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:column !important;
}

.public-stock-overview-card:not(:last-child){
    border-right:1px solid #d7e1ef !important;
}

.public-stock-kpi-head{
    min-height:66px;
    padding:13px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#ffffff;
}

.public-stock-overview-card.primary .public-stock-kpi-head{
    background:linear-gradient(135deg,#2353b7 0%,#3167d1 100%);
}

.public-stock-overview-card.secondary .public-stock-kpi-head{
    background:linear-gradient(135deg,#4388ec 0%,#4f94ed 100%);
}

.public-stock-overview-card.total .public-stock-kpi-head{
    background:linear-gradient(135deg,#1f4b91 0%,#2d5ca8 100%);
}

.public-stock-kpi-head-icon{
    width:39px;
    height:39px;
    flex:0 0 39px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.28);
    border-radius:11px;
    background:rgba(255,255,255,.10);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
    font-size:19px;
}

.public-stock-kpi-head strong{
    min-width:0;
    overflow:hidden;
    color:#ffffff;
    font-size:18px;
    font-weight:900;
    line-height:1.1;
    letter-spacing:.2px;
    text-overflow:ellipsis;
    text-transform:uppercase;
    white-space:nowrap;
}

.public-stock-overview-main{
    min-width:0 !important;
    flex:1 1 auto !important;
    padding:20px 18px 17px !important;
    display:grid !important;
    grid-template-columns:minmax(155px,.9fr) minmax(0,1.1fr) !important;
    gap:14px !important;
    align-items:center !important;
    background:#ffffff !important;
}

.public-stock-kpi-value-wrap{
    min-width:0;
    display:flex;
    align-items:center;
    gap:13px;
}

.public-stock-overview-icon{
    position:static !important;
    inset:auto !important;
    width:47px !important;
    height:47px !important;
    flex:0 0 47px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid #cfe0f5 !important;
    border-radius:50% !important;
    background:#edf6ff !important;
    box-shadow:inset 0 0 0 7px rgba(255,255,255,.48) !important;
    font-size:21px !important;
}

.public-stock-overview-card.primary .public-stock-overview-icon{
    color:#5e7ea9 !important;
}

.public-stock-overview-card.secondary .public-stock-overview-icon{
    color:#1f8ecf !important;
}

.public-stock-overview-card.total .public-stock-overview-icon{
    color:#2c65bb !important;
}

.public-stock-overview-value{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
}

.public-stock-overview-value>strong{
    display:block !important;
    margin:0 !important;
    color:#092b64 !important;
    font-size:42px !important;
    font-weight:900 !important;
    line-height:.95 !important;
    letter-spacing:-1.2px !important;
    white-space:nowrap !important;
}

.public-stock-overview-value>small{
    display:block !important;
    margin-top:8px !important;
    overflow:hidden !important;
    color:#6d7f9a !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.public-stock-overview-detail{
    min-width:0 !important;
    max-height:72px !important;
    padding-left:13px !important;
    border-left:1px solid #e0e8f3 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:11px !important;
    row-gap:5px !important;
    align-content:center !important;
    overflow:hidden !important;
}

.public-stock-overview-detail span{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:6px !important;
    color:#687a95 !important;
    font-size:9px !important;
    font-weight:700 !important;
    line-height:1.18 !important;
    white-space:nowrap !important;
}

.public-stock-overview-detail span b{
    min-width:0 !important;
    overflow:hidden !important;
    color:#173765 !important;
    font-size:inherit !important;
    font-weight:800 !important;
    text-overflow:ellipsis !important;
}

.public-stock-overview-detail span em{
    flex:0 0 auto !important;
    color:#6a7f9e !important;
    font-size:9px !important;
    font-style:normal !important;
    font-weight:800 !important;
}

.public-stock-overview-detail .is-empty{
    grid-column:1/-1 !important;
    justify-content:flex-start !important;
    opacity:.75 !important;
}

.public-stock-live-activity{
    grid-template-columns:1fr !important;
    row-gap:6px !important;
    max-height:76px !important;
}

.public-stock-live-activity span{
    width:100% !important;
}

.public-stock-live-activity span b{
    max-width:145px !important;
}

.public-stock-live-activity span em{
    display:flex !important;
    align-items:baseline !important;
    gap:4px !important;
    color:#164a85 !important;
    font-size:11px !important;
}

.public-stock-live-activity span em small{
    color:#8b9bb2 !important;
    font-size:7px !important;
    font-weight:800 !important;
}

.public-stock-live-update{
    display:block !important;
    overflow:hidden !important;
    color:#9aa8bb !important;
    font-size:7px !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

/* Tablet */
@media(max-width:1120px){
    .public-stock-kpi-head{
        padding:12px 13px;
    }

    .public-stock-kpi-head strong{
        font-size:15px;
    }

    .public-stock-overview-main{
        padding:17px 13px 15px !important;
        grid-template-columns:minmax(125px,.85fr) minmax(0,1.15fr) !important;
        gap:9px !important;
    }

    .public-stock-kpi-value-wrap{
        gap:9px;
    }

    .public-stock-overview-icon{
        width:42px !important;
        height:42px !important;
        flex-basis:42px !important;
        font-size:18px !important;
    }

    .public-stock-overview-value>strong{
        font-size:34px !important;
    }

    .public-stock-overview-detail{
        padding-left:9px !important;
        column-gap:7px !important;
    }

    .public-stock-overview-detail span,
    .public-stock-overview-detail span em{
        font-size:8px !important;
    }
}

/* Mobile: tetap seperti panel KPI tetapi ditumpuk vertikal. */
@media(max-width:760px){
    .public-stock-overview{
        grid-template-columns:1fr !important;
        border-radius:16px !important;
    }

    .public-stock-overview-card{
        min-height:164px !important;
    }

    .public-stock-overview-card:not(:last-child){
        border-right:0 !important;
        border-bottom:1px solid #d7e1ef !important;
    }

    .public-stock-kpi-head{
        min-height:57px;
        padding:10px 15px;
    }

    .public-stock-kpi-head-icon{
        width:36px;
        height:36px;
        flex-basis:36px;
        font-size:17px;
    }

    .public-stock-kpi-head strong{
        font-size:16px;
    }

    .public-stock-overview-main{
        padding:16px 15px !important;
        grid-template-columns:minmax(142px,.9fr) minmax(0,1.1fr) !important;
        gap:12px !important;
    }

    .public-stock-overview-value>strong{
        font-size:36px !important;
    }
}

@media(max-width:480px){
    .public-stock-overview-main{
        grid-template-columns:1fr !important;
    }

    .public-stock-overview-detail{
        max-height:none !important;
        margin-top:2px !important;
        padding:10px 0 0 !important;
        border-top:1px solid #e0e8f3 !important;
        border-left:0 !important;
    }
}