/* ═══════════════════════════════════════════════════════════════
   CHESWOOD GROUP — RESPONSIVE DESIGN SYSTEM
   Institutional-grade adaptive layout for all screen sizes.
   Breakpoints: 1200px / 900px / 600px / 480px
   ═══════════════════════════════════════════════════════════════ */

/* ── FLUID TYPOGRAPHY ── */
@media(max-width:600px){
  html{font-size:11px}
}

/* ── HEADER / NAV BAR — shared across most pages ──
   Pattern: .hdr > .brand + .hstats/.hkpis + .hdr-right
   or:      .hdr > .brand + .hdr-right
   or:      .hdr > .hdr-inner > .brand + .hdr-kpis + .hdr-right
*/
@media(max-width:900px){
  .hdr{height:auto;min-height:44px;flex-wrap:wrap}
  .hdr-inner{height:auto!important;min-height:44px;flex-wrap:wrap}
  .brand{padding:0 12px;min-width:auto!important;border-right:none;height:44px}
  .bname{font-size:9px!important}
  .bsub,.brand-sub{display:none}
  .hstats,.hkpis,.hdr-stats,.hdr-kpis,.mast-kpis{
    order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-top:1px solid rgba(255,255,255,.05);flex-shrink:0;
    scrollbar-width:none;-ms-overflow-style:none
  }
  .hstats::-webkit-scrollbar,.hkpis::-webkit-scrollbar,.hdr-stats::-webkit-scrollbar,.hdr-kpis::-webkit-scrollbar,.mast-kpis::-webkit-scrollbar{display:none}
  .hdr-right{padding:0 10px!important;gap:8px!important;height:44px;border-left:none!important}
  .clk{font-size:14px!important}
  .back{font-size:8px!important}
  .hs,.hk,.hkpi,.mkpi{padding:0 10px;min-width:80px;flex-shrink:0}
}

@media(max-width:600px){
  .hstats,.hkpis,.hdr-stats,.hdr-kpis,.mast-kpis{display:none}
  .hdr{min-height:40px}
  .brand{height:40px;gap:8px!important;padding:0 10px}
  .hdr-right{height:40px}
  .bmark{width:24px!important;height:24px!important;font-size:8px!important}
}

