/* Profinance Monitor Work V54.03 — TV climate usability + full clock location */

/* Explicit interactive climate affordance */
.weather-explore-btn{
  width:auto!important; min-width:56px!important; padding:0 10px!important;
  border-color:rgba(127,83,255,.48)!important;
  background:linear-gradient(180deg,rgba(84,42,193,.34),rgba(21,23,66,.82))!important;
  color:#eee9ff!important; font-weight:800!important; font-size:9px!important;
}
.weather-art{cursor:pointer!important}
.weather-art:focus-visible{outline:2px solid #8f62ff!important;outline-offset:5px!important}

/* Clock location: never truncate the real location in TV */
.tv-mode .clock-location{
  display:grid!important;
  grid-template-columns:auto auto minmax(0,1fr)!important;
  align-items:start!important;
  column-gap:7px!important;
  row-gap:2px!important;
  width:100%!important;
  margin-top:12px!important;
  line-height:1.25!important;
  overflow:visible!important;
}
.tv-mode .clock-location b{white-space:nowrap!important;align-self:start!important}
.tv-mode .clock-location em{
  max-width:none!important;
  width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  display:block!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.28!important;
  min-height:2.55em!important;
}

/* TV layout: reserve enough physical width for both clock and climate */
.tv-mode .mw-main{
  grid-template-columns:minmax(650px,1.12fr) minmax(500px,.88fr)!important;
}
.tv-mode .top-rail{min-width:0!important}
.tv-mode .clock-zone{
  grid-template-columns:minmax(245px,.78fr) minmax(0,1.22fr)!important;
  gap:16px!important;
  overflow:visible!important;
}
.tv-mode .clock-copy{
  min-width:0!important;
  overflow:visible!important;
  padding-right:14px!important;
}
.tv-mode .weather-panel{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  grid-template-columns:clamp(112px,8vw,148px) minmax(0,1fr)!important;
  gap:14px!important;
  overflow:visible!important;
}
.tv-mode .weather-info{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}
.tv-mode .weather-location{width:100%!important;min-width:0!important;flex-wrap:nowrap!important}
.tv-mode .weather-picker{min-width:110px!important;max-width:none!important;flex:1 1 auto!important}
.tv-mode .weather-picker-btn{min-width:0!important}
.tv-mode .weather-main{min-width:0!important;flex-wrap:nowrap!important}
.tv-mode .weather-main>div{min-width:0!important}
.tv-mode .weather-forecast-wrap{width:100%!important;min-width:0!important}
.tv-mode .weather-forecast{width:100%!important;min-width:0!important;overflow-x:auto!important}

/* Keep exit/back controls available in TV mode */
.tv-mode .tv-actions{
  display:flex!important;
  margin-left:auto!important;
  gap:8px!important;
}
.tv-mode .tv-actions .mw-btn{
  height:34px!important;
  padding:0 12px!important;
  font-size:9px!important;
  white-space:nowrap!important;
}

/* In TV, climate popovers are treated as overlays, not layout children */
.tv-mode .weather-details{
  position:fixed!important;
  z-index:15000!important;
  width:min(680px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:min(650px,calc(100vh - 32px))!important;
  overflow:auto!important;
  border:1px solid rgba(124,95,255,.55)!important;
  box-shadow:0 36px 110px rgba(0,0,0,.72),0 0 50px rgba(87,56,255,.18)!important;
}
.tv-mode .weather-picker-menu{
  position:fixed!important;
  z-index:15001!important;
  width:min(330px,calc(100vw - 24px))!important;
  max-height:min(470px,calc(100vh - 24px))!important;
}

/* High-res TV: give location and weather room without clipping */
@media(min-width:1501px){
  .tv-mode .clock-time{font-size:clamp(66px,5.2vw,100px)!important}
  .tv-mode .clock-location{font-size:clamp(10px,.78vw,13px)!important}
  .tv-mode .weather-art{width:clamp(118px,8vw,148px)!important;height:clamp(118px,8vw,148px)!important}
}

/* Typical notebook / 1366–1500 TV viewport */
@media(max-width:1500px){
  .tv-mode .mw-main{
    grid-template-columns:minmax(570px,1.08fr) minmax(430px,.92fr)!important;
  }
  .tv-mode .clock-zone{
    grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr)!important;
    gap:10px!important;
  }
  .tv-mode .clock-copy{padding-right:10px!important}
  .tv-mode .weather-panel{grid-template-columns:96px minmax(0,1fr)!important;gap:10px!important}
  .tv-mode .weather-art{width:96px!important;height:96px!important}
  .tv-mode .weather-main>strong{font-size:29px!important}
  .tv-mode .weather-explore-btn{min-width:50px!important;padding:0 7px!important}
  .tv-mode .clock-location{font-size:10px!important}
}

/* Low-height screens: keep climate controls usable, not hidden */
@media(max-height:800px){
  .tv-mode .clock-location{margin-top:6px!important;font-size:9px!important}
  .tv-mode .clock-location em{min-height:2.4em!important}
  .tv-mode .weather-location{margin-bottom:2px!important}
  .tv-mode .weather-panel{grid-template-columns:82px minmax(0,1fr)!important;gap:8px!important}
  .tv-mode .weather-art{width:82px!important;height:82px!important}
  .tv-mode .weather-main>strong{font-size:25px!important}
  .tv-mode .weather-main b{font-size:9px!important}
  .tv-mode .weather-main span{font-size:7px!important;margin-top:2px!important}
  .tv-mode .weather-forecast-wrap{margin-top:3px!important}
  .tv-mode .weather-location>button{height:27px!important;min-height:27px!important}
  .tv-mode .weather-picker-btn{height:27px!important}
  .tv-mode .weather-explore-btn{height:27px!important;min-width:46px!important;font-size:8px!important}
}

/* Narrow TV / tablet landscape: stack clock copy and weather inside same card */
@media(max-width:1180px){
  .tv-mode .mw-main{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:48px minmax(0,52vh) minmax(0,1fr) 42px!important;
    overflow:auto!important;
  }
  .tv-mode .top-rail{grid-column:1!important;grid-row:2!important}
  .tv-mode .map-section{grid-column:1!important;grid-row:3!important;min-height:360px!important}
  .tv-mode .operators{grid-column:1!important;grid-row:4!important;min-height:260px!important}
  .tv-mode .tv-ticker{display:none!important}
  .tv-mode .clock-zone{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr)!important}
  .tv-mode .clock-location em{min-height:auto!important}
}