/* ============================================================
SERVER: /home/markpnkr/public_html/assets/css/mv-scanner.css
VERSION: 1.2
DATE: 2026-03-14
MARKETVISTA AI — SCANNER PAGE CSS
============================================================ */


/* =========================================================
SCANNER LIST
========================================================= */

.mv-scanner-list{
list-style:none;
padding:0;
margin:0;
}

.mv-scanner-list li{
display:flex;
justify-content:space-between;
align-items:center;
padding:6px 0;
border-bottom:1px solid rgba(0,0,0,.05);
font-size:14px;
transition:background .2s ease;
}

/* hover */

.mv-scanner-list li:hover{
background:rgba(0,0,0,.03);
border-radius:4px;
padding-left:6px;
padding-right:6px;
}


/* =========================================================
PRICE COLORS
========================================================= */

.mv-pos{
color:#16a34a;
font-weight:600;
}

.mv-neg{
color:#dc2626;
font-weight:600;
}


/* =========================================================
SCANNER WIDGET CARDS
========================================================= */

.mv-widget{
border-radius:12px;
overflow:hidden;
border:1px solid rgba(0,0,0,.06);
box-shadow:0 6px 18px rgba(0,0,0,.04);
transition:all .25s ease;
background:#ffffff;
}

.mv-widget:hover{
box-shadow:0 12px 30px rgba(0,0,0,.12);
}


/* =========================================================
WIDGET HEADER
========================================================= */

.mv-widget .card-header{
font-weight:600;
font-size:14px;
background:#f8fafc;
border-bottom:1px solid rgba(0,0,0,.05);
}


/* =========================================================
SECTOR HEATMAP GRID
========================================================= */

#mvSectorHeatmap{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(110px,1fr));

gap:8px;

padding-top:6px;

}


/* =========================================================
HEATMAP TILE
========================================================= */

.mv-heat-tile{

height:60px;

border-radius:6px;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

font-size:12px;
font-weight:600;

color:#ffffff;

cursor:pointer;

transition:transform .15s ease, box-shadow .15s ease;

}

.mv-heat-tile:hover{

transform:scale(1.05);

box-shadow:0 6px 14px rgba(0,0,0,.2);

}


/* =========================================================
HEATMAP TEXT
========================================================= */

.mv-heat-symbol{
font-size:12px;
font-weight:700;
}

.mv-heat-change{
font-size:11px;
opacity:.9;
}


/* =========================================================
HEATMAP COLORS
========================================================= */

.mv-heat-up{
background:#16a34a;
}

.mv-heat-down{
background:#dc2626;
}

.mv-heat-neutral{
background:#64748b;
}


/* =========================================================
MARKET BREADTH
========================================================= */

#mvAdvancers,
#mvDecliners,
#mvBreadthRatio{
font-weight:700;
}


/* =========================================================
DARK MODE
========================================================= */

[data-bs-theme="dark"] .mv-widget{
background:#020617;
border:1px solid rgba(255,255,255,.08);
}

[data-bs-theme="dark"] .mv-widget .card-header{
background:#020617;
border-bottom:1px solid rgba(255,255,255,.06);
}

[data-bs-theme="dark"] .mv-scanner-list li{
border-bottom:1px solid rgba(255,255,255,.05);
}

[data-bs-theme="dark"] .mv-scanner-list li:hover{
background:rgba(255,255,255,.04);
}

/* =========================================================
Expand Icon
========================================================= */
.mv-expand{

font-size:18px;
text-decoration:none;
color:var(--bs-body-color);
opacity:.7;
transition:.2s;

}

.mv-expand:hover{

opacity:1;
transform:scale(1.15);

}