/* ── TABS — horizontal scrolling on overflow ── */
@media(max-width:900px){
  .tabs,.fbar,.cmd{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
  .tabs::-webkit-scrollbar,.fbar::-webkit-scrollbar,.cmd::-webkit-scrollbar{display:none}
  .tab,.fb,.ctab{white-space:nowrap;flex-shrink:0;font-size:8px!important;padding:8px 10px}
}

/* ── TWO-PANEL LAYOUTS — .layout grid collapses ──
   Used by: news.html, predictor.html, monthly.html, intel.html
*/
@media(max-width:900px){
  .layout{
    grid-template-columns:1fr!important;
    height:auto!important;
    overflow:visible!important
  }
  .ncol,.left,.pred-panel{
    border-right:none!important;
    overflow:visible!important;
    height:auto!important
  }
  .rcol,.right,.detail-panel{
    height:auto!important;
    overflow:visible!important;
    min-height:300px;
    border-top:1px solid rgba(255,255,255,.09)
  }
  .nlist,.feed-list,.pred-list,.rows{
    max-height:60vh;
    overflow-y:auto
  }
  .msgs,.cmsgs{height:auto!important;min-height:120px;max-height:200px}
}

/* ── THREE-COLUMN DASHBOARD GRID ──
   Used by: dashboard.html (.body grid with 3 columns)
   Also affects other pages with .body class but only when grid display
*/
@media(max-width:1200px){
  .body:has(>.panel-overview){
    grid-template-columns:1fr 1fr!important
  }
  .panel-overview{grid-column:1/-1!important}
  .panel-analyst{grid-column:1/-1!important}
  .panel-holdings{grid-column:1/-1!important}
  .panel-alloc{grid-column:1/-1!important}
  .panel-pnl{grid-column:1/-1!important}
  .panel-targets{grid-column:1/-1!important}
}
@media(max-width:900px){
  .body:has(>.panel-overview){
    display:flex!important;
    flex-direction:column!important;
    padding:10px!important
  }
  .body:has(>.panel-overview)>.panel,
  .body:has(>.panel-overview)>[class*="panel"]{
    margin-bottom:10px;
    grid-column:auto!important;
    grid-row:auto!important
  }
  .panel-overview .overview-grid{
    grid-template-columns:repeat(3,1fr)!important
  }
  .analyst-inner{
    grid-template-columns:1fr!important
  }
  .analyst-left{border-right:none!important}
  .body{padding:12px!important}
}
@media(max-width:600px){
  .panel-overview .overview-grid{
    grid-template-columns:repeat(2,1fr)!important
  }
  .ov-val{font-size:20px!important}
  .ov-cell{padding:8px 10px!important}
  .ov-lbl{font-size:6px!important}
  .body{padding:8px!important}
}

/* ── KPI ROWS / STAT GRIDS ──
   .kpi-row, .stat-grid, .grid2, .grid3
*/
@media(max-width:900px){
  .kpi-row{grid-template-columns:repeat(2,1fr)!important}
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  .grid3{grid-template-columns:1fr 1fr!important}
}
@media(max-width:600px){
  .kpi-row{grid-template-columns:1fr!important}
  .stat-grid{grid-template-columns:1fr 1fr!important}
  .grid2{grid-template-columns:1fr!important}
  .grid3{grid-template-columns:1fr!important}
}

/* ── TABLES — horizontal scroll ── */
@media(max-width:900px){
  .tbl,.htable{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
  }
  .tbl thead,.htable thead{position:sticky;top:0;z-index:5}
  .card:has(>.tbl),.card:has(>.htable),.card:has(>table){overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ── TOOL GRID — Command Centre cards ── */
@media(max-width:600px){
  .tools{
    grid-template-columns:1fr!important;
    padding:0 12px 40px!important;
    gap:10px!important
  }
  .tool-card{padding:16px!important}
  .tc-icon{font-size:26px!important}
  .tc-name{font-size:17px!important}
}

/* ── HERO SECTIONS ── */
@media(max-width:900px){
  .hero{padding:30px 16px 24px!important}
  .hero-title{font-size:48px!important}
}
@media(max-width:600px){
  .hero{padding:20px 12px 16px!important}
  .hero-title{font-size:36px!important}
  .hero-stats{gap:16px!important}
  .hstat-v{font-size:20px!important}
  .hstat-sep{display:none}
}

/* ── SCORE BANNER (Predictor) ── */
@media(max-width:900px){
  .score-banner{
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:14px 16px!important
  }
  .score-pct{font-size:48px!important}
}
@media(max-width:600px){
  .score-pct{font-size:36px!important}
  .score-title{font-size:16px!important}
}

/* ── PREDICTION / DATA ROWS — wide multi-column grids ── */
@media(max-width:1200px){
  .col-hd,.pred-row,.prow{
    grid-template-columns:3px 50px 1fr 70px 70px 60px!important;
  }
  .col-hd>:nth-child(n+7),.pred-row>:nth-child(n+7),.prow>:nth-child(n+7){
    display:none
  }
}
@media(max-width:600px){
  .col-hd,.pred-row,.prow{
    grid-template-columns:3px 44px 1fr 60px!important;
  }
  .col-hd>:nth-child(n+5),.pred-row>:nth-child(n+5),.prow>:nth-child(n+5){
    display:none
  }
}

/* ── COUNTER ROWS (Active page) ── */
@media(max-width:1200px){
  .rank-header,.counter-row{
    grid-template-columns:36px 140px 80px 80px 70px 1fr!important
  }
  .rank-header>:nth-child(n+7),.counter-row>:nth-child(n+7){display:none}
}
@media(max-width:900px){
  .rank-header,.counter-row{
    grid-template-columns:36px 1fr 70px 70px!important
  }
  .rank-header>:nth-child(n+5),.counter-row>:nth-child(n+5){display:none}
  .cr-ticker{font-size:11px!important}
  .cr-name{display:none}
  .cr-badges{display:none}
}
@media(max-width:600px){
  .market-summary{grid-template-columns:repeat(2,1fr)!important}
  .market-summary .ms-cell:last-child{grid-column:1/-1}
  .ms-val{font-size:20px!important}
  .main{padding:10px 10px!important}
}

/* ── DETAIL OVERLAYS / SIDEBARS ── */
@media(max-width:900px){
  .detail-overlay{
    width:100%!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    z-index:200!important
  }
  .detail-inner{
    grid-template-columns:1fr 1fr!important
  }
}
@media(max-width:600px){
  .detail-inner{
    grid-template-columns:1fr!important
  }
}

/* ── CHART WRAPS ── */
@media(max-width:600px){
  .chart-wrap,.chart-wrap-wide{height:140px!important}
  .charts-row{grid-template-columns:1fr!important}
}

/* ── PORT GRID (Model Portfolios) ── */
@media(max-width:900px){
  .port-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:600px){
  .port-grid{grid-template-columns:1fr!important}
}

/* ── AMOUNT BAR (Model Portfolios) ── */
@media(max-width:600px){
  .amt-bar{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px!important}
  .amt-btns{flex-wrap:wrap}
  .custom-row{margin-left:0!important;width:100%}
  .custom-in{flex:1}
}

/* ── THESIS GRID ── */
@media(max-width:600px){
  .thesis-grid{grid-template-columns:1fr!important}
}

/* ── PRICE GRID (Admin prices) ── */
@media(max-width:600px){
  .price-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))!important}
}

