/* NHIP V2.7 — workspace layout refinement. Override-only; does not replace original app logic. */
:root{--ws-gap:12px;--ws-border:#e4e9f0;--ws-muted:#667085;--ws-ink:#172536;--ws-green:#079b79;--ws-red:#d84a55}
*{box-sizing:border-box}
.main{min-width:0;max-width:none}
/* Reduce visual bulk and reserve space for useful information */
.panel,.index-card{box-shadow:0 1px 3px rgba(15,23,42,.035);border:1px solid var(--ws-border)}
.panel{padding:11px;margin-bottom:9px;border-radius:9px;min-width:0}
.panelhead{min-width:0}
.panelhead h2{font-size:13px;font-weight:700;letter-spacing:-.15px}
.panel-sub,.muted,.watch-hint{color:var(--ws-muted)}
.btn{min-height:29px;line-height:1.15}
button,select,input{max-width:100%}
/* Dashboard: compact market strip and balanced chart / watchlist columns */
.index-grid{gap:8px;margin-bottom:9px}
.index-card{padding:10px;border-radius:9px;min-width:0}
.index-card>strong{font-size:20px;line-height:1.15}
.content-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(310px,.82fr);gap:10px;align-items:start}
.content-grid>*{min-width:0}
.chart{height:clamp(205px,24vh,270px);min-height:190px}
.legend{gap:8px;font-size:9px}
.watch-row{padding:6px 8px;min-height:34px}
.watch-symbol,.watch-price{font-size:11px}
.watch-change{font-size:10px}
.newsitem{padding:8px 9px}
.newsitem strong{font-size:10.5px}
/* Dense but readable data tables */
table{font-size:10.5px;border-collapse:separate;border-spacing:0}
th{font-size:9px;letter-spacing:.15px;white-space:nowrap}
th,td{padding:6px 7px;line-height:1.35}
td{vertical-align:middle}
/* Keep wide tables within their own panel instead of stretching the page */
.panel table{max-width:100%}
.panel:has(table){overflow-x:auto;overscroll-behavior-inline:contain}
/* Main workspace has more horizontal room on wide displays */
@media(min-width:1280px){
 .shell{grid-template-columns:168px minmax(0,1fr)}
 .sidebar{padding:15px 8px 10px}
 .nav{min-height:32px;padding:7px 9px;font-size:11.5px}
 .main{padding:14px clamp(14px,1.35vw,22px) 12px}
 .welcome{padding-bottom:10px}
 .welcome h1{font-size:25px}
 .index-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .content-grid{grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr)}
 .chart{height:clamp(205px,23vh,265px)}
}
@media(min-width:1600px){
 .shell{grid-template-columns:176px minmax(0,1fr)}
 .main{padding-left:22px;padding-right:22px}
 .content-grid{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr)}
 .chart{height:270px}
}
/* Tablet: stack panels in a predictable reading order */
@media(max-width:1050px){
 .content-grid{grid-template-columns:minmax(0,1fr);gap:8px}
 .chart{height:245px}
 .panel{padding:10px}
}
/* Mobile: keep market summary compact and chart controls from overflowing */
@media(max-width:720px){
 .main{padding:10px 9px 10px}
 .index-grid{gap:7px}
 .index-card{padding:9px}
 .index-card>strong{font-size:18px}
 .content-grid{display:block}
 .panel{padding:9px;margin-bottom:8px;border-radius:8px}
 .panelhead{flex-wrap:wrap}
 .panelhead h2{font-size:12.5px}
 .chart{height:220px;min-height:180px}
 .toolbar{gap:4px}
 .toolbar .btn{min-height:27px;padding:5px 7px}
 .toolbar select{max-width:92px}
 table{font-size:10px;min-width:520px}
 th,td{padding:6px 7px}
 .panel:has(table){padding-bottom:7px}
}
@media(max-width:380px){.chart{height:200px;min-height:170px}.index-card>strong{font-size:17px}.panel{padding:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}