/* ============================================================
SERVER: /home/markpnkr/public_html/assets/css/mv-dashboard.css
VERSION: 1.1
DATE: 2026-03-16
MARKETVISTA AI — DASHBOARD LAYOUT SYSTEM
============================================================ */


/* =========================================================
DASHBOARD GRID LAYOUT
========================================================= */

.mv-dashboard{
display:flex;
gap:20px;
align-items:flex-start;
width:100%;
}

.mv-left{
flex:2;
display:flex;
flex-direction:column;
gap:20px;
}

.mv-right{
flex:1;
display:flex;
flex-direction:column;
gap:20px;
}

@media(max-width:1200px){

.mv-dashboard{
flex-direction:column;
}

.mv-left,
.mv-right{
width:100%;
}

}


/* =========================================================
ACCOUNT OVERVIEW GRID
========================================================= */

.mv-overview-grid,
.mv-overview{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

@media(max-width:1000px){

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

}

@media(max-width:600px){

.mv-overview-grid,
.mv-overview{
grid-template-columns:1fr;
}

}



/* =========================================================
MARKETVISTA — RISK GRADE COLORS
========================================================= */

#ovRisk{
font-size:28px;
font-weight:800;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.5px;
}

/* force override */

#ovRisk.mv-risk-A{ color:#16c784 !important; }
#ovRisk.mv-risk-B{ color:#2ecc71 !important; }
#ovRisk.mv-risk-C{ color:#f39c12 !important; }
#ovRisk.mv-risk-D{ color:#e74c3c !important; }


/* =========================================================
STAT CARDS
========================================================= */

.mv-stat,
.mv-card{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:12px;
padding:16px 18px;
transition:all .2s ease;
cursor:default;
position:relative;
overflow:hidden;
min-height:96px;
display:flex;
flex-direction:column;
justify-content:flex-start;
}

.mv-stat:hover,
.mv-card:hover{
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.mv-stat-label,
.mv-card-title{
font-size:12px;
font-weight:600;
color:#64748b;
margin-bottom:8px;
letter-spacing:.2px;
}


/* =========================================================
STAT VALUE
========================================================= */

.mv-stat-value,
.mv-card-value{
font-size:30px;
font-weight:800;
line-height:1.1;
letter-spacing:.2px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-variant-numeric:tabular-nums;
margin-bottom:2px;
}

/* default stat color */
.mv-stat-value{color:#0f172a;}

/* risk overrides */
#ovRisk.mv-risk-A{ color:#16c784; }
#ovRisk.mv-risk-B{ color:#2ecc71; }
#ovRisk.mv-risk-C{ color:#f39c12; }
#ovRisk.mv-risk-D{ color:#e74c3c; }



/* =========================================================
SPARKLINES
========================================================= */

.mv-sparkline{
width:100%;
height:32px !important;
margin-top:6px;
}


/* =========================================================
PORTFOLIO RISK STRIP
========================================================= */

.mv-risk-strip{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:12px 16px;
border-radius:12px;
background:#ffffff;
border:1px solid #e5e7eb;
font-size:13px;
font-weight:600;
}

.mv-risk-bar{
height:6px;
border-radius:4px;
background:#e5e7eb;
overflow:hidden;
margin-top:8px;
}

.mv-risk-bar-fill{
height:100%;
background:linear-gradient(90deg,#16a34a,#22c55e);
}

/* =========================================================
WIDGET OVERFLOW HOTFIX
========================================================= */

.mv-dashboard,
.mv-left,
.mv-right{
min-width:0;
max-width:100%;
}

.mv-left,
.mv-right{
flex-basis:0;
}

.mv-dashboard > *,
.mv-left > *,
.mv-right > *,
.mv-widget,
.widget-card,
.card,
.card-body,
.card-header{
min-width:0;
max-width:100%;
box-sizing:border-box;
}

.mv-widget canvas,
.mv-widget svg,
.mv-widget img,
.card canvas,
.card svg,
.card img{
max-width:100% !important;
height:auto;
}

.mv-right .row,
.mv-right [class*="col-"]{
min-width:0;
}

.mv-right .btn,
#mvTurboButtonsGrid .btn,
#mvTurboQtyButtons .btn,
#mvTurboOffsetButtons .btn{
max-width:100%;
white-space:normal;
word-break:break-word;
}

@media (max-width: 1399.98px){
.mv-dashboard{
flex-wrap:wrap;
}

.mv-left,
.mv-right{
flex:1 1 100%;
width:100%;
}
}