/* ── SETTINGS PAGE ── */
@media(max-width:600px){
  .fg{grid-template-columns:1fr!important}
  .fg3{grid-template-columns:1fr!important}
}

/* ── URGENT BANNER ── */
@media(max-width:600px){
  .urgent{flex-wrap:wrap;gap:6px;padding:6px 12px}
  .u-badge{margin-left:0!important}
  .u-txt{font-size:8px!important}
}

/* ── KEY / API BARS ── */
@media(max-width:600px){
  .key-bar,.setup-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:8px 12px!important
  }
  .key-row,.api-row,.kb-row{
    max-width:100%!important;
    width:100%
  }
}

/* ── FETCH BAR ── */
@media(max-width:600px){
  .fetch-bar,.fbar{
    height:auto!important;
    min-height:34px;
    flex-wrap:wrap;
    padding:4px 10px!important;
    gap:4px
  }
  .fetch-btn,.fetch-btn-main,.scan-btn{
    width:100%;
    height:auto!important;
    padding:8px 12px!important
  }
  .fst,.fetch-status,.fbar-right{
    width:100%;
    justify-content:flex-start;
    margin-left:0!important
  }
}

/* ── ACTION BAR (Predictor) ── */
@media(max-width:600px){
  .action-bar{
    height:auto!important;
    flex-wrap:wrap;
    padding:6px 12px!important
  }
  .ab-right{margin-left:0!important;width:100%}
  .add-btn{width:100%}
}

/* ── MASTHEAD (Active page) ── */
@media(max-width:900px){
  .mast-top{flex-wrap:wrap;height:auto!important;padding:0 12px!important}
  .mast-brand{padding-right:12px;height:44px}
  .mast-kpis{order:3;width:100%;border-top:1px solid rgba(255,255,255,.04)}
  .clk-box{min-width:auto!important;padding:0 10px}
}
@media(max-width:600px){
  .mast-kpis{display:none}
  .mast-brand{border-right:none!important}
  .logo{font-size:22px!important;letter-spacing:2px!important}
  .logo-info{display:none}
  .ticker{display:none}
}

