/* v24 — final PWA header/theme fix + dashboard layout aligned with approved mockup */

/* Flag chips in the top market-data ticker. */
.ticker-flag{display:inline-flex;width:20px;height:14px;border-radius:3px;overflow:hidden;vertical-align:-2px;margin-right:6px;box-shadow:0 0 0 1px rgba(120,137,158,.25);background:#fff}
.ticker-flag svg{display:block;width:100%;height:100%}

/* Desktop dashboard: compact market strip + watchlist on the left, chart/insight on the right. */
@media(min-width:901px){
  #view-overview.active{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(520px,1.35fr);grid-template-areas:"head head" "indices indices" "list hero";gap:16px 18px;align-items:start}
  #view-overview>.page-head{grid-area:head;margin-bottom:2px}
  #view-overview>.index-strip{grid-area:indices;margin-bottom:2px}
  #view-overview>.hero-grid{grid-area:hero;display:grid;grid-template-columns:1fr;gap:16px}
  #view-overview>.list-panel{grid-area:list;margin-top:0!important;min-height:100%}
  #view-overview .portfolio{height:315px}
  #view-overview .portfolio svg{height:190px}
  #view-overview .insight{min-height:210px}
  #view-overview .stock-row{grid-template-columns:minmax(0,1.35fr) .78fr .72fr 72px 28px;gap:8px;padding:11px 8px}
  #view-overview .stock-row>div:nth-child(4){display:none}
  #view-overview .spark{width:72px}
}

/* Make dashboard cards look like the approved light/dark mockup. */
.index-card{border-width:1px!important}
html[data-theme="dark"] .index-card{background:linear-gradient(145deg,#101d2d,#0b1624)!important;border-color:#263951!important}
html[data-theme="light"] .index-card{background:linear-gradient(145deg,#fbfdfe,#f1f6f9)!important;border-color:#d3dee7!important}
html[data-theme="dark"] #view-overview .list-panel,html[data-theme="dark"] #view-overview .portfolio,html[data-theme="dark"] #view-overview .insight{background:linear-gradient(145deg,#101b2a,#0c1623)!important;border-color:#22354a!important}
html[data-theme="light"] #view-overview .list-panel,html[data-theme="light"] #view-overview .portfolio,html[data-theme="light"] #view-overview .insight{background:#f9fbfc!important;border-color:#d4dfe8!important}

/* Critical fix: v4 hid the entire header on mobile. v24 explicitly restores it for Safari/PWA. */
@media(max-width:900px){
  .app{display:grid!important;grid-template:64px 1fr/1fr!important;min-height:100dvh!important}
  header{display:grid!important;visibility:visible!important;opacity:1!important;position:sticky!important;top:0!important;grid-column:1!important;grid-row:1!important;height:64px!important;z-index:70!important}
  main{grid-column:1!important;grid-row:2!important;padding-top:20px!important}
  .mobile-menu{display:block!important}
  .header-actions,.theme-segment,.theme-segment button,.sync{display:grid!important;visibility:visible!important;opacity:1!important}
  .theme-segment button{display:flex!important}
  .sync{display:flex!important}
  .ticker{display:none!important}
  .market-sessions{margin-top:0!important}
}

/* iPhone: keep logo and both theme buttons visible even at narrow widths. */
@media(max-width:540px){
  header{grid-template-columns:36px minmax(0,1fr) 116px!important;padding-left:max(0px,env(safe-area-inset-left))!important;padding-right:max(2px,env(safe-area-inset-right))!important}
  .brand{min-width:0!important;overflow:hidden!important;padding:0 4px!important}
  .brand>img{width:27px!important;height:27px!important}
  .brand>div{font-size:.67rem!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .header-actions{width:112px!important;min-width:112px!important;margin:0 2px 0 0!important;justify-items:stretch!important}
  .theme-segment{width:112px!important;min-width:112px!important}
  .theme-segment button{min-width:0!important;padding:5px 2px!important}
  .theme-segment button small{display:inline!important;font-size:8.5px!important}
  .sync{display:flex!important;width:112px!important;min-width:112px!important;justify-content:center!important;font-size:8px!important;line-height:1!important}
  .sync span{display:inline!important;max-width:94px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .market-sessions{gap:10px!important;margin-bottom:16px!important}
  .market-sessions>div{min-width:calc(50% - 5px)!important}
  .page-head{margin-top:10px!important}
}

@media(max-width:390px){
  header{grid-template-columns:32px minmax(0,1fr) 106px!important}
  .brand>img{width:25px!important;height:25px!important}.brand>div{font-size:.62rem!important}
  .header-actions,.theme-segment,.sync{width:104px!important;min-width:104px!important}
  .theme-segment button small{font-size:8px!important}
  .sync{font-size:7.6px!important}
}

/* Standalone PWA: safe-area belongs to the header, not an empty body spacer. */
@media(display-mode:standalone){
  body{padding-top:0!important}
  .app{padding-top:env(safe-area-inset-top)!important;background:inherit}
  header{top:env(safe-area-inset-top)!important}
}
html.pwa-standalone body{padding-top:0!important}
html.pwa-standalone .app{padding-top:env(safe-area-inset-top)!important}

/* High-contrast live status dot in both themes. */
.sync i{display:inline-block!important;border-radius:50%!important;animation:v24LivePulse 1.45s ease-out infinite!important}
@keyframes v24LivePulse{0%{box-shadow:0 0 0 0 rgba(22,201,145,.48)}70%{box-shadow:0 0 0 7px rgba(22,201,145,0)}100%{box-shadow:0 0 0 0 rgba(22,201,145,0)}}

/* Compact dashboard on phones; preserve the approved visual hierarchy. */
@media(max-width:900px){
  #view-overview .page-head h1{font-size:clamp(2rem,9vw,3rem)!important}
  #view-overview .index-strip{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;margin:0!important;padding:0!important;gap:12px!important}
  #view-overview .index-card{min-width:0!important;grid-template-columns:42px minmax(0,1fr) 112px!important;padding:15px!important}
  #view-overview .hero-grid{margin-top:16px!important}
  #view-overview .list-panel{margin-top:16px!important}
}