/* ── CMD BAR (Active page) ── */
@media(max-width:600px){
  .cmd{padding:0 10px!important;flex-wrap:wrap;height:auto!important;min-height:34px}
  .cmd-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0}
  .cmd-right{margin-left:0!important;width:100%;padding:4px 0;gap:6px!important}
  .cmd-seg{flex-wrap:wrap}
}

/* ── INTEL ITEMS ── */
@media(max-width:600px){
  .intel-item{flex-direction:column;gap:6px}
  .intel-item .btn{align-self:flex-end}
}

/* ── CHAT / INPUT SECTIONS ── */
@media(max-width:600px){
  .qrow{padding:6px 10px!important}
  .qp{font-size:8px!important;padding:3px 7px!important}
  .chat-in,.cin{font-size:10px!important}
  .ip-ta{min-height:60px!important}
  .ip-row{gap:6px}
}

/* ── SUGGESTED ACTIONS ── */
@media(max-width:600px){
  .sug-actions{padding:6px 10px!important}
  .sug-btn{font-size:7px!important;padding:4px 7px!important}
}

/* ── ALERTS STRIP ── */
@media(max-width:600px){
  .alert-item{flex-wrap:wrap;gap:4px;padding:4px 10px}
  .alert-type{width:auto}
}

/* ── MANDATE TRACKER ── */
@media(max-width:600px){
  .mandate-val{font-size:28px!important}
}

/* ── MC GRIDS (metric card grids) ── */
@media(max-width:600px){
  .mc-grid,.dp-mc-grid,.kpi-g{grid-template-columns:1fr 1fr!important}
}

/* ── FOOTER ── */
@media(max-width:600px){
  .footer{padding:12px!important}
  .footer-l,.footer-r{font-size:7px!important;text-align:center;width:100%}
}

/* ── MODAL RESPONSIVENESS ── */
@media(max-width:600px){
  .ra-modal{margin:8px!important;max-height:95vh}
  .ra-head{padding:20px 16px 0!important}
  .ra-body{padding:16px!important}
  .ra-title{font-size:26px!important}
  .ra-row{grid-template-columns:1fr!important}
}

/* ── NSE MARKET TABLE ── */
@media(max-width:900px){
  .tbl-wrap{height:auto!important;max-height:calc(100vh - 100px)}
  table{min-width:800px!important}
}

/* ── TOUCH TARGETS ── */
@media(max-width:900px){
  .btn,.np-btn,.fb,.tab,.ctab,.ab,.seg-btn,.qp,.sug-btn,.fetch-btn,.scan-btn,.add-btn,.submit-btn,.synth-btn,.ai-btn,.oc-btn,.api-btn,.key-btn,.kb-btn,.custom-btn,.add-pred-btn,.fetch-btn-main,.refresh-btn{
    min-height:36px;
    min-width:36px
  }
}

/* ── PRIVACY BUTTON ── */
@media(max-width:600px){
  .priv-btn{font-size:8px!important;padding:3px 7px!important}
}

/* ── SCROLL PERFORMANCE ── */
@media(max-width:900px){
  *{-webkit-tap-highlight-color:transparent}
  body{-webkit-text-size-adjust:100%}
}

/* ── PRINT — hide non-essential ── */
@media print{
  .hdr,.tabs,.fbar,.cmd,.footer,.setup-bar,.key-bar,.fetch-bar,.action-bar,.mast{display:none!important}
  .layout,.body{display:block!important;height:auto!important;overflow:visible!important}
  .panel,.card{break-inside:avoid;page-break-inside:avoid}
}

/* ── LOGIN PAGE SPECIFIC ── */
@media(max-width:480px){
  .login-wrap{padding:12px!important}
  .pin-card{padding:20px 16px!important}
  .np-btn{padding:12px!important;font-size:16px!important}
  .logo-mark{width:44px!important;height:44px!important;font-size:15px!important}
  .logo-name{font-size:22px!important}
}

/* ── SENSITIVITY PANEL ── */
@media(max-width:600px){
  .sens-body{max-height:120px!important}
}

/* ── DIVIDENDS PAGE ENHANCEMENTS ── */
@media(max-width:900px){
  .div-layout{grid-template-columns:1fr!important}
  .div-left,.div-right{border:none!important}
  .intel-bar{grid-template-columns:repeat(3,1fr)!important}
  .conv-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:600px){
  .intel-bar{grid-template-columns:repeat(2,1fr)!important}
  .conv-grid{grid-template-columns:1fr!important}
  .sector-name{min-width:60px!important;font-size:7px!important}
}

/* ── MARKETS PAGE ENHANCEMENTS ── */
@media(max-width:900px){
  .mkt-layout{grid-template-columns:1fr!important}
}

/* ── EXPANDED PANELS ON MOBILE ── */
@media(max-width:600px){
  .panel-body{padding:10px!important}
  .panel-hd{padding:8px 10px!important}
  .panel-title{font-size:12px!important}
}

/* ── SETTINGS PAGE — SCAN DROP ── */
@media(max-width:600px){
  .scan-drop{padding:16px!important}
  .scan-icon{font-size:22px!important}
  .scan-txt{font-size:9px!important}
  .sr-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))!important}
}

/* ── PORTFOLIO EDITOR (Admin) ── */
@media(max-width:900px){
  .kpi-row[style*="grid-template-columns:repeat(5"]{
    grid-template-columns:repeat(3,1fr)!important
  }
}
@media(max-width:600px){
  .kpi-row[style*="grid-template-columns:repeat(5"]{
    grid-template-columns:repeat(2,1fr)!important
  }
}

/* ── ACCESS TABLE (Admin) ── */
@media(max-width:900px){
  #acc-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #acc-table thead,#acc-table tbody{display:table;width:100%;table-layout:auto}
}

/* ── FIXED USER BADGE ── */
@media(max-width:600px){
  [style*="position:fixed"][style*="top:8px"][style*="right:12px"]{
    position:fixed!important;
    top:auto!important;
    bottom:6px!important;
    right:6px!important;
    left:auto!important;
    background:rgba(2,4,10,.9)!important;
    padding:4px 8px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    z-index:999!important
  }
}

/* ── INTELLIGENCE BADGES ── */
@media(max-width:600px){
  .intel-badges{gap:4px}
  .ibadge{font-size:6px!important;padding:1px 5px!important}
}

/* ── HEALTH SCORE RING ── */
@media(max-width:600px){
  .health-ring{width:42px!important;height:42px!important}
  .health-ring svg{width:42px!important;height:42px!important}
}

/* ── ALLOC LEGEND ── */
@media(max-width:600px){
  .alloc-legend{padding:0 10px 10px!important}
  .al-tk{font-size:8px!important;width:28px!important}
  .al-pct{font-size:8px!important}
  .al-val{font-size:8px!important;width:50px!important}
}

/* ── TARGET TRACKER ── */
@media(max-width:600px){
  .target-row{padding:8px 10px!important}
  .tr-tk{font-size:9px!important}
}

/* ── TOAST MESSAGES ── */
@media(max-width:600px){
  .toast{
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:10px!important;
    font-size:9px!important
  }
}

/* ── PRICE BAR (NSE Market) ── */
@media(max-width:600px){
  .pbar{display:none}
}

/* ── PORTFOLIO IMPACT ROW ── */
@media(max-width:600px){
  .port-impact{flex-wrap:wrap}
}

/* ── HOW IT WORKS (Intel) ── */
@media(max-width:600px){
  .how-it-works{margin:8px 10px!important;padding:8px 10px!important}
}

/* ── ACTIVE PAGE DETAIL ── */
@media(max-width:900px){
  .detail-inner{
    grid-template-columns:1fr 1fr!important;
    padding:12px!important;
    gap:8px!important
  }
}
@media(max-width:600px){
  .detail-inner{
    grid-template-columns:1fr!important
  }
  .detail-section{padding:10px!important}
}